@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/page-header.js

@@ -0,0 +1,233 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/page-header.tsx
+function PageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header",
+		className: cn("@container/page-header flex w-full flex-wrap items-center justify-between gap-4 border-b border-border px-4 py-4 @max-md/page-header:gap-3 @max-md/page-header:py-3 @max-sm/page-header:flex-nowrap @max-sm/page-header:gap-2 @max-sm/page-header:px-3", className),
+		...props
+	});
+}
+function PageHeaderContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header-content",
+		className: cn("flex min-w-0 flex-1 flex-col gap-1", className),
+		...props
+	});
+}
+function PageHeaderTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h1", {
+		"data-slot": "page-header-title",
+		className: cn("flex min-w-0 items-center gap-2 text-xl leading-tight font-medium text-foreground @max-sm/page-header:flex-nowrap @max-sm/page-header:truncate", className),
+		...props
+	});
+}
+function PageHeaderDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "page-header-description",
+		className: cn("line-clamp-1 text-sm leading-snug text-muted-foreground", className),
+		...props
+	});
+}
+function PageHeaderActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-header-actions",
+		className: cn("flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Top of a detail view, list page, or full-page flow — the one heading
+*   the whole page is known by
+* - Compose a Breadcrumb above PageHeaderTitle for pages nested more than
+*   one level deep, or a status Badge inline inside PageHeaderTitle
+*
+* NOT WHEN
+* - A row inside a list — use Item
+* - A card's own heading — use CardHeader/CardTitle
+* - A section label inside a page — use a plain heading or Item
+*
+* KEY RULES
+* - PageHeaderTitle is always text-xl/font-medium — the one page-identity
+*   heading size; don't resize or reweight it per page. Size alone (not
+*   weight) is what separates it from CardTitle/DialogTitle/SheetTitle,
+*   which are all text-base/font-medium — stacking heavier weight on top
+*   of the larger size would double up the emphasis
+* - PageHeaderActions is optional — omit it for a title-only header
+* - Only one PageHeader per page
+* - No background of its own — don't add bg-* here; let the page canvas or
+*   card it sits on show through
+* - Padding is px-4 py-4 — the same standard surface padding as
+*   Card/Dialog/AlertDialog/Sheet/Drawer's `p-4`, not a wider page-edge
+*   gutter. Was px-6 previously; that was an outlier matching no other
+*   surface in the system
+* - PageHeaderContent is flex-1 so it fills the row instead of shrinking to
+*   the title's own width — needed for anything wider than the title placed
+*   below it (e.g. a composed description row) to have room instead of
+*   wrapping inside a title-sized column
+* - Responsive collapsing is automatic and gradual, via `@container/page-header`
+*   on the root — no prop, no `isNarrow` boolean to thread through. It tracks
+*   the header's own rendered width live, so it degrades (and recovers) in
+*   step with wherever it's actually placed — a resizable split pane, a
+*   collapsing sidebar, a sidecar panel vs. a full page — not just a small
+*   viewport. Below `md` (28rem) gap/padding tighten but Actions can still
+*   wrap to a second line; below `sm` (24rem) the row stays on one line and
+*   the title truncates instead. A title composed with an inline Badge (see
+*   Level 1's "Default" story) will clip the badge abruptly rather than
+*   ellipsis it in that collapsed state — a real trade-off of forcing one
+*   line, not a bug; avoid that composition if the header will commonly
+*   render in a narrow container.
+* - Headers come in two buckets: Level 0 (top-level: resource lists/tables —
+*   no breadcrumb or back button, nowhere higher to go) and Level 1+
+*   (nested/detail pages — always has a Breadcrumb or back button on the
+*   left). Both are composition, not a "level" prop.
+* - Level 1's right side is meta text + collaborator avatars + action
+*   buttons — not just a bare Edit button like Level 0. Don't wrap those
+*   buttons in a ButtonGroup: an overflow trigger, a deferral action, and a
+*   primary CTA are unrelated actions, exactly what ButtonGroup's own docs
+*   say not to use it for — and mixing an outline button's visible border
+*   against a borderless primary button inside one leaves a stray
+*   half-border at the seam. A back button is just an icon-only Button
+*   placed before PageHeaderContent.
+* - Those three sections (meta, avatars, actions) are spaced apart by
+*   PageHeaderActions' own `gap-2` alone — no `•` divider between them; text
+*   vs. avatars vs. buttons already read as separate groups by shape, so a
+*   glyph between them would be redundant. The action buttons themselves
+*   sit inside one `gap-1` wrapper div, tighter than the `gap-2` between
+*   sections, since they're one related cluster — that div is just a plain
+*   flex container, not a ButtonGroup (still ruled out for the reason
+*   above). Level 0's actions are nothing but buttons, so that same
+*   `gap-1` goes directly on PageHeaderActions itself
+*   (`className="gap-1"`) instead of needing an inner wrapper — there's
+*   nothing else in there for it to be scoped apart from.
+* - Level 1 supports the same two tab treatments as Level 0: a centered nav
+*   slot in the header row ("With Centered Navigation"), or a below-header
+*   `line`-variant Tabs row with the border-b moved to an outer wrapper
+*   ("With Tabs") — see Level 1's own stories for both, composed with
+*   Breadcrumb/back-button and PageHeaderActions exactly as any other
+*   Level 1 header.
+* - Collaborator AvatarGroup in that same right side uses the default Avatar
+*   size, not "sm" — default is size-8 (32px), matching Button's own default
+*   height and iconOnly, so avatars and buttons line up in the row.
+*   "sm" (24px) sits visibly shorter than every button beside it.
+* - "With Tabs" is NOT Tabs as a sibling below PageHeader — that puts
+*   PageHeader's own border-b between the title and the tabs. The
+*   divider belongs at the bottom of the whole block (title row + tabs
+*   together read as one header, and the border-b sits flush against the
+*   tabs' own bottom edge — no pb on Tabs). Strip PageHeader's own border
+*   with border-b-0 and move border-b onto an outer wrapper around both
+*   rows instead
+* - The gap between the title and the tabs is PageHeader's own bottom
+*   padding, overridden down to pb-2 — not an addition on top of it. Adding
+*   Tabs its own pt-* stacks two independent paddings and reads as a visible
+*   gap between two blocks, not "one header"
+*
+* USAGE
+*
+* // Level 0 — top-level entry point, plain actions
+* <PageHeader>
+*   <PageHeaderContent>
+*     <PageHeaderTitle>Care Gaps</PageHeaderTitle>
+*     <PageHeaderDescription>142 open gaps across your panel</PageHeaderDescription>
+*   </PageHeaderContent>
+*   <PageHeaderActions className="gap-1">
+*     <Button variant="outline">Export</Button>
+*     <Button>Add Gap</Button>
+*   </PageHeaderActions>
+* </PageHeader>
+*
+* // Level 0, "With Tabs" — pb-2 replaces PageHeader's own pb-4 rather than
+* // stacking Tabs' own top padding on top of it; two independent paddings
+* // between the title and the tabs read as a gap, not "one header"
+* <div className="border-b border-border">
+*   <PageHeader className="border-b-0 pb-2">
+*     <PageHeaderContent>
+*       <PageHeaderTitle>Care Gaps</PageHeaderTitle>
+*     </PageHeaderContent>
+*   </PageHeader>
+*   <Tabs defaultValue="open">
+*     <TabsList variant="line" className="px-4">
+*       <TabsTrigger value="open">Open</TabsTrigger>
+*       <TabsTrigger value="closed">Closed</TabsTrigger>
+*     </TabsList>
+*   </Tabs>
+* </div>
+*
+* // Level 0, "With Navigation" — a centered nav slot. justify-between alone
+* // won't truly center a middle child against asymmetric siblings, so
+* // override to a grid
+* <PageHeader className="grid grid-cols-[1fr_auto_1fr] justify-normal">
+*   <PageHeaderContent>
+*     <PageHeaderTitle>Dashboard</PageHeaderTitle>
+*   </PageHeaderContent>
+*   <ToggleGroup type="single" defaultValue="visits" spacing={0}>
+*     <ToggleGroupItem value="visits">Virtual Visits</ToggleGroupItem>
+*     <ToggleGroupItem value="assessments">Assessments</ToggleGroupItem>
+*   </ToggleGroup>
+*   <PageHeaderActions className="justify-self-end gap-1">
+*     <Button variant="outline">Export</Button>
+*   </PageHeaderActions>
+* </PageHeader>
+*
+* // Level 1 — Breadcrumb, and the meta+avatars+actions right side
+* <PageHeader>
+*   <PageHeaderContent>
+*     <Breadcrumb>...</Breadcrumb>
+*     <PageHeaderTitle>James Wilson</PageHeaderTitle>
+*   </PageHeaderContent>
+*   <PageHeaderActions>
+*     <MetaList size="sm">
+*       <MetaListItem>Few minutes ago</MetaListItem>
+*     </MetaList>
+*     <AvatarGroup>
+*       <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
+*       <Avatar><AvatarFallback>SP</AvatarFallback></Avatar>
+*       <AvatarGroupCount>+2</AvatarGroupCount>
+*     </AvatarGroup>
+*     <div className="flex items-center gap-1">
+*       <Button variant="outline" iconOnly aria-label="More options">
+*         <EllipsisIcon />
+*       </Button>
+*       <Button variant="outline">Finish later</Button>
+*       <Button>Next</Button>
+*     </div>
+*   </PageHeaderActions>
+* </PageHeader>
+*
+* // Level 1 — back button instead of a Breadcrumb, for hierarchies under 3
+* // levels deep. Same meta+avatars+actions right side as above
+* <PageHeader>
+*   <PageHeaderContent className="flex-row items-center gap-3">
+*     <Button variant="ghost" iconOnly aria-label="Back">
+*       <ArrowLeftIcon />
+*     </Button>
+*     <PageHeaderTitle>James Wilson</PageHeaderTitle>
+*   </PageHeaderContent>
+* </PageHeader>
+*
+* // Level 1 — a richer description row: an outlined Badge with a colored icon
+* // for status, plus a dot-separated MetaList for channels, instead of plain
+* // text. PageHeaderDescription is a <p>, so block-level children replace it
+* // here rather than nesting inside it
+* <PageHeader>
+*   <PageHeaderContent>
+*     <PageHeaderTitle>Covid-19</PageHeaderTitle>
+*     <div className="flex items-center gap-3">
+*       <Badge emphasis="outline">
+*         <CheckIcon className="text-success" data-icon="inline-start" />
+*         Ongoing
+*       </Badge>
+*       <MetaList size="sm">
+*         <MetaListItem>Text</MetaListItem>
+*         <MetaListItem>Email</MetaListItem>
+*       </MetaList>
+*     </div>
+*   </PageHeaderContent>
+* </PageHeader>
+*/
+//#endregion
+export { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/ui/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../../src/components/ui/page-header.tsx"],"sourcesContent":["/**\n * PageHeader — the single top-of-page banner a page is known by.\n *\n * A composite: PageHeaderContent\n * (title + description) on the left, PageHeaderActions on the right, with a\n * border-b beneath the whole row. Deliberately has no background color of\n * its own — it sits on whatever canvas/surface it's placed on, rather than\n * painting its own tint.\n *\n * Responsive via `@container/page-header`, not a prop or a single narrow/wide\n * switch: it tracks the header's own rendered width continuously, so it\n * degrades in steps as room shrinks and recovers live if the host regrows it\n * (a resizable split pane, a sidebar that collapses/expands, a sidecar panel\n * vs. a full page) — there's no `isNarrow` boolean to compute or thread\n * through, and no fixed viewport breakpoint that misses \"narrow because of\n * placement, not because of screen size\":\n *   - below `md` (28rem): gap/padding tighten (gap-3, py-3), but the row can\n *     still wrap Actions to a second line if it doesn't fit\n *   - below `sm` (24rem): the row stops wrapping altogether and stays on one\n *     line (gap-2, px-3 — the same compact density Card uses at `size=\"sm\"`),\n *     with the title truncating instead\n * This stays a plain layout container the whole way down — safe for the\n * scoped-CSS build (see Field's `orientation=\"responsive\"` for the same\n * `@container` idiom).\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction PageHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"page-header\"\n      className={cn(\n        \"@container/page-header flex w-full flex-wrap items-center justify-between gap-4 border-b border-border px-4 py-4 @max-md/page-header:gap-3 @max-md/page-header:py-3 @max-sm/page-header:flex-nowrap @max-sm/page-header:gap-2 @max-sm/page-header:px-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PageHeaderContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"page-header-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PageHeaderTitle({ className, ...props }: React.ComponentProps<\"h1\">) {\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      className={cn(\n        \"flex min-w-0 items-center gap-2 text-xl leading-tight font-medium text-foreground @max-sm/page-header:flex-nowrap @max-sm/page-header:truncate\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PageHeaderDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      className={cn(\n        \"line-clamp-1 text-sm leading-snug text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PageHeaderActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"page-header-actions\"\n      className={cn(\"flex shrink-0 items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PageHeader,\n  PageHeaderContent,\n  PageHeaderTitle,\n  PageHeaderDescription,\n  PageHeaderActions,\n}\n\n/**\n * WHEN TO USE\n * - Top of a detail view, list page, or full-page flow — the one heading\n *   the whole page is known by\n * - Compose a Breadcrumb above PageHeaderTitle for pages nested more than\n *   one level deep, or a status Badge inline inside PageHeaderTitle\n *\n * NOT WHEN\n * - A row inside a list — use Item\n * - A card's own heading — use CardHeader/CardTitle\n * - A section label inside a page — use a plain heading or Item\n *\n * KEY RULES\n * - PageHeaderTitle is always text-xl/font-medium — the one page-identity\n *   heading size; don't resize or reweight it per page. Size alone (not\n *   weight) is what separates it from CardTitle/DialogTitle/SheetTitle,\n *   which are all text-base/font-medium — stacking heavier weight on top\n *   of the larger size would double up the emphasis\n * - PageHeaderActions is optional — omit it for a title-only header\n * - Only one PageHeader per page\n * - No background of its own — don't add bg-* here; let the page canvas or\n *   card it sits on show through\n * - Padding is px-4 py-4 — the same standard surface padding as\n *   Card/Dialog/AlertDialog/Sheet/Drawer's `p-4`, not a wider page-edge\n *   gutter. Was px-6 previously; that was an outlier matching no other\n *   surface in the system\n * - PageHeaderContent is flex-1 so it fills the row instead of shrinking to\n *   the title's own width — needed for anything wider than the title placed\n *   below it (e.g. a composed description row) to have room instead of\n *   wrapping inside a title-sized column\n * - Responsive collapsing is automatic and gradual, via `@container/page-header`\n *   on the root — no prop, no `isNarrow` boolean to thread through. It tracks\n *   the header's own rendered width live, so it degrades (and recovers) in\n *   step with wherever it's actually placed — a resizable split pane, a\n *   collapsing sidebar, a sidecar panel vs. a full page — not just a small\n *   viewport. Below `md` (28rem) gap/padding tighten but Actions can still\n *   wrap to a second line; below `sm` (24rem) the row stays on one line and\n *   the title truncates instead. A title composed with an inline Badge (see\n *   Level 1's \"Default\" story) will clip the badge abruptly rather than\n *   ellipsis it in that collapsed state — a real trade-off of forcing one\n *   line, not a bug; avoid that composition if the header will commonly\n *   render in a narrow container.\n * - Headers come in two buckets: Level 0 (top-level: resource lists/tables —\n *   no breadcrumb or back button, nowhere higher to go) and Level 1+\n *   (nested/detail pages — always has a Breadcrumb or back button on the\n *   left). Both are composition, not a \"level\" prop.\n * - Level 1's right side is meta text + collaborator avatars + action\n *   buttons — not just a bare Edit button like Level 0. Don't wrap those\n *   buttons in a ButtonGroup: an overflow trigger, a deferral action, and a\n *   primary CTA are unrelated actions, exactly what ButtonGroup's own docs\n *   say not to use it for — and mixing an outline button's visible border\n *   against a borderless primary button inside one leaves a stray\n *   half-border at the seam. A back button is just an icon-only Button\n *   placed before PageHeaderContent.\n * - Those three sections (meta, avatars, actions) are spaced apart by\n *   PageHeaderActions' own `gap-2` alone — no `•` divider between them; text\n *   vs. avatars vs. buttons already read as separate groups by shape, so a\n *   glyph between them would be redundant. The action buttons themselves\n *   sit inside one `gap-1` wrapper div, tighter than the `gap-2` between\n *   sections, since they're one related cluster — that div is just a plain\n *   flex container, not a ButtonGroup (still ruled out for the reason\n *   above). Level 0's actions are nothing but buttons, so that same\n *   `gap-1` goes directly on PageHeaderActions itself\n *   (`className=\"gap-1\"`) instead of needing an inner wrapper — there's\n *   nothing else in there for it to be scoped apart from.\n * - Level 1 supports the same two tab treatments as Level 0: a centered nav\n *   slot in the header row (\"With Centered Navigation\"), or a below-header\n *   `line`-variant Tabs row with the border-b moved to an outer wrapper\n *   (\"With Tabs\") — see Level 1's own stories for both, composed with\n *   Breadcrumb/back-button and PageHeaderActions exactly as any other\n *   Level 1 header.\n * - Collaborator AvatarGroup in that same right side uses the default Avatar\n *   size, not \"sm\" — default is size-8 (32px), matching Button's own default\n *   height and iconOnly, so avatars and buttons line up in the row.\n *   \"sm\" (24px) sits visibly shorter than every button beside it.\n * - \"With Tabs\" is NOT Tabs as a sibling below PageHeader — that puts\n *   PageHeader's own border-b between the title and the tabs. The\n *   divider belongs at the bottom of the whole block (title row + tabs\n *   together read as one header, and the border-b sits flush against the\n *   tabs' own bottom edge — no pb on Tabs). Strip PageHeader's own border\n *   with border-b-0 and move border-b onto an outer wrapper around both\n *   rows instead\n * - The gap between the title and the tabs is PageHeader's own bottom\n *   padding, overridden down to pb-2 — not an addition on top of it. Adding\n *   Tabs its own pt-* stacks two independent paddings and reads as a visible\n *   gap between two blocks, not \"one header\"\n *\n * USAGE\n *\n * // Level 0 — top-level entry point, plain actions\n * <PageHeader>\n *   <PageHeaderContent>\n *     <PageHeaderTitle>Care Gaps</PageHeaderTitle>\n *     <PageHeaderDescription>142 open gaps across your panel</PageHeaderDescription>\n *   </PageHeaderContent>\n *   <PageHeaderActions className=\"gap-1\">\n *     <Button variant=\"outline\">Export</Button>\n *     <Button>Add Gap</Button>\n *   </PageHeaderActions>\n * </PageHeader>\n *\n * // Level 0, \"With Tabs\" — pb-2 replaces PageHeader's own pb-4 rather than\n * // stacking Tabs' own top padding on top of it; two independent paddings\n * // between the title and the tabs read as a gap, not \"one header\"\n * <div className=\"border-b border-border\">\n *   <PageHeader className=\"border-b-0 pb-2\">\n *     <PageHeaderContent>\n *       <PageHeaderTitle>Care Gaps</PageHeaderTitle>\n *     </PageHeaderContent>\n *   </PageHeader>\n *   <Tabs defaultValue=\"open\">\n *     <TabsList variant=\"line\" className=\"px-4\">\n *       <TabsTrigger value=\"open\">Open</TabsTrigger>\n *       <TabsTrigger value=\"closed\">Closed</TabsTrigger>\n *     </TabsList>\n *   </Tabs>\n * </div>\n *\n * // Level 0, \"With Navigation\" — a centered nav slot. justify-between alone\n * // won't truly center a middle child against asymmetric siblings, so\n * // override to a grid\n * <PageHeader className=\"grid grid-cols-[1fr_auto_1fr] justify-normal\">\n *   <PageHeaderContent>\n *     <PageHeaderTitle>Dashboard</PageHeaderTitle>\n *   </PageHeaderContent>\n *   <ToggleGroup type=\"single\" defaultValue=\"visits\" spacing={0}>\n *     <ToggleGroupItem value=\"visits\">Virtual Visits</ToggleGroupItem>\n *     <ToggleGroupItem value=\"assessments\">Assessments</ToggleGroupItem>\n *   </ToggleGroup>\n *   <PageHeaderActions className=\"justify-self-end gap-1\">\n *     <Button variant=\"outline\">Export</Button>\n *   </PageHeaderActions>\n * </PageHeader>\n *\n * // Level 1 — Breadcrumb, and the meta+avatars+actions right side\n * <PageHeader>\n *   <PageHeaderContent>\n *     <Breadcrumb>...</Breadcrumb>\n *     <PageHeaderTitle>James Wilson</PageHeaderTitle>\n *   </PageHeaderContent>\n *   <PageHeaderActions>\n *     <MetaList size=\"sm\">\n *       <MetaListItem>Few minutes ago</MetaListItem>\n *     </MetaList>\n *     <AvatarGroup>\n *       <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n *       <Avatar><AvatarFallback>SP</AvatarFallback></Avatar>\n *       <AvatarGroupCount>+2</AvatarGroupCount>\n *     </AvatarGroup>\n *     <div className=\"flex items-center gap-1\">\n *       <Button variant=\"outline\" iconOnly aria-label=\"More options\">\n *         <EllipsisIcon />\n *       </Button>\n *       <Button variant=\"outline\">Finish later</Button>\n *       <Button>Next</Button>\n *     </div>\n *   </PageHeaderActions>\n * </PageHeader>\n *\n * // Level 1 — back button instead of a Breadcrumb, for hierarchies under 3\n * // levels deep. Same meta+avatars+actions right side as above\n * <PageHeader>\n *   <PageHeaderContent className=\"flex-row items-center gap-3\">\n *     <Button variant=\"ghost\" iconOnly aria-label=\"Back\">\n *       <ArrowLeftIcon />\n *     </Button>\n *     <PageHeaderTitle>James Wilson</PageHeaderTitle>\n *   </PageHeaderContent>\n * </PageHeader>\n *\n * // Level 1 — a richer description row: an outlined Badge with a colored icon\n * // for status, plus a dot-separated MetaList for channels, instead of plain\n * // text. PageHeaderDescription is a <p>, so block-level children replace it\n * // here rather than nesting inside it\n * <PageHeader>\n *   <PageHeaderContent>\n *     <PageHeaderTitle>Covid-19</PageHeaderTitle>\n *     <div className=\"flex items-center gap-3\">\n *       <Badge emphasis=\"outline\">\n *         <CheckIcon className=\"text-success\" data-icon=\"inline-start\" />\n *         Ongoing\n *       </Badge>\n *       <MetaList size=\"sm\">\n *         <MetaListItem>Text</MetaListItem>\n *         <MetaListItem>Email</MetaListItem>\n *       </MetaList>\n *     </div>\n *   </PageHeaderContent>\n * </PageHeader>\n */\n"],"mappings":";;;;AA8BA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0PACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAqC;CAC5E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,kJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SACyB;CAC5B,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,2DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Pagination — page-number navigation.
+ *
+ * Plain markup that composes Button under the hood for each link, so
+ * link styling (ghost / outline for the active page) comes from Button, not
+ * a separate pagination style.
+ */
+import * as React from "react";
+import { Button } from "../../components/ui/button";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+    /** Boundary state (e.g. Previous on page 1, Next on the last page) — `disabled` on an `<a>` is otherwise a no-op (HTML `disabled` only applies to form controls, so Button's own `disabled:` styling never fires here). Sets `aria-disabled`, drops `href` so it's no longer a real link, and removes it from the tab order. */
+    disabled?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+/**
+ * Renders an `<a>` when `href` is given — real per-page URLs, the
+ * component's original and still-primary shape. Omit `href` entirely (not
+ * just falsy) for in-memory pagination with no URL of its own (e.g.
+ * DataTable's own client-side page state) and this renders a real
+ * `<button type="button">` instead: an `<a>` with no `href` isn't a link at
+ * all, semantically or for keyboard reach — it doesn't get a default
+ * action, and support for still focusing it varies by browser — so this
+ * isn't a style choice, it's what makes the *href-less* case actually
+ * behave like the control it looks like.
+ */
+declare function PaginationLink({ className, isActive, disabled, size, href, onClick, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
+/**
+ * WHEN TO USE
+ * - Paging through a table or list that spans more than one page, where
+ *   each page has its own URL/href
+ *
+ * NOT WHEN
+ * - Infinite or virtual scrolling
+ * - Data that always fits on one page
+ *
+ * KEY RULES
+ * - Mark the current page with `isActive` on PaginationLink — renders
+ *   variant="outline" instead of "ghost" and sets aria-current="page"
+ * - PaginationEllipsis stands in for skipped page ranges, not a real control
+ * - PaginationPrevious/Next hide their text label below the sm breakpoint,
+ *   showing only the icon
+ * - Pass `disabled` on PaginationPrevious/Next at a boundary (page 1 has no previous, the last
+ *   page has no next) — a plain `disabled` attribute is a no-op on an `<a>`, so this prop instead
+ *   sets `aria-disabled`, drops `href`, and removes it from the tab order
+ *
+ * USAGE
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ */
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAO/C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAUvE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ5B;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gUAAgU;IAChU,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE3B;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAiDrB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYjE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYjE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAe9B;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG"}

package/dist/components/ui/pagination.js

@@ -0,0 +1,145 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import "react";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		"data-slot": "pagination",
+		className: cn("mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn("flex items-center gap-0.5", className),
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+/**
+* Renders an `<a>` when `href` is given — real per-page URLs, the
+* component's original and still-primary shape. Omit `href` entirely (not
+* just falsy) for in-memory pagination with no URL of its own (e.g.
+* DataTable's own client-side page state) and this renders a real
+* `<button type="button">` instead: an `<a>` with no `href` isn't a link at
+* all, semantically or for keyboard reach — it doesn't get a default
+* action, and support for still focusing it varies by browser — so this
+* isn't a style choice, it's what makes the *href-less* case actually
+* behave like the control it looks like.
+*/
+function PaginationLink({ className, isActive, disabled, size = "icon", href, onClick, ...props }) {
+	if (href === void 0) {
+		const { id, style, children, "aria-label": ariaLabel } = props;
+		return /* @__PURE__ */ jsx(Button, {
+			id,
+			style,
+			children,
+			"aria-label": ariaLabel,
+			type: "button",
+			variant: isActive ? "outline" : "ghost",
+			size,
+			disabled,
+			"aria-current": isActive ? "page" : void 0,
+			"data-slot": "pagination-link",
+			"data-active": isActive,
+			onClick,
+			className
+		});
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		variant: isActive ? "outline" : "ghost",
+		size,
+		className: cn(disabled && "pointer-events-none opacity-50", className),
+		children: /* @__PURE__ */ jsx("a", {
+			"aria-current": isActive ? "page" : void 0,
+			"aria-disabled": disabled || void 0,
+			"data-slot": "pagination-link",
+			"data-active": isActive,
+			href: disabled ? void 0 : href,
+			tabIndex: disabled ? -1 : void 0,
+			onClick: disabled ? void 0 : onClick,
+			...props
+		})
+	});
+}
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		size: "default",
+		className: cn("pl-1.5!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})]
+	});
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		size: "default",
+		className: cn("pr-1.5!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+/**
+* WHEN TO USE
+* - Paging through a table or list that spans more than one page, where
+*   each page has its own URL/href
+*
+* NOT WHEN
+* - Infinite or virtual scrolling
+* - Data that always fits on one page
+*
+* KEY RULES
+* - Mark the current page with `isActive` on PaginationLink — renders
+*   variant="outline" instead of "ghost" and sets aria-current="page"
+* - PaginationEllipsis stands in for skipped page ranges, not a real control
+* - PaginationPrevious/Next hide their text label below the sm breakpoint,
+*   showing only the icon
+* - Pass `disabled` on PaginationPrevious/Next at a boundary (page 1 has no previous, the last
+*   page has no next) — a plain `disabled` attribute is a no-op on an `<a>`, so this prop instead
+*   sets `aria-disabled`, drops `href`, and removes it from the tab order
+*
+* USAGE
+* <Pagination>
+*   <PaginationContent>
+*     <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
+*     <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
+*     <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
+*     <PaginationItem><PaginationEllipsis /></PaginationItem>
+*     <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
+*   </PaginationContent>
+* </Pagination>
+*/
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/ui/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["/**\n * Pagination — page-number navigation.\n *\n * Plain markup that composes Button under the hood for each link, so\n * link styling (ghost / outline for the active page) comes from Button, not\n * a separate pagination style.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex items-center gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n  /** Boundary state (e.g. Previous on page 1, Next on the last page) — `disabled` on an `<a>` is otherwise a no-op (HTML `disabled` only applies to form controls, so Button's own `disabled:` styling never fires here). Sets `aria-disabled`, drops `href` so it's no longer a real link, and removes it from the tab order. */\n  disabled?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\n/**\n * Renders an `<a>` when `href` is given — real per-page URLs, the\n * component's original and still-primary shape. Omit `href` entirely (not\n * just falsy) for in-memory pagination with no URL of its own (e.g.\n * DataTable's own client-side page state) and this renders a real\n * `<button type=\"button\">` instead: an `<a>` with no `href` isn't a link at\n * all, semantically or for keyboard reach — it doesn't get a default\n * action, and support for still focusing it varies by browser — so this\n * isn't a style choice, it's what makes the *href-less* case actually\n * behave like the control it looks like.\n */\nfunction PaginationLink({\n  className,\n  isActive,\n  disabled,\n  size = \"icon\",\n  href,\n  onClick,\n  ...props\n}: PaginationLinkProps) {\n  if (href === undefined) {\n    // Only the handful of plain attributes this component's own callers\n    // (PaginationPrevious/Next, or a direct PaginationLink) actually pass\n    // — an allowlist rather than dropping anchor-only ones (`target`/\n    // `rel`/`download`/a `ref` typed for the wrong element/`<a>`'s own\n    // `type`, a MIME-type hint, not a `<button>`'s) out of `...props`,\n    // since Button's own props are a discriminated union keyed off\n    // `iconOnly`/`size` (see button.tsx) that a wider, untyped bag would\n    // fail to satisfy. `any` on the element below is that union giving up\n    // gracefully on a dynamic value, not a loosened contract on\n    // `PaginationLink`'s own typed props above.\n    const { id, style, children, \"aria-label\": ariaLabel } = props\n    const buttonElementProps: Record<string, unknown> = {\n      id,\n      style,\n      children,\n      \"aria-label\": ariaLabel,\n      type: \"button\",\n      variant: isActive ? \"outline\" : \"ghost\",\n      size,\n      disabled,\n      \"aria-current\": isActive ? \"page\" : undefined,\n      \"data-slot\": \"pagination-link\",\n      \"data-active\": isActive,\n      onClick,\n      className,\n    }\n    return <Button {...(buttonElementProps as any)} />\n  }\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(disabled && \"pointer-events-none opacity-50\", className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        aria-disabled={disabled || undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        href={disabled ? undefined : href}\n        tabIndex={disabled ? -1 : undefined}\n        onClick={disabled ? undefined : onClick}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  text = \"Previous\",\n  ...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon data-icon=\"inline-start\" />\n      <span className=\"hidden sm:block\">{text}</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  text = \"Next\",\n  ...props\n}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">{text}</span>\n      <ChevronRightIcon data-icon=\"inline-end\" />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MoreHorizontalIcon />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n\n/**\n * WHEN TO USE\n * - Paging through a table or list that spans more than one page, where\n *   each page has its own URL/href\n *\n * NOT WHEN\n * - Infinite or virtual scrolling\n * - Data that always fits on one page\n *\n * KEY RULES\n * - Mark the current page with `isActive` on PaginationLink — renders\n *   variant=\"outline\" instead of \"ghost\" and sets aria-current=\"page\"\n * - PaginationEllipsis stands in for skipped page ranges, not a real control\n * - PaginationPrevious/Next hide their text label below the sm breakpoint,\n *   showing only the icon\n * - Pass `disabled` on PaginationPrevious/Next at a boundary (page 1 has no previous, the last\n *   page has no next) — a plain `disabled` attribute is a no-op on an `<a>`, so this prop instead\n *   sets `aria-disabled`, drops `href`, and removes it from the tab order\n *\n * USAGE\n * <Pagination>\n *   <PaginationContent>\n *     <PaginationItem><PaginationPrevious href=\"?page=1\" /></PaginationItem>\n *     <PaginationItem><PaginationLink href=\"?page=1\">1</PaginationLink></PaginationItem>\n *     <PaginationItem><PaginationLink href=\"?page=2\" isActive>2</PaginationLink></PaginationItem>\n *     <PaginationItem><PaginationEllipsis /></PaginationItem>\n *     <PaginationItem><PaginationNext href=\"?page=3\" /></PaginationItem>\n *   </PaginationContent>\n * </Pagination>\n */\n"],"mappings":";;;;;;AAkBA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC0B;CAC7B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;;;;;;;;;;;AAoBA,SAAS,eAAe,EACtB,WACA,UACA,UACA,OAAO,QACP,MACA,SACA,GAAG,SACmB;CACtB,IAAI,SAAS,KAAA,GAAW;EAWtB,MAAM,EAAE,IAAI,OAAO,UAAU,cAAc,cAAc;EAgBzD,OAAO,oBAAC,QAAD;GAdL;GACA;GACA;GACA,cAAc;GACd,MAAM;GACN,SAAS,WAAW,YAAY;GAChC;GACA;GACA,gBAAgB,WAAW,SAAS,KAAA;GACpC,aAAa;GACb,eAAe;GACf;GACA;EAE+C,CAAA;CACnD;CACA,OACE,oBAAC,QAAD;EACE,SAAA;EACA,SAAS,WAAW,YAAY;EAC1B;EACN,WAAW,GAAG,YAAY,kCAAkC,SAAS;EAErE,UAAA,oBAAC,KAAD;GACE,gBAAc,WAAW,SAAS,KAAA;GAClC,iBAAe,YAAY,KAAA;GAC3B,aAAU;GACV,eAAa;GACb,MAAM,WAAW,KAAA,IAAY;GAC7B,UAAU,WAAW,KAAK,KAAA;GAC1B,SAAS,WAAW,KAAA,IAAY;GAChC,GAAI;EACL,CAAA;CACK,CAAA;AAEZ;AAEA,SAAS,mBAAmB,EAC1B,WACA,OAAO,YACP,GAAG,SAC+D;CAClE,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;EAJN,UAAA,CAME,oBAAC,iBAAD,EAAiB,aAAU,eAAgB,CAAA,GAC3C,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAW,CAAA,CAChC;;AAEpB;AAEA,SAAS,eAAe,EACtB,WACA,OAAO,QACP,GAAG,SAC+D;CAClE,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAW,CAAA,GAC9C,oBAAC,kBAAD,EAAkB,aAAU,aAAc,CAAA,CAC5B;;AAEpB;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC4B;CAC/B,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GACT,gFACA,SACF;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Popover — floating panel anchored to a trigger, opened by click.
+ *
+ * Built on the Radix Popover primitive. Adds PopoverHeader/PopoverTitle/
+ * PopoverDescription slots, matching the Header/Title/Description pattern
+ * used across this overlay family (Sheet, AlertDialog, Drawer).
+ */
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, id, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
+declare function PopoverDescription({ className, id, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
+/**
+ * WHEN TO USE
+ * - Controls or detail anchored to an element that the user opts into by
+ *   clicking — date pickers, filter forms, quick-edit panels
+ * - Content that's interactive (inputs, buttons) but doesn't need full
+ *   modal focus-trapping
+ *
+ * NOT WHEN
+ * - A plain, non-interactive hover label — use Tooltip
+ * - A richer hover-triggered preview with no click required — use HoverCard
+ * - The interaction must interrupt the page and trap focus — use Dialog
+ *
+ * KEY RULES
+ * - Opens on click via PopoverTrigger, not hover — this is the trigger
+ *   mechanism that separates it from Tooltip/HoverCard
+ * - `align` defaults to "center", `sideOffset` defaults to 4
+ * - PopoverContent is 18rem (w-72) wide by default; override via className
+ * - PopoverAnchor lets you anchor the content to a different element than
+ *   the trigger (e.g. anchor to an input while triggering from a button)
+ * - PopoverContent's `role="dialog"` picks up `aria-labelledby`/`aria-describedby` automatically
+ *   from PopoverTitle/PopoverDescription rendered anywhere inside the same Popover — pass an
+ *   explicit `aria-label`/`aria-labelledby` yourself only to override that default
+ *
+ * USAGE
+ * <Popover>
+ *   <PopoverTrigger asChild><Button variant="outline">Open popover</Button></PopoverTrigger>
+ *   <PopoverContent className="w-72">
+ *     <PopoverHeader>
+ *       <PopoverTitle>Dimensions</PopoverTitle>
+ *       <PopoverDescription>Set the layout dimensions.</PopoverDescription>
+ *     </PopoverHeader>
+ *     <div className="grid gap-3">
+ *       <div className="grid gap-2">
+ *         <Label htmlFor="width">Width</Label>
+ *         <Input id="width" defaultValue="100%" />
+ *       </div>
+ *     </div>
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * // Placement
+ * <PopoverContent side="right">Anchored right.</PopoverContent>
+ */
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/ui/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAiBtD,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAepD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAuBvD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,qBAEtD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAmB5B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAmB3B;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,cAAc,GACf,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG"}