sheerly 0.0.2 → 0.0.3

package/lib/breadcrumb.d.ts

@@ -1,8 +1,11 @@
-import { AnchorHTMLAttributes, ElementType, HTMLAttributes, OlHTMLAttributes } from 'react';
+import { ElementType } from 'react';
 import { PolymorphicProps } from './utils/polymorphic';
+export type BreadcrumbProps<T extends ElementType = 'nav'> = PolymorphicProps<T>;
 /**
  * A path hierarchy of links.
  *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
+ *
  * @example
  * <Breadcrumb>
  *   <BreadcrumbList>
@@ -12,12 +15,35 @@ import { PolymorphicProps } from './utils/polymorphic';
  *   </BreadcrumbList>
  * </Breadcrumb>
  */
-export declare function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-export declare function BreadcrumbList({ className, ...props }: OlHTMLAttributes<HTMLOListElement>): import("react").JSX.Element;
-export declare function BreadcrumbItem({ className, ...props }: HTMLAttributes<HTMLLIElement>): import("react").JSX.Element;
-export declare function BreadcrumbLink({ className, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+export declare function Breadcrumb<T extends ElementType = 'nav'>({ as, className, ...props }: BreadcrumbProps<T>): import("react").JSX.Element;
+export type BreadcrumbListProps<T extends ElementType = 'ol'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `ol`).
+ */
+export declare function BreadcrumbList<T extends ElementType = 'ol'>({ as, className, ...props }: BreadcrumbListProps<T>): import("react").JSX.Element;
+export type BreadcrumbItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export declare function BreadcrumbItem<T extends ElementType = 'li'>({ as, className, ...props }: BreadcrumbItemProps<T>): import("react").JSX.Element;
+export type BreadcrumbLinkProps<T extends ElementType = 'a'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export declare function BreadcrumbLink<T extends ElementType = 'a'>({ as, className, ...props }: BreadcrumbLinkProps<T>): import("react").JSX.Element;
 export type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
 export declare function BreadcrumbPage<T extends ElementType = 'span'>({ as, className, ...props }: BreadcrumbPageProps<T>): import("react").JSX.Element;
-export declare function BreadcrumbSeparator({ className, children, ...props }: HTMLAttributes<HTMLLIElement>): import("react").JSX.Element;
+export type BreadcrumbSeparatorProps<T extends ElementType = 'li'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export declare function BreadcrumbSeparator<T extends ElementType = 'li'>({ as, className, ...props }: BreadcrumbSeparatorProps<T>): import("react").JSX.Element;
 export type BreadcrumbEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
-export declare function BreadcrumbEllipsis<T extends ElementType = 'span'>({ as, className, children, ...props }: BreadcrumbEllipsisProps<T>): import("react").JSX.Element;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
+export declare function BreadcrumbEllipsis<T extends ElementType = 'span'>({ as, className, ...props }: BreadcrumbEllipsisProps<T>): import("react").JSX.Element;

package/lib/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType } from 'react';
+import { ButtonHTMLAttributes, ElementType } from 'react';
 import { PolymorphicProps } from './utils/polymorphic';
 /**
  * Wrapper carrying the anchor. Nest the trigger button + content inside.
@@ -35,12 +35,17 @@ export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonEl
     'data-inset'?: boolean;
 }
 export declare function DropdownMenuItem({ className, type, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
-/** An interactive menu row rendered as a link (<a>). */
-export interface DropdownMenuLinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+/**
+ * An interactive menu row rendered as a link.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export type DropdownMenuLinkItemProps<T extends ElementType = 'a'> = PolymorphicProps<T, {
     'data-variant'?: 'destructive';
     'data-inset'?: boolean;
-}
-export declare function DropdownMenuLinkItem({ className, ...props }: DropdownMenuLinkItemProps): import("react").JSX.Element;
+}>;
+export declare function DropdownMenuLinkItem<T extends ElementType = 'a'>({ as, className, ...props }: DropdownMenuLinkItemProps<T>): import("react").JSX.Element;
 /** A trailing keyboard-shortcut hint inside an item. */
 export type DropdownMenuShortcutProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
 export declare function DropdownMenuShortcut<T extends ElementType = 'span'>({ as, className, ...props }: DropdownMenuShortcutProps<T>): import("react").JSX.Element;

package/lib/index.js

@@ -77,32 +77,32 @@ function ee({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/breadcrumb.tsx
-function te({ className: t, ...r }) {
-	return /* @__PURE__ */ e("nav", {
+function p({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "nav", {
 		"aria-label": "breadcrumb",
-		className: n("sheerly-breadcrumb", t),
-		...r
+		className: n("sheerly-breadcrumb", r),
+		...i
 	});
 }
-function ne({ className: t, ...r }) {
-	return /* @__PURE__ */ e("ol", {
-		className: n("sheerly-breadcrumb-list", t),
-		...r
+function m({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "ol", {
+		className: n("sheerly-breadcrumb-list", r),
+		...i
 	});
 }
-function p({ className: t, ...r }) {
-	return /* @__PURE__ */ e("li", {
-		className: n("sheerly-breadcrumb-item", t),
-		...r
+function h({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "li", {
+		className: n("sheerly-breadcrumb-item", r),
+		...i
 	});
 }
-function m({ className: t, ...r }) {
-	return /* @__PURE__ */ e("a", {
-		className: n("sheerly-breadcrumb-link", t),
-		...r
+function g({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "a", {
+		className: n("sheerly-breadcrumb-link", r),
+		...i
 	});
 }
-function h({ as: t, className: r, ...i }) {
+function _({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "span", {
 		role: "link",
 		"aria-disabled": "true",
@@ -111,28 +111,26 @@ function h({ as: t, className: r, ...i }) {
 		...i
 	});
 }
-function g({ className: t, children: r, ...i }) {
-	return /* @__PURE__ */ e("li", {
+function v({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "li", {
 		role: "presentation",
 		"aria-hidden": "true",
-		className: n("sheerly-breadcrumb-separator", t),
-		...i,
-		children: r
+		className: n("sheerly-breadcrumb-separator", r),
+		...i
 	});
 }
-function _({ as: t, className: r, children: i, ...a }) {
+function y({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "span", {
 		role: "presentation",
 		"aria-hidden": "true",
 		"aria-label": "More",
 		className: n("sheerly-breadcrumb-ellipsis", r),
-		...a,
-		children: i
+		...i
 	});
 }
 //#endregion
 //#region src/button.tsx
-function v({ as: t, className: r, ...i }) {
+function b({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "button", {
 		className: n("sheerly-button", r),
 		...i
@@ -140,43 +138,43 @@ function v({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/card.tsx
-function y({ as: t, className: r, ...i }) {
+function x({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-card", r),
 		...i
 	});
 }
-function b({ as: t, className: r, ...i }) {
+function S({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-card-header", r),
 		...i
 	});
 }
-function x({ as: t, className: r, ...i }) {
+function C({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "h3", {
 		className: n("sheerly-card-title", r),
 		...i
 	});
 }
-function S({ as: t, className: r, ...i }) {
+function w({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "p", {
 		className: n("sheerly-card-description", r),
 		...i
 	});
 }
-function C({ as: t, className: r, ...i }) {
+function T({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-card-action", r),
 		...i
 	});
 }
-function w({ as: t, className: r, ...i }) {
+function E({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-card-content", r),
 		...i
 	});
 }
-function T({ as: t, className: r, ...i }) {
+function D({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-card-footer", r),
 		...i
@@ -184,13 +182,13 @@ function T({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/carousel.tsx
-function E({ as: t, className: r, ...i }) {
+function O({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-carousel", r),
 		...i
 	});
 }
-function D({ as: t, className: r, ...i }) {
+function k({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-carousel-item", r),
 		...i
@@ -198,7 +196,7 @@ function D({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/checkbox.tsx
-function O({ className: t, ...r }) {
+function A({ className: t, ...r }) {
 	return /* @__PURE__ */ e("input", {
 		type: "checkbox",
 		className: n("sheerly-checkbox", t),
@@ -207,43 +205,43 @@ function O({ className: t, ...r }) {
 }
 //#endregion
 //#region src/dialog.tsx
-function k({ className: t, ...r }) {
+function j({ className: t, ...r }) {
 	return /* @__PURE__ */ e("dialog", {
 		className: n("sheerly-dialog", t),
 		...r
 	});
 }
-function A({ as: t, className: r, ...i }) {
+function M({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dialog-header", r),
 		...i
 	});
 }
-function j({ as: t, className: r, ...i }) {
+function N({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "h3", {
 		className: n("sheerly-dialog-title", r),
 		...i
 	});
 }
-function M({ as: t, className: r, ...i }) {
+function P({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "p", {
 		className: n("sheerly-dialog-description", r),
 		...i
 	});
 }
-function N({ as: t, className: r, ...i }) {
+function F({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dialog-body", r),
 		...i
 	});
 }
-function P({ as: t, className: r, ...i }) {
+function I({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dialog-footer", r),
 		...i
 	});
 }
-function F({ className: t, type: r = "button", ...i }) {
+function L({ className: t, type: r = "button", ...i }) {
 	return /* @__PURE__ */ e("button", {
 		type: r,
 		className: n("sheerly-dialog-close", t),
@@ -252,70 +250,70 @@ function F({ className: t, type: r = "button", ...i }) {
 }
 //#endregion
 //#region src/dropdown-menu.tsx
-function I({ as: t, className: r, ...i }) {
+function R({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "span", {
 		className: n("sheerly-dropdown-menu", r),
 		...i
 	});
 }
-function L({ as: t, className: r, ...i }) {
+function z({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dropdown-menu-content", r),
 		...i
 	});
 }
-function R({ as: t, className: r, ...i }) {
+function B({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dropdown-menu-group", r),
 		...i
 	});
 }
-function z({ as: t, className: r, ...i }) {
+function V({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dropdown-menu-label", r),
 		...i
 	});
 }
-function B({ className: t, type: r = "button", ...i }) {
+function H({ className: t, type: r = "button", ...i }) {
 	return /* @__PURE__ */ e("button", {
 		type: r,
 		className: n("sheerly-dropdown-menu-item", t),
 		...i
 	});
 }
-function V({ className: t, ...r }) {
-	return /* @__PURE__ */ e("a", {
-		className: n("sheerly-dropdown-menu-item", t),
-		...r
+function U({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "a", {
+		className: n("sheerly-dropdown-menu-item", r),
+		...i
 	});
 }
-function H({ as: t, className: r, ...i }) {
+function W({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "span", {
 		className: n("sheerly-dropdown-menu-shortcut", r),
 		...i
 	});
 }
-function U({ as: t, className: r, ...i }) {
+function G({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		role: "separator",
 		className: n("sheerly-dropdown-menu-separator", r),
 		...i
 	});
 }
-function W({ as: t, className: r, ...i }) {
+function K({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dropdown-menu-sub", r),
 		...i
 	});
 }
-function G({ className: t, type: r = "button", ...i }) {
+function q({ className: t, type: r = "button", ...i }) {
 	return /* @__PURE__ */ e("button", {
 		type: r,
 		className: n("sheerly-dropdown-menu-sub-trigger", t),
 		...i
 	});
 }
-function K({ as: t, className: r, ...i }) {
+function J({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-dropdown-menu-content", r),
 		...i
@@ -323,13 +321,13 @@ function K({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/hover-card.tsx
-function q({ as: t, className: r, ...i }) {
+function Y({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "span", {
 		className: n("sheerly-hover-card", r),
 		...i
 	});
 }
-function J({ as: t, className: r, ...i }) {
+function X({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "div", {
 		className: n("sheerly-hover-card-content", r),
 		...i
@@ -337,7 +335,7 @@ function J({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/input.tsx
-function Y({ className: t, ...r }) {
+function Z({ className: t, ...r }) {
 	return /* @__PURE__ */ e("input", {
 		className: n("sheerly-input", t),
 		...r
@@ -345,13 +343,13 @@ function Y({ className: t, ...r }) {
 }
 //#endregion
 //#region src/kbd.tsx
-function X({ className: t, ...r }) {
+function Q({ className: t, ...r }) {
 	return /* @__PURE__ */ e("kbd", {
 		className: n("sheerly-kbd", t),
 		...r
 	});
 }
-function Z({ as: t, className: r, ...i }) {
+function te({ as: t, className: r, ...i }) {
 	return /* @__PURE__ */ e(t ?? "span", {
 		className: n("sheerly-kbd-group", r),
 		...i
@@ -359,7 +357,7 @@ function Z({ as: t, className: r, ...i }) {
 }
 //#endregion
 //#region src/label.tsx
-function re({ className: t, ...r }) {
+function ne({ className: t, ...r }) {
 	return /* @__PURE__ */ e("label", {
 		className: n("sheerly-label", t),
 		...r
@@ -367,49 +365,51 @@ function re({ className: t, ...r }) {
 }
 //#endregion
 //#region src/pagination.tsx
-function ie({ className: t, ...r }) {
-	return /* @__PURE__ */ e("nav", {
+function re({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "nav", {
 		role: "navigation",
 		"aria-label": "pagination",
-		className: n("sheerly-pagination", t),
-		...r
+		className: n("sheerly-pagination", r),
+		...i
 	});
 }
-function ae({ className: t, ...r }) {
-	return /* @__PURE__ */ e("ul", {
-		className: n("sheerly-pagination-content", t),
-		...r
+function ie({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "ul", {
+		className: n("sheerly-pagination-content", r),
+		...i
 	});
 }
-function oe({ className: t, ...r }) {
-	return /* @__PURE__ */ e("li", {
-		className: n("sheerly-pagination-item", t),
-		...r
+function ae({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "li", {
+		className: n("sheerly-pagination-item", r),
+		...i
 	});
 }
-function Q({ className: t, isActive: r, ...i }) {
-	return /* @__PURE__ */ e("a", {
-		"aria-current": r ? "page" : void 0,
-		className: n("sheerly-pagination-link", t),
-		...i
+function oe({ as: t, className: r, isActive: i, ...a }) {
+	return /* @__PURE__ */ e(t ?? "a", {
+		"aria-current": i ? "page" : void 0,
+		className: n("sheerly-pagination-link", r),
+		...a
 	});
 }
-function se({ className: t, text: n = "Previous", children: r, ...i }) {
-	return /* @__PURE__ */ e(Q, {
+function se({ as: t, className: r, isActive: i, text: a = "Previous", children: o, ...s }) {
+	return /* @__PURE__ */ e(t ?? "a", {
 		"aria-label": "Go to previous page",
+		"aria-current": i ? "page" : void 0,
 		"data-role": "previous",
-		className: t,
-		...i,
-		children: r ?? n
+		className: n("sheerly-pagination-link", r),
+		...s,
+		children: o ?? a
 	});
 }
-function ce({ className: t, text: n = "Next", children: r, ...i }) {
-	return /* @__PURE__ */ e(Q, {
+function ce({ as: t, className: r, isActive: i, text: a = "Next", children: o, ...s }) {
+	return /* @__PURE__ */ e(t ?? "a", {
 		"aria-label": "Go to next page",
+		"aria-current": i ? "page" : void 0,
 		"data-role": "next",
-		className: t,
-		...i,
-		children: r ?? n
+		className: n("sheerly-pagination-link", r),
+		...s,
+		children: o ?? a
 	});
 }
 function le({ as: t, className: r, ...i }) {
@@ -594,10 +594,10 @@ function je({ as: t, className: r, ...i }) {
 		...i
 	});
 }
-function Me({ className: t, role: r = "tab", ...i }) {
-	return /* @__PURE__ */ e("button", {
-		role: r,
-		className: n("sheerly-tabs-trigger", t),
+function Me({ as: t, className: r, ...i }) {
+	return /* @__PURE__ */ e(t ?? "button", {
+		role: "tab",
+		className: n("sheerly-tabs-trigger", r),
 		...i
 	});
 }
@@ -657,4 +657,4 @@ function Re({ as: t, className: r, ...i }) {
 	});
 }
 //#endregion
-export { r as Accordion, i as AccordionContent, a as Alert, c as AlertAction, s as AlertDescription, o as AlertTitle, l as Avatar, d as AvatarFallback, f as AvatarGroup, u as AvatarImage, ee as Badge, te as Breadcrumb, _ as BreadcrumbEllipsis, p as BreadcrumbItem, m as BreadcrumbLink, ne as BreadcrumbList, h as BreadcrumbPage, g as BreadcrumbSeparator, v as Button, y as Card, C as CardAction, w as CardContent, S as CardDescription, T as CardFooter, b as CardHeader, x as CardTitle, E as Carousel, D as CarouselItem, O as Checkbox, k as Dialog, N as DialogBody, F as DialogClose, M as DialogDescription, P as DialogFooter, A as DialogHeader, j as DialogTitle, I as DropdownMenu, L as DropdownMenuContent, R as DropdownMenuGroup, B as DropdownMenuItem, z as DropdownMenuLabel, V as DropdownMenuLinkItem, U as DropdownMenuSeparator, H as DropdownMenuShortcut, W as DropdownMenuSub, K as DropdownMenuSubContent, G as DropdownMenuSubTrigger, q as HoverCard, J as HoverCardContent, Y as Input, X as Kbd, Z as KbdGroup, re as Label, ie as Pagination, ae as PaginationContent, le as PaginationEllipsis, oe as PaginationItem, Q as PaginationLink, ce as PaginationNext, se as PaginationPrevious, ue as Popover, de as PopoverContent, fe as Progress, me as Radio, pe as RadioGroup, he as Scrollbar, ge as Select, _e as Separator, ve as Sheet, Se as SheetBody, we as SheetClose, xe as SheetDescription, Ce as SheetFooter, ye as SheetHeader, be as SheetTitle, Te as Skeleton, Ee as Slider, De as Spinner, $ as Switch, ke as Table, Oe as TableContainer, Ae as Tabs, Ne as TabsContent, je as TabsList, Me as TabsTrigger, Pe as Textarea, Fe as Toggle, Ie as Tooltip, Le as TooltipContent, Re as Typography };
+export { r as Accordion, i as AccordionContent, a as Alert, c as AlertAction, s as AlertDescription, o as AlertTitle, l as Avatar, d as AvatarFallback, f as AvatarGroup, u as AvatarImage, ee as Badge, p as Breadcrumb, y as BreadcrumbEllipsis, h as BreadcrumbItem, g as BreadcrumbLink, m as BreadcrumbList, _ as BreadcrumbPage, v as BreadcrumbSeparator, b as Button, x as Card, T as CardAction, E as CardContent, w as CardDescription, D as CardFooter, S as CardHeader, C as CardTitle, O as Carousel, k as CarouselItem, A as Checkbox, j as Dialog, F as DialogBody, L as DialogClose, P as DialogDescription, I as DialogFooter, M as DialogHeader, N as DialogTitle, R as DropdownMenu, z as DropdownMenuContent, B as DropdownMenuGroup, H as DropdownMenuItem, V as DropdownMenuLabel, U as DropdownMenuLinkItem, G as DropdownMenuSeparator, W as DropdownMenuShortcut, K as DropdownMenuSub, J as DropdownMenuSubContent, q as DropdownMenuSubTrigger, Y as HoverCard, X as HoverCardContent, Z as Input, Q as Kbd, te as KbdGroup, ne as Label, re as Pagination, ie as PaginationContent, le as PaginationEllipsis, ae as PaginationItem, oe as PaginationLink, ce as PaginationNext, se as PaginationPrevious, ue as Popover, de as PopoverContent, fe as Progress, me as Radio, pe as RadioGroup, he as Scrollbar, ge as Select, _e as Separator, ve as Sheet, Se as SheetBody, we as SheetClose, xe as SheetDescription, Ce as SheetFooter, ye as SheetHeader, be as SheetTitle, Te as Skeleton, Ee as Slider, De as Spinner, $ as Switch, ke as Table, Oe as TableContainer, Ae as Tabs, Ne as TabsContent, je as TabsList, Me as TabsTrigger, Pe as Textarea, Fe as Toggle, Ie as Tooltip, Le as TooltipContent, Re as Typography };

package/lib/pagination.d.ts

@@ -1,8 +1,11 @@
-import { AnchorHTMLAttributes, ElementType, HTMLAttributes } from 'react';
+import { ElementType } from 'react';
 import { PolymorphicProps } from './utils/polymorphic';
+export type PaginationProps<T extends ElementType = 'nav'> = PolymorphicProps<T>;
 /**
  * Page navigation. Mark the current page's link with `isActive`.
  *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
+ *
  * @example
  * <Pagination>
  *   <PaginationContent>
@@ -12,20 +15,42 @@ import { PolymorphicProps } from './utils/polymorphic';
  *   </PaginationContent>
  * </Pagination>
  */
-export declare function Pagination({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-export declare function PaginationContent({ className, ...props }: HTMLAttributes<HTMLUListElement>): import("react").JSX.Element;
-export declare function PaginationItem({ className, ...props }: HTMLAttributes<HTMLLIElement>): import("react").JSX.Element;
-export interface PaginationLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export declare function Pagination<T extends ElementType = 'nav'>({ as, className, ...props }: PaginationProps<T>): import("react").JSX.Element;
+export type PaginationContentProps<T extends ElementType = 'ul'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `ul`).
+ */
+export declare function PaginationContent<T extends ElementType = 'ul'>({ as, className, ...props }: PaginationContentProps<T>): import("react").JSX.Element;
+export type PaginationItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export declare function PaginationItem<T extends ElementType = 'li'>({ as, className, ...props }: PaginationItemProps<T>): import("react").JSX.Element;
+export type PaginationLinkProps<T extends ElementType = 'a'> = PolymorphicProps<T, {
     /** Marks the current page (renders like the outline button). */
     isActive?: boolean;
     'data-role'?: 'previous' | 'next';
-}
-export declare function PaginationLink({ className, isActive, ...props }: PaginationLinkProps): import("react").JSX.Element;
-export declare function PaginationPrevious({ className, text, children, ...props }: PaginationLinkProps & {
-    text?: string;
-}): import("react").JSX.Element;
-export declare function PaginationNext({ className, text, children, ...props }: PaginationLinkProps & {
+}>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export declare function PaginationLink<T extends ElementType = 'a'>({ as, className, isActive, ...props }: PaginationLinkProps<T>): import("react").JSX.Element;
+export type PaginationPreviousProps<T extends ElementType = 'a'> = PaginationLinkProps<T> & {
+    /** Visible label. Children override it. */
     text?: string;
-}): import("react").JSX.Element;
+};
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`).
+ */
+export declare function PaginationPrevious<T extends ElementType = 'a'>({ as, className, isActive, text, children, ...props }: PaginationPreviousProps<T>): import("react").JSX.Element;
+export type PaginationNextProps<T extends ElementType = 'a'> = PaginationPreviousProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`).
+ */
+export declare function PaginationNext<T extends ElementType = 'a'>({ as, className, isActive, text, children, ...props }: PaginationNextProps<T>): import("react").JSX.Element;
 export type PaginationEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
 export declare function PaginationEllipsis<T extends ElementType = 'span'>({ as, className, ...props }: PaginationEllipsisProps<T>): import("react").JSX.Element;

package/lib/tabs.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, ElementType } from 'react';
+import { ElementType } from 'react';
 import { PolymorphicProps } from './utils/polymorphic';
 export type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /**
@@ -25,10 +25,13 @@ export type TabsListProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
  * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
  */
 export declare function TabsList<T extends ElementType = 'div'>({ as, className, ...props }: TabsListProps<T>): import("react").JSX.Element;
-export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<T, {
     'data-state'?: 'active';
-}
-export declare function TabsTrigger({ className, role, ...props }: TabsTriggerProps): import("react").JSX.Element;
+}>;
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `button`).
+ */
+export declare function TabsTrigger<T extends ElementType = 'button'>({ as, className, ...props }: TabsTriggerProps<T>): import("react").JSX.Element;
 export type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /**
  * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).

package/package.json

@@ -1,33 +1,34 @@
-{
-  "name": "sheerly",
-  "version": "0.0.2",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "build:lib": "tsc -b && vite build --config vite.lib.config.ts",
-    "lint": "oxlint",
-    "preview": "vite preview"
-  },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "src",
-    "lib"
-  ],
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@vitejs/plugin-react": "^6.0.5",
-    "nuqs": "^2.9.5",
-    "oxlint": "^1.78.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwindcss": "^4.3.3",
-    "typescript": "^6.0.3",
-    "unplugin-dts": "^1.0.3",
-    "vite": "^8.2.1"
-  }
-}
+{
+  "name": "sheerly",
+  "version": "0.0.3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config vite.config.doc.ts",
+    "build": "node --run build:lib && node --run build:doc",
+    "build:lib": "tsc -b && vite build --config vite.config.lib.ts",
+    "build:doc": "tsc -b && vite build --config vite.config.doc.ts",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "nuqs": "^2.9.6",
+    "oxlint": "^1.78.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "unplugin-dts": "^1.0.3",
+    "vite": "^8.2.1"
+  }
+}

package/src/breadcrumb.tsx

@@ -1,10 +1,14 @@
-import type { AnchorHTMLAttributes, ElementType, HTMLAttributes, OlHTMLAttributes } from 'react'
+import type { ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
+export type BreadcrumbProps<T extends ElementType = 'nav'> = PolymorphicProps<T>
+
 /**
  * A path hierarchy of links.
  *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
+ *
  * @example
  * <Breadcrumb>
  *   <BreadcrumbList>
@@ -14,9 +18,14 @@ import type { PolymorphicProps } from './utils/polymorphic'
  *   </BreadcrumbList>
  * </Breadcrumb>
  */
-export function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>) {
+export function Breadcrumb<T extends ElementType = 'nav'>({
+  as,
+  className,
+  ...props
+}: BreadcrumbProps<T>) {
+  const Tag = as ?? 'nav'
   return (
-    <nav
+    <Tag
       aria-label="breadcrumb"
       className={cn('sheerly-breadcrumb', className)}
       {...props}
@@ -24,20 +33,54 @@ export function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>)
   )
 }
 
-export function BreadcrumbList({ className, ...props }: OlHTMLAttributes<HTMLOListElement>) {
-  return <ol className={cn('sheerly-breadcrumb-list', className)} {...props} />
+export type BreadcrumbListProps<T extends ElementType = 'ol'> = PolymorphicProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `ol`).
+ */
+export function BreadcrumbList<T extends ElementType = 'ol'>({
+  as,
+  className,
+  ...props
+}: BreadcrumbListProps<T>) {
+  const Tag = as ?? 'ol'
+  return <Tag className={cn('sheerly-breadcrumb-list', className)} {...props} />
 }
 
-export function BreadcrumbItem({ className, ...props }: HTMLAttributes<HTMLLIElement>) {
-  return <li className={cn('sheerly-breadcrumb-item', className)} {...props} />
+export type BreadcrumbItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export function BreadcrumbItem<T extends ElementType = 'li'>({
+  as,
+  className,
+  ...props
+}: BreadcrumbItemProps<T>) {
+  const Tag = as ?? 'li'
+  return <Tag className={cn('sheerly-breadcrumb-item', className)} {...props} />
 }
 
-export function BreadcrumbLink({ className, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
-  return <a className={cn('sheerly-breadcrumb-link', className)} {...props} />
+export type BreadcrumbLinkProps<T extends ElementType = 'a'> = PolymorphicProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export function BreadcrumbLink<T extends ElementType = 'a'>({
+  as,
+  className,
+  ...props
+}: BreadcrumbLinkProps<T>) {
+  const Tag = as ?? 'a'
+  return <Tag className={cn('sheerly-breadcrumb-link', className)} {...props} />
 }
 
 export type BreadcrumbPageProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
 export function BreadcrumbPage<T extends ElementType = 'span'>({
   as,
   className,
@@ -55,29 +98,35 @@ export function BreadcrumbPage<T extends ElementType = 'span'>({
   )
 }
 
-export function BreadcrumbSeparator({
+export type BreadcrumbSeparatorProps<T extends ElementType = 'li'> = PolymorphicProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export function BreadcrumbSeparator<T extends ElementType = 'li'>({
+  as,
   className,
-  children,
   ...props
-}: HTMLAttributes<HTMLLIElement>) {
+}: BreadcrumbSeparatorProps<T>) {
+  const Tag = as ?? 'li'
   return (
-    <li
+    <Tag
       role="presentation"
       aria-hidden="true"
       className={cn('sheerly-breadcrumb-separator', className)}
       {...props}
-    >
-      {children}
-    </li>
+    />
   )
 }
 
 export type BreadcrumbEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
 export function BreadcrumbEllipsis<T extends ElementType = 'span'>({
   as,
   className,
-  children,
   ...props
 }: BreadcrumbEllipsisProps<T>) {
   const Tag = as ?? 'span'
@@ -88,8 +137,6 @@ export function BreadcrumbEllipsis<T extends ElementType = 'span'>({
       aria-label="More"
       className={cn('sheerly-breadcrumb-ellipsis', className)}
       {...props}
-    >
-      {children}
-    </Tag>
+    />
   )
 }

package/src/dropdown-menu.tsx

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType } from 'react'
+import type { ButtonHTMLAttributes, ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
@@ -78,14 +78,27 @@ export function DropdownMenuItem({ className, type = 'button', ...props }: Dropd
   return <button type={type} className={cn('sheerly-dropdown-menu-item', className)} {...props} />
 }
 
-/** An interactive menu row rendered as a link (<a>). */
-export interface DropdownMenuLinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  'data-variant'?: 'destructive'
-  'data-inset'?: boolean
-}
+/**
+ * An interactive menu row rendered as a link.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export type DropdownMenuLinkItemProps<T extends ElementType = 'a'> = PolymorphicProps<
+  T,
+  {
+    'data-variant'?: 'destructive'
+    'data-inset'?: boolean
+  }
+>
 
-export function DropdownMenuLinkItem({ className, ...props }: DropdownMenuLinkItemProps) {
-  return <a className={cn('sheerly-dropdown-menu-item', className)} {...props} />
+export function DropdownMenuLinkItem<T extends ElementType = 'a'>({
+  as,
+  className,
+  ...props
+}: DropdownMenuLinkItemProps<T>) {
+  const Tag = as ?? 'a'
+  return <Tag className={cn('sheerly-dropdown-menu-item', className)} {...props} />
 }
 
 /** A trailing keyboard-shortcut hint inside an item. */

package/src/pagination.tsx

@@ -1,10 +1,14 @@
-import type { AnchorHTMLAttributes, ElementType, HTMLAttributes } from 'react'
+import type { ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
+export type PaginationProps<T extends ElementType = 'nav'> = PolymorphicProps<T>
+
 /**
  * Page navigation. Mark the current page's link with `isActive`.
  *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `nav`).
+ *
  * @example
  * <Pagination>
  *   <PaginationContent>
@@ -14,9 +18,14 @@ import type { PolymorphicProps } from './utils/polymorphic'
  *   </PaginationContent>
  * </Pagination>
  */
-export function Pagination({ className, ...props }: HTMLAttributes<HTMLElement>) {
+export function Pagination<T extends ElementType = 'nav'>({
+  as,
+  className,
+  ...props
+}: PaginationProps<T>) {
+  const Tag = as ?? 'nav'
   return (
-    <nav
+    <Tag
       role="navigation"
       aria-label="pagination"
       className={cn('sheerly-pagination', className)}
@@ -25,30 +34,56 @@ export function Pagination({ className, ...props }: HTMLAttributes<HTMLElement>)
   )
 }
 
-export function PaginationContent({
+export type PaginationContentProps<T extends ElementType = 'ul'> = PolymorphicProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `ul`).
+ */
+export function PaginationContent<T extends ElementType = 'ul'>({
+  as,
   className,
   ...props
-}: HTMLAttributes<HTMLUListElement>) {
-  return <ul className={cn('sheerly-pagination-content', className)} {...props} />
+}: PaginationContentProps<T>) {
+  const Tag = as ?? 'ul'
+  return <Tag className={cn('sheerly-pagination-content', className)} {...props} />
 }
 
-export function PaginationItem({ className, ...props }: HTMLAttributes<HTMLLIElement>) {
-  return <li className={cn('sheerly-pagination-item', className)} {...props} />
-}
+export type PaginationItemProps<T extends ElementType = 'li'> = PolymorphicProps<T>
 
-export interface PaginationLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Marks the current page (renders like the outline button). */
-  isActive?: boolean
-  'data-role'?: 'previous' | 'next'
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `li`).
+ */
+export function PaginationItem<T extends ElementType = 'li'>({
+  as,
+  className,
+  ...props
+}: PaginationItemProps<T>) {
+  const Tag = as ?? 'li'
+  return <Tag className={cn('sheerly-pagination-item', className)} {...props} />
 }
 
-export function PaginationLink({
+export type PaginationLinkProps<T extends ElementType = 'a'> = PolymorphicProps<
+  T,
+  {
+    /** Marks the current page (renders like the outline button). */
+    isActive?: boolean
+    'data-role'?: 'previous' | 'next'
+  }
+>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`, e.g.
+ * `as={Link}` for a router link).
+ */
+export function PaginationLink<T extends ElementType = 'a'>({
+  as,
   className,
   isActive,
   ...props
-}: PaginationLinkProps) {
+}: PaginationLinkProps<T>) {
+  const Tag = as ?? 'a'
   return (
-    <a
+    <Tag
       aria-current={isActive ? 'page' : undefined}
       className={cn('sheerly-pagination-link', className)}
       {...props}
@@ -56,44 +91,68 @@ export function PaginationLink({
   )
 }
 
-export function PaginationPrevious({
+export type PaginationPreviousProps<T extends ElementType = 'a'> = PaginationLinkProps<T> & {
+  /** Visible label. Children override it. */
+  text?: string
+}
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`).
+ */
+export function PaginationPrevious<T extends ElementType = 'a'>({
+  as,
   className,
+  isActive,
   text = 'Previous',
   children,
   ...props
-}: PaginationLinkProps & { text?: string }) {
+}: PaginationPreviousProps<T>) {
+  const Tag = as ?? 'a'
   return (
-    <PaginationLink
+    <Tag
       aria-label="Go to previous page"
+      aria-current={isActive ? 'page' : undefined}
       data-role="previous"
-      className={className}
+      className={cn('sheerly-pagination-link', className)}
       {...props}
     >
       {children ?? text}
-    </PaginationLink>
+    </Tag>
   )
 }
 
-export function PaginationNext({
+export type PaginationNextProps<T extends ElementType = 'a'> = PaginationPreviousProps<T>
+
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `a`).
+ */
+export function PaginationNext<T extends ElementType = 'a'>({
+  as,
   className,
+  isActive,
   text = 'Next',
   children,
   ...props
-}: PaginationLinkProps & { text?: string }) {
+}: PaginationNextProps<T>) {
+  const Tag = as ?? 'a'
   return (
-    <PaginationLink
+    <Tag
       aria-label="Go to next page"
+      aria-current={isActive ? 'page' : undefined}
       data-role="next"
-      className={className}
+      className={cn('sheerly-pagination-link', className)}
       {...props}
     >
       {children ?? text}
-    </PaginationLink>
+    </Tag>
   )
 }
 
 export type PaginationEllipsisProps<T extends ElementType = 'span'> = PolymorphicProps<T>
 
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ */
 export function PaginationEllipsis<T extends ElementType = 'span'>({
   as,
   className,

package/src/tabs.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ElementType } from 'react'
+import type { ElementType } from 'react'
 import { cn } from './utils/cn'
 import type { PolymorphicProps } from './utils/polymorphic'
 
@@ -46,14 +46,21 @@ export function TabsList<T extends ElementType = 'div'>({
   return <Tag role="tablist" className={cn('sheerly-tabs-list', className)} {...props} />
 }
 
-export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  'data-state'?: 'active'
-}
+export type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<
+  T,
+  { 'data-state'?: 'active' }
+>
 
-export function TabsTrigger({ className, role = 'tab', ...props }: TabsTriggerProps) {
-  return (
-    <button role={role} className={cn('sheerly-tabs-trigger', className)} {...props} />
-  )
+/**
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `button`).
+ */
+export function TabsTrigger<T extends ElementType = 'button'>({
+  as,
+  className,
+  ...props
+}: TabsTriggerProps<T>) {
+  const Tag = as ?? 'button'
+  return <Tag role="tab" className={cn('sheerly-tabs-trigger', className)} {...props} />
 }
 
 export type TabsContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>
@@ -68,4 +75,4 @@ export function TabsContent<T extends ElementType = 'div'>({
 }: TabsContentProps<T>) {
   const Tag = as ?? 'div'
   return <Tag role="tabpanel" className={cn('sheerly-tabs-content', className)} {...props} />
-}
+}