@particle-academy/react-fancy 6.2.0 → 6.4.0

package/dist/chunk-5EW47IH7.js

@@ -0,0 +1,194 @@
+import { useControllableState } from './chunk-EDYAXGUM.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { forwardRef, Children, isValidElement } from 'react';
+import { Check } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_STATE_LABELS = {
+  upcoming: "Not started",
+  current: "Current",
+  complete: "Completed",
+  error: "Error"
+};
+function StepperStep(_props) {
+  return null;
+}
+StepperStep.displayName = "StepperStep";
+function stepsFromChildren(children) {
+  const out = [];
+  for (const child of Children.toArray(children)) {
+    if (!isValidElement(child) || child.type !== StepperStep) continue;
+    const { children: content, ...rest } = child.props;
+    out.push({ ...rest, content });
+  }
+  return out;
+}
+var indicatorClass = {
+  complete: "border-transparent bg-zinc-900 text-white dark:bg-white dark:text-zinc-900",
+  current: "border-2 border-zinc-900 bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 ring-4 ring-zinc-900/10 dark:border-white dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white dark:ring-white/15",
+  upcoming: "border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
+  error: "border-transparent bg-red-600 text-white dark:bg-red-500"
+};
+var titleClass = {
+  complete: "font-medium text-zinc-900 dark:text-white",
+  current: "font-semibold text-zinc-900 dark:text-white",
+  upcoming: "font-medium text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
+  error: "font-semibold text-red-700 dark:text-red-400"
+};
+function Indicator({ state, index }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-react-fancy-stepper-indicator": "",
+      className: cn(
+        "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold",
+        indicatorClass[state]
+      ),
+      children: state === "complete" ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 3 }) : state === "error" ? "!" : index + 1
+    }
+  );
+}
+var StepperRoot = forwardRef(
+  ({
+    steps: stepsProp,
+    children,
+    current: currentProp,
+    defaultCurrent = 0,
+    onChange,
+    orientation = "vertical",
+    clickable = false,
+    showContent = "all",
+    stateLabels,
+    className,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const [current, setCurrent] = useControllableState(currentProp, defaultCurrent, onChange);
+    const steps = stepsProp ?? stepsFromChildren(children);
+    const labels = { ...DEFAULT_STATE_LABELS, ...stateLabels };
+    const horizontal = orientation === "horizontal";
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!clickable || e.defaultPrevented) return;
+      const prevKey = horizontal ? "ArrowLeft" : "ArrowUp";
+      const nextKey = horizontal ? "ArrowRight" : "ArrowDown";
+      if (![prevKey, nextKey, "Home", "End"].includes(e.key)) return;
+      const list = e.currentTarget;
+      const target = e.target.closest("[data-react-fancy-stepper-trigger]");
+      if (!target || target.closest("[data-react-fancy-stepper]") !== list) return;
+      const buttons = Array.from(
+        list.querySelectorAll("[data-react-fancy-stepper-trigger]")
+      ).filter((b) => b.closest("[data-react-fancy-stepper]") === list && !b.disabled);
+      const at = buttons.indexOf(target);
+      let next;
+      if (e.key === "Home") next = buttons[0];
+      else if (e.key === "End") next = buttons[buttons.length - 1];
+      else if (e.key === nextKey) next = buttons[at + 1] ?? target;
+      else next = at > 0 ? buttons[at - 1] : target;
+      e.preventDefault();
+      next?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        "data-react-fancy-stepper": "",
+        "data-orientation": orientation,
+        "data-current": current,
+        className: cn(horizontal ? "flex items-start" : "flex flex-col", className),
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: steps.map((step, index) => {
+          const derived = index < current ? "complete" : index === current ? "current" : "upcoming";
+          const state = step.state ?? derived;
+          const isCurrent = index === current;
+          const isLast = index === steps.length - 1;
+          const showBody = step.content != null && (showContent === "all" || isCurrent);
+          const headerInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Indicator, { state, index }),
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", "data-react-fancy-stepper-state": "", children: [
+              labels[state],
+              ":",
+              " "
+            ] }),
+            /* @__PURE__ */ jsx("span", { "data-react-fancy-stepper-title": "", className: cn("text-sm", titleClass[state]), children: step.title })
+          ] });
+          const headerClass = horizontal ? "flex flex-col items-center gap-2 text-center" : "flex items-center gap-x-4 text-left";
+          const header = clickable ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-react-fancy-stepper-trigger": "",
+              disabled: step.disabled,
+              onClick: () => {
+                if (index !== current) setCurrent(index);
+              },
+              className: cn(
+                headerClass,
+                "cursor-pointer rounded-md border-0 bg-transparent p-0",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                "focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))] focus-visible:ring-offset-[color:var(--fancy-surface,var(--color-white))]",
+                "dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-visible:ring-offset-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
+                "disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: headerInner
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headerClass, children: headerInner });
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              "data-react-fancy-stepper-step": "",
+              "data-state": state,
+              "data-index": index,
+              "data-step-id": step.id,
+              "data-disabled": step.disabled ? "true" : void 0,
+              "aria-current": isCurrent ? "step" : void 0,
+              className: cn("relative", horizontal ? "min-w-0 flex-1" : !isLast && "pb-8"),
+              children: [
+                !isLast && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-react-fancy-stepper-connector": "",
+                    className: cn(
+                      "absolute",
+                      horizontal ? "top-4 left-[calc(50%+1.5rem)] h-px w-[calc(100%-3rem)]" : "top-10 bottom-2 left-4 w-px -translate-x-1/2",
+                      index < current ? "bg-zinc-900 dark:bg-white" : "bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]"
+                    )
+                  }
+                ),
+                header,
+                (step.description != null || showBody) && /* @__PURE__ */ jsxs("div", { className: horizontal ? "mt-1 px-2 text-center" : "pl-12", children: [
+                  step.description != null && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-react-fancy-stepper-description": "",
+                      className: "text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
+                      children: step.description
+                    }
+                  ),
+                  showBody && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-react-fancy-stepper-content": "",
+                      className: "mt-2 text-sm text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))]",
+                      children: step.content
+                    }
+                  )
+                ] })
+              ]
+            },
+            step.id ?? index
+          );
+        })
+      }
+    );
+  }
+);
+StepperRoot.displayName = "Stepper";
+var Stepper = Object.assign(StepperRoot, { Step: StepperStep });
+
+export { Stepper };
+//# sourceMappingURL=chunk-5EW47IH7.js.map
+//# sourceMappingURL=chunk-5EW47IH7.js.map

package/dist/chunk-5EW47IH7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"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","file":"chunk-5EW47IH7.js","sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type {\n  StepperProps,\n  StepperStep as StepperStepData,\n  StepperStepProps,\n  StepperStepState,\n} from \"./Stepper.types\";\n\nconst DEFAULT_STATE_LABELS: Record<StepperStepState, string> = {\n  upcoming: \"Not started\",\n  current: \"Current\",\n  complete: \"Completed\",\n  error: \"Error\",\n};\n\n/**\n * Declarative step. Renders nothing itself: `Stepper` reads its props as data\n * and renders it through the same path as an entry in `steps`, so the two forms\n * cannot drift apart in markup, states or handles. Its children are the step's\n * content. It must be a DIRECT child of `Stepper` (not wrapped in another\n * component) for the same reason `Breadcrumbs.Item` must.\n */\nfunction StepperStep(_props: StepperStepProps): null {\n  return null;\n}\nStepperStep.displayName = \"StepperStep\";\n\nfunction stepsFromChildren(children: ReactNode): StepperStepData[] {\n  const out: StepperStepData[] = [];\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement<StepperStepProps>(child) || child.type !== StepperStep) continue;\n    const { children: content, ...rest } = child.props;\n    out.push({ ...rest, content });\n  }\n  return out;\n}\n\nconst indicatorClass: Record<StepperStepState, string> = {\n  complete:\n    \"border-transparent bg-zinc-900 text-white dark:bg-white dark:text-zinc-900\",\n  current:\n    \"border-2 border-zinc-900 bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 ring-4 ring-zinc-900/10 dark:border-white dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white dark:ring-white/15\",\n  upcoming:\n    \"border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n  error: \"border-transparent bg-red-600 text-white dark:bg-red-500\",\n};\n\nconst titleClass: Record<StepperStepState, string> = {\n  complete: \"font-medium text-zinc-900 dark:text-white\",\n  current: \"font-semibold text-zinc-900 dark:text-white\",\n  upcoming:\n    \"font-medium text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n  error: \"font-semibold text-red-700 dark:text-red-400\",\n};\n\n/** The glyph differs per state, so state reads without colour: number, tick, \"!\". */\nfunction Indicator({ state, index }: { state: StepperStepState; index: number }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-react-fancy-stepper-indicator=\"\"\n      className={cn(\n        \"relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold\",\n        indicatorClass[state],\n      )}\n    >\n      {state === \"complete\" ? <Check size={16} strokeWidth={3} /> : state === \"error\" ? \"!\" : index + 1}\n    </span>\n  );\n}\n\nconst StepperRoot = forwardRef<HTMLOListElement, StepperProps>(\n  (\n    {\n      steps: stepsProp,\n      children,\n      current: currentProp,\n      defaultCurrent = 0,\n      onChange,\n      orientation = \"vertical\",\n      clickable = false,\n      showContent = \"all\",\n      stateLabels,\n      className,\n      onKeyDown,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [current, setCurrent] = useControllableState(currentProp, defaultCurrent, onChange);\n    const steps = stepsProp ?? stepsFromChildren(children);\n    const labels = { ...DEFAULT_STATE_LABELS, ...stateLabels };\n    const horizontal = orientation === \"horizontal\";\n\n    // Arrow keys move focus between step buttons; Enter / Space activate them\n    // natively. Focus only -- the current step changes on activation, never on\n    // arrowing past it. DOM is read in the handler, never during render.\n    const handleKeyDown = (e: KeyboardEvent<HTMLOListElement>) => {\n      onKeyDown?.(e);\n      if (!clickable || e.defaultPrevented) return;\n\n      const prevKey = horizontal ? \"ArrowLeft\" : \"ArrowUp\";\n      const nextKey = horizontal ? \"ArrowRight\" : \"ArrowDown\";\n      if (![prevKey, nextKey, \"Home\", \"End\"].includes(e.key)) return;\n\n      const list = e.currentTarget;\n      const target = (e.target as HTMLElement).closest<HTMLButtonElement>(\"[data-react-fancy-stepper-trigger]\");\n      if (!target || target.closest(\"[data-react-fancy-stepper]\") !== list) return;\n\n      // Only this stepper's own buttons: a stepper nested in step content is\n      // its own list.\n      const buttons = Array.from(\n        list.querySelectorAll<HTMLButtonElement>(\"[data-react-fancy-stepper-trigger]\"),\n      ).filter((b) => b.closest(\"[data-react-fancy-stepper]\") === list && !b.disabled);\n      const at = buttons.indexOf(target);\n\n      let next: HTMLButtonElement | undefined;\n      if (e.key === \"Home\") next = buttons[0];\n      else if (e.key === \"End\") next = buttons[buttons.length - 1];\n      else if (e.key === nextKey) next = buttons[at + 1] ?? target;\n      else next = at > 0 ? buttons[at - 1] : target;\n\n      e.preventDefault();\n      next?.focus();\n    };\n\n    return (\n      <ol\n        ref={ref}\n        data-react-fancy-stepper=\"\"\n        data-orientation={orientation}\n        data-current={current}\n        className={cn(horizontal ? \"flex items-start\" : \"flex flex-col\", className)}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {steps.map((step, index) => {\n          const derived: StepperStepState =\n            index < current ? \"complete\" : index === current ? \"current\" : \"upcoming\";\n          const state = step.state ?? derived;\n          const isCurrent = index === current;\n          const isLast = index === steps.length - 1;\n          const showBody = step.content != null && (showContent === \"all\" || isCurrent);\n\n          const headerInner = (\n            <>\n              <Indicator state={state} index={index} />\n              {/* State in words, before the title so it is read first. A\n                  sibling of the title, so the title handle reads the title. */}\n              <span className=\"sr-only\" data-react-fancy-stepper-state=\"\">\n                {labels[state]}:{\" \"}\n              </span>\n              <span data-react-fancy-stepper-title=\"\" className={cn(\"text-sm\", titleClass[state])}>\n                {step.title}\n              </span>\n            </>\n          );\n\n          const headerClass = horizontal\n            ? \"flex flex-col items-center gap-2 text-center\"\n            : \"flex items-center gap-x-4 text-left\";\n\n          const header = clickable ? (\n            <button\n              type=\"button\"\n              data-react-fancy-stepper-trigger=\"\"\n              disabled={step.disabled}\n              onClick={() => {\n                if (index !== current) setCurrent(index);\n              }}\n              className={cn(\n                headerClass,\n                \"cursor-pointer rounded-md border-0 bg-transparent p-0\",\n                \"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n                \"focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))] focus-visible:ring-offset-[color:var(--fancy-surface,var(--color-white))]\",\n                \"dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-visible:ring-offset-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n              )}\n            >\n              {headerInner}\n            </button>\n          ) : (\n            <div className={headerClass}>{headerInner}</div>\n          );\n\n          return (\n            <li\n              key={step.id ?? index}\n              data-react-fancy-stepper-step=\"\"\n              data-state={state}\n              data-index={index}\n              data-step-id={step.id}\n              data-disabled={step.disabled ? \"true\" : undefined}\n              aria-current={isCurrent ? \"step\" : undefined}\n              className={cn(\"relative\", horizontal ? \"min-w-0 flex-1\" : !isLast && \"pb-8\")}\n            >\n              {!isLast && (\n                <span\n                  aria-hidden=\"true\"\n                  data-react-fancy-stepper-connector=\"\"\n                  className={cn(\n                    \"absolute\",\n                    horizontal\n                      ? \"top-4 left-[calc(50%+1.5rem)] h-px w-[calc(100%-3rem)]\"\n                      : \"top-10 bottom-2 left-4 w-px -translate-x-1/2\",\n                    index < current\n                      ? \"bg-zinc-900 dark:bg-white\"\n                      : \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n                  )}\n                />\n              )}\n              {header}\n              {(step.description != null || showBody) && (\n                <div className={horizontal ? \"mt-1 px-2 text-center\" : \"pl-12\"}>\n                  {step.description != null && (\n                    <div\n                      data-react-fancy-stepper-description=\"\"\n                      className=\"text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\"\n                    >\n                      {step.description}\n                    </div>\n                  )}\n                  {showBody && (\n                    <div\n                      data-react-fancy-stepper-content=\"\"\n                      className=\"mt-2 text-sm text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))]\"\n                    >\n                      {step.content}\n                    </div>\n                  )}\n                </div>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    );\n  },\n);\n\nStepperRoot.displayName = \"Stepper\";\n\nexport const Stepper = Object.assign(StepperRoot, { Step: StepperStep });\n"]}

package/dist/{chunk-TH4JZAMK.js → chunk-5TP642UT.js}

@@ -1,4 +1,4 @@
-import { Select } from './chunk-XIA2UAVO.js';
+import { Select } from './chunk-6GVOW3UL.js';
 import { Switch } from './chunk-DXZCKDYS.js';
 import { DatePicker } from './chunk-2UTN3EFK.js';
 import { Input } from './chunk-PJNUGSKI.js';
@@ -7,8 +7,8 @@ import { DisplayValue } from './chunk-WX5XYDVN.js';
 import { resolveOption } from './chunk-USWQAMI3.js';
 import { Text } from './chunk-XM3V3RSU.js';
 import { ColorPicker } from './chunk-SVSQXKFL.js';
-import { useInlineEdit } from './chunk-OL53XYHF.js';
 import { isImeComposing } from './chunk-S42OGG43.js';
+import { useInlineEdit } from './chunk-OL53XYHF.js';
 import { Badge } from './chunk-OZ4QFJ7N.js';
 import { Button } from './chunk-4GPH7HOR.js';
 import { Callout } from './chunk-KPRSRWNM.js';
@@ -1338,5 +1338,5 @@ function buildItems({
 }
 
 export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches };
-//# sourceMappingURL=chunk-TH4JZAMK.js.map
-//# sourceMappingURL=chunk-TH4JZAMK.js.map
+//# sourceMappingURL=chunk-5TP642UT.js.map
+//# sourceMappingURL=chunk-5TP642UT.js.map