najm-kit 2.11.23 → 2.12.0

package/dist/chunk-FZX3DONZ.mjs

@@ -0,0 +1,200 @@
+import { useResolvedFeedbackLabels } from './chunk-BFFTC7LD.mjs';
+import { useNajmDesign } from './chunk-TZRTOQCC.mjs';
+import { cn } from './chunk-5UY7U2ED.mjs';
+import { LoaderCircleIcon, LoaderPinwheelIcon, LoaderIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Default = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderIcon, { className: cn("animate-spin", className), ...props });
+var Circle = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("animate-spin", className), ...props });
+var Pinwheel = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderPinwheelIcon, { className: cn("animate-spin", className), ...props });
+var CircleFilled = ({ className, size = 24, ...props }) => /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
+  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rotate-180", children: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("animate-spin", className, "text-foreground opacity-20"), size, ...props }) }),
+  /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("relative animate-spin", className), size, ...props })
+] });
+var Ellipsis = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
+  /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "0;ellipsis3.end+0.25s", calcMode: "spline", dur: "0.6s", id: "ellipsis1", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "ellipsis1.begin+0.1s", calcMode: "spline", dur: "0.6s", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) }),
+  /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "ellipsis1.begin+0.2s", calcMode: "spline", dur: "0.6s", id: "ellipsis3", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) })
+] });
+var Ring = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, stroke: "currentColor", viewBox: "0 0 44 44", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
+  /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "1", children: [
+      /* @__PURE__ */ jsx("animate", { attributeName: "r", begin: "0s", calcMode: "spline", dur: "1.8s", keySplines: "0.165, 0.84, 0.44, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 20" }),
+      /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", begin: "0s", calcMode: "spline", dur: "1.8s", keySplines: "0.3, 0.61, 0.355, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 0" })
+    ] }),
+    /* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "1", children: [
+      /* @__PURE__ */ jsx("animate", { attributeName: "r", begin: "-0.9s", calcMode: "spline", dur: "1.8s", keySplines: "0.165, 0.84, 0.44, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 20" }),
+      /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", begin: "-0.9s", calcMode: "spline", dur: "1.8s", keySplines: "0.3, 0.61, 0.355, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 0" })
+    ] })
+  ] })
+] });
+var Bars = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
+  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "1", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) }),
+  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "10", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0.1s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) }),
+  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "19", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0.2s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) })
+] });
+var Infinite = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    height: size,
+    preserveAspectRatio: "xMidYMid",
+    viewBox: "0 0 100 100",
+    width: size,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Loading..." }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z",
+          fill: "none",
+          stroke: "currentColor",
+          strokeDasharray: "205.271142578125 51.317785644531256",
+          strokeLinecap: "round",
+          strokeWidth: "10",
+          style: { transform: "scale(0.8)", transformOrigin: "50px 50px" },
+          children: /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "stroke-dashoffset",
+              dur: "2s",
+              keyTimes: "0;1",
+              repeatCount: "indefinite",
+              values: "0;256.58892822265625"
+            }
+          )
+        }
+      )
+    ]
+  }
+);
+var spinnerVariants = {
+  default: Default,
+  circle: Circle,
+  pinwheel: Pinwheel,
+  "circle-filled": CircleFilled,
+  ellipsis: Ellipsis,
+  ring: Ring,
+  bars: Bars,
+  infinite: Infinite
+};
+function NSpinner({ variant = "default", size = 24, className, ...props }) {
+  const Component = spinnerVariants[variant] || Default;
+  return /* @__PURE__ */ jsx(Component, { className, size, ...props });
+}
+function NPageLayout({
+  as: Comp = "main",
+  className,
+  style,
+  ...props
+}) {
+  const { layout } = useNajmDesign();
+  const pageGutter = layout?.pageGutter ?? "var(--page-gutter, 24px)";
+  const sectionGap = layout?.sectionGap ?? "var(--section-gap, 20px)";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn("flex min-w-0 flex-col", className),
+      style: {
+        /**
+         * Published so descendants can cancel the page padding exactly. A
+         * full-bleed child (a non-card NPageHeader) cannot guess these: the
+         * design config resolves them to literals, not to the `--page-gutter`
+         * / `--section-gap` fallbacks.
+         */
+        "--najm-page-gutter": pageGutter,
+        "--najm-section-gap": sectionGap,
+        gap: sectionGap,
+        paddingInline: pageGutter,
+        paddingBlock: sectionGap,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+var INLINE_PADDING = {
+  loading: "py-8",
+  error: "py-8",
+  empty: "py-12"
+};
+var PANEL_BASE = "flex min-h-64 w-full flex-col items-center justify-center gap-3";
+var PAGE_MIN = "min-h-[60vh]";
+function NFeedbackStateFrame({
+  surface = "inline",
+  spacing = "empty",
+  className,
+  children,
+  ...rest
+}) {
+  if (surface === "page") {
+    return /* @__PURE__ */ jsx(
+      NPageLayout,
+      {
+        as: "div",
+        className: cn(
+          "items-center justify-center text-center",
+          PAGE_MIN,
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+  if (surface === "panel") {
+    return /* @__PURE__ */ jsx("div", { className: cn(PANEL_BASE, className), ...rest, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center justify-center gap-3", INLINE_PADDING[spacing], className), ...rest, children });
+}
+function useLoadingLabel(explicit) {
+  const labels = useResolvedFeedbackLabels();
+  if (explicit !== void 0) return explicit;
+  return labels.loadingLabel;
+}
+function NLoadingState({
+  label,
+  className,
+  fullScreen = false,
+  spinnerVariant = "circle",
+  spinnerSize = 32,
+  surface = "inline"
+}) {
+  const resolvedLabel = useLoadingLabel(label);
+  if (fullScreen) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center gap-3 py-8",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(NSpinner, { variant: spinnerVariant, size: spinnerSize }),
+          resolvedLabel && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: resolvedLabel })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    NFeedbackStateFrame,
+    {
+      surface,
+      spacing: "loading",
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": "true",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(NSpinner, { variant: spinnerVariant, size: spinnerSize }),
+        resolvedLabel && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: resolvedLabel })
+      ]
+    }
+  );
+}
+
+export { NFeedbackStateFrame, NLoadingState, NPageLayout, NSpinner };