sheerly 0.0.1 → 0.0.3

package/lib/input.css

@@ -1 +1 @@
-.sheerly-input{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);width:100%;min-width:0;color:var(--sheerly-foreground);background-color:#0000;outline:none;height:32px;padding:0 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s}.sheerly-input::placeholder{color:var(--sheerly-muted-foreground)}.sheerly-input:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-input:disabled{pointer-events:none;cursor:not-allowed;opacity:.5;background-color:oklch(from var(--sheerly-input) l c h / 50%)}.sheerly-input[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-input::file-selector-button{height:24px;color:var(--sheerly-foreground);background-color:#0000;border:0;margin-right:8px;font-size:14px;font-weight:500;display:inline-flex}.sheerly-input[data-size=sm]{height:28px;font-size:13px}.sheerly-input[data-size=lg]{height:36px}
+.sheerly-input{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);box-sizing:border-box;width:100%;min-width:0;color:var(--sheerly-foreground);background-color:#0000;outline:none;height:32px;padding:0 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s}.sheerly-input::placeholder{color:var(--sheerly-muted-foreground)}.sheerly-input:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-input:disabled{pointer-events:none;cursor:not-allowed;opacity:.5;background-color:oklch(from var(--sheerly-input) l c h / 50%)}.sheerly-input[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-input::file-selector-button{height:24px;color:var(--sheerly-foreground);background-color:#0000;border:0;margin-right:8px;font-size:14px;font-weight:500;display:inline-flex}.sheerly-input[data-size=sm]{height:28px;font-size:13px}.sheerly-input[data-size=lg]{height:36px}

package/lib/input.d.ts

@@ -2,4 +2,10 @@ import { InputHTMLAttributes } from 'react';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     'data-size'?: 'xs' | 'sm' | 'default' | 'lg';
 }
+/**
+ * A text input. Set `aria-invalid` for the error ring; `data-size` for height.
+ *
+ * @example
+ * <Input type="email" placeholder="you@example.com" />
+ */
 export declare function Input({ className, ...props }: InputProps): import("react").JSX.Element;

package/lib/kbd.d.ts

@@ -1,5 +1,12 @@
-import { HTMLAttributes } from 'react';
+import { ElementType, HTMLAttributes } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
 export type KbdProps = HTMLAttributes<HTMLElement>;
+/**
+ * A keyboard key hint. Wrap several in a <KbdGroup> for combos.
+ *
+ * @example
+ * <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
+ */
 export declare function Kbd({ className, ...props }: KbdProps): import("react").JSX.Element;
-export type KbdGroupProps = HTMLAttributes<HTMLElement>;
-export declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react").JSX.Element;
+export type KbdGroupProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+export declare function KbdGroup<T extends ElementType = 'span'>({ as, className, ...props }: KbdGroupProps<T>): import("react").JSX.Element;

package/lib/label.css

@@ -1 +1 @@
-.sheerly-label{color:var(--sheerly-foreground);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;display:flex}.sheerly-label[data-disabled=true]{color:var(--sheerly-muted-foreground);pointer-events:none}
+.sheerly-label{color:var(--sheerly-foreground);-webkit-user-select:none;user-select:none;cursor:pointer;align-items:center;gap:8px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;display:flex}.sheerly-label[data-disabled=true]{color:var(--sheerly-muted-foreground);pointer-events:none}

package/lib/label.d.ts

@@ -2,4 +2,10 @@ import { LabelHTMLAttributes } from 'react';
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     'data-disabled'?: 'true';
 }
+/**
+ * A form label. Set `data-disabled="true"` to mute it.
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ */
 export declare function Label({ className, ...props }: LabelProps): import("react").JSX.Element;

package/lib/pagination.d.ts

@@ -1,17 +1,56 @@
-import { AnchorHTMLAttributes, HTMLAttributes } from 'react';
-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> {
+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>
+ *     <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
+ *     <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
+ *     <PaginationItem><PaginationNext href="#" /></PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ */
+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 & {
+}>;
+/**
+ * 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;
-export declare function PaginationNext({ className, text, children, ...props }: PaginationLinkProps & {
-    text?: string;
-}): import("react").JSX.Element;
-export declare function PaginationEllipsis({ className, ...props }: HTMLAttributes<HTMLSpanElement>): 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/popover.d.ts

@@ -1,7 +1,16 @@
-import { HTMLAttributes } from 'react';
-export type PopoverProps = HTMLAttributes<HTMLSpanElement>;
-/** Wrapper carrying the anchor. Nest the trigger button + content inside. */
-export declare function Popover({ className, ...props }: PopoverProps): import("react").JSX.Element;
-export type PopoverContentProps = HTMLAttributes<HTMLDivElement>;
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type PopoverProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+/**
+ * Wrapper carrying the anchor. Nest the trigger button + content inside.
+ *
+ * @example
+ * <Popover>
+ *   <Button commandfor="p" command="toggle-popover">Open</Button>
+ *   <PopoverContent id="p" popover>Place content here.</PopoverContent>
+ * </Popover>
+ */
+export declare function Popover<T extends ElementType = 'span'>({ as, className, ...props }: PopoverProps<T>): import("react").JSX.Element;
+export type PopoverContentProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /** The floating panel. Give it `popover` and an `id` matched by the trigger's `commandfor`. */
-export declare function PopoverContent({ className, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare function PopoverContent<T extends ElementType = 'div'>({ as, className, ...props }: PopoverContentProps<T>): import("react").JSX.Element;

package/lib/progress.d.ts

@@ -3,4 +3,10 @@ export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElemen
     'data-variant'?: 'default' | 'blue' | 'green' | 'success' | 'red' | 'error' | 'amber' | 'warning';
     'data-size'?: 'sm' | 'default' | 'lg';
 }
+/**
+ * A determinate progress bar. Set `value` (and `max`, default 1).
+ *
+ * @example
+ * <Progress value={60} max={100} data-variant="success" />
+ */
 export declare function Progress({ className, ...props }: ProgressProps): import("react").JSX.Element;

package/lib/radio.d.ts

@@ -1,5 +1,15 @@
-import { HTMLAttributes, InputHTMLAttributes } from 'react';
-export type RadioGroupProps = HTMLAttributes<HTMLDivElement>;
-export declare function RadioGroup({ className, ...props }: RadioGroupProps): import("react").JSX.Element;
+import { ElementType, InputHTMLAttributes } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type RadioGroupProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function RadioGroup<T extends ElementType = 'div'>({ as, className, ...props }: RadioGroupProps<T>): import("react").JSX.Element;
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/**
+ * A radio `<input>`. Share a `name` and wrap options in a <RadioGroup>.
+ *
+ * @example
+ * <RadioGroup>
+ *   <Label><Radio name="plan" value="free" defaultChecked /> Free</Label>
+ *   <Label><Radio name="plan" value="pro" /> Pro</Label>
+ * </RadioGroup>
+ */
 export declare function Radio({ className, ...props }: RadioProps): import("react").JSX.Element;

package/lib/scrollbar.css

@@ -0,0 +1 @@
+.sheerly-scrollbar{scrollbar-width:thin;scrollbar-color:oklch(from var(--sheerly-foreground) l c h / 20%) transparent}.sheerly-scrollbar::-webkit-scrollbar{width:8px;height:8px}.sheerly-scrollbar::-webkit-scrollbar-track{background:0 0}.sheerly-scrollbar::-webkit-scrollbar-thumb{border-radius:var(--sheerly-radius-full);background-clip:padding-box;background-color:oklch(from var(--sheerly-foreground) l c h / 20%);border:2px solid #0000}.sheerly-scrollbar::-webkit-scrollbar-thumb:hover{background-color:oklch(from var(--sheerly-foreground) l c h / 35%)}.sheerly-scrollbar::-webkit-scrollbar-corner{background:0 0}.sheerly-scrollbar[data-orientation=vertical]{overflow:hidden auto}.sheerly-scrollbar[data-orientation=horizontal]{overflow:auto hidden}

package/lib/scrollbar.d.ts

@@ -0,0 +1,17 @@
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type ScrollbarProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
+    'data-orientation'?: 'vertical' | 'horizontal';
+}>;
+/**
+ * A scroll container with a thin, theme-tinted scrollbar (matching the select
+ * picker). Set the element's own size + overflow inline, or use
+ * `data-orientation` to have the matching overflow applied for you.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Scrollbar data-orientation="vertical" style={{ maxHeight: 200 }}>…</Scrollbar>
+ * <Scrollbar style={{ maxHeight: 200, overflowY: 'auto' }}>…</Scrollbar>
+ */
+export declare function Scrollbar<T extends ElementType = 'div'>({ as, className, ...props }: ScrollbarProps<T>): import("react").JSX.Element;

package/lib/select.css

@@ -1 +1 @@
-.sheerly-select{appearance:base-select}.sheerly-select::picker(select){appearance:base-select}.sheerly-select{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);white-space:nowrap;width:fit-content;color:var(--sheerly-foreground);cursor:pointer;background-color:#0000;outline:none;align-items:center;gap:8px;height:32px;padding:0 12px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s;display:inline-flex}.sheerly-select:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-select:disabled{pointer-events:none;opacity:.5}.sheerly-select[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-select:invalid,.sheerly-select[data-placeholder]{color:var(--sheerly-muted-foreground)}.sheerly-select[data-size=sm]{height:32px}.sheerly-select[data-size=lg]{height:40px;font-size:16px}.sheerly-select::picker-icon{width:16px;height:16px;color:var(--sheerly-muted-foreground);content:"";background-color:currentColor;transition:rotate .2s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-select:open::picker-icon{rotate:180deg}.sheerly-select selectedcontent{align-items:center;gap:8px;display:flex}.sheerly-select option[value=""]{color:var(--sheerly-muted-foreground)}.sheerly-select::picker(select){border:1px solid var(--sheerly-border);border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);opacity:0;max-height:256px;transition:all .2s allow-discrete;padding:4px;overflow-y:auto;box-shadow:0 4px 16px -4px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.04)}.sheerly-select:open::picker(select){opacity:1}@starting-style{.sheerly-select:open::picker(select){opacity:0}}.sheerly-select option{border-radius:var(--sheerly-radius-md);cursor:default;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:6px 8px;font-size:14px;line-height:20px;transition:background-color .1s;display:flex}.sheerly-select option:hover,.sheerly-select option:focus{background-color:var(--sheerly-accent)}.sheerly-select option:checked{font-weight:500}.sheerly-select option:disabled{color:var(--sheerly-muted-foreground);pointer-events:none}.sheerly-select option::checkmark{color:var(--sheerly-foreground);order:1;margin-left:auto}.sheerly-select optgroup{padding:4px 0}.sheerly-select optgroup legend{color:var(--sheerly-muted-foreground);padding:4px 8px;font-size:12px;font-weight:500;line-height:16px}.sheerly-select optgroup+optgroup{border-top:1px solid var(--sheerly-border);margin-top:4px;padding-top:4px}
+.sheerly-select{appearance:base-select}.sheerly-select::picker(select){appearance:base-select}.sheerly-select{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);box-sizing:border-box;white-space:nowrap;width:fit-content;color:var(--sheerly-foreground);cursor:pointer;background-color:#0000;outline:none;align-items:center;gap:8px;height:32px;padding:0 12px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px;transition:border-color .15s,box-shadow .15s;display:inline-flex}.sheerly-select:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-select:disabled{pointer-events:none;opacity:.5}.sheerly-select[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-select:invalid,.sheerly-select[data-placeholder]{color:var(--sheerly-muted-foreground)}.sheerly-select[data-size=sm]{height:32px}.sheerly-select[data-size=lg]{height:40px;font-size:16px}.sheerly-select::picker-icon{width:16px;height:16px;color:var(--sheerly-muted-foreground);content:"";background-color:currentColor;transition:rotate .2s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-select:open::picker-icon{rotate:180deg}.sheerly-select selectedcontent{align-items:center;gap:8px;display:flex}.sheerly-select option[value=""]{color:var(--sheerly-muted-foreground)}.sheerly-select::picker(select){border:1px solid var(--sheerly-border);border-radius:var(--sheerly-radius-xl);background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);opacity:0;max-height:256px;transition:all .2s allow-discrete;scrollbar-width:thin;scrollbar-color:oklch(from var(--sheerly-foreground) l c h / 20%) transparent;padding:4px;overflow-y:auto;box-shadow:0 4px 16px -4px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.04)}.sheerly-select::picker(select)::-webkit-scrollbar{width:8px}.sheerly-select::picker(select)::-webkit-scrollbar-track{background:0 0}.sheerly-select::picker(select)::-webkit-scrollbar-thumb{border-radius:var(--sheerly-radius-full);background-clip:padding-box;background-color:oklch(from var(--sheerly-foreground) l c h / 20%);border:2px solid #0000}.sheerly-select::picker(select)::-webkit-scrollbar-thumb:hover{background-color:oklch(from var(--sheerly-foreground) l c h / 35%)}.sheerly-select:open::picker(select){opacity:1}@starting-style{.sheerly-select:open::picker(select){opacity:0}}.sheerly-select option{border-radius:var(--sheerly-radius-md);cursor:default;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:6px 8px;font-size:14px;line-height:20px;transition:background-color .1s;display:flex}.sheerly-select option:hover,.sheerly-select option:focus{background-color:var(--sheerly-accent)}.sheerly-select option:checked{font-weight:500}.sheerly-select option:disabled{color:var(--sheerly-muted-foreground);pointer-events:none}.sheerly-select option::checkmark{color:var(--sheerly-foreground);order:1;margin-left:auto}.sheerly-select optgroup{padding:4px 0}.sheerly-select optgroup legend{color:var(--sheerly-muted-foreground);padding:4px 8px;font-size:12px;font-weight:500;line-height:16px}.sheerly-select optgroup+optgroup{border-top:1px solid var(--sheerly-border);margin-top:4px;padding-top:4px}

package/lib/select.d.ts

@@ -6,5 +6,11 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  * Uses the customizable-select API. Requires
  * `<button><selectedcontent></selectedcontent></button>` as the first child,
  * which this wrapper injects before the consumer's <option>s.
+ *
+ * @example
+ * <Select defaultValue="apple">
+ *   <option value="apple">Apple</option>
+ *   <option value="banana">Banana</option>
+ * </Select>
  */
 export declare function Select({ className, children, ...props }: SelectProps): import("react").JSX.Element;

package/lib/separator.d.ts

@@ -1,5 +1,15 @@
-import { HTMLAttributes } from 'react';
-export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type SeparatorProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-orientation'?: 'horizontal' | 'vertical';
-}
-export declare function Separator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
+}>;
+/**
+ * A divider line. Set `data-orientation="vertical"` for a vertical rule.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`, e.g.
+ * `as="hr"`).
+ *
+ * @example
+ * <Separator />
+ */
+export declare function Separator<T extends ElementType = 'div'>({ as, className, ...props }: SeparatorProps<T>): import("react").JSX.Element;

package/lib/sheet.d.ts

@@ -1,4 +1,5 @@
-import { ButtonHTMLAttributes, DialogHTMLAttributes, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, DialogHTMLAttributes, ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
 export interface SheetProps extends DialogHTMLAttributes<HTMLDialogElement> {
     'data-side'?: 'right' | 'left' | 'top' | 'bottom';
 }
@@ -6,11 +7,23 @@ export interface SheetProps extends DialogHTMLAttributes<HTMLDialogElement> {
  * Native <dialog> that slides in from an edge. Open via invoker command
  * (`command="show-modal"`) or `.showModal()`. Add `closedby="any"` for
  * light-dismiss.
+ *
+ * @example
+ * <button commandfor="s" command="show-modal">Open</button>
+ * <Sheet id="s" data-side="right" closedby="any">
+ *   <SheetHeader><SheetTitle>Filters</SheetTitle></SheetHeader>
+ *   <SheetBody>…</SheetBody>
+ * </Sheet>
  */
 export declare function Sheet({ className, ...props }: SheetProps): import("react").JSX.Element;
-export declare function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function SheetTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
-export declare function SheetDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
-export declare function SheetBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function SheetFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export type SheetHeaderProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function SheetHeader<T extends ElementType = 'div'>({ as, className, ...props }: SheetHeaderProps<T>): import("react").JSX.Element;
+export type SheetTitleProps<T extends ElementType = 'h3'> = PolymorphicProps<T>;
+export declare function SheetTitle<T extends ElementType = 'h3'>({ as, className, ...props }: SheetTitleProps<T>): import("react").JSX.Element;
+export type SheetDescriptionProps<T extends ElementType = 'p'> = PolymorphicProps<T>;
+export declare function SheetDescription<T extends ElementType = 'p'>({ as, className, ...props }: SheetDescriptionProps<T>): import("react").JSX.Element;
+export type SheetBodyProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function SheetBody<T extends ElementType = 'div'>({ as, className, ...props }: SheetBodyProps<T>): import("react").JSX.Element;
+export type SheetFooterProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function SheetFooter<T extends ElementType = 'div'>({ as, className, ...props }: SheetFooterProps<T>): import("react").JSX.Element;
 export declare function SheetClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;

package/lib/skeleton.d.ts

@@ -1,3 +1,12 @@
-import { HTMLAttributes } from 'react';
-export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
-export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type SkeletonProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+/**
+ * A pulsing placeholder. Set width/height/border-radius inline.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Skeleton style={{ width: 200, height: 20, borderRadius: 6 }} />
+ */
+export declare function Skeleton<T extends ElementType = 'div'>({ as, className, ...props }: SkeletonProps<T>): import("react").JSX.Element;

package/lib/slider.d.ts

@@ -1,3 +1,9 @@
 import { InputHTMLAttributes } from 'react';
 export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+/**
+ * A range `<input>`. Set `min` / `max` / `step` / `value`.
+ *
+ * @example
+ * <Slider min={0} max={100} defaultValue={50} />
+ */
 export declare function Slider({ className, ...props }: SliderProps): import("react").JSX.Element;

package/lib/spinner.d.ts

@@ -1,10 +1,16 @@
-import { HTMLAttributes } from 'react';
-export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type SpinnerProps<T extends ElementType = 'span'> = PolymorphicProps<T, {
     'data-size'?: 'sm' | 'default' | 'md' | 'lg';
-}
+}>;
 /**
  * Loading spinner. The glyph is embedded in CSS (masked ::before), so no SVG
  * child is needed — this renders a bare <span>. It inherits the current text
  * color. Pass an <svg> child if you prefer to ship your own icon.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `span`).
+ *
+ * @example
+ * <Spinner data-size="lg" />
  */
-export declare function Spinner({ className, children, ...props }: SpinnerProps): import("react").JSX.Element;
+export declare function Spinner<T extends ElementType = 'span'>({ as, className, children, ...props }: SpinnerProps<T>): import("react").JSX.Element;

package/lib/switch.d.ts

@@ -2,4 +2,10 @@ import { InputHTMLAttributes } from 'react';
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
     'data-size'?: 'default' | 'sm';
 }
+/**
+ * A toggle switch (checkbox with `role="switch"`).
+ *
+ * @example
+ * <Switch defaultChecked />
+ */
 export declare function Switch({ className, ...props }: SwitchProps): import("react").JSX.Element;

package/lib/table.css

@@ -1 +1 @@
-.sheerly-table-container{width:100%;position:relative;overflow-x:auto}.sheerly-table{caption-side:bottom;border-collapse:collapse;width:100%;color:var(--sheerly-foreground);font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;line-height:20px}.sheerly-table caption{color:var(--sheerly-muted-foreground);margin-top:16px;font-size:14px;line-height:20px}.sheerly-table thead tr{border-bottom:1px solid var(--sheerly-border)}.sheerly-table th{text-align:left;vertical-align:middle;white-space:nowrap;height:40px;color:var(--sheerly-foreground);padding:0 8px;font-weight:500}.sheerly-table tbody tr{border-bottom:1px solid var(--sheerly-border);transition:background-color .1s}.sheerly-table tbody tr:last-child{border-bottom:none}.sheerly-table tbody tr:hover{background-color:var(--sheerly-accent)}.sheerly-table tbody tr[data-state=selected]{background-color:var(--sheerly-muted)}.sheerly-table td{vertical-align:middle;white-space:nowrap;padding:8px}.sheerly-table tfoot{border-top:1px solid var(--sheerly-border);background-color:var(--sheerly-accent);font-weight:500}.sheerly-table tfoot tr:last-child{border-bottom:none}.sheerly-table tfoot td,.sheerly-table tfoot th{vertical-align:middle;padding:8px}
+.sheerly-table-container{width:100%;overflow-x:auto}.sheerly-table{caption-side:bottom;border-collapse:collapse;width:100%;color:var(--sheerly-foreground);font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;line-height:20px}.sheerly-table caption{color:var(--sheerly-muted-foreground);margin-top:16px;font-size:14px;line-height:20px}.sheerly-table thead tr{border-bottom:1px solid var(--sheerly-border)}.sheerly-table th{text-align:left;vertical-align:middle;white-space:nowrap;height:40px;color:var(--sheerly-foreground);padding:0 8px;font-weight:500}.sheerly-table tbody tr{border-bottom:1px solid var(--sheerly-border);transition:background-color .1s}.sheerly-table tbody tr:last-child{border-bottom:none}.sheerly-table tbody tr:hover{background-color:var(--sheerly-accent)}.sheerly-table tbody tr[data-state=selected]{background-color:var(--sheerly-muted)}.sheerly-table td{vertical-align:middle;white-space:nowrap;padding:8px}.sheerly-table tfoot{border-top:1px solid var(--sheerly-border);background-color:var(--sheerly-accent);font-weight:500}.sheerly-table tfoot tr:last-child{border-bottom:none}.sheerly-table tfoot td,.sheerly-table tfoot th{vertical-align:middle;padding:8px}

package/lib/table.d.ts

@@ -1,5 +1,16 @@
-import { HTMLAttributes, TableHTMLAttributes } from 'react';
-export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
-export declare function TableContainer({ className, ...props }: TableContainerProps): import("react").JSX.Element;
+import { ElementType, TableHTMLAttributes } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type TableContainerProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+export declare function TableContainer<T extends ElementType = 'div'>({ as, className, ...props }: TableContainerProps<T>): import("react").JSX.Element;
 export type TableProps = TableHTMLAttributes<HTMLTableElement>;
+/**
+ * A data table. Use semantic HTML inside (no classes on inner elements); wrap
+ * in a <TableContainer> for horizontal overflow scroll.
+ *
+ * @example
+ * <Table>
+ *   <thead><tr><th>Name</th></tr></thead>
+ *   <tbody><tr><td>Ada</td></tr></tbody>
+ * </Table>
+ */
 export declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;

package/lib/tabs.d.ts

@@ -1,13 +1,39 @@
-import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
-export type TabsProps = HTMLAttributes<HTMLDivElement>;
-export declare function Tabs({ className, ...props }: TabsProps): import("react").JSX.Element;
-export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type TabsProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
+/**
+ * A tabbed interface. Compose a <TabsList> of <TabsTrigger>s with matching
+ * <TabsContent> panels (hide inactive panels with `hidden`).
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Tabs>
+ *   <TabsList>
+ *     <TabsTrigger aria-selected>Account</TabsTrigger>
+ *     <TabsTrigger>Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent>…</TabsContent>
+ *   <TabsContent hidden>…</TabsContent>
+ * </Tabs>
+ */
+export declare function Tabs<T extends ElementType = 'div'>({ as, className, ...props }: TabsProps<T>): import("react").JSX.Element;
+export type TabsListProps<T extends ElementType = 'div'> = PolymorphicProps<T, {
     'data-variant'?: 'line';
-}
-export declare function TabsList({ className, role, ...props }: TabsListProps): import("react").JSX.Element;
-export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}>;
+/**
+ * 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 type TabsTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<T, {
     'data-state'?: 'active';
-}
-export declare function TabsTrigger({ className, role, ...props }: TabsTriggerProps): import("react").JSX.Element;
-export type TabsContentProps = HTMLAttributes<HTMLDivElement>;
-export declare function TabsContent({ className, role, ...props }: TabsContentProps): 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`).
+ */
+export declare function TabsContent<T extends ElementType = 'div'>({ as, className, ...props }: TabsContentProps<T>): import("react").JSX.Element;

package/lib/textarea.d.ts

@@ -1,3 +1,9 @@
 import { TextareaHTMLAttributes } from 'react';
 export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/**
+ * A multiline text field. Auto-grows with content (`field-sizing: content`).
+ *
+ * @example
+ * <Textarea placeholder="Type your message…" />
+ */
 export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;

package/lib/toggle.d.ts

@@ -13,4 +13,11 @@ export interface ToggleProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>,
     value?: string;
     children?: ReactNode;
 }
+/**
+ * A two-state toggle button. Works uncontrolled (no JS) or controlled via
+ * `pressed` / `onPressedChange`.
+ *
+ * @example
+ * <Toggle defaultPressed data-variant="outline">Bold</Toggle>
+ */
 export declare function Toggle({ className, pressed, defaultPressed, onPressedChange, disabled, name, value, children, ...props }: ToggleProps): import("react").JSX.Element;

package/lib/tooltip.d.ts

@@ -1,7 +1,16 @@
-import { HTMLAttributes } from 'react';
-export type TooltipProps = HTMLAttributes<HTMLSpanElement>;
-/** Wrapper carrying the anchor. Nest the trigger + content inside. */
-export declare function Tooltip({ className, ...props }: TooltipProps): import("react").JSX.Element;
-export type TooltipContentProps = HTMLAttributes<HTMLSpanElement>;
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type TooltipProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
+/**
+ * Wrapper carrying the anchor. Nest the trigger + content inside.
+ *
+ * @example
+ * <Tooltip>
+ *   <Button interestfor="tt">Hover me</Button>
+ *   <TooltipContent id="tt" popover="hint">More info</TooltipContent>
+ * </Tooltip>
+ */
+export declare function Tooltip<T extends ElementType = 'span'>({ as, className, ...props }: TooltipProps<T>): import("react").JSX.Element;
+export type TooltipContentProps<T extends ElementType = 'span'> = PolymorphicProps<T>;
 /** The floating label. Give it `popover="hint"` and an `id` matched by the trigger's `interestfor`. */
-export declare function TooltipContent({ className, ...props }: TooltipContentProps): import("react").JSX.Element;
+export declare function TooltipContent<T extends ElementType = 'span'>({ as, className, ...props }: TooltipContentProps<T>): import("react").JSX.Element;

package/lib/typography.d.ts

@@ -1,9 +1,17 @@
-import { HTMLAttributes } from 'react';
-export interface TypographyProps extends HTMLAttributes<HTMLDivElement> {
-}
+import { ElementType } from 'react';
+import { PolymorphicProps } from './utils/polymorphic';
+export type TypographyProps<T extends ElementType = 'div'> = PolymorphicProps<T>;
 /**
  * A prose wrapper. Unlike shadcn (per-element utility classes), Sheerly styles
  * every child element (h1–h4, p, a, blockquote, ul/ol, li, code, table, …) via
  * one `.sheerly-typography` class — just render semantic HTML inside it.
+ *
+ * Polymorphic: pass `as` to change the rendered tag (defaults to `div`).
+ *
+ * @example
+ * <Typography as="article">
+ *   <h1>Title</h1>
+ *   <p>Some <a href="#">prose</a> with a <code>token</code>.</p>
+ * </Typography>
  */
-export declare function Typography({ className, ...props }: TypographyProps): import("react").JSX.Element;
+export declare function Typography<T extends ElementType = 'div'>({ as, className, ...props }: TypographyProps<T>): import("react").JSX.Element;

package/lib/utils/polymorphic.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+/**
+ * Props for a polymorphic component: an optional `as` that swaps the rendered
+ * element, with the remaining props inferred from that element (so `href` is
+ * valid & checked when `as="a"`, etc.).
+ *
+ * `Extra` merges component-specific props (e.g. typed `data-*` unions) on top.
+ *
+ * No hooks, no `forwardRef` — matches Sheerly's thin, hookless wrapper style.
+ */
+export type PolymorphicProps<T extends ElementType, Extra = object> = {
+    /** The element or component to render. */
+    as?: T;
+} & Extra & Omit<ComponentPropsWithoutRef<T>, 'as' | keyof Extra>;

package/package.json

@@ -1,33 +1,34 @@
-{
-  "name": "sheerly",
-  "version": "0.0.1",
-  "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.2",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "nuqs": "^2.9.0",
-    "oxlint": "^1.73.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "tailwindcss": "^4.3.2",
-    "typescript": "^6.0.3",
-    "unplugin-dts": "^1.0.3",
-    "vite": "^8.1.4"
-  }
-}
+{
+  "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"
+  }
+}