@bridger-kr/react 0.1.0

package/dist/components/forms/RadioGroup.mjs

@@ -0,0 +1,71 @@
+import { useState, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/forms/RadioGroup.tsx
+function RadioGroup({ name, options = [], value, defaultValue, onChange, disabled, style }) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const generatedName = useId();
+  const groupName = name || generatedName;
+  const select = (v) => {
+    if (disabled) return;
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", style: { display: "grid", gap: 10, ...style }, children: options.map((o) => {
+    const opt = typeof o === "string" ? { value: o, label: o } : o;
+    const on = opt.value === current;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 10,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.55 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: groupName,
+              checked: on,
+              onChange: () => select(opt.value),
+              disabled,
+              style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 18,
+                height: 18,
+                marginTop: 1,
+                flex: "0 0 auto",
+                borderRadius: 9999,
+                display: "grid",
+                placeItems: "center",
+                background: "var(--dt-surface)",
+                border: `1.5px solid ${on ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+                transition: "border-color 130ms"
+              },
+              children: on ? /* @__PURE__ */ jsx("span", { style: { width: 9, height: 9, borderRadius: 9999, background: "var(--dt-accent)" } }) : null
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { display: "grid", gap: 2 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)", lineHeight: 1.3 }, children: opt.label }),
+            opt.hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: opt.hint }) : null
+          ] })
+        ]
+      },
+      opt.value
+    );
+  }) });
+}
+
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.mjs.map
+//# sourceMappingURL=RadioGroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/RadioGroup.tsx"],"names":[],"mappings":"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","file":"RadioGroup.mjs","sourcesContent":["import { useId, useState } from 'react';\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface RadioOption {\n  value: string;\n  label: string;\n  hint?: string;\n}\n\nexport interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {\n  name?: string;\n  options?: Array<string | RadioOption>;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  style?: CSSProperties;\n}\n\n/** Radio group with optional per-option hint text. */\nexport function RadioGroup({ name, options = [], value, defaultValue, onChange, disabled, style }: RadioGroupProps) {\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value !== undefined ? value : internal;\n  const generatedName = useId();\n  const groupName = name || generatedName;\n  const select = (v: string) => {\n    if (disabled) return;\n    if (value === undefined) setInternal(v);\n    onChange?.(v);\n  };\n  return (\n    <div role=\"radiogroup\" style={{ display: 'grid', gap: 10, ...style }}>\n      {options.map((o) => {\n        const opt = typeof o === 'string' ? { value: o, label: o } : o;\n        const on = opt.value === current;\n        return (\n          <label\n            key={opt.value}\n            style={{\n              display: 'flex',\n              alignItems: 'flex-start',\n              gap: 10,\n              cursor: disabled ? 'not-allowed' : 'pointer',\n              opacity: disabled ? 0.55 : 1,\n            }}\n          >\n            <input\n              type=\"radio\"\n              name={groupName}\n              checked={on}\n              onChange={() => select(opt.value)}\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                marginTop: 1,\n                flex: '0 0 auto',\n                borderRadius: 9999,\n                display: 'grid',\n                placeItems: 'center',\n                background: 'var(--dt-surface)',\n                border: `1.5px solid ${on ? 'var(--dt-accent)' : 'var(--dt-border-strong)'}`,\n                transition: 'border-color 130ms',\n              }}\n            >\n              {on ? <span style={{ width: 9, height: 9, borderRadius: 9999, background: 'var(--dt-accent)' }} /> : null}\n            </span>\n            <span style={{ display: 'grid', gap: 2 }}>\n              <span style={{ fontSize: 14, color: 'var(--dt-ink)', lineHeight: 1.3 }}>{opt.label}</span>\n              {opt.hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{opt.hint}</span> : null}\n            </span>\n          </label>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/SegmentedControl.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/SegmentedControl.tsx
+function SegmentedControl({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  style
+}) {
+  const firstOption = typeof options[0] === "string" ? options[0] : options[0]?.value;
+  const [internal, setInternal] = react.useState(defaultValue ?? firstOption);
+  const current = value !== void 0 ? value : internal;
+  const select = (v) => {
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  const pad = size === "sm" ? "5px 11px" : "7px 14px";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        padding: 3,
+        gap: 2,
+        background: "var(--dt-surface-sunken)",
+        borderRadius: "var(--dt-radius-md)",
+        ...style
+      },
+      children: options.map((o) => {
+        const opt = typeof o === "string" ? { value: o, label: o } : o;
+        const on = opt.value === current;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => select(opt.value),
+            style: {
+              border: "none",
+              cursor: "pointer",
+              padding: pad,
+              borderRadius: "var(--dt-radius-sm)",
+              fontSize: size === "sm" ? 12 : 13,
+              fontWeight: 600,
+              fontFamily: "inherit",
+              whiteSpace: "nowrap",
+              color: on ? "var(--dt-ink-strong)" : "var(--dt-muted)",
+              background: on ? "var(--dt-surface)" : "transparent",
+              boxShadow: on ? "var(--dt-ring), var(--dt-shadow-xs)" : "none",
+              transition: "color 130ms, background-color 130ms"
+            },
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+
+exports.SegmentedControl = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.cjs.map
+//# sourceMappingURL=SegmentedControl.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/SegmentedControl.tsx"],"names":["useState","jsx"],"mappings":";;;;;;AAkBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,UAAU,EAAC;AAAA,EACX,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAO,OAAA,CAAQ,CAAC,CAAA,KAAM,QAAA,GAAW,OAAA,CAAQ,CAAC,CAAA,GAAI,OAAA,CAAQ,CAAC,CAAA,EAAG,KAAA;AAC9E,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAA,CAAS,gBAAgB,WAAW,CAAA;AACpE,EAAA,MAAM,OAAA,GAAU,KAAA,KAAU,MAAA,GAAY,KAAA,GAAQ,QAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAc;AAC5B,IAAA,IAAI,KAAA,KAAU,MAAA,EAAW,WAAA,CAAY,CAAC,CAAA;AACtC,IAAA,QAAA,GAAW,CAAC,CAAA;AAAA,EACd,CAAA;AACA,EAAA,MAAM,GAAA,GAAM,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,UAAA;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,aAAA;AAAA,QACT,OAAA,EAAS,CAAA;AAAA,QACT,GAAA,EAAK,CAAA;AAAA,QACL,UAAA,EAAY,0BAAA;AAAA,QACZ,YAAA,EAAc,qBAAA;AAAA,QACd,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,KAAM;AAClB,QAAA,MAAM,GAAA,GAAM,OAAO,CAAA,KAAM,QAAA,GAAW,EAAE,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,CAAA,EAAE,GAAI,CAAA;AAC7D,QAAA,MAAM,EAAA,GAAK,IAAI,KAAA,KAAU,OAAA;AACzB,QAAA,uBACEA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,MAAA,CAAO,GAAA,CAAI,KAAK,CAAA;AAAA,YAC/B,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,MAAA;AAAA,cACR,MAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,GAAA;AAAA,cACT,YAAA,EAAc,qBAAA;AAAA,cACd,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,EAAA;AAAA,cAC/B,UAAA,EAAY,GAAA;AAAA,cACZ,UAAA,EAAY,SAAA;AAAA,cACZ,UAAA,EAAY,QAAA;AAAA,cACZ,KAAA,EAAO,KAAK,sBAAA,GAAyB,iBAAA;AAAA,cACrC,UAAA,EAAY,KAAK,mBAAA,GAAsB,aAAA;AAAA,cACvC,SAAA,EAAW,KAAK,qCAAA,GAAwC,MAAA;AAAA,cACxD,UAAA,EAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA,GAAA,CAAI;AAAA,WAAA;AAAA,UAlBA,GAAA,CAAI;AAAA,SAmBX;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"SegmentedControl.cjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface SegmentOption {\n  value: string;\n  label: string;\n}\n\nexport interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {\n  options?: Array<string | SegmentOption>;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  size?: 'sm' | 'md';\n  style?: CSSProperties;\n}\n\n/** Inset segmented control for 2–4 short, exclusive options. */\nexport function SegmentedControl({\n  options = [],\n  value,\n  defaultValue,\n  onChange,\n  size = 'md',\n  style,\n}: SegmentedControlProps) {\n  const firstOption = typeof options[0] === 'string' ? options[0] : options[0]?.value;\n  const [internal, setInternal] = useState(defaultValue ?? firstOption);\n  const current = value !== undefined ? value : internal;\n  const select = (v: string) => {\n    if (value === undefined) setInternal(v);\n    onChange?.(v);\n  };\n  const pad = size === 'sm' ? '5px 11px' : '7px 14px';\n  return (\n    <div\n      style={{\n        display: 'inline-flex',\n        padding: 3,\n        gap: 2,\n        background: 'var(--dt-surface-sunken)',\n        borderRadius: 'var(--dt-radius-md)',\n        ...style,\n      }}\n    >\n      {options.map((o) => {\n        const opt = typeof o === 'string' ? { value: o, label: o } : o;\n        const on = opt.value === current;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => select(opt.value)}\n            style={{\n              border: 'none',\n              cursor: 'pointer',\n              padding: pad,\n              borderRadius: 'var(--dt-radius-sm)',\n              fontSize: size === 'sm' ? 12 : 13,\n              fontWeight: 600,\n              fontFamily: 'inherit',\n              whiteSpace: 'nowrap',\n              color: on ? 'var(--dt-ink-strong)' : 'var(--dt-muted)',\n              background: on ? 'var(--dt-surface)' : 'transparent',\n              boxShadow: on ? 'var(--dt-ring), var(--dt-shadow-xs)' : 'none',\n              transition: 'color 130ms, background-color 130ms',\n            }}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface SegmentOption {
+    value: string;
+    label: string;
+}
+interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {
+    options?: Array<string | SegmentOption>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    style?: CSSProperties;
+}
+/** Inset segmented control for 2–4 short, exclusive options. */
+declare function SegmentedControl({ options, value, defaultValue, onChange, size, style, }: SegmentedControlProps): react.JSX.Element;
+
+export { type SegmentOption, SegmentedControl, type SegmentedControlProps };

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface SegmentOption {
+    value: string;
+    label: string;
+}
+interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {
+    options?: Array<string | SegmentOption>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    style?: CSSProperties;
+}
+/** Inset segmented control for 2–4 short, exclusive options. */
+declare function SegmentedControl({ options, value, defaultValue, onChange, size, style, }: SegmentedControlProps): react.JSX.Element;
+
+export { type SegmentOption, SegmentedControl, type SegmentedControlProps };

package/dist/components/forms/SegmentedControl.mjs

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/forms/SegmentedControl.tsx
+function SegmentedControl({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  style
+}) {
+  const firstOption = typeof options[0] === "string" ? options[0] : options[0]?.value;
+  const [internal, setInternal] = useState(defaultValue ?? firstOption);
+  const current = value !== void 0 ? value : internal;
+  const select = (v) => {
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  const pad = size === "sm" ? "5px 11px" : "7px 14px";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        padding: 3,
+        gap: 2,
+        background: "var(--dt-surface-sunken)",
+        borderRadius: "var(--dt-radius-md)",
+        ...style
+      },
+      children: options.map((o) => {
+        const opt = typeof o === "string" ? { value: o, label: o } : o;
+        const on = opt.value === current;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => select(opt.value),
+            style: {
+              border: "none",
+              cursor: "pointer",
+              padding: pad,
+              borderRadius: "var(--dt-radius-sm)",
+              fontSize: size === "sm" ? 12 : 13,
+              fontWeight: 600,
+              fontFamily: "inherit",
+              whiteSpace: "nowrap",
+              color: on ? "var(--dt-ink-strong)" : "var(--dt-muted)",
+              background: on ? "var(--dt-surface)" : "transparent",
+              boxShadow: on ? "var(--dt-ring), var(--dt-shadow-xs)" : "none",
+              transition: "color 130ms, background-color 130ms"
+            },
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.mjs.map
+//# sourceMappingURL=SegmentedControl.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/SegmentedControl.tsx"],"names":[],"mappings":";;;;AAkBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,UAAU,EAAC;AAAA,EACX,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAO,OAAA,CAAQ,CAAC,CAAA,KAAM,QAAA,GAAW,OAAA,CAAQ,CAAC,CAAA,GAAI,OAAA,CAAQ,CAAC,CAAA,EAAG,KAAA;AAC9E,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,CAAS,gBAAgB,WAAW,CAAA;AACpE,EAAA,MAAM,OAAA,GAAU,KAAA,KAAU,MAAA,GAAY,KAAA,GAAQ,QAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAc;AAC5B,IAAA,IAAI,KAAA,KAAU,MAAA,EAAW,WAAA,CAAY,CAAC,CAAA;AACtC,IAAA,QAAA,GAAW,CAAC,CAAA;AAAA,EACd,CAAA;AACA,EAAA,MAAM,GAAA,GAAM,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,UAAA;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,aAAA;AAAA,QACT,OAAA,EAAS,CAAA;AAAA,QACT,GAAA,EAAK,CAAA;AAAA,QACL,UAAA,EAAY,0BAAA;AAAA,QACZ,YAAA,EAAc,qBAAA;AAAA,QACd,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,KAAM;AAClB,QAAA,MAAM,GAAA,GAAM,OAAO,CAAA,KAAM,QAAA,GAAW,EAAE,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,CAAA,EAAE,GAAI,CAAA;AAC7D,QAAA,MAAM,EAAA,GAAK,IAAI,KAAA,KAAU,OAAA;AACzB,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,MAAA,CAAO,GAAA,CAAI,KAAK,CAAA;AAAA,YAC/B,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,MAAA;AAAA,cACR,MAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,GAAA;AAAA,cACT,YAAA,EAAc,qBAAA;AAAA,cACd,QAAA,EAAU,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,EAAA;AAAA,cAC/B,UAAA,EAAY,GAAA;AAAA,cACZ,UAAA,EAAY,SAAA;AAAA,cACZ,UAAA,EAAY,QAAA;AAAA,cACZ,KAAA,EAAO,KAAK,sBAAA,GAAyB,iBAAA;AAAA,cACrC,UAAA,EAAY,KAAK,mBAAA,GAAsB,aAAA;AAAA,cACvC,SAAA,EAAW,KAAK,qCAAA,GAAwC,MAAA;AAAA,cACxD,UAAA,EAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA,GAAA,CAAI;AAAA,WAAA;AAAA,UAlBA,GAAA,CAAI;AAAA,SAmBX;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"SegmentedControl.mjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface SegmentOption {\n  value: string;\n  label: string;\n}\n\nexport interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {\n  options?: Array<string | SegmentOption>;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  size?: 'sm' | 'md';\n  style?: CSSProperties;\n}\n\n/** Inset segmented control for 2–4 short, exclusive options. */\nexport function SegmentedControl({\n  options = [],\n  value,\n  defaultValue,\n  onChange,\n  size = 'md',\n  style,\n}: SegmentedControlProps) {\n  const firstOption = typeof options[0] === 'string' ? options[0] : options[0]?.value;\n  const [internal, setInternal] = useState(defaultValue ?? firstOption);\n  const current = value !== undefined ? value : internal;\n  const select = (v: string) => {\n    if (value === undefined) setInternal(v);\n    onChange?.(v);\n  };\n  const pad = size === 'sm' ? '5px 11px' : '7px 14px';\n  return (\n    <div\n      style={{\n        display: 'inline-flex',\n        padding: 3,\n        gap: 2,\n        background: 'var(--dt-surface-sunken)',\n        borderRadius: 'var(--dt-radius-md)',\n        ...style,\n      }}\n    >\n      {options.map((o) => {\n        const opt = typeof o === 'string' ? { value: o, label: o } : o;\n        const on = opt.value === current;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => select(opt.value)}\n            style={{\n              border: 'none',\n              cursor: 'pointer',\n              padding: pad,\n              borderRadius: 'var(--dt-radius-sm)',\n              fontSize: size === 'sm' ? 12 : 13,\n              fontWeight: 600,\n              fontFamily: 'inherit',\n              whiteSpace: 'nowrap',\n              color: on ? 'var(--dt-ink-strong)' : 'var(--dt-muted)',\n              background: on ? 'var(--dt-surface)' : 'transparent',\n              boxShadow: on ? 'var(--dt-ring), var(--dt-shadow-xs)' : 'none',\n              transition: 'color 130ms, background-color 130ms',\n            }}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/Select.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/Select.tsx
+function Select({ label, hint, options = [], value, defaultValue, onChange, placeholder, disabled, id, style }) {
+  const selId = id || (label ? `sel-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 7 }, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: selId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", display: "flex" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          id: selId,
+          className: "dt-field",
+          value,
+          defaultValue,
+          disabled,
+          onChange: (e) => onChange?.(e.target.value),
+          style: {
+            appearance: "none",
+            WebkitAppearance: "none",
+            width: "100%",
+            padding: "10px 36px 10px 13px",
+            fontSize: 14,
+            fontFamily: "inherit",
+            color: "var(--dt-ink-strong)",
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.55 : 1,
+            ...style
+          },
+          children: [
+            placeholder ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+            options.map((o) => {
+              const opt = typeof o === "string" ? { value: o, label: o } : o;
+              return /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value);
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          style: {
+            position: "absolute",
+            right: 11,
+            top: "50%",
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+            color: "var(--dt-muted)"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    ] }),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+exports.Select = Select;
+//# sourceMappingURL=Select.cjs.map
+//# sourceMappingURL=Select.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Select.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"Select.cjs","sourcesContent":["import type { CSSProperties, SelectHTMLAttributes } from 'react';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectProps\n  extends Omit<\n    SelectHTMLAttributes<HTMLSelectElement>,\n    'defaultValue' | 'disabled' | 'id' | 'onChange' | 'style' | 'value'\n  > {\n  label?: string;\n  hint?: string;\n  options?: Array<string | SelectOption>;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/** Flat native-backed select with a persimmon focus ring. */\nexport function Select({ label, hint, options = [], value, defaultValue, onChange, placeholder, disabled, id, style }: SelectProps) {\n  const selId = id || (label ? `sel-${label.replace(/\\s+/g, '-')}` : undefined);\n  return (\n    <div style={{ display: 'grid', gap: 7 }}>\n      {label ? (\n        <label htmlFor={selId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n          {label}\n        </label>\n      ) : null}\n      <div style={{ position: 'relative', display: 'flex' }}>\n        <select\n          id={selId}\n          className=\"dt-field\"\n          value={value}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          onChange={(e) => onChange?.(e.target.value)}\n          style={{\n            appearance: 'none',\n            WebkitAppearance: 'none',\n            width: '100%',\n            padding: '10px 36px 10px 13px',\n            fontSize: 14,\n            fontFamily: 'inherit',\n            color: 'var(--dt-ink-strong)',\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.55 : 1,\n            ...style,\n          }}\n        >\n          {placeholder ? (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          ) : null}\n          {options.map((o) => {\n            const opt = typeof o === 'string' ? { value: o, label: o } : o;\n            return (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            );\n          })}\n        </select>\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            right: 11,\n            top: '50%',\n            transform: 'translateY(-50%)',\n            pointerEvents: 'none',\n            color: 'var(--dt-muted)',\n          }}\n        >\n          <path d=\"M6 9l6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { SelectHTMLAttributes, CSSProperties } from 'react';
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'disabled' | 'id' | 'onChange' | 'style' | 'value'> {
+    label?: string;
+    hint?: string;
+    options?: Array<string | SelectOption>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    style?: CSSProperties;
+}
+/** Flat native-backed select with a persimmon focus ring. */
+declare function Select({ label, hint, options, value, defaultValue, onChange, placeholder, disabled, id, style }: SelectProps): react.JSX.Element;
+
+export { Select, type SelectOption, type SelectProps };

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

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { SelectHTMLAttributes, CSSProperties } from 'react';
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'disabled' | 'id' | 'onChange' | 'style' | 'value'> {
+    label?: string;
+    hint?: string;
+    options?: Array<string | SelectOption>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    style?: CSSProperties;
+}
+/** Flat native-backed select with a persimmon focus ring. */
+declare function Select({ label, hint, options, value, defaultValue, onChange, placeholder, disabled, id, style }: SelectProps): react.JSX.Element;
+
+export { Select, type SelectOption, type SelectProps };

package/dist/components/forms/Select.mjs

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/Select.tsx
+function Select({ label, hint, options = [], value, defaultValue, onChange, placeholder, disabled, id, style }) {
+  const selId = id || (label ? `sel-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7 }, children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: selId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "flex" }, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id: selId,
+          className: "dt-field",
+          value,
+          defaultValue,
+          disabled,
+          onChange: (e) => onChange?.(e.target.value),
+          style: {
+            appearance: "none",
+            WebkitAppearance: "none",
+            width: "100%",
+            padding: "10px 36px 10px 13px",
+            fontSize: 14,
+            fontFamily: "inherit",
+            color: "var(--dt-ink-strong)",
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.55 : 1,
+            ...style
+          },
+          children: [
+            placeholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+            options.map((o) => {
+              const opt = typeof o === "string" ? { value: o, label: o } : o;
+              return /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value);
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          style: {
+            position: "absolute",
+            right: 11,
+            top: "50%",
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+            color: "var(--dt-muted)"
+          },
+          children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    ] }),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+export { Select };
+//# sourceMappingURL=Select.mjs.map
+//# sourceMappingURL=Select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":"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","file":"Select.mjs","sourcesContent":["import type { CSSProperties, SelectHTMLAttributes } from 'react';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectProps\n  extends Omit<\n    SelectHTMLAttributes<HTMLSelectElement>,\n    'defaultValue' | 'disabled' | 'id' | 'onChange' | 'style' | 'value'\n  > {\n  label?: string;\n  hint?: string;\n  options?: Array<string | SelectOption>;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/** Flat native-backed select with a persimmon focus ring. */\nexport function Select({ label, hint, options = [], value, defaultValue, onChange, placeholder, disabled, id, style }: SelectProps) {\n  const selId = id || (label ? `sel-${label.replace(/\\s+/g, '-')}` : undefined);\n  return (\n    <div style={{ display: 'grid', gap: 7 }}>\n      {label ? (\n        <label htmlFor={selId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n          {label}\n        </label>\n      ) : null}\n      <div style={{ position: 'relative', display: 'flex' }}>\n        <select\n          id={selId}\n          className=\"dt-field\"\n          value={value}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          onChange={(e) => onChange?.(e.target.value)}\n          style={{\n            appearance: 'none',\n            WebkitAppearance: 'none',\n            width: '100%',\n            padding: '10px 36px 10px 13px',\n            fontSize: 14,\n            fontFamily: 'inherit',\n            color: 'var(--dt-ink-strong)',\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.55 : 1,\n            ...style,\n          }}\n        >\n          {placeholder ? (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          ) : null}\n          {options.map((o) => {\n            const opt = typeof o === 'string' ? { value: o, label: o } : o;\n            return (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            );\n          })}\n        </select>\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            right: 11,\n            top: '50%',\n            transform: 'translateY(-50%)',\n            pointerEvents: 'none',\n            color: 'var(--dt-muted)',\n          }}\n        >\n          <path d=\"M6 9l6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/Slider.cjs

@@ -0,0 +1,129 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/Slider.tsx
+function Slider({
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onChange,
+  unit = "",
+  hint,
+  id,
+  style
+}) {
+  const [internal, setInternal] = react.useState(defaultValue ?? min);
+  const v = value != null ? value : internal;
+  const trackRef = react.useRef(null);
+  const sId = id || (label ? `sl-${label.replace(/\s+/g, "-")}` : void 0);
+  const pct = (v - min) / (max - min) * 100;
+  const set = (nv) => {
+    const clamped = Math.min(max, Math.max(min, Math.round(nv / step) * step));
+    if (value == null) setInternal(clamped);
+    onChange?.(clamped);
+  };
+  const fromClientX = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
+    return min + ratio * (max - min);
+  };
+  const onPointerDown = (e) => {
+    e.preventDefault();
+    set(fromClientX(e.clientX));
+    const move = (ev) => set(fromClientX(ev.clientX));
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      set(v + step);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      set(v - step);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 9, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between" }, children: [
+      label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: sId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          style: {
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--dt-ink-strong)",
+            fontVariantNumeric: "tabular-nums"
+          },
+          children: [
+            v,
+            unit ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--dt-muted)", fontWeight: 400 }, children: unit }) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: trackRef,
+        id: sId,
+        role: "slider",
+        tabIndex: 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": v,
+        onPointerDown,
+        onKeyDown: onKey,
+        style: { position: "relative", height: 20, display: "flex", alignItems: "center", cursor: "pointer", outline: "none" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                height: 4,
+                borderRadius: 2,
+                background: "var(--dt-surface-sunken)",
+                boxShadow: "inset 0 0 0 1px var(--dt-border-strong)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", left: 0, width: `${pct}%`, height: 4, borderRadius: 2, background: "var(--dt-accent)" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${pct}%`,
+                transform: "translateX(-50%)",
+                width: 16,
+                height: 16,
+                borderRadius: "var(--dt-radius-sm)",
+                background: "var(--dt-surface)",
+                boxShadow: "0 0 0 1.5px var(--dt-accent)",
+                border: "3px solid var(--dt-surface)"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+exports.Slider = Slider;
+//# sourceMappingURL=Slider.cjs.map
+//# sourceMappingURL=Slider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Slider.tsx"],"names":["useState","useRef","jsxs","jsx"],"mappings":"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","file":"Slider.cjs","sourcesContent":["import { useRef, useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, KeyboardEvent, PointerEvent } from 'react';\n\nexport interface SliderProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'defaultValue' | 'id' | 'max' | 'min' | 'onChange' | 'step' | 'style' | 'value'\n  > {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  /** Suffix shown after the value readout, e.g. \"회/일\" or \"ms\". */\n  unit?: string;\n  hint?: string;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Numeric range input — hairline track, persimmon fill, tabular value readout.\n * @startingPoint section=\"Forms\" subtitle=\"Numeric range with tabular readout\" viewport=\"420x90\"\n */\nexport function Slider({\n  label,\n  min = 0,\n  max = 100,\n  step = 1,\n  value,\n  defaultValue,\n  onChange,\n  unit = '',\n  hint,\n  id,\n  style,\n}: SliderProps) {\n  const [internal, setInternal] = useState(defaultValue ?? min);\n  const v = value != null ? value : internal;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const sId = id || (label ? `sl-${label.replace(/\\s+/g, '-')}` : undefined);\n  const pct = ((v - min) / (max - min)) * 100;\n\n  const set = (nv: number) => {\n    const clamped = Math.min(max, Math.max(min, Math.round(nv / step) * step));\n    if (value == null) setInternal(clamped);\n    onChange?.(clamped);\n  };\n\n  const fromClientX = (clientX: number) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));\n    return min + ratio * (max - min);\n  };\n\n  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    set(fromClientX(e.clientX));\n    const move = (ev: globalThis.PointerEvent) => set(fromClientX(ev.clientX));\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n    };\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n  };\n\n  const onKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      set(v + step);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      set(v - step);\n    }\n  };\n\n  return (\n    <div style={{ display: 'grid', gap: 9, ...style }}>\n      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>\n          {label ? (\n            <label htmlFor={sId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n              {label}\n            </label>\n          ) : (\n            <span />\n          )}\n          <span\n            style={{\n              fontFamily: 'var(--dt-font-mono)',\n              fontSize: 13,\n              fontWeight: 600,\n              color: 'var(--dt-ink-strong)',\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {v}\n            {unit ? <span style={{ color: 'var(--dt-muted)', fontWeight: 400 }}>{unit}</span> : null}\n          </span>\n        </div>\n      <div\n        ref={trackRef}\n        id={sId}\n        role=\"slider\"\n        tabIndex={0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={v}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKey}\n        style={{ position: 'relative', height: 20, display: 'flex', alignItems: 'center', cursor: 'pointer', outline: 'none' }}\n      >\n        <div\n          style={{\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            height: 4,\n            borderRadius: 2,\n            background: 'var(--dt-surface-sunken)',\n            boxShadow: 'inset 0 0 0 1px var(--dt-border-strong)',\n          }}\n        />\n        <div style={{ position: 'absolute', left: 0, width: `${pct}%`, height: 4, borderRadius: 2, background: 'var(--dt-accent)' }} />\n        <div\n          style={{\n            position: 'absolute',\n            left: `${pct}%`,\n            transform: 'translateX(-50%)',\n            width: 16,\n            height: 16,\n            borderRadius: 'var(--dt-radius-sm)',\n            background: 'var(--dt-surface)',\n            boxShadow: '0 0 0 1.5px var(--dt-accent)',\n            border: '3px solid var(--dt-surface)',\n          }}\n        />\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}