@dirstack/ui 1.0.1 → 1.2.0

package/dist/components/nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav.js","names":[],"sources":["../../src/components/nav.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { eyebrowClasses } from \"~/lib/classes\"\nimport { cn, variants } from \"~/lib/variants\"\n\nexport function Nav({ className, ...props }: ComponentProps<\"nav\">) {\n  return <nav className={cn(\"flex flex-col gap-0.5 px-3 py-2\", className)} {...props} />\n}\n\n/**\n * Muted group label above a run of nav links.\n */\nexport function NavLabel({ className, ...props }: ComponentProps<\"p\">) {\n  return <p className={cn(\"px-2.5 pt-1 pb-1.5\", eyebrowClasses, className)} {...props} />\n}\n\n/**\n * The affixes of a nav row that leads with its own visual (an avatar, a skeleton) sit flush\n * against the row's inset, so the Button's optical pull-in is zeroed on both ends.\n */\nconst navAffixClasses = \"[&>*:first-child]:ml-0 [&>*:last-child]:mr-0\"\n\n/**\n * The one nav row, applied to a `ghost` `md` `Button`: every item starts from the same width,\n * inset and gap, and each variant is the shape on top of it.\n *\n * `link` — a nav link or a settings tab: muted at rest, full color on hover, and a flat darker\n * tint with dark text when active. The 16px icon sits centered in a 20px box, so labels start on\n * the same column as a row that leads with a 20px avatar (10px inset + 20px avatar + 10px gap).\n * The active state keys off `data-status=\"active\"`, which router links set on their own and plain\n * buttons set by hand, so the active color always wins over the resting one. Its tints are flat\n * foreground over the canvas, so hover and active share the canvas hue exactly.\n *\n * `bordered` — a bordered row on a card surface, for a row that leads with its own visual and\n * opens a menu.\n *\n * `flat` — the same row without the border or the surface.\n */\nexport const navItem = variants({\n  base: \"w-full justify-start gap-2.5 px-2.5\",\n\n  variants: {\n    variant: {\n      link: [\n        \"py-2 text-muted-foreground text-sm/tight hover:bg-foreground/3 hover:text-foreground [&>svg:first-child]:ml-0.5 [&>svg]:mr-0.5 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[status=active]:bg-foreground/5 data-[status=active]:text-foreground data-[status=active]:hover:bg-foreground/5\",\n      ],\n      bordered: [navAffixClasses, \"border-border bg-card hover:bg-card hover:border-ring\"],\n      flat: navAffixClasses,\n    },\n  },\n\n  defaultVariants: {\n    variant: \"link\",\n  },\n})\n"],"mappings":";;;;AAIA,SAAgB,IAAI,EAAE,WAAW,GAAG,SAAgC;CAClE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACvF;;;;AAKA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAA8B;CACrE,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,sBAAsB,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;;;;;AAMA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;AAkBxB,MAAa,UAAU,SAAS;CAC9B,MAAM;CAEN,UAAU,EACR,SAAS;EACP,MAAM,CACJ,kKACA,sHACF;EACA,UAAU,CAAC,iBAAiB,uDAAuD;EACnF,MAAM;CACR,EACF;CAEA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
+{"version":3,"file":"nav.js","names":[],"sources":["../../src/components/nav.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { eyebrowClasses } from \"~/lib/classes\"\nimport { cn, variants } from \"~/lib/variants\"\n\nexport function Nav({ className, ...props }: ComponentProps<\"nav\">) {\n  return <nav className={cn(\"flex flex-col gap-0.5 px-3 py-2\", className)} {...props} />\n}\n\n/**\n * Muted group label above a run of nav links.\n */\nexport function NavLabel({ className, ...props }: ComponentProps<\"p\">) {\n  return <p className={cn(\"px-2.5 pt-1 pb-1.5\", eyebrowClasses, className)} {...props} />\n}\n\n/**\n * The affixes of a nav row that leads with its own visual (an avatar, a skeleton) sit flush\n * against the row's inset, so the Button's optical pull-in is zeroed on both ends.\n */\nconst navAffixClasses = \"[&>*:first-child]:ml-0 [&>*:last-child]:mr-0\"\n\n/**\n * The one nav row, applied to a `ghost` `md` `Button`: every item starts from the same width,\n * inset and gap, and each variant is the shape on top of it.\n *\n * `link` — a nav link or a settings tab: muted at rest, full color on hover, and a flat darker\n * tint with dark text when active. The 16px icon sits centered in a 20px box, so labels start on\n * the same column as a row that leads with a 20px avatar (10px inset + 20px avatar + 10px gap).\n * The active state keys off `data-status=\"active\"`, which router links set on their own and plain\n * buttons set by hand, so the active color always wins over the resting one. Its tints are flat\n * foreground over the canvas, so hover and active share the canvas hue exactly.\n *\n * `bordered` — a bordered row on a card surface, for a row that leads with its own visual and\n * opens a menu.\n *\n * `flat` — the same row without the border or the surface.\n */\nexport const navItem = variants({\n  base: \"w-full justify-start gap-2.5 px-2.5\",\n\n  variants: {\n    variant: {\n      link: [\n        \"py-2 pointer-coarse:min-h-11 text-muted-foreground text-sm/tight hover:bg-foreground/3 hover:text-foreground [&>svg:first-child]:ml-0.5 [&>svg]:mr-0.5 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[status=active]:bg-foreground/5 data-[status=active]:text-foreground data-[status=active]:hover:bg-foreground/5\",\n      ],\n      bordered: [navAffixClasses, \"border-border bg-card hover:bg-card hover:border-ring\"],\n      flat: navAffixClasses,\n    },\n  },\n\n  defaultVariants: {\n    variant: \"link\",\n  },\n})\n"],"mappings":";;;;AAIA,SAAgB,IAAI,EAAE,WAAW,GAAG,SAAgC;CAClE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACvF;;;;AAKA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAA8B;CACrE,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,sBAAsB,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;;;;;AAMA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;AAkBxB,MAAa,UAAU,SAAS;CAC9B,MAAM;CAEN,UAAU,EACR,SAAS;EACP,MAAM,CACJ,0LACA,sHACF;EACA,UAAU,CAAC,iBAAiB,uDAAuD;EACnF,MAAM;CACR,EACF;CAEA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}

package/dist/components/section-header.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "../lib/variants.js";
-import { Stack } from "./stack.js";
 import { HeadingProps } from "./heading.js";
+import { Stack } from "./stack.js";
 import { useRender } from "@base-ui/react/use-render";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/section-header.d.ts
@@ -10,8 +10,8 @@ declare const sectionHeaderVariants: import("tailwind-variants").TVReturnType<{
     center: "justify-center text-center";
   };
   size: {
-    page: "gap-y-3 gap-x-6 lg:gap-x-12";
-    card: "gap-y-2 gap-x-6";
+    page: "gap-y-3 gap-x-6 max-sm:flex-col max-sm:items-stretch lg:gap-x-12";
+    card: "gap-y-2 gap-x-6 max-sm:flex-col max-sm:items-stretch";
     panel: "gap-y-2 gap-x-6";
     hero: "gap-y-3 gap-x-6 lg:gap-x-12";
   };
@@ -25,8 +25,8 @@ declare const sectionHeaderVariants: import("tailwind-variants").TVReturnType<{
     center: "justify-center text-center";
   };
   size: {
-    page: "gap-y-3 gap-x-6 lg:gap-x-12";
-    card: "gap-y-2 gap-x-6";
+    page: "gap-y-3 gap-x-6 max-sm:flex-col max-sm:items-stretch lg:gap-x-12";
+    card: "gap-y-2 gap-x-6 max-sm:flex-col max-sm:items-stretch";
     panel: "gap-y-2 gap-x-6";
     hero: "gap-y-3 gap-x-6 lg:gap-x-12";
   };
@@ -40,8 +40,8 @@ declare const sectionHeaderVariants: import("tailwind-variants").TVReturnType<{
     center: "justify-center text-center";
   };
   size: {
-    page: "gap-y-3 gap-x-6 lg:gap-x-12";
-    card: "gap-y-2 gap-x-6";
+    page: "gap-y-3 gap-x-6 max-sm:flex-col max-sm:items-stretch lg:gap-x-12";
+    card: "gap-y-2 gap-x-6 max-sm:flex-col max-sm:items-stretch";
     panel: "gap-y-2 gap-x-6";
     hero: "gap-y-3 gap-x-6 lg:gap-x-12";
   };

package/dist/components/section-header.js

@@ -1,7 +1,7 @@
 import { cn, variants } from "../lib/variants.js";
-import { descriptionClasses } from "../lib/classes.js";
-import { Stack } from "./stack.js";
 import { Heading } from "./heading.js";
+import { Stack } from "./stack.js";
+import { descriptionClasses } from "../lib/classes.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { createContext, use } from "react";
@@ -14,8 +14,8 @@ const sectionHeaderVariants = variants({
 			center: "justify-center text-center"
 		},
 		size: {
-			page: "gap-y-3 gap-x-6 lg:gap-x-12",
-			card: "gap-y-2 gap-x-6",
+			page: "gap-y-3 gap-x-6 max-sm:flex-col max-sm:items-stretch lg:gap-x-12",
+			card: "gap-y-2 gap-x-6 max-sm:flex-col max-sm:items-stretch",
 			panel: "gap-y-2 gap-x-6",
 			hero: "gap-y-3 gap-x-6 lg:gap-x-12"
 		},
@@ -135,9 +135,9 @@ function SectionHeaderDescription({ className, ...props }) {
 * truncates instead of squeezing the buttons.
 */
 function SectionHeaderActions({ className, ...props }) {
-	const { wrap } = use(SectionHeaderContext);
+	const { size, wrap } = use(SectionHeaderContext);
 	return /* @__PURE__ */ jsx(Stack, {
-		className: cn("-my-0.5", !wrap && "shrink-0", className),
+		className: cn("-my-0.5", !wrap && "shrink-0", size === "page" && "max-sm:flex-row-reverse max-sm:justify-end", className),
 		...props
 	});
 }

package/dist/components/section-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-header.js","names":[],"sources":["../../src/components/section-header.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport { type ComponentProps, createContext, type ReactNode, use } from \"react\"\nimport { Heading, type HeadingProps } from \"~/components/heading\"\nimport { Stack } from \"~/components/stack\"\nimport { descriptionClasses } from \"~/lib/classes\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst sectionHeaderVariants = variants({\n  base: \"flex items-center w-full min-w-0\",\n\n  variants: {\n    alignment: {\n      left: \"justify-between text-start\",\n      center: \"justify-center text-center\",\n    },\n    size: {\n      page: \"gap-y-3 gap-x-6 lg:gap-x-12\",\n      card: \"gap-y-2 gap-x-6\",\n      panel: \"gap-y-2 gap-x-6\",\n      hero: \"gap-y-3 gap-x-6 lg:gap-x-12\",\n    },\n    wrap: {\n      true: \"flex-wrap\",\n      false: \"flex-nowrap\",\n    },\n  },\n\n  defaultVariants: {\n    alignment: \"left\",\n    wrap: true,\n  },\n})\n\ntype SectionHeaderSize = NonNullable<VariantProps<typeof sectionHeaderVariants>[\"size\"]>\n\n/**\n * The title each header scale gets, alongside the spacing the variant above gives it: `page`\n * for a route heading, `card` for a standalone card, `panel` for a dashboard or list panel,\n * `hero` for the centered auth and callback screens. The `as` entry keeps the heading outline\n * intact — one `<h1>` per route, `<h2>` for everything nested inside it.\n */\nconst sectionHeaderTitles = {\n  page: { size: \"h3\", as: \"h1\" },\n  card: { size: \"h4\", as: \"h2\" },\n  panel: { size: \"h5\", as: \"h2\" },\n  hero: { size: \"h2\", as: \"h1\" },\n} as const satisfies Record<SectionHeaderSize, { size: HeadingProps[\"size\"]; as: string }>\n\nconst SectionHeaderContext = createContext<{ size: SectionHeaderSize; wrap: boolean }>({\n  size: \"page\",\n  wrap: true,\n})\n\ntype SectionHeaderProps = Omit<useRender.ComponentProps<\"div\">, \"title\"> &\n  Omit<VariantProps<typeof sectionHeaderVariants>, \"wrap\"> & {\n    /**\n     * Keep the title block and the actions on one line instead of wrapping them.\n     */\n    wrap?: boolean\n    /**\n     * Title block. Given any of `title`/`description`/`leading`/`actions`, the header renders\n     * its own `SectionHeaderBody` (empty if there is nothing but actions, so they still sit right);\n     * leave them all out to compose the body by hand, e.g. an entity header with dot-joined\n     * meta or the dashboard greeting.\n     */\n    title?: ReactNode\n    description?: ReactNode\n    actions?: ReactNode\n    /**\n     * Leading visual beside the title, e.g. an entity avatar.\n     */\n    leading?: ReactNode\n  }\n\n/**\n * The one header for every surface in the app: pages, cards, list panels, dialogs and settings\n * sections. Pass `title`/`description`/`actions` for the standard block, or compose\n * `SectionHeaderBody` + `SectionHeaderActions` as children when the content is bespoke.\n */\nfunction SectionHeader({\n  className,\n  alignment = \"left\",\n  size = \"page\",\n  wrap = true,\n  title,\n  description,\n  actions,\n  leading,\n  children,\n  render,\n  ...props\n}: SectionHeaderProps) {\n  const element = useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      className: cn(sectionHeaderVariants({ alignment, size, wrap, className })),\n      children: (\n        <>\n          {(title || description || leading || actions) && (\n            <SectionHeaderBody\n              leading={leading}\n              className={cn(alignment === \"center\" && \"justify-center\")}\n            >\n              {title && <SectionHeaderTitle>{title}</SectionHeaderTitle>}\n              {description && <SectionHeaderDescription>{description}</SectionHeaderDescription>}\n            </SectionHeaderBody>\n          )}\n\n          {actions && <SectionHeaderActions>{actions}</SectionHeaderActions>}\n\n          {children}\n        </>\n      ),\n      ...props,\n    },\n  })\n\n  return <SectionHeaderContext value={{ size, wrap }}>{element}</SectionHeaderContext>\n}\n\n/**\n * The page title. Its visual size and semantic level both follow the header's `size`, so a\n * page heading stays the route's single `<h1>` while cards and panels render `<h2>`s. Pass\n * `size`/`as` to override either one on its own.\n */\nfunction SectionHeaderTitle({ size, as, ...props }: HeadingProps) {\n  const preset = sectionHeaderTitles[use(SectionHeaderContext).size]\n\n  return <Heading size={size ?? preset.size} as={as ?? preset.as} {...props} />\n}\n\ntype SectionHeaderBodyProps = ComponentProps<\"div\"> & {\n  /**\n   * Leading visual, e.g. an entity avatar.\n   */\n  leading?: ReactNode\n}\n\n/**\n * The one title block for every header in the app (pages, cards, dialogs, settings sections):\n * an optional leading visual beside a column of `SectionHeaderTitle` + `SectionHeaderDescription`. Change the\n * spacing here and it changes everywhere.\n */\nfunction SectionHeaderBody({ leading, children, className, ...props }: SectionHeaderBodyProps) {\n  return (\n    <div className={cn(\"flex min-w-0 flex-1 items-center gap-3\", className)} {...props}>\n      {leading}\n      <div className=\"flex min-w-0 flex-col gap-1.5\">{children}</div>\n    </div>\n  )\n}\n\n/**\n * The muted line under a title. Wraps by default; pass `truncate` for one-line entity meta.\n */\nfunction SectionHeaderDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return <p className={cn(descriptionClasses, className)} {...props} />\n}\n\n/**\n * Right-aligned actions. Stops shrinking when the header is `wrap={false}`, so a long title\n * truncates instead of squeezing the buttons.\n */\nfunction SectionHeaderActions({ className, ...props }: ComponentProps<typeof Stack>) {\n  const { wrap } = use(SectionHeaderContext)\n\n  return <Stack className={cn(\"-my-0.5\", !wrap && \"shrink-0\", className)} {...props} />\n}\n\nexport {\n  SectionHeader,\n  SectionHeaderTitle,\n  SectionHeaderBody,\n  SectionHeaderDescription,\n  SectionHeaderActions,\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,wBAAwB,SAAS;CACrC,MAAM;CAEN,UAAU;EACR,WAAW;GACT,MAAM;GACN,QAAQ;EACV;EACA,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,MAAM;GACN,OAAO;EACT;CACF;CAEA,iBAAiB;EACf,WAAW;EACX,MAAM;CACR;AACF,CAAC;;;;;;;AAUD,MAAM,sBAAsB;CAC1B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;CAC7B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;CAC7B,OAAO;EAAE,MAAM;EAAM,IAAI;CAAK;CAC9B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;AAC/B;AAEA,MAAM,uBAAuB,cAA0D;CACrF,MAAM;CACN,MAAM;AACR,CAAC;;;;;;AA4BD,SAAS,cAAc,EACrB,WACA,YAAY,QACZ,OAAO,QACP,OAAO,MACP,OACA,aACA,SACA,SACA,UACA,QACA,GAAG,SACkB;CACrB,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO;GACL,WAAW,GAAG,sBAAsB;IAAE;IAAW;IAAM;IAAM;GAAU,CAAC,CAAC;GACzE,UACE,qBAAA,UAAA,EAAA,UAAA;KACI,SAAS,eAAe,WAAW,YACnC,qBAAC,mBAAD;KACW;KACT,WAAW,GAAG,cAAc,YAAY,gBAAgB;KAF1D,UAAA,CAIG,SAAS,oBAAC,oBAAD,EAAA,UAAqB,MAA0B,CAAA,GACxD,eAAe,oBAAC,0BAAD,EAAA,UAA2B,YAAsC,CAAA,CAChE;;IAGpB,WAAW,oBAAC,sBAAD,EAAA,UAAuB,QAA8B,CAAA;IAEhE;GACD,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;CAED,OAAO,oBAAC,sBAAD;EAAsB,OAAO;GAAE;GAAM;EAAK;EAAI,UAAA;CAA8B,CAAA;AACrF;;;;;;AAOA,SAAS,mBAAmB,EAAE,MAAM,IAAI,GAAG,SAAuB;CAChE,MAAM,SAAS,oBAAoB,IAAI,oBAAoB,CAAC,CAAC;CAE7D,OAAO,oBAAC,SAAD;EAAS,MAAM,QAAQ,OAAO;EAAM,IAAI,MAAM,OAAO;EAAI,GAAI;CAAQ,CAAA;AAC9E;;;;;;AAcA,SAAS,kBAAkB,EAAE,SAAS,UAAU,WAAW,GAAG,SAAiC;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0CAA0C,SAAS;EAAG,GAAI;EAA7E,UAAA,CACG,SACD,oBAAC,OAAD;GAAK,WAAU;GAAiC;EAAc,CAAA,CAC3D;;AAET;;;;AAKA,SAAS,yBAAyB,EAAE,WAAW,GAAG,SAA8B;CAC9E,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtE;;;;;AAMA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CACnF,MAAM,EAAE,SAAS,IAAI,oBAAoB;CAEzC,OAAO,oBAAC,OAAD;EAAO,WAAW,GAAG,WAAW,CAAC,QAAQ,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtF"}
+{"version":3,"file":"section-header.js","names":[],"sources":["../../src/components/section-header.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport { type ComponentProps, createContext, type ReactNode, use } from \"react\"\nimport { Heading, type HeadingProps } from \"~/components/heading\"\nimport { Stack } from \"~/components/stack\"\nimport { descriptionClasses } from \"~/lib/classes\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst sectionHeaderVariants = variants({\n  base: \"flex items-center w-full min-w-0\",\n\n  variants: {\n    alignment: {\n      left: \"justify-between text-start\",\n      center: \"justify-center text-center\",\n    },\n    size: {\n      page: \"gap-y-3 gap-x-6 max-sm:flex-col max-sm:items-stretch lg:gap-x-12\",\n      card: \"gap-y-2 gap-x-6 max-sm:flex-col max-sm:items-stretch\",\n      panel: \"gap-y-2 gap-x-6\",\n      hero: \"gap-y-3 gap-x-6 lg:gap-x-12\",\n    },\n    wrap: {\n      true: \"flex-wrap\",\n      false: \"flex-nowrap\",\n    },\n  },\n\n  defaultVariants: {\n    alignment: \"left\",\n    wrap: true,\n  },\n})\n\ntype SectionHeaderSize = NonNullable<VariantProps<typeof sectionHeaderVariants>[\"size\"]>\n\n/**\n * The title each header scale gets, alongside the spacing the variant above gives it: `page`\n * for a route heading, `card` for a standalone card, `panel` for a dashboard or list panel,\n * `hero` for the centered auth and callback screens. The `as` entry keeps the heading outline\n * intact — one `<h1>` per route, `<h2>` for everything nested inside it.\n */\nconst sectionHeaderTitles = {\n  page: { size: \"h3\", as: \"h1\" },\n  card: { size: \"h4\", as: \"h2\" },\n  panel: { size: \"h5\", as: \"h2\" },\n  hero: { size: \"h2\", as: \"h1\" },\n} as const satisfies Record<SectionHeaderSize, { size: HeadingProps[\"size\"]; as: string }>\n\nconst SectionHeaderContext = createContext<{ size: SectionHeaderSize; wrap: boolean }>({\n  size: \"page\",\n  wrap: true,\n})\n\ntype SectionHeaderProps = Omit<useRender.ComponentProps<\"div\">, \"title\"> &\n  Omit<VariantProps<typeof sectionHeaderVariants>, \"wrap\"> & {\n    /**\n     * Keep the title block and the actions on one line instead of wrapping them.\n     */\n    wrap?: boolean\n    /**\n     * Title block. Given any of `title`/`description`/`leading`/`actions`, the header renders\n     * its own `SectionHeaderBody` (empty if there is nothing but actions, so they still sit right);\n     * leave them all out to compose the body by hand, e.g. an entity header with dot-joined\n     * meta or the dashboard greeting.\n     */\n    title?: ReactNode\n    description?: ReactNode\n    actions?: ReactNode\n    /**\n     * Leading visual beside the title, e.g. an entity avatar.\n     */\n    leading?: ReactNode\n  }\n\n/**\n * The one header for every surface in the app: pages, cards, list panels, dialogs and settings\n * sections. Pass `title`/`description`/`actions` for the standard block, or compose\n * `SectionHeaderBody` + `SectionHeaderActions` as children when the content is bespoke.\n */\nfunction SectionHeader({\n  className,\n  alignment = \"left\",\n  size = \"page\",\n  wrap = true,\n  title,\n  description,\n  actions,\n  leading,\n  children,\n  render,\n  ...props\n}: SectionHeaderProps) {\n  const element = useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      className: cn(sectionHeaderVariants({ alignment, size, wrap, className })),\n      children: (\n        <>\n          {(title || description || leading || actions) && (\n            <SectionHeaderBody\n              leading={leading}\n              className={cn(alignment === \"center\" && \"justify-center\")}\n            >\n              {title && <SectionHeaderTitle>{title}</SectionHeaderTitle>}\n              {description && <SectionHeaderDescription>{description}</SectionHeaderDescription>}\n            </SectionHeaderBody>\n          )}\n\n          {actions && <SectionHeaderActions>{actions}</SectionHeaderActions>}\n\n          {children}\n        </>\n      ),\n      ...props,\n    },\n  })\n\n  return <SectionHeaderContext value={{ size, wrap }}>{element}</SectionHeaderContext>\n}\n\n/**\n * The page title. Its visual size and semantic level both follow the header's `size`, so a\n * page heading stays the route's single `<h1>` while cards and panels render `<h2>`s. Pass\n * `size`/`as` to override either one on its own.\n */\nfunction SectionHeaderTitle({ size, as, ...props }: HeadingProps) {\n  const preset = sectionHeaderTitles[use(SectionHeaderContext).size]\n\n  return <Heading size={size ?? preset.size} as={as ?? preset.as} {...props} />\n}\n\ntype SectionHeaderBodyProps = ComponentProps<\"div\"> & {\n  /**\n   * Leading visual, e.g. an entity avatar.\n   */\n  leading?: ReactNode\n}\n\n/**\n * The one title block for every header in the app (pages, cards, dialogs, settings sections):\n * an optional leading visual beside a column of `SectionHeaderTitle` + `SectionHeaderDescription`. Change the\n * spacing here and it changes everywhere.\n */\nfunction SectionHeaderBody({ leading, children, className, ...props }: SectionHeaderBodyProps) {\n  return (\n    <div className={cn(\"flex min-w-0 flex-1 items-center gap-3\", className)} {...props}>\n      {leading}\n      <div className=\"flex min-w-0 flex-col gap-1.5\">{children}</div>\n    </div>\n  )\n}\n\n/**\n * The muted line under a title. Wraps by default; pass `truncate` for one-line entity meta.\n */\nfunction SectionHeaderDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return <p className={cn(descriptionClasses, className)} {...props} />\n}\n\n/**\n * Right-aligned actions. Stops shrinking when the header is `wrap={false}`, so a long title\n * truncates instead of squeezing the buttons.\n */\nfunction SectionHeaderActions({ className, ...props }: ComponentProps<typeof Stack>) {\n  const { size, wrap } = use(SectionHeaderContext)\n\n  return (\n    <Stack\n      className={cn(\n        \"-my-0.5\",\n        !wrap && \"shrink-0\",\n        // Stacked under a page title, the trailing (primary) action leads the row.\n        size === \"page\" && \"max-sm:flex-row-reverse max-sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  SectionHeader,\n  SectionHeaderTitle,\n  SectionHeaderBody,\n  SectionHeaderDescription,\n  SectionHeaderActions,\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,wBAAwB,SAAS;CACrC,MAAM;CAEN,UAAU;EACR,WAAW;GACT,MAAM;GACN,QAAQ;EACV;EACA,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,MAAM;GACN,OAAO;EACT;CACF;CAEA,iBAAiB;EACf,WAAW;EACX,MAAM;CACR;AACF,CAAC;;;;;;;AAUD,MAAM,sBAAsB;CAC1B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;CAC7B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;CAC7B,OAAO;EAAE,MAAM;EAAM,IAAI;CAAK;CAC9B,MAAM;EAAE,MAAM;EAAM,IAAI;CAAK;AAC/B;AAEA,MAAM,uBAAuB,cAA0D;CACrF,MAAM;CACN,MAAM;AACR,CAAC;;;;;;AA4BD,SAAS,cAAc,EACrB,WACA,YAAY,QACZ,OAAO,QACP,OAAO,MACP,OACA,aACA,SACA,SACA,UACA,QACA,GAAG,SACkB;CACrB,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO;GACL,WAAW,GAAG,sBAAsB;IAAE;IAAW;IAAM;IAAM;GAAU,CAAC,CAAC;GACzE,UACE,qBAAA,UAAA,EAAA,UAAA;KACI,SAAS,eAAe,WAAW,YACnC,qBAAC,mBAAD;KACW;KACT,WAAW,GAAG,cAAc,YAAY,gBAAgB;KAF1D,UAAA,CAIG,SAAS,oBAAC,oBAAD,EAAA,UAAqB,MAA0B,CAAA,GACxD,eAAe,oBAAC,0BAAD,EAAA,UAA2B,YAAsC,CAAA,CAChE;;IAGpB,WAAW,oBAAC,sBAAD,EAAA,UAAuB,QAA8B,CAAA;IAEhE;GACD,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;CAED,OAAO,oBAAC,sBAAD;EAAsB,OAAO;GAAE;GAAM;EAAK;EAAI,UAAA;CAA8B,CAAA;AACrF;;;;;;AAOA,SAAS,mBAAmB,EAAE,MAAM,IAAI,GAAG,SAAuB;CAChE,MAAM,SAAS,oBAAoB,IAAI,oBAAoB,CAAC,CAAC;CAE7D,OAAO,oBAAC,SAAD;EAAS,MAAM,QAAQ,OAAO;EAAM,IAAI,MAAM,OAAO;EAAI,GAAI;CAAQ,CAAA;AAC9E;;;;;;AAcA,SAAS,kBAAkB,EAAE,SAAS,UAAU,WAAW,GAAG,SAAiC;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0CAA0C,SAAS;EAAG,GAAI;EAA7E,UAAA,CACG,SACD,oBAAC,OAAD;GAAK,WAAU;GAAiC;EAAc,CAAA,CAC3D;;AAET;;;;AAKA,SAAS,yBAAyB,EAAE,WAAW,GAAG,SAA8B;CAC9E,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtE;;;;;AAMA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CACnF,MAAM,EAAE,MAAM,SAAS,IAAI,oBAAoB;CAE/C,OACE,oBAAC,OAAD;EACE,WAAW,GACT,WACA,CAAC,QAAQ,YAET,SAAS,UAAU,8CACnB,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/components/select.tsx"],"mappings":";;;;cAQM,eAAM,SAAA;cACN,6BAAW,0BAAA,8BAAA,2CAAA,cAAA;cACX,6BAAW,0BAAA,8BAAA,2CAAA,cAAA;iBAER,gBACP,UACA,WACA,OACA,OACA,SACG,SACF,SAAgB,QAAQ,QAAQ,oBAAoB,iCAAc,IAAA;iBAmB5D,uBAAuB,cAAc,SAAS,SAAgB,cAAc,wBAAK,IAAA;iBAWjF,yBAAyB,cAAc,SAAS,SAAgB,gBAAgB,wBAAK,IAAA;iBAqBrF,gBACP,WACA,UACA,OACA,MACA,YACA,yBACG,SACF,SAAgB,MAAM,QACvB,KACE,SAAgB,WAAW,mFAE5B,IAAA;iBA2BM,cAAc,cAAc,SAAS,SAAgB,WAAW,wBAAK,IAAA;iBASrE,aAAa,WAAW,UAAU,UAAU,SAAS,SAAgB,KAAK,wBAAK,IAAA;iBAoB/E,kBAAkB,cAAc,SAAS,SAAgB,UAAU,wBAAK,IAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/components/select.tsx"],"mappings":";;;;cAQM,eAAM,SAAA;cACN,6BAAW,0BAAA,8BAAA,2CAAA,cAAA;cACX,6BAAW,0BAAA,8BAAA,2CAAA,cAAA;iBAER,gBACP,UACA,WACA,OACA,OACA,SACG,SACF,SAAgB,QAAQ,QAAQ,oBAAoB,iCAAc,IAAA;iBAmB5D,uBAAuB,cAAc,SAAS,SAAgB,cAAc,wBAAK,IAAA;iBAWjF,yBAAyB,cAAc,SAAS,SAAgB,gBAAgB,wBAAK,IAAA;iBAqBrF,gBACP,WACA,UACA,OACA,MACA,YACA,yBACG,SACF,SAAgB,MAAM,QACvB,KACE,SAAgB,WAAW,mFAE5B,IAAA;iBA8BM,cAAc,cAAc,SAAS,SAAgB,WAAW,wBAAK,IAAA;iBASrE,aAAa,WAAW,UAAU,UAAU,SAAS,SAAgB,KAAK,wBAAK,IAAA;iBAoB/E,kBAAkB,cAAc,SAAS,SAAgB,UAAU,wBAAK,IAAA"}

package/dist/components/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn, variants } from "../lib/variants.js";
-import { controlTextClasses, popoverAnimationClasses } from "../lib/classes.js";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../lib/icons.js";
+import { controlTextClasses, popoverAnimationClasses } from "../lib/classes.js";
 import { inputVariants } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -57,7 +57,7 @@ function SelectContent({ className, children, align, side, sideOffset = 4, align
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, { className: selectScrollButtonVariants({ position: "top" }) }),
 				/* @__PURE__ */ jsx(Select$1.List, {
-					className: "p-1",
+					className: "max-h-(--available-height) overflow-y-auto p-1",
 					children
 				}),
 				/* @__PURE__ */ jsx(SelectScrollDownButton, { className: selectScrollButtonVariants({ position: "bottom" }) })
@@ -74,7 +74,7 @@ function SelectLabel({ className, ...props }) {
 function SelectItem({ className, children, label, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		label: label ?? (typeof children === "string" ? children : void 0),
-		className: cn(`relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 ${controlTextClasses} text-secondary-foreground outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50`, className),
+		className: cn(`relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 pointer-coarse:min-h-10 ${controlTextClasses} text-secondary-foreground outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50`, className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute left-2 flex size-3.5 items-center justify-center",

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\"\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\nimport { inputVariants } from \"~/components/input\"\nimport { controlTextClasses, popoverAnimationClasses } from \"~/lib/classes\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from \"~/lib/icons\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst Select = SelectPrimitive.Root\nconst SelectGroup = SelectPrimitive.Group\nconst SelectValue = SelectPrimitive.Value\n\nfunction SelectTrigger({\n  children,\n  className,\n  hover = true,\n  focus = true,\n  size,\n  ...props\n}: SelectPrimitive.Trigger.Props & VariantProps<typeof inputVariants>) {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        inputVariants({ hover, focus, size }),\n        \"flex items-center justify-between\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"truncate\">{children}</span>\n\n      <SelectPrimitive.Icon\n        render={<ChevronsUpDownIcon className=\"ml-1 size-4 shrink-0 opacity-50\" />}\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpArrow.Props) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      className={cn(\"flex cursor-pointer items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownArrow.Props) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      className={cn(\"flex cursor-pointer items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nconst selectScrollButtonVariants = variants({\n  base: \"absolute inset-x-0 z-10 bg-background animate-in fade-in-0 duration-300\",\n  variants: {\n    position: {\n      top: \"top-0 mask-b-from-0\",\n      bottom: \"bottom-0 mask-t-from-0\",\n    },\n  },\n})\n\nfunction SelectContent({\n  className,\n  children,\n  align,\n  side,\n  sideOffset = 4,\n  alignItemWithTrigger = false,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          className={cn(\n            \"relative z-50 isolate max-h-(--available-height) min-w-(--anchor-width) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md backdrop-blur-xs\",\n            !alignItemWithTrigger && popoverAnimationClasses,\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton className={selectScrollButtonVariants({ position: \"top\" })} />\n          <SelectPrimitive.List className=\"p-1\">{children}</SelectPrimitive.List>\n          <SelectScrollDownButton className={selectScrollButtonVariants({ position: \"bottom\" })} />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className={cn(\"px-2 py-1.5 text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({ className, children, label, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      label={label ?? (typeof children === \"string\" ? children : undefined)}\n      className={cn(\n        `relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 ${controlTextClasses} text-secondary-foreground outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props} />\n  )\n}\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,SAASA,SAAgB;AAC/B,MAAM,cAAcA,SAAgB;AACpC,MAAM,cAAcA,SAAgB;AAEpC,SAAS,cAAc,EACrB,UACA,WACA,QAAQ,MACR,QAAQ,MACR,MACA,GAAG,SACkE;CACrE,OACE,qBAACA,SAAgB,SAAjB;EACE,WAAW,GACT,cAAc;GAAE;GAAO;GAAO;EAAK,CAAC,GACpC,qCACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,GAE3C,oBAACA,SAAgB,MAAjB,EACE,QAAQ,oBAAC,oBAAD,EAAoB,WAAU,kCAAmC,CAAA,EAC1E,CAAA,CACsB;;AAE7B;AAEA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAA8C;CAC1F,OACE,oBAACA,SAAgB,eAAjB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAEJ,UAAA,oBAAC,eAAD,CAAgB,CAAA;CACa,CAAA;AAEnC;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAgD;CAC9F,OACE,oBAACA,SAAgB,iBAAjB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAEJ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;CACa,CAAA;AAErC;AAEA,MAAM,6BAA6B,SAAS;CAC1C,MAAM;CACN,UAAU,EACR,UAAU;EACR,KAAK;EACL,QAAQ;CACV,EACF;AACF,CAAC;AAED,SAAS,cAAc,EACrB,WACA,UACA,OACA,MACA,aAAa,GACb,uBAAuB,OACvB,GAAG,SAKA;CACH,OACE,oBAACA,SAAgB,QAAjB,EAAA,UACE,oBAACA,SAAgB,YAAjB;EACc;EACL;EACD;EACgB;EACtB,WAAU;EAEV,UAAA,qBAACA,SAAgB,OAAjB;GACE,WAAW,GACT,2KACA,CAAC,wBAAwB,yBACzB,SACF;GACA,GAAI;GANN,UAAA;IAQE,oBAAC,sBAAD,EAAsB,WAAW,2BAA2B,EAAE,UAAU,MAAM,CAAC,EAAI,CAAA;IACnF,oBAACA,SAAgB,MAAjB;KAAsB,WAAU;KAAO;IAA+B,CAAA;IACtE,oBAAC,wBAAD,EAAwB,WAAW,2BAA2B,EAAE,UAAU,SAAS,CAAC,EAAI,CAAA;GACnE;;CACG,CAAA,EACN,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2C;CAC9E,OACE,oBAACA,SAAgB,YAAjB;EACE,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,UAAU,OAAO,GAAG,SAAqC;CACxF,OACE,qBAACA,SAAgB,MAAjB;EACE,OAAO,UAAU,OAAO,aAAa,WAAW,WAAW,KAAA;EAC3D,WAAW,GACT,4FAA4F,mBAAmB,kJAC/G,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,SAAgB,eAAjB,EAAA,UACE,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA,EACF,CAAA;EAC3B,CAAA,GACN,oBAACA,SAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA0C;CACjF,OACE,oBAACA,SAAgB,WAAjB;EAA2B,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAElG"}
+{"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\"\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\nimport { inputVariants } from \"~/components/input\"\nimport { controlTextClasses, popoverAnimationClasses } from \"~/lib/classes\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from \"~/lib/icons\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst Select = SelectPrimitive.Root\nconst SelectGroup = SelectPrimitive.Group\nconst SelectValue = SelectPrimitive.Value\n\nfunction SelectTrigger({\n  children,\n  className,\n  hover = true,\n  focus = true,\n  size,\n  ...props\n}: SelectPrimitive.Trigger.Props & VariantProps<typeof inputVariants>) {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        inputVariants({ hover, focus, size }),\n        \"flex items-center justify-between\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"truncate\">{children}</span>\n\n      <SelectPrimitive.Icon\n        render={<ChevronsUpDownIcon className=\"ml-1 size-4 shrink-0 opacity-50\" />}\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpArrow.Props) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      className={cn(\"flex cursor-pointer items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownArrow.Props) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      className={cn(\"flex cursor-pointer items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nconst selectScrollButtonVariants = variants({\n  base: \"absolute inset-x-0 z-10 bg-background animate-in fade-in-0 duration-300\",\n  variants: {\n    position: {\n      top: \"top-0 mask-b-from-0\",\n      bottom: \"bottom-0 mask-t-from-0\",\n    },\n  },\n})\n\nfunction SelectContent({\n  className,\n  children,\n  align,\n  side,\n  sideOffset = 4,\n  alignItemWithTrigger = false,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          className={cn(\n            \"relative z-50 isolate max-h-(--available-height) min-w-(--anchor-width) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md backdrop-blur-xs\",\n            !alignItemWithTrigger && popoverAnimationClasses,\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton className={selectScrollButtonVariants({ position: \"top\" })} />\n          {/* The list is the scroller (not the popup), so the scroll arrows can overlay it. */}\n          <SelectPrimitive.List className=\"max-h-(--available-height) overflow-y-auto p-1\">\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton className={selectScrollButtonVariants({ position: \"bottom\" })} />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className={cn(\"px-2 py-1.5 text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({ className, children, label, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      label={label ?? (typeof children === \"string\" ? children : undefined)}\n      className={cn(\n        `relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 pointer-coarse:min-h-10 ${controlTextClasses} text-secondary-foreground outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props} />\n  )\n}\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,SAASA,SAAgB;AAC/B,MAAM,cAAcA,SAAgB;AACpC,MAAM,cAAcA,SAAgB;AAEpC,SAAS,cAAc,EACrB,UACA,WACA,QAAQ,MACR,QAAQ,MACR,MACA,GAAG,SACkE;CACrE,OACE,qBAACA,SAAgB,SAAjB;EACE,WAAW,GACT,cAAc;GAAE;GAAO;GAAO;EAAK,CAAC,GACpC,qCACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,GAE3C,oBAACA,SAAgB,MAAjB,EACE,QAAQ,oBAAC,oBAAD,EAAoB,WAAU,kCAAmC,CAAA,EAC1E,CAAA,CACsB;;AAE7B;AAEA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAA8C;CAC1F,OACE,oBAACA,SAAgB,eAAjB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAEJ,UAAA,oBAAC,eAAD,CAAgB,CAAA;CACa,CAAA;AAEnC;AAEA,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAgD;CAC9F,OACE,oBAACA,SAAgB,iBAAjB;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,GAAI;EAEJ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;CACa,CAAA;AAErC;AAEA,MAAM,6BAA6B,SAAS;CAC1C,MAAM;CACN,UAAU,EACR,UAAU;EACR,KAAK;EACL,QAAQ;CACV,EACF;AACF,CAAC;AAED,SAAS,cAAc,EACrB,WACA,UACA,OACA,MACA,aAAa,GACb,uBAAuB,OACvB,GAAG,SAKA;CACH,OACE,oBAACA,SAAgB,QAAjB,EAAA,UACE,oBAACA,SAAgB,YAAjB;EACc;EACL;EACD;EACgB;EACtB,WAAU;EAEV,UAAA,qBAACA,SAAgB,OAAjB;GACE,WAAW,GACT,2KACA,CAAC,wBAAwB,yBACzB,SACF;GACA,GAAI;GANN,UAAA;IAQE,oBAAC,sBAAD,EAAsB,WAAW,2BAA2B,EAAE,UAAU,MAAM,CAAC,EAAI,CAAA;IAEnF,oBAACA,SAAgB,MAAjB;KAAsB,WAAU;KAC7B;IACmB,CAAA;IACtB,oBAAC,wBAAD,EAAwB,WAAW,2BAA2B,EAAE,UAAU,SAAS,CAAC,EAAI,CAAA;GACnE;;CACG,CAAA,EACN,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2C;CAC9E,OACE,oBAACA,SAAgB,YAAjB;EACE,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,UAAU,OAAO,GAAG,SAAqC;CACxF,OACE,qBAACA,SAAgB,MAAjB;EACE,OAAO,UAAU,OAAO,aAAa,WAAW,WAAW,KAAA;EAC3D,WAAW,GACT,oHAAoH,mBAAmB,kJACvI,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,SAAgB,eAAjB,EAAA,UACE,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA,EACF,CAAA;EAC3B,CAAA,GACN,oBAACA,SAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA0C;CACjF,OACE,oBAACA,SAAgB,WAAjB;EAA2B,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAElG"}

package/dist/components/stat-strip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "../lib/variants.js";
 import { Format } from "@number-flow/react";
 import { useRender } from "@base-ui/react/use-render";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 //#region src/components/stat-strip.d.ts
 declare const stripVariants: import("tailwind-variants").TVReturnType<{
   variant: {
@@ -23,7 +23,11 @@ type StatStripProps = ComponentProps<"div"> & VariantProps<typeof stripVariants>
 declare function StatStrip({ className, variant, ...props }: StatStripProps): import("react").JSX.Element;
 type StatStripItemProps = Omit<useRender.ComponentProps<"div">, "children"> & {
   label: string;
-  value: string | number;
+  /**
+   * A number (or a string with a `format`) spins through `AnimatedNumber`; any other node,
+   * e.g. two `AnimatedNumber`s composing "1m 38s", renders as is.
+   */
+  value: ReactNode;
   format?: Format;
   hint?: string;
   /**

package/dist/components/stat-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-strip.d.ts","names":[],"sources":["../../src/components/stat-strip.tsx"],"mappings":";;;;;cAOM,2CAAa;;;;;;;;;;;;;;;;KAmBd,iBAAiB,wBAAwB,oBAAoB;iBAEzD,YAAY,WAAW,YAAY,SAAS,iCAAc,IAAA;KAU9D,qBAAqB,KAAK,UAAU;EACvC;EACA;EACA,SAAS;EACT;;;;;EAKA;;iBAGO,gBACP,OACA,OACA,QACA,MACA,UACA,QACA,cACG,SACF,qCAAkB,+CAAA"}
+{"version":3,"file":"stat-strip.d.ts","names":[],"sources":["../../src/components/stat-strip.tsx"],"mappings":";;;;;cAOM,2CAAa;;;;;;;;;;;;;;;;KAmBd,iBAAiB,wBAAwB,oBAAoB;iBAEzD,YAAY,WAAW,YAAY,SAAS,iCAAc,IAAA;KAU9D,qBAAqB,KAAK,UAAU;EACvC;;;;;EAKA,OAAO;EACP,SAAS;EACT;;;;;EAKA;;iBAGO,gBACP,OACA,OACA,QACA,MACA,UACA,QACA,cACG,SACF,qCAAkB,+CAAA"}

package/dist/components/stat-strip.js

@@ -3,6 +3,7 @@ import { cn, variants } from "../lib/variants.js";
 import { cardSurfaceClasses } from "./card.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { isValidElement } from "react";
 //#region src/components/stat-strip.tsx
 const stripVariants = variants({
 	base: "group/strip grid grid-cols-2 gap-y-1 max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:flex sm:flex-wrap sm:gap-y-0",
@@ -31,19 +32,19 @@ function StatStripItem({ label, value, format, hint, selected, render, className
 			className: cn("relative min-w-0 flex-1 rounded-lg border border-transparent px-4 py-3 text-start", "before:absolute before:inset-y-2 before:-left-px before:w-px before:bg-border first:before:hidden max-sm:before:hidden", "group-data-[variant=plain]/strip:data-selected:before:hidden group-data-[variant=plain]/strip:[[data-selected]+&]:before:hidden", "group-data-[variant=track]/strip:before:-left-[8px]", "[&:is(button)]:hover:bg-foreground/3", "group-data-[variant=plain]/strip:rounded-none group-data-[variant=plain]/strip:px-5 group-data-[variant=plain]/strip:py-4 group-data-[variant=plain]/strip:before:inset-y-0 group-data-[variant=plain]/strip:before:left-0", "group-data-[variant=plain]/strip:data-selected:bg-muted", "group-data-[variant=track]/strip:data-selected:border-border group-data-[variant=track]/strip:data-selected:bg-card group-data-[variant=track]/strip:data-selected:shadow-xs", "group-data-[variant=track]/strip:not-data-selected:[&_[data-value]]:text-muted-foreground", "group-data-[variant=track]/strip:[&:is(button)]:hover:not-data-selected:bg-card/60", className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("p", {
-					className: "truncate text-muted-foreground text-sm",
+					className: "text-muted-foreground text-sm sm:truncate",
 					children: label
 				}),
 				/* @__PURE__ */ jsx("p", {
 					"data-value": true,
-					className: "mt-0.5 truncate font-display font-semibold text-2xl tabular-nums",
-					children: /* @__PURE__ */ jsx(AnimatedNumber, {
+					className: "mt-0.5 truncate font-display font-semibold text-xl leading-8 tabular-nums sm:text-2xl sm:leading-9",
+					children: isValidElement(value) || typeof value !== "number" && typeof value !== "string" ? value : /* @__PURE__ */ jsx(AnimatedNumber, {
 						value,
 						format
 					})
 				}),
 				hint && /* @__PURE__ */ jsx("p", {
-					className: "truncate text-muted-foreground text-xs",
+					className: "text-muted-foreground text-xs sm:truncate",
 					children: hint
 				})
 			] }),

package/dist/components/stat-strip.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-strip.js","names":[],"sources":["../../src/components/stat-strip.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport type { Format } from \"@number-flow/react\"\nimport type { ComponentProps } from \"react\"\nimport { AnimatedNumber } from \"~/components/animated-number\"\nimport { cardSurfaceClasses } from \"~/components/card\"\nimport { cn, variants, type VariantProps } from \"~/lib/variants\"\n\nconst stripVariants = variants({\n  base: \"group/strip grid grid-cols-2 gap-y-1 max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:flex sm:flex-wrap sm:gap-y-0\",\n\n  variants: {\n    variant: {\n      // A white card of figures, divided by full-height hairlines.\n      plain: cardSurfaceClasses,\n      // A canvas-toned track where the selected figure sits on a raised card, like a\n      // segmented control; for strips that drive the panel beside them.\n      // 13px gap: a 1px divider then sits 6px from the card on either side, matching the 6px inset.\n      track: \"rounded-xl bg-background p-1.5 sm:gap-x-[13px]\",\n    },\n  },\n\n  defaultVariants: {\n    variant: \"plain\",\n  },\n})\n\ntype StatStripProps = ComponentProps<\"div\"> & VariantProps<typeof stripVariants>\n\nfunction StatStrip({ className, variant, ...props }: StatStripProps) {\n  return (\n    <div\n      data-variant={variant ?? \"plain\"}\n      className={cn(stripVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\ntype StatStripItemProps = Omit<useRender.ComponentProps<\"div\">, \"children\"> & {\n  label: string\n  value: string | number\n  format?: Format\n  hint?: string\n  /**\n   * Marks the item as the one driving the panel beside it. Pass `render={<button ... />}`\n   * to make it selectable.\n   */\n  selected?: boolean\n}\n\nfunction StatStripItem({\n  label,\n  value,\n  format,\n  hint,\n  selected,\n  render,\n  className,\n  ...props\n}: StatStripItemProps) {\n  return useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      \"data-selected\": selected || undefined,\n      className: cn(\n        // The border is always laid out and only colored when selected, so toggling\n        // never shifts the row.\n        \"relative min-w-0 flex-1 rounded-lg border border-transparent px-4 py-3 text-start\",\n        // Hairline divider between neighbours. The plain strip hides it around the\n        // selected fill; the track keeps it, centered in the gap between cards.\n        \"before:absolute before:inset-y-2 before:-left-px before:w-px before:bg-border first:before:hidden max-sm:before:hidden\",\n        \"group-data-[variant=plain]/strip:data-selected:before:hidden group-data-[variant=plain]/strip:[[data-selected]+&]:before:hidden\",\n        // Offsets are measured from the padding box, so the 1px border is added to land\n        // exactly halfway across the 13px gap.\n        \"group-data-[variant=track]/strip:before:-left-[8px]\",\n        \"[&:is(button)]:hover:bg-foreground/3\",\n        // Plain card: roomier cells, full-height dividers, selected item on a soft fill.\n        \"group-data-[variant=plain]/strip:rounded-none group-data-[variant=plain]/strip:px-5 group-data-[variant=plain]/strip:py-4 group-data-[variant=plain]/strip:before:inset-y-0 group-data-[variant=plain]/strip:before:left-0\",\n        \"group-data-[variant=plain]/strip:data-selected:bg-muted\",\n        // Track: the selected item is a raised card; unselected figures recede.\n        \"group-data-[variant=track]/strip:data-selected:border-border group-data-[variant=track]/strip:data-selected:bg-card group-data-[variant=track]/strip:data-selected:shadow-xs\",\n        \"group-data-[variant=track]/strip:not-data-selected:[&_[data-value]]:text-muted-foreground\",\n        \"group-data-[variant=track]/strip:[&:is(button)]:hover:not-data-selected:bg-card/60\",\n        className,\n      ),\n      children: (\n        <>\n          <p className=\"truncate text-muted-foreground text-sm\">{label}</p>\n\n          <p\n            data-value\n            className=\"mt-0.5 truncate font-display font-semibold text-2xl tabular-nums\"\n          >\n            <AnimatedNumber value={value} format={format} />\n          </p>\n\n          {hint && <p className=\"truncate text-muted-foreground text-xs\">{hint}</p>}\n        </>\n      ),\n      ...props,\n    },\n  })\n}\n\nexport { StatStrip, StatStripItem }\n"],"mappings":";;;;;;AAOA,MAAM,gBAAgB,SAAS;CAC7B,MAAM;CAEN,UAAU,EACR,SAAS;EAEP,OAAO;EAIP,OAAO;CACT,EACF;CAEA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC;AAID,SAAS,UAAU,EAAE,WAAW,SAAS,GAAG,SAAyB;CACnE,OACE,oBAAC,OAAD;EACE,gBAAc,WAAW;EACzB,WAAW,GAAG,cAAc;GAAE;GAAS;EAAU,CAAC,CAAC;EACnD,GAAI;CACL,CAAA;AAEL;AAcA,SAAS,cAAc,EACrB,OACA,OACA,QACA,MACA,UACA,QACA,WACA,GAAG,SACkB;CACrB,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GACL,iBAAiB,YAAY,KAAA;GAC7B,WAAW,GAGT,qFAGA,0HACA,mIAGA,uDACA,wCAEA,8NACA,2DAEA,gLACA,6FACA,sFACA,SACF;GACA,UACE,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,KAAD;KAAG,WAAU;KAA0C,UAAA;IAAS,CAAA;IAEhE,oBAAC,KAAD;KACE,cAAA;KACA,WAAU;KAEV,UAAA,oBAAC,gBAAD;MAAuB;MAAe;KAAS,CAAA;IAC9C,CAAA;IAEF,QAAQ,oBAAC,KAAD;KAAG,WAAU;KAA0C,UAAA;IAAQ,CAAA;GACxE,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;AACH"}
+{"version":3,"file":"stat-strip.js","names":[],"sources":["../../src/components/stat-strip.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport type { Format } from \"@number-flow/react\"\nimport { type ComponentProps, isValidElement, type ReactNode } from \"react\"\nimport { AnimatedNumber } from \"~/components/animated-number\"\nimport { cardSurfaceClasses } from \"~/components/card\"\nimport { cn, variants, type VariantProps } from \"~/lib/variants\"\n\nconst stripVariants = variants({\n  base: \"group/strip grid grid-cols-2 gap-y-1 max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:flex sm:flex-wrap sm:gap-y-0\",\n\n  variants: {\n    variant: {\n      // A white card of figures, divided by full-height hairlines.\n      plain: cardSurfaceClasses,\n      // A canvas-toned track where the selected figure sits on a raised card, like a\n      // segmented control; for strips that drive the panel beside them.\n      // 13px gap: a 1px divider then sits 6px from the card on either side, matching the 6px inset.\n      track: \"rounded-xl bg-background p-1.5 sm:gap-x-[13px]\",\n    },\n  },\n\n  defaultVariants: {\n    variant: \"plain\",\n  },\n})\n\ntype StatStripProps = ComponentProps<\"div\"> & VariantProps<typeof stripVariants>\n\nfunction StatStrip({ className, variant, ...props }: StatStripProps) {\n  return (\n    <div\n      data-variant={variant ?? \"plain\"}\n      className={cn(stripVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\ntype StatStripItemProps = Omit<useRender.ComponentProps<\"div\">, \"children\"> & {\n  label: string\n  /**\n   * A number (or a string with a `format`) spins through `AnimatedNumber`; any other node,\n   * e.g. two `AnimatedNumber`s composing \"1m 38s\", renders as is.\n   */\n  value: ReactNode\n  format?: Format\n  hint?: string\n  /**\n   * Marks the item as the one driving the panel beside it. Pass `render={<button ... />}`\n   * to make it selectable.\n   */\n  selected?: boolean\n}\n\nfunction StatStripItem({\n  label,\n  value,\n  format,\n  hint,\n  selected,\n  render,\n  className,\n  ...props\n}: StatStripItemProps) {\n  return useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      \"data-selected\": selected || undefined,\n      className: cn(\n        // The border is always laid out and only colored when selected, so toggling\n        // never shifts the row.\n        \"relative min-w-0 flex-1 rounded-lg border border-transparent px-4 py-3 text-start\",\n        // Hairline divider between neighbours. The plain strip hides it around the\n        // selected fill; the track keeps it, centered in the gap between cards.\n        \"before:absolute before:inset-y-2 before:-left-px before:w-px before:bg-border first:before:hidden max-sm:before:hidden\",\n        \"group-data-[variant=plain]/strip:data-selected:before:hidden group-data-[variant=plain]/strip:[[data-selected]+&]:before:hidden\",\n        // Offsets are measured from the padding box, so the 1px border is added to land\n        // exactly halfway across the 13px gap.\n        \"group-data-[variant=track]/strip:before:-left-[8px]\",\n        \"[&:is(button)]:hover:bg-foreground/3\",\n        // Plain card: roomier cells, full-height dividers, selected item on a soft fill.\n        \"group-data-[variant=plain]/strip:rounded-none group-data-[variant=plain]/strip:px-5 group-data-[variant=plain]/strip:py-4 group-data-[variant=plain]/strip:before:inset-y-0 group-data-[variant=plain]/strip:before:left-0\",\n        \"group-data-[variant=plain]/strip:data-selected:bg-muted\",\n        // Track: the selected item is a raised card; unselected figures recede.\n        \"group-data-[variant=track]/strip:data-selected:border-border group-data-[variant=track]/strip:data-selected:bg-card group-data-[variant=track]/strip:data-selected:shadow-xs\",\n        \"group-data-[variant=track]/strip:not-data-selected:[&_[data-value]]:text-muted-foreground\",\n        \"group-data-[variant=track]/strip:[&:is(button)]:hover:not-data-selected:bg-card/60\",\n        className,\n      ),\n      children: (\n        <>\n          <p className=\"text-muted-foreground text-sm sm:truncate\">{label}</p>\n\n          {/* Fixed line heights (32px / 36px) equal NumberFlow's rendered box at text-xl / text-2xl,\n              so a string value (\"—\", \"0:00\") sits at exactly the same height as an animated one. */}\n          <p\n            data-value\n            className=\"mt-0.5 truncate font-display font-semibold text-xl leading-8 tabular-nums sm:text-2xl sm:leading-9\"\n          >\n            {isValidElement(value) || (typeof value !== \"number\" && typeof value !== \"string\") ? (\n              value\n            ) : (\n              <AnimatedNumber value={value} format={format} />\n            )}\n          </p>\n\n          {hint && <p className=\"text-muted-foreground text-xs sm:truncate\">{hint}</p>}\n        </>\n      ),\n      ...props,\n    },\n  })\n}\n\nexport { StatStrip, StatStripItem }\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,SAAS;CAC7B,MAAM;CAEN,UAAU,EACR,SAAS;EAEP,OAAO;EAIP,OAAO;CACT,EACF;CAEA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC;AAID,SAAS,UAAU,EAAE,WAAW,SAAS,GAAG,SAAyB;CACnE,OACE,oBAAC,OAAD;EACE,gBAAc,WAAW;EACzB,WAAW,GAAG,cAAc;GAAE;GAAS;EAAU,CAAC,CAAC;EACnD,GAAI;CACL,CAAA;AAEL;AAkBA,SAAS,cAAc,EACrB,OACA,OACA,QACA,MACA,UACA,QACA,WACA,GAAG,SACkB;CACrB,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GACL,iBAAiB,YAAY,KAAA;GAC7B,WAAW,GAGT,qFAGA,0HACA,mIAGA,uDACA,wCAEA,8NACA,2DAEA,gLACA,6FACA,sFACA,SACF;GACA,UACE,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,KAAD;KAAG,WAAU;KAA6C,UAAA;IAAS,CAAA;IAInE,oBAAC,KAAD;KACE,cAAA;KACA,WAAU;KAET,UAAA,eAAe,KAAK,KAAM,OAAO,UAAU,YAAY,OAAO,UAAU,WACvE,QAEA,oBAAC,gBAAD;MAAuB;MAAe;KAAS,CAAA;IAEhD,CAAA;IAEF,QAAQ,oBAAC,KAAD;KAAG,WAAU;KAA6C,UAAA;IAAQ,CAAA;GAC3E,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;AACH"}

package/dist/components/theme.d.ts

@@ -0,0 +1,25 @@
+import { Tabs } from "./tabs.js";
+import { ComponentProps } from "react";
+//#region src/components/theme.d.ts
+export type Theme = "system" | "light" | "dark";
+/**
+ * The current theme and its setter. Persists to `localStorage["theme"]`, stays in sync across
+ * tabs, and drives the stylesheet's `light-dark()` tokens by setting `data-theme` on `<html>`
+ * (`system` removes it so the OS decides). SSR-safe: the server renders `system`.
+ *
+ * The hook only applies the stored theme once the first subscriber mounts. To avoid a flash of
+ * the wrong scheme, apply it before first paint with this inline script in `<head>`:
+ *
+ * ```html
+ * <script>try{var t=localStorage.theme;if(t==="light"||t==="dark")document.documentElement.dataset.theme=t}catch(e){}</script>
+ * ```
+ */
+export declare function useTheme(): [Theme, (theme: Theme) => void];
+type ThemeSelectProps = Omit<ComponentProps<typeof Tabs>, "value" | "defaultValue" | "onValueChange">;
+/**
+ * Segmented System / Light / Dark control bound to `useTheme`, for a settings page or an
+ * account menu.
+ */
+export declare function ThemeSelect({ className, ...props }: ThemeSelectProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=theme.d.ts.map

package/dist/components/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","names":[],"sources":["../../src/components/theme.tsx"],"mappings":";;;YAKY;;;;;;;;;;;;;wBAyGI,aAAa,QAAQ,OAAO;KAMvC,mBAAmB,KACtB,sBAAsB;;;;;wBAQR,cAAc,cAAc,SAAS,mCAAgB,IAAA"}

package/dist/components/theme.js

@@ -0,0 +1,128 @@
+"use client";
+import { Tabs, TabsList, TabsTrigger } from "./tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+//#region src/components/theme.tsx
+const STORAGE_KEY = "theme";
+const THEMES = [
+	"system",
+	"light",
+	"dark"
+];
+/**
+* Tiny module store behind `useTheme`. One value shared by every subscriber, kept in step with
+* `localStorage` (and with other tabs through the `storage` event) and mirrored onto
+* `<html data-theme>`, which is what the stylesheet's `color-scheme` rules key on.
+*/
+const listeners = /* @__PURE__ */ new Set();
+let current;
+function isTheme(value) {
+	return typeof value === "string" && THEMES.includes(value);
+}
+function readStored() {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		return isTheme(stored) ? stored : "system";
+	} catch {
+		return "system";
+	}
+}
+function writeStored(theme) {
+	try {
+		if (theme === "system") localStorage.removeItem(STORAGE_KEY);
+		else localStorage.setItem(STORAGE_KEY, theme);
+	} catch {}
+}
+/**
+* `system` clears the attribute so `color-scheme: light dark` follows the OS; anything else
+* pins it.
+*/
+function applyTheme(theme) {
+	const root = document.documentElement;
+	if (theme === "system") delete root.dataset.theme;
+	else root.dataset.theme = theme;
+}
+function emit() {
+	for (const listener of listeners) listener();
+}
+function onStorage(event) {
+	if (event.key !== null && event.key !== STORAGE_KEY) return;
+	current = readStored();
+	applyTheme(current);
+	emit();
+}
+function getSnapshot() {
+	current ??= readStored();
+	return current;
+}
+function getServerSnapshot() {
+	return "system";
+}
+function subscribe(listener) {
+	if (listeners.size === 0) {
+		window.addEventListener("storage", onStorage);
+		applyTheme(getSnapshot());
+	}
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size === 0) window.removeEventListener("storage", onStorage);
+	};
+}
+function setTheme(theme) {
+	if (theme === current) return;
+	current = theme;
+	writeStored(theme);
+	applyTheme(theme);
+	emit();
+}
+/**
+* The current theme and its setter. Persists to `localStorage["theme"]`, stays in sync across
+* tabs, and drives the stylesheet's `light-dark()` tokens by setting `data-theme` on `<html>`
+* (`system` removes it so the OS decides). SSR-safe: the server renders `system`.
+*
+* The hook only applies the stored theme once the first subscriber mounts. To avoid a flash of
+* the wrong scheme, apply it before first paint with this inline script in `<head>`:
+*
+* ```html
+* <script>try{var t=localStorage.theme;if(t==="light"||t==="dark")document.documentElement.dataset.theme=t}catch(e){}<\/script>
+* ```
+*/
+function useTheme() {
+	return [useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot), setTheme];
+}
+/**
+* Segmented System / Light / Dark control bound to `useTheme`, for a settings page or an
+* account menu.
+*/
+function ThemeSelect({ className, ...props }) {
+	const [theme, setTheme] = useTheme();
+	return /* @__PURE__ */ jsx(Tabs, {
+		value: theme,
+		onValueChange: (next) => setTheme(next),
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs(TabsList, {
+			variant: "segmented",
+			"aria-label": "Theme",
+			children: [
+				/* @__PURE__ */ jsx(TabsTrigger, {
+					value: "system",
+					children: "System"
+				}),
+				/* @__PURE__ */ jsx(TabsTrigger, {
+					value: "light",
+					children: "Light"
+				}),
+				/* @__PURE__ */ jsx(TabsTrigger, {
+					value: "dark",
+					children: "Dark"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ThemeSelect, useTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/components/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/components/theme.tsx"],"sourcesContent":["\"use client\"\n\nimport { type ComponentProps, useSyncExternalStore } from \"react\"\nimport { Tabs, TabsList, TabsTrigger } from \"~/components/tabs\"\n\nexport type Theme = \"system\" | \"light\" | \"dark\"\n\nconst STORAGE_KEY = \"theme\"\nconst THEMES: readonly Theme[] = [\"system\", \"light\", \"dark\"]\n\n/**\n * Tiny module store behind `useTheme`. One value shared by every subscriber, kept in step with\n * `localStorage` (and with other tabs through the `storage` event) and mirrored onto\n * `<html data-theme>`, which is what the stylesheet's `color-scheme` rules key on.\n */\nconst listeners = new Set<() => void>()\nlet current: Theme | undefined\n\nfunction isTheme(value: unknown): value is Theme {\n  return typeof value === \"string\" && THEMES.includes(value as Theme)\n}\n\nfunction readStored(): Theme {\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY)\n    return isTheme(stored) ? stored : \"system\"\n  } catch {\n    // Storage can be unavailable (privacy mode, sandboxed iframe) — fall back to the OS.\n    return \"system\"\n  }\n}\n\nfunction writeStored(theme: Theme) {\n  try {\n    if (theme === \"system\") localStorage.removeItem(STORAGE_KEY)\n    else localStorage.setItem(STORAGE_KEY, theme)\n  } catch {\n    // Storage being unavailable only costs persistence; the in-memory value still applies.\n  }\n}\n\n/**\n * `system` clears the attribute so `color-scheme: light dark` follows the OS; anything else\n * pins it.\n */\nfunction applyTheme(theme: Theme) {\n  const root = document.documentElement\n\n  if (theme === \"system\") delete root.dataset.theme\n  else root.dataset.theme = theme\n}\n\nfunction emit() {\n  for (const listener of listeners) listener()\n}\n\nfunction onStorage(event: StorageEvent) {\n  // `key === null` is a `clear()` from another tab; treat it as a reset.\n  if (event.key !== null && event.key !== STORAGE_KEY) return\n\n  current = readStored()\n  applyTheme(current)\n  emit()\n}\n\nfunction getSnapshot(): Theme {\n  current ??= readStored()\n  return current\n}\n\nfunction getServerSnapshot(): Theme {\n  return \"system\"\n}\n\nfunction subscribe(listener: () => void) {\n  if (listeners.size === 0) {\n    window.addEventListener(\"storage\", onStorage)\n    // Apps that skip the inline script still land on the stored theme, one paint late.\n    applyTheme(getSnapshot())\n  }\n\n  listeners.add(listener)\n\n  return () => {\n    listeners.delete(listener)\n    if (listeners.size === 0) window.removeEventListener(\"storage\", onStorage)\n  }\n}\n\nfunction setTheme(theme: Theme) {\n  if (theme === current) return\n\n  current = theme\n  writeStored(theme)\n  applyTheme(theme)\n  emit()\n}\n\n/**\n * The current theme and its setter. Persists to `localStorage[\"theme\"]`, stays in sync across\n * tabs, and drives the stylesheet's `light-dark()` tokens by setting `data-theme` on `<html>`\n * (`system` removes it so the OS decides). SSR-safe: the server renders `system`.\n *\n * The hook only applies the stored theme once the first subscriber mounts. To avoid a flash of\n * the wrong scheme, apply it before first paint with this inline script in `<head>`:\n *\n * ```html\n * <script>try{var t=localStorage.theme;if(t===\"light\"||t===\"dark\")document.documentElement.dataset.theme=t}catch(e){}</script>\n * ```\n */\nexport function useTheme(): [Theme, (theme: Theme) => void] {\n  const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n\n  return [theme, setTheme]\n}\n\ntype ThemeSelectProps = Omit<\n  ComponentProps<typeof Tabs>,\n  \"value\" | \"defaultValue\" | \"onValueChange\"\n>\n\n/**\n * Segmented System / Light / Dark control bound to `useTheme`, for a settings page or an\n * account menu.\n */\nexport function ThemeSelect({ className, ...props }: ThemeSelectProps) {\n  const [theme, setTheme] = useTheme()\n\n  return (\n    <Tabs\n      value={theme}\n      onValueChange={(next: Theme) => setTheme(next)}\n      className={className}\n      {...props}\n    >\n      <TabsList variant=\"segmented\" aria-label=\"Theme\">\n        <TabsTrigger value=\"system\">System</TabsTrigger>\n        <TabsTrigger value=\"light\">Light</TabsTrigger>\n        <TabsTrigger value=\"dark\">Dark</TabsTrigger>\n      </TabsList>\n    </Tabs>\n  )\n}\n"],"mappings":";;;;;AAOA,MAAM,cAAc;AACpB,MAAM,SAA2B;CAAC;CAAU;CAAS;AAAM;;;;;;AAO3D,MAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI;AAEJ,SAAS,QAAQ,OAAgC;CAC/C,OAAO,OAAO,UAAU,YAAY,OAAO,SAAS,KAAc;AACpE;AAEA,SAAS,aAAoB;CAC3B,IAAI;EACF,MAAM,SAAS,aAAa,QAAQ,WAAW;EAC/C,OAAO,QAAQ,MAAM,IAAI,SAAS;CACpC,QAAQ;EAEN,OAAO;CACT;AACF;AAEA,SAAS,YAAY,OAAc;CACjC,IAAI;EACF,IAAI,UAAU,UAAU,aAAa,WAAW,WAAW;OACtD,aAAa,QAAQ,aAAa,KAAK;CAC9C,QAAQ,CAER;AACF;;;;;AAMA,SAAS,WAAW,OAAc;CAChC,MAAM,OAAO,SAAS;CAEtB,IAAI,UAAU,UAAU,OAAO,KAAK,QAAQ;MACvC,KAAK,QAAQ,QAAQ;AAC5B;AAEA,SAAS,OAAO;CACd,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,SAAS,UAAU,OAAqB;CAEtC,IAAI,MAAM,QAAQ,QAAQ,MAAM,QAAQ,aAAa;CAErD,UAAU,WAAW;CACrB,WAAW,OAAO;CAClB,KAAK;AACP;AAEA,SAAS,cAAqB;CAC5B,YAAY,WAAW;CACvB,OAAO;AACT;AAEA,SAAS,oBAA2B;CAClC,OAAO;AACT;AAEA,SAAS,UAAU,UAAsB;CACvC,IAAI,UAAU,SAAS,GAAG;EACxB,OAAO,iBAAiB,WAAW,SAAS;EAE5C,WAAW,YAAY,CAAC;CAC1B;CAEA,UAAU,IAAI,QAAQ;CAEtB,aAAa;EACX,UAAU,OAAO,QAAQ;EACzB,IAAI,UAAU,SAAS,GAAG,OAAO,oBAAoB,WAAW,SAAS;CAC3E;AACF;AAEA,SAAS,SAAS,OAAc;CAC9B,IAAI,UAAU,SAAS;CAEvB,UAAU;CACV,YAAY,KAAK;CACjB,WAAW,KAAK;CAChB,KAAK;AACP;;;;;;;;;;;;;AAcA,SAAgB,WAA4C;CAG1D,OAAO,CAFO,qBAAqB,WAAW,aAAa,iBAE/C,GAAG,QAAQ;AACzB;;;;;AAWA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,MAAM,CAAC,OAAO,YAAY,SAAS;CAEnC,OACE,oBAAC,MAAD;EACE,OAAO;EACP,gBAAgB,SAAgB,SAAS,IAAI;EAClC;EACX,GAAI;EAEJ,UAAA,qBAAC,UAAD;GAAU,SAAQ;GAAY,cAAW;GAAzC,UAAA;IACE,oBAAC,aAAD;KAAa,OAAM;KAAS,UAAA;IAAmB,CAAA;IAC/C,oBAAC,aAAD;KAAa,OAAM;KAAQ,UAAA;IAAkB,CAAA;IAC7C,oBAAC,aAAD;KAAa,OAAM;KAAO,UAAA;IAAiB,CAAA;GACnC;;CACN,CAAA;AAEV"}

package/dist/components/toaster.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/variants.js";
-import { controlTextClasses } from "../lib/classes.js";
 import { CircleCheckIcon, CircleHelpIcon, CircleXIcon, LoaderIcon } from "../lib/icons.js";
+import { controlTextClasses } from "../lib/classes.js";
 import { jsx } from "react/jsx-runtime";
 import { Toaster as Toaster$1 } from "sonner";
 //#region src/components/toaster.tsx
@@ -10,6 +10,11 @@ function Toaster({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toaster$1, {
 		className: "pointer-events-auto",
 		offset: 16,
+		mobileOffset: {
+			bottom: "calc(16px + env(safe-area-inset-bottom))",
+			left: 16,
+			right: 16
+		},
 		toastOptions: {
 			unstyled: true,
 			classNames: {

package/dist/components/toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","names":["Sonner"],"sources":["../../src/components/toaster.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { Toaster as Sonner } from \"sonner\"\nimport { controlTextClasses } from \"~/lib/classes\"\nimport { CircleCheckIcon, CircleHelpIcon, CircleXIcon, LoaderIcon } from \"~/lib/icons\"\nimport { cn } from \"~/lib/variants\"\n\n/** The halo that lifts a solid-colored toast off whatever it floats over. */\nconst toastRingClasses = \"ring ring-background/50\"\n\nexport function Toaster({ className, ...props }: ComponentProps<typeof Sonner>) {\n  return (\n    <Sonner\n      className=\"pointer-events-auto\"\n      offset={16}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          /*\n           * Sonner joins `toast` with exactly one type key per toast (`default` for untyped\n           * ones) as a plain string, so tailwind-merge never sees the pair. Anything that\n           * differs per type — background, text, halo — therefore lives on the type keys\n           * only, and never gets cancelled here.\n           */\n          toast: cn(\n            `flex items-start gap-2 p-4 ${controlTextClasses} font-medium rounded-lg shadow-sm`,\n            className,\n          ),\n          default: \"bg-background border border-border text-foreground\",\n          info: cn(\"bg-foreground text-background\", toastRingClasses),\n          success: cn(\"bg-success text-white\", toastRingClasses),\n          error: cn(\"bg-danger text-white\", toastRingClasses),\n          content: \"w-full\",\n          description: \"font-normal opacity-80\",\n          icon: \"mt-0.5\",\n        },\n      }}\n      icons={{\n        info: <CircleHelpIcon className=\"size-4\" />,\n        success: <CircleCheckIcon className=\"size-4\" />,\n        error: <CircleXIcon className=\"size-4\" />,\n        loading: <LoaderIcon className=\"size-4 animate-spin\" />,\n      }}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB;AAEzB,SAAgB,QAAQ,EAAE,WAAW,GAAG,SAAwC;CAC9E,OACE,oBAACA,WAAD;EACE,WAAU;EACV,QAAQ;EACR,cAAc;GACZ,UAAU;GACV,YAAY;IAOV,OAAO,GACL,8BAA8B,mBAAmB,oCACjD,SACF;IACA,SAAS;IACT,MAAM,GAAG,iCAAiC,gBAAgB;IAC1D,SAAS,GAAG,yBAAyB,gBAAgB;IACrD,OAAO,GAAG,wBAAwB,gBAAgB;IAClD,SAAS;IACT,aAAa;IACb,MAAM;GACR;EACF;EACA,OAAO;GACL,MAAM,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA;GAC1C,SAAS,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;GAC9C,OAAO,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACxC,SAAS,oBAAC,YAAD,EAAY,WAAU,sBAAuB,CAAA;EACxD;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"toaster.js","names":["Sonner"],"sources":["../../src/components/toaster.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { Toaster as Sonner } from \"sonner\"\nimport { controlTextClasses } from \"~/lib/classes\"\nimport { CircleCheckIcon, CircleHelpIcon, CircleXIcon, LoaderIcon } from \"~/lib/icons\"\nimport { cn } from \"~/lib/variants\"\n\n/** The halo that lifts a solid-colored toast off whatever it floats over. */\nconst toastRingClasses = \"ring ring-background/50\"\n\nexport function Toaster({ className, ...props }: ComponentProps<typeof Sonner>) {\n  return (\n    <Sonner\n      className=\"pointer-events-auto\"\n      offset={16}\n      mobileOffset={{ bottom: \"calc(16px + env(safe-area-inset-bottom))\", left: 16, right: 16 }}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          /*\n           * Sonner joins `toast` with exactly one type key per toast (`default` for untyped\n           * ones) as a plain string, so tailwind-merge never sees the pair. Anything that\n           * differs per type — background, text, halo — therefore lives on the type keys\n           * only, and never gets cancelled here.\n           */\n          toast: cn(\n            `flex items-start gap-2 p-4 ${controlTextClasses} font-medium rounded-lg shadow-sm`,\n            className,\n          ),\n          default: \"bg-background border border-border text-foreground\",\n          info: cn(\"bg-foreground text-background\", toastRingClasses),\n          success: cn(\"bg-success text-white\", toastRingClasses),\n          error: cn(\"bg-danger text-white\", toastRingClasses),\n          content: \"w-full\",\n          description: \"font-normal opacity-80\",\n          icon: \"mt-0.5\",\n        },\n      }}\n      icons={{\n        info: <CircleHelpIcon className=\"size-4\" />,\n        success: <CircleCheckIcon className=\"size-4\" />,\n        error: <CircleXIcon className=\"size-4\" />,\n        loading: <LoaderIcon className=\"size-4 animate-spin\" />,\n      }}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB;AAEzB,SAAgB,QAAQ,EAAE,WAAW,GAAG,SAAwC;CAC9E,OACE,oBAACA,WAAD;EACE,WAAU;EACV,QAAQ;EACR,cAAc;GAAE,QAAQ;GAA4C,MAAM;GAAI,OAAO;EAAG;EACxF,cAAc;GACZ,UAAU;GACV,YAAY;IAOV,OAAO,GACL,8BAA8B,mBAAmB,oCACjD,SACF;IACA,SAAS;IACT,MAAM,GAAG,iCAAiC,gBAAgB;IAC1D,SAAS,GAAG,yBAAyB,gBAAgB;IACrD,OAAO,GAAG,wBAAwB,gBAAgB;IAClD,SAAS;IACT,aAAa;IACb,MAAM;GACR;EACF;EACA,OAAO;GACL,MAAM,oBAAC,gBAAD,EAAgB,WAAU,SAAU,CAAA;GAC1C,SAAS,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;GAC9C,OAAO,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACxC,SAAS,oBAAC,YAAD,EAAY,WAAU,sBAAuB,CAAA;EACxD;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/view-tabs.d.ts

@@ -0,0 +1,26 @@
+import { Tabs, TabsList } from "./tabs.js";
+import { ComponentProps } from "react";
+//#region src/components/view-tabs.d.ts
+export type ViewTabsProps<T extends string> = Omit<ComponentProps<typeof Tabs>, "value" | "defaultValue" | "onValueChange" | "onChange"> & {
+  value: T;
+  /**
+   * The view that maps to no `?view=` param, so the URL stays clean on the default tab.
+   */
+  defaultValue: T;
+  options: {
+    value: T;
+    label: string;
+  }[];
+  onChange: (view: T | undefined) => void;
+  /**
+   * Forwarded to `TabsList`: `segmented` (default) for a header, `plain` inside a card.
+   */
+  variant?: ComponentProps<typeof TabsList>["variant"];
+};
+/**
+ * Tab switcher bound to a route's `view` search param. Emits `undefined` for the default view
+ * so the route can drop it from the URL instead of writing `?view=<default>`.
+ */
+export declare function ViewTabs<T extends string>({ value, defaultValue, options, onChange, variant, className, ...props }: ViewTabsProps<T>): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=view-tabs.d.ts.map

package/dist/components/view-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-tabs.d.ts","names":[],"sources":["../../src/components/view-tabs.tsx"],"mappings":";;;YAKY,cAAc,oBAAoB,KAC5C,sBAAsB;EAGtB,OAAO;;;;EAIP,cAAc;EACd;IAAW,OAAO;IAAG;;EACrB,WAAW,MAAM;;;;EAIjB,UAAU,sBAAsB;;;;;;wBAOlB,SAAS,oBACvB,OACA,cACA,SACA,UACA,SACA,cACG,SACF,cAAc,qBAAE,IAAA"}

package/dist/components/view-tabs.js

@@ -0,0 +1,27 @@
+"use client";
+import { Tabs, TabsList, TabsTrigger } from "./tabs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/view-tabs.tsx
+/**
+* Tab switcher bound to a route's `view` search param. Emits `undefined` for the default view
+* so the route can drop it from the URL instead of writing `?view=<default>`.
+*/
+function ViewTabs({ value, defaultValue, options, onChange, variant, className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs, {
+		value,
+		onValueChange: (next) => onChange(next === defaultValue ? void 0 : next),
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(TabsList, {
+			variant,
+			children: options.map((option) => /* @__PURE__ */ jsx(TabsTrigger, {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		})
+	});
+}
+//#endregion
+export { ViewTabs };
+
+//# sourceMappingURL=view-tabs.js.map

package/dist/components/view-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-tabs.js","names":[],"sources":["../../src/components/view-tabs.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport { Tabs, TabsList, TabsTrigger } from \"~/components/tabs\"\n\nexport type ViewTabsProps<T extends string> = Omit<\n  ComponentProps<typeof Tabs>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onChange\"\n> & {\n  value: T\n  /**\n   * The view that maps to no `?view=` param, so the URL stays clean on the default tab.\n   */\n  defaultValue: T\n  options: { value: T; label: string }[]\n  onChange: (view: T | undefined) => void\n  /**\n   * Forwarded to `TabsList`: `segmented` (default) for a header, `plain` inside a card.\n   */\n  variant?: ComponentProps<typeof TabsList>[\"variant\"]\n}\n\n/**\n * Tab switcher bound to a route's `view` search param. Emits `undefined` for the default view\n * so the route can drop it from the URL instead of writing `?view=<default>`.\n */\nexport function ViewTabs<T extends string>({\n  value,\n  defaultValue,\n  options,\n  onChange,\n  variant,\n  className,\n  ...props\n}: ViewTabsProps<T>) {\n  return (\n    <Tabs\n      value={value}\n      onValueChange={(next: T) => onChange(next === defaultValue ? undefined : next)}\n      className={className}\n      {...props}\n    >\n      <TabsList variant={variant}>\n        {options.map(option => (\n          <TabsTrigger key={option.value} value={option.value}>\n            {option.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n    </Tabs>\n  )\n}\n"],"mappings":";;;;;;;;AA0BA,SAAgB,SAA2B,EACzC,OACA,cACA,SACA,UACA,SACA,WACA,GAAG,SACgB;CACnB,OACE,oBAAC,MAAD;EACS;EACP,gBAAgB,SAAY,SAAS,SAAS,eAAe,KAAA,IAAY,IAAI;EAClE;EACX,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAmB;GAChB,UAAA,QAAQ,KAAI,WACX,oBAAC,aAAD;IAAgC,OAAO,OAAO;IAC3C,UAAA,OAAO;GACG,GAFK,OAAO,KAEZ,CACd;EACO,CAAA;CACN,CAAA;AAEV"}

package/dist/lib/icons.d.ts

@@ -3,6 +3,7 @@ import { HugeiconsProps } from "@hugeicons/react";
 //#region src/lib/icons.d.ts
 export type IconProps = Omit<HugeiconsProps, "icon" | "altIcon" | "showAlt">;
 export type IconComponent = ComponentType<IconProps>;
+export declare const ArrowUpRightIcon: IconComponent;
 export declare const CheckIcon: IconComponent;
 export declare const ChevronDownIcon: IconComponent;
 export declare const ChevronLeftIcon: IconComponent;

package/dist/lib/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","names":[],"sources":["../../src/lib/icons.tsx"],"mappings":";;;YAmBY,YAAY,KAAK;YACjB,gBAAgB,cAAc;qBAqB7B,WAAS;qBACT,iBAAe;qBACf,iBAAe;qBACf,kBAAgB;qBAChB,eAAa;qBACb,oBAAkB;qBAClB,iBAAe;qBACf,gBAAc;qBACd,YAAU;qBACV,aAAW;qBACX,UAAQ;qBACR,YAAU;qBACV,YAAU;qBACV,OAAK"}
+{"version":3,"file":"icons.d.ts","names":[],"sources":["../../src/lib/icons.tsx"],"mappings":";;;YAoBY,YAAY,KAAK;YACjB,gBAAgB,cAAc;qBAqB7B,kBAAgB;qBAChB,WAAS;qBACT,iBAAe;qBACf,iBAAe;qBACf,kBAAgB;qBAChB,eAAa;qBACb,oBAAkB;qBAClB,iBAAe;qBACf,gBAAc;qBACd,YAAU;qBACV,aAAW;qBACX,UAAQ;qBACR,YAAU;qBACV,YAAU;qBACV,OAAK"}

package/dist/lib/icons.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { ArrowDown01Icon, ArrowLeft01Icon, ArrowRight01Icon, ArrowUp01Icon, Cancel01Icon, CancelCircleIcon, CheckmarkCircle02Icon, CircleIcon as CircleIcon$1, Copy01Icon, HelpCircleIcon, Loading03Icon, Search01Icon, Tick02Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+import { ArrowDown01Icon, ArrowLeft01Icon, ArrowRight01Icon, ArrowUp01Icon, ArrowUpRight01Icon, Cancel01Icon, CancelCircleIcon, CheckmarkCircle02Icon, CircleIcon as CircleIcon$1, Copy01Icon, HelpCircleIcon, Loading03Icon, Search01Icon, Tick02Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 //#region src/lib/icons.tsx
 /**
@@ -23,6 +23,7 @@ function icon(def, name) {
 	Icon.displayName = name;
 	return Icon;
 }
+const ArrowUpRightIcon = icon(ArrowUpRight01Icon, "ArrowUpRightIcon");
 const CheckIcon = icon(Tick02Icon, "CheckIcon");
 const ChevronDownIcon = icon(ArrowDown01Icon, "ChevronDownIcon");
 const ChevronLeftIcon = icon(ArrowLeft01Icon, "ChevronLeftIcon");
@@ -38,6 +39,6 @@ const LoaderIcon = icon(Loading03Icon, "LoaderIcon");
 const SearchIcon = icon(Search01Icon, "SearchIcon");
 const XIcon = icon(Cancel01Icon, "XIcon");
 //#endregion
-export { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleCheckIcon, CircleHelpIcon, CircleIcon, CircleXIcon, CopyIcon, LoaderIcon, SearchIcon, XIcon };
+export { ArrowUpRightIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleCheckIcon, CircleHelpIcon, CircleIcon, CircleXIcon, CopyIcon, LoaderIcon, SearchIcon, XIcon };
 
 //# sourceMappingURL=icons.js.map