@krizaka/ui 3.2.0 → 3.3.0

package/dist/date-picker.d.ts

@@ -862,11 +862,13 @@ type WheelPickerProps = {
     "aria-describedby"?: string;
     /** Marks the group invalid (a danger edge): pair it with an error read through `aria-describedby`. */
     invalid?: boolean;
+    /** Nothing is chosen yet: the values under the band stay quiet until a wheel is turned. */
+    unset?: boolean;
     /** Classes merged on the root. */
     className?: string;
 };
 /** The frame of one or several wheels: a raised surface, the lit band across them, a group named by `label`. */
-declare function WheelPicker({ label, children, visible, "aria-describedby": describedBy, invalid, className }: WheelPickerProps): React.JSX.Element;
+declare function WheelPicker({ label, children, visible, "aria-describedby": describedBy, invalid, unset, className }: WheelPickerProps): React.JSX.Element;
 /** A divider between two wheels (`:` between the hours and the minutes). */
 declare function WheelDivider({ children }: {
     children: React.ReactNode;

package/dist/date-picker.js

@@ -1,9 +1,13 @@
 "use client";
 import {
-  cn,
-  floating,
-  twMergeConfig
-} from "./chunk-I5RVM5CW.js";
+  floating
+} from "./chunk-J3NC6ER4.js";
+import {
+  tv
+} from "./chunk-C2BRIFJG.js";
+import {
+  cn
+} from "./chunk-2FRWNSRO.js";
 import {
   useControllable,
   usePrefersReducedMotion
@@ -18,10 +22,6 @@ import {
 import { formatDate, getDateTimeFormat } from "@krizaka/intl";
 import * as React2 from "react";
 
-// src/tv.ts
-import { createTV } from "tailwind-variants";
-var tv = createTV({ twMergeConfig });
-
 // src/date-picker/month-picker.tsx
 import * as React from "react";
 
@@ -481,19 +481,19 @@ import * as React3 from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var wheel = tv({
   slots: {
-    root: "relative inline-flex select-none items-stretch gap-1 rounded-2xl border border-border-default data-[invalid]:border-danger bg-surface-1 bg-sheen px-2 shadow-raised inset-shadow-edge",
+    root: "group/wheel relative inline-flex select-none items-stretch gap-1 rounded-2xl border border-border-default data-[invalid]:border-danger bg-surface-1 bg-sheen px-2 shadow-raised inset-shadow-edge",
     band: "pointer-events-none absolute inset-x-1.5 top-1/2 -translate-y-1/2 rounded-xl border border-border-subtle bg-surface-3 inset-shadow-well",
     column: "relative z-[1] min-w-14 flex-1 rounded-xl outline-hidden focus-visible:focus-ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
     scroller: "kz-wheel h-full snap-y snap-mandatory overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_bottom,transparent,#000_30%,#000_70%,transparent)]",
-    item: "kz-wheel-item flex snap-center items-center justify-center px-2 text-base tabular-nums text-fg-secondary transition-colors data-[selected]:font-semibold data-[selected]:text-fg data-[disabled]:text-fg-muted data-[disabled]:line-through",
+    item: "kz-wheel-item flex snap-center items-center justify-center px-2 text-base tabular-nums text-fg-secondary transition-colors data-[selected]:font-semibold data-[selected]:text-fg data-[disabled]:text-fg-muted data-[disabled]:line-through group-data-[unset]/wheel:data-[selected]:font-normal group-data-[unset]/wheel:data-[selected]:text-fg-secondary",
     divider: "z-[1] self-center text-base font-semibold text-fg-secondary"
   }
 });
 var ITEM = 40;
 var VisibleContext = React3.createContext(5);
-function WheelPicker({ label, children, visible = 5, "aria-describedby": describedBy, invalid, className }) {
+function WheelPicker({ label, children, visible = 5, "aria-describedby": describedBy, invalid, unset, className }) {
   const s = wheel();
-  return /* @__PURE__ */ jsx3(VisibleContext.Provider, { value: visible, children: /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": label, "aria-describedby": describedBy, "data-invalid": invalid ? "" : void 0, className: s.root({ className }), style: { height: ITEM * visible }, children: [
+  return /* @__PURE__ */ jsx3(VisibleContext.Provider, { value: visible, children: /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": label, "aria-describedby": describedBy, "data-invalid": invalid ? "" : void 0, "data-unset": unset ? "" : void 0, className: s.root({ className }), style: { height: ITEM * visible }, children: [
     /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: s.band(), style: { height: ITEM } }),
     children
   ] }) });
@@ -722,7 +722,7 @@ function DateWheel({ label, locale, hint, error, disabled, name, labels: given,
   };
   return /* @__PURE__ */ jsxs4("div", { className: dateField().root({ className }), children: [
     /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: dateField().legend(), children: label }),
-    /* @__PURE__ */ jsx4(WheelPicker, { label, "aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0, invalid: Boolean(error), children: order.map((part) => columns[part]) }),
+    /* @__PURE__ */ jsx4(WheelPicker, { label, "aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0, invalid: Boolean(error), unset: !value, children: order.map((part) => columns[part]) }),
     name ? /* @__PURE__ */ jsx4("input", { type: "hidden", name, value: value ?? "" }) : null,
     /* @__PURE__ */ jsx4(Caption, { id, hint, error })
   ] });