@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-MILTPAF6.js

@@ -0,0 +1,255 @@
+import { DisplayValue } from './chunk-K7JGOQJG.js';
+import { Field } from './chunk-3DJGPNUI.js';
+import { inputBaseClasses, inputSizeClasses, dirtyClasses, errorClasses } from './chunk-GFYSELJF.js';
+import { useInlineEdit } from './chunk-OL53XYHF.js';
+import { useFieldMode } from './chunk-NRXK42LO.js';
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function formatDateValue(iso, includeTime) {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return includeTime ? date.toLocaleString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  }) : date.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+var DatePicker = forwardRef(
+  (props, ref) => {
+    const {
+      size = "md",
+      dirty,
+      error,
+      label,
+      description,
+      required,
+      disabled,
+      className,
+      id,
+      name,
+      min,
+      max,
+      includeTime
+    } = props;
+    const autoId = useId();
+    const pickerId = id ?? autoId;
+    const inputType = includeTime ? "datetime-local" : "date";
+    const inputClasses = cn(
+      inputBaseClasses,
+      inputSizeClasses[size],
+      dirtyClasses(dirty),
+      errorClasses(error),
+      "w-full"
+    );
+    if (props.range) {
+      return /* @__PURE__ */ jsx(
+        RangeDatePicker,
+        {
+          ...props,
+          id: pickerId,
+          inputType,
+          inputClasses,
+          ref
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SingleDatePicker,
+      {
+        ...props,
+        range: false,
+        id: pickerId,
+        inputType,
+        inputClasses,
+        ref
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+var SingleDatePicker = forwardRef(
+  ({
+    size = "md",
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    min,
+    max,
+    includeTime,
+    mode,
+    inputType,
+    inputClasses,
+    ...rest
+  }, ref) => {
+    const singleProps = rest;
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const [value, setValue] = useControllableState(
+      singleProps.value,
+      singleProps.defaultValue ?? "",
+      singleProps.onValueChange
+    );
+    const input = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: formatDateValue(value, includeTime)
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        "data-react-fancy-date-picker": "",
+        ref,
+        id,
+        type: inputType,
+        name,
+        min,
+        max,
+        value,
+        disabled,
+        required,
+        onChange: (e) => setValue(e.target.value),
+        className: cn(inputClasses, className),
+        autoFocus: interactive,
+        onBlur: () => {
+          if (interactive) exitEdit();
+        }
+      }
+    );
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: id,
+          size,
+          children: input
+        }
+      );
+    }
+    return input;
+  }
+);
+SingleDatePicker.displayName = "SingleDatePicker";
+var RangeDatePicker = forwardRef(
+  ({
+    size = "md",
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    min,
+    max,
+    includeTime,
+    mode,
+    inputType,
+    inputClasses,
+    ...rest
+  }, ref) => {
+    const rangeProps = rest;
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const [value, setValue] = useControllableState(
+      rangeProps.value,
+      rangeProps.defaultValue ?? ["", ""],
+      rangeProps.onValueChange
+    );
+    const input = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: value[0] || value[1] ? `${formatDateValue(value[0], includeTime)} \u2013 ${formatDateValue(value[1], includeTime)}` : ""
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-date-picker": "",
+        className: cn("flex items-center gap-2", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id,
+              type: inputType,
+              name: name ? `${name}_start` : void 0,
+              min,
+              max: value[1] || max,
+              value: value[0],
+              disabled,
+              required,
+              onChange: (e) => setValue([e.target.value, value[1]]),
+              className: inputClasses,
+              autoFocus: interactive
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "to" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: inputType,
+              name: name ? `${name}_end` : void 0,
+              min: value[0] || min,
+              max,
+              value: value[1],
+              disabled,
+              onChange: (e) => setValue([value[0], e.target.value]),
+              className: inputClasses
+            }
+          )
+        ]
+      }
+    );
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: id,
+          size,
+          children: input
+        }
+      );
+    }
+    return input;
+  }
+);
+RangeDatePicker.displayName = "RangeDatePicker";
+
+export { DatePicker };
+//# sourceMappingURL=chunk-MILTPAF6.js.map
+//# sourceMappingURL=chunk-MILTPAF6.js.map

package/dist/chunk-MILTPAF6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","file":"chunk-MILTPAF6.js","sourcesContent":["import { forwardRef, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport {\n  dirtyClasses,\n  errorClasses,\n  inputBaseClasses,\n  inputSizeClasses,\n} from \"../inputs.utils\";\nimport type { DatePickerProps } from \"./DatePicker.types\";\n\n/** Locale-format an ISO date / datetime-local string; fall back to the raw value. */\nfunction formatDateValue(iso: string, includeTime?: boolean): string {\n  if (!iso) return \"\";\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return iso;\n  return includeTime\n    ? date.toLocaleString(undefined, {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"numeric\",\n        hour: \"2-digit\",\n        minute: \"2-digit\",\n      })\n    : date.toLocaleDateString(undefined, {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"numeric\",\n      });\n}\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n  (props, ref) => {\n    const {\n      size = \"md\",\n      dirty,\n      error,\n      label,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      name,\n      min,\n      max,\n      includeTime,\n    } = props;\n\n    const autoId = useId();\n    const pickerId = id ?? autoId;\n    const inputType = includeTime ? \"datetime-local\" : \"date\";\n\n    const inputClasses = cn(\n      inputBaseClasses,\n      inputSizeClasses[size],\n      dirtyClasses(dirty),\n      errorClasses(error),\n      \"w-full\",\n    );\n\n    if (props.range) {\n      return (\n        <RangeDatePicker\n          {...props}\n          id={pickerId}\n          inputType={inputType}\n          inputClasses={inputClasses}\n          ref={ref}\n        />\n      );\n    }\n\n    return (\n      <SingleDatePicker\n        {...props}\n        range={false}\n        id={pickerId}\n        inputType={inputType}\n        inputClasses={inputClasses}\n        ref={ref}\n      />\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n\ninterface InternalProps {\n  inputType: string;\n  inputClasses: string;\n}\n\nconst SingleDatePicker = forwardRef<\n  HTMLInputElement,\n  DatePickerProps & { range?: false } & InternalProps\n>(\n  (\n    {\n      size = \"md\",\n      error,\n      label,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      name,\n      min,\n      max,\n      includeTime,\n      mode,\n      inputType,\n      inputClasses,\n      ...rest\n    },\n    ref,\n  ) => {\n    const singleProps = rest as {\n      value?: string;\n      defaultValue?: string;\n      onValueChange?: (v: string) => void;\n    };\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n    const [value, setValue] = useControllableState(\n      singleProps.value,\n      singleProps.defaultValue ?? \"\",\n      singleProps.onValueChange,\n    );\n\n    const input = !showControl ? (\n      <DisplayValue\n        size={size}\n        className={className}\n        interactive={interactive}\n        onActivate={enterEdit}\n      >\n        {formatDateValue(value, includeTime)}\n      </DisplayValue>\n    ) : (\n      <input\n        data-react-fancy-date-picker=\"\"\n        ref={ref}\n        id={id}\n        type={inputType}\n        name={name}\n        min={min}\n        max={max}\n        value={value}\n        disabled={disabled}\n        required={required}\n        onChange={(e) => setValue(e.target.value)}\n        className={cn(inputClasses, className)}\n        autoFocus={interactive}\n        onBlur={() => {\n          if (interactive) exitEdit();\n        }}\n      />\n    );\n\n    if (label || error || description) {\n      return (\n        <Field\n          label={label}\n          description={description}\n          error={error}\n          required={required}\n          htmlFor={id}\n          size={size}\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    return input;\n  },\n);\n\nSingleDatePicker.displayName = \"SingleDatePicker\";\n\nconst RangeDatePicker = forwardRef<\n  HTMLInputElement,\n  DatePickerProps & { range: true } & InternalProps\n>(\n  (\n    {\n      size = \"md\",\n      error,\n      label,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      name,\n      min,\n      max,\n      includeTime,\n      mode,\n      inputType,\n      inputClasses,\n      ...rest\n    },\n    ref,\n  ) => {\n    const rangeProps = rest as {\n      value?: [string, string];\n      defaultValue?: [string, string];\n      onValueChange?: (v: [string, string]) => void;\n    };\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n    const [value, setValue] = useControllableState(\n      rangeProps.value,\n      rangeProps.defaultValue ?? [\"\", \"\"] as [string, string],\n      rangeProps.onValueChange,\n    );\n\n    const input = !showControl ? (\n      <DisplayValue\n        size={size}\n        className={className}\n        interactive={interactive}\n        onActivate={enterEdit}\n      >\n        {value[0] || value[1]\n          ? `${formatDateValue(value[0], includeTime)} – ${formatDateValue(value[1], includeTime)}`\n          : \"\"}\n      </DisplayValue>\n    ) : (\n      <div\n        data-react-fancy-date-picker=\"\"\n        className={cn(\"flex items-center gap-2\", className)}\n        onBlur={(e) => {\n          if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n        }}\n      >\n        <input\n          ref={ref}\n          id={id}\n          type={inputType}\n          name={name ? `${name}_start` : undefined}\n          min={min}\n          max={value[1] || max}\n          value={value[0]}\n          disabled={disabled}\n          required={required}\n          onChange={(e) => setValue([e.target.value, value[1]])}\n          className={inputClasses}\n          autoFocus={interactive}\n        />\n        <span className=\"text-sm text-zinc-500 dark:text-zinc-400\">to</span>\n        <input\n          type={inputType}\n          name={name ? `${name}_end` : undefined}\n          min={value[0] || min}\n          max={max}\n          value={value[1]}\n          disabled={disabled}\n          onChange={(e) => setValue([value[0], e.target.value])}\n          className={inputClasses}\n        />\n      </div>\n    );\n\n    if (label || error || description) {\n      return (\n        <Field\n          label={label}\n          description={description}\n          error={error}\n          required={required}\n          htmlFor={id}\n          size={size}\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    return input;\n  },\n);\n\nRangeDatePicker.displayName = \"RangeDatePicker\";\n"]}

package/dist/chunk-MQ6VGG62.js

@@ -0,0 +1,113 @@
+import { useState, useCallback, useEffect } from 'react';
+
+// src/hooks/use-floating-position.ts
+function getPosition(anchor, floating, placement, offset) {
+  let x = 0;
+  let y = 0;
+  const base = placement.split("-")[0];
+  const align = placement.split("-")[1];
+  switch (base) {
+    case "top":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.top - floating.height - offset;
+      break;
+    case "bottom":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.bottom + offset;
+      break;
+    case "left":
+      x = anchor.left - floating.width - offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+    case "right":
+      x = anchor.right + offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+  }
+  if (base === "top" || base === "bottom") {
+    if (align === "start") x = anchor.left;
+    else if (align === "end") x = anchor.right - floating.width;
+  }
+  if (base === "left" || base === "right") {
+    if (align === "start") y = anchor.top;
+    else if (align === "end") y = anchor.bottom - floating.height;
+  }
+  let finalPlacement = placement;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (base === "bottom" && y + floating.height > vh) {
+    y = anchor.top - floating.height - offset;
+    finalPlacement = placement.replace("bottom", "top");
+  } else if (base === "top" && y < 0) {
+    y = anchor.bottom + offset;
+    finalPlacement = placement.replace("top", "bottom");
+  }
+  x = Math.max(4, Math.min(x, vw - floating.width - 4));
+  y = Math.max(4, Math.min(y, vh - floating.height - 4));
+  return { x, y, placement: finalPlacement };
+}
+function useFloatingPosition(anchorRef, floatingRef, options = {}) {
+  const { placement = "bottom", offset = 8, enabled = true } = options;
+  const [position, setPosition] = useState({
+    x: -9999,
+    y: -9999,
+    placement
+  });
+  const update = useCallback(() => {
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!anchor || !floating) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const floatingRect = floating.getBoundingClientRect();
+    const next = getPosition(anchorRect, floatingRect, placement, offset);
+    setPosition(
+      (prev) => prev.x === next.x && prev.y === next.y && prev.placement === next.placement ? prev : next
+    );
+  }, [anchorRef, floatingRef, placement, offset]);
+  useEffect(() => {
+    if (enabled) update();
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    let raf = 0;
+    let ro = null;
+    const tick = () => {
+      const el = floatingRef.current;
+      if (el) {
+        update();
+        if (typeof ResizeObserver !== "undefined") {
+          ro = new ResizeObserver(() => update());
+          ro.observe(el);
+        }
+      } else {
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro?.disconnect();
+    };
+  }, [enabled, update, floatingRef]);
+  useEffect(() => {
+    if (!enabled) {
+      setPosition(
+        (prev) => prev.x === -9999 ? prev : { x: -9999, y: -9999, placement }
+      );
+    }
+  }, [enabled, placement]);
+  useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [update, enabled]);
+  return position;
+}
+
+export { useFloatingPosition };
+//# sourceMappingURL=chunk-MQ6VGG62.js.map
+//# sourceMappingURL=chunk-MQ6VGG62.js.map

package/dist/chunk-MQ6VGG62.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-floating-position.ts"],"names":[],"mappings":"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","file":"chunk-MQ6VGG62.js","sourcesContent":["import { useCallback, useEffect, useState, type RefObject } from \"react\";\nimport type { Placement } from \"../utils/types\";\n\ninterface FloatingPosition {\n  x: number;\n  y: number;\n  placement: Placement;\n}\n\ninterface UseFloatingPositionOptions {\n  placement?: Placement;\n  offset?: number;\n  enabled?: boolean;\n}\n\nfunction getPosition(\n  anchor: DOMRect,\n  floating: DOMRect,\n  placement: Placement,\n  offset: number,\n): FloatingPosition {\n  let x = 0;\n  let y = 0;\n  const base = placement.split(\"-\")[0] as \"top\" | \"bottom\" | \"left\" | \"right\";\n  const align = placement.split(\"-\")[1] as \"start\" | \"end\" | undefined;\n\n  switch (base) {\n    case \"top\":\n      x = anchor.left + anchor.width / 2 - floating.width / 2;\n      y = anchor.top - floating.height - offset;\n      break;\n    case \"bottom\":\n      x = anchor.left + anchor.width / 2 - floating.width / 2;\n      y = anchor.bottom + offset;\n      break;\n    case \"left\":\n      x = anchor.left - floating.width - offset;\n      y = anchor.top + anchor.height / 2 - floating.height / 2;\n      break;\n    case \"right\":\n      x = anchor.right + offset;\n      y = anchor.top + anchor.height / 2 - floating.height / 2;\n      break;\n  }\n\n  if (base === \"top\" || base === \"bottom\") {\n    if (align === \"start\") x = anchor.left;\n    else if (align === \"end\") x = anchor.right - floating.width;\n  }\n\n  if (base === \"left\" || base === \"right\") {\n    if (align === \"start\") y = anchor.top;\n    else if (align === \"end\") y = anchor.bottom - floating.height;\n  }\n\n  // Viewport clamping\n  let finalPlacement = placement;\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n\n  if (base === \"bottom\" && y + floating.height > vh) {\n    y = anchor.top - floating.height - offset;\n    finalPlacement = placement.replace(\"bottom\", \"top\") as Placement;\n  } else if (base === \"top\" && y < 0) {\n    y = anchor.bottom + offset;\n    finalPlacement = placement.replace(\"top\", \"bottom\") as Placement;\n  }\n\n  x = Math.max(4, Math.min(x, vw - floating.width - 4));\n  y = Math.max(4, Math.min(y, vh - floating.height - 4));\n\n  return { x, y, placement: finalPlacement };\n}\n\nexport function useFloatingPosition(\n  anchorRef: RefObject<HTMLElement | null>,\n  floatingRef: RefObject<HTMLElement | null>,\n  options: UseFloatingPositionOptions = {},\n): FloatingPosition {\n  const { placement = \"bottom\", offset = 8, enabled = true } = options;\n  const [position, setPosition] = useState<FloatingPosition>({\n    x: -9999,\n    y: -9999,\n    placement,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    const floating = floatingRef.current;\n    if (!anchor || !floating) return;\n\n    const anchorRect = anchor.getBoundingClientRect();\n    const floatingRect = floating.getBoundingClientRect();\n    const next = getPosition(anchorRect, floatingRect, placement, offset);\n    // Bail out when nothing changed so this can run after every commit\n    // (below) without causing an infinite render loop.\n    setPosition((prev) =>\n      prev.x === next.x && prev.y === next.y && prev.placement === next.placement\n        ? prev\n        : next,\n    );\n  }, [anchorRef, floatingRef, placement, offset]);\n\n  // Re-measure after every commit while open.\n  //\n  // The floating element mounts a frame or two AFTER `enabled` flips — its\n  // render is gated behind a state flip (e.g. useAnimation's `mounted`), so at\n  // the moment `enabled` turns true the floating ref is still null and a single\n  // measurement no-ops, leaving the popover parked at its off-screen sentinel.\n  //\n  // A passive effect with no deps runs after *every* commit — including the one\n  // that finally mounts the floating element — and, crucially, keeps running in\n  // hidden/background tabs where `requestAnimationFrame` is paused. The bail-out\n  // in `update` makes the steady-state calls free, so this both fixes the\n  // late-mount race and survives tab-visibility throttling.\n  useEffect(() => {\n    if (enabled) update();\n  });\n\n  // …but the per-commit effect ISN'T enough when the floating element mounts\n  // through a <Portal> whose own mount gate (SSR-safe; renders nothing until its\n  // useEffect runs) attaches the node WITHOUT re-rendering this hook's component.\n  // Then no commit happens here, the measurement never runs, and the popover\n  // stays parked at its off-screen sentinel until an unrelated scroll/resize\n  // fires `update()` — the \"menu only appears after I scroll\" bug. Poll with rAF\n  // until the node is actually in the DOM, measure it, then keep it observed for\n  // size changes (async content / lazily-loaded icons).\n  useEffect(() => {\n    if (!enabled) return;\n    let raf = 0;\n    let ro: ResizeObserver | null = null;\n    const tick = () => {\n      const el = floatingRef.current;\n      if (el) {\n        update();\n        if (typeof ResizeObserver !== \"undefined\") {\n          ro = new ResizeObserver(() => update());\n          ro.observe(el);\n        }\n      } else {\n        raf = requestAnimationFrame(tick);\n      }\n    };\n    raf = requestAnimationFrame(tick);\n    return () => {\n      cancelAnimationFrame(raf);\n      ro?.disconnect();\n    };\n  }, [enabled, update, floatingRef]);\n\n  // Park off-screen when closed so the next open re-measures from scratch.\n  useEffect(() => {\n    if (!enabled) {\n      setPosition((prev) =>\n        prev.x === -9999 ? prev : { x: -9999, y: -9999, placement },\n      );\n    }\n  }, [enabled, placement]);\n\n  // Reposition on scroll/resize while open.\n  useEffect(() => {\n    if (!enabled) return;\n\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [update, enabled]);\n\n  return position;\n}\n"]}

package/dist/chunk-MYF2PDTU.js

@@ -0,0 +1,137 @@
+import { useFocusTrap } from './chunk-5U2DZ7AV.js';
+import { useAnimation } from './chunk-CHADHN6M.js';
+import { Portal } from './chunk-WHEXTDPV.js';
+import { useEscapeKey } from './chunk-JXE5XID6.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import { X } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ModalContext = createContext(null);
+function useModal() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("Modal compound components must be used within <Modal>");
+  }
+  return ctx;
+}
+function ModalHeader({ children, className }) {
+  const { close } = useModal();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-react-fancy-modal-header": "",
+      className: cn(
+        "flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100", children }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(X, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
+}
+ModalHeader.displayName = "ModalHeader";
+function ModalBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-react-fancy-modal-body": "", className: cn("flex-1 overflow-y-auto px-6 py-4 text-zinc-700 dark:text-zinc-300", className), children });
+}
+ModalBody.displayName = "ModalBody";
+function ModalFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-modal-footer": "",
+      className: cn(
+        "flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700",
+        className
+      ),
+      children
+    }
+  );
+}
+ModalFooter.displayName = "ModalFooter";
+var SIZE_MAP = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]"
+};
+function ModalRoot({
+  children,
+  open,
+  onClose,
+  size = "md",
+  className,
+  ...rest
+}) {
+  const panelRef = useRef(null);
+  const close = useCallback(() => onClose(), [onClose]);
+  useEscapeKey(close, open);
+  useFocusTrap(panelRef, open);
+  useEffect(() => {
+    if (open) {
+      const original = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = original;
+      };
+    }
+  }, [open]);
+  const { mounted, className: animClass, ref: animRef } = useAnimation({
+    open,
+    enterClass: "fancy-slide-up",
+    exitClass: "fancy-fade-out"
+  });
+  const ctx = useMemo(() => ({ open, close }), [open, close]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          panelRef.current = node;
+          animRef.current = node;
+        },
+        "data-react-fancy-modal": "",
+        role: "dialog",
+        "aria-modal": "true",
+        ...rest,
+        className: cn(
+          "relative flex w-full flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900",
+          SIZE_MAP[size],
+          animClass,
+          className
+        ),
+        children
+      }
+    )
+  ] }) }) });
+}
+var Modal = Object.assign(ModalRoot, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter
+});
+
+export { Modal, useModal };
+//# sourceMappingURL=chunk-MYF2PDTU.js.map
+//# sourceMappingURL=chunk-MYF2PDTU.js.map

package/dist/chunk-MYF2PDTU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.context.ts","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/Modal.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-MYF2PDTU.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ModalContextValue } from \"./Modal.types\";\n\nexport const ModalContext = createContext<ModalContextValue | null>(null);\n\nexport function useModal(): ModalContextValue {\n  const ctx = useContext(ModalContext);\n  if (!ctx) {\n    throw new Error(\"Modal compound components must be used within <Modal>\");\n  }\n  return ctx;\n}\n","import { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useModal } from \"./Modal.context\";\nimport type { ModalHeaderProps } from \"./Modal.types\";\n\nexport function ModalHeader({ children, className }: ModalHeaderProps) {\n  const { close } = useModal();\n\n  return (\n    <div\n      data-react-fancy-modal-header=\"\"\n      className={cn(\n        \"flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700\",\n        className,\n      )}\n    >\n      <div className=\"text-lg font-semibold text-zinc-900 dark:text-zinc-100\">{children}</div>\n      <button\n        type=\"button\"\n        onClick={close}\n        className=\"rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300\"\n        aria-label=\"Close\"\n      >\n        <X size={20} />\n      </button>\n    </div>\n  );\n}\n\nModalHeader.displayName = \"ModalHeader\";\n","import { cn } from \"../../utils/cn\";\nimport type { ModalBodyProps } from \"./Modal.types\";\n\nexport function ModalBody({ children, className }: ModalBodyProps) {\n  return (\n    <div data-react-fancy-modal-body=\"\" className={cn(\"flex-1 overflow-y-auto px-6 py-4 text-zinc-700 dark:text-zinc-300\", className)}>\n      {children}\n    </div>\n  );\n}\n\nModalBody.displayName = \"ModalBody\";\n","import { cn } from \"../../utils/cn\";\nimport type { ModalFooterProps } from \"./Modal.types\";\n\nexport function ModalFooter({ children, className }: ModalFooterProps) {\n  return (\n    <div\n      data-react-fancy-modal-footer=\"\"\n      className={cn(\n        \"flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nModalFooter.displayName = \"ModalFooter\";\n","import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { ModalContext } from \"./Modal.context\";\nimport { ModalHeader } from \"./ModalHeader\";\nimport { ModalBody } from \"./ModalBody\";\nimport { ModalFooter } from \"./ModalFooter\";\nimport { useFocusTrap } from \"../../hooks/use-focus-trap\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { ModalProps } from \"./Modal.types\";\n\nconst SIZE_MAP = {\n  sm: \"max-w-sm\",\n  md: \"max-w-lg\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  full: \"max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]\",\n} as const;\n\nfunction ModalRoot({\n  children,\n  open,\n  onClose,\n  size = \"md\",\n  className,\n  ...rest\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const close = useCallback(() => onClose(), [onClose]);\n  useEscapeKey(close, open);\n  useFocusTrap(panelRef, open);\n\n  // Body scroll lock\n  useEffect(() => {\n    if (open) {\n      const original = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = original;\n      };\n    }\n  }, [open]);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-slide-up\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  const ctx = useMemo(() => ({ open, close }), [open, close]);\n\n  if (!mounted) return null;\n\n  return (\n    <ModalContext.Provider value={ctx}>\n      <Portal>\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n          {/* Backdrop */}\n          <div\n            className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n            onClick={close}\n            aria-hidden=\"true\"\n          />\n          {/* Panel */}\n          <div\n            ref={(node) => {\n              panelRef.current = node;\n              (animRef as React.MutableRefObject<HTMLElement | null>).current =\n                node;\n            }}\n            data-react-fancy-modal=\"\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            {...rest}\n            className={cn(\n              \"relative flex w-full flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900\",\n              SIZE_MAP[size],\n              animClass,\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </Portal>\n    </ModalContext.Provider>\n  );\n}\n\nexport const Modal = Object.assign(ModalRoot, {\n  Header: ModalHeader,\n  Body: ModalBody,\n  Footer: ModalFooter,\n});\n"]}