@krizaka/ui 3.1.0 → 3.3.0

package/dist/gallery-page.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-KNBYZGSQ.js";
+} from "./chunk-ZNMFG62E.js";
 
 // src/gallery-page/gallery-page.tsx
 import { CtaPanel } from "@krizaka/ui/cta-panel";

package/dist/glow-card.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-5AXLA4LK.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/glow-card/glow-card.tsx
 import { Slot } from "radix-ui";

package/dist/goal-gauge.js

@@ -2,7 +2,7 @@ import {
   brandClass,
   cn,
   storyVariantClass
-} from "./chunk-VCAAHCHL.js";
+} from "./chunk-IZ7MV6HM.js";
 
 // src/goal-gauge/goal-gauge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/how-it-works-page.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-KNBYZGSQ.js";
+} from "./chunk-ZNMFG62E.js";
 
 // src/how-it-works-page/how-it-works-page.tsx
 import { CtaPanel } from "@krizaka/ui/cta-panel";

package/dist/image-cropper.js

@@ -1,7 +1,9 @@
 "use client";
 import {
   Slider
-} from "./chunk-RUPRYJ45.js";
+} from "./chunk-BTMFZ66D.js";
+import "./chunk-C2BRIFJG.js";
+import "./chunk-2FRWNSRO.js";
 import {
   clamp
 } from "./chunk-BRKMQ6JV.js";

package/dist/image-cropper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-cropper/image-cropper.tsx"],"sourcesContent":["// Client. A fixed frame (a profile picture's square, a vertical 9:16, a banner) over a picture or a video the person\n// drags and zooms to choose what stays in. The value is a focus point (0–1 on each axis) and a zoom — independent of\n// the screen, the same on the server — and `cropRect` turns it into pixels of the source. Keyboard: the frame takes the\n// focus, the arrows move (Shift: faster), + / − zoom; the zoom is also a slider. No motion but the person's own.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const imageCropper = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    frame:\n      \"relative w-full cursor-grab touch-none overflow-hidden rounded-xl bg-media active:cursor-grabbing \" +\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    media: \"pointer-events-none absolute max-w-none select-none\",\n    grid:\n      \"pointer-events-none absolute inset-0 rounded-xl border-2 border-fg-on-media/80 \" +\n      \"bg-[linear-gradient(to_right,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%),linear-gradient(to_bottom,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%)] opacity-40\",\n    round: \"pointer-events-none absolute inset-0 rounded-full shadow-[0_0_0_9999px_var(--kz-scrim-strong)]\",\n  },\n});\n\n/** Where the frame looks: the focus point (0–1 from the left and the top of the source) and the zoom (1 = covers). */\nexport type CropValue = { x: number; y: number; zoom: number };\n\n/** The crop in pixels of the source: what to cut from an image of `width` × `height` for a frame of `aspect`. */\nexport function cropRect(value: CropValue, source: { width: number; height: number }, aspect: number) {\n  const mediaAspect = source.width / source.height;\n  const width = (mediaAspect > aspect ? source.height * aspect : source.width) / value.zoom;\n  const height = width / aspect;\n  const x = clamp(value.x * source.width - width / 2, 0, source.width - width);\n  const y = clamp(value.y * source.height - height / 2, 0, source.height - height);\n  return { x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) };\n}\n\nexport type ImageCropperLabels = {\n  /** The frame's accessible name (\"Crop area\"). */\n  frame: string;\n  /** How to use it with the keyboard, read with the frame (\"Use the arrow keys to move the picture, + and − to zoom.\"). */\n  instructions: string;\n  /** The zoom slider (\"Zoom\"). */\n  zoom: string;\n};\n\nexport const imageCropperLabels: ImageCropperLabels = {\n  frame: \"Crop area\",\n  instructions: \"Drag or use the arrow keys to move the picture, + and − to zoom.\",\n  zoom: \"Zoom\",\n};\n\nexport type ImageCropperProps = {\n  /** The picture to crop. Or `children`: a `<video>` (with the class it is given through `mediaClassName`). */\n  src?: string;\n  /** The picture's alternative text, passed translated (empty when the frame's name says enough). */\n  alt?: string;\n  /** A media element instead of `src` — a `<video>` to choose the frame of a clip. Its natural size is in `naturalSize`. */\n  children?: React.ReactElement<{ className?: string; style?: React.CSSProperties }>;\n  /** The source's size when `children` is a video: `{ width: video.videoWidth, height: video.videoHeight }`. */\n  naturalSize?: { width: number; height: number };\n  /** The frame's width / height: 1 (a square), 9 / 16 (vertical), 3 (a banner). */\n  aspect: number;\n  /** A round mask over the square frame (a profile picture). */\n  round?: boolean;\n  /** The crop (controlled). */\n  value?: CropValue;\n  /** The crop at first, uncontrolled. Default: centred, no zoom. */\n  defaultValue?: CropValue;\n  /** Called on every move. */\n  onValueChange?: (value: CropValue) => void;\n  /** The largest zoom. Default 4. */\n  maxZoom?: number;\n  /** Shows the zoom slider under the frame. Default `true`. */\n  showZoom?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ImageCropperLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Chooses what a fixed frame keeps of a picture or a video: drag, zoom, keyboard; a focus point and a zoom out. */\nexport function ImageCropper({\n  src,\n  alt = \"\",\n  children,\n  naturalSize,\n  aspect,\n  round,\n  value: valueProp,\n  defaultValue = { x: 0.5, y: 0.5, zoom: 1 },\n  onValueChange,\n  maxZoom = 4,\n  showZoom = true,\n  labels: given,\n  className,\n}: ImageCropperProps) {\n  const labels = { ...imageCropperLabels, ...given };\n  const s = imageCropper();\n  const frame = React.useRef<HTMLDivElement>(null);\n  const drag = React.useRef<{ x: number; y: number; from: CropValue } | null>(null);\n  const [inner, setInner] = React.useState(defaultValue);\n  const [loaded, setLoaded] = React.useState<{ width: number; height: number } | null>(null);\n  const value = valueProp ?? inner;\n  const id = React.useId();\n  const size = naturalSize ?? loaded;\n  const mediaAspect = size ? size.width / size.height : aspect;\n\n  // The media's box, in % of the frame: it covers the frame at zoom 1.\n  const widthPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * value.zoom;\n  const heightPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * value.zoom;\n  // The focus point's limits: the media never leaves a gap in the frame.\n  const halfX = 50 / widthPct;\n  const halfY = 50 / heightPct;\n\n  const set = (next: CropValue) => {\n    const zoom = clamp(next.zoom, 1, maxZoom);\n    const wPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * zoom;\n    const hPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * zoom;\n    const fixed = { x: clamp(next.x, 50 / wPct, 1 - 50 / wPct), y: clamp(next.y, 50 / hPct, 1 - 50 / hPct), zoom };\n    if (!valueProp) setInner(fixed);\n    onValueChange?.(fixed);\n  };\n\n  const x = clamp(value.x, halfX, 1 - halfX);\n  const y = clamp(value.y, halfY, 1 - halfY);\n  const style: React.CSSProperties = {\n    width: `${widthPct}%`,\n    height: `${heightPct}%`,\n    left: `${50 - x * widthPct}%`,\n    top: `${50 - y * heightPct}%`,\n  };\n\n  return (\n    <div className={s.root({ className })}>\n      <div\n        ref={frame}\n        role=\"group\"\n        tabIndex={0}\n        aria-label={labels.frame}\n        aria-describedby={`${id}-help`}\n        className={s.frame()}\n        style={{ aspectRatio: String(aspect) }}\n        onPointerDown={(event) => {\n          frame.current?.setPointerCapture?.(event.pointerId);\n          drag.current = { x: event.clientX, y: event.clientY, from: { x, y, zoom: value.zoom } };\n        }}\n        onPointerMove={(event) => {\n          const start = drag.current;\n          const box = frame.current?.getBoundingClientRect();\n          if (!start || !box?.width) return;\n          set({\n            x: start.from.x - (event.clientX - start.x) / ((box.width * widthPct) / 100),\n            y: start.from.y - (event.clientY - start.y) / ((box.height * heightPct) / 100),\n            zoom: value.zoom,\n          });\n        }}\n        onPointerUp={() => {\n          drag.current = null;\n        }}\n        onWheel={(event) => {\n          if (!event.ctrlKey && !event.metaKey) return;\n          event.preventDefault();\n          set({ x, y, zoom: value.zoom - event.deltaY * 0.01 });\n        }}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 0.1 : 0.02;\n          const moves: Record<string, CropValue> = {\n            ArrowLeft: { x: x - nudge, y, zoom: value.zoom },\n            ArrowRight: { x: x + nudge, y, zoom: value.zoom },\n            ArrowUp: { x, y: y - nudge, zoom: value.zoom },\n            ArrowDown: { x, y: y + nudge, zoom: value.zoom },\n            \"+\": { x, y, zoom: value.zoom + 0.1 },\n            \"=\": { x, y, zoom: value.zoom + 0.1 },\n            \"-\": { x, y, zoom: value.zoom - 0.1 },\n          };\n          const next = moves[event.key];\n          if (!next) return;\n          event.preventDefault();\n          set(next);\n        }}\n      >\n        {children ? (\n          React.cloneElement(children, { className: s.media({ className: children.props.className }), style: { ...children.props.style, ...style } })\n        ) : src ? (\n          <img\n            src={src}\n            alt={alt}\n            draggable={false}\n            className={s.media()}\n            style={style}\n            onLoad={(event) => setLoaded({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight })}\n          />\n        ) : null}\n        <span className={round ? s.round() : s.grid()} aria-hidden />\n        <span id={`${id}-help`} className=\"sr-only\">\n          {labels.instructions}\n        </span>\n      </div>\n      {showZoom && (\n        <Slider\n          label={labels.zoom}\n          min={1}\n          max={maxZoom}\n          step={0.05}\n          value={value.zoom}\n          onValueChange={(zoom) => set({ x, y, zoom })}\n          formatValue={(v) => `${Math.round(v * 100)} %`}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/image-cropper/image-cropper.tsx"],"sourcesContent":["// Client. A fixed frame (a profile picture's square, a vertical 9:16, a banner) over a picture or a video the person\n// drags and zooms to choose what stays in. The value is a focus point (0–1 on each axis) and a zoom — independent of\n// the screen, the same on the server — and `cropRect` turns it into pixels of the source. Keyboard: the frame takes the\n// focus, the arrows move (Shift: faster), + / − zoom; the zoom is also a slider. No motion but the person's own.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const imageCropper = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    frame:\n      \"relative w-full cursor-grab touch-none overflow-hidden rounded-xl bg-media active:cursor-grabbing \" +\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    media: \"pointer-events-none absolute max-w-none select-none\",\n    grid:\n      \"pointer-events-none absolute inset-0 rounded-xl border-2 border-fg-on-media/80 \" +\n      \"bg-[linear-gradient(to_right,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%),linear-gradient(to_bottom,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%)] opacity-40\",\n    round: \"pointer-events-none absolute inset-0 rounded-full shadow-[0_0_0_9999px_var(--kz-scrim-strong)]\",\n  },\n});\n\n/** Where the frame looks: the focus point (0–1 from the left and the top of the source) and the zoom (1 = covers). */\nexport type CropValue = { x: number; y: number; zoom: number };\n\n/** The crop in pixels of the source: what to cut from an image of `width` × `height` for a frame of `aspect`. */\nexport function cropRect(value: CropValue, source: { width: number; height: number }, aspect: number) {\n  const mediaAspect = source.width / source.height;\n  const width = (mediaAspect > aspect ? source.height * aspect : source.width) / value.zoom;\n  const height = width / aspect;\n  const x = clamp(value.x * source.width - width / 2, 0, source.width - width);\n  const y = clamp(value.y * source.height - height / 2, 0, source.height - height);\n  return { x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) };\n}\n\nexport type ImageCropperLabels = {\n  /** The frame's accessible name (\"Crop area\"). */\n  frame: string;\n  /** How to use it with the keyboard, read with the frame (\"Use the arrow keys to move the picture, + and − to zoom.\"). */\n  instructions: string;\n  /** The zoom slider (\"Zoom\"). */\n  zoom: string;\n};\n\nexport const imageCropperLabels: ImageCropperLabels = {\n  frame: \"Crop area\",\n  instructions: \"Drag or use the arrow keys to move the picture, + and − to zoom.\",\n  zoom: \"Zoom\",\n};\n\nexport type ImageCropperProps = {\n  /** The picture to crop. Or `children`: a `<video>` (with the class it is given through `mediaClassName`). */\n  src?: string;\n  /** The picture's alternative text, passed translated (empty when the frame's name says enough). */\n  alt?: string;\n  /** A media element instead of `src` — a `<video>` to choose the frame of a clip. Its natural size is in `naturalSize`. */\n  children?: React.ReactElement<{ className?: string; style?: React.CSSProperties }>;\n  /** The source's size when `children` is a video: `{ width: video.videoWidth, height: video.videoHeight }`. */\n  naturalSize?: { width: number; height: number };\n  /** The frame's width / height: 1 (a square), 9 / 16 (vertical), 3 (a banner). */\n  aspect: number;\n  /** A round mask over the square frame (a profile picture). */\n  round?: boolean;\n  /** The crop (controlled). */\n  value?: CropValue;\n  /** The crop at first, uncontrolled. Default: centred, no zoom. */\n  defaultValue?: CropValue;\n  /** Called on every move. */\n  onValueChange?: (value: CropValue) => void;\n  /** The largest zoom. Default 4. */\n  maxZoom?: number;\n  /** Shows the zoom slider under the frame. Default `true`. */\n  showZoom?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ImageCropperLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Chooses what a fixed frame keeps of a picture or a video: drag, zoom, keyboard; a focus point and a zoom out. */\nexport function ImageCropper({\n  src,\n  alt = \"\",\n  children,\n  naturalSize,\n  aspect,\n  round,\n  value: valueProp,\n  defaultValue = { x: 0.5, y: 0.5, zoom: 1 },\n  onValueChange,\n  maxZoom = 4,\n  showZoom = true,\n  labels: given,\n  className,\n}: ImageCropperProps) {\n  const labels = { ...imageCropperLabels, ...given };\n  const s = imageCropper();\n  const frame = React.useRef<HTMLDivElement>(null);\n  const drag = React.useRef<{ x: number; y: number; from: CropValue } | null>(null);\n  const [inner, setInner] = React.useState(defaultValue);\n  const [loaded, setLoaded] = React.useState<{ width: number; height: number } | null>(null);\n  const value = valueProp ?? inner;\n  const id = React.useId();\n  const size = naturalSize ?? loaded;\n  const mediaAspect = size ? size.width / size.height : aspect;\n\n  // The media's box, in % of the frame: it covers the frame at zoom 1.\n  const widthPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * value.zoom;\n  const heightPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * value.zoom;\n  // The focus point's limits: the media never leaves a gap in the frame.\n  const halfX = 50 / widthPct;\n  const halfY = 50 / heightPct;\n\n  const set = (next: CropValue) => {\n    const zoom = clamp(next.zoom, 1, maxZoom);\n    const wPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * zoom;\n    const hPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * zoom;\n    const fixed = { x: clamp(next.x, 50 / wPct, 1 - 50 / wPct), y: clamp(next.y, 50 / hPct, 1 - 50 / hPct), zoom };\n    if (!valueProp) setInner(fixed);\n    onValueChange?.(fixed);\n  };\n\n  const x = clamp(value.x, halfX, 1 - halfX);\n  const y = clamp(value.y, halfY, 1 - halfY);\n  const style: React.CSSProperties = {\n    width: `${widthPct}%`,\n    height: `${heightPct}%`,\n    left: `${50 - x * widthPct}%`,\n    top: `${50 - y * heightPct}%`,\n  };\n\n  return (\n    <div className={s.root({ className })}>\n      <div\n        ref={frame}\n        role=\"group\"\n        tabIndex={0}\n        aria-label={labels.frame}\n        aria-describedby={`${id}-help`}\n        className={s.frame()}\n        style={{ aspectRatio: String(aspect) }}\n        onPointerDown={(event) => {\n          frame.current?.setPointerCapture?.(event.pointerId);\n          drag.current = { x: event.clientX, y: event.clientY, from: { x, y, zoom: value.zoom } };\n        }}\n        onPointerMove={(event) => {\n          const start = drag.current;\n          const box = frame.current?.getBoundingClientRect();\n          if (!start || !box?.width) return;\n          set({\n            x: start.from.x - (event.clientX - start.x) / ((box.width * widthPct) / 100),\n            y: start.from.y - (event.clientY - start.y) / ((box.height * heightPct) / 100),\n            zoom: value.zoom,\n          });\n        }}\n        onPointerUp={() => {\n          drag.current = null;\n        }}\n        onWheel={(event) => {\n          if (!event.ctrlKey && !event.metaKey) return;\n          event.preventDefault();\n          set({ x, y, zoom: value.zoom - event.deltaY * 0.01 });\n        }}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 0.1 : 0.02;\n          const moves: Record<string, CropValue> = {\n            ArrowLeft: { x: x - nudge, y, zoom: value.zoom },\n            ArrowRight: { x: x + nudge, y, zoom: value.zoom },\n            ArrowUp: { x, y: y - nudge, zoom: value.zoom },\n            ArrowDown: { x, y: y + nudge, zoom: value.zoom },\n            \"+\": { x, y, zoom: value.zoom + 0.1 },\n            \"=\": { x, y, zoom: value.zoom + 0.1 },\n            \"-\": { x, y, zoom: value.zoom - 0.1 },\n          };\n          const next = moves[event.key];\n          if (!next) return;\n          event.preventDefault();\n          set(next);\n        }}\n      >\n        {children ? (\n          React.cloneElement(children, { className: s.media({ className: children.props.className }), style: { ...children.props.style, ...style } })\n        ) : src ? (\n          <img\n            src={src}\n            alt={alt}\n            draggable={false}\n            className={s.media()}\n            style={style}\n            onLoad={(event) => setLoaded({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight })}\n          />\n        ) : null}\n        <span className={round ? s.round() : s.grid()} aria-hidden />\n        <span id={`${id}-help`} className=\"sr-only\">\n          {labels.instructions}\n        </span>\n      </div>\n      {showZoom && (\n        <Slider\n          label={labels.zoom}\n          min={1}\n          max={maxZoom}\n          step={0.05}\n          value={value.zoom}\n          onValueChange={(zoom) => set({ x, y, zoom })}\n          formatValue={(v) => `${Math.round(v * 100)} %`}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/landscape.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-5AXLA4LK.js";
+} from "./chunk-G3ETON2A.js";
 
 // src/landscape/landscape.tsx
 import { useId } from "react";

package/dist/link-card.js

@@ -8,7 +8,7 @@ import {
 } from "./chunk-XCBVFMNV.js";
 import {
   cn
-} from "./chunk-FJDSLNXK.js";
+} from "./chunk-4LOMIQVX.js";
 
 // src/link-card/link-card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/longform-page.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-KNBYZGSQ.js";
+} from "./chunk-ZNMFG62E.js";
 
 // src/longform-page/longform-page.tsx
 import { Page } from "@krizaka/ui/page";

package/dist/marquee.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-5AXLA4LK.js";
+} from "./chunk-2FRWNSRO.js";
 
 // src/marquee/marquee.tsx
 import * as React from "react";

package/dist/mascot-quote.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-5AXLA4LK.js";
+} from "./chunk-G3ETON2A.js";
 
 // src/mascots/mascot.tsx
 import { useId } from "react";

package/dist/motion.css

@@ -186,6 +186,23 @@
   from { opacity: 0; transform: translateY(-6px) scale(0.96); }
 }
 
+/* The calendar turns its page: the month slides in from the side it comes from (Calendar, `data-dir`). */
+.kz-month[data-dir="next"] { animation: kz-month-next 0.28s var(--kz-ease) backwards; }
+.kz-month[data-dir="previous"] { animation: kz-month-previous 0.28s var(--kz-ease) backwards; }
+@keyframes kz-month-next { from { opacity: 0; transform: translateX(14px); } }
+@keyframes kz-month-previous { from { opacity: 0; transform: translateX(-14px); } }
+/* A wheel curves: each value tilts as it leaves the band — a scroll-driven animation, no script per frame, flat where
+   the browser has no view timelines (the fade is the list's mask: the words keep their contrast). Scroll-linked, not
+   timed: it stays under reduced motion. */
+@supports (animation-timeline: view()) {
+  .kz-wheel-item { animation: kz-wheel-turn linear both; animation-timeline: view(block); }
+  @keyframes kz-wheel-turn {
+    0% { transform: perspective(240px) rotateX(48deg) scale(0.9); }
+    50% { transform: none; }
+    100% { transform: perspective(240px) rotateX(-48deg) scale(0.9); }
+  }
+}
+
 /* Section backdrop (SectionBackdrop): the brand's section gradient (--kz-brand-gradient-*), sections that glide from
    one temperature to the next (each ends on the page surface, so the next starts where it stopped), a light dome, a
    perspective grid, a blurred foreground for depth of field, and a very slow drift. */
@@ -612,7 +629,7 @@ svg[data-kz-icon="ExternalIcon"] {
   .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress,
   .kz-skeleton, .kz-skeleton-shape *, .kz-toast::after, .kz-glow::before,
   .kz-rotating > *, .kz-loop, .kz-iso-rise, .kz-count-roll, .kz-loader-trace, .kz-loader-node, .kz-loader-mark,
-  [data-kz-status], .kz-replay-caret { animation: none !important; }
+  [data-kz-status], .kz-replay-caret, .kz-month { animation: none !important; }
   /* At rest, the trace stands still where a reader expects it: a third of the hexagon from the top. */
   .kz-loader-trace:not([stroke-dasharray]) { stroke-dashoffset: -8; }
   [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }

package/dist/native/form.d.ts

@@ -1,6 +1,6 @@
 import { AnyFieldApi, StandardSchemaV1, DeepKeys, AnyFormApi } from '@tanstack/react-form';
 import * as React from 'react';
-import { DateFieldLabels, BrandId, TextFieldProps as TextFieldProps$1 } from '@krizaka/ui/native';
+import { ComboboxLabels, DateFieldLabels, BrandId, TextFieldProps as TextFieldProps$1 } from '@krizaka/ui/native';
 import { StyleProp, ViewStyle } from 'react-native';
 
 /** A value a message placeholder takes (`{minimum}`, `{suggestion}`). */
@@ -294,32 +294,75 @@ type CheckboxProps = Omit<Base, "label" | "hint"> & {
 };
 /** A box of the form (`boolean`): terms to accept, an option. */
 declare function Checkbox({ name, label, accessibleLabel, disabled, style }: CheckboxProps): React.JSX.Element;
-/** An on/off setting of the form (`boolean`): its label and hint beside the system's switch. */
+/** An on/off setting of the form (`boolean`): a settings row — the label and its hint beside the switch, all pressable. */
 declare function Switch({ name, label, hint, disabled, style }: Base): React.JSX.Element;
-/** A choice of the form: the value stored and its words (passed translated). */
+/** A choice of the form: the value stored and its words (passed translated), a line under them. */
 type FormOption = {
     value: string;
     label: string;
+    description?: string;
     disabled?: boolean;
 };
 type RadioGroupProps = Base & {
-    /** The choices, as chips (one chosen). */
+    /** The choices, all visible (two to five). */
     options: readonly FormOption[];
-    /** Scrolls the chips sideways instead of wrapping them (many choices). */
-    scrollable?: boolean;
+    /** `list` (dots, default), `cards`, `buttons` (tactile keys) or `segmented` — the native `RadioGroup`'s looks. */
+    variant?: "list" | "cards" | "buttons" | "segmented";
 };
-/** One choice among a few, as chips (a radio group). On native, `Select` is the same control. */
-declare function RadioGroup({ name, label, hint, disabled, style, options, scrollable }: RadioGroupProps): React.JSX.Element;
-/** One choice among several (the web's `<select>`): chips on native, scrolled sideways when they are many. */
-declare function Select(props: RadioGroupProps): React.JSX.Element;
+/** One choice among a few, all visible: the native `RadioGroup` (a haptic on each choice). */
+declare function RadioGroup({ name, label, hint, disabled, style, options, variant }: RadioGroupProps): React.JSX.Element;
+type SelectProps = Base & {
+    /** The choices, in a sheet. */
+    options: readonly FormOption[];
+    /** Shown while nothing is chosen ("Choose a category"), passed translated. */
+    placeholder?: string;
+};
+/** One choice among many (the web's `<select>`): a field that opens a sheet of options. */
+declare function Select({ name, label, hint, disabled, style, options, placeholder }: SelectProps): React.JSX.Element;
+type ComboboxProps = Base & {
+    /** The options, filtered as the person types. */
+    options?: readonly FormOption[];
+    /** Fetches the options for a query (debounced, aborted by a newer one). */
+    onSearch?: (query: string, signal: AbortSignal) => Promise<readonly FormOption[]>;
+    /** Several values (`string[]`); one (`string`) by default. */
+    multiple?: boolean;
+    /** Shown while nothing is chosen, passed translated. */
+    placeholder?: string;
+    /** The words of the control, passed translated. */
+    labels?: Partial<ComboboxLabels>;
+};
+/** A choice among many, searched in a sheet: one value (`string`) or several (`string[]`). */
+declare function Combobox({ name, label, hint, disabled, style, options, onSearch, multiple, placeholder, labels }: ComboboxProps): React.JSX.Element;
 type DateFieldProps = Base & {
-    /** The names of the boxes (`day`, `month`, `year`), passed translated. */
+    /** `wheel` (default: day, month and year as wheels) or `parts` (typed on the numeric keypad). */
+    entry?: "wheel" | "parts";
+    /** The earliest date (ISO) of the wheels. */
+    min?: string;
+    /** The latest date (ISO) of the wheels: `latestBirthDate(18)` for an age gate. */
+    max?: string;
+    /** The names of the wheels or boxes (`day`, `month`, `year`), passed translated. */
     labels?: Partial<DateFieldLabels>;
-    /** `bday` for a date of birth. */
+    /** `bday` for a date of birth: the wheels rest on 1 January 2000 until turned; typed boxes are autofilled. */
     autoComplete?: "bday" | "off";
 };
-/** A date of the form (`YYYY-MM-DD`): day, month and year typed in the locale's order — the schema checks it. */
-declare function DateField({ name, label, hint, disabled, style, labels, autoComplete }: DateFieldProps): React.JSX.Element;
+/** A date of the form (`YYYY-MM-DD`): wheels in the locale's order (or day · month · year typed) — the schema checks it. */
+declare function DateField({ name, label, hint, disabled, style, labels, autoComplete, entry, min, max }: DateFieldProps): React.JSX.Element;
+type SliderProps = Base & {
+    /** The lowest value. Default 0. */
+    min?: number;
+    /** The highest value. Default 100. */
+    max?: number;
+    /** The step. Default 1. */
+    step?: number;
+    /** The value as words ("15 %", "3 min"), shown and read. */
+    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[];
+};
+/** 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, style, min, max, step, formatValue, thumbLabels, ticks }: SliderProps): React.JSX.Element;
 type MoneyProps = Base & {
     /** The currency (ISO 4217): its sign beside the amount, its decimals. */
     currency: string;
@@ -364,8 +407,10 @@ declare const createKrizakaForm: <S extends FormSchema>(definition: KrizakaFormD
     Switch: typeof Switch;
     RadioGroup: typeof RadioGroup;
     Select: typeof Select;
+    Combobox: typeof Combobox;
     DateField: typeof DateField;
     Money: typeof Money;
+    Slider: typeof Slider;
     Field: typeof FormField;
     FieldArray: typeof FieldArray;
     Watch: typeof Watch;
@@ -373,4 +418,4 @@ declare const createKrizakaForm: <S extends FormSchema>(definition: KrizakaFormD
     FormError: typeof FormError;
 }, FormProps>;
 
-export { Checkbox, type CheckboxProps, DateField, type DateFieldProps, FieldArray, type FieldArrayProps, type FieldCheck, type FormActionResult, FormError, type FormErrorProps, FormField, type FormFieldError, type FormFieldProps, type FormI18n, type FormOption, type FormOutput, type FormProblem, type FormProps, type FormSchema, type FormValues, type KrizakaField, type KrizakaFieldArray, type KrizakaFormFactory, type KrizakaFormInstance, Money, type MoneyProps, RadioGroup, type RadioGroupProps, Select, Submit, type SubmitProps, Switch, TextArea, type TextAreaProps, TextField, type TextFieldProps, Watch, type WatchProps, createKrizakaForm, formMessage, formMessages, isRealDate, latestBirthDate, useFormContext, useFormStatus, useFormValue, useKrizakaField, useKrizakaFieldArray };
+export { Checkbox, type CheckboxProps, Combobox, type ComboboxProps, DateField, type DateFieldProps, FieldArray, type FieldArrayProps, type FieldCheck, type FormActionResult, FormError, type FormErrorProps, FormField, type FormFieldError, type FormFieldProps, type FormI18n, type FormOption, type FormOutput, type FormProblem, type FormProps, type FormSchema, type FormValues, type KrizakaField, type KrizakaFieldArray, type KrizakaFormFactory, type KrizakaFormInstance, Money, type MoneyProps, RadioGroup, type RadioGroupProps, Select, type SelectProps, Slider, type SliderProps, Submit, type SubmitProps, Switch, TextArea, type TextAreaProps, TextField, type TextFieldProps, Watch, type WatchProps, createKrizakaForm, formMessage, formMessages, isRealDate, latestBirthDate, useFormContext, useFormStatus, useFormValue, useKrizakaField, useKrizakaFieldArray };

package/dist/native/form.js

@@ -1,7 +1,22 @@
 // src/native/form.tsx
-import { Button, Checkbox as CheckboxControl, Chip, DateField as DateFieldControl, ProductMark, Spinner, TextField as TextFieldControl, Txt, useTheme } from "@krizaka/ui/native";
+import {
+  Button,
+  Checkbox as CheckboxControl,
+  Combobox as ComboboxControl,
+  DateField as DateFieldControl,
+  DateWheel,
+  ProductMark,
+  RadioGroup as RadioGroupControl,
+  Select as SelectControl,
+  Slider as SliderControl,
+  Spinner,
+  Switch as SwitchControl,
+  TextField as TextFieldControl,
+  Txt,
+  useTheme
+} from "@krizaka/ui/native";
 import * as React2 from "react";
-import { AccessibilityInfo, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Switch as SwitchControl, View } from "react-native";
+import { AccessibilityInfo, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, View } from "react-native";
 
 // src/form/core.tsx
 import { useField, useForm, useStore } from "@tanstack/react-form";
@@ -420,12 +435,12 @@ function useChain(ctx) {
     };
   }, [ctx]);
 }
-function useChained(override) {
+function useChained(override, skip = false) {
   const chain = React2.useContext(ChainContext);
   const key = React2.useId();
   const ref = React2.useRef(null);
   const [last, setLast] = React2.useState(false);
-  React2.useLayoutEffect(() => chain?.register({ key, focus: () => ref.current?.focus(), setLast }), [chain, key]);
+  React2.useLayoutEffect(() => skip ? void 0 : chain?.register({ key, focus: () => ref.current?.focus(), setLast }), [chain, key, skip]);
   if (!chain || override.returnKeyType !== void 0 || override.onSubmitEditing !== void 0) return { inputRef: ref };
   return {
     inputRef: ref,
@@ -512,61 +527,107 @@ function Checkbox({ name, label, accessibleLabel, disabled, style }) {
 }
 function Switch({ name, label, hint, disabled, style }) {
   const f = useKrizakaField(name);
-  const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs(View, { style: [styles.switchRow, style], children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.switchText, children: [
-      /* @__PURE__ */ jsx2(Txt, { variant: "label", children: label }),
-      f.error ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: f.error }) : hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null
-    ] }),
-    /* @__PURE__ */ jsx2(
-      SwitchControl,
-      {
-        "aria-label": label,
-        accessibilityHint: f.error ?? hint,
-        value: f.value === true,
-        disabled,
-        onValueChange: (on) => {
-          f.setValue(on);
-          f.onBlur();
-        },
-        trackColor: { false: theme.surface3, true: theme.accent },
-        thumbColor: theme.textOnMedia,
-        ...{ activeThumbColor: theme.textOnMedia },
-        ios_backgroundColor: theme.surface3
+  return /* @__PURE__ */ jsx2(
+    SwitchControl,
+    {
+      label,
+      description: hint,
+      showLabel: true,
+      error: f.error,
+      checked: f.value === true,
+      disabled,
+      style,
+      onCheckedChange: (on) => {
+        f.setValue(on);
+        f.onBlur();
       }
-    )
-  ] });
+    }
+  );
+}
+function Caption({ field, hint }) {
+  if (field.error)
+    return /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: field.error });
+  return hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null;
 }
-function RadioGroup({ name, label, hint, disabled, style, options, scrollable }) {
+function RadioGroup({ name, label, hint, disabled, style, options, variant = "list" }) {
   const f = useKrizakaField(name);
   return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
     /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", style: styles.groupLabel, children: label }),
     /* @__PURE__ */ jsx2(
-      Chip.Group,
+      RadioGroupControl,
       {
-        type: "single",
-        "aria-label": label,
+        label,
+        variant,
+        options,
         value: f.value ?? "",
         disabled,
-        scrollable,
         onValueChange: (v) => {
           f.setValue(v);
           f.onBlur();
-        },
-        children: options.map((o) => /* @__PURE__ */ jsx2(Chip, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+        }
       }
     ),
-    f.error ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: f.error }) : hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
   ] });
 }
-function Select(props) {
-  return /* @__PURE__ */ jsx2(RadioGroup, { scrollable: props.options.length > 4, ...props });
+function Select({ name, label, hint, disabled, style, options, placeholder }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsx2(SelectControl, { label, hint, error: f.error, disabled, style, options, placeholder, value: f.value ?? "", onValueChange: (v) => f.setValue(v), onBlur: f.onBlur });
 }
-function DateField({ name, label, hint, disabled, style, labels, autoComplete }) {
+function Combobox({ name, label, hint, disabled, style, options, onSearch, multiple, placeholder, labels }) {
   const f = useKrizakaField(name);
-  const chained = useChained({});
+  return /* @__PURE__ */ jsx2(
+    ComboboxControl,
+    {
+      label,
+      hint,
+      error: f.error,
+      disabled,
+      style,
+      options,
+      onSearch,
+      multiple,
+      placeholder,
+      labels,
+      value: f.value ?? (multiple ? [] : ""),
+      onValueChange: (v) => f.setValue(v),
+      onBlur: f.onBlur
+    }
+  );
+}
+function DateField({ name, label, hint, disabled, style, labels, autoComplete, entry = "wheel", min, max }) {
+  const f = useKrizakaField(name);
+  const chained = useChained({}, entry === "wheel");
+  if (entry === "wheel")
+    return /* @__PURE__ */ jsx2(
+      DateWheel,
+      {
+        label,
+        hint,
+        error: f.error,
+        disabled,
+        style,
+        labels,
+        locale: f.locale,
+        min,
+        max,
+        defaultView: autoComplete === "bday" ? "2000-01-01" : void 0,
+        value: f.value ?? "",
+        onValueChange: (v) => {
+          f.setValue(v);
+          f.onBlur();
+        }
+      }
+    );
   return /* @__PURE__ */ jsx2(DateFieldControl, { ...chained, returnKeyType: chained.returnKeyType, label, hint, error: f.error, disabled, style, labels, autoComplete, locale: f.locale, value: f.value ?? "", onValueChange: (v) => f.setValue(v), onBlur: f.onBlur });
 }
+function Slider({ name, label, hint, disabled, style, min, max, step, formatValue, thumbLabels, ticks }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
+    /* @__PURE__ */ jsx2(SliderControl, { label, showLabel: true, floatingValue: true, value: f.value, min, max, step, disabled, formatValue, thumbLabels, ticks, onValueChange: (v) => f.setValue(v), onValueCommit: () => f.onBlur() }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
 function Money({ name, label, hint, disabled, style, currency, placeholder }) {
   const f = useKrizakaField(name);
   const [text, setText] = React2.useState(() => moneyInputText(f.value, currency, f.locale));
@@ -610,7 +671,7 @@ function FieldArray({ name, children }) {
 function Watch({ name, children }) {
   return /* @__PURE__ */ jsx2(Fragment, { children: children(useFormValue(name)) });
 }
-var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, DateField, Money, Field: FormField, FieldArray, Watch, Submit, FormError };
+var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };
 var createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);
 var styles = StyleSheet.create({
   form: { gap: 16, alignSelf: "stretch" },
@@ -618,12 +679,11 @@ var styles = StyleSheet.create({
   field: { gap: 6, alignSelf: "stretch" },
   suggestion: { alignSelf: "flex-start", minHeight: 32, justifyContent: "center" },
   alert: { borderWidth: 1, padding: 12, gap: 4 },
-  switchRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 16, minHeight: 44 },
-  switchText: { flex: 1, gap: 2 },
   groupLabel: { fontWeight: "600" }
 });
 export {
   Checkbox,
+  Combobox,
   DateField,
   FieldArray,
   FormError,
@@ -631,6 +691,7 @@ export {
   Money,
   RadioGroup,
   Select,
+  Slider,
   Submit,
   Switch,
   TextArea,