React Package

npm i @jiran/ds-react

// main.tsx — 앱 진입점에서 한 번
import "@jiran/ds-react/style.css";   // 토큰 + 컴포넌트 CSS (사이트 크롬 제외)
import { ToastProvider, applyAccent } from "@jiran/ds-react";

applyAccent("#1D4ED8");               // 제품 메인 컬러 → --accent-50~900 생성

createRoot(document.getElementById("root")!).render(
  <ToastProvider>
    <App />
  </ToastProvider>,
);

import { Button, TextField, Tag, DataTable, useToast } from "@jiran/ds-react";

function PolicyForm() {
  const toast = useToast();
  return (
    <form onSubmit={(e) => { e.preventDefault(); toast.show("정책이 저장되었습니다"); }}>
      <TextField label="정책 이름" required help="2~40자" />
      <Tag tone="critical">Critical</Tag>
      <Button type="submit" size="md" variant="primary">정책 저장</Button>
    </form>
  );
}

<link rel="stylesheet" href="assets/style.css">
<script src="assets/ds.js" defer></script>

<script>
  // 프로그램 API
  DS.toast("저장되었습니다", { action: { label: "실행 취소", onClick: undo } }); // tone:"danger", duration(ms, 0=유지)
  DS.popup.open("#confirm-delete"); // .popup 요소를 배경과 함께 표시(Esc·배경 클릭·[data-popup-close] 로 닫힘)
  document.addEventListener("ds:select", e => console.log(e.detail.value)); // ds:select · ds:tab · ds:page · ds:date · ds:slide
</script>