@jameskabz/nextcraft-ui 0.6.6 → 0.6.8

package/dist/components/craft-date-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-date-picker.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDatePickerProps = {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  tone?: ThemeName;\n  min?: string;\n  max?: string;\n  placeholder?: string;\n  className?: string;\n};\n\nconst WEEK_DAYS = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"];\n\nfunction formatDate(date: Date) {\n  const year = date.getFullYear();\n  const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n  const day = `${date.getDate()}`.padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nfunction parseDate(value?: string) {\n  if (!value) return null;\n  const [year, month, day] = value.split(\"-\").map(Number);\n  if (!year || !month || !day) return null;\n  return new Date(year, month - 1, day);\n}\n\nfunction isSameDay(a: Date, b: Date) {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isOutsideRange(date: Date, min?: string, max?: string) {\n  const minDate = parseDate(min);\n  const maxDate = parseDate(max);\n  if (minDate && date < minDate) return true;\n  if (maxDate && date > maxDate) return true;\n  return false;\n}\n\nexport function CraftDatePicker({\n  value,\n  defaultValue,\n  onChange,\n  tone,\n  min,\n  max,\n  placeholder = \"Select date\",\n  className,\n}: CraftDatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? \"\");\n  const isControlled = value !== undefined;\n  const selectedValue = isControlled ? value ?? \"\" : uncontrolledValue;\n  const selectedDate = parseDate(selectedValue);\n\n  const initialMonth = selectedDate ?? new Date();\n  const [viewDate, setViewDate] = React.useState<Date>(initialMonth);\n\n  React.useEffect(() => {\n    if (selectedDate) setViewDate(selectedDate);\n  }, [selectedDate]);\n\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (event: MouseEvent) => {\n      if (!wrapperRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    document.addEventListener(\"keydown\", handleKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClick);\n      document.removeEventListener(\"keydown\", handleKey);\n    };\n  }, [open]);\n\n  const setValue = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n\n  const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);\n  const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);\n  const startDay = monthStart.getDay();\n  const daysInMonth = monthEnd.getDate();\n  const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {\n    const dayNumber = i - startDay + 1;\n    if (dayNumber < 1) return null;\n    return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);\n  });\n\n  const handleDaySelect = (date: Date) => {\n    if (isOutsideRange(date, min, max)) return;\n    const next = formatDate(date);\n    setValue(next);\n    setOpen(false);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!open) return;\n    if (!selectedDate) return;\n    const next = new Date(selectedDate);\n    if (event.key === \"ArrowRight\") next.setDate(next.getDate() + 1);\n    if (event.key === \"ArrowLeft\") next.setDate(next.getDate() - 1);\n    if (event.key === \"ArrowDown\") next.setDate(next.getDate() + 7);\n    if (event.key === \"ArrowUp\") next.setDate(next.getDate() - 7);\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      handleDaySelect(selectedDate);\n      return;\n    }\n    if (next.getTime() !== selectedDate.getTime()) {\n      event.preventDefault();\n      if (!isOutsideRange(next, min, max)) {\n        setValue(formatDate(next));\n        setViewDate(next);\n      }\n    }\n  };\n\n  return (\n    <div className=\"relative w-full\" data-nc-theme={tone} ref={wrapperRef}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"flex w-full items-center justify-between rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] px-5 py-3 text-left text-base text-[rgb(var(--nc-fg))] backdrop-blur-xl\",\n          \"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]\",\n          \"transition-all duration-300\",\n          \"border-[rgb(var(--nc-border)/0.35)]\",\n          \"focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]\",\n          className\n        )}\n      >\n        <span className={selectedValue ? \"text-[rgb(var(--nc-fg))]\" : \"text-[rgb(var(--nc-fg-soft))]\"}>\n          {selectedValue || placeholder}\n        </span>\n        <svg className=\"h-4 w-4 text-[rgb(var(--nc-fg-soft))]\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm10 6H4v8h12V8z\" />\n        </svg>\n      </button>\n\n      {open && (\n        <div\n          className={cn(\n            \"absolute left-0 top-full z-20 mt-3 w-full rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/1.52)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.55)] backdrop-blur-10xl\"\n          )}\n          onKeyDown={handleKeyDown}\n          tabIndex={-1}\n        >\n          <div className=\"flex items-center justify-between\">\n            <button\n              type=\"button\"\n              className=\"rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]\"\n              onClick={() =>\n                setViewDate(\n                  new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)\n                )\n              }\n            >\n              Prev\n            </button>\n            <div className=\"text-sm font-semibold\">\n              {viewDate.toLocaleString(undefined, { month: \"long\", year: \"numeric\" })}\n            </div>\n            <button\n              type=\"button\"\n              className=\"rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]\"\n              onClick={() =>\n                setViewDate(\n                  new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)\n                )\n              }\n            >\n              Next\n            </button>\n          </div>\n\n          <div className=\"mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]\">\n            {WEEK_DAYS.map((day) => (\n              <div key={day} className=\"text-center\">\n                {day}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"mt-2 grid grid-cols-7 gap-2\">\n            {cells.map((date, index) => {\n              if (!date) return <div key={`empty-${index}`} />;\n              const disabled = isOutsideRange(date, min, max);\n              const selected = selectedDate && isSameDay(date, selectedDate);\n              return (\n                <button\n                  key={date.toISOString()}\n                  type=\"button\"\n                  onClick={() => handleDaySelect(date)}\n                  disabled={disabled}\n                  className={cn(\n                    \"rounded-lg py-2 text-sm transition-all\",\n                    selected\n                      ? \"bg-[rgb(var(--nc-accent-1)/0.3)] text-[rgb(var(--nc-fg))]\"\n                      : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)]\",\n                    disabled && \"opacity-40 hover:bg-transparent\"\n                  )}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/craft-date-picker.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeName } from '../theme/theme-context.cjs';
+import 'react';
+
+type CraftDatePickerProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    tone?: ThemeName;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    className?: string;
+};
+declare function CraftDatePicker({ value, defaultValue, onChange, tone, min, max, placeholder, className, }: CraftDatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { CraftDatePicker, type CraftDatePickerProps };

package/dist/components/craft-date-picker.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeName } from '../theme/theme-context.js';
+import 'react';
+
+type CraftDatePickerProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    tone?: ThemeName;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    className?: string;
+};
+declare function CraftDatePicker({ value, defaultValue, onChange, tone, min, max, placeholder, className, }: CraftDatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { CraftDatePicker, type CraftDatePickerProps };

package/dist/components/craft-date-picker.js

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn";
+const WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function parseDate(value) {
+  if (!value) return null;
+  const [year, month, day] = value.split("-").map(Number);
+  if (!year || !month || !day) return null;
+  return new Date(year, month - 1, day);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isOutsideRange(date, min, max) {
+  const minDate = parseDate(min);
+  const maxDate = parseDate(max);
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  return false;
+}
+function CraftDatePicker({
+  value,
+  defaultValue,
+  onChange,
+  tone,
+  min,
+  max,
+  placeholder = "Select date",
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue != null ? defaultValue : "");
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value != null ? value : "" : uncontrolledValue;
+  const selectedDate = parseDate(selectedValue);
+  const initialMonth = selectedDate != null ? selectedDate : /* @__PURE__ */ new Date();
+  const [viewDate, setViewDate] = React.useState(initialMonth);
+  React.useEffect(() => {
+    if (selectedDate) setViewDate(selectedDate);
+  }, [selectedDate]);
+  const wrapperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      var _a;
+      if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(event.target))) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+  const setValue = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, onChange]
+  );
+  const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+  const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
+  const startDay = monthStart.getDay();
+  const daysInMonth = monthEnd.getDate();
+  const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {
+    const dayNumber = i - startDay + 1;
+    if (dayNumber < 1) return null;
+    return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);
+  });
+  const handleDaySelect = (date) => {
+    if (isOutsideRange(date, min, max)) return;
+    const next = formatDate(date);
+    setValue(next);
+    setOpen(false);
+  };
+  const handleKeyDown = (event) => {
+    if (!open) return;
+    if (!selectedDate) return;
+    const next = new Date(selectedDate);
+    if (event.key === "ArrowRight") next.setDate(next.getDate() + 1);
+    if (event.key === "ArrowLeft") next.setDate(next.getDate() - 1);
+    if (event.key === "ArrowDown") next.setDate(next.getDate() + 7);
+    if (event.key === "ArrowUp") next.setDate(next.getDate() - 7);
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleDaySelect(selectedDate);
+      return;
+    }
+    if (next.getTime() !== selectedDate.getTime()) {
+      event.preventDefault();
+      if (!isOutsideRange(next, min, max)) {
+        setValue(formatDate(next));
+        setViewDate(next);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", "data-nc-theme": tone, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        className: cn(
+          "flex w-full items-center justify-between rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] px-5 py-3 text-left text-base text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+          "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+          "transition-all duration-300",
+          "border-[rgb(var(--nc-border)/0.35)]",
+          "focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selectedValue ? "text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-soft))]", children: selectedValue || placeholder }),
+          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-[rgb(var(--nc-fg-soft))]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm10 6H4v8h12V8z" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "absolute left-0 top-full z-20 mt-3 w-full rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/1.52)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.55)] backdrop-blur-10xl"
+        ),
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
+                onClick: () => setViewDate(
+                  new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)
+                ),
+                children: "Prev"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: viewDate.toLocaleString(void 0, { month: "long", year: "numeric" }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
+                onClick: () => setViewDate(
+                  new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)
+                ),
+                children: "Next"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: "text-center", children: day }, day)) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-7 gap-2", children: cells.map((date, index) => {
+            if (!date) return /* @__PURE__ */ jsx("div", {}, `empty-${index}`);
+            const disabled = isOutsideRange(date, min, max);
+            const selected = selectedDate && isSameDay(date, selectedDate);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleDaySelect(date),
+                disabled,
+                className: cn(
+                  "rounded-lg py-2 text-sm transition-all",
+                  selected ? "bg-[rgb(var(--nc-accent-1)/0.3)] text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)]",
+                  disabled && "opacity-40 hover:bg-transparent"
+                ),
+                children: date.getDate()
+              },
+              date.toISOString()
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CraftDatePicker
+};
+//# sourceMappingURL=craft-date-picker.js.map

package/dist/components/craft-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-date-picker.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDatePickerProps = {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  tone?: ThemeName;\n  min?: string;\n  max?: string;\n  placeholder?: string;\n  className?: string;\n};\n\nconst WEEK_DAYS = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"];\n\nfunction formatDate(date: Date) {\n  const year = date.getFullYear();\n  const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n  const day = `${date.getDate()}`.padStart(2, \"0\");\n  return `${year}-${month}-${day}`;\n}\n\nfunction parseDate(value?: string) {\n  if (!value) return null;\n  const [year, month, day] = value.split(\"-\").map(Number);\n  if (!year || !month || !day) return null;\n  return new Date(year, month - 1, day);\n}\n\nfunction isSameDay(a: Date, b: Date) {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction isOutsideRange(date: Date, min?: string, max?: string) {\n  const minDate = parseDate(min);\n  const maxDate = parseDate(max);\n  if (minDate && date < minDate) return true;\n  if (maxDate && date > maxDate) return true;\n  return false;\n}\n\nexport function CraftDatePicker({\n  value,\n  defaultValue,\n  onChange,\n  tone,\n  min,\n  max,\n  placeholder = \"Select date\",\n  className,\n}: CraftDatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? \"\");\n  const isControlled = value !== undefined;\n  const selectedValue = isControlled ? value ?? \"\" : uncontrolledValue;\n  const selectedDate = parseDate(selectedValue);\n\n  const initialMonth = selectedDate ?? new Date();\n  const [viewDate, setViewDate] = React.useState<Date>(initialMonth);\n\n  React.useEffect(() => {\n    if (selectedDate) setViewDate(selectedDate);\n  }, [selectedDate]);\n\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (event: MouseEvent) => {\n      if (!wrapperRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    document.addEventListener(\"keydown\", handleKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClick);\n      document.removeEventListener(\"keydown\", handleKey);\n    };\n  }, [open]);\n\n  const setValue = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n\n  const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);\n  const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);\n  const startDay = monthStart.getDay();\n  const daysInMonth = monthEnd.getDate();\n  const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {\n    const dayNumber = i - startDay + 1;\n    if (dayNumber < 1) return null;\n    return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);\n  });\n\n  const handleDaySelect = (date: Date) => {\n    if (isOutsideRange(date, min, max)) return;\n    const next = formatDate(date);\n    setValue(next);\n    setOpen(false);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!open) return;\n    if (!selectedDate) return;\n    const next = new Date(selectedDate);\n    if (event.key === \"ArrowRight\") next.setDate(next.getDate() + 1);\n    if (event.key === \"ArrowLeft\") next.setDate(next.getDate() - 1);\n    if (event.key === \"ArrowDown\") next.setDate(next.getDate() + 7);\n    if (event.key === \"ArrowUp\") next.setDate(next.getDate() - 7);\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      handleDaySelect(selectedDate);\n      return;\n    }\n    if (next.getTime() !== selectedDate.getTime()) {\n      event.preventDefault();\n      if (!isOutsideRange(next, min, max)) {\n        setValue(formatDate(next));\n        setViewDate(next);\n      }\n    }\n  };\n\n  return (\n    <div className=\"relative w-full\" data-nc-theme={tone} ref={wrapperRef}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"flex w-full items-center justify-between rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] px-5 py-3 text-left text-base text-[rgb(var(--nc-fg))] backdrop-blur-xl\",\n          \"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]\",\n          \"transition-all duration-300\",\n          \"border-[rgb(var(--nc-border)/0.35)]\",\n          \"focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]\",\n          className\n        )}\n      >\n        <span className={selectedValue ? \"text-[rgb(var(--nc-fg))]\" : \"text-[rgb(var(--nc-fg-soft))]\"}>\n          {selectedValue || placeholder}\n        </span>\n        <svg className=\"h-4 w-4 text-[rgb(var(--nc-fg-soft))]\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm10 6H4v8h12V8z\" />\n        </svg>\n      </button>\n\n      {open && (\n        <div\n          className={cn(\n            \"absolute left-0 top-full z-20 mt-3 w-full rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/1.52)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.55)] backdrop-blur-10xl\"\n          )}\n          onKeyDown={handleKeyDown}\n          tabIndex={-1}\n        >\n          <div className=\"flex items-center justify-between\">\n            <button\n              type=\"button\"\n              className=\"rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]\"\n              onClick={() =>\n                setViewDate(\n                  new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)\n                )\n              }\n            >\n              Prev\n            </button>\n            <div className=\"text-sm font-semibold\">\n              {viewDate.toLocaleString(undefined, { month: \"long\", year: \"numeric\" })}\n            </div>\n            <button\n              type=\"button\"\n              className=\"rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]\"\n              onClick={() =>\n                setViewDate(\n                  new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)\n                )\n              }\n            >\n              Next\n            </button>\n          </div>\n\n          <div className=\"mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]\">\n            {WEEK_DAYS.map((day) => (\n              <div key={day} className=\"text-center\">\n                {day}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"mt-2 grid grid-cols-7 gap-2\">\n            {cells.map((date, index) => {\n              if (!date) return <div key={`empty-${index}`} />;\n              const disabled = isOutsideRange(date, min, max);\n              const selected = selectedDate && isSameDay(date, selectedDate);\n              return (\n                <button\n                  key={date.toISOString()}\n                  type=\"button\"\n                  onClick={() => handleDaySelect(date)}\n                  disabled={disabled}\n                  className={cn(\n                    \"rounded-lg py-2 text-sm transition-all\",\n                    selected\n                      ? \"bg-[rgb(var(--nc-accent-1)/0.3)] text-[rgb(var(--nc-fg))]\"\n                      : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)]\",\n                    disabled && \"opacity-40 hover:bg-transparent\"\n                  )}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/craft-drawer.cjs

@@ -0,0 +1,126 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var craft_drawer_exports = {};
+__export(craft_drawer_exports, {
+  CraftDrawer: () => CraftDrawer
+});
+module.exports = __toCommonJS(craft_drawer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+var import_cn = require("../utils/cn");
+function CraftDrawer({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  tone,
+  side = "left",
+  title,
+  children,
+  trigger,
+  footer,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = typeof open === "boolean";
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, setOpen]);
+  const content = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 backdrop-blur-sm",
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_cn.cn)(
+          "absolute top-0 h-full w-full max-w-md border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
+          side === "right" ? "right-0" : "left-0",
+          className
+        ),
+        "data-nc-theme": tone,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xl font-semibold", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]",
+                onClick: () => setOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-[rgb(var(--nc-border)/0.3)] p-6", children: footer })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        onClick: () => setOpen(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") setOpen(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        className: "inline-flex",
+        children: trigger
+      }
+    ),
+    typeof document !== "undefined" && content ? (0, import_react_dom.createPortal)(content, document.body) : content
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CraftDrawer
+});
+//# sourceMappingURL=craft-drawer.cjs.map

package/dist/components/craft-drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDrawerProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  tone?: ThemeName;\n  side?: \"right\" | \"left\";\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n};\n\nexport function CraftDrawer({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  tone,\n  side = \"left\",\n  title,\n  children,\n  trigger,\n  footer,\n  className,\n}: CraftDrawerProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const isControlled = typeof open === \"boolean\";\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [isOpen, setOpen]);\n\n  const content = isOpen ? (\n    <div className=\"fixed inset-0 z-50 overflow-hidden\">\n      <div\n        className=\"absolute inset-0 backdrop-blur-sm\"\n        onClick={() => setOpen(false)}\n      />\n      <div\n        className={cn(\n          \"absolute top-0 h-full w-full max-w-md border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl\",\n          side === \"right\" ? \"right-0\" : \"left-0\",\n          className\n        )}\n        data-nc-theme={tone}\n      >\n        <div className=\"flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6\">\n          {title && <h3 className=\"text-xl font-semibold\">{title}</h3>}\n          <button\n            className=\"rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]\"\n            onClick={() => setOpen(false)}\n            aria-label=\"Close\"\n          >\n            <svg viewBox=\"0 0 20 20\" className=\"h-4 w-4\" fill=\"currentColor\">\n              <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n            </svg>\n          </button>\n        </div>\n        <div className=\"p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]\">\n          {children}\n        </div>\n        {footer && <div className=\"border-t border-[rgb(var(--nc-border)/0.3)] p-6\">{footer}</div>}\n      </div>\n    </div>\n  ) : null;\n\n  return (\n    <>\n      {trigger && (\n        <span\n          onClick={() => setOpen(true)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\" || event.key === \" \") setOpen(true);\n          }}\n          role=\"button\"\n          tabIndex={0}\n          className=\"inline-flex\"\n        >\n          {trigger}\n        </span>\n      )}\n      {typeof document !== \"undefined\" && content\n        ? createPortal(content, document.body)\n        : content}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDM;AAtDN,YAAuB;AACvB,uBAA6B;AAE7B,gBAAmB;AAgBZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,WAAW;AAC1E,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,SAAS,eAAe,OAAO;AAErC,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,SAAkB;AACjB,UAAI,CAAC,aAAc,qBAAoB,IAAI;AAC3C,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,UAAU,SACd,6CAAC,SAAI,WAAU,sCACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,KAAK;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU,YAAY;AAAA,UAC/B;AAAA,QACF;AAAA,QACA,iBAAe;AAAA,QAEf;AAAA,uDAAC,SAAI,WAAU,qFACZ;AAAA,qBAAS,4CAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,YACvD;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,QAAQ,KAAK;AAAA,gBAC5B,cAAW;AAAA,gBAEX,sDAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,gBAChD,sDAAC,UAAK,GAAE,gLAA+K,GACzL;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UACA,4CAAC,SAAI,WAAU,uDACZ,UACH;AAAA,UACC,UAAU,4CAAC,SAAI,WAAU,mDAAmD,kBAAO;AAAA;AAAA;AAAA,IACtF;AAAA,KACF,IACE;AAEJ,SACE,4EACG;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK,SAAQ,IAAI;AAAA,QAC9D;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAED,OAAO,aAAa,eAAe,cAChC,+BAAa,SAAS,SAAS,IAAI,IACnC;AAAA,KACN;AAEJ;","names":[]}

package/dist/components/craft-drawer.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ThemeName } from '../theme/theme-context.cjs';
+
+type CraftDrawerProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    tone?: ThemeName;
+    side?: "right" | "left";
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    trigger?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+};
+declare function CraftDrawer({ open, defaultOpen, onOpenChange, tone, side, title, children, trigger, footer, className, }: CraftDrawerProps): react_jsx_runtime.JSX.Element;
+
+export { CraftDrawer, type CraftDrawerProps };

package/dist/components/craft-drawer.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ThemeName } from '../theme/theme-context.js';
+
+type CraftDrawerProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    tone?: ThemeName;
+    side?: "right" | "left";
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    trigger?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+};
+declare function CraftDrawer({ open, defaultOpen, onOpenChange, tone, side, title, children, trigger, footer, className, }: CraftDrawerProps): react_jsx_runtime.JSX.Element;
+
+export { CraftDrawer, type CraftDrawerProps };

package/dist/components/craft-drawer.js

@@ -0,0 +1,92 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../utils/cn";
+function CraftDrawer({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  tone,
+  side = "left",
+  title,
+  children,
+  trigger,
+  footer,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = typeof open === "boolean";
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, setOpen]);
+  const content = isOpen ? /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 backdrop-blur-sm",
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "absolute top-0 h-full w-full max-w-md border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
+          side === "right" ? "right-0" : "left-0",
+          className
+        ),
+        "data-nc-theme": tone,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6", children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]",
+                onClick: () => setOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]", children }),
+          footer && /* @__PURE__ */ jsx("div", { className: "border-t border-[rgb(var(--nc-border)/0.3)] p-6", children: footer })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger && /* @__PURE__ */ jsx(
+      "span",
+      {
+        onClick: () => setOpen(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") setOpen(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        className: "inline-flex",
+        children: trigger
+      }
+    ),
+    typeof document !== "undefined" && content ? createPortal(content, document.body) : content
+  ] });
+}
+export {
+  CraftDrawer
+};
+//# sourceMappingURL=craft-drawer.js.map

package/dist/components/craft-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDrawerProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  tone?: ThemeName;\n  side?: \"right\" | \"left\";\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n};\n\nexport function CraftDrawer({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  tone,\n  side = \"left\",\n  title,\n  children,\n  trigger,\n  footer,\n  className,\n}: CraftDrawerProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const isControlled = typeof open === \"boolean\";\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [isOpen, setOpen]);\n\n  const content = isOpen ? (\n    <div className=\"fixed inset-0 z-50 overflow-hidden\">\n      <div\n        className=\"absolute inset-0 backdrop-blur-sm\"\n        onClick={() => setOpen(false)}\n      />\n      <div\n        className={cn(\n          \"absolute top-0 h-full w-full max-w-md border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl\",\n          side === \"right\" ? \"right-0\" : \"left-0\",\n          className\n        )}\n        data-nc-theme={tone}\n      >\n        <div className=\"flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6\">\n          {title && <h3 className=\"text-xl font-semibold\">{title}</h3>}\n          <button\n            className=\"rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]\"\n            onClick={() => setOpen(false)}\n            aria-label=\"Close\"\n          >\n            <svg viewBox=\"0 0 20 20\" className=\"h-4 w-4\" fill=\"currentColor\">\n              <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n            </svg>\n          </button>\n        </div>\n        <div className=\"p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]\">\n          {children}\n        </div>\n        {footer && <div className=\"border-t border-[rgb(var(--nc-border)/0.3)] p-6\">{footer}</div>}\n      </div>\n    </div>\n  ) : null;\n\n  return (\n    <>\n      {trigger && (\n        <span\n          onClick={() => setOpen(true)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\" || event.key === \" \") setOpen(true);\n          }}\n          role=\"button\"\n          tabIndex={0}\n          className=\"inline-flex\"\n        >\n          {trigger}\n        </span>\n      )}\n      {typeof document !== \"undefined\" && content\n        ? createPortal(content, document.body)\n        : content}\n    </>\n  );\n}\n"],"mappings":";AAwDM,SAiCF,UAjCE,KAYE,YAZF;AAtDN,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AAgBZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,WAAW;AAC1E,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,SAAS,eAAe,OAAO;AAErC,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,SAAkB;AACjB,UAAI,CAAC,aAAc,qBAAoB,IAAI;AAC3C,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,UAAU,SACd,qBAAC,SAAI,WAAU,sCACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,KAAK;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU,YAAY;AAAA,UAC/B;AAAA,QACF;AAAA,QACA,iBAAe;AAAA,QAEf;AAAA,+BAAC,SAAI,WAAU,qFACZ;AAAA,qBAAS,oBAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,YACvD;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,QAAQ,KAAK;AAAA,gBAC5B,cAAW;AAAA,gBAEX,8BAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,gBAChD,8BAAC,UAAK,GAAE,gLAA+K,GACzL;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UACA,oBAAC,SAAI,WAAU,uDACZ,UACH;AAAA,UACC,UAAU,oBAAC,SAAI,WAAU,mDAAmD,kBAAO;AAAA;AAAA;AAAA,IACtF;AAAA,KACF,IACE;AAEJ,SACE,iCACG;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK,SAAQ,IAAI;AAAA,QAC9D;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAED,OAAO,aAAa,eAAe,UAChC,aAAa,SAAS,SAAS,IAAI,IACnC;AAAA,KACN;AAEJ;","names":[]}