sheerly 0.0.1 → 0.0.3

package/lib/accordion.d.ts

@@ -1,6 +1,15 @@
-import { DetailsHTMLAttributes, HTMLAttributes } from 'react';
+import { DetailsHTMLAttributes, ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
 export type AccordionProps = DetailsHTMLAttributes<HTMLDetailsElement>;
-/** Native <details>. Set the same `name` on siblings for exclusive open. */
+/**
+ * Native <details>. Set the same `name` on siblings for exclusive open.
+ *
+ * @example
+ * <Accordion name="faq">
+ *   <summary>Is it accessible?</summary>
+ *   <AccordionContent>Yes.</AccordionContent>
+ * </Accordion>
+ */
 export declare function Accordion({ className, ...props }: AccordionProps): import("react").JSX.Element;
-export type AccordionContentProps = HTMLAttributes<HTMLDivElement>;
-export declare function AccordionContent({ className, ...props }: AccordionContentProps): import("react").JSX.Element;
+export type AccordionContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function AccordionContent<T extends ElementType = 'div'>({ as, className, ...props }: AccordionContentProps<T>): import("react").JSX.Element;

package/lib/alert.d.ts

@@ -1,8 +1,23 @@
-import { HTMLAttributes } from 'react';
-export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type AlertProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-variant'?: 'default' | 'destructive' | 'success' | 'info' | 'warning';
-}
-export declare function Alert({ className, role, ...props }: AlertProps): import("react").JSX.Element;
-export declare function AlertTitle({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function AlertDescription({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function AlertAction({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+}>;
+/**
+ * A callout. The leading icon is embedded in CSS and swaps per `data-variant`.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Alert data-variant="warning">
+ *   <AlertTitle>Heads up</AlertTitle>
+ *   <AlertDescription>Your session expires soon.</AlertDescription>
+ * </Alert>
+ */
+export declare function Alert<T extends ElementType = 'div'>({ as, className, ...props }: AlertProps<T>): import("react").JSX.Element;
+export type AlertTitleProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function AlertTitle<T extends ElementType = 'div'>({ as, className, ...props }: AlertTitleProps<T>): import("react").JSX.Element;
+export type AlertDescriptionProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function AlertDescription<T extends ElementType = 'div'>({ as, className, ...props }: AlertDescriptionProps<T>): import("react").JSX.Element;
+export type AlertActionProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function AlertAction<T extends ElementType = 'div'>({ as, className, ...props }: AlertActionProps<T>): import("react").JSX.Element;

package/lib/avatar.css

@@ -1 +1 @@
-.sheerly-avatar{border-radius:var(--sheerly-radius-full);-webkit-user-select:none;user-select:none;flex-shrink:0;width:32px;height:32px;display:flex;position:relative;overflow:hidden}.sheerly-avatar[data-size=sm]{width:24px;height:24px}.sheerly-avatar[data-size=lg]{width:40px;height:40px}.sheerly-avatar[data-size=xl]{width:56px;height:56px}.sheerly-avatar img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}.sheerly-avatar-fallback{border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-muted);width:100%;height:100%;color:var(--sheerly-muted-foreground);justify-content:center;align-items:center;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;display:flex}.sheerly-avatar[data-size=sm] .sheerly-avatar-fallback{font-size:11px}.sheerly-avatar[data-size=lg] .sheerly-avatar-fallback{font-size:16px}.sheerly-avatar[data-size=xl] .sheerly-avatar-fallback{font-size:20px}.sheerly-avatar-group{display:flex}.sheerly-avatar-group .sheerly-avatar{box-shadow:0 0 0 2px var(--sheerly-background)}.sheerly-avatar-group .sheerly-avatar+.sheerly-avatar{margin-left:-8px}
+.sheerly-avatar{border-radius:var(--sheerly-radius-full);-webkit-user-select:none;user-select:none;flex-shrink:0;width:32px;height:32px;display:flex;overflow:hidden}.sheerly-avatar[data-size=sm]{width:24px;height:24px}.sheerly-avatar[data-size=lg]{width:40px;height:40px}.sheerly-avatar[data-size=xl]{width:56px;height:56px}.sheerly-avatar img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}.sheerly-avatar-fallback{border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-muted);width:100%;height:100%;color:var(--sheerly-muted-foreground);justify-content:center;align-items:center;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;display:flex}.sheerly-avatar[data-size=sm] .sheerly-avatar-fallback{font-size:11px}.sheerly-avatar[data-size=lg] .sheerly-avatar-fallback{font-size:16px}.sheerly-avatar[data-size=xl] .sheerly-avatar-fallback{font-size:20px}.sheerly-avatar-group{display:flex}.sheerly-avatar-group .sheerly-avatar{box-shadow:0 0 0 2px var(--sheerly-background)}.sheerly-avatar-group .sheerly-avatar+.sheerly-avatar{margin-left:-8px}

package/lib/avatar.d.ts

@@ -1,13 +1,26 @@
-import { HTMLAttributes, ImgHTMLAttributes } from 'react';
-export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType, ImgHTMLAttributes } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type AvatarProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-size'?: 'sm' | 'default' | 'lg' | 'xl';
-}
-export declare function Avatar({ className, ...props }: AvatarProps): import("react").JSX.Element;
+}>;
+/**
+ * A circular avatar. Nest an <AvatarImage> with an <AvatarFallback> for initials.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`, e.g.
+ * `as="a"` for a linkable avatar).
+ *
+ * @example
+ * <Avatar>
+ *   <AvatarImage src="/me.jpg" alt="Ada" />
+ *   <AvatarFallback>AL</AvatarFallback>
+ * </Avatar>
+ */
+export declare function Avatar<T extends ElementType = 'div'>({ as, className, ...props }: AvatarProps<T>): import("react").JSX.Element;
 export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     alt: string;
 }
 export declare function AvatarImage(props: AvatarImageProps): import("react").JSX.Element;
-export type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement>;
-export declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
-export type AvatarGroupProps = HTMLAttributes<HTMLDivElement>;
-export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export type AvatarFallbackProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+export declare function AvatarFallback<T extends ElementType = 'span'>({ as, className, ...props }: AvatarFallbackProps<T>): import("react").JSX.Element;
+export type AvatarGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function AvatarGroup<T extends ElementType = 'div'>({ as, className, ...props }: AvatarGroupProps<T>): import("react").JSX.Element;

package/lib/badge.d.ts

@@ -1,5 +1,15 @@
-import { HTMLAttributes } from 'react';
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type BadgeProps<T extends ElementType = 'span'> = PolymorphicProps<T, {
     'data-variant'?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'success' | 'warning' | 'error' | 'blue';
-}
-export declare function Badge({ className, ...props }: BadgeProps): import("react").JSX.Element;
+}>;
+/**
+ * A pill-shaped label. Set `data-variant` for color.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`, e.g.
+ * `as="a"` for a linkable badge).
+ *
+ * @example
+ * <Badge data-variant="success">Active</Badge>
+ */
+export declare function Badge<T extends ElementType = 'span'>({ as, className, ...props }: BadgeProps<T>): import("react").JSX.Element;

package/lib/breadcrumb.d.ts

@@ -1,8 +1,49 @@
-import { AnchorHTMLAttributes, HTMLAttributes, OlHTMLAttributes } from 'react';
-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 BreadcrumbPage({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
-export declare function BreadcrumbSeparator({ className, children, ...props }: HTMLAttributes<HTMLLIElement>): import("react").JSX.Element;
-export declare function BreadcrumbEllipsis({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+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>
+ *     <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><BreadcrumbPage>Docs</BreadcrumbPage></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+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 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>;
+/**
+ * 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/button.css

@@ -1 +1 @@
-.sheerly-button{white-space:nowrap;border-radius:var(--sheerly-radius-lg);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground);border:1px solid #0000;outline:none;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;transition:all .15s;display:inline-flex}.sheerly-button:hover{background-color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-button:active:not([aria-haspopup]){translate:0 1px}.sheerly-button:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-button:disabled{pointer-events:none;opacity:.5}.sheerly-button svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-button [data-icon=inline-start]{margin-inline-start:-2px}.sheerly-button [data-icon=inline-end]{margin-inline-end:-2px}.sheerly-button[data-rounded=full]{border-radius:var(--sheerly-radius-full)}.sheerly-button[data-variant=default],.sheerly-button[data-variant=primary]{background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground)}:is(.sheerly-button[data-variant=default],.sheerly-button[data-variant=primary]):hover{background-color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-button[data-variant=secondary]{background-color:var(--sheerly-secondary);color:var(--sheerly-secondary-foreground)}.sheerly-button[data-variant=secondary]:hover{background-color:color-mix(in oklch, var(--sheerly-secondary), var(--sheerly-foreground) 5%)}.sheerly-button[data-variant=tertiary],.sheerly-button[data-variant=ghost]{color:var(--sheerly-foreground);background-color:#0000}:is(.sheerly-button[data-variant=tertiary],.sheerly-button[data-variant=ghost]):hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-button[data-variant=muted]{background-color:var(--sheerly-muted);color:var(--sheerly-muted-foreground)}.sheerly-button[data-variant=muted]:hover{background-color:color-mix(in oklch, var(--sheerly-muted), var(--sheerly-foreground) 5%)}.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]{background-color:oklch(from var(--sheerly-destructive) l c h / 10%);color:var(--sheerly-destructive)}:is(.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]):hover{background-color:oklch(from var(--sheerly-destructive) l c h / 20%)}:is(.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]):focus-visible{border-color:oklch(from var(--sheerly-destructive) l c h / 40%);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-button[data-variant=outline]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);border-color:var(--sheerly-border)}.sheerly-button[data-variant=outline]:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-button[data-variant=link]{color:var(--sheerly-primary);text-underline-offset:4px;background-color:#0000;border:none;height:auto;padding:0}.sheerly-button[data-variant=link]:hover{text-decoration:underline}.sheerly-button[data-size=xs]{border-radius:var(--sheerly-radius-md);gap:4px;height:24px;padding:0 8px;font-size:12px}.sheerly-button[data-size=xs] svg{width:14px;height:14px}.sheerly-button[data-size=sm]{border-radius:var(--sheerly-radius-md);gap:4px;height:28px;padding:0 10px;font-size:13px}.sheerly-button[data-size=default]{height:32px;padding:0 10px}.sheerly-button[data-size=lg]{height:36px;padding:0 10px}.sheerly-button[data-size=icon]{width:32px;height:32px;padding:0}.sheerly-button[data-size=icon-xs]{border-radius:var(--sheerly-radius-md);width:24px;height:24px;padding:0}.sheerly-button[data-size=icon-xs] svg{width:14px;height:14px}.sheerly-button[data-size=icon-sm]{border-radius:var(--sheerly-radius-md);width:28px;height:28px;padding:0}.sheerly-button[data-size=icon-lg]{width:36px;height:36px;padding:0}
+.sheerly-button{white-space:nowrap;border-radius:var(--sheerly-radius-lg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground);border:1px solid #0000;outline:none;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;transition:all .15s;display:inline-flex}.sheerly-button:hover{background-color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-button:active:not([aria-haspopup]){translate:0 1px}.sheerly-button:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-button:disabled{pointer-events:none;opacity:.5}.sheerly-button svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-button [data-icon=inline-start]{margin-inline-start:-2px}.sheerly-button [data-icon=inline-end]{margin-inline-end:-2px}.sheerly-button[data-rounded=full]{border-radius:var(--sheerly-radius-full)}.sheerly-button[data-variant=default],.sheerly-button[data-variant=primary]{background-color:var(--sheerly-primary);color:var(--sheerly-primary-foreground)}:is(.sheerly-button[data-variant=default],.sheerly-button[data-variant=primary]):hover{background-color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-button[data-variant=secondary]{background-color:var(--sheerly-secondary);color:var(--sheerly-secondary-foreground)}.sheerly-button[data-variant=secondary]:hover{background-color:color-mix(in oklch, var(--sheerly-secondary), var(--sheerly-foreground) 5%)}.sheerly-button[data-variant=tertiary],.sheerly-button[data-variant=ghost]{color:var(--sheerly-foreground);background-color:#0000}:is(.sheerly-button[data-variant=tertiary],.sheerly-button[data-variant=ghost]):hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-button[data-variant=muted]{background-color:var(--sheerly-muted);color:var(--sheerly-muted-foreground)}.sheerly-button[data-variant=muted]:hover{background-color:color-mix(in oklch, var(--sheerly-muted), var(--sheerly-foreground) 5%)}.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]{background-color:oklch(from var(--sheerly-destructive) l c h / 10%);color:var(--sheerly-destructive)}:is(.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]):hover{background-color:oklch(from var(--sheerly-destructive) l c h / 20%)}:is(.sheerly-button[data-variant=destructive],.sheerly-button[data-variant=error]):focus-visible{border-color:oklch(from var(--sheerly-destructive) l c h / 40%);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-button[data-variant=outline]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);border-color:var(--sheerly-border)}.sheerly-button[data-variant=outline]:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-button[data-variant=link]{color:var(--sheerly-primary);text-underline-offset:4px;background-color:#0000;border:none;height:auto;padding:0}.sheerly-button[data-variant=link]:hover{text-decoration:underline}.sheerly-button[data-size=xs]{border-radius:var(--sheerly-radius-md);gap:4px;height:24px;padding:0 8px;font-size:12px}.sheerly-button[data-size=xs] svg{width:14px;height:14px}.sheerly-button[data-size=sm]{border-radius:var(--sheerly-radius-md);gap:4px;height:28px;padding:0 10px;font-size:13px}.sheerly-button[data-size=default]{height:32px;padding:0 10px}.sheerly-button[data-size=lg]{height:36px;padding:0 10px}.sheerly-button[data-size=icon]{width:32px;height:32px;padding:0}.sheerly-button[data-size=icon-xs]{border-radius:var(--sheerly-radius-md);width:24px;height:24px;padding:0}.sheerly-button[data-size=icon-xs] svg{width:14px;height:14px}.sheerly-button[data-size=icon-sm]{border-radius:var(--sheerly-radius-md);width:28px;height:28px;padding:0}.sheerly-button[data-size=icon-lg]{width:36px;height:36px;padding:0}

package/lib/button.d.ts

@@ -1,7 +1,16 @@
-import { ButtonHTMLAttributes } from 'react';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type ButtonProps<T extends ElementType = 'button'> = PolymorphicProps<T, {
     'data-variant'?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'muted' | 'destructive' | 'error' | 'outline' | 'link';
     'data-size'?: 'xs' | 'sm' | 'default' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
     'data-rounded'?: 'full';
-}
-export declare function Button({ className, ...props }: ButtonProps): import("react").JSX.Element;
+}>;
+/**
+ * A button. Defaults to the primary variant; set `data-variant` / `data-size`
+ * to change it.
+ *
+ * @example
+ * <Button data-variant="secondary">Save</Button>
+ * <Button as="a" role="button" href="/settings">Settings</Button>
+ */
+export declare function Button<T extends ElementType = 'button'>({ as, className, ...props }: ButtonProps<T>): import("react").JSX.Element;

package/lib/card.d.ts

@@ -1,14 +1,34 @@
-import { HTMLAttributes } from 'react';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type CardProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-size'?: 'default' | 'sm';
-}
-export declare function Card({ className, ...props }: CardProps): import("react").JSX.Element;
-export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
-export declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
-export declare function CardAction({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+}>;
+/**
+ * A surface container. Compose with the sub-parts below.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Card as="article">
+ *   <CardHeader>
+ *     <CardTitle>Notifications</CardTitle>
+ *     <CardDescription>You have 3 unread.</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>…</CardContent>
+ * </Card>
+ */
+export declare function Card<T extends ElementType = 'div'>({ as, className, ...props }: CardProps<T>): import("react").JSX.Element;
+export type CardHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function CardHeader<T extends ElementType = 'div'>({ as, className, ...props }: CardHeaderProps<T>): import("react").JSX.Element;
+export type CardTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
+export declare function CardTitle<T extends ElementType = 'h3'>({ as, className, ...props }: CardTitleProps<T>): import("react").JSX.Element;
+export type CardDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
+export declare function CardDescription<T extends ElementType = 'p'>({ as, className, ...props }: CardDescriptionProps<T>): import("react").JSX.Element;
+export type CardActionProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function CardAction<T extends ElementType = 'div'>({ as, className, ...props }: CardActionProps<T>): import("react").JSX.Element;
+export type CardContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function CardContent<T extends ElementType = 'div'>({ as, className, ...props }: CardContentProps<T>): import("react").JSX.Element;
+export type CardFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-direction'?: 'column';
-}
-export declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
+}>;
+export declare function CardFooter<T extends ElementType = 'div'>({ as, className, ...props }: CardFooterProps<T>): import("react").JSX.Element;

package/lib/carousel.d.ts

@@ -1,5 +1,6 @@
-import { HTMLAttributes } from 'react';
-export type CarouselProps = HTMLAttributes<HTMLDivElement>;
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type CarouselProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /**
  * Pure-CSS carousel. The element itself is the scroll container — put
  * `<CarouselItem>`s (or any children) directly inside. The browser generates
@@ -11,11 +12,16 @@ export type CarouselProps = HTMLAttributes<HTMLDivElement>;
  * component sets no gap on purpose (a fixed basis + gap breaks first/last
  * snapping, so the prev/next buttons wouldn't disable and end dots wouldn't
  * highlight).
+ *
+ * @example
+ * <Carousel>
+ *   <CarouselItem data-name="Slide 1">…</CarouselItem>
+ *   <CarouselItem data-name="Slide 2">…</CarouselItem>
+ * </Carousel>
  */
-export declare function Carousel({ className, ...props }: CarouselProps): import("react").JSX.Element;
-export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-    /** Accessible name for this slide's generated scroll marker (WCAG). */
+export declare function Carousel<T extends ElementType = 'div'>({ as, className, ...props }: CarouselProps<T>): import("react").JSX.Element;
+export type CarouselItemProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-name'?: string;
-}
+}>;
 /** A slide. Defaults to `width: 100%` (one per page); override via `style`/`className`. */
-export declare function CarouselItem({ className, ...props }: CarouselItemProps): import("react").JSX.Element;
+export declare function CarouselItem<T extends ElementType = 'div'>({ as, className, ...props }: CarouselItemProps<T>): import("react").JSX.Element;

package/lib/checkbox.d.ts

@@ -1,3 +1,9 @@
 import { InputHTMLAttributes } from 'react';
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/**
+ * A checkbox `<input>`. Pair with a <Label> for a clickable target.
+ *
+ * @example
+ * <Checkbox id="terms" defaultChecked />
+ */
 export declare function Checkbox({ className, ...props }: CheckboxProps): import("react").JSX.Element;

package/lib/dialog.d.ts

@@ -1,15 +1,27 @@
-import { ButtonHTMLAttributes, DialogHTMLAttributes, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, DialogHTMLAttributes, ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
 /**
  * Native <dialog>. Open via invoker command (`command="show-modal"`) or
  * `.showModal()`. Add `closedby="any"` for light-dismiss.
+ *
+ * @example
+ * <button commandfor="d" command="show-modal">Open</button>
+ * <Dialog id="d" closedby="any">
+ *   <DialogHeader><DialogTitle>Confirm</DialogTitle></DialogHeader>
+ *   <DialogFooter><DialogClose command="close" commandfor="d">Cancel</DialogClose></DialogFooter>
+ * </Dialog>
  */
 export declare function Dialog({ className, ...props }: DialogHTMLAttributes<HTMLDialogElement>): import("react").JSX.Element;
-export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function DialogTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
-export declare function DialogDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
-export declare function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+export type DialogHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function DialogHeader<T extends ElementType = 'div'>({ as, className, ...props }: DialogHeaderProps<T>): import("react").JSX.Element;
+export type DialogTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
+export declare function DialogTitle<T extends ElementType = 'h3'>({ as, className, ...props }: DialogTitleProps<T>): import("react").JSX.Element;
+export type DialogDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
+export declare function DialogDescription<T extends ElementType = 'p'>({ as, className, ...props }: DialogDescriptionProps<T>): import("react").JSX.Element;
+export type DialogBodyProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function DialogBody<T extends ElementType = 'div'>({ as, className, ...props }: DialogBodyProps<T>): import("react").JSX.Element;
+export type DialogFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-direction'?: 'column';
-}
-export declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
+}>;
+export declare function DialogFooter<T extends ElementType = 'div'>({ as, className, ...props }: DialogFooterProps<T>): import("react").JSX.Element;
 export declare function DialogClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;

package/lib/dropdown-menu.d.ts

@@ -1,38 +1,60 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
-/** Wrapper carrying the anchor. Nest the trigger button + content inside. */
-export declare function DropdownMenu({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+import { ButtonHTMLAttributes, ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+/**
+ * Wrapper carrying the anchor. Nest the trigger button + content inside.
+ *
+ * @example
+ * <DropdownMenu>
+ *   <Button commandfor="m" command="toggle-popover">Open</Button>
+ *   <DropdownMenuContent id="m" popover role="menu">
+ *     <DropdownMenuItem>Profile</DropdownMenuItem>
+ *     <DropdownMenuItem data-variant="destructive">Sign out</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ */
+export type DropdownMenuProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+export declare function DropdownMenu<T extends ElementType = 'span'>({ as, className, ...props }: DropdownMenuProps<T>): import("react").JSX.Element;
 /**
  * The floating menu panel. Give it `popover`, an `id` matched by the trigger's
  * `commandfor`, and `role="menu"`. When nested inside a <DropdownMenuSub> it is
  * automatically styled as a submenu panel (no extra attribute needed).
  */
-export type DropdownMenuContentProps = HTMLAttributes<HTMLDivElement>;
-export declare function DropdownMenuContent({ className, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+export type DropdownMenuContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function DropdownMenuContent<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuContentProps<T>): import("react").JSX.Element;
 /** A semantic wrapper for a set of related items/labels. */
-export declare function DropdownMenuGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export type DropdownMenuGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function DropdownMenuGroup<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuGroupProps<T>): import("react").JSX.Element;
 /** A non-interactive section heading. */
-export interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+export type DropdownMenuLabelProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-inset'?: boolean;
-}
-export declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+}>;
+export declare function DropdownMenuLabel<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuLabelProps<T>): import("react").JSX.Element;
 /** An interactive menu row. Renders a <button> by default. */
 export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     'data-variant'?: 'destructive';
     '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 declare function DropdownMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+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;
 /** A horizontal divider between item groups. */
-export declare function DropdownMenuSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export type DropdownMenuSeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function DropdownMenuSeparator<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuSeparatorProps<T>): import("react").JSX.Element;
 /** Submenu wrapper (display: contents). Nest a sub-trigger + a sub-content. */
-export declare function DropdownMenuSub({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export type DropdownMenuSubProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function DropdownMenuSub<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuSubProps<T>): import("react").JSX.Element;
 /**
  * Opens a submenu. Use `popoverTarget` (+ `popoverTargetAction="toggle"`)
  * pointing at the sub-content id — NOT command/commandfor, which would
@@ -46,4 +68,4 @@ export declare function DropdownMenuSubTrigger({ className, type, ...props }: Dr
  * The submenu panel. It's a DropdownMenuContent nested inside a DropdownMenuSub;
  * the child-combinator CSS picks it up as a submenu — no extra attribute needed.
  */
-export declare function DropdownMenuSubContent({ className, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+export declare function DropdownMenuSubContent<T extends ElementType = 'div'>({ as, className, ...props }: DropdownMenuContentProps<T>): import("react").JSX.Element;

package/lib/hover-card.d.ts

@@ -1,7 +1,16 @@
-import { HTMLAttributes } from 'react';
-export type HoverCardProps = HTMLAttributes<HTMLSpanElement>;
-/** Wrapper carrying the anchor. Nest the trigger + content inside. */
-export declare function HoverCard({ className, ...props }: HoverCardProps): import("react").JSX.Element;
-export type HoverCardContentProps = HTMLAttributes<HTMLDivElement>;
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type HoverCardProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+/**
+ * Wrapper carrying the anchor. Nest the trigger + content inside.
+ *
+ * @example
+ * <HoverCard>
+ *   <a href="/user/ada" interestfor="hc">@ada</a>
+ *   <HoverCardContent id="hc" popover="hint">Ada Lovelace — 1815</HoverCardContent>
+ * </HoverCard>
+ */
+export declare function HoverCard<T extends ElementType = 'span'>({ as, className, ...props }: HoverCardProps<T>): import("react").JSX.Element;
+export type HoverCardContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /** The floating card. Give it `popover="hint"` and an `id` matched by the trigger's `interestfor`. */
-export declare function HoverCardContent({ className, ...props }: HoverCardContentProps): import("react").JSX.Element;
+export declare function HoverCardContent<T extends ElementType = 'div'>({ as, className, ...props }: HoverCardContentProps<T>): import("react").JSX.Element;