@epilot/spark-ui 0.14.0 → 0.15.1

package/dist/components/accordion.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx

package/dist/components/accordion.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import * as React$1 from "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/accordion.d.ts
 type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';

package/dist/components/accordion.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/attachment.d.cts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "sm" | "default" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({
@@ -20,7 +20,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "icon" | "image" | null | undefined;
+  variant?: "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/attachment.d.ts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "sm" | "default" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({
@@ -20,7 +20,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "icon" | "image" | null | undefined;
+  variant?: "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/bar-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "default" | "secondary" | "destructive" | "muted" | "tinted" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "default" | "secondary" | "destructive" | "muted" | "tinted" | null | undefined;
+  variant?: "secondary" | "destructive" | "default" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button.d.cts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "bare" | "primary" | "secondary" | "tertiary" | "destructive" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
   color?: "accent" | "neutral" | "danger" | null | undefined;
-  size?: "icon" | "small" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/button.d.ts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "bare" | "primary" | "secondary" | "tertiary" | "destructive" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
   color?: "accent" | "neutral" | "danger" | null | undefined;
-  size?: "icon" | "small" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/callout.d.cts

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "neutral" | "success" | "warning" | "info" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.d.ts

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "neutral" | "success" | "warning" | "info" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/info-block.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/info-block.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/input-otp.cjs

@@ -85,13 +85,14 @@ const slotVariants = (0, class_variance_authority.cva)("flex w-11 min-w-0 items-
 		}
 	]
 });
-function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Digit ${index + 1}`, ...props }) {
+function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Character ${index + 1}`, validationType = "alphanumeric", ...props }) {
 	const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({ id: idProp });
 	const chrome = field?.labelPosition === "inset" ? "inset" : "box";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPField.Root, {
 		"data-slot": "input-otp",
 		length,
 		id,
+		validationType,
 		onValueComplete: onComplete,
 		className: (0, cnfast.cn)("flex items-center gap-2", className),
 		...props,

package/dist/components/input-otp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Digit ${index + 1}`,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAA,GAAA,yBAAA,KACJ,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAOA,+BAAAA;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAcA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,SAAS,QAAQ,KAC5C,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;YAEH,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,KAAK;GACzD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GANM,KAMN,CACF;CACY,CAAA;AAEnB"}
+{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'className'\n  | 'id'\n  | 'validationType'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Character ${index + 1}`,\n  validationType = 'alphanumeric',\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      validationType={validationType}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAA,GAAA,yBAAA,KACJ,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAOA,+BAAAA;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,+BAAAA,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAoBA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,aAAa,QAAQ,KAChD,iBAAiB,gBACjB,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACY;EAChB,iBAAiB;EACjB,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;YAEH,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,KAAK;GACzD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GANM,KAMN,CACF;CACY,CAAA;AAEnB"}

package/dist/components/input-otp.d.cts

@@ -3,7 +3,7 @@
 import { OTPFieldRootProps } from "@base-ui/react/otp-field";
 
 //#region src/components/input-otp.d.ts
-interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'> {
+interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id' | 'validationType'> {
   /** Number of code slots. */
   length?: number;
   /** Fired when every slot is filled. */
@@ -17,6 +17,7 @@ declare function InputOtp({
   id: idProp,
   onComplete,
   slotAriaLabel,
+  validationType,
   ...props
 }: InputOtpProps): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/input-otp.d.ts

@@ -3,7 +3,7 @@
 import { OTPFieldRootProps } from "@base-ui/react/otp-field";
 
 //#region src/components/input-otp.d.ts
-interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'> {
+interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id' | 'validationType'> {
   /** Number of code slots. */
   length?: number;
   /** Fired when every slot is filled. */
@@ -17,6 +17,7 @@ declare function InputOtp({
   id: idProp,
   onComplete,
   slotAriaLabel,
+  validationType,
   ...props
 }: InputOtpProps): import("react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/input-otp.js

@@ -84,13 +84,14 @@ const slotVariants = cva("flex w-11 min-w-0 items-center justify-center bg-trans
 		}
 	]
 });
-function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Digit ${index + 1}`, ...props }) {
+function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Character ${index + 1}`, validationType = "alphanumeric", ...props }) {
 	const { field, id, ariaDescribedBy, inputStyle, inputColor } = useFieldControl({ id: idProp });
 	const chrome = field?.labelPosition === "inset" ? "inset" : "box";
 	return /* @__PURE__ */ jsx(OTPField.Root, {
 		"data-slot": "input-otp",
 		length,
 		id,
+		validationType,
 		onValueComplete: onComplete,
 		className: cn("flex items-center gap-2", className),
 		...props,

package/dist/components/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Digit ${index + 1}`,\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAcA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,SAAS,QAAQ,KAC5C,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAEH,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,KAAK;GACzD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GANM,KAMN,CACF;CACY,CAAA;AAEnB"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n  'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n  {\n    variants: {\n      chrome: {\n        // inside an inset field the shell is the box; slots keep the classic\n        // underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputOtpProps extends Pick<\n  OTPFieldRootProps,\n  | 'value'\n  | 'defaultValue'\n  | 'onValueChange'\n  | 'disabled'\n  | 'className'\n  | 'id'\n  | 'validationType'\n> {\n  /** Number of code slots. */\n  length?: number\n  /** Fired when every slot is filled. */\n  onComplete?: OTPFieldRootProps['onValueComplete']\n  /** Accessible name per slot (for localization). */\n  slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n  length = 6,\n  className,\n  id: idProp,\n  onComplete,\n  slotAriaLabel = (index) => `Character ${index + 1}`,\n  validationType = 'alphanumeric',\n  ...props\n}: InputOtpProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({ id: idProp })\n  const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n  return (\n    <OTPField.Root\n      data-slot=\"input-otp\"\n      length={length}\n      id={id}\n      validationType={validationType}\n      onValueComplete={onComplete}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length }, (_, index) => (\n        <OTPField.Input\n          key={index}\n          // the first slot is named by the Field label (Base UI ignores\n          // aria-label there); the rest get a positional name for a11y\n          aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n          aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n          className={slotVariants({ chrome, inputStyle, inputColor })}\n        />\n      ))}\n    </OTPField.Root>\n  )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GACP,KAAK;EACP;EACA,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;EAAG;EAC7D,YAAY;GAAE,OAAO;GAAI,MAAM;EAAG;CACpC;CACA,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;EACxB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;EAC3B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;EAC5B;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;EACzB;EACA;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;EAAiB;EAChE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;EAAsB;CACtE;AACF,CACF;AAoBA,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,aAAa,QAAQ,KAChD,iBAAiB,gBACjB,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB,EAAE,IAAI,OAAO,CAAC;CAChC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;CAE5D,OACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACY;EAChB,iBAAiB;EACjB,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;YAEH,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,KAAK;GACzD,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;GAAW,CAAC;EAC3D,GANM,KAMN,CACF;CACY,CAAA;AAEnB"}

package/dist/components/line-chart.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/line-chart.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";

package/dist/components/message-scroller.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_button = require("./button.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_lib_message_animations = require("../lib/message-animations.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/message-scroller.js

@@ -1,8 +1,8 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import { Button } from "./button.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/page-header.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "styleVariant" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "styleVariant" | "size"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/power-history-chart.cjs

@@ -1,6 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
@@ -8,7 +9,6 @@ const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/power-history-chart.js

@@ -1,13 +1,13 @@
 "use client";
-import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/components/power-history.cjs

@@ -1,10 +1,10 @@
 "use client";
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_line_chart = require("./line-chart.cjs");
-const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/power-history.tsx

package/dist/components/power-history.js

@@ -1,10 +1,10 @@
 "use client";
+import { useContainerWidth } from "../hooks/use-container-width.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
 import { LineChart } from "./line-chart.js";
-import { useContainerWidth } from "../hooks/use-container-width.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/power-history.tsx

package/dist/components/power-network.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_number_flow = require("./number-flow.cjs");
 const require_components_skeleton = require("./skeleton.cjs");

package/dist/components/power-network.js

@@ -1,7 +1,7 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { SectionTitle } from "./typography.js";
 import NumberFlow from "./number-flow.js";
 import { Skeleton } from "./skeleton.js";

package/dist/components/reparent.cjs

@@ -9,6 +9,7 @@ let react_dom = require("react-dom");
 const supportsMoveBefore = typeof Element !== "undefined" && "moveBefore" in Element.prototype;
 function useReparent() {
 	const [host, setHost] = react.useState(null);
+	const [parkCount, setParkCount] = react.useState(0);
 	react.useEffect(() => {
 		const el = document.createElement("div");
 		el.style.display = "contents";
@@ -16,15 +17,25 @@ function useReparent() {
 		return () => el.remove();
 	}, []);
 	const park = react.useCallback(() => {
-		if (supportsMoveBefore && host?.isConnected) {
-			host.style.display = "none";
+		if (!supportsMoveBefore || !host?.isConnected) return;
+		if (host.parentElement === document.body) return;
+		try {
 			document.body.moveBefore(host, null);
+		} catch {
+			return;
 		}
+		host.style.display = "none";
+		setParkCount((count) => count + 1);
 	}, [host]);
 	return react.useMemo(() => ({
 		host,
-		park
-	}), [host, park]);
+		park,
+		parkCount
+	}), [
+		host,
+		park,
+		parkCount
+	]);
 }
 function ReparentContent({ handle, children }) {
 	if (!handle.host) return null;
@@ -32,14 +43,17 @@ function ReparentContent({ handle, children }) {
 }
 function ReparentSlot({ handle, ...props }) {
 	const ref = react.useRef(null);
-	const host = handle.host;
+	const { host, parkCount } = handle;
 	react.useLayoutEffect(() => {
 		const slot = ref.current;
-		if (!slot || !host) return;
+		if (!slot || !host || host.parentElement === slot) return;
 		host.style.display = "contents";
-		if (supportsMoveBefore && host.isConnected) slot.moveBefore(host, null);
-		else slot.appendChild(host);
-	}, [host]);
+		if (supportsMoveBefore && host.isConnected === slot.isConnected) try {
+			slot.moveBefore(host, null);
+			return;
+		} catch {}
+		slot.appendChild(host);
+	}, [host, parkCount]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "reparent-slot",
 		ref,

package/dist/components/reparent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"reparent.cjs","names":["React"],"sources":["../../src/components/reparent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\n// moveBefore ships in Chrome/Edge 133+, Firefox 144+; Safari has no state-preserving move\nconst supportsMoveBefore =\n  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype\n\ntype MovableElement = Element & {\n  moveBefore: (node: Node, child: Node | null) => void\n}\n\ninterface ReparentHandle {\n  host: HTMLElement | null\n  park: () => void\n}\n\n// host created after mount so server and client hydrate the same (empty) markup\nfunction useReparent(): ReparentHandle {\n  const [host, setHost] = React.useState<HTMLElement | null>(null)\n  React.useEffect(() => {\n    const el = document.createElement('div')\n    el.style.display = 'contents'\n    setHost(el)\n    return () => el.remove()\n  }, [])\n  const park = React.useCallback(() => {\n    if (supportsMoveBefore && host?.isConnected) {\n      host.style.display = 'none'\n      ;(document.body as unknown as MovableElement).moveBefore(host, null)\n    }\n  }, [host])\n  return React.useMemo(() => ({ host, park }), [host, park])\n}\n\nfunction ReparentContent({\n  handle,\n  children,\n}: {\n  handle: ReparentHandle\n  children: React.ReactNode\n}) {\n  if (!handle.host) return null\n  return createPortal(children, handle.host)\n}\n\ninterface ReparentSlotProps extends React.ComponentProps<'div'> {\n  handle: ReparentHandle\n}\n\nfunction ReparentSlot({ handle, ...props }: ReparentSlotProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const host = handle.host\n  React.useLayoutEffect(() => {\n    const slot = ref.current\n    if (!slot || !host) return\n    host.style.display = 'contents'\n    if (supportsMoveBefore && host.isConnected) {\n      ;(slot as unknown as MovableElement).moveBefore(host, null)\n    } else {\n      slot.appendChild(host)\n    }\n  }, [host])\n  return <div data-slot=\"reparent-slot\" ref={ref} {...props} />\n}\n\nexport { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent }\nexport type { ReparentHandle, ReparentSlotProps }\n"],"mappings":";;;;;;;;AAIA,MAAM,qBACJ,OAAO,YAAY,eAAe,gBAAgB,QAAQ;AAY5D,SAAS,cAA8B;CACrC,MAAM,CAAC,MAAM,WAAWA,MAAM,SAA6B,IAAI;CAC/D,MAAM,gBAAgB;EACpB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,MAAM,UAAU;EACnB,QAAQ,EAAE;EACV,aAAa,GAAG,OAAO;CACzB,GAAG,CAAC,CAAC;CACL,MAAM,OAAOA,MAAM,kBAAkB;EACnC,IAAI,sBAAsB,MAAM,aAAa;GAC3C,KAAK,MAAM,UAAU;GACpB,SAAU,KAAmC,WAAW,MAAM,IAAI;EACrE;CACF,GAAG,CAAC,IAAI,CAAC;CACT,OAAOA,MAAM,eAAe;EAAE;EAAM;CAAK,IAAI,CAAC,MAAM,IAAI,CAAC;AAC3D;AAEA,SAAS,gBAAgB,EACvB,QACA,YAIC;CACD,IAAI,CAAC,OAAO,MAAM,OAAO;CACzB,QAAA,GAAA,UAAA,cAAoB,UAAU,OAAO,IAAI;AAC3C;AAMA,SAAS,aAAa,EAAE,QAAQ,GAAG,SAA4B;CAC7D,MAAM,MAAMA,MAAM,OAAuB,IAAI;CAC7C,MAAM,OAAO,OAAO;CACpB,MAAM,sBAAsB;EAC1B,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,QAAQ,CAAC,MAAM;EACpB,KAAK,MAAM,UAAU;EACrB,IAAI,sBAAsB,KAAK,aAC5B,KAAoC,WAAW,MAAM,IAAI;OAE1D,KAAK,YAAY,IAAI;CAEzB,GAAG,CAAC,IAAI,CAAC;CACT,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAqB;EAAK,GAAI;CAAQ,CAAA;AAC9D"}
+{"version":3,"file":"reparent.cjs","names":["React"],"sources":["../../src/components/reparent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\n// moveBefore ships in Chrome/Edge 133+, Firefox 144+; Safari has no state-preserving move\nconst supportsMoveBefore =\n  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype\n\ntype MovableElement = Element & {\n  moveBefore: (node: Node, child: Node | null) => void\n}\n\ninterface ReparentHandle {\n  host: HTMLElement | null\n  park: () => void\n  parkCount?: number\n}\n\n// host created after mount so server and client hydrate the same (empty) markup\nfunction useReparent(): ReparentHandle {\n  const [host, setHost] = React.useState<HTMLElement | null>(null)\n  const [parkCount, setParkCount] = React.useState(0)\n  React.useEffect(() => {\n    const el = document.createElement('div')\n    el.style.display = 'contents'\n    setHost(el)\n    return () => el.remove()\n  }, [])\n  const park = React.useCallback(() => {\n    if (!supportsMoveBefore || !host?.isConnected) return\n    if (host.parentElement === document.body) return\n    try {\n      ;(document.body as unknown as MovableElement).moveBefore(host, null)\n    } catch {\n      return\n    }\n    host.style.display = 'none'\n    // re-runs every slot's adopt effect, so a park with no layout swap still recovers\n    setParkCount((count) => count + 1)\n  }, [host])\n  return React.useMemo(\n    () => ({ host, park, parkCount }),\n    [host, park, parkCount],\n  )\n}\n\nfunction ReparentContent({\n  handle,\n  children,\n}: {\n  handle: ReparentHandle\n  children: React.ReactNode\n}) {\n  if (!handle.host) return null\n  return createPortal(children, handle.host)\n}\n\ninterface ReparentSlotProps extends React.ComponentProps<'div'> {\n  handle: ReparentHandle\n}\n\nfunction ReparentSlot({ handle, ...props }: ReparentSlotProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { host, parkCount } = handle\n  React.useLayoutEffect(() => {\n    const slot = ref.current\n    if (!slot || !host || host.parentElement === slot) return\n    host.style.display = 'contents'\n    // moveBefore throws unless node and new parent are both connected or both detached\n    if (supportsMoveBefore && host.isConnected === slot.isConnected) {\n      try {\n        ;(slot as unknown as MovableElement).moveBefore(host, null)\n        return\n      } catch {}\n    }\n    slot.appendChild(host)\n  }, [host, parkCount])\n  return <div data-slot=\"reparent-slot\" ref={ref} {...props} />\n}\n\nexport { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent }\nexport type { ReparentHandle, ReparentSlotProps }\n"],"mappings":";;;;;;;;AAIA,MAAM,qBACJ,OAAO,YAAY,eAAe,gBAAgB,QAAQ;AAa5D,SAAS,cAA8B;CACrC,MAAM,CAAC,MAAM,WAAWA,MAAM,SAA6B,IAAI;CAC/D,MAAM,CAAC,WAAW,gBAAgBA,MAAM,SAAS,CAAC;CAClD,MAAM,gBAAgB;EACpB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,MAAM,UAAU;EACnB,QAAQ,EAAE;EACV,aAAa,GAAG,OAAO;CACzB,GAAG,CAAC,CAAC;CACL,MAAM,OAAOA,MAAM,kBAAkB;EACnC,IAAI,CAAC,sBAAsB,CAAC,MAAM,aAAa;EAC/C,IAAI,KAAK,kBAAkB,SAAS,MAAM;EAC1C,IAAI;GACD,SAAU,KAAmC,WAAW,MAAM,IAAI;EACrE,QAAQ;GACN;EACF;EACA,KAAK,MAAM,UAAU;EAErB,cAAc,UAAU,QAAQ,CAAC;CACnC,GAAG,CAAC,IAAI,CAAC;CACT,OAAOA,MAAM,eACJ;EAAE;EAAM;EAAM;CAAU,IAC/B;EAAC;EAAM;EAAM;CAAS,CACxB;AACF;AAEA,SAAS,gBAAgB,EACvB,QACA,YAIC;CACD,IAAI,CAAC,OAAO,MAAM,OAAO;CACzB,QAAA,GAAA,UAAA,cAAoB,UAAU,OAAO,IAAI;AAC3C;AAMA,SAAS,aAAa,EAAE,QAAQ,GAAG,SAA4B;CAC7D,MAAM,MAAMA,MAAM,OAAuB,IAAI;CAC7C,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,sBAAsB;EAC1B,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,QAAQ,CAAC,QAAQ,KAAK,kBAAkB,MAAM;EACnD,KAAK,MAAM,UAAU;EAErB,IAAI,sBAAsB,KAAK,gBAAgB,KAAK,aAClD,IAAI;GACD,KAAoC,WAAW,MAAM,IAAI;GAC1D;EACF,QAAQ,CAAC;EAEX,KAAK,YAAY,IAAI;CACvB,GAAG,CAAC,MAAM,SAAS,CAAC;CACpB,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAqB;EAAK,GAAI;CAAQ,CAAA;AAC9D"}

package/dist/components/reparent.d.cts

@@ -7,6 +7,7 @@ declare const supportsMoveBefore: boolean;
 interface ReparentHandle {
   host: HTMLElement | null;
   park: () => void;
+  parkCount?: number;
 }
 declare function useReparent(): ReparentHandle;
 declare function ReparentContent({

package/dist/components/reparent.d.ts

@@ -7,6 +7,7 @@ declare const supportsMoveBefore: boolean;
 interface ReparentHandle {
   host: HTMLElement | null;
   park: () => void;
+  parkCount?: number;
 }
 declare function useReparent(): ReparentHandle;
 declare function ReparentContent({

package/dist/components/reparent.js

@@ -6,6 +6,7 @@ import { createPortal } from "react-dom";
 const supportsMoveBefore = typeof Element !== "undefined" && "moveBefore" in Element.prototype;
 function useReparent() {
 	const [host, setHost] = React$1.useState(null);
+	const [parkCount, setParkCount] = React$1.useState(0);
 	React$1.useEffect(() => {
 		const el = document.createElement("div");
 		el.style.display = "contents";
@@ -13,15 +14,25 @@ function useReparent() {
 		return () => el.remove();
 	}, []);
 	const park = React$1.useCallback(() => {
-		if (supportsMoveBefore && host?.isConnected) {
-			host.style.display = "none";
+		if (!supportsMoveBefore || !host?.isConnected) return;
+		if (host.parentElement === document.body) return;
+		try {
 			document.body.moveBefore(host, null);
+		} catch {
+			return;
 		}
+		host.style.display = "none";
+		setParkCount((count) => count + 1);
 	}, [host]);
 	return React$1.useMemo(() => ({
 		host,
-		park
-	}), [host, park]);
+		park,
+		parkCount
+	}), [
+		host,
+		park,
+		parkCount
+	]);
 }
 function ReparentContent({ handle, children }) {
 	if (!handle.host) return null;
@@ -29,14 +40,17 @@ function ReparentContent({ handle, children }) {
 }
 function ReparentSlot({ handle, ...props }) {
 	const ref = React$1.useRef(null);
-	const host = handle.host;
+	const { host, parkCount } = handle;
 	React$1.useLayoutEffect(() => {
 		const slot = ref.current;
-		if (!slot || !host) return;
+		if (!slot || !host || host.parentElement === slot) return;
 		host.style.display = "contents";
-		if (supportsMoveBefore && host.isConnected) slot.moveBefore(host, null);
-		else slot.appendChild(host);
-	}, [host]);
+		if (supportsMoveBefore && host.isConnected === slot.isConnected) try {
+			slot.moveBefore(host, null);
+			return;
+		} catch {}
+		slot.appendChild(host);
+	}, [host, parkCount]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "reparent-slot",
 		ref,

package/dist/components/reparent.js.map

@@ -1 +1 @@
-{"version":3,"file":"reparent.js","names":["React"],"sources":["../../src/components/reparent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\n// moveBefore ships in Chrome/Edge 133+, Firefox 144+; Safari has no state-preserving move\nconst supportsMoveBefore =\n  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype\n\ntype MovableElement = Element & {\n  moveBefore: (node: Node, child: Node | null) => void\n}\n\ninterface ReparentHandle {\n  host: HTMLElement | null\n  park: () => void\n}\n\n// host created after mount so server and client hydrate the same (empty) markup\nfunction useReparent(): ReparentHandle {\n  const [host, setHost] = React.useState<HTMLElement | null>(null)\n  React.useEffect(() => {\n    const el = document.createElement('div')\n    el.style.display = 'contents'\n    setHost(el)\n    return () => el.remove()\n  }, [])\n  const park = React.useCallback(() => {\n    if (supportsMoveBefore && host?.isConnected) {\n      host.style.display = 'none'\n      ;(document.body as unknown as MovableElement).moveBefore(host, null)\n    }\n  }, [host])\n  return React.useMemo(() => ({ host, park }), [host, park])\n}\n\nfunction ReparentContent({\n  handle,\n  children,\n}: {\n  handle: ReparentHandle\n  children: React.ReactNode\n}) {\n  if (!handle.host) return null\n  return createPortal(children, handle.host)\n}\n\ninterface ReparentSlotProps extends React.ComponentProps<'div'> {\n  handle: ReparentHandle\n}\n\nfunction ReparentSlot({ handle, ...props }: ReparentSlotProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const host = handle.host\n  React.useLayoutEffect(() => {\n    const slot = ref.current\n    if (!slot || !host) return\n    host.style.display = 'contents'\n    if (supportsMoveBefore && host.isConnected) {\n      ;(slot as unknown as MovableElement).moveBefore(host, null)\n    } else {\n      slot.appendChild(host)\n    }\n  }, [host])\n  return <div data-slot=\"reparent-slot\" ref={ref} {...props} />\n}\n\nexport { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent }\nexport type { ReparentHandle, ReparentSlotProps }\n"],"mappings":";;;;;AAIA,MAAM,qBACJ,OAAO,YAAY,eAAe,gBAAgB,QAAQ;AAY5D,SAAS,cAA8B;CACrC,MAAM,CAAC,MAAM,WAAWA,QAAM,SAA6B,IAAI;CAC/D,QAAM,gBAAgB;EACpB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,MAAM,UAAU;EACnB,QAAQ,EAAE;EACV,aAAa,GAAG,OAAO;CACzB,GAAG,CAAC,CAAC;CACL,MAAM,OAAOA,QAAM,kBAAkB;EACnC,IAAI,sBAAsB,MAAM,aAAa;GAC3C,KAAK,MAAM,UAAU;GACpB,SAAU,KAAmC,WAAW,MAAM,IAAI;EACrE;CACF,GAAG,CAAC,IAAI,CAAC;CACT,OAAOA,QAAM,eAAe;EAAE;EAAM;CAAK,IAAI,CAAC,MAAM,IAAI,CAAC;AAC3D;AAEA,SAAS,gBAAgB,EACvB,QACA,YAIC;CACD,IAAI,CAAC,OAAO,MAAM,OAAO;CACzB,OAAO,aAAa,UAAU,OAAO,IAAI;AAC3C;AAMA,SAAS,aAAa,EAAE,QAAQ,GAAG,SAA4B;CAC7D,MAAM,MAAMA,QAAM,OAAuB,IAAI;CAC7C,MAAM,OAAO,OAAO;CACpB,QAAM,sBAAsB;EAC1B,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,QAAQ,CAAC,MAAM;EACpB,KAAK,MAAM,UAAU;EACrB,IAAI,sBAAsB,KAAK,aAC5B,KAAoC,WAAW,MAAM,IAAI;OAE1D,KAAK,YAAY,IAAI;CAEzB,GAAG,CAAC,IAAI,CAAC;CACT,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAqB;EAAK,GAAI;CAAQ,CAAA;AAC9D"}
+{"version":3,"file":"reparent.js","names":["React"],"sources":["../../src/components/reparent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\n// moveBefore ships in Chrome/Edge 133+, Firefox 144+; Safari has no state-preserving move\nconst supportsMoveBefore =\n  typeof Element !== 'undefined' && 'moveBefore' in Element.prototype\n\ntype MovableElement = Element & {\n  moveBefore: (node: Node, child: Node | null) => void\n}\n\ninterface ReparentHandle {\n  host: HTMLElement | null\n  park: () => void\n  parkCount?: number\n}\n\n// host created after mount so server and client hydrate the same (empty) markup\nfunction useReparent(): ReparentHandle {\n  const [host, setHost] = React.useState<HTMLElement | null>(null)\n  const [parkCount, setParkCount] = React.useState(0)\n  React.useEffect(() => {\n    const el = document.createElement('div')\n    el.style.display = 'contents'\n    setHost(el)\n    return () => el.remove()\n  }, [])\n  const park = React.useCallback(() => {\n    if (!supportsMoveBefore || !host?.isConnected) return\n    if (host.parentElement === document.body) return\n    try {\n      ;(document.body as unknown as MovableElement).moveBefore(host, null)\n    } catch {\n      return\n    }\n    host.style.display = 'none'\n    // re-runs every slot's adopt effect, so a park with no layout swap still recovers\n    setParkCount((count) => count + 1)\n  }, [host])\n  return React.useMemo(\n    () => ({ host, park, parkCount }),\n    [host, park, parkCount],\n  )\n}\n\nfunction ReparentContent({\n  handle,\n  children,\n}: {\n  handle: ReparentHandle\n  children: React.ReactNode\n}) {\n  if (!handle.host) return null\n  return createPortal(children, handle.host)\n}\n\ninterface ReparentSlotProps extends React.ComponentProps<'div'> {\n  handle: ReparentHandle\n}\n\nfunction ReparentSlot({ handle, ...props }: ReparentSlotProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { host, parkCount } = handle\n  React.useLayoutEffect(() => {\n    const slot = ref.current\n    if (!slot || !host || host.parentElement === slot) return\n    host.style.display = 'contents'\n    // moveBefore throws unless node and new parent are both connected or both detached\n    if (supportsMoveBefore && host.isConnected === slot.isConnected) {\n      try {\n        ;(slot as unknown as MovableElement).moveBefore(host, null)\n        return\n      } catch {}\n    }\n    slot.appendChild(host)\n  }, [host, parkCount])\n  return <div data-slot=\"reparent-slot\" ref={ref} {...props} />\n}\n\nexport { ReparentContent, ReparentSlot, supportsMoveBefore, useReparent }\nexport type { ReparentHandle, ReparentSlotProps }\n"],"mappings":";;;;;AAIA,MAAM,qBACJ,OAAO,YAAY,eAAe,gBAAgB,QAAQ;AAa5D,SAAS,cAA8B;CACrC,MAAM,CAAC,MAAM,WAAWA,QAAM,SAA6B,IAAI;CAC/D,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,CAAC;CAClD,QAAM,gBAAgB;EACpB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,MAAM,UAAU;EACnB,QAAQ,EAAE;EACV,aAAa,GAAG,OAAO;CACzB,GAAG,CAAC,CAAC;CACL,MAAM,OAAOA,QAAM,kBAAkB;EACnC,IAAI,CAAC,sBAAsB,CAAC,MAAM,aAAa;EAC/C,IAAI,KAAK,kBAAkB,SAAS,MAAM;EAC1C,IAAI;GACD,SAAU,KAAmC,WAAW,MAAM,IAAI;EACrE,QAAQ;GACN;EACF;EACA,KAAK,MAAM,UAAU;EAErB,cAAc,UAAU,QAAQ,CAAC;CACnC,GAAG,CAAC,IAAI,CAAC;CACT,OAAOA,QAAM,eACJ;EAAE;EAAM;EAAM;CAAU,IAC/B;EAAC;EAAM;EAAM;CAAS,CACxB;AACF;AAEA,SAAS,gBAAgB,EACvB,QACA,YAIC;CACD,IAAI,CAAC,OAAO,MAAM,OAAO;CACzB,OAAO,aAAa,UAAU,OAAO,IAAI;AAC3C;AAMA,SAAS,aAAa,EAAE,QAAQ,GAAG,SAA4B;CAC7D,MAAM,MAAMA,QAAM,OAAuB,IAAI;CAC7C,MAAM,EAAE,MAAM,cAAc;CAC5B,QAAM,sBAAsB;EAC1B,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,QAAQ,CAAC,QAAQ,KAAK,kBAAkB,MAAM;EACnD,KAAK,MAAM,UAAU;EAErB,IAAI,sBAAsB,KAAK,gBAAgB,KAAK,aAClD,IAAI;GACD,KAAoC,WAAW,MAAM,IAAI;GAC1D;EACF,QAAQ,CAAC;EAEX,KAAK,YAAY,IAAI;CACvB,GAAG,CAAC,MAAM,SAAS,CAAC;CACpB,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAqB;EAAK,GAAI;CAAQ,CAAA;AAC9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",