@krizaka/ui 3.43.0 → 3.44.0

package/dist/combobox.d.ts

@@ -4,8 +4,9 @@ import * as React from 'react';
 declare const combobox: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
             input?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             option?: tailwind_variants.ClassValue;
             list?: tailwind_variants.ClassValue;
@@ -13,7 +14,6 @@ declare const combobox: tailwind_variants.TVReturnType<{
             hint?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             check?: tailwind_variants.ClassValue;
-            error?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
         };
@@ -21,8 +21,9 @@ declare const combobox: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
-            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
             input?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             option?: tailwind_variants.ClassValue;
             list?: tailwind_variants.ClassValue;
@@ -30,7 +31,6 @@ declare const combobox: tailwind_variants.TVReturnType<{
             hint?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             check?: tailwind_variants.ClassValue;
-            error?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
         };
@@ -51,8 +51,9 @@ declare const combobox: tailwind_variants.TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            description?: tailwind_variants.ClassValue;
+            error?: tailwind_variants.ClassValue;
             input?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             option?: tailwind_variants.ClassValue;
             list?: tailwind_variants.ClassValue;
@@ -60,7 +61,6 @@ declare const combobox: tailwind_variants.TVReturnType<{
             hint?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             check?: tailwind_variants.ClassValue;
-            error?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
         };

package/dist/combobox.js

@@ -3,8 +3,8 @@ import {
   Combobox,
   combobox,
   comboboxLabels
-} from "./chunk-AAP3U66V.js";
-import "./chunk-C3NF7V5Y.js";
+} from "./chunk-KBQD6HE3.js";
+import "./chunk-HHFWK2HH.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-FZBWEDQI.js";

package/dist/data-table.js

@@ -9,13 +9,13 @@ import {
   dataTableCsv,
   dataTableLabels,
   useDataTable
-} from "./chunk-S5LP7KKW.js";
+} from "./chunk-YHKTYFOQ.js";
 import "./chunk-YGIN2YIY.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-WYQ277F2.js";
-import "./chunk-C3NF7V5Y.js";
+import "./chunk-ZQW7LF4Y.js";
+import "./chunk-HHFWK2HH.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import "./chunk-NSLXEDIS.js";

package/dist/filter-bar.js

@@ -5,8 +5,8 @@ import {
   filterBar,
   readFilterParams,
   writeFilterParams
-} from "./chunk-WYQ277F2.js";
-import "./chunk-C3NF7V5Y.js";
+} from "./chunk-ZQW7LF4Y.js";
+import "./chunk-HHFWK2HH.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import "./chunk-NSLXEDIS.js";

package/dist/genui.js

@@ -7,13 +7,13 @@ import {
 } from "./chunk-YKOLME7R.js";
 import {
   DataTable
-} from "./chunk-S5LP7KKW.js";
+} from "./chunk-YHKTYFOQ.js";
 import "./chunk-YGIN2YIY.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-WYQ277F2.js";
-import "./chunk-C3NF7V5Y.js";
+import "./chunk-ZQW7LF4Y.js";
+import "./chunk-HHFWK2HH.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import {

package/dist/nav-bar.js

@@ -1,13 +1,13 @@
 "use client";
+import {
+  LanguageSwitch
+} from "./chunk-VPO27AFS.js";
 import {
   FamilyMark,
   GitHubGlyph,
   familyLabels,
   sitesByGroup
 } from "./chunk-P4TTKYC4.js";
-import {
-  LanguageSwitch
-} from "./chunk-VPO27AFS.js";
 import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";

package/dist/radio-group.d.ts

@@ -80,9 +80,13 @@ type RadioGroupRootProps = React.ComponentProps<typeof RadioGroup$1.Root> & {
      * @default "list"
      */
     variant?: "list" | "cards" | "buttons" | "segmented";
+    /** Binds the choice to this search parameter of the URL (`?kind=…`): the URL is the state — for a view's selection (a segmented switch), not a form field. */
+    routeKey?: string;
+    /** The values the parameter may hold (the radios' `value`s); the first is the default unless `defaultValue` says otherwise. */
+    routeValues?: readonly string[];
 };
 /** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */
-declare function RadioGroupRoot({ label, invalid, variant, className, ...props }: RadioGroupRootProps): React.JSX.Element;
+declare function RadioGroupRoot({ label, invalid, variant, className, routeKey, routeValues, ...rest }: RadioGroupRootProps): React.JSX.Element;
 type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroup$1.Item>, "children"> & {
     /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */
     children?: React.ReactNode;

package/dist/radio-group.js

@@ -5,6 +5,9 @@ import {
 import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";
+import {
+  useRouteBinding
+} from "./chunk-R3LTSMS5.js";
 import {
   tv
 } from "./chunk-HJFRHYCI.js";
@@ -39,7 +42,8 @@ var radioGroup = tv({
   defaultVariants: { variant: "list" }
 });
 var s = radioGroup();
-function RadioGroupRoot({ label, invalid, variant = "list", className, ...props }) {
+function RadioGroupRoot({ label, invalid, variant = "list", className, routeKey, routeValues, ...rest }) {
+  const props = useRouteBinding(routeKey, routeValues, rest);
   const { ref } = useSlidingIndicator({ item: "[role=radio]", active: "[role=radio][data-state=checked]" });
   const segmented = variant === "segmented";
   return /* @__PURE__ */ jsx(

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/radio-group/radio-group.tsx"],"sourcesContent":["// Client (a context). Radix RadioGroup: role=\"radiogroup\" / \"radio\", one tab stop, the arrows move and select, a\n// hidden input inside a form. Four looks, one behaviour:\n// - `RadioGroup.Item`: a dot and its words (a settings list);\n// - `RadioGroup.Card`: a whole card is the radio — an amount, a pack, a plan — its check lit when chosen;\n// - `RadioGroup.Button`: a tactile key that presses in — raised on a ledge, sunk when chosen (a size, a tip, a level);\n// - `RadioGroup.Segment` in `<RadioGroup.Root variant=\"segmented\">`: a segmented control, one light gliding to the choice.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { CheckGlyph } from \"../glyphs\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { tv } from \"../tv\";\n\nexport const radioGroup = tv({\n  slots: {\n    root: \"grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap\",\n    item:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 inset-shadow-well transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger\",\n    dot: \"h-2 w-2 rounded-full bg-on-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n    card:\n      \"group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge \" +\n      \"transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow\",\n    // The card's check: an empty ring at rest, the accent filled with its check once chosen.\n    cardCheck:\n      \"absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent\",\n    // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.\n    button:\n      \"relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 \" +\n      \"text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] \" +\n      \"transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none \" +\n      \"hover:border-border-strong \" +\n      \"active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade \" +\n      \"data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]\",\n    buttonHint: \"text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent\",\n    segmented:\n      \"relative isolate inline-grid auto-cols-fr grid-flow-col gap-1 rounded-xl border border-border-default bg-surface-2 p-1 inset-shadow-well \" +\n      \"before:pointer-events-none before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) \" +\n      \"before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:border before:border-border-default before:bg-surface-0 before:bg-sheen \" +\n      \"before:opacity-0 before:shadow-raised before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    segment:\n      \"inline-flex min-h-9 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 text-sm font-semibold text-fg-secondary transition-colors \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border data-[state=checked]:border-border-default data-[state=checked]:bg-surface-0 data-[state=checked]:text-fg data-[state=checked]:shadow-raised \" +\n      \"group-data-[indicator=on]/seg:data-[state=checked]:border-transparent group-data-[indicator=on]/seg:data-[state=checked]:bg-transparent group-data-[indicator=on]/seg:data-[state=checked]:shadow-none\",\n  },\n  variants: {\n    variant: {\n      list: {},\n      cards: { root: \"grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3\" },\n      buttons: { root: \"flex flex-wrap gap-2.5 pb-1\" },\n      segmented: {},\n    },\n  },\n  defaultVariants: { variant: \"list\" },\n});\nconst s = radioGroup();\n\nexport type RadioGroupRootProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */\n  label?: string;\n  /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */\n  invalid?: boolean;\n  /**\n   * The layout of the radios: `list` (dots), `cards` (a grid of `Card`s), `buttons` (a row of tactile `Button`s), or\n   * `segmented` (a track of `Segment`s, one light gliding to the choice).\n   * @default \"list\"\n   */\n  variant?: \"list\" | \"cards\" | \"buttons\" | \"segmented\";\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, ...props }: RadioGroupRootProps) {\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=radio]\", active: \"[role=radio][data-state=checked]\" });\n  const segmented = variant === \"segmented\";\n  return (\n    <RadioGroupPrimitive.Root\n      ref={segmented ? ref : undefined}\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-variant={variant}\n      orientation={segmented ? \"horizontal\" : props.orientation}\n      className={segmented ? s.segmented({ className: [\"group/seg\", className].filter(Boolean).join(\" \") }) : radioGroup({ variant }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A radio: a dot, and its words when given. */\nexport function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps) {\n  const item = (\n    <RadioGroupPrimitive.Item className={s.item({ className: children ? \"mt-0.5\" : className })} {...props}>\n      <RadioGroupPrimitive.Indicator className={s.dot()} />\n    </RadioGroupPrimitive.Item>\n  );\n  if (!children) return item;\n  return (\n    <label className={s.label({ className })}>\n      {item}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n\n/** A whole card as the radio: its content is the radio's name; its check lights up when chosen. */\nexport function RadioGroupCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item className={s.card({ className })} {...props}>\n      {children}\n      <span aria-hidden className={s.cardCheck()}>\n        <RadioGroupPrimitive.Indicator forceMount className=\"inline-flex data-[state=unchecked]:hidden\">\n          <CheckGlyph className=\"h-3 w-3\" />\n        </RadioGroupPrimitive.Indicator>\n      </span>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport type RadioGroupButtonProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  /** A second line under the words (\"+15 %\"), part of the radio's name. */\n  hint?: React.ReactNode;\n};\n\n/** A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level. */\nexport function RadioGroupButton({ className, children, hint, ...props }: RadioGroupButtonProps) {\n  return (\n    <RadioGroupPrimitive.Item className={s.button({ className: [\"group\", className].filter(Boolean).join(\" \") })} {...props}>\n      <span>{children}</span>\n      {hint ? <span className={s.buttonHint()}>{hint}</span> : null}\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A segment of a `variant=\"segmented\"` group: equal widths, one light gliding to the choice. */\nexport function RadioGroupSegment({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.segment({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card/Button/Segment`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/radio-group/radio-group.tsx"],"sourcesContent":["// Client (a context). Radix RadioGroup: role=\"radiogroup\" / \"radio\", one tab stop, the arrows move and select, a\n// hidden input inside a form. Four looks, one behaviour:\n// - `RadioGroup.Item`: a dot and its words (a settings list);\n// - `RadioGroup.Card`: a whole card is the radio — an amount, a pack, a plan — its check lit when chosen;\n// - `RadioGroup.Button`: a tactile key that presses in — raised on a ledge, sunk when chosen (a size, a tip, a level);\n// - `RadioGroup.Segment` in `<RadioGroup.Root variant=\"segmented\">`: a segmented control, one light gliding to the choice.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { CheckGlyph } from \"../glyphs\";\nimport { useRouteBinding } from \"../router\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { tv } from \"../tv\";\n\nexport const radioGroup = tv({\n  slots: {\n    root: \"grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap\",\n    item:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 inset-shadow-well transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger\",\n    dot: \"h-2 w-2 rounded-full bg-on-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n    card:\n      \"group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge \" +\n      \"transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow\",\n    // The card's check: an empty ring at rest, the accent filled with its check once chosen.\n    cardCheck:\n      \"absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent\",\n    // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.\n    button:\n      \"relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 \" +\n      \"text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] \" +\n      \"transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none \" +\n      \"hover:border-border-strong \" +\n      \"active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade \" +\n      \"data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]\",\n    buttonHint: \"text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent\",\n    segmented:\n      \"relative isolate inline-grid auto-cols-fr grid-flow-col gap-1 rounded-xl border border-border-default bg-surface-2 p-1 inset-shadow-well \" +\n      \"before:pointer-events-none before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) \" +\n      \"before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:border before:border-border-default before:bg-surface-0 before:bg-sheen \" +\n      \"before:opacity-0 before:shadow-raised before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    segment:\n      \"inline-flex min-h-9 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 text-sm font-semibold text-fg-secondary transition-colors \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border data-[state=checked]:border-border-default data-[state=checked]:bg-surface-0 data-[state=checked]:text-fg data-[state=checked]:shadow-raised \" +\n      \"group-data-[indicator=on]/seg:data-[state=checked]:border-transparent group-data-[indicator=on]/seg:data-[state=checked]:bg-transparent group-data-[indicator=on]/seg:data-[state=checked]:shadow-none\",\n  },\n  variants: {\n    variant: {\n      list: {},\n      cards: { root: \"grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3\" },\n      buttons: { root: \"flex flex-wrap gap-2.5 pb-1\" },\n      segmented: {},\n    },\n  },\n  defaultVariants: { variant: \"list\" },\n});\nconst s = radioGroup();\n\nexport type RadioGroupRootProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */\n  label?: string;\n  /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */\n  invalid?: boolean;\n  /**\n   * The layout of the radios: `list` (dots), `cards` (a grid of `Card`s), `buttons` (a row of tactile `Button`s), or\n   * `segmented` (a track of `Segment`s, one light gliding to the choice).\n   * @default \"list\"\n   */\n  variant?: \"list\" | \"cards\" | \"buttons\" | \"segmented\";\n  /** Binds the choice to this search parameter of the URL (`?kind=…`): the URL is the state — for a view's selection (a segmented switch), not a form field. */\n  routeKey?: string;\n  /** The values the parameter may hold (the radios' `value`s); the first is the default unless `defaultValue` says otherwise. */\n  routeValues?: readonly string[];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, routeKey, routeValues, ...rest }: RadioGroupRootProps) {\n  const props = useRouteBinding(routeKey, routeValues, rest);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=radio]\", active: \"[role=radio][data-state=checked]\" });\n  const segmented = variant === \"segmented\";\n  return (\n    <RadioGroupPrimitive.Root\n      ref={segmented ? ref : undefined}\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-variant={variant}\n      orientation={segmented ? \"horizontal\" : props.orientation}\n      className={segmented ? s.segmented({ className: [\"group/seg\", className].filter(Boolean).join(\" \") }) : radioGroup({ variant }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A radio: a dot, and its words when given. */\nexport function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps) {\n  const item = (\n    <RadioGroupPrimitive.Item className={s.item({ className: children ? \"mt-0.5\" : className })} {...props}>\n      <RadioGroupPrimitive.Indicator className={s.dot()} />\n    </RadioGroupPrimitive.Item>\n  );\n  if (!children) return item;\n  return (\n    <label className={s.label({ className })}>\n      {item}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n\n/** A whole card as the radio: its content is the radio's name; its check lights up when chosen. */\nexport function RadioGroupCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item className={s.card({ className })} {...props}>\n      {children}\n      <span aria-hidden className={s.cardCheck()}>\n        <RadioGroupPrimitive.Indicator forceMount className=\"inline-flex data-[state=unchecked]:hidden\">\n          <CheckGlyph className=\"h-3 w-3\" />\n        </RadioGroupPrimitive.Indicator>\n      </span>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport type RadioGroupButtonProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  /** A second line under the words (\"+15 %\"), part of the radio's name. */\n  hint?: React.ReactNode;\n};\n\n/** A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level. */\nexport function RadioGroupButton({ className, children, hint, ...props }: RadioGroupButtonProps) {\n  return (\n    <RadioGroupPrimitive.Item className={s.button({ className: [\"group\", className].filter(Boolean).join(\" \") })} {...props}>\n      <span>{children}</span>\n      {hint ? <span className={s.buttonHint()}>{hint}</span> : null}\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A segment of a `variant=\"segmented\"` group: equal widths, one light gliding to the choice. */\nexport function RadioGroupSegment({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.segment({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card/Button/Segment`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };\n"],"mappings":";;;;;;;;;;;;;;;;AAMA,SAAS,cAAc,2BAA2B;AAmF9C,cA2BA,YA3BA;AA3EG,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAGF,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MACE;AAAA;AAAA,IAKF,WACE;AAAA;AAAA,IAGF,QACE;AAAA,IAQF,YAAY;AAAA,IACZ,WACE;AAAA,IAIF,SACE;AAAA,EAIJ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM,CAAC;AAAA,MACP,OAAO,EAAE,MAAM,uDAAuD;AAAA,MACtE,SAAS,EAAE,MAAM,8BAA8B;AAAA,MAC/C,WAAW,CAAC;AAAA,IACd;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,OAAO;AACrC,CAAC;AACD,IAAM,IAAI,WAAW;AAoBd,SAAS,eAAe,EAAE,OAAO,SAAS,UAAU,QAAQ,WAAW,UAAU,aAAa,GAAG,KAAK,GAAwB;AACnI,QAAM,QAAQ,gBAAgB,UAAU,aAAa,IAAI;AACzD,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,gBAAgB,QAAQ,mCAAmC,CAAC;AACxH,QAAM,YAAY,YAAY;AAC9B,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,KAAK,YAAY,MAAM;AAAA,MACvB,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,gBAAc;AAAA,MACd,aAAa,YAAY,eAAe,MAAM;AAAA,MAC9C,WAAW,YAAY,EAAE,UAAU,EAAE,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC,IAAI,WAAW,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MACjJ,GAAG;AAAA;AAAA,EACN;AAEJ;AAQO,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,MAAM,GAAwB;AACrF,QAAM,OACJ,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC,GAAI,GAAG,OAC/F,8BAAC,oBAAoB,WAApB,EAA8B,WAAW,EAAE,IAAI,GAAG,GACrD;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;AAGO,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,MAAM,GAA0D;AACvH,SACE,qBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC7D;AAAA;AAAA,IACD,oBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,UAAU,GACvC,8BAAC,oBAAoB,WAApB,EAA8B,YAAU,MAAC,WAAU,6CAClD,8BAAC,cAAW,WAAU,WAAU,GAClC,GACF;AAAA,KACF;AAEJ;AAQO,SAAS,iBAAiB,EAAE,WAAW,UAAU,MAAM,GAAG,MAAM,GAA0B;AAC/F,SACE,qBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,OAAO,EAAE,WAAW,CAAC,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC,GAAI,GAAG,OAChH;AAAA,wBAAC,UAAM,UAAS;AAAA,IACf,OAAO,oBAAC,UAAK,WAAW,EAAE,WAAW,GAAI,gBAAK,IAAU;AAAA,KAC3D;AAEJ;AAGO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA0D;AAChH,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACnF;AAGO,IAAM,aAAa,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,kBAAkB,SAAS,kBAAkB;","names":[]}

package/dist/router.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+/** How a router moves and reads the address: the browser's by default, your framework's through `RouteStateProvider`. */
+interface RouteAdapter {
+    /** The current query string, with or without `?` (`""` on the server). */
+    search: () => string;
+    /** Go to `search` (`?type=bail`, or `""`), keeping the path and the hash; `replace` keeps the history as it is. */
+    navigate: (search: string, options: {
+        replace: boolean;
+    }) => void;
+    /** Calls `onChange` when the address changes under you (back, forward, another navigation); returns the unsubscribe. */
+    subscribe: (onChange: () => void) => () => void;
+}
+/** The History API: any web app (Vite, a static site). Next.js apps pass their router's adapter once, in the layout. */
+declare const browserAdapter: RouteAdapter;
+interface RouteStateProviderProps {
+    /** How your router reads the query string, navigates and tells about changes. */
+    adapter: RouteAdapter;
+    children: React.ReactNode;
+}
+/** Gives `useRouteState` your router: `<RouteStateProvider adapter={nextAdapter}>` once, in the root layout. */
+declare function RouteStateProvider({ adapter, children }: RouteStateProviderProps): React.JSX.Element;
+interface RouteStateOptions<V extends string> {
+    /** The values the parameter may hold, as a const list: anything else in the address reads as the default. Omit for free text. */
+    values?: readonly V[];
+    /** The value when the parameter is absent. It is never written to the address (a clean URL). */
+    default: V;
+    /** `push` (the default) keeps each change in the history, `replace` overwrites it: use `replace` for a filter typed or toggled in passing. */
+    history?: "push" | "replace";
+}
+/** The value a query string holds for `key`, checked against `values`. Pure: the hook and the tests share it. */
+declare function readRouteValue<V extends string>(search: string, key: string, { values, default: fallback }: Pick<RouteStateOptions<V>, "values" | "default">): V;
+/** The query string with `key` set to `value` (removed when it is the default); every other parameter is kept. Pure. */
+declare function writeRouteValue(search: string, key: string, value: string, fallback: string): string;
+/**
+ * A value kept in the URL's search parameter `key`: `const [type, setType] = useRouteState("type", { values: TYPES, default: "auto" })`
+ * with `const TYPES = ["auto", "lease", "contract", "invoice", "other"] as const`. The value is typed from the list, an
+ * unknown one in the address reads as the default, the default is not written, other parameters are kept.
+ * `key` undefined makes the hook inert (it returns the default) so a component can call it unconditionally.
+ */
+declare function useRouteState<V extends string>(key: string | undefined, { values, default: fallback, history }: RouteStateOptions<V>): readonly [V, (next: V) => void];
+/** What a selection component spreads on its root: `value` and `onValueChange` bound to the URL when `routeKey` is set. */
+interface RouteBindable {
+    value?: string | null;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/** The props of a selection component bound to the URL (`routeKey`), or its own, unchanged, when there is no `routeKey`. */
+declare function useRouteBinding<P extends RouteBindable>(routeKey: string | undefined, routeValues: readonly string[] | undefined, props: P): P;
+
+export { type RouteAdapter, type RouteBindable, type RouteStateOptions, RouteStateProvider, type RouteStateProviderProps, browserAdapter, readRouteValue, useRouteBinding, useRouteState, writeRouteValue };

package/dist/router.js

@@ -0,0 +1,18 @@
+"use client";
+import {
+  RouteStateProvider,
+  browserAdapter,
+  readRouteValue,
+  useRouteBinding,
+  useRouteState,
+  writeRouteValue
+} from "./chunk-R3LTSMS5.js";
+export {
+  RouteStateProvider,
+  browserAdapter,
+  readRouteValue,
+  useRouteBinding,
+  useRouteState,
+  writeRouteValue
+};
+//# sourceMappingURL=router.js.map

package/dist/router.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tabs.d.ts

@@ -68,19 +68,58 @@ type TabsVariants = VariantProps<typeof tabs>;
 type TabsRootProps = React.ComponentProps<typeof Tabs$1.Root> & {
     /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */
     variant?: TabsVariants["variant"];
+    /** Binds the active tab to this search parameter of the URL (`?tab=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */
+    routeKey?: string;
+    /** The values the parameter may hold (the tabs' `value`s); the first is the default unless `defaultValue` says otherwise. */
+    routeValues?: readonly string[];
 };
 /** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */
-declare function TabsRoot({ variant, className, ...props }: TabsRootProps): React.JSX.Element;
+declare function TabsRoot({ variant, className, routeKey, routeValues, ...rest }: TabsRootProps): React.JSX.Element;
 /** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */
 declare function TabsList({ className, ...props }: React.ComponentProps<typeof Tabs$1.List>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;
-/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */
+/**
+ * Is the link `href` the tab of the route `current` (a path, with its search: `/docs/api?tab=x`)? The path must equal the
+ * link's (a trailing slash, a locale-free comparison and the hash do not count); with `exact` false (the default) a deeper
+ * path of the same section counts too (`/docs/api/x` is in `/docs/api`); every search parameter of the link must be in
+ * `current`. The hub link (`/`) is only ever active on `/` itself.
+ */
+declare function isTabActive(current: string, href: string, exact?: boolean): boolean;
+type TabsNavProps = Omit<React.ComponentProps<"nav">, "children"> & {
+    /** The navigation's accessible name (« Sections »). */
+    label: string;
+    /** The current route, passed in: the path with its search (`usePathname()` + `useSearchParams()`, `/docs?tab=api`). The active tab comes from it; no local state. */
+    current: string;
+    /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */
+    variant?: TabsVariants["variant"];
+    /** The tabs: `Tabs.NavLink`. */
+    children: React.ReactNode;
+};
+/**
+ * Tabs as routes: a `nav` of links, the URL is the state. Per WAI-ARIA these are links, not a tablist: each tab is an
+ * anchor, the active one carries `aria-current="page"`, the keyboard is the page's own (Tab walks the links, Enter
+ * follows one) and there is no panel — the page is the panel. The same looks and the same gliding light as `Tabs.List`.
+ */
+declare function TabsNav({ label, current, variant, className, children, ...props }: TabsNavProps): React.JSX.Element;
+type TabsNavLinkProps = React.ComponentProps<"a"> & {
+    /** Where the tab goes (`/docs/api`, `/docs?tab=api`). */
+    href: string;
+    /** Match this path only, not the pages below it. */
+    exact?: boolean;
+    /** Renders your router's `<Link>` (pass it as the only child; the `href` goes on this part and on the link). */
+    asChild?: boolean;
+};
+/** One tab of `Tabs.Nav`: an anchor that is active when the current route is its `href`. */
+declare function TabsNavLink({ href, exact, asChild, className, children, ...props }: TabsNavLinkProps): React.JSX.Element;
+/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. `Tabs.Nav` + `Tabs.NavLink`: the same tabs as routes. */
 declare const Tabs: {
     Root: typeof TabsRoot;
     List: typeof TabsList;
     Trigger: typeof TabsTrigger;
     Content: typeof TabsContent;
+    Nav: typeof TabsNav;
+    NavLink: typeof TabsNavLink;
 };
 
-export { Tabs, TabsContent, TabsList, TabsRoot, type TabsRootProps, TabsTrigger, type TabsVariants, tabs };
+export { Tabs, TabsContent, TabsList, TabsNav, TabsNavLink, type TabsNavLinkProps, type TabsNavProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsVariants, isTabActive, tabs };

package/dist/tabs.js

@@ -2,9 +2,15 @@
 import {
   useSlidingIndicator
 } from "./chunk-4QN5YJ3D.js";
+import {
+  useRouteBinding
+} from "./chunk-R3LTSMS5.js";
+import {
+  cn
+} from "./chunk-NSLXEDIS.js";
 
 // src/tabs/tabs.tsx
-import { Tabs as TabsPrimitive } from "radix-ui";
+import { Slot, Tabs as TabsPrimitive } from "radix-ui";
 import * as React from "react";
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
@@ -39,7 +45,8 @@ var tabs = tv({
   defaultVariants: { variant: "underline" }
 });
 var VariantContext = React.createContext("underline");
-function TabsRoot({ variant = "underline", className, ...props }) {
+function TabsRoot({ variant = "underline", className, routeKey, routeValues, ...rest }) {
+  const props = useRouteBinding(routeKey, routeValues, rest);
   return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { "data-variant": variant, className: tabs({ variant }).root({ className }), ...props }) });
 }
 function TabsList({ className, ...props }) {
@@ -54,13 +61,54 @@ function TabsTrigger({ className, ...props }) {
 function TabsContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(TabsPrimitive.Content, { className: tabs().content({ className }), ...props });
 }
-var Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };
+function isTabActive(current, href, exact = false) {
+  const split = (value) => {
+    const url = new URL(value.split("#")[0], "https://tabs.invalid");
+    return { path: url.pathname.replace(/\/+$/, "") || "/", search: url.searchParams };
+  };
+  const here = split(current);
+  const target = split(href);
+  const samePath = here.path === target.path;
+  const deeper = !exact && target.path !== "/" && here.path.startsWith(`${target.path}/`);
+  if (!samePath && !deeper) return false;
+  for (const [key, value] of target.search) if (here.search.get(key) !== value) return false;
+  return true;
+}
+var NavContext = React.createContext(null);
+function TabsNav({ label, current, variant = "underline", className, children, ...props }) {
+  const { ref } = useSlidingIndicator({ item: "[data-tabs-link]", active: "[data-tabs-link][data-state=active]" });
+  const value = React.useMemo(() => ({ current, variant }), [current, variant]);
+  return /* @__PURE__ */ jsx(NavContext.Provider, { value, children: /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, "data-variant": variant, "data-orientation": "horizontal", className: tabs({ variant }).list({ className }), ...props, children }) });
+}
+function TabsNavLink({ href, exact, asChild, className, children, ...props }) {
+  const ctx = React.useContext(NavContext);
+  if (!ctx) throw new Error("Tabs.NavLink must be inside <Tabs.Nav>");
+  const active = isTabActive(ctx.current, href, exact);
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-tabs-link": "",
+      "data-state": active ? "active" : "inactive",
+      "data-orientation": "horizontal",
+      "aria-current": active ? "page" : void 0,
+      ...asChild ? {} : { href },
+      className: cn(tabs({ variant: ctx.variant }).trigger(), "no-underline", className),
+      ...props,
+      children
+    }
+  );
+}
+var Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent, Nav: TabsNav, NavLink: TabsNavLink };
 export {
   Tabs,
   TabsContent,
   TabsList,
+  TabsNav,
+  TabsNavLink,
   TabsRoot,
   TabsTrigger,
+  isTabActive,
   tabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-tabs-panel min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-sm before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-sm after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-sm before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-sm border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AA2EhC;AAvEC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA,IAGN,MACE;AAAA,IAGF,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MACE;AAAA,QAKF,SACE;AAAA,MAKJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MACE;AAAA,QAEF,SACE;AAAA,MAGJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MACE;AAAA,QAGF,SACE;AAAA,MAGJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAQxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,QAAM,EAAE,IAAI,IAAI,oBAAoC,EAAE,MAAM,cAAc,QAAQ,gCAAgC,CAAC;AACnH,SAAO,oBAAC,cAAc,MAAd,EAAmB,KAAU,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3H;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Slot, Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { useRouteBinding } from \"../router\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-tabs-panel min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=inactive]:hidden\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-sm before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-sm after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-sm before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-sm border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n  /** Binds the active tab to this search parameter of the URL (`?tab=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */\n  routeKey?: string;\n  /** The values the parameter may hold (the tabs' `value`s); the first is the default unless `defaultValue` says otherwise. */\n  routeValues?: readonly string[];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, routeKey, routeValues, ...rest }: TabsRootProps) {\n  const props = useRouteBinding(routeKey, routeValues, rest);\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n// ── Route mode: tabs that are links; the URL is the state (Oussama, 2026-10-22) ──────────────────────────────────────\n\n/**\n * Is the link `href` the tab of the route `current` (a path, with its search: `/docs/api?tab=x`)? The path must equal the\n * link's (a trailing slash, a locale-free comparison and the hash do not count); with `exact` false (the default) a deeper\n * path of the same section counts too (`/docs/api/x` is in `/docs/api`); every search parameter of the link must be in\n * `current`. The hub link (`/`) is only ever active on `/` itself.\n */\nexport function isTabActive(current: string, href: string, exact = false): boolean {\n  const split = (value: string) => {\n    const url = new URL(value.split(\"#\")[0]!, \"https://tabs.invalid\");\n    return { path: url.pathname.replace(/\\/+$/, \"\") || \"/\", search: url.searchParams };\n  };\n  const here = split(current);\n  const target = split(href);\n  const samePath = here.path === target.path;\n  const deeper = !exact && target.path !== \"/\" && here.path.startsWith(`${target.path}/`);\n  if (!samePath && !deeper) return false;\n  for (const [key, value] of target.search) if (here.search.get(key) !== value) return false;\n  return true;\n}\n\ninterface NavState {\n  current: string;\n  variant: Variant;\n}\nconst NavContext = React.createContext<NavState | null>(null);\n\nexport type TabsNavProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (« Sections »). */\n  label: string;\n  /** The current route, passed in: the path with its search (`usePathname()` + `useSearchParams()`, `/docs?tab=api`). The active tab comes from it; no local state. */\n  current: string;\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n  /** The tabs: `Tabs.NavLink`. */\n  children: React.ReactNode;\n};\n\n/**\n * Tabs as routes: a `nav` of links, the URL is the state. Per WAI-ARIA these are links, not a tablist: each tab is an\n * anchor, the active one carries `aria-current=\"page\"`, the keyboard is the page's own (Tab walks the links, Enter\n * follows one) and there is no panel — the page is the panel. The same looks and the same gliding light as `Tabs.List`.\n */\nexport function TabsNav({ label, current, variant = \"underline\", className, children, ...props }: TabsNavProps) {\n  const { ref } = useSlidingIndicator<HTMLElement>({ item: \"[data-tabs-link]\", active: \"[data-tabs-link][data-state=active]\" });\n  const value = React.useMemo(() => ({ current, variant }), [current, variant]);\n  return (\n    <NavContext.Provider value={value}>\n      <nav ref={ref} aria-label={label} data-variant={variant} data-orientation=\"horizontal\" className={tabs({ variant }).list({ className })} {...props}>\n        {children}\n      </nav>\n    </NavContext.Provider>\n  );\n}\n\nexport type TabsNavLinkProps = React.ComponentProps<\"a\"> & {\n  /** Where the tab goes (`/docs/api`, `/docs?tab=api`). */\n  href: string;\n  /** Match this path only, not the pages below it. */\n  exact?: boolean;\n  /** Renders your router's `<Link>` (pass it as the only child; the `href` goes on this part and on the link). */\n  asChild?: boolean;\n};\n\n/** One tab of `Tabs.Nav`: an anchor that is active when the current route is its `href`. */\nexport function TabsNavLink({ href, exact, asChild, className, children, ...props }: TabsNavLinkProps) {\n  const ctx = React.useContext(NavContext);\n  if (!ctx) throw new Error(\"Tabs.NavLink must be inside <Tabs.Nav>\");\n  const active = isTabActive(ctx.current, href, exact);\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      data-tabs-link=\"\"\n      data-state={active ? \"active\" : \"inactive\"}\n      data-orientation=\"horizontal\"\n      aria-current={active ? \"page\" : undefined}\n      {...(asChild ? {} : { href })}\n      className={cn(tabs({ variant: ctx.variant }).trigger(), \"no-underline\", className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. `Tabs.Nav` + `Tabs.NavLink`: the same tabs as routes. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent, Nav: TabsNav, NavLink: TabsNavLink };\n"],"mappings":"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","names":[]}

package/dist/tag-input.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Combobox
-} from "./chunk-AAP3U66V.js";
-import "./chunk-C3NF7V5Y.js";
+} from "./chunk-KBQD6HE3.js";
+import "./chunk-HHFWK2HH.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-ZIXB33X7.js";
 import {

package/dist/tag-selector.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Chip
-} from "./chunk-C3NF7V5Y.js";
+} from "./chunk-HHFWK2HH.js";
 import "./chunk-D3T54RSL.js";
 
 // src/tag-selector/tag-selector.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.43.0",
+  "version": "3.44.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -157,6 +157,10 @@
       "types": "./dist/tabs.d.ts",
       "import": "./dist/tabs.js"
     },
+    "./router": {
+      "types": "./dist/router.d.ts",
+      "import": "./dist/router.js"
+    },
     "./chip": {
       "types": "./dist/chip.d.ts",
       "import": "./dist/chip.js"
@@ -749,7 +753,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.2.1",
-    "@krizaka/tailwind": ">=3.43.0",
+    "@krizaka/tailwind": ">=3.44.0",
     "@maplibre/maplibre-react-native": ">=11",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
@@ -809,7 +813,7 @@
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
     "zod": "^4.6.5",
-    "@krizaka/config": "0.5.0",
+    "@krizaka/config": "0.6.0",
     "@krizaka/query": "0.2.1"
   },
   "engines": {
@@ -1137,10 +1141,17 @@
         "clsx"
       ]
     },
+    {
+      "name": "./router",
+      "path": "dist/router.js",
+      "limit": "1.2 kB",
+      "gzip": true,
+      "rolldown": false
+    },
     {
       "name": "./tabs",
       "path": "dist/tabs.js",
-      "limit": "10.1 kB",
+      "limit": "11.2 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",
@@ -2142,7 +2153,7 @@
     {
       "name": "./choice-grid",
       "path": "dist/choice-grid.js",
-      "limit": "1.6 kB",
+      "limit": "2.2 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",
@@ -2563,8 +2574,8 @@
     "sonner": "^2.0.8",
     "tailwind-variants": "^3.3.1",
     "@krizaka/intl": "^0.2.1",
-    "@krizaka/tokens": "^3.43.0",
-    "@krizaka/pacer": "^0.1.0"
+    "@krizaka/pacer": "^0.1.0",
+    "@krizaka/tokens": "^3.44.0"
   },
   "scripts": {
     "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",