@krizaka/ui 2.2.0 → 2.4.0

package/dist/search-field.js

@@ -0,0 +1,167 @@
+"use client";
+import {
+  useListbox
+} from "./chunk-ZIXB33X7.js";
+import {
+  useControllable,
+  useDebouncedCallback
+} from "./chunk-EUPTXKH7.js";
+import {
+  CloseGlyph,
+  SearchGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/search-field/search-field.tsx
+import * as React from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/kbd/kbd.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+
+// src/search-field/search-field.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var searchField = tv2({
+  slots: {
+    root: "relative w-full",
+    control: "flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
+    icon: "h-4 w-4 shrink-0 text-fg-secondary",
+    input: "h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted [&::-webkit-search-cancel-button]:appearance-none",
+    clear: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    shortcut: "hidden shrink-0 items-center gap-0.5 pr-1 sm:flex",
+    list: "absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg",
+    option: "flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3",
+    group: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted"
+  },
+  variants: {
+    size: { md: {}, sm: { control: "h-9", clear: "h-7 w-7" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+function SearchField({
+  label,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSearch,
+  debounce = 250,
+  onSubmit,
+  shortcut = false,
+  suggestions,
+  suggestionsLabel,
+  onSuggestionSelect,
+  clearLabel = "Clear search",
+  landmark = true,
+  size,
+  className,
+  placeholder,
+  ...props
+}) {
+  const s = searchField({ size });
+  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = React.useState(false);
+  const [apple, setApple] = React.useState(false);
+  const input = React.useRef(null);
+  const search = useDebouncedCallback((query) => onSearch?.(query), debounce);
+  const list = suggestions ?? [];
+  const pick = (i) => {
+    const suggestion = list[i];
+    if (!suggestion) return;
+    setOpen(false);
+    onSuggestionSelect?.(suggestion);
+  };
+  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });
+  React.useEffect(() => {
+    if (!shortcut) return;
+    setApple(isApple());
+    const onKey = (event) => {
+      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {
+        event.preventDefault();
+        input.current?.focus();
+        input.current?.select();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut]);
+  const change = (query) => {
+    setValue(query);
+    search(query);
+    listbox.setActive(-1);
+    setOpen(true);
+  };
+  const field = /* @__PURE__ */ jsxs("div", { className: s.root({ className }), onBlur: (event) => !event.currentTarget.contains(event.relatedTarget) && setOpen(false), children: [
+    /* @__PURE__ */ jsxs("div", { className: s.control(), children: [
+      /* @__PURE__ */ jsx2(SearchGlyph, { className: s.icon() }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: input,
+          type: "search",
+          "aria-label": label,
+          enterKeyHint: "search",
+          autoComplete: "off",
+          ...list.length > 0 ? listbox.inputProps : {},
+          value,
+          placeholder,
+          className: s.input(),
+          onChange: (event) => change(event.target.value),
+          onFocus: () => setOpen(true),
+          onKeyDown: (event) => {
+            if (list.length > 0 && listbox.onKeyDown(event)) return;
+            if (event.key === "Enter") {
+              event.preventDefault();
+              search.cancel();
+              onSearch?.(value);
+              onSubmit?.(value);
+              setOpen(false);
+            } else if (event.key === "Escape" && value) {
+              event.preventDefault();
+              change("");
+            }
+          },
+          ...props
+        }
+      ),
+      value ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-label": clearLabel,
+          className: s.clear(),
+          onClick: () => {
+            change("");
+            input.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" })
+        }
+      ) : shortcut ? /* @__PURE__ */ jsxs("span", { className: s.shortcut(), "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: apple ? "\u2318" : "Ctrl" }),
+        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: shortcut.toUpperCase() })
+      ] }) : null
+    ] }),
+    list.length > 0 && /* @__PURE__ */ jsxs("div", { hidden: !open, className: s.list(), children: [
+      suggestionsLabel ? /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.group(), children: suggestionsLabel }) : null,
+      /* @__PURE__ */ jsx2("div", { id: listbox.listId, role: "listbox", "aria-label": suggestionsLabel ?? label, children: list.map((suggestion, i) => /* @__PURE__ */ jsxs("div", { ...listbox.optionProps(i, false), className: s.option(), children: [
+        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 shrink-0 text-fg-muted" }),
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: suggestion.label }),
+        suggestion.meta ? /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-xs text-fg-secondary", children: suggestion.meta }) : null
+      ] }, suggestion.value)) })
+    ] })
+  ] });
+  return landmark ? /* @__PURE__ */ jsx2("div", { role: "search", children: field }) : field;
+}
+export {
+  SearchField,
+  searchField
+};
+//# sourceMappingURL=search-field.js.map

package/dist/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/search-field/search-field.tsx","../src/kbd/kbd.tsx"],"sourcesContent":["// Client. A search input (`type=\"search\"` inside a `role=\"search\"` landmark when it stands alone): a leading glyph,\n// a clear button, a global shortcut that focuses it (⌘K on Apple devices, Ctrl+K elsewhere, shown as `Kbd`), and\n// optional suggestions through the shared combobox engine. `onSearch` is debounced; Enter submits.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, SearchGlyph } from \"../glyphs\";\nimport { Kbd } from \"../kbd\";\nimport { useListbox } from \"../listbox\";\nimport { useControllable, useDebouncedCallback } from \"../media\";\n\nexport const searchField = tv({\n  slots: {\n    root: \"relative w-full\",\n    control:\n      \"flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg \" +\n      \"transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring\",\n    icon: \"h-4 w-4 shrink-0 text-fg-secondary\",\n    input:\n      \"h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted \" +\n      \"[&::-webkit-search-cancel-button]:appearance-none\",\n    clear:\n      \"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    shortcut: \"hidden shrink-0 items-center gap-0.5 pr-1 sm:flex\",\n    list: \"absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg\",\n    option: \"flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3\",\n    group: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted\",\n  },\n  variants: {\n    size: { md: {}, sm: { control: \"h-9\", clear: \"h-7 w-7\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SearchSuggestion = {\n  /** What `onSuggestionSelect` receives. */\n  value: string;\n  /** What the person reads. */\n  label: string;\n  /** A small text on the right (\"Creator\", \"12 videos\"). */\n  meta?: string;\n};\n\nexport type SearchFieldProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"size\" | \"type\"> & {\n  /** The accessible name of the input (\"Search videos\"), passed translated. */\n  label: string;\n  /** The query (controlled). */\n  value?: string;\n  /** The query at first, uncontrolled. */\n  defaultValue?: string;\n  /** Called on every key with the query. */\n  onValueChange?: (query: string) => void;\n  /** Called with the query once typing pauses (`debounce` ms): fetch the results here. */\n  onSearch?: (query: string) => void;\n  /** The pause, in ms, before `onSearch`. Default 250. */\n  debounce?: number;\n  /** Called on Enter (no suggestion active) with the query: go to the results page. */\n  onSubmit?: (query: string) => void;\n  /** The global key that focuses the field with ⌘ / Ctrl (`\"k\"`), or `false` for none. Default `false`. */\n  shortcut?: string | false;\n  /** Suggestions under the field (recent searches, completions). */\n  suggestions?: readonly SearchSuggestion[];\n  /** A title above the suggestions (\"Recent searches\"). */\n  suggestionsLabel?: string;\n  /** Called with a suggestion picked (Enter on it, or a click). */\n  onSuggestionSelect?: (suggestion: SearchSuggestion) => void;\n  /** The clear button's name (\"Clear search\"), passed translated. */\n  clearLabel?: string;\n  /** Wraps the field in a `role=\"search\"` landmark (default) — `false` inside a form that already is one. */\n  landmark?: boolean;\n  /** md (default) · sm. */\n  size?: \"md\" | \"sm\";\n};\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\n/** A search box: clear, shortcut, debounced search, submit on Enter, suggestions with the keyboard. */\nexport function SearchField({\n  label,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSearch,\n  debounce = 250,\n  onSubmit,\n  shortcut = false,\n  suggestions,\n  suggestionsLabel,\n  onSuggestionSelect,\n  clearLabel = \"Clear search\",\n  landmark = true,\n  size,\n  className,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const s = searchField({ size });\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const [apple, setApple] = React.useState(false);\n  const input = React.useRef<HTMLInputElement>(null);\n  const search = useDebouncedCallback((query: string) => onSearch?.(query), debounce);\n  const list = suggestions ?? [];\n\n  const pick = (i: number) => {\n    const suggestion = list[i];\n    if (!suggestion) return;\n    setOpen(false);\n    onSuggestionSelect?.(suggestion);\n  };\n  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the platform is only known in the browser (no hydration mismatch)\n    setApple(isApple());\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {\n        event.preventDefault();\n        input.current?.focus();\n        input.current?.select();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [shortcut]);\n\n  const change = (query: string) => {\n    setValue(query);\n    search(query);\n    listbox.setActive(-1);\n    setOpen(true);\n  };\n\n  const field = (\n    <div className={s.root({ className })} onBlur={(event) => !event.currentTarget.contains(event.relatedTarget as Node | null) && setOpen(false)}>\n      <div className={s.control()}>\n        <SearchGlyph className={s.icon()} />\n        <input\n          ref={input}\n          type=\"search\"\n          aria-label={label}\n          enterKeyHint=\"search\"\n          autoComplete=\"off\"\n          {...(list.length > 0 ? listbox.inputProps : {})}\n          value={value}\n          placeholder={placeholder}\n          className={s.input()}\n          onChange={(event) => change(event.target.value)}\n          onFocus={() => setOpen(true)}\n          onKeyDown={(event) => {\n            if (list.length > 0 && listbox.onKeyDown(event)) return;\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              search.cancel();\n              onSearch?.(value);\n              onSubmit?.(value);\n              setOpen(false);\n            } else if (event.key === \"Escape\" && value) {\n              event.preventDefault();\n              change(\"\");\n            }\n          }}\n          {...props}\n        />\n        {value ? (\n          <button\n            type=\"button\"\n            aria-label={clearLabel}\n            className={s.clear()}\n            onClick={() => {\n              change(\"\");\n              input.current?.focus();\n            }}\n          >\n            <CloseGlyph className=\"h-4 w-4\" />\n          </button>\n        ) : shortcut ? (\n          <span className={s.shortcut()} aria-hidden>\n            <Kbd size=\"sm\">{apple ? \"⌘\" : \"Ctrl\"}</Kbd>\n            <Kbd size=\"sm\">{shortcut.toUpperCase()}</Kbd>\n          </span>\n        ) : null}\n      </div>\n      {list.length > 0 && (\n        <div hidden={!open} className={s.list()}>\n          {suggestionsLabel ? (\n            <div aria-hidden className={s.group()}>\n              {suggestionsLabel}\n            </div>\n          ) : null}\n          <div id={listbox.listId} role=\"listbox\" aria-label={suggestionsLabel ?? label}>\n            {list.map((suggestion, i) => (\n              <div key={suggestion.value} {...listbox.optionProps(i, false)} className={s.option()}>\n                <SearchGlyph className=\"h-3.5 w-3.5 shrink-0 text-fg-muted\" />\n                <span className=\"min-w-0 flex-1 truncate\">{suggestion.label}</span>\n                {suggestion.meta ? <span className=\"shrink-0 text-xs text-fg-secondary\">{suggestion.meta}</span> : null}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n  return landmark ? <div role=\"search\">{field}</div> : field;\n}\n","// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"],"mappings":"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","names":["tv","jsx","tv"]}

package/dist/skeleton.d.ts

@@ -8,7 +8,7 @@ declare const skeletonVariants: tailwind_variants.TVReturnType<{
         circle: "aspect-square h-10 rounded-full";
         rect: "h-24 w-full rounded-lg";
     };
-}, undefined, "block bg-surface-3 motion-safe:animate-pulse", {
+}, undefined, "kz-skeleton block bg-surface-3", {
     shape: {
         text: "h-3 w-full rounded-sm";
         circle: "aspect-square h-10 rounded-full";
@@ -28,7 +28,22 @@ type SkeletonProps = React.ComponentProps<"span"> & {
      */
     shape?: VariantProps<typeof skeletonVariants>["shape"];
 };
-/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */
+/** A shape the size of what is loading. Announce the wait elsewhere (`LoadingRegion` does it, with `aria-busy`). */
 declare function Skeleton({ shape, className, ...props }: SkeletonProps): React.JSX.Element;
+type SkeletonTextProps = React.ComponentProps<"span"> & {
+    /**
+     * How many lines.
+     * @default 3
+     */
+    lines?: number;
+};
+/** A paragraph on its way: `lines` lines, the last one shorter — like text that wraps. */
+declare function SkeletonText({ lines, className, ...props }: SkeletonTextProps): React.JSX.Element;
+type SkeletonShapeProps = React.ComponentProps<"div">;
+/**
+ * The skeleton of the real thing: render your component with placeholder data inside, and its text, images and icons
+ * become skeleton shapes in place — the exact layout, nothing to draw twice. Inert and hidden from assistive technology.
+ */
+declare function SkeletonShape({ className, children, ...props }: SkeletonShapeProps): React.JSX.Element;
 
-export { Skeleton, type SkeletonProps, skeletonVariants };
+export { Skeleton, type SkeletonProps, SkeletonShape, type SkeletonShapeProps, SkeletonText, type SkeletonTextProps, skeletonVariants };

package/dist/skeleton.js

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 var skeletonVariants = tv({
-  base: "block bg-surface-3 motion-safe:animate-pulse",
+  base: "kz-skeleton block bg-surface-3",
   variants: {
     shape: { text: "h-3 w-full rounded-sm", circle: "aspect-square h-10 rounded-full", rect: "h-24 w-full rounded-lg" }
   },
@@ -11,8 +11,16 @@ var skeletonVariants = tv({
 function Skeleton({ shape, className, ...props }) {
   return /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-shape": shape ?? "text", className: skeletonVariants({ shape, className }), ...props });
 }
+function SkeletonText({ lines = 3, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ["flex w-full flex-col gap-2", className].filter(Boolean).join(" "), ...props, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: i === lines - 1 && lines > 1 ? "w-3/5" : void 0 }, i)) });
+}
+function SkeletonShape({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, inert: true, className: ["kz-skeleton-shape", className].filter(Boolean).join(" "), ...props, children });
+}
 export {
   Skeleton,
+  SkeletonShape,
+  SkeletonText,
   skeletonVariants
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"block bg-surface-3 motion-safe:animate-pulse\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & {\n  /**\n   * text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).\n   * @default \"text\"\n   */\n  shape?: VariantProps<typeof skeletonVariants>[\"shape\"];\n};\n\n/** A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAoB7B;AAlBF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;","names":[]}
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology. One reflection of\n// the brand light crosses every skeleton of the page together (`background-attachment: fixed`), instead of each one\n// pulsing on its own; under reduced motion they rest, tinted.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"kz-skeleton block bg-surface-3\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & {\n  /**\n   * text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).\n   * @default \"text\"\n   */\n  shape?: VariantProps<typeof skeletonVariants>[\"shape\"];\n};\n\n/** A shape the size of what is loading. Announce the wait elsewhere (`LoadingRegion` does it, with `aria-busy`). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n\nexport type SkeletonTextProps = React.ComponentProps<\"span\"> & {\n  /**\n   * How many lines.\n   * @default 3\n   */\n  lines?: number;\n};\n\n/** A paragraph on its way: `lines` lines, the last one shorter — like text that wraps. */\nexport function SkeletonText({ lines = 3, className, ...props }: SkeletonTextProps) {\n  return (\n    <span aria-hidden className={[\"flex w-full flex-col gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton key={i} className={i === lines - 1 && lines > 1 ? \"w-3/5\" : undefined} />\n      ))}\n    </span>\n  );\n}\n\nexport type SkeletonShapeProps = React.ComponentProps<\"div\">;\n\n/**\n * The skeleton of the real thing: render your component with placeholder data inside, and its text, images and icons\n * become skeleton shapes in place — the exact layout, nothing to draw twice. Inert and hidden from assistive technology.\n */\nexport function SkeletonShape({ className, children, ...props }: SkeletonShapeProps) {\n  return (\n    <div aria-hidden inert className={[\"kz-skeleton-shape\", className].filter(Boolean).join(\" \")} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAA6B;AAoB7B;AAlBF,IAAM,mBAAmB,GAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO,EAAE,MAAM,yBAAyB,QAAQ,mCAAmC,MAAM,yBAAyB;AAAA,EACpH;AAAA,EACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,WAAW,GAAG,MAAM,GAAkB;AACtE,SAAO,oBAAC,UAAK,eAAW,MAAC,cAAY,SAAS,QAAQ,WAAW,iBAAiB,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACtH;AAWO,SAAS,aAAa,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAsB;AAClF,SACE,oBAAC,UAAK,eAAW,MAAC,WAAW,CAAC,8BAA8B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OACnG,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,YAAiB,WAAW,MAAM,QAAQ,KAAK,QAAQ,IAAI,UAAU,UAAvD,CAAkE,CAClF,GACH;AAEJ;AAQO,SAAS,cAAc,EAAE,WAAW,UAAU,GAAG,MAAM,GAAuB;AACnF,SACE,oBAAC,SAAI,eAAW,MAAC,OAAK,MAAC,WAAW,CAAC,qBAAqB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAC/F,UACH;AAEJ;","names":[]}

package/dist/spinner.d.ts

@@ -1,6 +1,17 @@
+import * as React from 'react';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-import * as React from 'react';
+
+/** What the glyph shows: a wait (with an optional value), or how it ended. */
+type LoaderGlyphState = "loading" | "success" | "error";
+interface LoaderGlyphProps extends Omit<React.ComponentProps<"svg">, "children"> {
+    /** loading · success · error. */
+    state?: LoaderGlyphState;
+    /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */
+    value?: number | null;
+}
+/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */
+declare function LoaderGlyph({ state, value, ...props }: LoaderGlyphProps): React.JSX.Element;
 
 declare const spinnerVariants: tailwind_variants.TVReturnType<{
     size: {
@@ -8,7 +19,7 @@ declare const spinnerVariants: tailwind_variants.TVReturnType<{
         md: "h-6 w-6";
         lg: "h-10 w-10";
     };
-}, undefined, "shrink-0 text-accent motion-safe:animate-spin", {
+}, undefined, "shrink-0 text-accent", {
     size: {
         sm: "h-4 w-4";
         md: "h-6 w-6";
@@ -29,8 +40,13 @@ type SpinnerProps = Omit<React.ComponentProps<"svg">, "children"> & VariantProps
     size?: VariantProps<typeof spinnerVariants>["size"];
     /** The accessible name of the wait, e.g. "Loading" — passed translated. */
     label: string;
+    /** Between 0 and 1: the trace grows to the value (a determinate wait). Absent: it travels around. */
+    value?: number | null;
 };
-/** A turning ring with `role="status"` (it stops turning under prefers-reduced-motion). */
-declare function Spinner({ label, size, className, ...props }: SpinnerProps): React.JSX.Element;
+/**
+ * The Krizaka spinner: a hexagon traced by a segment of light around a breathing node, in `currentColor` (the accent by
+ * default). `role="status"`, named by `label`. Under prefers-reduced-motion it rests — a segment and the node lit.
+ */
+declare function Spinner({ label, size, value, className, ...props }: SpinnerProps): React.JSX.Element;
 
-export { Spinner, type SpinnerProps, spinnerVariants };
+export { LoaderGlyph, type LoaderGlyphProps, type LoaderGlyphState, Spinner, type SpinnerProps, spinnerVariants };

package/dist/spinner.js

@@ -1,30 +1,31 @@
+import {
+  LoaderGlyph
+} from "./chunk-43PTCDTL.js";
+
 // src/spinner/spinner.tsx
 import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var spinnerVariants = tv({
-  base: "shrink-0 text-accent motion-safe:animate-spin",
+  base: "shrink-0 text-accent",
   variants: { size: { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-10 w-10" } },
   defaultVariants: { size: "md" }
 });
-function Spinner({ label, size, className, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
+function Spinner({ label, size, value, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LoaderGlyph,
     {
       role: "status",
       "aria-label": label,
-      viewBox: "0 0 24 24",
-      fill: "none",
+      "aria-hidden": void 0,
+      value,
       "data-size": size ?? "md",
       className: spinnerVariants({ size, className }),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "3" }),
-        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
-      ]
+      ...props
     }
   );
 }
 export {
+  LoaderGlyph,
   Spinner,
   spinnerVariants
 };

package/dist/spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["// Server-safe. An indeterminate wait: an SVG ring, announced as a status with its `label`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent motion-safe:animate-spin\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /**\n     * sm · md · lg.\n     * @default \"md\"\n     */\n    size?: VariantProps<typeof spinnerVariants>[\"size\"];\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n  };\n\n/** A turning ring with `role=\"status\"` (it stops turning under prefers-reduced-motion). */\nexport function Spinner({ label, size, className, ...props }: SpinnerProps) {\n  return (\n    <svg\n      role=\"status\"\n      aria-label={label}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"3\" />\n      <path d=\"M21 12a9 9 0 0 0-9-9\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AAsBlC,SASE,KATF;AApBG,IAAM,kBAAkB,GAAG;AAAA,EAChC,MAAM;AAAA,EACN,UAAU,EAAE,MAAM,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE;AAAA,EACpE,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAcM,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,aAAW,QAAQ;AAAA,MACnB,WAAW,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,QAAO,gBAAe,eAAc,OAAM,aAAY,KAAI;AAAA,QACxF,oBAAC,UAAK,GAAE,wBAAuB,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ;AAAA;AAAA;AAAA,EAC7F;AAEJ;","names":[]}
+{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["// Server-safe. An indeterminate wait: the Krizaka loader glyph (a hexagon traced by light around a node), announced as\n// a status with its `label`. For a wait with a delay, a value, an ETA or an ending, see `@krizaka/ui/loader`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"./glyph\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /**\n     * sm · md · lg.\n     * @default \"md\"\n     */\n    size?: VariantProps<typeof spinnerVariants>[\"size\"];\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n    /** Between 0 and 1: the trace grows to the value (a determinate wait). Absent: it travels around. */\n    value?: number | null;\n  };\n\n/**\n * The Krizaka spinner: a hexagon traced by a segment of light around a breathing node, in `currentColor` (the accent by\n * default). `role=\"status\"`, named by `label`. Under prefers-reduced-motion it rests — a segment and the node lit.\n */\nexport function Spinner({ label, size, value, className, ...props }: SpinnerProps) {\n  return (\n    <LoaderGlyph\n      role=\"status\"\n      aria-label={label}\n      aria-hidden={undefined}\n      value={value}\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,UAA6B;AA6BlC;AAzBG,IAAM,kBAAkB,GAAG;AAAA,EAChC,MAAM;AAAA,EACN,UAAU,EAAE,MAAM,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE;AAAA,EACpE,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAmBM,SAAS,QAAQ,EAAE,OAAO,MAAM,OAAO,WAAW,GAAG,MAAM,GAAiB;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa;AAAA,MACb;AAAA,MACA,aAAW,QAAQ;AAAA,MACnB,WAAW,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/stepper.d.ts

@@ -0,0 +1,112 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+type StepStatus = "done" | "current" | "upcoming" | "error";
+interface Step {
+    /** Its name — passed translated. */
+    title: string;
+    /** One line under it (what happens, a time) — passed translated. */
+    description?: string;
+    /** Where it stands; by default from `current` (before: done, at: current, after: upcoming). */
+    status?: StepStatus;
+    /** Between 0 and 1 for the current step: its glyph grows to it. */
+    value?: number;
+    /** Anything under the step while it is current or failed: a progress bar, an action, a detail. */
+    content?: React.ReactNode;
+}
+declare const stepper: tailwind_variants.TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+        horizontal: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    step: string;
+    node: string;
+    glyph: string;
+    connector: string;
+    body: string;
+    title: string;
+    description: string;
+    state: string;
+    content: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+        horizontal: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    step: string;
+    node: string;
+    glyph: string;
+    connector: string;
+    body: string;
+    title: string;
+    description: string;
+    state: string;
+    content: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    orientation: {
+        vertical: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+        horizontal: {
+            root: string;
+            step: string;
+            connector: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    step: string;
+    node: string;
+    glyph: string;
+    connector: string;
+    body: string;
+    title: string;
+    description: string;
+    state: string;
+    content: string;
+}>>;
+type StepperProps = Omit<React.ComponentProps<"ol">, "children"> & {
+    /** The steps, in order. */
+    steps: readonly Step[];
+    /** The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins). */
+    current?: number;
+    /** What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated. */
+    labels: Readonly<Record<StepStatus, string>>;
+    /**
+     * vertical (a job, a timeline) · horizontal (a short journey, a checkout).
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+};
+/** An ordered list of steps: `aria-current="step"` on the current one, each state said in words. */
+declare function Stepper({ steps, current, labels, orientation, className, ...props }: StepperProps): React.JSX.Element;
+
+export { type Step, type StepStatus, Stepper, type StepperProps, stepper };

package/dist/stepper.js

@@ -0,0 +1,67 @@
+import {
+  LoaderGlyph
+} from "./chunk-43PTCDTL.js";
+
+// src/stepper/stepper.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var stepper = tv({
+  slots: {
+    root: "flex",
+    step: "group/step relative flex min-w-0",
+    node: "relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-0",
+    glyph: "h-6 w-6",
+    connector: "absolute bg-border-default after:absolute after:inset-0 after:origin-top-left after:bg-accent after:transition-transform after:duration-700 motion-reduce:after:transition-none",
+    body: "min-w-0",
+    title: "text-sm font-semibold text-fg group-data-[status=upcoming]/step:text-fg-secondary",
+    description: "mt-0.5 text-xs text-fg-secondary",
+    state: "sr-only",
+    content: "mt-2"
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: "flex-col",
+        step: "gap-3 pb-6 last:pb-0",
+        connector: "left-3.5 top-7 bottom-0 w-0.5 -translate-x-1/2 group-last/step:hidden after:scale-y-0 group-data-[status=done]/step:after:scale-y-100",
+        body: "pt-1"
+      },
+      horizontal: {
+        root: "flex-row",
+        step: "flex-1 flex-col gap-2 pr-3 last:flex-none last:pr-0",
+        connector: "left-8 right-1 top-3.5 h-0.5 -translate-y-1/2 group-last/step:hidden after:scale-x-0 group-data-[status=done]/step:after:scale-x-100",
+        body: ""
+      }
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+});
+var GLYPH = { done: "success", current: "loading", error: "error", upcoming: null };
+var TONE = { done: "text-accent", current: "text-accent", error: "text-fg-danger", upcoming: "text-border-strong" };
+function Stepper({ steps, current = 0, labels, orientation = "vertical", className, ...props }) {
+  const s = stepper({ orientation });
+  return /* @__PURE__ */ jsx("ol", { className: s.root({ className }), "data-orientation": orientation, ...props, children: steps.map((step, i) => {
+    const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
+    const glyph = GLYPH[status];
+    return /* @__PURE__ */ jsxs("li", { "data-status": status, "aria-current": status === "current" ? "step" : void 0, className: s.step(), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.connector() }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.node(), children: glyph ? /* @__PURE__ */ jsx(LoaderGlyph, { state: glyph, value: status === "current" ? step.value : void 0, className: [s.glyph(), TONE[status]].join(" ") }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: [s.glyph(), TONE[status]].join(" "), children: /* @__PURE__ */ jsx("path", { d: "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+        /* @__PURE__ */ jsxs("p", { className: s.title(), children: [
+          step.title,
+          /* @__PURE__ */ jsxs("span", { className: s.state(), children: [
+            " \u2014 ",
+            labels[status]
+          ] })
+        ] }),
+        step.description && /* @__PURE__ */ jsx("p", { className: s.description(), children: step.description }),
+        step.content && (status === "current" || status === "error") && /* @__PURE__ */ jsx("div", { className: s.content(), children: step.content })
+      ] })
+    ] }, i);
+  }) });
+}
+export {
+  Stepper,
+  stepper
+};
+//# sourceMappingURL=stepper.js.map

package/dist/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stepper/stepper.tsx"],"sourcesContent":["// Server-safe. The steps of a journey or a job: an ordered list whose nodes are the Krizaka loader glyph — the current\n// step traces its hexagon (and grows to its `value` when known), a done step draws its check, a failed one its cross —\n// joined by connectors that fill as the journey advances. The state of every step is said in words, not only colour.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport type StepStatus = \"done\" | \"current\" | \"upcoming\" | \"error\";\n\nexport interface Step {\n  /** Its name — passed translated. */\n  title: string;\n  /** One line under it (what happens, a time) — passed translated. */\n  description?: string;\n  /** Where it stands; by default from `current` (before: done, at: current, after: upcoming). */\n  status?: StepStatus;\n  /** Between 0 and 1 for the current step: its glyph grows to it. */\n  value?: number;\n  /** Anything under the step while it is current or failed: a progress bar, an action, a detail. */\n  content?: React.ReactNode;\n}\n\nexport const stepper = tv({\n  slots: {\n    root: \"flex\",\n    step: \"group/step relative flex min-w-0\",\n    node: \"relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-0\",\n    glyph: \"h-6 w-6\",\n    connector: \"absolute bg-border-default after:absolute after:inset-0 after:origin-top-left after:bg-accent after:transition-transform after:duration-700 motion-reduce:after:transition-none\",\n    body: \"min-w-0\",\n    title: \"text-sm font-semibold text-fg group-data-[status=upcoming]/step:text-fg-secondary\",\n    description: \"mt-0.5 text-xs text-fg-secondary\",\n    state: \"sr-only\",\n    content: \"mt-2\",\n  },\n  variants: {\n    orientation: {\n      vertical: {\n        root: \"flex-col\",\n        step: \"gap-3 pb-6 last:pb-0\",\n        connector: \"left-3.5 top-7 bottom-0 w-0.5 -translate-x-1/2 group-last/step:hidden after:scale-y-0 group-data-[status=done]/step:after:scale-y-100\",\n        body: \"pt-1\",\n      },\n      horizontal: {\n        root: \"flex-row\",\n        step: \"flex-1 flex-col gap-2 pr-3 last:flex-none last:pr-0\",\n        connector: \"left-8 right-1 top-3.5 h-0.5 -translate-y-1/2 group-last/step:hidden after:scale-x-0 group-data-[status=done]/step:after:scale-x-100\",\n        body: \"\",\n      },\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nconst GLYPH: Record<StepStatus, \"loading\" | \"success\" | \"error\" | null> = { done: \"success\", current: \"loading\", error: \"error\", upcoming: null };\nconst TONE: Record<StepStatus, string> = { done: \"text-accent\", current: \"text-accent\", error: \"text-fg-danger\", upcoming: \"text-border-strong\" };\n\nexport type StepperProps = Omit<React.ComponentProps<\"ol\">, \"children\"> & {\n  /** The steps, in order. */\n  steps: readonly Step[];\n  /** The index of the current step: those before it are done, those after it upcoming (a step's own `status` wins). */\n  current?: number;\n  /** What each state is called, read with every step (“Done”, “In progress”, “Upcoming”, “Failed”) — passed translated. */\n  labels: Readonly<Record<StepStatus, string>>;\n  /**\n   * vertical (a job, a timeline) · horizontal (a short journey, a checkout).\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n};\n\n/** An ordered list of steps: `aria-current=\"step\"` on the current one, each state said in words. */\nexport function Stepper({ steps, current = 0, labels, orientation = \"vertical\", className, ...props }: StepperProps) {\n  const s = stepper({ orientation });\n  return (\n    <ol className={s.root({ className })} data-orientation={orientation} {...props}>\n      {steps.map((step, i) => {\n        const status: StepStatus = step.status ?? (i < current ? \"done\" : i === current ? \"current\" : \"upcoming\");\n        const glyph = GLYPH[status];\n        return (\n          <li key={i} data-status={status} aria-current={status === \"current\" ? \"step\" : undefined} className={s.step()}>\n            <span aria-hidden className={s.connector()} />\n            <span aria-hidden className={s.node()}>\n              {glyph ? (\n                <LoaderGlyph state={glyph} value={status === \"current\" ? step.value : undefined} className={[s.glyph(), TONE[status]].join(\" \")} />\n              ) : (\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" className={[s.glyph(), TONE[status]].join(\" \")}>\n                  <path d=\"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n                </svg>\n              )}\n            </span>\n            <div className={s.body()}>\n              <p className={s.title()}>\n                {step.title}\n                <span className={s.state()}> — {labels[status]}</span>\n              </p>\n              {step.description && <p className={s.description()}>{step.description}</p>}\n              {step.content && (status === \"current\" || status === \"error\") && <div className={s.content()}>{step.content}</div>}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAS,UAAU;AA8EP,cAaI,YAbJ;AA3DL,IAAM,UAAU,GAAG;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,aAAa;AAAA,MACX,UAAU;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC;AAED,IAAM,QAAoE,EAAE,MAAM,WAAW,SAAS,WAAW,OAAO,SAAS,UAAU,KAAK;AAChJ,IAAM,OAAmC,EAAE,MAAM,eAAe,SAAS,eAAe,OAAO,kBAAkB,UAAU,qBAAqB;AAiBzI,SAAS,QAAQ,EAAE,OAAO,UAAU,GAAG,QAAQ,cAAc,YAAY,WAAW,GAAG,MAAM,GAAiB;AACnH,QAAM,IAAI,QAAQ,EAAE,YAAY,CAAC;AACjC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,oBAAkB,aAAc,GAAG,OACtE,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,SAAqB,KAAK,WAAW,IAAI,UAAU,SAAS,MAAM,UAAU,YAAY;AAC9F,UAAM,QAAQ,MAAM,MAAM;AAC1B,WACE,qBAAC,QAAW,eAAa,QAAQ,gBAAc,WAAW,YAAY,SAAS,QAAW,WAAW,EAAE,KAAK,GAC1G;AAAA,0BAAC,UAAK,eAAW,MAAC,WAAW,EAAE,UAAU,GAAG;AAAA,MAC5C,oBAAC,UAAK,eAAW,MAAC,WAAW,EAAE,KAAK,GACjC,kBACC,oBAAC,eAAY,OAAO,OAAO,OAAO,WAAW,YAAY,KAAK,QAAQ,QAAW,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,MAAM,CAAC,EAAE,KAAK,GAAG,GAAG,IAEjI,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,MAAM,CAAC,EAAE,KAAK,GAAG,GAChF,8BAAC,UAAK,GAAE,wDAAuD,QAAO,gBAAe,aAAY,KAAI,gBAAe,SAAQ,GAC9H,GAEJ;AAAA,MACA,qBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,6BAAC,OAAE,WAAW,EAAE,MAAM,GACnB;AAAA,eAAK;AAAA,UACN,qBAAC,UAAK,WAAW,EAAE,MAAM,GAAG;AAAA;AAAA,YAAI,OAAO,MAAM;AAAA,aAAE;AAAA,WACjD;AAAA,QACC,KAAK,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,eAAK,aAAY;AAAA,QACrE,KAAK,YAAY,WAAW,aAAa,WAAW,YAAY,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,eAAK,SAAQ;AAAA,SAC9G;AAAA,SAlBO,CAmBT;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/tabs.d.ts

@@ -71,7 +71,7 @@ type TabsRootProps = React.ComponentProps<typeof Tabs$1.Root> & {
 };
 /** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */
 declare function TabsRoot({ variant, className, ...props }: TabsRootProps): React.JSX.Element;
-/** The tabs. Name it (`aria-label`) when no heading says what it switches. */
+/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */
 declare function TabsList({ className, ...props }: React.ComponentProps<typeof Tabs$1.List>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;