jvdm-ui 1.0.5

package/dist/client/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/menu/menu/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nconst ALIGNS = {\n  start: \"left-0\",\n  end: \"right-0\",\n} as const;\n\nconst WIDTHS = {\n  sm: \"w-48\",\n  md: \"w-56\",\n  lg: \"w-72\",\n} as const;\n\nexport type MenuAlign = keyof typeof ALIGNS;\nexport type MenuWidth = keyof typeof WIDTHS;\n\nexport function Menu({\n  label,\n  trigger,\n  align = \"end\",\n  width = \"md\",\n  className = \"\",\n  children,\n}: {\n  label: string;\n  trigger: ReactNode;\n  align?: MenuAlign;\n  width?: MenuWidth;\n  className?: string;\n  children: ReactNode;\n}) {\n  const [open, setOpen] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const items = Children.toArray(children).map((child) =>\n    isValidElement(child)\n      ? cloneElement(child as ReactElement<Record<string, unknown>>, {\n          role: \"menuitem\",\n          tabIndex: -1,\n        })\n      : child,\n  );\n\n  useEffect(() => {\n    if (!open) return;\n\n    function onPointerDown(event: PointerEvent) {\n      if (!root.current?.contains(event.target as Node)) setOpen(false);\n    }\n\n    document.addEventListener(\"pointerdown\", onPointerDown);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    menuRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"]')?.focus();\n  }, [open]);\n\n  function onMenuKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    const menuItems = [\n      ...(menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]') ?? []),\n    ];\n    const current = menuItems.indexOf(document.activeElement as HTMLElement);\n    const next = (index: number) =>\n      menuItems[(index + menuItems.length) % menuItems.length]?.focus();\n\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      setOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      next(current + 1);\n    }\n\n    if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      next(current - 1);\n    }\n\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      menuItems[0]?.focus();\n    }\n\n    if (event.key === \"End\") {\n      event.preventDefault();\n      menuItems.at(-1)?.focus();\n    }\n  }\n\n  return (\n    <div ref={root} className={`relative ${className}`}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-label={label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={() => setOpen((current) => !current)}\n        className=\"flex items-center rounded-md transition-colors duration-(--duration-fast) ease-out focus-visible:ring-2 focus-visible:ring-accent/30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\"\n      >\n        {trigger}\n      </button>\n\n      {open ? (\n        <div\n          ref={menuRef}\n          role=\"menu\"\n          aria-label={label}\n          onClick={() => setOpen(false)}\n          onKeyDown={onMenuKeyDown}\n          className={`absolute top-full z-10 mt-2 flex flex-col gap-1 rounded-md border border-line-strong bg-raised p-2 ${ALIGNS[align]} ${WIDTHS[width]}`}\n        >\n          {items}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAqGH,SACE,KADF;AAnGJ,IAAM,SAAS;AAAA,EACb,OAAO;AAAA,EACP,KAAK;AACP;AAEA,IAAM,SAAS;AAAA,EACb,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,GAOG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,OAAO,OAAuB,IAAI;AACxC,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAAI,CAAC,UAC5C,eAAe,KAAK,IAChB,aAAa,OAAgD;AAAA,MAC3D,MAAM;AAAA,MACN,UAAU;AAAA,IACZ,CAAC,IACD;AAAA,EACN;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AAEX,aAAS,cAAc,OAAqB;AAC1C,UAAI,CAAC,KAAK,SAAS,SAAS,MAAM,MAAc,EAAG,SAAQ,KAAK;AAAA,IAClE;AAEA,aAAS,iBAAiB,eAAe,aAAa;AAEtD,WAAO,MAAM;AACX,eAAS,oBAAoB,eAAe,aAAa;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,YAAQ,SAAS,cAA2B,mBAAmB,GAAG,MAAM;AAAA,EAC1E,GAAG,CAAC,IAAI,CAAC;AAET,WAAS,cAAc,OAA4C;AACjE,UAAM,YAAY;AAAA,MAChB,GAAI,QAAQ,SAAS,iBAA8B,mBAAmB,KAAK,CAAC;AAAA,IAC9E;AACA,UAAM,UAAU,UAAU,QAAQ,SAAS,aAA4B;AACvE,UAAM,OAAO,CAAC,UACZ,WAAW,QAAQ,UAAU,UAAU,UAAU,MAAM,GAAG,MAAM;AAElE,QAAI,MAAM,QAAQ,UAAU;AAC1B,YAAM,eAAe;AACrB,cAAQ,KAAK;AACb,iBAAW,SAAS,MAAM;AAC1B;AAAA,IACF;AAEA,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,eAAe;AACrB,WAAK,UAAU,CAAC;AAAA,IAClB;AAEA,QAAI,MAAM,QAAQ,WAAW;AAC3B,YAAM,eAAe;AACrB,WAAK,UAAU,CAAC;AAAA,IAClB;AAEA,QAAI,MAAM,QAAQ,QAAQ;AACxB,YAAM,eAAe;AACrB,gBAAU,CAAC,GAAG,MAAM;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,eAAe;AACrB,gBAAU,GAAG,EAAE,GAAG,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,KAAK,MAAM,WAAW,YAAY,SAAS,IAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,QAC5C,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAEC,OACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS,MAAM,QAAQ,KAAK;AAAA,QAC5B,WAAW;AAAA,QACX,WAAW,sGAAsG,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;AAAA,QAE9I;AAAA;AAAA,IACH,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/client/modal.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const SIZE_CLASSES: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+declare function Modal({ isOpen, onClose, title, children, size, closeLabel, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children: ReactNode;
+    size?: keyof typeof SIZE_CLASSES;
+    closeLabel?: string;
+}): react.JSX.Element;
+
+export { Modal };

package/dist/client/modal.js

@@ -0,0 +1,147 @@
+"use client";
+"use client";
+
+// src/molecules/modal/index.tsx
+import { useEffect, useId, useRef } from "react";
+
+// src/atoms/button/button-style.ts
+var VARIANTS = {
+  primary: "bg-accent font-medium text-on-accent hover:bg-accent-ink",
+  secondary: "border border-line-strong hover:bg-raised",
+  ghost: "text-ink-muted hover:bg-raised hover:text-ink-soft",
+  danger: "border border-danger/50 text-danger hover:bg-danger-soft"
+};
+var SIZES = {
+  sm: "gap-2 px-3 py-2 text-xs",
+  md: "gap-2 px-4 py-3 text-sm",
+  lg: "gap-2 px-4 py-4 text-base",
+  icon: "h-10 w-10 shrink-0",
+  "icon-sm": "h-8 w-8 shrink-0"
+};
+var BASE = "inline-flex touch-manipulation select-none items-center justify-center rounded-md transition-[background-color,border-color,color,box-shadow,transform] duration-(--duration-fast) ease-out active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent focus-visible:ring-2 focus-visible:ring-accent/30 disabled:pointer-events-none disabled:opacity-50";
+function buttonClass({
+  variant = "secondary",
+  size = "md",
+  className = ""
+} = {}) {
+  return `${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`;
+}
+
+// src/atoms/icon/svg/index.tsx
+import { jsx } from "react/jsx-runtime";
+var SIZES2 = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+  xl: "h-6 w-6",
+  "2xl": "h-8 w-8"
+};
+function Svg({ size = "md", className = "", children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: `${SIZES2[size]} shrink-0 ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+
+// src/atoms/icon/close-icon/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function CloseIcon(p) {
+  return /* @__PURE__ */ jsx2(Svg, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "M6 6l12 12M18 6 6 18" }) });
+}
+
+// src/atoms/icon-button/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function IconButton({
+  label,
+  variant = "ghost",
+  size = "icon",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      ...props,
+      "aria-label": label,
+      title: label,
+      className: buttonClass({ variant, size, className })
+    }
+  );
+}
+
+// src/molecules/modal/locales.ts
+var MODAL = {
+  label: { "en-US": "Dialog", "pt-BR": "Di\xE1logo" },
+  close: { "en-US": "Close", "pt-BR": "Fechar" }
+};
+
+// src/molecules/modal/index.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  sm: "sm:max-w-md",
+  md: "sm:max-w-2xl",
+  lg: "sm:max-w-4xl",
+  xl: "sm:max-w-6xl"
+};
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  closeLabel = MODAL.close["en-US"]
+}) {
+  const dialogRef = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) dialog.showModal();
+    if (!isOpen && dialog.open) dialog.close();
+  }, [isOpen]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    dialog.addEventListener("close", onClose);
+    return () => dialog.removeEventListener("close", onClose);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx4(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: `fixed inset-x-0 top-auto bottom-0 z-50 m-0 mt-auto w-full max-w-none rounded-t-xl border border-b-0 border-line bg-surface p-0 text-ink shadow-modal backdrop:bg-app/70 backdrop:backdrop-blur-sm sm:inset-0 sm:m-auto sm:rounded-xl sm:border-b ${SIZE_CLASSES[size]}`,
+      "aria-modal": "true",
+      "aria-label": title ? void 0 : MODAL.label["en-US"],
+      "aria-labelledby": title ? titleId : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[92dvh] flex-col sm:max-h-[88dvh]", children: [
+        title ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-line py-3 pr-3 pl-5 sm:py-4 sm:pl-6", children: [
+          /* @__PURE__ */ jsx4("h2", { id: titleId, className: "text-lg font-bold text-ink", children: title }),
+          /* @__PURE__ */ jsx4(IconButton, { label: closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx4(CloseIcon, { size: "md" }) })
+        ] }) : null,
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto overscroll-contain px-5 pt-4 pb-5 sm:px-6",
+            style: { paddingBottom: "max(1.25rem, env(safe-area-inset-bottom))" },
+            children
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  Modal
+};
+//# sourceMappingURL=modal.js.map

package/dist/client/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/modal/index.tsx","../../src/atoms/button/button-style.ts","../../src/atoms/icon/svg/index.tsx","../../src/atoms/icon/close-icon/index.tsx","../../src/atoms/icon-button/index.tsx","../../src/molecules/modal/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useRef, type ReactNode } from \"react\";\nimport { CloseIcon, IconButton } from \"../../atoms\";\nimport { MODAL } from \"./locales\";\n\nconst SIZE_CLASSES = {\n  sm: \"sm:max-w-md\",\n  md: \"sm:max-w-2xl\",\n  lg: \"sm:max-w-4xl\",\n  xl: \"sm:max-w-6xl\",\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  children,\n  size = \"md\",\n  closeLabel = MODAL.close[\"en-US\"],\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: ReactNode;\n  children: ReactNode;\n  size?: keyof typeof SIZE_CLASSES;\n  closeLabel?: string;\n}) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (isOpen && !dialog.open) dialog.showModal();\n    if (!isOpen && dialog.open) dialog.close();\n  }, [isOpen]);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    dialog.addEventListener(\"close\", onClose);\n    return () => dialog.removeEventListener(\"close\", onClose);\n  }, [onClose]);\n\n  return (\n    <dialog\n      ref={dialogRef}\n      className={`fixed inset-x-0 top-auto bottom-0 z-50 m-0 mt-auto w-full max-w-none rounded-t-xl border border-b-0 border-line bg-surface p-0 text-ink shadow-modal backdrop:bg-app/70 backdrop:backdrop-blur-sm sm:inset-0 sm:m-auto sm:rounded-xl sm:border-b ${SIZE_CLASSES[size]}`}\n      aria-modal=\"true\"\n      aria-label={title ? undefined : MODAL.label[\"en-US\"]}\n      aria-labelledby={title ? titleId : undefined}\n    >\n      <div className=\"flex max-h-[92dvh] flex-col sm:max-h-[88dvh]\">\n        {title ? (\n          <div className=\"flex items-center justify-between gap-4 border-b border-line py-3 pr-3 pl-5 sm:py-4 sm:pl-6\">\n            <h2 id={titleId} className=\"text-lg font-bold text-ink\">\n              {title}\n            </h2>\n            <IconButton label={closeLabel} onClick={onClose}>\n              <CloseIcon size=\"md\" />\n            </IconButton>\n          </div>\n        ) : null}\n        <div\n          className=\"flex-1 overflow-y-auto overscroll-contain px-5 pt-4 pb-5 sm:px-6\"\n          style={{ paddingBottom: \"max(1.25rem, env(safe-area-inset-bottom))\" }}\n        >\n          {children}\n        </div>\n      </div>\n    </dialog>\n  );\n}\n","export type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\nconst VARIANTS: Record<ButtonVariant, string> = {\n  primary: \"bg-accent font-medium text-on-accent hover:bg-accent-ink\",\n  secondary: \"border border-line-strong hover:bg-raised\",\n  ghost: \"text-ink-muted hover:bg-raised hover:text-ink-soft\",\n  danger: \"border border-danger/50 text-danger hover:bg-danger-soft\",\n};\n\nconst SIZES: Record<ButtonSize, string> = {\n  sm: \"gap-2 px-3 py-2 text-xs\",\n  md: \"gap-2 px-4 py-3 text-sm\",\n  lg: \"gap-2 px-4 py-4 text-base\",\n  icon: \"h-10 w-10 shrink-0\",\n  \"icon-sm\": \"h-8 w-8 shrink-0\",\n};\n\nconst BASE =\n  \"inline-flex touch-manipulation select-none items-center justify-center rounded-md transition-[background-color,border-color,color,box-shadow,transform] duration-(--duration-fast) ease-out active:scale-95\" +\n  \" focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent focus-visible:ring-2 focus-visible:ring-accent/30\" +\n  \" disabled:pointer-events-none disabled:opacity-50\";\n\nexport type ButtonOptions = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n};\n\nexport function buttonClass({\n  variant = \"secondary\",\n  size = \"md\",\n  className = \"\",\n}: ButtonOptions = {}) {\n  return `${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`;\n}\n","import type { ReactNode } from \"react\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\nconst SIZES: Record<IconSize, string> = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n  xl: \"h-6 w-6\",\n  \"2xl\": \"h-8 w-8\",\n};\n\nexport type Props = { size?: IconSize; className?: string };\n\nexport function Svg({ size = \"md\", className = \"\", children }: Props & { children: ReactNode }) {\n  return (\n    <svg\n      className={`${SIZES[size]} shrink-0 ${className}`}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {children}\n    </svg>\n  );\n}\n","import { Svg, type Props } from \"../svg\";\n\nexport function CloseIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"M6 6l12 12M18 6 6 18\" />\n    </Svg>\n  );\n}\n","import type { ComponentProps } from \"react\";\n\nimport { buttonClass, type ButtonVariant } from \"../button\";\n\nexport type IconButtonSize = \"icon\" | \"icon-sm\";\n\nexport function IconButton({\n  label,\n  variant = \"ghost\",\n  size = \"icon\",\n  className,\n  ...props\n}: {\n  label: string;\n  variant?: ButtonVariant;\n  size?: IconButtonSize;\n} & Omit<ComponentProps<\"button\">, \"aria-label\" | \"size\">) {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      aria-label={label}\n      title={label}\n      className={buttonClass({ variant, size, className })}\n    />\n  );\n}\n","export const MODAL = {\n  label: { \"en-US\": \"Dialog\", \"pt-BR\": \"Diálogo\" },\n  close: { \"en-US\": \"Close\", \"pt-BR\": \"Fechar\" },\n};\n"],"mappings":";;;;AAEA,SAAS,WAAW,OAAO,cAA8B;;;ACCzD,IAAM,WAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,IAAM,QAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAW;AACb;AAEA,IAAM,OACJ;AAUK,SAAS,YAAY;AAAA,EAC1B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AACd,IAAmB,CAAC,GAAG;AACrB,SAAO,GAAG,IAAI,IAAI,SAAS,OAAO,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,SAAS;AACjE;;;ACnBI;AAZJ,IAAMA,SAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAIO,SAAS,IAAI,EAAE,OAAO,MAAM,YAAY,IAAI,SAAS,GAAoC;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAGA,OAAM,IAAI,CAAC,aAAa,SAAS;AAAA,MAC/C,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEX;AAAA;AAAA,EACH;AAEJ;;;ACxBM,gBAAAC,YAAA;AAHC,SAAS,UAAU,GAAU;AAClC,SACE,gBAAAA,KAAC,OAAK,GAAG,GACP,0BAAAA,KAAC,UAAK,GAAE,wBAAuB,GACjC;AAEJ;;;ACUI,gBAAAC,YAAA;AAZG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAI2D;AACzD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,WAAW,YAAY,EAAE,SAAS,MAAM,UAAU,CAAC;AAAA;AAAA,EACrD;AAEJ;;;AC1BO,IAAM,QAAQ;AAAA,EACnB,OAAO,EAAE,SAAS,UAAU,SAAS,aAAU;AAAA,EAC/C,OAAO,EAAE,SAAS,SAAS,SAAS,SAAS;AAC/C;;;ALoDU,SACE,OAAAC,MADF;AAjDV,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa,MAAM,MAAM,OAAO;AAClC,GAOG;AACD,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,UAAU,MAAM;AAEtB,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,OAAQ;AACb,QAAI,UAAU,CAAC,OAAO,KAAM,QAAO,UAAU;AAC7C,QAAI,CAAC,UAAU,OAAO,KAAM,QAAO,MAAM;AAAA,EAC3C,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,OAAQ;AACb,WAAO,iBAAiB,SAAS,OAAO;AACxC,WAAO,MAAM,OAAO,oBAAoB,SAAS,OAAO;AAAA,EAC1D,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,oPAAoP,aAAa,IAAI,CAAC;AAAA,MACjR,cAAW;AAAA,MACX,cAAY,QAAQ,SAAY,MAAM,MAAM,OAAO;AAAA,MACnD,mBAAiB,QAAQ,UAAU;AAAA,MAEnC,+BAAC,SAAI,WAAU,gDACZ;AAAA,gBACC,qBAAC,SAAI,WAAU,+FACb;AAAA,0BAAAA,KAAC,QAAG,IAAI,SAAS,WAAU,8BACxB,iBACH;AAAA,UACA,gBAAAA,KAAC,cAAW,OAAO,YAAY,SAAS,SACtC,0BAAAA,KAAC,aAAU,MAAK,MAAK,GACvB;AAAA,WACF,IACE;AAAA,QACJ,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,eAAe,4CAA4C;AAAA,YAEnE;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":["SIZES","jsx","jsx","jsx"]}

package/dist/client/multi-select.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type MultiSelectOption = {
+    value: string;
+    label: ReactNode;
+};
+declare function MultiSelect({ options, selected, onSelectedChange, label, className, }: {
+    options: readonly MultiSelectOption[];
+    selected?: readonly string[];
+    onSelectedChange?: (values: string[]) => void;
+    label?: string;
+    className?: string;
+}): react.JSX.Element;
+
+export { MultiSelect, type MultiSelectOption };

package/dist/client/multi-select.js

@@ -0,0 +1,84 @@
+"use client";
+"use client";
+
+// src/atoms/multi-select/index.tsx
+import { useMemo, useState } from "react";
+
+// src/atoms/input/control.ts
+var CONTROL = "w-full min-w-0 rounded-md border border-line-strong bg-field text-base text-ink sm:text-sm outline-none transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out focus:border-accent focus:ring-2 focus:ring-accent/30 aria-invalid:border-danger aria-invalid:ring-2 aria-invalid:ring-danger/20";
+var CONTROL_SIZES = {
+  md: "px-4 py-3",
+  sm: "px-3 py-2"
+};
+
+// src/atoms/input/input/index.tsx
+import { jsx } from "react/jsx-runtime";
+function Input({
+  size = "md",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("input", { ...props, className: `${CONTROL} ${CONTROL_SIZES[size]} ${className}` });
+}
+
+// src/atoms/multi-select/locales.ts
+var locales = { empty: "Select options", selected: "selected", search: "Search options" };
+
+// src/atoms/multi-select/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MultiSelect({
+  options,
+  selected = [],
+  onSelectedChange,
+  label = locales.empty,
+  className = ""
+}) {
+  function toggle(value) {
+    const next = selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value];
+    onSelectedChange?.(next);
+  }
+  const [query, setQuery] = useState("");
+  const visibleOptions = useMemo(
+    () => options.filter((option) => String(option.label).toLowerCase().includes(query.toLowerCase())),
+    [options, query]
+  );
+  return /* @__PURE__ */ jsxs("details", { className: `group relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "flex min-h-12 cursor-pointer list-none items-center justify-between rounded-md border border-line-strong bg-field px-4 py-3 text-sm text-ink transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ jsx2("span", { children: selected.length ? `${selected.length} ${locales.selected}` : label }),
+      /* @__PURE__ */ jsx2("span", { className: "text-ink-muted transition-transform duration-(--duration-fast) ease-out group-open:rotate-180", children: "\u2304" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-full z-20 mt-2 flex w-full flex-col gap-1 rounded-md border border-line bg-surface p-2 shadow-popover", children: [
+      /* @__PURE__ */ jsx2(
+        Input,
+        {
+          "aria-label": locales.search,
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: locales.search,
+          value: query
+        }
+      ),
+      visibleOptions.map((option) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex cursor-pointer items-center gap-3 rounded-sm px-3 py-2 text-sm text-ink-soft hover:bg-raised",
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                checked: selected.includes(String(option.value)),
+                onChange: () => toggle(String(option.value)),
+                type: "checkbox"
+              }
+            ),
+            option.label
+          ]
+        },
+        String(option.value)
+      ))
+    ] })
+  ] });
+}
+export {
+  MultiSelect
+};
+//# sourceMappingURL=multi-select.js.map

package/dist/client/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/multi-select/index.tsx","../../src/atoms/input/control.ts","../../src/atoms/input/input/index.tsx","../../src/atoms/multi-select/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo, useState, type ReactNode } from \"react\";\n\nimport { Input } from \"../input\";\nimport { locales } from \"./locales\";\n\nexport type MultiSelectOption = { value: string; label: ReactNode };\n\nexport function MultiSelect({\n  options,\n  selected = [],\n  onSelectedChange,\n  label = locales.empty,\n  className = \"\",\n}: {\n  options: readonly MultiSelectOption[];\n  selected?: readonly string[];\n  onSelectedChange?: (values: string[]) => void;\n  label?: string;\n  className?: string;\n}) {\n  function toggle(value: string) {\n    const next = selected.includes(value)\n      ? selected.filter((item) => item !== value)\n      : [...selected, value];\n    onSelectedChange?.(next);\n  }\n  const [query, setQuery] = useState(\"\");\n  const visibleOptions = useMemo(\n    () =>\n      options.filter((option) => String(option.label).toLowerCase().includes(query.toLowerCase())),\n    [options, query],\n  );\n  return (\n    <details className={`group relative w-full ${className}`}>\n      <summary className=\"flex min-h-12 cursor-pointer list-none items-center justify-between rounded-md border border-line-strong bg-field px-4 py-3 text-sm text-ink transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent [&::-webkit-details-marker]:hidden\">\n        <span>{selected.length ? `${selected.length} ${locales.selected}` : label}</span>\n        <span className=\"text-ink-muted transition-transform duration-(--duration-fast) ease-out group-open:rotate-180\">\n          ⌄\n        </span>\n      </summary>\n      <div className=\"absolute top-full z-20 mt-2 flex w-full flex-col gap-1 rounded-md border border-line bg-surface p-2 shadow-popover\">\n        <Input\n          aria-label={locales.search}\n          onChange={(event) => setQuery(event.target.value)}\n          placeholder={locales.search}\n          value={query}\n        />\n        {visibleOptions.map((option) => (\n          <label\n            className=\"flex cursor-pointer items-center gap-3 rounded-sm px-3 py-2 text-sm text-ink-soft hover:bg-raised\"\n            key={String(option.value)}\n          >\n            <input\n              checked={selected.includes(String(option.value))}\n              onChange={() => toggle(String(option.value))}\n              type=\"checkbox\"\n            />\n            {option.label}\n          </label>\n        ))}\n      </div>\n    </details>\n  );\n}\n","export const CONTROL =\n  \"w-full min-w-0 rounded-md border border-line-strong bg-field text-base text-ink sm:text-sm\" +\n  \" outline-none transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out focus:border-accent focus:ring-2 focus:ring-accent/30 aria-invalid:border-danger aria-invalid:ring-2 aria-invalid:ring-danger/20\";\n\nexport const CONTROL_SIZES = {\n  md: \"px-4 py-3\",\n  sm: \"px-3 py-2\",\n} as const;\n\nexport type ControlSize = keyof typeof CONTROL_SIZES;\n","import type { ComponentProps } from \"react\";\n\nimport { CONTROL, CONTROL_SIZES, type ControlSize } from \"../control\";\n\nexport function Input({\n  size = \"md\",\n  className = \"\",\n  ...props\n}: { size?: ControlSize } & Omit<ComponentProps<\"input\">, \"size\">) {\n  return <input {...props} className={`${CONTROL} ${CONTROL_SIZES[size]} ${className}`} />;\n}\n","export const locales = { empty: \"Select options\", selected: \"selected\", search: \"Search options\" };\n"],"mappings":";;;;AAEA,SAAS,SAAS,gBAAgC;;;ACF3C,IAAM,UACX;AAGK,IAAM,gBAAgB;AAAA,EAC3B,IAAI;AAAA,EACJ,IAAI;AACN;;;ACES;AALF,SAAS,MAAM;AAAA,EACpB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,GAAG;AACL,GAAmE;AACjE,SAAO,oBAAC,WAAO,GAAG,OAAO,WAAW,GAAG,OAAO,IAAI,cAAc,IAAI,CAAC,IAAI,SAAS,IAAI;AACxF;;;ACVO,IAAM,UAAU,EAAE,OAAO,kBAAkB,UAAU,YAAY,QAAQ,iBAAiB;;;AHoC3F,SACE,OAAAA,MADF;AA3BC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AAAA,EACA,QAAQ,QAAQ;AAAA,EAChB,YAAY;AACd,GAMG;AACD,WAAS,OAAO,OAAe;AAC7B,UAAM,OAAO,SAAS,SAAS,KAAK,IAChC,SAAS,OAAO,CAAC,SAAS,SAAS,KAAK,IACxC,CAAC,GAAG,UAAU,KAAK;AACvB,uBAAmB,IAAI;AAAA,EACzB;AACA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,iBAAiB;AAAA,IACrB,MACE,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC;AAAA,IAC7F,CAAC,SAAS,KAAK;AAAA,EACjB;AACA,SACE,qBAAC,aAAQ,WAAW,yBAAyB,SAAS,IACpD;AAAA,yBAAC,aAAQ,WAAU,8XACjB;AAAA,sBAAAA,KAAC,UAAM,mBAAS,SAAS,GAAG,SAAS,MAAM,IAAI,QAAQ,QAAQ,KAAK,OAAM;AAAA,MAC1E,gBAAAA,KAAC,UAAK,WAAU,iGAAgG,oBAEhH;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,sHACb;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,QAAQ;AAAA,UACpB,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,UAChD,aAAa,QAAQ;AAAA,UACrB,OAAO;AAAA;AAAA,MACT;AAAA,MACC,eAAe,IAAI,CAAC,WACnB;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAGV;AAAA,4BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,SAAS,SAAS,OAAO,OAAO,KAAK,CAAC;AAAA,gBAC/C,UAAU,MAAM,OAAO,OAAO,OAAO,KAAK,CAAC;AAAA,gBAC3C,MAAK;AAAA;AAAA,YACP;AAAA,YACC,OAAO;AAAA;AAAA;AAAA,QAPH,OAAO,OAAO,KAAK;AAAA,MAQ1B,CACD;AAAA,OACH;AAAA,KACF;AAEJ;","names":["jsx"]}

package/dist/client/number-input.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+declare function NumberInput({ className, ...props }: ComponentProps<"input">): react.JSX.Element;
+
+export { NumberInput };

package/dist/client/number-input.js

@@ -0,0 +1,59 @@
+"use client";
+"use client";
+
+// src/atoms/number-input/index.tsx
+import { useRef } from "react";
+
+// src/atoms/number-input/locales.ts
+var locales = { increase: "Increase value", decrease: "Decrease value" };
+
+// src/atoms/number-input/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function NumberInput({ className = "", ...props }) {
+  const ref = useRef(null);
+  const change = (direction) => {
+    const input = ref.current;
+    if (!input) return;
+    if (direction === "up") input.stepUp();
+    else input.stepDown();
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        ref,
+        className: `w-full min-w-0 rounded-md border border-line-strong bg-field px-4 py-3 pr-12 text-base text-ink transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none focus:border-accent focus:ring-2 focus:ring-accent/30 sm:text-sm ${className}`,
+        type: "number"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-1/2 right-1 flex -translate-y-1/2 flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": locales.increase,
+          className: "flex h-4 w-8 items-center justify-center rounded-xs text-2xs text-ink-muted hover:bg-raised hover:text-ink",
+          onClick: () => change("up"),
+          type: "button",
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": locales.decrease,
+          className: "flex h-4 w-8 items-center justify-center rounded-xs text-2xs text-ink-muted hover:bg-raised hover:text-ink",
+          onClick: () => change("down"),
+          type: "button",
+          children: "\u2212"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  NumberInput
+};
+//# sourceMappingURL=number-input.js.map

package/dist/client/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/number-input/index.tsx","../../src/atoms/number-input/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef, type ComponentProps } from \"react\";\n\nimport { locales } from \"./locales\";\n\nexport function NumberInput({ className = \"\", ...props }: ComponentProps<\"input\">) {\n  const ref = useRef<HTMLInputElement>(null);\n  const change = (direction: \"up\" | \"down\") => {\n    const input = ref.current;\n    if (!input) return;\n    if (direction === \"up\") input.stepUp();\n    else input.stepDown();\n    input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n  };\n\n  return (\n    <div className=\"relative flex w-full\">\n      <input\n        {...props}\n        ref={ref}\n        className={`w-full min-w-0 rounded-md border border-line-strong bg-field px-4 py-3 pr-12 text-base text-ink transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none focus:border-accent focus:ring-2 focus:ring-accent/30 sm:text-sm ${className}`}\n        type=\"number\"\n      />\n      <div className=\"absolute top-1/2 right-1 flex -translate-y-1/2 flex-col\">\n        <button\n          aria-label={locales.increase}\n          className=\"flex h-4 w-8 items-center justify-center rounded-xs text-2xs text-ink-muted hover:bg-raised hover:text-ink\"\n          onClick={() => change(\"up\")}\n          type=\"button\"\n        >\n          +\n        </button>\n        <button\n          aria-label={locales.decrease}\n          className=\"flex h-4 w-8 items-center justify-center rounded-xs text-2xs text-ink-muted hover:bg-raised hover:text-ink\"\n          onClick={() => change(\"down\")}\n          type=\"button\"\n        >\n          −\n        </button>\n      </div>\n    </div>\n  );\n}\n","export const locales = { increase: \"Increase value\", decrease: \"Decrease value\" };\n"],"mappings":";;;;AAEA,SAAS,cAAmC;;;ACFrC,IAAM,UAAU,EAAE,UAAU,kBAAkB,UAAU,iBAAiB;;;ADmB1E,cAMA,YANA;AAbC,SAAS,YAAY,EAAE,YAAY,IAAI,GAAG,MAAM,GAA4B;AACjF,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,SAAS,CAAC,cAA6B;AAC3C,UAAM,QAAQ,IAAI;AAClB,QAAI,CAAC,MAAO;AACZ,QAAI,cAAc,KAAM,OAAM,OAAO;AAAA,QAChC,OAAM,SAAS;AACpB,UAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AACzD,UAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,EAC5D;AAEA,SACE,qBAAC,SAAI,WAAU,wBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW,2QAA2Q,SAAS;AAAA,QAC/R,MAAK;AAAA;AAAA,IACP;AAAA,IACA,qBAAC,SAAI,WAAU,2DACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,QAAQ;AAAA,UACpB,WAAU;AAAA,UACV,SAAS,MAAM,OAAO,IAAI;AAAA,UAC1B,MAAK;AAAA,UACN;AAAA;AAAA,MAED;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,QAAQ;AAAA,UACpB,WAAU;AAAA,UACV,SAAS,MAAM,OAAO,MAAM;AAAA,UAC5B,MAAK;AAAA,UACN;AAAA;AAAA,MAED;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/client/password-input.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+declare const CONTROL_SIZES: {
+    readonly md: "px-4 py-3";
+    readonly sm: "px-3 py-2";
+};
+type ControlSize = keyof typeof CONTROL_SIZES;
+
+declare function PasswordInput({ className, showLabel, hideLabel, ...props }: {
+    size?: ControlSize;
+    showLabel?: string;
+    hideLabel?: string;
+} & Omit<ComponentProps<"input">, "size" | "type">): react.JSX.Element;
+
+export { PasswordInput };

package/dist/client/password-input.js

@@ -0,0 +1,103 @@
+"use client";
+"use client";
+
+// src/atoms/input/password-input/index.tsx
+import { useState } from "react";
+
+// src/atoms/icon/svg/index.tsx
+import { jsx } from "react/jsx-runtime";
+var SIZES = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+  xl: "h-6 w-6",
+  "2xl": "h-8 w-8"
+};
+function Svg({ size = "md", className = "", children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: `${SIZES[size]} shrink-0 ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+
+// src/atoms/icon/eye-icon/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function EyeIcon(p) {
+  return /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+
+// src/atoms/icon/eye-off-icon/index.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function EyeOffIcon(p) {
+  return /* @__PURE__ */ jsxs2(Svg, { ...p, children: [
+    /* @__PURE__ */ jsx3("path", { d: "M9.9 5.8A9.3 9.3 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-3.3 4.1" }),
+    /* @__PURE__ */ jsx3("path", { d: "M6.4 7.6A17 17 0 0 0 2.5 12S6 18.5 12 18.5a9.5 9.5 0 0 0 3.7-.7" }),
+    /* @__PURE__ */ jsx3("path", { d: "M10 10a2.8 2.8 0 0 0 4 4" }),
+    /* @__PURE__ */ jsx3("path", { d: "m4 4 16 16" })
+  ] });
+}
+
+// src/atoms/input/control.ts
+var CONTROL = "w-full min-w-0 rounded-md border border-line-strong bg-field text-base text-ink sm:text-sm outline-none transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out focus:border-accent focus:ring-2 focus:ring-accent/30 aria-invalid:border-danger aria-invalid:ring-2 aria-invalid:ring-danger/20";
+var CONTROL_SIZES = {
+  md: "px-4 py-3",
+  sm: "px-3 py-2"
+};
+
+// src/atoms/input/input/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Input({
+  size = "md",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4("input", { ...props, className: `${CONTROL} ${CONTROL_SIZES[size]} ${className}` });
+}
+
+// src/atoms/input/locales.ts
+var PASSWORD_INPUT = {
+  show: "Show password",
+  hide: "Hide password"
+};
+
+// src/atoms/input/password-input/index.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PasswordInput({
+  className = "",
+  showLabel = PASSWORD_INPUT.show,
+  hideLabel = PASSWORD_INPUT.hide,
+  ...props
+}) {
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ jsxs3("div", { className: "relative flex min-w-0", children: [
+    /* @__PURE__ */ jsx5(Input, { ...props, type: visible ? "text" : "password", className: `pr-11 ${className}` }),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisible((current) => !current),
+        "aria-label": visible ? hideLabel : showLabel,
+        "aria-pressed": visible,
+        className: "absolute inset-y-0 right-0 flex w-11 touch-manipulation items-center justify-center rounded-r-md text-ink-dim transition-colors select-none hover:text-ink",
+        children: visible ? /* @__PURE__ */ jsx5(EyeOffIcon, {}) : /* @__PURE__ */ jsx5(EyeIcon, {})
+      }
+    )
+  ] });
+}
+export {
+  PasswordInput
+};
+//# sourceMappingURL=password-input.js.map

package/dist/client/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/input/password-input/index.tsx","../../src/atoms/icon/svg/index.tsx","../../src/atoms/icon/eye-icon/index.tsx","../../src/atoms/icon/eye-off-icon/index.tsx","../../src/atoms/input/control.ts","../../src/atoms/input/input/index.tsx","../../src/atoms/input/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, type ComponentProps } from \"react\";\nimport { EyeIcon, EyeOffIcon } from \"../../icon\";\nimport type { ControlSize } from \"../control\";\nimport { Input } from \"../input\";\nimport { PASSWORD_INPUT as T } from \"../locales\";\n\nexport function PasswordInput({\n  className = \"\",\n  showLabel = T.show,\n  hideLabel = T.hide,\n  ...props\n}: {\n  size?: ControlSize;\n  showLabel?: string;\n  hideLabel?: string;\n} & Omit<ComponentProps<\"input\">, \"size\" | \"type\">) {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <div className=\"relative flex min-w-0\">\n      <Input {...props} type={visible ? \"text\" : \"password\"} className={`pr-11 ${className}`} />\n      <button\n        type=\"button\"\n        onClick={() => setVisible((current) => !current)}\n        aria-label={visible ? hideLabel : showLabel}\n        aria-pressed={visible}\n        className=\"absolute inset-y-0 right-0 flex w-11 touch-manipulation items-center justify-center rounded-r-md text-ink-dim transition-colors select-none hover:text-ink\"\n      >\n        {visible ? <EyeOffIcon /> : <EyeIcon />}\n      </button>\n    </div>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\nconst SIZES: Record<IconSize, string> = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n  xl: \"h-6 w-6\",\n  \"2xl\": \"h-8 w-8\",\n};\n\nexport type Props = { size?: IconSize; className?: string };\n\nexport function Svg({ size = \"md\", className = \"\", children }: Props & { children: ReactNode }) {\n  return (\n    <svg\n      className={`${SIZES[size]} shrink-0 ${className}`}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {children}\n    </svg>\n  );\n}\n","import { Svg, type Props } from \"../svg\";\n\nexport function EyeIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </Svg>\n  );\n}\n","import { Svg, type Props } from \"../svg\";\n\nexport function EyeOffIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"M9.9 5.8A9.3 9.3 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-3.3 4.1\" />\n      <path d=\"M6.4 7.6A17 17 0 0 0 2.5 12S6 18.5 12 18.5a9.5 9.5 0 0 0 3.7-.7\" />\n      <path d=\"M10 10a2.8 2.8 0 0 0 4 4\" />\n      <path d=\"m4 4 16 16\" />\n    </Svg>\n  );\n}\n","export const CONTROL =\n  \"w-full min-w-0 rounded-md border border-line-strong bg-field text-base text-ink sm:text-sm\" +\n  \" outline-none transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out focus:border-accent focus:ring-2 focus:ring-accent/30 aria-invalid:border-danger aria-invalid:ring-2 aria-invalid:ring-danger/20\";\n\nexport const CONTROL_SIZES = {\n  md: \"px-4 py-3\",\n  sm: \"px-3 py-2\",\n} as const;\n\nexport type ControlSize = keyof typeof CONTROL_SIZES;\n","import type { ComponentProps } from \"react\";\n\nimport { CONTROL, CONTROL_SIZES, type ControlSize } from \"../control\";\n\nexport function Input({\n  size = \"md\",\n  className = \"\",\n  ...props\n}: { size?: ControlSize } & Omit<ComponentProps<\"input\">, \"size\">) {\n  return <input {...props} className={`${CONTROL} ${CONTROL_SIZES[size]} ${className}`} />;\n}\n","export const PASSWORD_INPUT = {\n  show: \"Show password\",\n  hide: \"Hide password\",\n};\n"],"mappings":";;;;AAEA,SAAS,gBAAqC;;;ACc1C;AAZJ,IAAM,QAAkC;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAIO,SAAS,IAAI,EAAE,OAAO,MAAM,YAAY,IAAI,SAAS,GAAoC;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,MAAM,IAAI,CAAC,aAAa,SAAS;AAAA,MAC/C,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEX;AAAA;AAAA,EACH;AAEJ;;;ACzBI,SACE,OAAAA,MADF;AAFG,SAAS,QAAQ,GAAU;AAChC,SACE,qBAAC,OAAK,GAAG,GACP;AAAA,oBAAAA,KAAC,UAAK,GAAE,uEAAsE;AAAA,IAC9E,gBAAAA,KAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,KAChC;AAEJ;;;ACLI,SACE,OAAAC,MADF,QAAAC,aAAA;AAFG,SAAS,WAAW,GAAU;AACnC,SACE,gBAAAA,MAAC,OAAK,GAAG,GACP;AAAA,oBAAAD,KAAC,UAAK,GAAE,yEAAwE;AAAA,IAChF,gBAAAA,KAAC,UAAK,GAAE,mEAAkE;AAAA,IAC1E,gBAAAA,KAAC,UAAK,GAAE,4BAA2B;AAAA,IACnC,gBAAAA,KAAC,UAAK,GAAE,cAAa;AAAA,KACvB;AAEJ;;;ACXO,IAAM,UACX;AAGK,IAAM,gBAAgB;AAAA,EAC3B,IAAI;AAAA,EACJ,IAAI;AACN;;;ACES,gBAAAE,YAAA;AALF,SAAS,MAAM;AAAA,EACpB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,GAAG;AACL,GAAmE;AACjE,SAAO,gBAAAA,KAAC,WAAO,GAAG,OAAO,WAAW,GAAG,OAAO,IAAI,cAAc,IAAI,CAAC,IAAI,SAAS,IAAI;AACxF;;;ACVO,IAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM;AACR;;;ANkBI,SACE,OAAAC,MADF,QAAAC,aAAA;AAbG,SAAS,cAAc;AAAA,EAC5B,YAAY;AAAA,EACZ,YAAY,eAAE;AAAA,EACd,YAAY,eAAE;AAAA,EACd,GAAG;AACL,GAIoD;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,SACE,gBAAAA,MAAC,SAAI,WAAU,yBACb;AAAA,oBAAAD,KAAC,SAAO,GAAG,OAAO,MAAM,UAAU,SAAS,YAAY,WAAW,SAAS,SAAS,IAAI;AAAA,IACxF,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,WAAW,CAAC,YAAY,CAAC,OAAO;AAAA,QAC/C,cAAY,UAAU,YAAY;AAAA,QAClC,gBAAc;AAAA,QACd,WAAU;AAAA,QAET,oBAAU,gBAAAA,KAAC,cAAW,IAAK,gBAAAA,KAAC,WAAQ;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;","names":["jsx","jsx","jsxs","jsx","jsx","jsxs"]}

package/dist/client/pin-input.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+declare function PinInput({ length, value, onValueChange, className, }: {
+    length?: number;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+}): react.JSX.Element;
+
+export { PinInput };

package/dist/client/pin-input.js

@@ -0,0 +1,55 @@
+"use client";
+"use client";
+
+// src/atoms/pin-input/index.tsx
+import { useRef } from "react";
+
+// src/atoms/pin-input/locales.ts
+var locales = { digit: "Digit" };
+
+// src/atoms/pin-input/index.tsx
+import { jsx } from "react/jsx-runtime";
+function PinInput({
+  length = 6,
+  value = "",
+  onValueChange,
+  className = ""
+}) {
+  const refs = useRef([]);
+  const digits = Array.from({ length }, (_, index) => value[index] ?? "");
+  function update(index, digit) {
+    const next = digits.map((item, itemIndex) => itemIndex === index ? digit : item).join("");
+    onValueChange?.(next);
+    if (digit && index < length - 1) refs.current[index + 1]?.focus();
+  }
+  function handleKey(event, index) {
+    if (event.key === "Backspace" && !digits[index] && index > 0) refs.current[index - 1]?.focus();
+    if (event.key === "ArrowLeft" && index > 0) refs.current[index - 1]?.focus();
+    if (event.key === "ArrowRight" && index < length - 1) refs.current[index + 1]?.focus();
+  }
+  function handlePaste(event) {
+    event.preventDefault();
+    onValueChange?.(event.clipboardData.getData("text").replace(/\D/g, "").slice(0, length));
+  }
+  return /* @__PURE__ */ jsx("div", { className: `flex gap-2 ${className}`, children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": `${locales.digit} ${index + 1}`,
+      className: "size-12 rounded-md border border-line-strong bg-field text-center text-lg text-ink transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none focus:border-accent focus:ring-2 focus:ring-accent/30",
+      inputMode: "numeric",
+      maxLength: 1,
+      onChange: (event) => update(index, event.target.value.replace(/\D/g, "").slice(-1)),
+      onKeyDown: (event) => handleKey(event, index),
+      onPaste: handlePaste,
+      ref: (element) => {
+        refs.current[index] = element;
+      },
+      value: digit
+    },
+    index
+  )) });
+}
+export {
+  PinInput
+};
+//# sourceMappingURL=pin-input.js.map

package/dist/client/pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/pin-input/index.tsx","../../src/atoms/pin-input/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef, type ClipboardEvent, type KeyboardEvent } from \"react\";\n\nimport { locales } from \"./locales\";\n\nexport function PinInput({\n  length = 6,\n  value = \"\",\n  onValueChange,\n  className = \"\",\n}: {\n  length?: number;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  className?: string;\n}) {\n  const refs = useRef<Array<HTMLInputElement | null>>([]);\n  const digits = Array.from({ length }, (_, index) => value[index] ?? \"\");\n  function update(index: number, digit: string) {\n    const next = digits.map((item, itemIndex) => (itemIndex === index ? digit : item)).join(\"\");\n    onValueChange?.(next);\n    if (digit && index < length - 1) refs.current[index + 1]?.focus();\n  }\n  function handleKey(event: KeyboardEvent<HTMLInputElement>, index: number) {\n    if (event.key === \"Backspace\" && !digits[index] && index > 0) refs.current[index - 1]?.focus();\n    if (event.key === \"ArrowLeft\" && index > 0) refs.current[index - 1]?.focus();\n    if (event.key === \"ArrowRight\" && index < length - 1) refs.current[index + 1]?.focus();\n  }\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    event.preventDefault();\n    onValueChange?.(event.clipboardData.getData(\"text\").replace(/\\D/g, \"\").slice(0, length));\n  }\n  return (\n    <div className={`flex gap-2 ${className}`}>\n      {digits.map((digit, index) => (\n        <input\n          aria-label={`${locales.digit} ${index + 1}`}\n          className=\"size-12 rounded-md border border-line-strong bg-field text-center text-lg text-ink transition-[border-color,box-shadow] duration-(--duration-fast) ease-out outline-none focus:border-accent focus:ring-2 focus:ring-accent/30\"\n          inputMode=\"numeric\"\n          key={index}\n          maxLength={1}\n          onChange={(event) => update(index, event.target.value.replace(/\\D/g, \"\").slice(-1))}\n          onKeyDown={(event) => handleKey(event, index)}\n          onPaste={handlePaste}\n          ref={(element) => {\n            refs.current[index] = element;\n          }}\n          value={digit}\n        />\n      ))}\n    </div>\n  );\n}\n","export const locales = { digit: \"Digit\" };\n"],"mappings":";;;;AAEA,SAAS,cAAuD;;;ACFzD,IAAM,UAAU,EAAE,OAAO,QAAQ;;;ADoChC;AA9BD,SAAS,SAAS;AAAA,EACvB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AACd,GAKG;AACD,QAAM,OAAO,OAAuC,CAAC,CAAC;AACtD,QAAM,SAAS,MAAM,KAAK,EAAE,OAAO,GAAG,CAAC,GAAG,UAAU,MAAM,KAAK,KAAK,EAAE;AACtE,WAAS,OAAO,OAAe,OAAe;AAC5C,UAAM,OAAO,OAAO,IAAI,CAAC,MAAM,cAAe,cAAc,QAAQ,QAAQ,IAAK,EAAE,KAAK,EAAE;AAC1F,oBAAgB,IAAI;AACpB,QAAI,SAAS,QAAQ,SAAS,EAAG,MAAK,QAAQ,QAAQ,CAAC,GAAG,MAAM;AAAA,EAClE;AACA,WAAS,UAAU,OAAwC,OAAe;AACxE,QAAI,MAAM,QAAQ,eAAe,CAAC,OAAO,KAAK,KAAK,QAAQ,EAAG,MAAK,QAAQ,QAAQ,CAAC,GAAG,MAAM;AAC7F,QAAI,MAAM,QAAQ,eAAe,QAAQ,EAAG,MAAK,QAAQ,QAAQ,CAAC,GAAG,MAAM;AAC3E,QAAI,MAAM,QAAQ,gBAAgB,QAAQ,SAAS,EAAG,MAAK,QAAQ,QAAQ,CAAC,GAAG,MAAM;AAAA,EACvF;AACA,WAAS,YAAY,OAAyC;AAC5D,UAAM,eAAe;AACrB,oBAAgB,MAAM,cAAc,QAAQ,MAAM,EAAE,QAAQ,OAAO,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;AAAA,EACzF;AACA,SACE,oBAAC,SAAI,WAAW,cAAc,SAAS,IACpC,iBAAO,IAAI,CAAC,OAAO,UAClB;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,GAAG,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAAA,MACzC,WAAU;AAAA,MACV,WAAU;AAAA,MAEV,WAAW;AAAA,MACX,UAAU,CAAC,UAAU,OAAO,OAAO,MAAM,OAAO,MAAM,QAAQ,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC;AAAA,MAClF,WAAW,CAAC,UAAU,UAAU,OAAO,KAAK;AAAA,MAC5C,SAAS;AAAA,MACT,KAAK,CAAC,YAAY;AAChB,aAAK,QAAQ,KAAK,IAAI;AAAA,MACxB;AAAA,MACA,OAAO;AAAA;AAAA,IARF;AAAA,EASP,CACD,GACH;AAEJ;","names":[]}

package/dist/client/theme-toggle.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { Theme } from './theme.js';
+
+declare function ThemeToggle({ label }: {
+    label?: (theme: Theme) => string;
+}): react.JSX.Element;
+
+export { ThemeToggle };