@krizaka/ui 3.2.0 → 3.3.0

package/dist/nav-bar.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-VDR2EP6K.js";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/nav-bar/nav-bar.tsx
 import { NavigationMenu as Nav, Slot } from "radix-ui";

package/dist/popover.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";

package/dist/radio-group.d.ts

@@ -3,75 +3,109 @@ import { RadioGroup as RadioGroup$1 } from 'radix-ui';
 import * as React from 'react';
 
 declare const radioGroup: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            dot?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            card?: tailwind_variants.ClassValue;
+    variant: {
+        list: {};
+        cards: {
+            root: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            dot?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            card?: tailwind_variants.ClassValue;
+        buttons: {
+            root: string;
         };
+        segmented: {};
     };
-} | {}, {
+}, {
     root: string;
     item: string;
     dot: string;
     label: string;
     card: string;
+    cardCheck: string;
+    button: string;
+    buttonHint: string;
+    segmented: string;
+    segment: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            dot?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            card?: tailwind_variants.ClassValue;
+    variant: {
+        list: {};
+        cards: {
+            root: string;
+        };
+        buttons: {
+            root: string;
         };
+        segmented: {};
     };
-} | {}, {
+}, {
     root: string;
     item: string;
     dot: string;
     label: string;
     card: string;
-}, tailwind_variants.TVReturnTypeLike<unknown, {
+    cardCheck: string;
+    button: string;
+    buttonHint: string;
+    segmented: string;
+    segment: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    variant: {
+        list: {};
+        cards: {
+            root: string;
+        };
+        buttons: {
+            root: string;
+        };
+        segmented: {};
+    };
+}, {
     root: string;
     item: string;
     dot: string;
     label: string;
     card: string;
+    cardCheck: string;
+    button: string;
+    buttonHint: string;
+    segmented: string;
+    segment: string;
 }>>;
 type RadioGroupRootProps = React.ComponentProps<typeof RadioGroup$1.Root> & {
     /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */
     label?: string;
     /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */
     invalid?: boolean;
+    /**
+     * The layout of the radios: `list` (dots), `cards` (a grid of `Card`s), `buttons` (a row of tactile `Button`s), or
+     * `segmented` (a track of `Segment`s, one light gliding to the choice).
+     * @default "list"
+     */
+    variant?: "list" | "cards" | "buttons" | "segmented";
 };
-/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form. */
-declare function RadioGroupRoot({ label, invalid, className, ...props }: RadioGroupRootProps): React.JSX.Element;
+/** `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;
 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;
 };
 /** A radio: a dot, and its words when given. */
 declare function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps): React.JSX.Element;
-/** A whole card as the radio: its content is the radio's name. `data-state="checked"` styles the chosen one. */
-declare function RadioGroupCard({ className, ...props }: React.ComponentProps<typeof RadioGroup$1.Item>): React.JSX.Element;
-/** `RadioGroup.Root/Item/Card`. */
+/** A whole card as the radio: its content is the radio's name; its check lights up when chosen. */
+declare function RadioGroupCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroup$1.Item>): React.JSX.Element;
+type RadioGroupButtonProps = React.ComponentProps<typeof RadioGroup$1.Item> & {
+    /** A second line under the words ("+15 %"), part of the radio's name. */
+    hint?: React.ReactNode;
+};
+/** A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level. */
+declare function RadioGroupButton({ className, children, hint, ...props }: RadioGroupButtonProps): React.JSX.Element;
+/** A segment of a `variant="segmented"` group: equal widths, one light gliding to the choice. */
+declare function RadioGroupSegment({ className, ...props }: React.ComponentProps<typeof RadioGroup$1.Item>): React.JSX.Element;
+/** `RadioGroup.Root/Item/Card/Button/Segment`. */
 declare const RadioGroup: {
     Root: typeof RadioGroupRoot;
     Item: typeof RadioGroupItem;
     Card: typeof RadioGroupCard;
+    Button: typeof RadioGroupButton;
+    Segment: typeof RadioGroupSegment;
 };
 
-export { RadioGroup, RadioGroupCard, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, radioGroup };
+export { RadioGroup, RadioGroupButton, type RadioGroupButtonProps, RadioGroupCard, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, RadioGroupSegment, radioGroup };

package/dist/radio-group.js

@@ -1,27 +1,57 @@
 "use client";
+import {
+  CheckGlyph
+} from "./chunk-KDXRYUD3.js";
+import {
+  useSlidingIndicator
+} from "./chunk-VDR2EP6K.js";
+import {
+  tv
+} from "./chunk-C2BRIFJG.js";
+import "./chunk-2FRWNSRO.js";
 
 // src/radio-group/radio-group.tsx
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var radioGroup = tv({
   slots: {
     root: "grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap",
-    item: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent aria-invalid:border-danger",
-    dot: "h-2.5 w-2.5 rounded-full bg-accent",
+    item: "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 focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger",
+    dot: "h-2 w-2 rounded-full bg-on-accent",
     label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60",
-    card: "relative flex min-w-0 flex-col items-start gap-1 rounded-xl border border-border-default bg-surface-1 p-3 text-left text-sm text-fg transition-colors hover:border-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-sm"
-  }
+    card: "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 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 focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow",
+    // The card's check: an empty ring at rest, the accent filled with its check once chosen.
+    cardCheck: "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 group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent",
+    // The tactile key: on a ledge (its lower edge), lifted on hover, pressed in while held and once chosen.
+    button: "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 text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none hover:-translate-y-px hover:shadow-[0_5px_0_0_var(--kz-border-strong)] active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:translate-y-0 aria-invalid:border-danger data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade 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)] data-[state=checked]:hover:translate-y-[3px]",
+    buttonHint: "text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent",
+    segmented: "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 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) 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 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",
+    segment: "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 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 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 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"
+  },
+  variants: {
+    variant: {
+      list: {},
+      cards: { root: "grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3" },
+      buttons: { root: "flex flex-wrap gap-2.5 pb-1" },
+      segmented: {}
+    }
+  },
+  defaultVariants: { variant: "list" }
 });
 var s = radioGroup();
-function RadioGroupRoot({ label, invalid, className, ...props }) {
+function RadioGroupRoot({ label, invalid, variant = "list", className, ...props }) {
+  const { ref } = useSlidingIndicator({ item: "[role=radio]", active: "[role=radio][data-state=checked]" });
+  const segmented = variant === "segmented";
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
+      ref: segmented ? ref : void 0,
       "aria-label": label,
       "aria-invalid": invalid || void 0,
       "data-invalid": invalid ? "" : void 0,
-      className: s.root({ className }),
+      "data-variant": variant,
+      orientation: segmented ? "horizontal" : props.orientation,
+      className: segmented ? s.segmented({ className: ["group/seg", className].filter(Boolean).join(" ") }) : radioGroup({ variant }).root({ className }),
       ...props
     }
   );
@@ -34,15 +64,29 @@ function RadioGroupItem({ className, children, ...props }) {
     /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
   ] });
 }
-function RadioGroupCard({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, { className: s.card({ className }), ...props });
+function RadioGroupCard({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(RadioGroupPrimitive.Item, { className: s.card({ className }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.cardCheck(), children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { forceMount: true, className: "inline-flex data-[state=unchecked]:hidden", children: /* @__PURE__ */ jsx(CheckGlyph, { className: "h-3 w-3" }) }) })
+  ] });
+}
+function RadioGroupButton({ className, children, hint, ...props }) {
+  return /* @__PURE__ */ jsxs(RadioGroupPrimitive.Item, { className: s.button({ className: ["group", className].filter(Boolean).join(" ") }), ...props, children: [
+    /* @__PURE__ */ jsx("span", { children }),
+    hint ? /* @__PURE__ */ jsx("span", { className: s.buttonHint(), children: hint }) : null
+  ] });
+}
+function RadioGroupSegment({ className, ...props }) {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, { className: s.segment({ className }), ...props });
 }
-var RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard };
+var RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };
 export {
   RadioGroup,
+  RadioGroupButton,
   RadioGroupCard,
   RadioGroupItem,
   RadioGroupRoot,
+  RadioGroupSegment,
   radioGroup
 };
 //# sourceMappingURL=radio-group.js.map

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. Two looks: `RadioGroup.Item` (a dot and its words) and `RadioGroup.Card` (a whole card\n// is the radio: an amount, a pack, a payment method, a plan).\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\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 transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent aria-invalid:border-danger\",\n    dot: \"h-2.5 w-2.5 rounded-full bg-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60\",\n    card:\n      \"relative flex min-w-0 flex-col items-start gap-1 rounded-xl border border-border-default bg-surface-1 p-3 text-left text-sm text-fg transition-colors \" +\n      \"hover:border-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft \" +\n      \"data-[state=checked]:shadow-sm\",\n  },\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\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form. */\nexport function RadioGroupRoot({ label, invalid, className, ...props }: RadioGroupRootProps) {\n  return (\n    <RadioGroupPrimitive.Root\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.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. `data-state=\"checked\"` styles the chosen one. */\nexport function RadioGroupCard({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.card({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard };\n"],"mappings":";;;AAGA,SAAS,cAAc,2BAA2B;AAElD,SAAS,UAAU;AA8Bf,cAwBA,YAxBA;AA5BG,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAGF,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MACE;AAAA,EAIJ;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAUd,SAAS,eAAe,EAAE,OAAO,SAAS,WAAW,GAAG,MAAM,GAAwB;AAC3F,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC9B,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,GAAG,MAAM,GAA0D;AAC7G,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChF;AAGO,IAAM,aAAa,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,eAAe;","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 { 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-60\",\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), lifted 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:-translate-y-px hover:shadow-[0_5px_0_0_var(--kz-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 disabled:hover:translate-y-0 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      \"data-[state=checked]:hover:translate-y-[3px]\",\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":[]}

package/dist/slider.d.ts

@@ -3,30 +3,25 @@ import { Slider as Slider$1 } from 'radix-ui';
 import * as React from 'react';
 
 declare const slider: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            value?: tailwind_variants.ClassValue;
-            control?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            range?: tailwind_variants.ClassValue;
-            thumb?: tailwind_variants.ClassValue;
+    tone: {
+        /** The brand's signature: accent → accent-2, a glow under it. */
+        gradient: {
+            range: string;
+        };
+        /** The accent alone. */
+        solid: {
+            range: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            value?: tailwind_variants.ClassValue;
-            control?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            range?: tailwind_variants.ClassValue;
-            thumb?: tailwind_variants.ClassValue;
+    size: {
+        md: {};
+        lg: {
+            track: string;
+            thumb: string;
+            control: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     header: string;
     value: string;
@@ -34,19 +29,32 @@ declare const slider: tailwind_variants.TVReturnType<{
     track: string;
     range: string;
     thumb: string;
+    bubble: string;
+    bubbleVertical: string;
+    ticks: string;
+    tick: string;
+    marks: string;
+    mark: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            value?: tailwind_variants.ClassValue;
-            control?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            range?: tailwind_variants.ClassValue;
-            thumb?: tailwind_variants.ClassValue;
+    tone: {
+        /** The brand's signature: accent → accent-2, a glow under it. */
+        gradient: {
+            range: string;
+        };
+        /** The accent alone. */
+        solid: {
+            range: string;
+        };
+    };
+    size: {
+        md: {};
+        lg: {
+            track: string;
+            thumb: string;
+            control: string;
         };
     };
-} | {}, {
+}, {
     root: string;
     header: string;
     value: string;
@@ -54,7 +62,32 @@ declare const slider: tailwind_variants.TVReturnType<{
     track: string;
     range: string;
     thumb: string;
-}, tailwind_variants.TVReturnTypeLike<unknown, {
+    bubble: string;
+    bubbleVertical: string;
+    ticks: string;
+    tick: string;
+    marks: string;
+    mark: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    tone: {
+        /** The brand's signature: accent → accent-2, a glow under it. */
+        gradient: {
+            range: string;
+        };
+        /** The accent alone. */
+        solid: {
+            range: string;
+        };
+    };
+    size: {
+        md: {};
+        lg: {
+            track: string;
+            thumb: string;
+            control: string;
+        };
+    };
+}, {
     root: string;
     header: string;
     value: string;
@@ -62,8 +95,20 @@ declare const slider: tailwind_variants.TVReturnType<{
     track: string;
     range: string;
     thumb: string;
+    bubble: string;
+    bubbleVertical: string;
+    ticks: string;
+    tick: string;
+    marks: string;
+    mark: string;
 }>>;
 type SliderValue = number | [number, number];
+type SliderMark = {
+    /** Where the mark stands. */
+    value: number;
+    /** Its words under the track ("0", "50 %", "Max"), passed translated. */
+    label: string;
+};
 type SliderProps<V extends SliderValue = number> = Omit<React.ComponentProps<typeof Slider$1.Root>, "value" | "defaultValue" | "onValueChange" | "onValueCommit" | "children"> & {
     /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */
     value?: V;
@@ -81,10 +126,26 @@ type SliderProps<V extends SliderValue = number> = Omit<React.ComponentProps<typ
     formatValue?: (value: number) => string;
     /** Shows the label and the value above the track. Without it, `label` only names the thumb. */
     showLabel?: boolean;
-    /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only. */
+    /** Shows the value floating over the thumb while it is hovered, focused or held (`"always"`: at all times). */
+    floatingValue?: boolean | "always";
+    /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One horizontal thumb only. */
     origin?: number;
+    /** Draws a graduation at every step (`true`, up to 40 of them) or at the values given. */
+    ticks?: boolean | readonly number[];
+    /** Words under the track at some values (`[{ value: 0, label: "0" }, { value: 100, label: "100" }]`). Horizontal only. */
+    marks?: readonly SliderMark[];
+    /**
+     * `gradient` (the brand's accent → accent-2, a glow) or `solid` (the accent alone).
+     * @default "gradient"
+     */
+    tone?: "gradient" | "solid";
+    /**
+     * md · lg (a thicker track and thumb: a hero control, a touch screen).
+     * @default "md"
+     */
+    size?: "md" | "lg";
 };
-/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`. */
-declare function Slider<V extends SliderValue = number>({ value, defaultValue, onValueChange, onValueCommit, label, thumbLabels, formatValue, showLabel, origin, min, max, className, ...props }: SliderProps<V>): React.JSX.Element;
+/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`, `orientation`. */
+declare function Slider<V extends SliderValue = number>({ value, defaultValue, onValueChange, onValueCommit, label, thumbLabels, formatValue, showLabel, floatingValue, origin, ticks, marks, tone, size, min, max, step, orientation, className, ...props }: SliderProps<V>): React.JSX.Element;
 
-export { Slider, type SliderProps, type SliderValue, slider };
+export { Slider, type SliderMark, type SliderProps, type SliderValue, slider };

package/dist/slider.js

@@ -1,20 +1,47 @@
 "use client";
+import {
+  tv
+} from "./chunk-C2BRIFJG.js";
+import "./chunk-2FRWNSRO.js";
 
 // src/slider/slider.tsx
 import { Slider as SliderPrimitive } from "radix-ui";
 import * as React from "react";
-import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var slider = tv({
   slots: {
-    root: "flex flex-col gap-2",
+    root: "flex flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:items-center",
     header: "flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary",
     value: "font-mono text-[11px] tabular-nums text-fg-secondary",
-    control: "relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40",
-    track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3",
-    range: "absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2",
-    thumb: "block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing"
-  }
+    control: "relative flex touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40 data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:flex-col",
+    track: "relative grow overflow-hidden rounded-full bg-surface-3 inset-shadow-well data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+    range: "absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+    thumb: "group/thumb relative block h-5 w-5 cursor-grab rounded-full border-2 border-accent bg-fg-on-media shadow-raised transition-[box-shadow,scale] duration-150 hover:scale-110 focus-visible:outline-hidden focus-visible:focus-ring active:scale-110 active:cursor-grabbing motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100",
+    // The value over the thumb: shown while the thumb is hovered, focused or held.
+    bubble: "pointer-events-none absolute bottom-full left-1/2 mb-2.5 -translate-x-1/2 whitespace-nowrap rounded-lg bg-fg px-2 py-1 font-mono text-[11px] font-semibold tabular-nums text-surface-0 opacity-0 shadow-floating transition-opacity duration-150 after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-fg group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100 group-active/thumb:opacity-100 data-[always]:opacity-100 motion-reduce:transition-none",
+    bubbleVertical: "bottom-auto left-full top-1/2 mb-0 ml-3 -translate-x-0 -translate-y-1/2 after:hidden",
+    ticks: "pointer-events-none absolute inset-0",
+    tick: "absolute rounded-full bg-border-strong data-[on]:bg-on-accent/70 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-px data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-1 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2",
+    marks: "relative h-4 w-full text-[11px] font-medium tabular-nums text-fg-secondary",
+    mark: "absolute top-0 -translate-x-1/2 whitespace-nowrap first:translate-x-0 last:-translate-x-full"
+  },
+  variants: {
+    tone: {
+      /** The brand's signature: accent → accent-2, a glow under it. */
+      gradient: { range: "bg-linear-to-r from-accent to-accent-2 shadow-glow data-[orientation=vertical]:bg-linear-to-t" },
+      /** The accent alone. */
+      solid: { range: "bg-accent" }
+    },
+    size: {
+      md: {},
+      lg: {
+        track: "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5",
+        thumb: "h-6 w-6",
+        control: "data-[orientation=horizontal]:h-8 data-[orientation=vertical]:w-8"
+      }
+    }
+  },
+  defaultVariants: { tone: "gradient", size: "md" }
 });
 var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : v;
 function Slider({
@@ -26,21 +53,32 @@ function Slider({
   thumbLabels,
   formatValue = String,
   showLabel,
+  floatingValue,
   origin,
+  ticks,
+  marks,
+  tone,
+  size,
   min = 0,
   max = 100,
+  step = 1,
+  orientation = "horizontal",
   className,
   ...props
 }) {
-  const s = slider();
+  const s = slider({ tone, size });
   const range = Array.isArray(value ?? defaultValue);
+  const vertical = orientation === "vertical";
   const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);
   const current = toArray(value) ?? inner;
   const out = (next) => range ? next : next[0];
   const pct = (v) => (v - min) / (max - min || 1) * 100;
-  const fill = origin !== void 0 && !range ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` } : void 0;
+  const fill = origin !== void 0 && !range && !vertical ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` } : void 0;
+  const lo = range ? Math.min(...current) : origin ?? min;
+  const hi = range ? Math.max(...current) : current[0];
+  const tickValues = ticks === true ? (max - min) / step <= 40 ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step) : [] : ticks ? [...ticks] : [];
   const id = React.useId();
-  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), "data-range": range ? "" : void 0, children: [
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), "data-range": range ? "" : void 0, "data-orientation": orientation, children: [
     showLabel && /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
       /* @__PURE__ */ jsx("span", { id: `${id}-label`, children: label }),
       /* @__PURE__ */ jsx("span", { className: s.value(), "aria-hidden": true, children: current.map(formatValue).join(" \u2013 ") })
@@ -50,6 +88,8 @@ function Slider({
       {
         min,
         max,
+        step,
+        orientation,
         value: current,
         onValueChange: (next) => {
           if (value === void 0) setInner(next);
@@ -59,20 +99,34 @@ function Slider({
         className: s.control(),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: s.track(), children: fill ? /* @__PURE__ */ jsx("span", { "data-origin": "", className: s.range(), style: fill }) : /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: s.range() }) }),
+          /* @__PURE__ */ jsxs(SliderPrimitive.Track, { className: s.track(), children: [
+            fill ? /* @__PURE__ */ jsx("span", { "data-origin": "", "data-orientation": orientation, className: s.range(), style: fill }) : /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: s.range() }),
+            tickValues.length ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.ticks(), children: tickValues.map((t) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-orientation": orientation,
+                "data-on": t > lo && t < hi ? "" : void 0,
+                className: s.tick(),
+                style: vertical ? { bottom: `${pct(t)}%` } : { left: `${pct(t)}%` }
+              },
+              t
+            )) }) : null
+          ] }),
           current.map((v, i) => /* @__PURE__ */ jsx(
             SliderPrimitive.Thumb,
             {
               "aria-label": range ? thumbLabels?.[i] ?? label : showLabel ? void 0 : label,
               "aria-labelledby": !range && showLabel ? `${id}-label` : void 0,
               "aria-valuetext": formatValue(v),
-              className: s.thumb()
+              className: s.thumb(),
+              children: floatingValue ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-always": floatingValue === "always" ? "" : void 0, className: s.bubble({ className: vertical ? s.bubbleVertical() : void 0 }), children: formatValue(v) }) : null
             },
             i
           ))
         ]
       }
-    )
+    ),
+    marks?.length && !vertical ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.marks(), children: marks.map((m) => /* @__PURE__ */ jsx("span", { className: s.mark(), style: { left: `${pct(m.value)}%` }, children: m.label }, m.value)) }) : null
   ] });
 }
 export {