@krizaka/ui 3.2.0 → 3.4.0

package/dist/description-list.d.ts

@@ -0,0 +1,105 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const descriptionList: tailwind_variants.TVReturnType<{
+    layout: {
+        stacked: {
+            root: string;
+            details: string;
+        };
+        inline: {
+            root: string;
+            pair: string;
+            term: string;
+            details: string;
+        };
+        grid: {
+            root: string;
+            pair: string;
+            term: string;
+            details: string;
+        };
+    };
+}, {
+    root: string;
+    pair: string;
+    term: string;
+    details: string;
+    hint: string;
+}, undefined, {
+    layout: {
+        stacked: {
+            root: string;
+            details: string;
+        };
+        inline: {
+            root: string;
+            pair: string;
+            term: string;
+            details: string;
+        };
+        grid: {
+            root: string;
+            pair: string;
+            term: string;
+            details: string;
+        };
+    };
+}, {
+    root: string;
+    pair: string;
+    term: string;
+    details: string;
+    hint: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    layout: {
+        stacked: {
+            root: string;
+            details: string;
+        };
+        inline: {
+            root: string;
+            pair: string;
+            term: string;
+            details: string;
+        };
+        grid: {
+            root: string;
+            pair: string;
+            term: string;
+            details: string;
+        };
+    };
+}, {
+    root: string;
+    pair: string;
+    term: string;
+    details: string;
+    hint: string;
+}>>;
+type DescriptionItem = {
+    /** The term (“Status”, “Credits”) — passed translated. */
+    term: React.ReactNode;
+    /** The value: text, a `Badge`, a link. */
+    details: React.ReactNode;
+    /** A line under the value (a date, a unit). */
+    hint?: React.ReactNode;
+    /** A stable key, when the terms are not unique strings. */
+    id?: string;
+};
+type DescriptionListProps = Omit<React.ComponentProps<"dl">, "children"> & {
+    /** The pairs, in reading order. */
+    items: readonly DescriptionItem[];
+    /** stacked (default: a details panel) · inline (term left, value right: a receipt, a summary) · grid (cards). */
+    layout?: "stacked" | "inline" | "grid";
+};
+/** Term and value pairs — a job's details, a payout's breakdown — stacked, inline like a receipt, or as cards. */
+declare function DescriptionList({ items, layout, className, ...props }: DescriptionListProps): React.JSX.Element;
+type KeyValueGridProps = Omit<DescriptionListProps, "layout"> & {
+    /** The narrowest a card may be before the grid wraps, in rem. Default 10. */
+    minWidth?: number;
+};
+/** Key figures as a grid of cards that wraps with the width: a job's numbers, an account's limits. */
+declare function KeyValueGrid({ minWidth, style, ...props }: KeyValueGridProps): React.JSX.Element;
+
+export { type DescriptionItem, DescriptionList, type DescriptionListProps, KeyValueGrid, type KeyValueGridProps, descriptionList };

package/dist/description-list.js

@@ -0,0 +1,49 @@
+// src/description-list/description-list.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var descriptionList = tv({
+  slots: {
+    root: "m-0 w-full",
+    pair: "min-w-0",
+    term: "text-xs font-semibold text-fg-secondary",
+    details: "m-0 min-w-0 break-words text-sm text-fg",
+    hint: "mt-0.5 block text-xs text-fg-secondary"
+  },
+  variants: {
+    layout: {
+      stacked: { root: "flex flex-col gap-4", details: "mt-1" },
+      inline: {
+        root: "divide-y divide-border-subtle",
+        pair: "flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 py-2.5 first:pt-0 last:pb-0",
+        term: "text-sm font-normal",
+        details: "text-right font-medium tabular-nums"
+      },
+      grid: {
+        root: "grid grid-cols-[repeat(auto-fill,minmax(var(--kz-kv-min,10rem),1fr))] gap-3",
+        pair: "rounded-xl border border-border-default bg-surface-1 px-4 py-3",
+        term: "uppercase tracking-wider",
+        details: "mt-1 font-display text-lg font-bold tabular-nums"
+      }
+    }
+  },
+  defaultVariants: { layout: "stacked" }
+});
+function DescriptionList({ items, layout, className, ...props }) {
+  const s = descriptionList({ layout });
+  return /* @__PURE__ */ jsx("dl", { className: s.root({ className }), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: s.pair(), children: [
+    /* @__PURE__ */ jsx("dt", { className: s.term(), children: item.term }),
+    /* @__PURE__ */ jsxs("dd", { className: s.details(), children: [
+      item.details,
+      item.hint ? /* @__PURE__ */ jsx("span", { className: s.hint(), children: item.hint }) : null
+    ] })
+  ] }, item.id ?? (typeof item.term === "string" ? item.term : i))) });
+}
+function KeyValueGrid({ minWidth = 10, style, ...props }) {
+  return /* @__PURE__ */ jsx(DescriptionList, { layout: "grid", style: { ...style, ["--kz-kv-min"]: `${minWidth}rem` }, ...props });
+}
+export {
+  DescriptionList,
+  KeyValueGrid,
+  descriptionList
+};
+//# sourceMappingURL=description-list.js.map

package/dist/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/description-list/description-list.tsx"],"sourcesContent":["// Server-safe. Facts about one thing, as term and value: a job's details, a payout's breakdown, a profile. A real\n// `<dl>` (each pair in a `<div>`, as HTML allows): stacked, inline (term beside its value) or a grid of cards\n// (`KeyValueGrid`). Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const descriptionList = tv({\n  slots: {\n    root: \"m-0 w-full\",\n    pair: \"min-w-0\",\n    term: \"text-xs font-semibold text-fg-secondary\",\n    details: \"m-0 min-w-0 break-words text-sm text-fg\",\n    hint: \"mt-0.5 block text-xs text-fg-secondary\",\n  },\n  variants: {\n    layout: {\n      stacked: { root: \"flex flex-col gap-4\", details: \"mt-1\" },\n      inline: {\n        root: \"divide-y divide-border-subtle\",\n        pair: \"flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 py-2.5 first:pt-0 last:pb-0\",\n        term: \"text-sm font-normal\",\n        details: \"text-right font-medium tabular-nums\",\n      },\n      grid: {\n        root: \"grid grid-cols-[repeat(auto-fill,minmax(var(--kz-kv-min,10rem),1fr))] gap-3\",\n        pair: \"rounded-xl border border-border-default bg-surface-1 px-4 py-3\",\n        term: \"uppercase tracking-wider\",\n        details: \"mt-1 font-display text-lg font-bold tabular-nums\",\n      },\n    },\n  },\n  defaultVariants: { layout: \"stacked\" },\n});\n\nexport type DescriptionItem = {\n  /** The term (“Status”, “Credits”) — passed translated. */\n  term: React.ReactNode;\n  /** The value: text, a `Badge`, a link. */\n  details: React.ReactNode;\n  /** A line under the value (a date, a unit). */\n  hint?: React.ReactNode;\n  /** A stable key, when the terms are not unique strings. */\n  id?: string;\n};\n\nexport type DescriptionListProps = Omit<React.ComponentProps<\"dl\">, \"children\"> & {\n  /** The pairs, in reading order. */\n  items: readonly DescriptionItem[];\n  /** stacked (default: a details panel) · inline (term left, value right: a receipt, a summary) · grid (cards). */\n  layout?: \"stacked\" | \"inline\" | \"grid\";\n};\n\n/** Term and value pairs — a job's details, a payout's breakdown — stacked, inline like a receipt, or as cards. */\nexport function DescriptionList({ items, layout, className, ...props }: DescriptionListProps) {\n  const s = descriptionList({ layout });\n  return (\n    <dl className={s.root({ className })} {...props}>\n      {items.map((item, i) => (\n        <div key={item.id ?? (typeof item.term === \"string\" ? item.term : i)} className={s.pair()}>\n          <dt className={s.term()}>{item.term}</dt>\n          <dd className={s.details()}>\n            {item.details}\n            {item.hint ? <span className={s.hint()}>{item.hint}</span> : null}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\nexport type KeyValueGridProps = Omit<DescriptionListProps, \"layout\"> & {\n  /** The narrowest a card may be before the grid wraps, in rem. Default 10. */\n  minWidth?: number;\n};\n\n/** Key figures as a grid of cards that wraps with the width: a job's numbers, an account's limits. */\nexport function KeyValueGrid({ minWidth = 10, style, ...props }: KeyValueGridProps) {\n  return <DescriptionList layout=\"grid\" style={{ ...style, [\"--kz-kv-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAuDT,cACA,YADA;AArDH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,uBAAuB,SAAS,OAAO;AAAA,MACxD,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,QAAQ,UAAU;AACvC,CAAC;AAqBM,SAAS,gBAAgB,EAAE,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAyB;AAC5F,QAAM,IAAI,gBAAgB,EAAE,OAAO,CAAC;AACpC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACvC,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,SAAqE,WAAW,EAAE,KAAK,GACtF;AAAA,wBAAC,QAAG,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK;AAAA,IACpC,qBAAC,QAAG,WAAW,EAAE,QAAQ,GACtB;AAAA,WAAK;AAAA,MACL,KAAK,OAAO,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,eAAK,MAAK,IAAU;AAAA,OAC/D;AAAA,OALQ,KAAK,OAAO,OAAO,KAAK,SAAS,WAAW,KAAK,OAAO,EAMlE,CACD,GACH;AAEJ;AAQO,SAAS,aAAa,EAAE,WAAW,IAAI,OAAO,GAAG,MAAM,GAAsB;AAClF,SAAO,oBAAC,mBAAgB,QAAO,QAAO,OAAO,EAAE,GAAG,OAAO,CAAC,aAAuB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AACrH;","names":[]}

package/dist/dropdown-menu.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-J3NC6ER4.js";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/dropdown-menu/dropdown-menu.tsx
 import { DropdownMenu as MenuPrimitive } from "radix-ui";

package/dist/filter-bar.js

@@ -5,9 +5,10 @@ import {
   filterBar,
   readFilterParams,
   writeFilterParams
-} from "./chunk-2PUDI7JS.js";
+} from "./chunk-ZKVQGXLD.js";
 import "./chunk-YH4LMWRU.js";
-import "./chunk-I5RVM5CW.js";
+import "./chunk-J3NC6ER4.js";
+import "./chunk-2FRWNSRO.js";
 import "./chunk-CPA5CF35.js";
 export {
   FilterBar,

package/dist/form.d.ts

@@ -4,6 +4,7 @@ import { ButtonProps } from '@krizaka/ui/button';
 import { ComboboxOption, ComboboxLabels } from '@krizaka/ui/combobox';
 import { DatePickerLabels } from '@krizaka/ui/date-picker';
 import { Dropzone } from '@krizaka/ui/file-upload';
+import { SliderMark } from '@krizaka/ui/slider';
 import { TagInputProps } from '@krizaka/ui/tag-input';
 
 /** A part of a typed date. */
@@ -347,8 +348,12 @@ type FormOption = {
 type RadioGroupProps = Base & {
     /** The choices, all visible (two to five). */
     options: readonly FormOption[];
-    /** `list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience). */
-    variant?: "list" | "cards";
+    /**
+     * `list` (a dot and its words, default), `cards` (a whole card is the radio: an amount, a plan, an audience),
+     * `buttons` (tactile keys that press in: a size, a tip; `description` is the key's second line) or `segmented`
+     * (two to four short choices on one line).
+     */
+    variant?: "list" | "cards" | "buttons" | "segmented";
     /** `vertical` (default) or `horizontal`. */
     orientation?: "vertical" | "horizontal";
 };
@@ -379,19 +384,21 @@ type ComboboxProps = Base & {
 /** A choice among many, typed to filter or fetched: one value (`string`) or several (`string[]`). */
 declare function Combobox({ name, label, hint, disabled, className, options, onSearch, multiple, creatable, placeholder, labels }: ComboboxProps): React.JSX.Element;
 type DateFieldProps = Base & {
-    /** `calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a
-     * memorable date, a birth date). */
-    entry?: "calendar" | "parts";
-    /** The earliest date (ISO), for the calendar. */
+    /**
+     * `calendar` (default: a date near today — a publication, an appointment), `parts` (day · month · year typed: a
+     * memorable date, a birth date) or `wheel` (three wheels bounded by `min` / `max`: a birth date on a phone).
+     */
+    entry?: "calendar" | "parts" | "wheel";
+    /** The earliest date (ISO), for the calendar and the wheels. */
     min?: string;
-    /** The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate). */
+    /** The latest date (ISO), for the calendar and the wheels (`latestBirthDate(18)` for an age gate). */
     max?: string;
-    /** The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated. */
+    /** The words of the calendar, or the names of the parts (`day`, `month`, `year`), passed translated. */
     labels?: Partial<DatePickerLabels> & Partial<Record<DatePart, string>>;
-    /** `bday` for a date of birth. */
+    /** `bday` for a date of birth: typed boxes are autofilled; the wheels rest on 1 January 2000 until turned. */
     autoComplete?: "bday" | "off";
 };
-/** A date of the form (`YYYY-MM-DD`, `""` for none): a calendar, or day · month · year typed in the locale's order. */
+/** A date of the form (`YYYY-MM-DD`, `""` for none): a calendar, day · month · year typed, or wheels. */
 declare function DateField({ name, label, hint, disabled, className, entry, min, max, labels, autoComplete }: DateFieldProps): React.JSX.Element;
 type TagsProps = Base & Pick<TagInputProps, "suggestions" | "normalize" | "max" | "separators" | "placeholder" | "labels">;
 /** Free words of the form as chips (`string[]`): tags, keywords. */
@@ -437,9 +444,13 @@ type SliderProps = Base & {
     formatValue?: (value: number) => string;
     /** For a range (`[number, number]`): each thumb's name, passed translated. */
     thumbLabels?: [string, string];
+    /** A graduation per step (`true`) or at the values given. */
+    ticks?: boolean | readonly number[];
+    /** Words under the track at some values. */
+    marks?: readonly SliderMark[];
 };
-/** A number (or a range) of the form, chosen by feel: a share, a volume, a price range. */
-declare function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels }: SliderProps): React.JSX.Element;
+/** A number (or a range) of the form, chosen by feel: a share, a volume, a price range — the value floats while it is touched. */
+declare function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels, ticks, marks }: SliderProps): React.JSX.Element;
 type FormFieldProps<T = unknown> = {
     /** The field's name in the schema (typed by the form). */
     name: string;

package/dist/form.js

@@ -1,7 +1,6 @@
 "use client";
 
 // src/date-picker/parts.ts
-var DATE_PART_LENGTH = { day: 2, month: 2, year: 4 };
 function datePartsOrder(locale) {
   try {
     const parts = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).formatToParts(new Date(2001, 10, 22));
@@ -16,10 +15,6 @@ function composeDate(parts) {
   const pad = (v) => v.length === 1 ? `0${v}` : v;
   return `${parts.year}-${pad(parts.month)}-${pad(parts.day)}`;
 }
-function splitDate(value) {
-  const m = /^(\d*)-(\d*)-(\d*)$/.exec(value ?? "");
-  return m ? { year: m[1], month: m[2], day: m[3] } : { day: "", month: "", year: "" };
-}
 function isRealDate(value) {
   if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
   const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
@@ -408,7 +403,7 @@ import { Alert } from "@krizaka/ui/alert";
 import { Button } from "@krizaka/ui/button";
 import { Checkbox as CheckboxControl } from "@krizaka/ui/checkbox";
 import { Combobox as ComboboxControl } from "@krizaka/ui/combobox";
-import { DatePicker } from "@krizaka/ui/date-picker";
+import { DateField as DatePartsControl, DatePicker, DateWheel } from "@krizaka/ui/date-picker";
 import { Field, Input, Select as SelectControl, Textarea } from "@krizaka/ui/field";
 import { Dropzone, formatBytes } from "@krizaka/ui/file-upload";
 import { RadioGroup as RadioGroupControl } from "@krizaka/ui/radio-group";
@@ -528,12 +523,13 @@ function RadioGroup({ name, label, hint, disabled, className, options, variant =
         invalid: Boolean(f.error),
         "aria-describedby": ids(f, hint),
         name,
-        className: variant === "cards" ? "grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-2" : void 0,
+        variant,
+        className: variant === "segmented" ? "self-start" : void 0,
         children: options.map(
           (o) => variant === "cards" ? /* @__PURE__ */ jsxs(RadioGroupControl.Card, { value: o.value, disabled: o.disabled, children: [
             /* @__PURE__ */ jsx2("span", { className: "font-semibold", children: o.label }),
             o.description ? /* @__PURE__ */ jsx2("span", { className: "text-xs text-fg-secondary", children: o.description }) : null
-          ] }, o.value) : /* @__PURE__ */ jsxs(RadioGroupControl.Item, { value: o.value, disabled: o.disabled, children: [
+          ] }, o.value) : variant === "buttons" ? /* @__PURE__ */ jsx2(RadioGroupControl.Button, { value: o.value, disabled: o.disabled, hint: o.description, children: o.label }, o.value) : variant === "segmented" ? /* @__PURE__ */ jsx2(RadioGroupControl.Segment, { value: o.value, disabled: o.disabled, children: o.label }, o.value) : /* @__PURE__ */ jsxs(RadioGroupControl.Item, { value: o.value, disabled: o.disabled, children: [
             o.label,
             o.description ? /* @__PURE__ */ jsx2("span", { className: "block text-xs text-fg-secondary", children: o.description }) : null
           ] }, o.value)
@@ -583,46 +579,14 @@ function Combobox({ name, label, hint, disabled, className, options = [], onSear
     }
   ) });
 }
-var PART_NAMES = { day: "Day", month: "Month", year: "Year" };
 function DateField({ name, label, hint, disabled, className, entry = "calendar", min, max, labels, autoComplete }) {
   const f = useKrizakaField(name);
+  const onBlur = (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur();
   if (entry === "calendar")
-    return /* @__PURE__ */ jsx2("div", { className, onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: /* @__PURE__ */ jsx2(DatePicker, { label, hint, error: f.error, disabled, name, locale: f.locale, min, max, labels, value: f.value || null, onValueChange: (v) => f.setValue(v ?? "") }) });
-  return /* @__PURE__ */ jsx2(DateParts, { field: f, label, hint, disabled, className, names: { ...PART_NAMES, ...labels }, autoComplete });
-}
-function DateParts({ field: f, label, hint, disabled, className, names, autoComplete }) {
-  const order = React2.useMemo(() => datePartsOrder(f.locale), [f.locale]);
-  const [parts, setParts] = React2.useState(() => splitDate(f.value));
-  if ((f.value ?? "") !== composeDate(parts) && composeDate(splitDate(f.value)) === (f.value ?? "")) setParts(splitDate(f.value));
-  const refs = { day: React2.useRef(null), month: React2.useRef(null), year: React2.useRef(null) };
-  return /* @__PURE__ */ jsxs("fieldset", { className: className ?? "flex flex-col gap-1.5", "aria-describedby": ids(f, hint), onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: [
-    /* @__PURE__ */ jsx2("legend", { className: "mb-1.5 text-xs font-semibold text-fg-secondary", children: label }),
-    /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: order.map((part) => /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-fg-secondary", children: [
-      names[part],
-      /* @__PURE__ */ jsx2(
-        Input,
-        {
-          ref: refs[part],
-          inputMode: "numeric",
-          autoComplete: autoComplete === "bday" ? `bday-${part}` : "off",
-          maxLength: DATE_PART_LENGTH[part],
-          value: parts[part],
-          disabled,
-          invalid: Boolean(f.error),
-          className: part === "year" ? "w-20 text-center tabular-nums" : "w-14 text-center tabular-nums",
-          onChange: (e) => {
-            const digits = e.target.value.replace(/\D/g, "").slice(0, DATE_PART_LENGTH[part]);
-            const next = { ...parts, [part]: digits };
-            setParts(next);
-            f.setValue(composeDate(next));
-            const following = order[order.indexOf(part) + 1];
-            if (digits.length === DATE_PART_LENGTH[part] && following) refs[following].current?.focus();
-          }
-        }
-      )
-    ] }, part)) }),
-    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
-  ] });
+    return /* @__PURE__ */ jsx2("div", { className, onBlur, children: /* @__PURE__ */ jsx2(DatePicker, { label, hint, error: f.error, disabled, name, locale: f.locale, min, max, labels, value: f.value || null, onValueChange: (v) => f.setValue(v ?? "") }) });
+  if (entry === "wheel")
+    return /* @__PURE__ */ jsx2("div", { className, onBlur, children: /* @__PURE__ */ jsx2(DateWheel, { label, hint, error: f.error, disabled, name, locale: f.locale, min, max, labels, defaultView: autoComplete === "bday" ? "2000-01-01" : void 0, value: f.value || null, onValueChange: (v) => f.setValue(v) }) });
+  return /* @__PURE__ */ jsx2(DatePartsControl, { label, hint, error: f.error, disabled, name, locale: f.locale, labels, autoComplete, className, value: f.value ?? "", onValueChange: (v) => f.setValue(v), onBlur: f.onBlur });
 }
 function TagInput({ name, label, hint, disabled, className, ...props }) {
   const f = useKrizakaField(name);
@@ -698,10 +662,10 @@ function Money({ name, label, hint, disabled, className, currency, placeholder }
     /* @__PURE__ */ jsx2(Caption, { field: f, hint })
   ] });
 }
-function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels }) {
+function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels, ticks, marks }) {
   const f = useKrizakaField(name);
   return /* @__PURE__ */ jsxs("div", { className: className ?? "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ jsx2(SliderControl, { label, showLabel: true, value: f.value, min, max, step, disabled, formatValue, thumbLabels, "aria-describedby": ids(f, hint), onValueChange: (v) => f.setValue(v), onValueCommit: () => f.onBlur() }),
+    /* @__PURE__ */ jsx2(SliderControl, { label, showLabel: true, floatingValue: true, value: f.value, min, max, step, ticks, marks, disabled, formatValue, thumbLabels, "aria-describedby": ids(f, hint), onValueChange: (v) => f.setValue(v), onValueCommit: () => f.onBlur() }),
     /* @__PURE__ */ jsx2(Caption, { field: f, hint })
   ] });
 }