@krizaka/ui 3.2.0 → 3.3.0

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 })
   ] });
 }