@particle-academy/react-fancy 6.0.0 → 6.1.1

package/dist/{chunk-IB673TEG.cjs → chunk-KOAMRCSC.cjs}

@@ -101,6 +101,16 @@ function MultiSwitch({
   react.useEffect(() => {
     updateIndicator();
   }, [updateIndicator]);
+  react.useEffect(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const container = containerRef.current;
+    const activeItem = itemRefs.current[selectedIndex];
+    if (!container || !activeItem) return;
+    const observer = new ResizeObserver(() => updateIndicator());
+    observer.observe(container);
+    observer.observe(activeItem);
+    return () => observer.disconnect();
+  }, [updateIndicator, selectedIndex, showControl]);
   const control = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(chunkP53432AK_cjs.DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -188,5 +198,5 @@ function MultiSwitch({
 MultiSwitch.displayName = "MultiSwitch";
 
 exports.MultiSwitch = MultiSwitch;
-//# sourceMappingURL=chunk-IB673TEG.cjs.map
-//# sourceMappingURL=chunk-IB673TEG.cjs.map
+//# sourceMappingURL=chunk-KOAMRCSC.cjs.map
+//# sourceMappingURL=chunk-KOAMRCSC.cjs.map

package/dist/chunk-KOAMRCSC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.colors.ts","../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":["useId","resolveOption","useFieldMode","useInlineEdit","useControllableState","useRef","useMemo","composeRefs","useState","useCallback","useEffect","DisplayValue","jsxs","cn","jsx","Field"],"mappings":"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","file":"chunk-KOAMRCSC.cjs","sourcesContent":["// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Shades follow badgeSolid: 600 / dark 500 for\n// the thumb, with dark label text on the light hues (amber, yellow, lime).\nimport type { Color } from \"../../../utils/types\";\n\nexport type MultiSwitchColorClasses = {\n  /** The selected thumb's fill. */\n  thumb: string;\n  /** The selected option's label, readable on the thumb. */\n  text: string;\n  /** The container border while this option is selected. */\n  border: string;\n};\n\nexport const multiSwitchColorClasses: Record<Color, MultiSwitchColorClasses> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: { thumb: \"bg-brand\", text: \"text-brand-contrast\", border: \"border-brand\" },\n  slate: { thumb: \"bg-slate-600 dark:bg-slate-500\", text: \"text-white\", border: \"border-slate-500 dark:border-slate-400\" },\n  gray: { thumb: \"bg-gray-600 dark:bg-gray-500\", text: \"text-white\", border: \"border-gray-500 dark:border-gray-400\" },\n  zinc: { thumb: \"bg-zinc-600 dark:bg-zinc-500\", text: \"text-white\", border: \"border-zinc-500 dark:border-zinc-400\" },\n  neutral: { thumb: \"bg-neutral-600 dark:bg-neutral-500\", text: \"text-white\", border: \"border-neutral-500 dark:border-neutral-400\" },\n  stone: { thumb: \"bg-stone-600 dark:bg-stone-500\", text: \"text-white\", border: \"border-stone-500 dark:border-stone-400\" },\n  red: { thumb: \"bg-red-600 dark:bg-red-500\", text: \"text-white\", border: \"border-red-500 dark:border-red-400\" },\n  orange: { thumb: \"bg-orange-600 dark:bg-orange-500\", text: \"text-white\", border: \"border-orange-500 dark:border-orange-400\" },\n  amber: { thumb: \"bg-amber-400 dark:bg-amber-300\", text: \"text-amber-950\", border: \"border-amber-500 dark:border-amber-400\" },\n  yellow: { thumb: \"bg-yellow-400 dark:bg-yellow-300\", text: \"text-yellow-950\", border: \"border-yellow-500 dark:border-yellow-400\" },\n  lime: { thumb: \"bg-lime-400 dark:bg-lime-300\", text: \"text-lime-950\", border: \"border-lime-500 dark:border-lime-400\" },\n  green: { thumb: \"bg-green-600 dark:bg-green-500\", text: \"text-white\", border: \"border-green-500 dark:border-green-400\" },\n  emerald: { thumb: \"bg-emerald-600 dark:bg-emerald-500\", text: \"text-white\", border: \"border-emerald-500 dark:border-emerald-400\" },\n  teal: { thumb: \"bg-teal-600 dark:bg-teal-500\", text: \"text-white\", border: \"border-teal-500 dark:border-teal-400\" },\n  cyan: { thumb: \"bg-cyan-600 dark:bg-cyan-500\", text: \"text-white\", border: \"border-cyan-500 dark:border-cyan-400\" },\n  sky: { thumb: \"bg-sky-600 dark:bg-sky-500\", text: \"text-white\", border: \"border-sky-500 dark:border-sky-400\" },\n  blue: { thumb: \"bg-blue-600 dark:bg-blue-500\", text: \"text-white\", border: \"border-blue-500 dark:border-blue-400\" },\n  indigo: { thumb: \"bg-indigo-600 dark:bg-indigo-500\", text: \"text-white\", border: \"border-indigo-500 dark:border-indigo-400\" },\n  violet: { thumb: \"bg-violet-600 dark:bg-violet-500\", text: \"text-white\", border: \"border-violet-500 dark:border-violet-400\" },\n  purple: { thumb: \"bg-purple-600 dark:bg-purple-500\", text: \"text-white\", border: \"border-purple-500 dark:border-purple-400\" },\n  fuchsia: { thumb: \"bg-fuchsia-600 dark:bg-fuchsia-500\", text: \"text-white\", border: \"border-fuchsia-500 dark:border-fuchsia-400\" },\n  pink: { thumb: \"bg-pink-600 dark:bg-pink-500\", text: \"text-white\", border: \"border-pink-500 dark:border-pink-400\" },\n  rose: { thumb: \"bg-rose-600 dark:bg-rose-500\", text: \"text-white\", border: \"border-rose-500 dark:border-rose-400\" },\n};\n","import { useRef, useState, useEffect, useCallback, useId, useMemo, type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { composeRefs } from \"../../../utils/compose-refs\";\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 { resolveOption } from \"../inputs.utils\";\nimport type { Color, Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\nimport { multiSwitchColorClasses } from \"./MultiSwitch.colors\";\n\nconst BORDER_DEFAULT =\n  \"border-[color:var(--fancy-border-strong,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))]\";\n\nconst sizeClasses: Record<Size, string> = {\n  xs: \"px-2 py-1 text-xs\",\n  sm: \"px-2.5 py-1.5 text-sm\",\n  md: \"px-3 py-2 text-sm\",\n  lg: \"px-4 py-2.5 text-base\",\n  xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n  size = \"md\",\n  dirty,\n  error,\n  label,\n  labelHidden,\n  description,\n  required,\n  disabled,\n  className,\n  id,\n  name,\n  list,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  linear,\n  mode,\n  ...rest\n}: MultiSwitchProps<V>) {\n  const reactId = useId();\n  // A `<label for>` cannot name a div[role=\"radiogroup\"], so the group points at\n  // the label instead. Needs an id the label and the group both agree on.\n  const labelId = label ? `${id ?? reactId}-label` : undefined;\n\n  // resolveOption hands an object option back as-is, so `color` survives it.\n  const resolvedOptions = list.map(resolveOption) as Array<\n    ReturnType<typeof resolveOption<V>> & { color?: Color }\n  >;\n  const fallback = defaultValue ?? resolvedOptions[0]?.value;\n  const resolvedMode = useFieldMode(mode);\n  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n  const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const externalRef = (rest as { ref?: Ref<HTMLDivElement> }).ref;\n  const containerSetRef = useMemo(() => composeRefs(externalRef, containerRef), [externalRef]);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n  const selectedIndex = resolvedOptions.findIndex(\n    (o) => o.value === value,\n  );\n  const selectedColor = resolvedOptions[selectedIndex]?.color;\n  const colorClasses = selectedColor ? multiSwitchColorClasses[selectedColor] : undefined;\n\n  const updateIndicator = useCallback(() => {\n    const container = containerRef.current;\n    const activeItem = itemRefs.current[selectedIndex];\n    if (!container || !activeItem) {\n      setIndicator(null);\n      return;\n    }\n    const containerRect = container.getBoundingClientRect();\n    const itemRect = activeItem.getBoundingClientRect();\n    setIndicator({\n      left: itemRect.left - containerRect.left,\n      width: itemRect.width,\n    });\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    updateIndicator();\n  }, [updateIndicator]);\n\n  // The selected option can change size without the selection changing: a\n  // label carrying a live count (\"Changed 4\" -> \"Changed 12\"), a font loading\n  // late, the container reflowing. Watch the selected option and the container\n  // and re-measure. Without ResizeObserver (SSR, older jsdom) the thumb is\n  // measured on selection only, as it always was.\n  useEffect(() => {\n    if (typeof ResizeObserver === \"undefined\") return;\n    const container = containerRef.current;\n    const activeItem = itemRefs.current[selectedIndex];\n    if (!container || !activeItem) return;\n    const observer = new ResizeObserver(() => updateIndicator());\n    observer.observe(container);\n    observer.observe(activeItem);\n    return () => observer.disconnect();\n  }, [updateIndicator, selectedIndex, showControl]);\n\n  const control = !showControl ? (\n    <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n      {resolvedOptions.find((o) => o.value === value)?.label}\n    </DisplayValue>\n  ) : (\n    <div\n      {...rest}\n      // React 19 passes `ref` to a function component as a plain prop, so a\n      // caller's ref (Tooltip's anchor, or anyone's) arrives in `rest`. Spread\n      // after `ref={containerRef}` it REPLACED the ref the thumb is measured\n      // from, and the selected thumb never rendered. Feed both instead.\n      ref={containerSetRef}\n      data-react-fancy-multi-switch=\"\"\n      role=\"radiogroup\"\n      id={id}\n      aria-labelledby={labelId}\n      onBlur={(e) => {\n        if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n      }}\n      className={cn(\n        \"relative inline-flex rounded-lg border bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        colorClasses ? colorClasses.border : BORDER_DEFAULT,\n        dirty && \"ring-2 ring-amber-400/50\",\n        error && \"ring-2 ring-red-500/50\",\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className,\n      )}\n    >\n      {indicator && (\n        <span\n          data-react-fancy-multi-switch-thumb=\"\"\n          data-color={selectedColor}\n          className={\n            colorClasses\n              ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out`\n              : \"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n          }\n          style={{ left: indicator.left, width: indicator.width }}\n        />\n      )}\n      {resolvedOptions.map((option, index) => {\n        const isSelected = option.value === value;\n        return (\n          <button\n            key={String(option.value)}\n            ref={(el) => { itemRefs.current[index] = el; }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            disabled={disabled || option.disabled}\n            autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n            onClick={() => {\n              if (linear) {\n                const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n                setValue(resolvedOptions[nextIndex].value as V);\n              } else {\n                setValue(option.value as V);\n              }\n            }}\n            className={cn(\n              \"relative z-10 font-medium transition-colors duration-200\",\n              sizeClasses[size],\n              isSelected\n                ? (colorClasses?.text ?? \"text-white\")\n                : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n              (disabled || option.disabled) && \"cursor-not-allowed\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n      {name && <input type=\"hidden\" name={name} value={String(value)} />}\n    </div>\n  );\n\n  if (label || error || description) {\n    return (\n      <Field\n        label={label}\n        labelHidden={labelHidden}\n        labelId={labelId}\n        description={description}\n        error={error}\n        required={required}\n        htmlFor={id}\n        size={size}\n      >\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}

package/dist/{chunk-ZXZJYVWP.js → chunk-KPRSRWNM.js}

@@ -89,7 +89,7 @@ var Callout = forwardRef(
               type: "button",
               onClick: onDismiss,
               className: cn(
-                "shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current"
+                "shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current"
               ),
               "aria-label": "Dismiss",
               children: /* @__PURE__ */ jsx(X, { size: 16 })
@@ -103,5 +103,5 @@ var Callout = forwardRef(
 Callout.displayName = "Callout";
 
 export { Callout };
-//# sourceMappingURL=chunk-ZXZJYVWP.js.map
-//# sourceMappingURL=chunk-ZXZJYVWP.js.map
+//# sourceMappingURL=chunk-KPRSRWNM.js.map
+//# sourceMappingURL=chunk-KPRSRWNM.js.map

package/dist/{chunk-ZXZJYVWP.js.map → chunk-KPRSRWNM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Callout/Callout.colors.ts","../src/components/Callout/Callout.tsx"],"names":[],"mappings":";;;;;;AAMO,IAAM,gBAAA,GAA0C;AAAA;AAAA;AAAA,EAGrD,KAAA,EAAO,oCAAA;AAAA,EACP,KAAA,EAAO,4GAAA;AAAA,EACP,IAAA,EAAM,sGAAA;AAAA,EACN,IAAA,EAAM,sGAAA;AAAA,EACN,OAAA,EAAS,wHAAA;AAAA,EACT,KAAA,EAAO,4GAAA;AAAA,EACP,GAAA,EAAK,gGAAA;AAAA,EACL,MAAA,EAAQ,kHAAA;AAAA,EACR,KAAA,EAAO,4GAAA;AAAA,EACP,MAAA,EAAQ,kHAAA;AAAA,EACR,IAAA,EAAM,sGAAA;AAAA,EACN,KAAA,EAAO,4GAAA;AAAA,EACP,OAAA,EAAS,wHAAA;AAAA,EACT,IAAA,EAAM,sGAAA;AAAA,EACN,IAAA,EAAM,sGAAA;AAAA,EACN,GAAA,EAAK,gGAAA;AAAA,EACL,IAAA,EAAM,sGAAA;AAAA,EACN,MAAA,EAAQ,kHAAA;AAAA,EACR,MAAA,EAAQ,kHAAA;AAAA,EACR,MAAA,EAAQ,kHAAA;AAAA,EACR,OAAA,EAAS,wHAAA;AAAA,EACT,IAAA,EAAM,sGAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEO,IAAM,WAAA,GAAqC;AAAA;AAAA;AAAA,EAGhD,KAAA,EAAO,YAAA;AAAA,EACP,KAAA,EAAO,oCAAA;AAAA,EACP,IAAA,EAAM,kCAAA;AAAA,EACN,IAAA,EAAM,kCAAA;AAAA,EACN,OAAA,EAAS,wCAAA;AAAA,EACT,KAAA,EAAO,oCAAA;AAAA,EACP,GAAA,EAAK,gCAAA;AAAA,EACL,MAAA,EAAQ,sCAAA;AAAA,EACR,KAAA,EAAO,oCAAA;AAAA,EACP,MAAA,EAAQ,sCAAA;AAAA,EACR,IAAA,EAAM,kCAAA;AAAA,EACN,KAAA,EAAO,oCAAA;AAAA,EACP,OAAA,EAAS,wCAAA;AAAA,EACT,IAAA,EAAM,kCAAA;AAAA,EACN,IAAA,EAAM,kCAAA;AAAA,EACN,GAAA,EAAK,gCAAA;AAAA,EACL,IAAA,EAAM,kCAAA;AAAA,EACN,MAAA,EAAQ,sCAAA;AAAA,EACR,MAAA,EAAQ,sCAAA;AAAA,EACR,MAAA,EAAQ,sCAAA;AAAA,EACR,OAAA,EAAS,wCAAA;AAAA,EACT,IAAA,EAAM,kCAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;ACtDO,IAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CACE;AAAA,IACE,QAAA;AAAA,IACA,KAAA,GAAQ,MAAA;AAAA,IACR,IAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,0BAAA,EAAyB,EAAA;AAAA,QACzB,SAAA,EAAW,EAAA;AAAA,UACT,kDAAA;AAAA,UACA,iBAAiB,KAAK,CAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,mBAAmB,WAAA,CAAY,KAAK,CAAC,CAAA,EACtD,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,0BAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS,CAAA;AAAA,UACzC,WAAA,oBACC,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,SAAA;AAAA,cACT,SAAA,EAAW,EAAA;AAAA,gBACT;AAAA,eACF;AAAA,cACA,YAAA,EAAW,SAAA;AAAA,cAEX,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AACf;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-ZXZJYVWP.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-callout-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const calloutContainer: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"border-brand bg-brand/5 text-brand\",\n  slate: \"border-slate-500 bg-slate-50 text-slate-900 dark:border-slate-400 dark:bg-slate-950/50 dark:text-slate-100\",\n  gray: \"border-gray-500 bg-gray-50 text-gray-900 dark:border-gray-400 dark:bg-gray-950/50 dark:text-gray-100\",\n  zinc: \"border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-950/50 dark:text-zinc-100\",\n  neutral: \"border-neutral-500 bg-neutral-50 text-neutral-900 dark:border-neutral-400 dark:bg-neutral-950/50 dark:text-neutral-100\",\n  stone: \"border-stone-500 bg-stone-50 text-stone-900 dark:border-stone-400 dark:bg-stone-950/50 dark:text-stone-100\",\n  red: \"border-red-500 bg-red-50 text-red-900 dark:border-red-400 dark:bg-red-950/50 dark:text-red-100\",\n  orange: \"border-orange-500 bg-orange-50 text-orange-900 dark:border-orange-400 dark:bg-orange-950/50 dark:text-orange-100\",\n  amber: \"border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950/50 dark:text-amber-100\",\n  yellow: \"border-yellow-500 bg-yellow-50 text-yellow-900 dark:border-yellow-400 dark:bg-yellow-950/50 dark:text-yellow-100\",\n  lime: \"border-lime-500 bg-lime-50 text-lime-900 dark:border-lime-400 dark:bg-lime-950/50 dark:text-lime-100\",\n  green: \"border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950/50 dark:text-green-100\",\n  emerald: \"border-emerald-500 bg-emerald-50 text-emerald-900 dark:border-emerald-400 dark:bg-emerald-950/50 dark:text-emerald-100\",\n  teal: \"border-teal-500 bg-teal-50 text-teal-900 dark:border-teal-400 dark:bg-teal-950/50 dark:text-teal-100\",\n  cyan: \"border-cyan-500 bg-cyan-50 text-cyan-900 dark:border-cyan-400 dark:bg-cyan-950/50 dark:text-cyan-100\",\n  sky: \"border-sky-500 bg-sky-50 text-sky-900 dark:border-sky-400 dark:bg-sky-950/50 dark:text-sky-100\",\n  blue: \"border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950/50 dark:text-blue-100\",\n  indigo: \"border-indigo-500 bg-indigo-50 text-indigo-900 dark:border-indigo-400 dark:bg-indigo-950/50 dark:text-indigo-100\",\n  violet: \"border-violet-500 bg-violet-50 text-violet-900 dark:border-violet-400 dark:bg-violet-950/50 dark:text-violet-100\",\n  purple: \"border-purple-500 bg-purple-50 text-purple-900 dark:border-purple-400 dark:bg-purple-950/50 dark:text-purple-100\",\n  fuchsia: \"border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 dark:border-fuchsia-400 dark:bg-fuchsia-950/50 dark:text-fuchsia-100\",\n  pink: \"border-pink-500 bg-pink-50 text-pink-900 dark:border-pink-400 dark:bg-pink-950/50 dark:text-pink-100\",\n  rose: \"border-rose-500 bg-rose-50 text-rose-900 dark:border-rose-400 dark:bg-rose-950/50 dark:text-rose-100\",\n};\n\nexport const calloutIcon: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"text-brand\",\n  slate: \"text-slate-500 dark:text-slate-400\",\n  gray: \"text-gray-500 dark:text-gray-400\",\n  zinc: \"text-zinc-500 dark:text-zinc-400\",\n  neutral: \"text-neutral-500 dark:text-neutral-400\",\n  stone: \"text-stone-500 dark:text-stone-400\",\n  red: \"text-red-500 dark:text-red-400\",\n  orange: \"text-orange-500 dark:text-orange-400\",\n  amber: \"text-amber-500 dark:text-amber-400\",\n  yellow: \"text-yellow-500 dark:text-yellow-400\",\n  lime: \"text-lime-500 dark:text-lime-400\",\n  green: \"text-green-500 dark:text-green-400\",\n  emerald: \"text-emerald-500 dark:text-emerald-400\",\n  teal: \"text-teal-500 dark:text-teal-400\",\n  cyan: \"text-cyan-500 dark:text-cyan-400\",\n  sky: \"text-sky-500 dark:text-sky-400\",\n  blue: \"text-blue-500 dark:text-blue-400\",\n  indigo: \"text-indigo-500 dark:text-indigo-400\",\n  violet: \"text-violet-500 dark:text-violet-400\",\n  purple: \"text-purple-500 dark:text-purple-400\",\n  fuchsia: \"text-fuchsia-500 dark:text-fuchsia-400\",\n  pink: \"text-pink-500 dark:text-pink-400\",\n  rose: \"text-rose-500 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CalloutProps } from \"./Callout.types\";\nimport { calloutContainer, calloutIcon } from \"./Callout.colors\";\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    {\n      children,\n      color = \"blue\",\n      icon,\n      dismissible = false,\n      onDismiss,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-react-fancy-callout=\"\"\n        className={cn(\n          \"flex items-start gap-3 rounded-lg border-l-4 p-4\",\n          calloutContainer[color],\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className={cn(\"mt-0.5 shrink-0\", calloutIcon[color])}>\n            {icon}\n          </span>\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className={cn(\n              \"shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current\",\n            )}\n            aria-label=\"Dismiss\"\n          >\n            <X size={16} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nCallout.displayName = \"Callout\";\n"]}
+{"version":3,"sources":["../src/components/Callout/Callout.colors.ts","../src/components/Callout/Callout.tsx"],"names":[],"mappings":"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","file":"chunk-KPRSRWNM.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-callout-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const calloutContainer: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"border-brand bg-brand/5 text-brand\",\n  slate: \"border-slate-500 bg-slate-50 text-slate-900 dark:border-slate-400 dark:bg-slate-950/50 dark:text-slate-100\",\n  gray: \"border-gray-500 bg-gray-50 text-gray-900 dark:border-gray-400 dark:bg-gray-950/50 dark:text-gray-100\",\n  zinc: \"border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-950/50 dark:text-zinc-100\",\n  neutral: \"border-neutral-500 bg-neutral-50 text-neutral-900 dark:border-neutral-400 dark:bg-neutral-950/50 dark:text-neutral-100\",\n  stone: \"border-stone-500 bg-stone-50 text-stone-900 dark:border-stone-400 dark:bg-stone-950/50 dark:text-stone-100\",\n  red: \"border-red-500 bg-red-50 text-red-900 dark:border-red-400 dark:bg-red-950/50 dark:text-red-100\",\n  orange: \"border-orange-500 bg-orange-50 text-orange-900 dark:border-orange-400 dark:bg-orange-950/50 dark:text-orange-100\",\n  amber: \"border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950/50 dark:text-amber-100\",\n  yellow: \"border-yellow-500 bg-yellow-50 text-yellow-900 dark:border-yellow-400 dark:bg-yellow-950/50 dark:text-yellow-100\",\n  lime: \"border-lime-500 bg-lime-50 text-lime-900 dark:border-lime-400 dark:bg-lime-950/50 dark:text-lime-100\",\n  green: \"border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950/50 dark:text-green-100\",\n  emerald: \"border-emerald-500 bg-emerald-50 text-emerald-900 dark:border-emerald-400 dark:bg-emerald-950/50 dark:text-emerald-100\",\n  teal: \"border-teal-500 bg-teal-50 text-teal-900 dark:border-teal-400 dark:bg-teal-950/50 dark:text-teal-100\",\n  cyan: \"border-cyan-500 bg-cyan-50 text-cyan-900 dark:border-cyan-400 dark:bg-cyan-950/50 dark:text-cyan-100\",\n  sky: \"border-sky-500 bg-sky-50 text-sky-900 dark:border-sky-400 dark:bg-sky-950/50 dark:text-sky-100\",\n  blue: \"border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950/50 dark:text-blue-100\",\n  indigo: \"border-indigo-500 bg-indigo-50 text-indigo-900 dark:border-indigo-400 dark:bg-indigo-950/50 dark:text-indigo-100\",\n  violet: \"border-violet-500 bg-violet-50 text-violet-900 dark:border-violet-400 dark:bg-violet-950/50 dark:text-violet-100\",\n  purple: \"border-purple-500 bg-purple-50 text-purple-900 dark:border-purple-400 dark:bg-purple-950/50 dark:text-purple-100\",\n  fuchsia: \"border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 dark:border-fuchsia-400 dark:bg-fuchsia-950/50 dark:text-fuchsia-100\",\n  pink: \"border-pink-500 bg-pink-50 text-pink-900 dark:border-pink-400 dark:bg-pink-950/50 dark:text-pink-100\",\n  rose: \"border-rose-500 bg-rose-50 text-rose-900 dark:border-rose-400 dark:bg-rose-950/50 dark:text-rose-100\",\n};\n\nexport const calloutIcon: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"text-brand\",\n  slate: \"text-slate-500 dark:text-slate-400\",\n  gray: \"text-gray-500 dark:text-gray-400\",\n  zinc: \"text-zinc-500 dark:text-zinc-400\",\n  neutral: \"text-neutral-500 dark:text-neutral-400\",\n  stone: \"text-stone-500 dark:text-stone-400\",\n  red: \"text-red-500 dark:text-red-400\",\n  orange: \"text-orange-500 dark:text-orange-400\",\n  amber: \"text-amber-500 dark:text-amber-400\",\n  yellow: \"text-yellow-500 dark:text-yellow-400\",\n  lime: \"text-lime-500 dark:text-lime-400\",\n  green: \"text-green-500 dark:text-green-400\",\n  emerald: \"text-emerald-500 dark:text-emerald-400\",\n  teal: \"text-teal-500 dark:text-teal-400\",\n  cyan: \"text-cyan-500 dark:text-cyan-400\",\n  sky: \"text-sky-500 dark:text-sky-400\",\n  blue: \"text-blue-500 dark:text-blue-400\",\n  indigo: \"text-indigo-500 dark:text-indigo-400\",\n  violet: \"text-violet-500 dark:text-violet-400\",\n  purple: \"text-purple-500 dark:text-purple-400\",\n  fuchsia: \"text-fuchsia-500 dark:text-fuchsia-400\",\n  pink: \"text-pink-500 dark:text-pink-400\",\n  rose: \"text-rose-500 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CalloutProps } from \"./Callout.types\";\nimport { calloutContainer, calloutIcon } from \"./Callout.colors\";\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    {\n      children,\n      color = \"blue\",\n      icon,\n      dismissible = false,\n      onDismiss,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-react-fancy-callout=\"\"\n        className={cn(\n          \"flex items-start gap-3 rounded-lg border-l-4 p-4\",\n          calloutContainer[color],\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className={cn(\"mt-0.5 shrink-0\", calloutIcon[color])}>\n            {icon}\n          </span>\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className={cn(\n              \"shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current\",\n            )}\n            aria-label=\"Dismiss\"\n          >\n            <X size={16} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nCallout.displayName = \"Callout\";\n"]}

package/dist/{chunk-VNOUXFZ2.cjs → chunk-KSSTFLV2.cjs}

@@ -11,9 +11,9 @@ var chunk4XMBXG4K_cjs = require('./chunk-4XMBXG4K.cjs');
 var chunkGKLETY7D_cjs = require('./chunk-GKLETY7D.cjs');
 var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
 var chunk6V44RRSB_cjs = require('./chunk-6V44RRSB.cjs');
-var chunkMOU6O324_cjs = require('./chunk-MOU6O324.cjs');
-var chunkBX6ZVWTO_cjs = require('./chunk-BX6ZVWTO.cjs');
-var chunkLCNHEYIM_cjs = require('./chunk-LCNHEYIM.cjs');
+var chunkOCHUZ7J3_cjs = require('./chunk-OCHUZ7J3.cjs');
+var chunkNZHVDWOM_cjs = require('./chunk-NZHVDWOM.cjs');
+var chunkWNWEC5OU_cjs = require('./chunk-WNWEC5OU.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -693,7 +693,7 @@ function JsonEditorRow({ node }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 px-2", style: { paddingInlineStart: depth * INDENT + 8 }, children: [
           container ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBX6ZVWTO_cjs.Button,
+            chunkNZHVDWOM_cjs.Button,
             {
               variant: "ghost",
               size: "xs",
@@ -766,9 +766,9 @@ function JsonEditorRow({ node }) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5 pt-0.5", children: [
-            node.declared && /* @__PURE__ */ jsxRuntime.jsx(chunkMOU6O324_cjs.Badge, { size: "sm", variant: "soft", color: conflict ? "red" : "zinc", children: node.type }),
+            node.declared && /* @__PURE__ */ jsxRuntime.jsx(chunkOCHUZ7J3_cjs.Badge, { size: "sm", variant: "soft", color: conflict ? "red" : "zinc", children: node.type }),
             container && ctx.allowAdd && !ctx.readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkBX6ZVWTO_cjs.Button,
+              chunkNZHVDWOM_cjs.Button,
               {
                 variant: "ghost",
                 size: "xs",
@@ -781,7 +781,7 @@ function JsonEditorRow({ node }) {
             ),
             ctx.allowReorder && !ctx.readOnly && node.parentKind === "array" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBX6ZVWTO_cjs.Button,
+                chunkNZHVDWOM_cjs.Button,
                 {
                   variant: "ghost",
                   size: "xs",
@@ -793,7 +793,7 @@ function JsonEditorRow({ node }) {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBX6ZVWTO_cjs.Button,
+                chunkNZHVDWOM_cjs.Button,
                 {
                   variant: "ghost",
                   size: "xs",
@@ -806,7 +806,7 @@ function JsonEditorRow({ node }) {
               )
             ] }),
             ctx.allowRemove && !ctx.readOnly && node.parentKind !== "root" && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkBX6ZVWTO_cjs.Button,
+              chunkNZHVDWOM_cjs.Button,
               {
                 variant: "ghost",
                 size: "xs",
@@ -842,13 +842,13 @@ function JsonEditorRow({ node }) {
             className: "flex items-center gap-2 px-2 pb-1",
             style: { paddingInlineStart: depth * INDENT + 40 },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkMOU6O324_cjs.Badge, { size: "sm", variant: "soft", color: "violet", children: "proposed" }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkOCHUZ7J3_cjs.Badge, { size: "sm", variant: "soft", color: "violet", children: "proposed" }),
               /* @__PURE__ */ jsxRuntime.jsxs(chunk4XMBXG4K_cjs.Text, { as: "span", size: "xs", color: "muted", className: "min-w-0 truncate font-mono", children: [
                 edit.label ?? describeEdit(edit),
                 edit.op === "set" || edit.op === "insert" ? ` \u2192 ${toText(edit.value)}` : ""
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBX6ZVWTO_cjs.Button,
+                chunkNZHVDWOM_cjs.Button,
                 {
                   size: "xs",
                   color: "emerald",
@@ -859,7 +859,7 @@ function JsonEditorRow({ node }) {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkBX6ZVWTO_cjs.Button,
+                chunkNZHVDWOM_cjs.Button,
                 {
                   size: "xs",
                   variant: "ghost",
@@ -915,7 +915,7 @@ function JsonEditorAddForm({ path, kind, depth, suggestedType }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBX6ZVWTO_cjs.Button,
+          chunkNZHVDWOM_cjs.Button,
           {
             size: "xs",
             color: "blue",
@@ -925,7 +925,7 @@ function JsonEditorAddForm({ path, kind, depth, suggestedType }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBX6ZVWTO_cjs.Button,
+          chunkNZHVDWOM_cjs.Button,
           {
             size: "xs",
             variant: "ghost",
@@ -1204,7 +1204,7 @@ var JsonEditor = react.forwardRef(function JsonEditor2({
         className
       ),
       children: [
-        showIssues && issues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-json-editor-issues": "", className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkLCNHEYIM_cjs.Callout, { color: parsedKeyMap.ok ? "amber" : "red", children: [
+        showIssues && issues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-json-editor-issues": "", className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkWNWEC5OU_cjs.Callout, { color: parsedKeyMap.ok ? "amber" : "red", children: [
           /* @__PURE__ */ jsxRuntime.jsx(chunk4XMBXG4K_cjs.Text, { size: "sm", weight: "semibold", className: "mb-1", children: parsedKeyMap.ok ? `${issues.length} ${issues.length === 1 ? "issue" : "issues"}` : "The keyMap could not be used \u2014 values are shown untyped." }),
           /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-0.5", children: issues.map((issue2, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(chunk4XMBXG4K_cjs.Text, { as: "span", size: "xs", "data-react-fancy-json-editor-issue": "", "data-kind": issue2.kind, "data-path": issue2.path, children: [
             issue2.path ? `${issue2.path} \u2014 ` : "",
@@ -1226,7 +1226,7 @@ var JsonEditor = react.forwardRef(function JsonEditor2({
         orphanPending.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-json-editor-orphan-pending": "", className: "border-t border-zinc-100 p-2 dark:border-zinc-800", children: orphanPending.map((edit) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 py-0.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(chunk4XMBXG4K_cjs.Text, { as: "span", size: "xs", color: "muted", className: "min-w-0 flex-1 truncate font-mono", children: edit.label ?? describeEdit(edit) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBX6ZVWTO_cjs.Button,
+            chunkNZHVDWOM_cjs.Button,
             {
               size: "xs",
               color: "emerald",
@@ -1237,7 +1237,7 @@ var JsonEditor = react.forwardRef(function JsonEditor2({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBX6ZVWTO_cjs.Button,
+            chunkNZHVDWOM_cjs.Button,
             {
               size: "xs",
               variant: "ghost",
@@ -1249,7 +1249,7 @@ var JsonEditor = react.forwardRef(function JsonEditor2({
           )
         ] }, edit.id)) }),
         rootIsContainer && allowAdd && !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-zinc-100 p-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBX6ZVWTO_cjs.Button,
+          chunkNZHVDWOM_cjs.Button,
           {
             variant: "ghost",
             size: "xs",
@@ -1351,5 +1351,5 @@ exports.parsePath = parsePath;
 exports.pathToString = pathToString;
 exports.resolveKeyRule = resolveKeyRule;
 exports.typeMatches = typeMatches;
-//# sourceMappingURL=chunk-VNOUXFZ2.cjs.map
-//# sourceMappingURL=chunk-VNOUXFZ2.cjs.map
+//# sourceMappingURL=chunk-KSSTFLV2.cjs.map
+//# sourceMappingURL=chunk-KSSTFLV2.cjs.map