@krizaka/ui 3.27.0 → 3.28.0

package/README.md

@@ -153,6 +153,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/site-footer` | `SiteFooter` (`current`, `labels`, `version`, `env`, `legal`; own columns as children) `.Column` (`title`) `.Link` (`active`, `asChild`): the footer of every Krizaka site — the family in columns, “A Krizaka company / product / open-source project”, the version, Montréal | client |
 | `@krizaka/ui/chip` | `Chip` (`selected`/`defaultSelected` + `onSelectedChange`, `size` sm·md; `removable` + `removeLabel` + `onRemove`), `Chip.Group` (`type` single·multiple, `label`, `required` for single), `chip` (the slots) | client |
 | `@krizaka/ui/chip-link` | `ChipLink` (a filter that is a link: `selected`, `current`, `size`, `asChild`), `chipVariants` (`size`, `selected`) | server |
+| `@krizaka/ui/chip-row` | `ChipRow`, `ChipRow.Item` (a scroll-snap row of chip links, wraps from `md`: `selected`, `badge`, `asChild`) | client (arrow keys) |
 | `@krizaka/ui/meta-row` | `MetaRow` (`items`, `chips`, `size` sm·md): one quiet line of dot-separated facts with status chips at its end; a real list, dots hidden from assistive technology; `/native` has the same | server |
 | `@krizaka/ui/switch` | `Switch` (`checked`/`defaultChecked` + `onCheckedChange`, `label` unless a visible label names it, `size` sm·md, `invalid`), `switchVariants` | client |
 | `@krizaka/ui/slider` | `Slider` (`value`: a number or a `[min, max]` range, `onValueChange`, `onValueCommit`, `label`, `thumbLabels`, `formatValue` → aria-valuetext, `showLabel`, `origin`), `slider` (the slots) | client |

package/dist/chip-link.js

@@ -1,30 +1,7 @@
-// src/chip-link/chip-link.tsx
-import { Slot } from "radix-ui";
-import { tv } from "tailwind-variants";
-import { jsx } from "react/jsx-runtime";
-var chipVariants = tv({
-  base: "inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold no-underline transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-  variants: {
-    size: { sm: "h-7 px-3 text-xs", md: "h-9 px-3.5 text-xs" },
-    selected: {
-      false: "border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg",
-      true: "border-accent bg-accent-soft text-fg"
-    }
-  },
-  defaultVariants: { size: "md", selected: false }
-});
-function ChipLink({ size, selected = false, current = "page", asChild, className, ...props }) {
-  const Comp = asChild ? Slot.Root : "a";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-state": selected ? "on" : "off",
-      "aria-current": selected ? current : void 0,
-      className: chipVariants({ size, selected, className }),
-      ...props
-    }
-  );
-}
+import {
+  ChipLink,
+  chipVariants
+} from "./chunk-BTTDIVVJ.js";
 export {
   ChipLink,
   chipVariants

package/dist/chip-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip-link/chip-link.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A chip that is a link — a filter that is an address (`/explore?tag=night`): the look\n// of `Chip`, the current filter marked by `selected` (`aria-current`, the accent), usable in a Server Component.\n// `chipVariants` styles anything else (a router link you render yourself).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const chipVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold no-underline transition-colors \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  variants: {\n    size: { sm: \"h-7 px-3 text-xs\", md: \"h-9 px-3.5 text-xs\" },\n    selected: {\n      false: \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg\",\n      true: \"border-accent bg-accent-soft text-fg\",\n    },\n  },\n  defaultVariants: { size: \"md\", selected: false },\n});\n\nexport type ChipVariantsProps = VariantProps<typeof chipVariants>;\n\nexport type ChipLinkProps = React.ComponentProps<\"a\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: ChipVariantsProps[\"size\"];\n  /** The current filter: the accent, `aria-current` (`page` by default) and `data-state=\"on\"`. */\n  selected?: boolean;\n  /**\n   * What `aria-current` says when selected: `page` (a filter that is a page) or `true`.\n   * @default \"page\"\n   */\n  current?: \"page\" | \"true\";\n  /** Renders your router's `<Link>` with the chip's look. */\n  asChild?: boolean;\n};\n\n/** A filter that is a link, with the look of `Chip`. */\nexport function ChipLink({ size, selected = false, current = \"page\", asChild, className, ...props }: ChipLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      data-state={selected ? \"on\" : \"off\"}\n      aria-current={selected ? current : undefined}\n      className={chipVariants({ size, selected, className })}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,UAA6B;AAuClC;AArCG,IAAM,eAAe,GAAG;AAAA,EAC7B,MACE;AAAA,EAEF,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,oBAAoB,IAAI,qBAAqB;AAAA,IACzD,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,MAAM,UAAU,MAAM;AACjD,CAAC;AAsBM,SAAS,SAAS,EAAE,MAAM,WAAW,OAAO,UAAU,QAAQ,SAAS,WAAW,GAAG,MAAM,GAAkB;AAClH,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,WAAW,UAAU;AAAA,MACnC,WAAW,aAAa,EAAE,MAAM,UAAU,UAAU,CAAC;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chip-row.d.ts

@@ -0,0 +1,78 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const chipRow: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            badge?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            badge?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    hint: string;
+    list: string;
+    item: string;
+    badge: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            list?: tailwind_variants.ClassValue;
+            hint?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            badge?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    hint: string;
+    list: string;
+    item: string;
+    badge: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    hint: string;
+    list: string;
+    item: string;
+    badge: string;
+}>>;
+type ChipRowProps = Omit<React.ComponentProps<"nav">, "aria-label"> & {
+    /** What the links choose among ("For whom?"): the row's accessible name, passed translated. */
+    label: string;
+    /** A line under the label that says how to choose; read with the row. */
+    hint?: React.ReactNode;
+};
+/** A scroll-snap row of chip links; wraps from `md`. Items: `ChipRow.Item`. */
+declare function ChipRowRoot({ label, hint, className, children, ...props }: ChipRowProps): React.JSX.Element;
+type ChipRowItemProps = React.ComponentProps<"a"> & {
+    /** The current choice: the accent and `aria-current`. */
+    selected?: boolean;
+    /** What `aria-current` says when selected.
+     * @default "page" */
+    current?: "page" | "true";
+    /** A small tag after the label ("Soon"), passed translated. */
+    badge?: React.ReactNode;
+    /** Renders your router's `<Link>` as the chip; put the label and the badge in your link's children yourself. */
+    asChild?: boolean;
+};
+/** One link of the row. */
+declare function ChipRowItem({ selected, current, badge, asChild, className, children, ...props }: ChipRowItemProps): React.JSX.Element;
+declare const ChipRow: typeof ChipRowRoot & {
+    Item: typeof ChipRowItem;
+};
+
+export { ChipRow, type ChipRowItemProps, type ChipRowProps, chipRow };

package/dist/chip-row.js

@@ -0,0 +1,61 @@
+import {
+  chipVariants
+} from "./chunk-BTTDIVVJ.js";
+
+// src/chip-row/chip-row.tsx
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var chipRow = tv({
+  slots: {
+    root: "flex w-full flex-col gap-2",
+    hint: "text-xs text-fg-muted",
+    list: "m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]",
+    item: "snap-start",
+    badge: "rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-fg-muted"
+  }
+});
+var s = chipRow();
+function ChipRowRoot({ label, hint, className, children, ...props }) {
+  const id = React.useId();
+  const list = React.useRef(null);
+  const move = (event) => {
+    const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (!keys.includes(event.key)) return;
+    const links = [...list.current?.querySelectorAll("a[href],button:not([disabled])") ?? []];
+    const at = links.indexOf(event.target);
+    if (at < 0) return;
+    const last = links.length - 1;
+    const to = event.key === "Home" ? 0 : event.key === "End" ? last : Math.min(last, Math.max(0, at + (event.key === "ArrowRight" ? 1 : -1)));
+    event.preventDefault();
+    links[to]?.focus();
+    links[to]?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  };
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, "aria-describedby": hint ? `${id}-hint` : void 0, className: s.root({ className }), ...props, children: [
+    hint ? /* @__PURE__ */ jsx("p", { id: `${id}-hint`, className: s.hint(), children: hint }) : null,
+    /* @__PURE__ */ jsx("ul", { ref: list, className: s.list(), onKeyDown: move, children })
+  ] });
+}
+function ChipRowItem({ selected = false, current = "page", badge, asChild, className, children, ...props }) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx("li", { className: s.item(), children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-state": selected ? "on" : "off",
+      "aria-current": selected ? current : void 0,
+      className: chipVariants({ selected, className: ["min-h-11", className] }),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        badge ? /* @__PURE__ */ jsx("span", { className: s.badge(), children: badge }) : null
+      ] })
+    }
+  ) });
+}
+var ChipRow = Object.assign(ChipRowRoot, { Item: ChipRowItem });
+export {
+  ChipRow,
+  chipRow
+};
+//# sourceMappingURL=chip-row.js.map

package/dist/chip-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip-row/chip-row.tsx"],"sourcesContent":["// Client (arrow-key focus only). A row of chip links that scrolls sideways with scroll-snap on a phone (the trailing edge\n// fades, no scrollbar) and wraps from `md`: an audience picker, the filters of a page. Each item is a `ChipLink`-style\n// link at least 44 px high; the current one carries `aria-current`. Tab goes through the links; ← → Home End move between them.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { chipVariants } from \"../chip-link\";\n\nexport const chipRow = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-2\",\n    hint: \"text-xs text-fg-muted\",\n    list:\n      \"m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n      \"[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]\",\n    item: \"snap-start\",\n    badge: \"rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-fg-muted\",\n  },\n});\n\nconst s = chipRow();\n\nexport type ChipRowProps = Omit<React.ComponentProps<\"nav\">, \"aria-label\"> & {\n  /** What the links choose among (\"For whom?\"): the row's accessible name, passed translated. */\n  label: string;\n  /** A line under the label that says how to choose; read with the row. */\n  hint?: React.ReactNode;\n};\n\n/** A scroll-snap row of chip links; wraps from `md`. Items: `ChipRow.Item`. */\nfunction ChipRowRoot({ label, hint, className, children, ...props }: ChipRowProps) {\n  const id = React.useId();\n  const list = React.useRef<HTMLUListElement>(null);\n  const move = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const keys = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n    if (!keys.includes(event.key)) return;\n    const links = [...(list.current?.querySelectorAll<HTMLElement>(\"a[href],button:not([disabled])\") ?? [])];\n    const at = links.indexOf(event.target as HTMLElement);\n    if (at < 0) return;\n    const last = links.length - 1;\n    const to = event.key === \"Home\" ? 0 : event.key === \"End\" ? last : Math.min(last, Math.max(0, at + (event.key === \"ArrowRight\" ? 1 : -1)));\n    event.preventDefault();\n    links[to]?.focus();\n    links[to]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  };\n  return (\n    <nav aria-label={label} aria-describedby={hint ? `${id}-hint` : undefined} className={s.root({ className })} {...props}>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      <ul ref={list} className={s.list()} onKeyDown={move}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport type ChipRowItemProps = React.ComponentProps<\"a\"> & {\n  /** The current choice: the accent and `aria-current`. */\n  selected?: boolean;\n  /** What `aria-current` says when selected.\n   * @default \"page\" */\n  current?: \"page\" | \"true\";\n  /** A small tag after the label (\"Soon\"), passed translated. */\n  badge?: React.ReactNode;\n  /** Renders your router's `<Link>` as the chip; put the label and the badge in your link's children yourself. */\n  asChild?: boolean;\n};\n\n/** One link of the row. */\nfunction ChipRowItem({ selected = false, current = \"page\", badge, asChild, className, children, ...props }: ChipRowItemProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <li className={s.item()}>\n      <Comp\n        data-state={selected ? \"on\" : \"off\"}\n        aria-current={selected ? current : undefined}\n        className={chipVariants({ selected, className: [\"min-h-11\", className] })}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {badge ? <span className={s.badge()}>{badge}</span> : null}\n          </>\n        )}\n      </Comp>\n    </li>\n  );\n}\n\nexport const ChipRow = Object.assign(ChipRowRoot, { Item: ChipRowItem });\n"],"mappings":";;;;;AAGA,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB,SAAS,UAAU;AA0Cf,SAuCM,UArCF,KAFJ;AAtCG,IAAM,UAAU,GAAG;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MACE;AAAA,IAEF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAED,IAAM,IAAI,QAAQ;AAUlB,SAAS,YAAY,EAAE,OAAO,MAAM,WAAW,UAAU,GAAG,MAAM,GAAiB;AACjF,QAAM,KAAW,YAAM;AACvB,QAAM,OAAa,aAAyB,IAAI;AAChD,QAAM,OAAO,CAAC,UAAiD;AAC7D,UAAM,OAAO,CAAC,aAAa,cAAc,QAAQ,KAAK;AACtD,QAAI,CAAC,KAAK,SAAS,MAAM,GAAG,EAAG;AAC/B,UAAM,QAAQ,CAAC,GAAI,KAAK,SAAS,iBAA8B,gCAAgC,KAAK,CAAC,CAAE;AACvG,UAAM,KAAK,MAAM,QAAQ,MAAM,MAAqB;AACpD,QAAI,KAAK,EAAG;AACZ,UAAM,OAAO,MAAM,SAAS;AAC5B,UAAM,KAAK,MAAM,QAAQ,SAAS,IAAI,MAAM,QAAQ,QAAQ,OAAO,KAAK,IAAI,MAAM,KAAK,IAAI,GAAG,MAAM,MAAM,QAAQ,eAAe,IAAI,GAAG,CAAC;AACzI,UAAM,eAAe;AACrB,UAAM,EAAE,GAAG,MAAM;AACjB,UAAM,EAAE,GAAG,iBAAiB,EAAE,OAAO,WAAW,QAAQ,UAAU,CAAC;AAAA,EACrE;AACA,SACE,qBAAC,SAAI,cAAY,OAAO,oBAAkB,OAAO,GAAG,EAAE,UAAU,QAAW,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC9G;AAAA,WACC,oBAAC,OAAE,IAAI,GAAG,EAAE,SAAS,WAAW,EAAE,KAAK,GACpC,gBACH,IACE;AAAA,IACJ,oBAAC,QAAG,KAAK,MAAM,WAAW,EAAE,KAAK,GAAG,WAAW,MAC5C,UACH;AAAA,KACF;AAEJ;AAeA,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,QAAQ,OAAO,SAAS,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC5H,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE,oBAAC,QAAG,WAAW,EAAE,KAAK,GACpB;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,WAAW,UAAU;AAAA,MACnC,WAAW,aAAa,EAAE,UAAU,WAAW,CAAC,YAAY,SAAS,EAAE,CAAC;AAAA,MACvE,GAAG;AAAA,MAEH,oBACC,WAEA,iCACG;AAAA;AAAA,QACA,QAAQ,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAU;AAAA,SACxD;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEO,IAAM,UAAU,OAAO,OAAO,aAAa,EAAE,MAAM,YAAY,CAAC;","names":[]}

package/dist/chunk-BTTDIVVJ.js

@@ -0,0 +1,33 @@
+// src/chip-link/chip-link.tsx
+import { Slot } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var chipVariants = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold no-underline transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    size: { sm: "h-7 px-3 text-xs", md: "h-9 px-3.5 text-xs" },
+    selected: {
+      false: "border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg",
+      true: "border-accent bg-accent-soft text-fg"
+    }
+  },
+  defaultVariants: { size: "md", selected: false }
+});
+function ChipLink({ size, selected = false, current = "page", asChild, className, ...props }) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-state": selected ? "on" : "off",
+      "aria-current": selected ? current : void 0,
+      className: chipVariants({ size, selected, className }),
+      ...props
+    }
+  );
+}
+
+export {
+  chipVariants,
+  ChipLink
+};
+//# sourceMappingURL=chunk-BTTDIVVJ.js.map

package/dist/chunk-BTTDIVVJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip-link/chip-link.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A chip that is a link — a filter that is an address (`/explore?tag=night`): the look\n// of `Chip`, the current filter marked by `selected` (`aria-current`, the accent), usable in a Server Component.\n// `chipVariants` styles anything else (a router link you render yourself).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const chipVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold no-underline transition-colors \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  variants: {\n    size: { sm: \"h-7 px-3 text-xs\", md: \"h-9 px-3.5 text-xs\" },\n    selected: {\n      false: \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg\",\n      true: \"border-accent bg-accent-soft text-fg\",\n    },\n  },\n  defaultVariants: { size: \"md\", selected: false },\n});\n\nexport type ChipVariantsProps = VariantProps<typeof chipVariants>;\n\nexport type ChipLinkProps = React.ComponentProps<\"a\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: ChipVariantsProps[\"size\"];\n  /** The current filter: the accent, `aria-current` (`page` by default) and `data-state=\"on\"`. */\n  selected?: boolean;\n  /**\n   * What `aria-current` says when selected: `page` (a filter that is a page) or `true`.\n   * @default \"page\"\n   */\n  current?: \"page\" | \"true\";\n  /** Renders your router's `<Link>` with the chip's look. */\n  asChild?: boolean;\n};\n\n/** A filter that is a link, with the look of `Chip`. */\nexport function ChipLink({ size, selected = false, current = \"page\", asChild, className, ...props }: ChipLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      data-state={selected ? \"on\" : \"off\"}\n      aria-current={selected ? current : undefined}\n      className={chipVariants({ size, selected, className })}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,UAA6B;AAuClC;AArCG,IAAM,eAAe,GAAG;AAAA,EAC7B,MACE;AAAA,EAEF,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,oBAAoB,IAAI,qBAAqB;AAAA,IACzD,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,MAAM,UAAU,MAAM;AACjD,CAAC;AAsBM,SAAS,SAAS,EAAE,MAAM,WAAW,OAAO,UAAU,QAAQ,SAAS,WAAW,GAAG,MAAM,GAAkB;AAClH,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,WAAW,UAAU;AAAA,MACnC,WAAW,aAAa,EAAE,MAAM,UAAU,UAAU,CAAC;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/native.d.ts

@@ -1760,6 +1760,37 @@ type SegmentedProps<T extends string> = {
  */
 declare function Segmented<T extends string>({ options, value, onValueChange, size, "aria-label": label, style }: SegmentedProps<T>): React$1.JSX.Element;
 
+type SettingsRowProps = {
+    /** What the setting is ("Username"), passed translated. */
+    label: string;
+    /** One line of help under the label. */
+    description?: string;
+    /** An icon (24 pt) drawn in a tile before the label. */
+    icon?: React$1.ReactNode;
+    /** The current value on the right ("English", "Dark"). */
+    value?: string;
+    /** A control on the right (a `Switch`): the row is then not pressable by itself. */
+    trailing?: React$1.ReactNode;
+    /** Makes the row a button that opens something; a chevron is shown. */
+    onPress?: () => void;
+    /** Tints the label as dangerous ("Delete account"). */
+    destructive?: boolean;
+    /** The row's accessible name when the visible words do not say it all; by default the visible words (label, help, value) are read. */
+    accessibilityLabel?: string;
+    /** Not available: dimmed and not pressable. */
+    disabled?: boolean;
+};
+/** One setting: its label and help on the left, its value or control on the right; a button when `onPress` is given. */
+declare function SettingsRow({ label, description, icon, value, trailing, onPress, destructive, accessibilityLabel, disabled }: SettingsRowProps): React$1.JSX.Element;
+type SettingsGroupProps = ViewProps & {
+    /** The group's title ("Account"), passed translated; a heading for screen readers. */
+    title?: string;
+    /** The rows (`SettingsRow`). */
+    children: React$1.ReactNode;
+};
+/** A titled card of `SettingsRow`s, divided by hairlines. */
+declare function SettingsGroup({ title, children, style, ...props }: SettingsGroupProps): React$1.JSX.Element;
+
 type ShowcaseLabels = {
     /** The previous button's name. */
     previous: string;
@@ -2498,4 +2529,4 @@ declare function YomizakaMark({ size, animated, title, neutral }: NativeMarkProp
  */
 declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, MetaRow, type MetaRowProps, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, Waveform, type WaveformProps, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };
+export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, MetaRow, type MetaRowProps, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, SettingsGroup, type SettingsGroupProps, SettingsRow, type SettingsRowProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, Waveform, type WaveformProps, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };