@bridger-kr/react 0.1.0

package/dist/components/feedback/Spinner.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+interface SpinnerProps {
+    size?: number;
+    stroke?: number;
+    color?: string;
+    style?: CSSProperties;
+}
+declare function Spinner({ size, stroke, color, style }: SpinnerProps): react.JSX.Element;
+
+export { Spinner, type SpinnerProps };

package/dist/components/feedback/Spinner.mjs

@@ -0,0 +1,15 @@
+import { useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/feedback/Spinner.tsx
+function Spinner({ size = 18, stroke = 2, color = "var(--dt-accent)", style }) {
+  useId();
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", ...style }, role: "status", "aria-label": "\uB85C\uB529 \uC911", children: /* @__PURE__ */ jsxs("svg", { className: "dt-spinner-svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: stroke, style: { color: "var(--dt-border-strong)", opacity: 0.5 } }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 0 1 9 9", stroke: color, strokeWidth: stroke, strokeLinecap: "round" })
+  ] }) });
+}
+
+export { Spinner };
+//# sourceMappingURL=Spinner.mjs.map
+//# sourceMappingURL=Spinner.mjs.map

package/dist/components/feedback/Spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Spinner.tsx"],"names":[],"mappings":";;;;AAUO,SAAS,OAAA,CAAQ,EAAE,IAAA,GAAO,EAAA,EAAI,SAAS,CAAA,EAAG,KAAA,GAAQ,kBAAA,EAAoB,KAAA,EAAM,EAAiB;AAClG,EAAA,KAAA,EAAM;AACN,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,eAAe,GAAG,KAAA,EAAM,EAAG,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,uBAC1E,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EAAiB,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA,EAAM,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAClF,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,YAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,MAAA,EAAO,cAAA,EAAe,WAAA,EAAa,QAAQ,KAAA,EAAO,EAAE,OAAO,yBAAA,EAA2B,OAAA,EAAS,KAAI,EAAG,CAAA;AAAA,oBACpI,GAAA,CAAC,UAAK,CAAA,EAAE,qBAAA,EAAsB,QAAQ,KAAA,EAAO,WAAA,EAAa,MAAA,EAAQ,aAAA,EAAc,OAAA,EAAQ;AAAA,GAAA,EAC1F,CAAA,EACF,CAAA;AAEJ","file":"Spinner.mjs","sourcesContent":["import type { CSSProperties } from 'react';\nimport { useId } from 'react';\n\nexport interface SpinnerProps {\n  size?: number;\n  stroke?: number;\n  color?: string;\n  style?: CSSProperties;\n}\n\nexport function Spinner({ size = 18, stroke = 2, color = 'var(--dt-accent)', style }: SpinnerProps) {\n  useId();\n  return (\n    <span style={{ display: 'inline-flex', ...style }} role=\"status\" aria-label=\"로딩 중\">\n      <svg className=\"dt-spinner-svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth={stroke} style={{ color: 'var(--dt-border-strong)', opacity: 0.5 }} />\n        <path d=\"M12 3a9 9 0 0 1 9 9\" stroke={color} strokeWidth={stroke} strokeLinecap=\"round\" />\n      </svg>\n    </span>\n  );\n}\n"]}

package/dist/components/feedback/Toast.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/Toast.tsx
+var DOT = { info: "var(--dt-cobalt)", success: "var(--dt-success)", warning: "var(--dt-warning)", danger: "var(--dt-danger)" };
+function Toast({ tone = "success", title, message, action, onDismiss, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: "dt-toast", style: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 11,
+    width: 340,
+    maxWidth: "90vw",
+    padding: "13px 15px",
+    background: "var(--dt-surface)",
+    borderRadius: "var(--dt-radius-md)",
+    boxShadow: "var(--dt-shadow-lg)",
+    ...style
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, marginTop: 5, flex: "0 0 auto", background: DOT[tone] ?? DOT.success } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 650, color: "var(--dt-ink-strong)" }, children: title }) : null,
+      message ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: title ? 2 : 0, fontSize: 13, lineHeight: 1.5, color: "var(--dt-muted-strong)" }, children: message }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "0 0 auto" }, children: action }) : null,
+    onDismiss ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onDismiss, "aria-label": "\uB2EB\uAE30", style: { flex: "0 0 auto", border: "none", background: "transparent", cursor: "pointer", color: "var(--dt-muted)", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) : null
+  ] });
+}
+
+exports.Toast = Toast;
+//# sourceMappingURL=Toast.cjs.map
+//# sourceMappingURL=Toast.cjs.map

package/dist/components/feedback/Toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Toast.tsx"],"names":["jsx","jsxs"],"mappings":";;;;;AAEA,IAAM,GAAA,GAAM,EAAE,IAAA,EAAM,kBAAA,EAAoB,SAAS,mBAAA,EAAqB,OAAA,EAAS,mBAAA,EAAqB,MAAA,EAAQ,kBAAA,EAAmB;AAWxH,SAAS,KAAA,CAAM,EAAE,IAAA,GAAO,SAAA,EAAW,OAAO,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAM,EAAe;AAChG,EAAA,uCACG,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,SAAA,EAAU,YAAW,KAAA,EAAO;AAAA,IAC7C,OAAA,EAAS,MAAA;AAAA,IAAQ,UAAA,EAAY,YAAA;AAAA,IAAc,GAAA,EAAK,EAAA;AAAA,IAAI,KAAA,EAAO,GAAA;AAAA,IAAK,QAAA,EAAU,MAAA;AAAA,IAC1E,OAAA,EAAS,WAAA;AAAA,IAAa,UAAA,EAAY,mBAAA;AAAA,IAClC,YAAA,EAAc,qBAAA;AAAA,IAAuB,SAAA,EAAW,qBAAA;AAAA,IAChD,GAAG;AAAA,GACL,EACE,QAAA,EAAA;AAAA,oBAAAA,cAAA,CAAC,UAAK,KAAA,EAAO,EAAE,OAAO,CAAA,EAAG,MAAA,EAAQ,GAAG,YAAA,EAAc,IAAA,EAAM,WAAW,CAAA,EAAG,IAAA,EAAM,YAAY,UAAA,EAAY,GAAA,CAAI,IAAI,CAAA,IAAK,GAAA,CAAI,SAAQ,EAAG,CAAA;AAAA,oBAChIC,eAAA,CAAC,SAAI,KAAA,EAAO,EAAE,MAAM,CAAA,EAAG,QAAA,EAAU,GAAE,EAChC,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQD,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,sBAAA,EAAuB,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAS,IAAA;AAAA,MACtG,0BAAUA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,WAAW,KAAA,GAAQ,CAAA,GAAI,CAAA,EAAG,QAAA,EAAU,IAAI,UAAA,EAAY,GAAA,EAAK,OAAO,wBAAA,EAAyB,EAAI,mBAAQ,CAAA,GAAS;AAAA,KAAA,EACzI,CAAA;AAAA,IACC,MAAA,kCAAU,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAW,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAS,IAAA;AAAA,IAC5D,SAAA,kCACE,QAAA,EAAA,EAAO,OAAA,EAAS,WAAW,YAAA,EAAW,cAAA,EAAK,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAY,QAAQ,MAAA,EAAQ,UAAA,EAAY,eAAe,MAAA,EAAQ,SAAA,EAAW,OAAO,iBAAA,EAAmB,OAAA,EAAS,CAAA,EAAG,UAAA,EAAY,CAAA,EAAE,EACvL,yCAAC,KAAA,EAAA,EAAI,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAY,MAAA,EAAO,QAAA,kBAAAA,cAAA,CAAC,UAAK,CAAA,EAAE,sBAAA,EAAuB,QAAO,cAAA,EAAe,WAAA,EAAY,KAAI,aAAA,EAAc,OAAA,EAAQ,CAAA,EAAE,CAAA,EAC9K,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ","file":"Toast.cjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nconst DOT = { info: 'var(--dt-cobalt)', success: 'var(--dt-success)', warning: 'var(--dt-warning)', danger: 'var(--dt-danger)' };\n\nexport interface ToastProps {\n  tone?: keyof typeof DOT;\n  title?: ReactNode;\n  message?: ReactNode;\n  action?: ReactNode;\n  onDismiss?: () => void;\n  style?: CSSProperties;\n}\n\nexport function Toast({ tone = 'success', title, message, action, onDismiss, style }: ToastProps) {\n  return (\n    <div role=\"status\" className=\"dt-toast\" style={{\n      display: 'flex', alignItems: 'flex-start', gap: 11, width: 340, maxWidth: '90vw',\n      padding: '13px 15px', background: 'var(--dt-surface)',\n      borderRadius: 'var(--dt-radius-md)', boxShadow: 'var(--dt-shadow-lg)',\n      ...style,\n    }}>\n      <span style={{ width: 8, height: 8, borderRadius: 9999, marginTop: 5, flex: '0 0 auto', background: DOT[tone] ?? DOT.success }} />\n      <div style={{ flex: 1, minWidth: 0 }}>\n        {title ? <div style={{ fontSize: 14, fontWeight: 650, color: 'var(--dt-ink-strong)' }}>{title}</div> : null}\n        {message ? <div style={{ marginTop: title ? 2 : 0, fontSize: 13, lineHeight: 1.5, color: 'var(--dt-muted-strong)' }}>{message}</div> : null}\n      </div>\n      {action ? <div style={{ flex: '0 0 auto' }}>{action}</div> : null}\n      {onDismiss ? (\n        <button onClick={onDismiss} aria-label=\"닫기\" style={{ flex: '0 0 auto', border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--dt-muted)', padding: 2, lineHeight: 0 }}>\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Toast.d.cts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+declare const DOT: {
+    info: string;
+    success: string;
+    warning: string;
+    danger: string;
+};
+interface ToastProps {
+    tone?: keyof typeof DOT;
+    title?: ReactNode;
+    message?: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    style?: CSSProperties;
+}
+declare function Toast({ tone, title, message, action, onDismiss, style }: ToastProps): react.JSX.Element;
+
+export { Toast, type ToastProps };

package/dist/components/feedback/Toast.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+declare const DOT: {
+    info: string;
+    success: string;
+    warning: string;
+    danger: string;
+};
+interface ToastProps {
+    tone?: keyof typeof DOT;
+    title?: ReactNode;
+    message?: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    style?: CSSProperties;
+}
+declare function Toast({ tone, title, message, action, onDismiss, style }: ToastProps): react.JSX.Element;
+
+export { Toast, type ToastProps };

package/dist/components/feedback/Toast.mjs

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Toast.tsx
+var DOT = { info: "var(--dt-cobalt)", success: "var(--dt-success)", warning: "var(--dt-warning)", danger: "var(--dt-danger)" };
+function Toast({ tone = "success", title, message, action, onDismiss, style }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: "dt-toast", style: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 11,
+    width: 340,
+    maxWidth: "90vw",
+    padding: "13px 15px",
+    background: "var(--dt-surface)",
+    borderRadius: "var(--dt-radius-md)",
+    boxShadow: "var(--dt-shadow-lg)",
+    ...style
+  }, children: [
+    /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, marginTop: 5, flex: "0 0 auto", background: DOT[tone] ?? DOT.success } }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 650, color: "var(--dt-ink-strong)" }, children: title }) : null,
+      message ? /* @__PURE__ */ jsx("div", { style: { marginTop: title ? 2 : 0, fontSize: 13, lineHeight: 1.5, color: "var(--dt-muted-strong)" }, children: message }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 auto" }, children: action }) : null,
+    onDismiss ? /* @__PURE__ */ jsx("button", { onClick: onDismiss, "aria-label": "\uB2EB\uAE30", style: { flex: "0 0 auto", border: "none", background: "transparent", cursor: "pointer", color: "var(--dt-muted)", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) : null
+  ] });
+}
+
+export { Toast };
+//# sourceMappingURL=Toast.mjs.map
+//# sourceMappingURL=Toast.mjs.map

package/dist/components/feedback/Toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Toast.tsx"],"names":[],"mappings":";;;AAEA,IAAM,GAAA,GAAM,EAAE,IAAA,EAAM,kBAAA,EAAoB,SAAS,mBAAA,EAAqB,OAAA,EAAS,mBAAA,EAAqB,MAAA,EAAQ,kBAAA,EAAmB;AAWxH,SAAS,KAAA,CAAM,EAAE,IAAA,GAAO,SAAA,EAAW,OAAO,OAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAM,EAAe;AAChG,EAAA,4BACG,KAAA,EAAA,EAAI,IAAA,EAAK,QAAA,EAAS,SAAA,EAAU,YAAW,KAAA,EAAO;AAAA,IAC7C,OAAA,EAAS,MAAA;AAAA,IAAQ,UAAA,EAAY,YAAA;AAAA,IAAc,GAAA,EAAK,EAAA;AAAA,IAAI,KAAA,EAAO,GAAA;AAAA,IAAK,QAAA,EAAU,MAAA;AAAA,IAC1E,OAAA,EAAS,WAAA;AAAA,IAAa,UAAA,EAAY,mBAAA;AAAA,IAClC,YAAA,EAAc,qBAAA;AAAA,IAAuB,SAAA,EAAW,qBAAA;AAAA,IAChD,GAAG;AAAA,GACL,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAK,KAAA,EAAO,EAAE,OAAO,CAAA,EAAG,MAAA,EAAQ,GAAG,YAAA,EAAc,IAAA,EAAM,WAAW,CAAA,EAAG,IAAA,EAAM,YAAY,UAAA,EAAY,GAAA,CAAI,IAAI,CAAA,IAAK,GAAA,CAAI,SAAQ,EAAG,CAAA;AAAA,oBAChI,IAAA,CAAC,SAAI,KAAA,EAAO,EAAE,MAAM,CAAA,EAAG,QAAA,EAAU,GAAE,EAChC,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,sBAAA,EAAuB,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAS,IAAA;AAAA,MACtG,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,WAAW,KAAA,GAAQ,CAAA,GAAI,CAAA,EAAG,QAAA,EAAU,IAAI,UAAA,EAAY,GAAA,EAAK,OAAO,wBAAA,EAAyB,EAAI,mBAAQ,CAAA,GAAS;AAAA,KAAA,EACzI,CAAA;AAAA,IACC,MAAA,uBAAU,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAW,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAS,IAAA;AAAA,IAC5D,SAAA,uBACE,QAAA,EAAA,EAAO,OAAA,EAAS,WAAW,YAAA,EAAW,cAAA,EAAK,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAY,QAAQ,MAAA,EAAQ,UAAA,EAAY,eAAe,MAAA,EAAQ,SAAA,EAAW,OAAO,iBAAA,EAAmB,OAAA,EAAS,CAAA,EAAG,UAAA,EAAY,CAAA,EAAE,EACvL,8BAAC,KAAA,EAAA,EAAI,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAY,MAAA,EAAO,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAA,EAAE,sBAAA,EAAuB,QAAO,cAAA,EAAe,WAAA,EAAY,KAAI,aAAA,EAAc,OAAA,EAAQ,CAAA,EAAE,CAAA,EAC9K,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ","file":"Toast.mjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nconst DOT = { info: 'var(--dt-cobalt)', success: 'var(--dt-success)', warning: 'var(--dt-warning)', danger: 'var(--dt-danger)' };\n\nexport interface ToastProps {\n  tone?: keyof typeof DOT;\n  title?: ReactNode;\n  message?: ReactNode;\n  action?: ReactNode;\n  onDismiss?: () => void;\n  style?: CSSProperties;\n}\n\nexport function Toast({ tone = 'success', title, message, action, onDismiss, style }: ToastProps) {\n  return (\n    <div role=\"status\" className=\"dt-toast\" style={{\n      display: 'flex', alignItems: 'flex-start', gap: 11, width: 340, maxWidth: '90vw',\n      padding: '13px 15px', background: 'var(--dt-surface)',\n      borderRadius: 'var(--dt-radius-md)', boxShadow: 'var(--dt-shadow-lg)',\n      ...style,\n    }}>\n      <span style={{ width: 8, height: 8, borderRadius: 9999, marginTop: 5, flex: '0 0 auto', background: DOT[tone] ?? DOT.success }} />\n      <div style={{ flex: 1, minWidth: 0 }}>\n        {title ? <div style={{ fontSize: 14, fontWeight: 650, color: 'var(--dt-ink-strong)' }}>{title}</div> : null}\n        {message ? <div style={{ marginTop: title ? 2 : 0, fontSize: 13, lineHeight: 1.5, color: 'var(--dt-muted-strong)' }}>{message}</div> : null}\n      </div>\n      {action ? <div style={{ flex: '0 0 auto' }}>{action}</div> : null}\n      {onDismiss ? (\n        <button onClick={onDismiss} aria-label=\"닫기\" style={{ flex: '0 0 auto', border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--dt-muted)', padding: 2, lineHeight: 0 }}>\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Tooltip.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/Tooltip.tsx
+function Tooltip({ label, position = "top", children }) {
+  const tooltipId = react.useId();
+  const [show, setShow] = react.useState(false);
+  const pos = {
+    top: { bottom: "100%", left: "50%", transform: "translateX(-50%) translateY(-7px)" },
+    bottom: { top: "100%", left: "50%", transform: "translateX(-50%) translateY(7px)" },
+    left: { right: "100%", top: "50%", transform: "translateY(-50%) translateX(-7px)" },
+    right: { left: "100%", top: "50%", transform: "translateY(-50%) translateX(7px)" }
+  }[position];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(false),
+      onFocus: () => setShow(true),
+      onBlur: () => setShow(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": show ? tooltipId : void 0, children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { id: tooltipId, role: "tooltip", style: {
+          position: "absolute",
+          zIndex: 60,
+          whiteSpace: "nowrap",
+          pointerEvents: "none",
+          opacity: show ? 1 : 0,
+          visibility: show ? "visible" : "hidden",
+          padding: "6px 9px",
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: 1.2,
+          color: "var(--dt-paper)",
+          background: "var(--dt-ink-strong)",
+          borderRadius: "var(--dt-radius-sm)",
+          boxShadow: "var(--dt-shadow-md)",
+          transition: "opacity var(--dt-motion-fast), visibility var(--dt-motion-fast)",
+          ...pos
+        }, children: label })
+      ]
+    }
+  );
+}
+
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.cjs.map
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/components/feedback/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Tooltip.tsx"],"names":["useId","useState","jsxs","jsx"],"mappings":";;;;;;AASO,SAAS,QAAQ,EAAE,KAAA,EAAO,QAAA,GAAW,KAAA,EAAO,UAAS,EAAiB;AAC3E,EAAA,MAAM,YAAYA,WAAA,EAAM;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAA,MAAM,GAAA,GAAqB;AAAA,IACzB,KAAK,EAAE,MAAA,EAAQ,QAAQ,IAAA,EAAM,KAAA,EAAO,WAAW,mCAAA,EAAoC;AAAA,IACnF,QAAQ,EAAE,GAAA,EAAK,QAAQ,IAAA,EAAM,KAAA,EAAO,WAAW,kCAAA,EAAmC;AAAA,IAClF,MAAM,EAAE,KAAA,EAAO,QAAQ,GAAA,EAAK,KAAA,EAAO,WAAW,mCAAA,EAAoC;AAAA,IAClF,OAAO,EAAE,IAAA,EAAM,QAAQ,GAAA,EAAK,KAAA,EAAO,WAAW,kCAAA;AAAmC,IACjF,QAAQ,CAAA;AACV,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAAK,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,SAAS,aAAA,EAAc;AAAA,MAC1D,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAG,YAAA,EAAc,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MACpE,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAG,MAAA,EAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MACzD,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,kBAAA,EAAkB,IAAA,GAAO,SAAA,GAAY,QAAY,QAAA,EAAS,CAAA;AAAA,uCAC/D,MAAA,EAAA,EAAK,EAAA,EAAI,SAAA,EAAW,IAAA,EAAK,WAAU,KAAA,EAAO;AAAA,UACzC,QAAA,EAAU,UAAA;AAAA,UAAY,MAAA,EAAQ,EAAA;AAAA,UAAI,UAAA,EAAY,QAAA;AAAA,UAAU,aAAA,EAAe,MAAA;AAAA,UACvE,OAAA,EAAS,OAAO,CAAA,GAAI,CAAA;AAAA,UAAG,UAAA,EAAY,OAAO,SAAA,GAAY,QAAA;AAAA,UACtD,OAAA,EAAS,SAAA;AAAA,UAAW,QAAA,EAAU,EAAA;AAAA,UAAI,UAAA,EAAY,GAAA;AAAA,UAAK,UAAA,EAAY,GAAA;AAAA,UAC/D,KAAA,EAAO,iBAAA;AAAA,UAAmB,UAAA,EAAY,sBAAA;AAAA,UACtC,YAAA,EAAc,qBAAA;AAAA,UAAuB,SAAA,EAAW,qBAAA;AAAA,UAChD,UAAA,EAAY,iEAAA;AAAA,UAAmE,GAAG;AAAA,WAChF,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACZ;AAEJ","file":"Tooltip.cjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useState, useId } from 'react';\n\nexport interface TooltipProps {\n  label: ReactNode;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  children: ReactNode;\n}\n\nexport function Tooltip({ label, position = 'top', children }: TooltipProps) {\n  const tooltipId = useId();\n  const [show, setShow] = useState(false);\n  const pos: CSSProperties = {\n    top: { bottom: '100%', left: '50%', transform: 'translateX(-50%) translateY(-7px)' },\n    bottom: { top: '100%', left: '50%', transform: 'translateX(-50%) translateY(7px)' },\n    left: { right: '100%', top: '50%', transform: 'translateY(-50%) translateX(-7px)' },\n    right: { left: '100%', top: '50%', transform: 'translateY(-50%) translateX(7px)' },\n  }[position];\n  return (\n    <span style={{ position: 'relative', display: 'inline-flex' }}\n      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}\n      onFocus={() => setShow(true)} onBlur={() => setShow(false)}>\n      <span aria-describedby={show ? tooltipId : undefined}>{children}</span>\n      <span id={tooltipId} role=\"tooltip\" style={{\n        position: 'absolute', zIndex: 60, whiteSpace: 'nowrap', pointerEvents: 'none',\n        opacity: show ? 1 : 0, visibility: show ? 'visible' : 'hidden',\n        padding: '6px 9px', fontSize: 12, fontWeight: 500, lineHeight: 1.2,\n        color: 'var(--dt-paper)', background: 'var(--dt-ink-strong)',\n        borderRadius: 'var(--dt-radius-sm)', boxShadow: 'var(--dt-shadow-md)',\n        transition: 'opacity var(--dt-motion-fast), visibility var(--dt-motion-fast)', ...pos,\n      }}>{label}</span>\n    </span>\n  );\n}\n"]}

package/dist/components/feedback/Tooltip.d.cts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TooltipProps {
+    label: ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    children: ReactNode;
+}
+declare function Tooltip({ label, position, children }: TooltipProps): react.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/feedback/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TooltipProps {
+    label: ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    children: ReactNode;
+}
+declare function Tooltip({ label, position, children }: TooltipProps): react.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/feedback/Tooltip.mjs

@@ -0,0 +1,49 @@
+import { useId, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Tooltip.tsx
+function Tooltip({ label, position = "top", children }) {
+  const tooltipId = useId();
+  const [show, setShow] = useState(false);
+  const pos = {
+    top: { bottom: "100%", left: "50%", transform: "translateX(-50%) translateY(-7px)" },
+    bottom: { top: "100%", left: "50%", transform: "translateX(-50%) translateY(7px)" },
+    left: { right: "100%", top: "50%", transform: "translateY(-50%) translateX(-7px)" },
+    right: { left: "100%", top: "50%", transform: "translateY(-50%) translateX(7px)" }
+  }[position];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(false),
+      onFocus: () => setShow(true),
+      onBlur: () => setShow(false),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-describedby": show ? tooltipId : void 0, children }),
+        /* @__PURE__ */ jsx("span", { id: tooltipId, role: "tooltip", style: {
+          position: "absolute",
+          zIndex: 60,
+          whiteSpace: "nowrap",
+          pointerEvents: "none",
+          opacity: show ? 1 : 0,
+          visibility: show ? "visible" : "hidden",
+          padding: "6px 9px",
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: 1.2,
+          color: "var(--dt-paper)",
+          background: "var(--dt-ink-strong)",
+          borderRadius: "var(--dt-radius-sm)",
+          boxShadow: "var(--dt-shadow-md)",
+          transition: "opacity var(--dt-motion-fast), visibility var(--dt-motion-fast)",
+          ...pos
+        }, children: label })
+      ]
+    }
+  );
+}
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.mjs.map
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/components/feedback/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Tooltip.tsx"],"names":[],"mappings":";;;;AASO,SAAS,QAAQ,EAAE,KAAA,EAAO,QAAA,GAAW,KAAA,EAAO,UAAS,EAAiB;AAC3E,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,GAAA,GAAqB;AAAA,IACzB,KAAK,EAAE,MAAA,EAAQ,QAAQ,IAAA,EAAM,KAAA,EAAO,WAAW,mCAAA,EAAoC;AAAA,IACnF,QAAQ,EAAE,GAAA,EAAK,QAAQ,IAAA,EAAM,KAAA,EAAO,WAAW,kCAAA,EAAmC;AAAA,IAClF,MAAM,EAAE,KAAA,EAAO,QAAQ,GAAA,EAAK,KAAA,EAAO,WAAW,mCAAA,EAAoC;AAAA,IAClF,OAAO,EAAE,IAAA,EAAM,QAAQ,GAAA,EAAK,KAAA,EAAO,WAAW,kCAAA;AAAmC,IACjF,QAAQ,CAAA;AACV,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAAK,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,SAAS,aAAA,EAAc;AAAA,MAC1D,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAG,YAAA,EAAc,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MACpE,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAG,MAAA,EAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MACzD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,kBAAA,EAAkB,IAAA,GAAO,SAAA,GAAY,QAAY,QAAA,EAAS,CAAA;AAAA,4BAC/D,MAAA,EAAA,EAAK,EAAA,EAAI,SAAA,EAAW,IAAA,EAAK,WAAU,KAAA,EAAO;AAAA,UACzC,QAAA,EAAU,UAAA;AAAA,UAAY,MAAA,EAAQ,EAAA;AAAA,UAAI,UAAA,EAAY,QAAA;AAAA,UAAU,aAAA,EAAe,MAAA;AAAA,UACvE,OAAA,EAAS,OAAO,CAAA,GAAI,CAAA;AAAA,UAAG,UAAA,EAAY,OAAO,SAAA,GAAY,QAAA;AAAA,UACtD,OAAA,EAAS,SAAA;AAAA,UAAW,QAAA,EAAU,EAAA;AAAA,UAAI,UAAA,EAAY,GAAA;AAAA,UAAK,UAAA,EAAY,GAAA;AAAA,UAC/D,KAAA,EAAO,iBAAA;AAAA,UAAmB,UAAA,EAAY,sBAAA;AAAA,UACtC,YAAA,EAAc,qBAAA;AAAA,UAAuB,SAAA,EAAW,qBAAA;AAAA,UAChD,UAAA,EAAY,iEAAA;AAAA,UAAmE,GAAG;AAAA,WAChF,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACZ;AAEJ","file":"Tooltip.mjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useState, useId } from 'react';\n\nexport interface TooltipProps {\n  label: ReactNode;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  children: ReactNode;\n}\n\nexport function Tooltip({ label, position = 'top', children }: TooltipProps) {\n  const tooltipId = useId();\n  const [show, setShow] = useState(false);\n  const pos: CSSProperties = {\n    top: { bottom: '100%', left: '50%', transform: 'translateX(-50%) translateY(-7px)' },\n    bottom: { top: '100%', left: '50%', transform: 'translateX(-50%) translateY(7px)' },\n    left: { right: '100%', top: '50%', transform: 'translateY(-50%) translateX(-7px)' },\n    right: { left: '100%', top: '50%', transform: 'translateY(-50%) translateX(7px)' },\n  }[position];\n  return (\n    <span style={{ position: 'relative', display: 'inline-flex' }}\n      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}\n      onFocus={() => setShow(true)} onBlur={() => setShow(false)}>\n      <span aria-describedby={show ? tooltipId : undefined}>{children}</span>\n      <span id={tooltipId} role=\"tooltip\" style={{\n        position: 'absolute', zIndex: 60, whiteSpace: 'nowrap', pointerEvents: 'none',\n        opacity: show ? 1 : 0, visibility: show ? 'visible' : 'hidden',\n        padding: '6px 9px', fontSize: 12, fontWeight: 500, lineHeight: 1.2,\n        color: 'var(--dt-paper)', background: 'var(--dt-ink-strong)',\n        borderRadius: 'var(--dt-radius-sm)', boxShadow: 'var(--dt-shadow-md)',\n        transition: 'opacity var(--dt-motion-fast), visibility var(--dt-motion-fast)', ...pos,\n      }}>{label}</span>\n    </span>\n  );\n}\n"]}

package/dist/components/forms/Checkbox.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/Checkbox.tsx
+function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }) {
+  const cbId = id || (label ? `cb-${String(label).replace(/\s+/g, "-")}` : void 0);
+  const [internal, setInternal] = react.useState(defaultChecked ?? false);
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    if (checked === void 0) setInternal((v) => !v);
+    onChange?.(!isOn);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: cbId,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 9,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: cbId,
+            type: "checkbox",
+            checked: isOn,
+            onChange: toggle,
+            disabled,
+            style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              width: 18,
+              height: 18,
+              flex: "0 0 auto",
+              borderRadius: 5,
+              display: "grid",
+              placeItems: "center",
+              background: isOn ? "var(--dt-accent)" : "var(--dt-surface)",
+              border: `1.5px solid ${isOn ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+              transition: "background-color 130ms, border-color 130ms"
+            },
+            children: isOn ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M5 12l4.5 4.5L19 7",
+                stroke: "var(--dt-accent-ink)",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) }) : null
+          }
+        ),
+        label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)" }, children: label }) : null
+      ]
+    }
+  );
+}
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.cjs.map
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/components/forms/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Checkbox.tsx"],"names":["useState","jsxs","jsx"],"mappings":"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","file":"Checkbox.cjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'checked' | 'defaultChecked' | 'disabled' | 'id' | 'label' | 'onChange' | 'style'\n  > {\n  label?: ReactNode;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/** Checkbox — persimmon fill when checked. */\nexport function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }: CheckboxProps) {\n  const cbId = id || (label ? `cb-${String(label).replace(/\\s+/g, '-')}` : undefined);\n  const [internal, setInternal] = useState(defaultChecked ?? false);\n  const isOn = checked !== undefined ? checked : internal;\n  const toggle = () => {\n    if (disabled) return;\n    if (checked === undefined) setInternal((v) => !v);\n    onChange?.(!isOn);\n  };\n  return (\n    <label\n      htmlFor={cbId}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 9,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        opacity: disabled ? 0.55 : 1,\n        ...style,\n      }}\n    >\n      <input\n        id={cbId}\n        type=\"checkbox\"\n        checked={isOn}\n        onChange={toggle}\n        disabled={disabled}\n        style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }}\n      />\n      <span\n        style={{\n          width: 18,\n          height: 18,\n          flex: '0 0 auto',\n          borderRadius: 5,\n          display: 'grid',\n          placeItems: 'center',\n          background: isOn ? 'var(--dt-accent)' : 'var(--dt-surface)',\n          border: `1.5px solid ${isOn ? 'var(--dt-accent)' : 'var(--dt-border-strong)'}`,\n          transition: 'background-color 130ms, border-color 130ms',\n        }}\n      >\n        {isOn ? (\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path\n              d=\"M5 12l4.5 4.5L19 7\"\n              stroke=\"var(--dt-accent-ink)\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        ) : null}\n      </span>\n      {label ? <span style={{ fontSize: 14, color: 'var(--dt-ink)' }}>{label}</span> : null}\n    </label>\n  );\n}\n"]}

package/dist/components/forms/Checkbox.d.cts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'disabled' | 'id' | 'label' | 'onChange' | 'style'> {
+    label?: ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+    style?: CSSProperties;
+}
+/** Checkbox — persimmon fill when checked. */
+declare function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }: CheckboxProps): react.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/components/forms/Checkbox.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'disabled' | 'id' | 'label' | 'onChange' | 'style'> {
+    label?: ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+    style?: CSSProperties;
+}
+/** Checkbox — persimmon fill when checked. */
+declare function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }: CheckboxProps): react.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/components/forms/Checkbox.mjs

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/Checkbox.tsx
+function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }) {
+  const cbId = id || (label ? `cb-${String(label).replace(/\s+/g, "-")}` : void 0);
+  const [internal, setInternal] = useState(defaultChecked ?? false);
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    if (checked === void 0) setInternal((v) => !v);
+    onChange?.(!isOn);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: cbId,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 9,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: cbId,
+            type: "checkbox",
+            checked: isOn,
+            onChange: toggle,
+            disabled,
+            style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 18,
+              height: 18,
+              flex: "0 0 auto",
+              borderRadius: 5,
+              display: "grid",
+              placeItems: "center",
+              background: isOn ? "var(--dt-accent)" : "var(--dt-surface)",
+              border: `1.5px solid ${isOn ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+              transition: "background-color 130ms, border-color 130ms"
+            },
+            children: isOn ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M5 12l4.5 4.5L19 7",
+                stroke: "var(--dt-accent-ink)",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) }) : null
+          }
+        ),
+        label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)" }, children: label }) : null
+      ]
+    }
+  );
+}
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.mjs.map
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/forms/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":";;;;AAkBO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,OAAA,EAAS,gBAAgB,QAAA,EAAU,QAAA,EAAU,EAAA,EAAI,KAAA,EAAM,EAAkB;AACzG,EAAA,MAAM,IAAA,GAAO,EAAA,KAAO,KAAA,GAAQ,CAAA,GAAA,EAAM,MAAA,CAAO,KAAK,CAAA,CAAE,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAC,CAAA,CAAA,GAAK,MAAA,CAAA;AACzE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,CAAS,kBAAkB,KAAK,CAAA;AAChE,EAAA,MAAM,IAAA,GAAO,OAAA,KAAY,MAAA,GAAY,OAAA,GAAU,QAAA;AAC/C,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,IAAI,QAAA,EAAU;AACd,IAAA,IAAI,YAAY,MAAA,EAAW,WAAA,CAAY,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAChD,IAAA,QAAA,GAAW,CAAC,IAAI,CAAA;AAAA,EAClB,CAAA;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,IAAA;AAAA,MACT,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,aAAA;AAAA,QACT,UAAA,EAAY,QAAA;AAAA,QACZ,GAAA,EAAK,CAAA;AAAA,QACL,MAAA,EAAQ,WAAW,aAAA,GAAgB,SAAA;AAAA,QACnC,OAAA,EAAS,WAAW,IAAA,GAAO,CAAA;AAAA,QAC3B,GAAG;AAAA,OACL;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,IAAA;AAAA,YACJ,IAAA,EAAK,UAAA;AAAA,YACL,OAAA,EAAS,IAAA;AAAA,YACT,QAAA,EAAU,MAAA;AAAA,YACV,QAAA;AAAA,YACA,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,SAAS,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,MAAA,EAAQ,CAAA;AAAE;AAAA,SACjE;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,EAAA;AAAA,cACP,MAAA,EAAQ,EAAA;AAAA,cACR,IAAA,EAAM,UAAA;AAAA,cACN,YAAA,EAAc,CAAA;AAAA,cACd,OAAA,EAAS,MAAA;AAAA,cACT,UAAA,EAAY,QAAA;AAAA,cACZ,UAAA,EAAY,OAAO,kBAAA,GAAqB,mBAAA;AAAA,cACxC,MAAA,EAAQ,CAAA,YAAA,EAAe,IAAA,GAAO,kBAAA,GAAqB,yBAAyB,CAAA,CAAA;AAAA,cAC5E,UAAA,EAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA,IAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAY,MAAA,EACtE,QAAA,kBAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,CAAA,EAAE,oBAAA;AAAA,gBACF,MAAA,EAAO,sBAAA;AAAA,gBACP,WAAA,EAAY,GAAA;AAAA,gBACZ,aAAA,EAAc,OAAA;AAAA,gBACd,cAAA,EAAe;AAAA;AAAA,eAEnB,CAAA,GACE;AAAA;AAAA,SACN;AAAA,QACC,KAAA,mBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,KAAA,EAAO,eAAA,EAAgB,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAU;AAAA;AAAA;AAAA,GACnF;AAEJ","file":"Checkbox.mjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'checked' | 'defaultChecked' | 'disabled' | 'id' | 'label' | 'onChange' | 'style'\n  > {\n  label?: ReactNode;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/** Checkbox — persimmon fill when checked. */\nexport function Checkbox({ label, checked, defaultChecked, onChange, disabled, id, style }: CheckboxProps) {\n  const cbId = id || (label ? `cb-${String(label).replace(/\\s+/g, '-')}` : undefined);\n  const [internal, setInternal] = useState(defaultChecked ?? false);\n  const isOn = checked !== undefined ? checked : internal;\n  const toggle = () => {\n    if (disabled) return;\n    if (checked === undefined) setInternal((v) => !v);\n    onChange?.(!isOn);\n  };\n  return (\n    <label\n      htmlFor={cbId}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 9,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        opacity: disabled ? 0.55 : 1,\n        ...style,\n      }}\n    >\n      <input\n        id={cbId}\n        type=\"checkbox\"\n        checked={isOn}\n        onChange={toggle}\n        disabled={disabled}\n        style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }}\n      />\n      <span\n        style={{\n          width: 18,\n          height: 18,\n          flex: '0 0 auto',\n          borderRadius: 5,\n          display: 'grid',\n          placeItems: 'center',\n          background: isOn ? 'var(--dt-accent)' : 'var(--dt-surface)',\n          border: `1.5px solid ${isOn ? 'var(--dt-accent)' : 'var(--dt-border-strong)'}`,\n          transition: 'background-color 130ms, border-color 130ms',\n        }}\n      >\n        {isOn ? (\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path\n              d=\"M5 12l4.5 4.5L19 7\"\n              stroke=\"var(--dt-accent-ink)\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        ) : null}\n      </span>\n      {label ? <span style={{ fontSize: 14, color: 'var(--dt-ink)' }}>{label}</span> : null}\n    </label>\n  );\n}\n"]}