jvdm-ui 1.0.5

package/dist/client/date-picker.js

@@ -0,0 +1,236 @@
+"use client";
+"use client";
+
+// src/atoms/date-picker/index.tsx
+import { useEffect, useRef, 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/chevron-icon/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ChevronIcon(p) {
+  return /* @__PURE__ */ jsx2(Svg, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
+}
+
+// src/atoms/date-picker/locales.ts
+var locales = {
+  previous: "Previous month",
+  next: "Next month",
+  calendar: "Choose a date",
+  today: "Today"
+};
+
+// src/atoms/date-picker/index.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CONTROL = "w-full min-w-0 rounded-md border border-line-strong bg-field px-4 py-3 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";
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTHS = Array.from(
+  { length: 12 },
+  (_, index) => new Intl.DateTimeFormat("en-US", { month: "short" }).format(new Date(2020, index, 1))
+);
+function dateKey(date) {
+  return [
+    date.getFullYear(),
+    String(date.getMonth() + 1).padStart(2, "0"),
+    String(date.getDate()).padStart(2, "0")
+  ].join("-");
+}
+function parseDate(value) {
+  if (!value) return /* @__PURE__ */ new Date();
+  const [year, month, day] = value.split("-").map(Number);
+  return year && month && day ? new Date(year, month - 1, day) : /* @__PURE__ */ new Date();
+}
+function formatDate(value) {
+  return new Intl.DateTimeFormat("en-US", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric"
+  }).format(parseDate(value));
+}
+function DatePicker({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className = "",
+  ...props
+}) {
+  const initial = value ?? defaultValue;
+  const [selected, setSelected] = useState(initial);
+  const [month, setMonth] = useState(() => {
+    const date = parseDate(initial);
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  });
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("calendar");
+  const ref = useRef(null);
+  useEffect(() => {
+    function handleDocument(event) {
+      if (!ref.current?.contains(event.target)) setOpen(false);
+    }
+    function handleKey(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleDocument);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleDocument);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, []);
+  const days = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const offset = new Date(month.getFullYear(), month.getMonth(), 1).getDay();
+  const monthLabel = new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(
+    month
+  );
+  function choose(date) {
+    const next = dateKey(date);
+    setSelected(next);
+    onValueChange?.(next);
+    setOpen(false);
+    setView("calendar");
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `date-picker-root relative w-full ${open ? "date-picker-root-open" : ""}`,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ...props,
+            className: `${CONTROL} cursor-pointer ${className}`,
+            onClick: () => setOpen(true),
+            readOnly: true,
+            value: selected ? formatDate(selected) : ""
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ChevronIcon,
+          {
+            className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-ink-muted",
+            size: "md"
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs("div", { className: "absolute top-full right-0 z-20 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-line bg-surface p-4 text-ink shadow-popover", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                "aria-label": locales.previous,
+                className: "flex size-8 items-center justify-center rounded-sm text-ink-muted transition-colors duration-(--duration-fast) ease-out hover:bg-raised hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                onClick: () => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1)),
+                type: "button",
+                children: /* @__PURE__ */ jsx3(ChevronIcon, { className: "rotate-90", size: "sm" })
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                className: "rounded-sm px-2 py-1 text-sm font-medium transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                onClick: () => setView(view === "calendar" ? "months" : view === "months" ? "years" : "calendar"),
+                type: "button",
+                children: monthLabel
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                "aria-label": locales.next,
+                className: "flex size-8 items-center justify-center rounded-sm text-ink-muted transition-colors duration-(--duration-fast) ease-out hover:bg-raised hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                onClick: () => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1)),
+                type: "button",
+                children: /* @__PURE__ */ jsx3(ChevronIcon, { className: "-rotate-90", size: "sm" })
+              }
+            )
+          ] }),
+          view === "years" ? /* @__PURE__ */ jsx3("div", { className: "mt-4 grid grid-cols-3 gap-2", children: Array.from({ length: 12 }, (_, index) => month.getFullYear() - 5 + index).map(
+            (year) => /* @__PURE__ */ jsx3(
+              "button",
+              {
+                className: `rounded-sm px-2 py-3 text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${year === month.getFullYear() ? "bg-accent text-on-accent" : "text-ink-soft"}`,
+                onClick: () => {
+                  setMonth(new Date(year, month.getMonth(), 1));
+                  setView("months");
+                },
+                type: "button",
+                children: year
+              },
+              year
+            )
+          ) }) : null,
+          view === "months" ? /* @__PURE__ */ jsx3("div", { className: "mt-4 grid grid-cols-3 gap-2", children: MONTHS.map((name, index) => /* @__PURE__ */ jsx3(
+            "button",
+            {
+              className: `rounded-sm px-2 py-3 text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${index === month.getMonth() ? "bg-accent text-on-accent" : "text-ink-soft"}`,
+              onClick: () => {
+                setMonth(new Date(month.getFullYear(), index, 1));
+                setView("calendar");
+              },
+              type: "button",
+              children: name
+            },
+            name
+          )) }) : null,
+          view === "calendar" ? /* @__PURE__ */ jsxs("div", { "aria-label": locales.calendar, className: "mt-4 grid grid-cols-7 gap-1", role: "grid", children: [
+            WEEKDAYS.map((day) => /* @__PURE__ */ jsx3("span", { className: "py-1 text-center text-2xs text-ink-dim", children: day }, day)),
+            Array.from({ length: offset }, (_, index) => /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "size-8" }, `empty-${index}`)),
+            Array.from({ length: days }, (_, index) => {
+              const date = new Date(month.getFullYear(), month.getMonth(), index + 1);
+              const active = dateKey(date) === selected;
+              return /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  "aria-current": active ? "date" : void 0,
+                  "aria-label": date.toLocaleDateString("en-US", { dateStyle: "long" }),
+                  className: `flex size-8 items-center justify-center rounded-sm text-xs transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${active ? "bg-accent font-medium text-on-accent hover:bg-accent-ink" : "text-ink-soft"}`,
+                  onClick: () => choose(date),
+                  type: "button",
+                  children: index + 1
+                },
+                dateKey(date)
+              );
+            })
+          ] }) : null,
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              className: "mt-4 w-full rounded-sm border-t border-line pt-3 text-center text-xs font-medium text-accent-ink transition-colors duration-(--duration-fast) ease-out hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+              onClick: () => choose(/* @__PURE__ */ new Date()),
+              type: "button",
+              children: locales.today
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  DatePicker
+};
+//# sourceMappingURL=date-picker.js.map

package/dist/client/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/date-picker/index.tsx","../../src/atoms/icon/svg/index.tsx","../../src/atoms/icon/chevron-icon/index.tsx","../../src/atoms/date-picker/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ComponentProps } from \"react\";\n\nimport { ChevronIcon } from \"../icon\";\nimport { locales } from \"./locales\";\n\nconst CONTROL =\n  \"w-full min-w-0 rounded-md border border-line-strong bg-field px-4 py-3 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\";\nconst WEEKDAYS = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"];\nconst MONTHS = Array.from({ length: 12 }, (_, index) =>\n  new Intl.DateTimeFormat(\"en-US\", { month: \"short\" }).format(new Date(2020, index, 1)),\n);\n\nfunction dateKey(date: Date) {\n  return [\n    date.getFullYear(),\n    String(date.getMonth() + 1).padStart(2, \"0\"),\n    String(date.getDate()).padStart(2, \"0\"),\n  ].join(\"-\");\n}\n\nfunction parseDate(value?: string) {\n  if (!value) return new Date();\n  const [year, month, day] = value.split(\"-\").map(Number);\n  return year && month && day ? new Date(year, month - 1, day) : new Date();\n}\n\nfunction formatDate(value: string) {\n  return new Intl.DateTimeFormat(\"en-US\", {\n    day: \"2-digit\",\n    month: \"short\",\n    year: \"numeric\",\n  }).format(parseDate(value));\n}\n\nexport function DatePicker({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className = \"\",\n  ...props\n}: Omit<ComponentProps<\"input\">, \"type\" | \"value\" | \"defaultValue\" | \"onChange\"> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}) {\n  const initial = value ?? defaultValue;\n  const [selected, setSelected] = useState(initial);\n  const [month, setMonth] = useState(() => {\n    const date = parseDate(initial);\n    return new Date(date.getFullYear(), date.getMonth(), 1);\n  });\n  const [open, setOpen] = useState(false);\n  const [view, setView] = useState<\"calendar\" | \"months\" | \"years\">(\"calendar\");\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    function handleDocument(event: MouseEvent) {\n      if (!ref.current?.contains(event.target as Node)) setOpen(false);\n    }\n    function handleKey(event: KeyboardEvent) {\n      if (event.key === \"Escape\") setOpen(false);\n    }\n    document.addEventListener(\"mousedown\", handleDocument);\n    document.addEventListener(\"keydown\", handleKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleDocument);\n      document.removeEventListener(\"keydown\", handleKey);\n    };\n  }, []);\n\n  const days = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();\n  const offset = new Date(month.getFullYear(), month.getMonth(), 1).getDay();\n  const monthLabel = new Intl.DateTimeFormat(\"en-US\", { month: \"long\", year: \"numeric\" }).format(\n    month,\n  );\n\n  function choose(date: Date) {\n    const next = dateKey(date);\n    setSelected(next);\n    onValueChange?.(next);\n    setOpen(false);\n    setView(\"calendar\");\n  }\n\n  return (\n    <div\n      className={`date-picker-root relative w-full ${open ? \"date-picker-root-open\" : \"\"}`}\n      ref={ref}\n    >\n      <input\n        {...props}\n        className={`${CONTROL} cursor-pointer ${className}`}\n        onClick={() => setOpen(true)}\n        readOnly\n        value={selected ? formatDate(selected) : \"\"}\n      />\n      <ChevronIcon\n        className=\"pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-ink-muted\"\n        size=\"md\"\n      />\n      {open ? (\n        <div className=\"absolute top-full right-0 z-20 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-line bg-surface p-4 text-ink shadow-popover\">\n          <div className=\"flex items-center justify-between\">\n            <button\n              aria-label={locales.previous}\n              className=\"flex size-8 items-center justify-center rounded-sm text-ink-muted transition-colors duration-(--duration-fast) ease-out hover:bg-raised hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\"\n              onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}\n              type=\"button\"\n            >\n              <ChevronIcon className=\"rotate-90\" size=\"sm\" />\n            </button>\n            <button\n              className=\"rounded-sm px-2 py-1 text-sm font-medium transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\"\n              onClick={() =>\n                setView(view === \"calendar\" ? \"months\" : view === \"months\" ? \"years\" : \"calendar\")\n              }\n              type=\"button\"\n            >\n              {monthLabel}\n            </button>\n            <button\n              aria-label={locales.next}\n              className=\"flex size-8 items-center justify-center rounded-sm text-ink-muted transition-colors duration-(--duration-fast) ease-out hover:bg-raised hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\"\n              onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}\n              type=\"button\"\n            >\n              <ChevronIcon className=\"-rotate-90\" size=\"sm\" />\n            </button>\n          </div>\n          {view === \"years\" ? (\n            <div className=\"mt-4 grid grid-cols-3 gap-2\">\n              {Array.from({ length: 12 }, (_, index) => month.getFullYear() - 5 + index).map(\n                (year) => (\n                  <button\n                    className={`rounded-sm px-2 py-3 text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${year === month.getFullYear() ? \"bg-accent text-on-accent\" : \"text-ink-soft\"}`}\n                    key={year}\n                    onClick={() => {\n                      setMonth(new Date(year, month.getMonth(), 1));\n                      setView(\"months\");\n                    }}\n                    type=\"button\"\n                  >\n                    {year}\n                  </button>\n                ),\n              )}\n            </div>\n          ) : null}\n          {view === \"months\" ? (\n            <div className=\"mt-4 grid grid-cols-3 gap-2\">\n              {MONTHS.map((name, index) => (\n                <button\n                  className={`rounded-sm px-2 py-3 text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${index === month.getMonth() ? \"bg-accent text-on-accent\" : \"text-ink-soft\"}`}\n                  key={name}\n                  onClick={() => {\n                    setMonth(new Date(month.getFullYear(), index, 1));\n                    setView(\"calendar\");\n                  }}\n                  type=\"button\"\n                >\n                  {name}\n                </button>\n              ))}\n            </div>\n          ) : null}\n          {view === \"calendar\" ? (\n            <div aria-label={locales.calendar} className=\"mt-4 grid grid-cols-7 gap-1\" role=\"grid\">\n              {WEEKDAYS.map((day) => (\n                <span className=\"py-1 text-center text-2xs text-ink-dim\" key={day}>\n                  {day}\n                </span>\n              ))}\n              {Array.from({ length: offset }, (_, index) => (\n                <span aria-hidden=\"true\" className=\"size-8\" key={`empty-${index}`} />\n              ))}\n              {Array.from({ length: days }, (_, index) => {\n                const date = new Date(month.getFullYear(), month.getMonth(), index + 1);\n                const active = dateKey(date) === selected;\n                return (\n                  <button\n                    aria-current={active ? \"date\" : undefined}\n                    aria-label={date.toLocaleDateString(\"en-US\", { dateStyle: \"long\" })}\n                    className={`flex size-8 items-center justify-center rounded-sm text-xs transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${active ? \"bg-accent font-medium text-on-accent hover:bg-accent-ink\" : \"text-ink-soft\"}`}\n                    key={dateKey(date)}\n                    onClick={() => choose(date)}\n                    type=\"button\"\n                  >\n                    {index + 1}\n                  </button>\n                );\n              })}\n            </div>\n          ) : null}\n          <button\n            className=\"mt-4 w-full rounded-sm border-t border-line pt-3 text-center text-xs font-medium text-accent-ink transition-colors duration-(--duration-fast) ease-out hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\"\n            onClick={() => choose(new Date())}\n            type=\"button\"\n          >\n            {locales.today}\n          </button>\n        </div>\n      ) : null}\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 ChevronIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"m6 9 6 6 6-6\" />\n    </Svg>\n  );\n}\n","export const locales = {\n  previous: \"Previous month\",\n  next: \"Next month\",\n  calendar: \"Choose a date\",\n  today: \"Today\",\n};\n"],"mappings":"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","names":["jsx","jsx"]}

package/dist/client/file-upload.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function FileUpload({ accept, multiple, onFilesChange, children, className, }: {
+    accept?: string;
+    multiple?: boolean;
+    onFilesChange?: (files: FileList | null) => void;
+    children?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+export { FileUpload };

package/dist/client/file-upload.js

@@ -0,0 +1,58 @@
+"use client";
+"use client";
+
+// src/atoms/file-upload/index.tsx
+import { useState } from "react";
+
+// src/atoms/file-upload/locales.ts
+var locales = { choose: "Choose files" };
+
+// src/atoms/file-upload/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FileUpload({
+  accept,
+  multiple = false,
+  onFilesChange,
+  children = locales.choose,
+  className = ""
+}) {
+  const [dragging, setDragging] = useState(false);
+  function handleChange(event) {
+    onFilesChange?.(event.target.files);
+  }
+  function handleDrop(event) {
+    event.preventDefault();
+    setDragging(false);
+    onFilesChange?.(event.dataTransfer.files);
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: `flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-line-strong px-4 py-6 text-sm text-ink-soft transition-[background-color,border-color] duration-(--duration-fast) ease-out focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-accent hover:bg-raised ${dragging ? "border-accent bg-accent-soft" : ""} ${className}`,
+      onDragEnter: (event) => {
+        event.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDragOver: (event) => event.preventDefault(),
+      onDrop: handleDrop,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            accept,
+            className: "sr-only",
+            multiple,
+            onChange: handleChange,
+            type: "file"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FileUpload
+};
+//# sourceMappingURL=file-upload.js.map

package/dist/client/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/file-upload/index.tsx","../../src/atoms/file-upload/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, type ChangeEvent, type DragEvent, type ReactNode } from \"react\";\n\nimport { locales } from \"./locales\";\n\nexport function FileUpload({\n  accept,\n  multiple = false,\n  onFilesChange,\n  children = locales.choose,\n  className = \"\",\n}: {\n  accept?: string;\n  multiple?: boolean;\n  onFilesChange?: (files: FileList | null) => void;\n  children?: ReactNode;\n  className?: string;\n}) {\n  const [dragging, setDragging] = useState(false);\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    onFilesChange?.(event.target.files);\n  }\n  function handleDrop(event: DragEvent<HTMLLabelElement>) {\n    event.preventDefault();\n    setDragging(false);\n    onFilesChange?.(event.dataTransfer.files);\n  }\n\n  return (\n    <label\n      className={`flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-line-strong px-4 py-6 text-sm text-ink-soft transition-[background-color,border-color] duration-(--duration-fast) ease-out focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-accent hover:bg-raised ${dragging ? \"border-accent bg-accent-soft\" : \"\"} ${className}`}\n      onDragEnter={(event) => {\n        event.preventDefault();\n        setDragging(true);\n      }}\n      onDragLeave={() => setDragging(false)}\n      onDragOver={(event) => event.preventDefault()}\n      onDrop={handleDrop}\n    >\n      {children}\n      <input\n        accept={accept}\n        className=\"sr-only\"\n        multiple={multiple}\n        onChange={handleChange}\n        type=\"file\"\n      />\n    </label>\n  );\n}\n","export const locales = { choose: \"Choose files\" };\n"],"mappings":";;;;AAEA,SAAS,gBAAkE;;;ACFpE,IAAM,UAAU,EAAE,QAAQ,eAAe;;;AD8B5C,SAWE,KAXF;AAxBG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,WAAW,QAAQ;AAAA,EACnB,YAAY;AACd,GAMG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,WAAS,aAAa,OAAsC;AAC1D,oBAAgB,MAAM,OAAO,KAAK;AAAA,EACpC;AACA,WAAS,WAAW,OAAoC;AACtD,UAAM,eAAe;AACrB,gBAAY,KAAK;AACjB,oBAAgB,MAAM,aAAa,KAAK;AAAA,EAC1C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,8UAA8U,WAAW,iCAAiC,EAAE,IAAI,SAAS;AAAA,MACpZ,aAAa,CAAC,UAAU;AACtB,cAAM,eAAe;AACrB,oBAAY,IAAI;AAAA,MAClB;AAAA,MACA,aAAa,MAAM,YAAY,KAAK;AAAA,MACpC,YAAY,CAAC,UAAU,MAAM,eAAe;AAAA,MAC5C,QAAQ;AAAA,MAEP;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACP;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/client/gallery.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function Gallery({ photos, alt, fallback, photoLabel, previousLabel, nextLabel, className, }: {
+    photos: string[];
+    alt: string;
+    fallback?: ReactNode;
+    photoLabel?: (index: number, total: number) => string;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+
+export { Gallery };

package/dist/client/gallery.js

@@ -0,0 +1,122 @@
+"use client";
+"use client";
+
+// src/molecules/gallery/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/back-icon/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function BackIcon(p) {
+  return /* @__PURE__ */ jsx2(Svg, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m14 6-6 6 6 6" }) });
+}
+
+// src/atoms/thumb/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Thumb({
+  src,
+  alt,
+  fallback,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `flex aspect-[4/3] items-center justify-center overflow-hidden rounded-md bg-raised text-ink-dim ${className}`,
+      children: src ? /* @__PURE__ */ jsx3("img", { src, alt, loading: "lazy", className: "h-full w-full object-cover" }) : fallback
+    }
+  );
+}
+
+// src/molecules/gallery/locales.ts
+var GALLERY = {
+  photoLabel: (index, total) => `Photo ${index} of ${total}`,
+  previous: "Previous photo",
+  next: "Next photo"
+};
+
+// src/molecules/gallery/index.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Gallery({
+  photos,
+  alt,
+  fallback,
+  photoLabel = GALLERY.photoLabel,
+  previousLabel = GALLERY.previous,
+  nextLabel = GALLERY.next,
+  className = ""
+}) {
+  const [index, setIndex] = useState(0);
+  const total = photos.length;
+  const current = Math.min(index, Math.max(0, total - 1));
+  const step = (delta) => setIndex((current + delta + total) % total);
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx4(Thumb, { src: photos[current] ?? null, alt, fallback }),
+      total > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": previousLabel,
+            onClick: () => step(-1),
+            className: "absolute top-1/2 left-2 flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-app/80 text-ink backdrop-blur transition-colors duration-(--duration-fast) ease-out hover:bg-app",
+            children: /* @__PURE__ */ jsx4(BackIcon, { size: "sm" })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": nextLabel,
+            onClick: () => step(1),
+            className: "absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-app/80 text-ink backdrop-blur transition-colors duration-(--duration-fast) ease-out hover:bg-app",
+            children: /* @__PURE__ */ jsx4(BackIcon, { size: "sm", className: "rotate-180" })
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "absolute right-2 bottom-2 rounded-sm bg-app/80 px-2 py-1 text-2xs text-ink-soft backdrop-blur", children: photoLabel(current + 1, total) })
+      ] }) : null
+    ] }),
+    total > 1 ? /* @__PURE__ */ jsx4("div", { className: "flex touch-pan-y gap-2 overflow-x-auto overscroll-contain", children: photos.map((photo, i) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "aria-label": photoLabel(i + 1, total),
+        "aria-current": i === current,
+        onClick: () => setIndex(i),
+        className: `w-20 shrink-0 overflow-hidden rounded-sm transition-opacity duration-(--duration-fast) ease-out ${i === current ? "ring-2 ring-accent" : "opacity-60 hover:opacity-100"}`,
+        children: /* @__PURE__ */ jsx4(Thumb, { src: photo, alt, fallback })
+      },
+      photo
+    )) }) : null
+  ] });
+}
+export {
+  Gallery
+};
+//# sourceMappingURL=gallery.js.map

package/dist/client/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/gallery/index.tsx","../../src/atoms/icon/svg/index.tsx","../../src/atoms/icon/back-icon/index.tsx","../../src/atoms/thumb/index.tsx","../../src/molecules/gallery/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\n\nimport { BackIcon, Thumb } from \"../../atoms\";\nimport { GALLERY as T } from \"./locales\";\n\nexport function Gallery({\n  photos,\n  alt,\n  fallback,\n  photoLabel = T.photoLabel,\n  previousLabel = T.previous,\n  nextLabel = T.next,\n  className = \"\",\n}: {\n  photos: string[];\n  alt: string;\n  fallback?: ReactNode;\n  photoLabel?: (index: number, total: number) => string;\n  previousLabel?: string;\n  nextLabel?: string;\n  className?: string;\n}) {\n  const [index, setIndex] = useState(0);\n\n  const total = photos.length;\n  const current = Math.min(index, Math.max(0, total - 1));\n  const step = (delta: number) => setIndex((current + delta + total) % total);\n\n  return (\n    <div className={`flex flex-col gap-2 ${className}`}>\n      <div className=\"relative\">\n        <Thumb src={photos[current] ?? null} alt={alt} fallback={fallback} />\n\n        {total > 1 ? (\n          <>\n            <button\n              type=\"button\"\n              aria-label={previousLabel}\n              onClick={() => step(-1)}\n              className=\"absolute top-1/2 left-2 flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-app/80 text-ink backdrop-blur transition-colors duration-(--duration-fast) ease-out hover:bg-app\"\n            >\n              <BackIcon size=\"sm\" />\n            </button>\n\n            <button\n              type=\"button\"\n              aria-label={nextLabel}\n              onClick={() => step(1)}\n              className=\"absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-app/80 text-ink backdrop-blur transition-colors duration-(--duration-fast) ease-out hover:bg-app\"\n            >\n              <BackIcon size=\"sm\" className=\"rotate-180\" />\n            </button>\n\n            <span className=\"absolute right-2 bottom-2 rounded-sm bg-app/80 px-2 py-1 text-2xs text-ink-soft backdrop-blur\">\n              {photoLabel(current + 1, total)}\n            </span>\n          </>\n        ) : null}\n      </div>\n\n      {total > 1 ? (\n        <div className=\"flex touch-pan-y gap-2 overflow-x-auto overscroll-contain\">\n          {photos.map((photo, i) => (\n            <button\n              key={photo}\n              type=\"button\"\n              aria-label={photoLabel(i + 1, total)}\n              aria-current={i === current}\n              onClick={() => setIndex(i)}\n              className={`w-20 shrink-0 overflow-hidden rounded-sm transition-opacity duration-(--duration-fast) ease-out ${\n                i === current ? \"ring-2 ring-accent\" : \"opacity-60 hover:opacity-100\"\n              }`}\n            >\n              <Thumb src={photo} alt={alt} fallback={fallback} />\n            </button>\n          ))}\n        </div>\n      ) : null}\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 BackIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"m14 6-6 6 6 6\" />\n    </Svg>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nexport function Thumb({\n  src,\n  alt,\n  fallback,\n  className = \"\",\n}: {\n  src?: string | null;\n  alt: string;\n  fallback?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={`flex aspect-[4/3] items-center justify-center overflow-hidden rounded-md bg-raised text-ink-dim ${className}`}\n    >\n      {src ? (\n        <img src={src} alt={alt} loading=\"lazy\" className=\"h-full w-full object-cover\" />\n      ) : (\n        fallback\n      )}\n    </div>\n  );\n}\n","export const GALLERY = {\n  photoLabel: (index: number, total: number) => `Photo ${index} of ${total}`,\n  previous: \"Previous photo\",\n  next: \"Next photo\",\n};\n"],"mappings":"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","names":["jsx","jsx","jsx"]}

package/dist/client/menu.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const ALIGNS: {
+    readonly start: "left-0";
+    readonly end: "right-0";
+};
+declare const WIDTHS: {
+    readonly sm: "w-48";
+    readonly md: "w-56";
+    readonly lg: "w-72";
+};
+type MenuAlign = keyof typeof ALIGNS;
+type MenuWidth = keyof typeof WIDTHS;
+declare function Menu({ label, trigger, align, width, className, children, }: {
+    label: string;
+    trigger: ReactNode;
+    align?: MenuAlign;
+    width?: MenuWidth;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { Menu, type MenuAlign, type MenuWidth };

package/dist/client/menu.js

@@ -0,0 +1,115 @@
+"use client";
+"use client";
+
+// src/molecules/menu/menu/index.tsx
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ALIGNS = {
+  start: "left-0",
+  end: "right-0"
+};
+var WIDTHS = {
+  sm: "w-48",
+  md: "w-56",
+  lg: "w-72"
+};
+function Menu({
+  label,
+  trigger,
+  align = "end",
+  width = "md",
+  className = "",
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const root = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const items = Children.toArray(children).map(
+    (child) => isValidElement(child) ? cloneElement(child, {
+      role: "menuitem",
+      tabIndex: -1
+    }) : child
+  );
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event) {
+      if (!root.current?.contains(event.target)) setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    menuRef.current?.querySelector('[role="menuitem"]')?.focus();
+  }, [open]);
+  function onMenuKeyDown(event) {
+    const menuItems = [
+      ...menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []
+    ];
+    const current = menuItems.indexOf(document.activeElement);
+    const next = (index) => menuItems[(index + menuItems.length) % menuItems.length]?.focus();
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      next(current + 1);
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      next(current - 1);
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      menuItems[0]?.focus();
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      menuItems.at(-1)?.focus();
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        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",
+        children: trigger
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        "aria-label": label,
+        onClick: () => setOpen(false),
+        onKeyDown: onMenuKeyDown,
+        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]}`,
+        children: items
+      }
+    ) : null
+  ] });
+}
+export {
+  Menu
+};
+//# sourceMappingURL=menu.js.map