sheerly 0.0.1

package/lib/pagination.d.ts

@@ -0,0 +1,17 @@
+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> {
+    /** 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 & {
+    text?: string;
+}): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;

package/lib/popover.css

@@ -0,0 +1 @@
+.sheerly-popover{anchor-name:--sheerly-pop;anchor-scope:--sheerly-pop;width:fit-content;display:inline-block}.sheerly-popover-content{position-anchor:--sheerly-pop;position-area:var(--sheerly-popover-position,block-end);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-popover);color:var(--sheerly-popover-foreground);border:1px solid var(--sheerly-border);border-radius:var(--sheerly-radius-md);opacity:0;width:max-content;max-width:288px;transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete;margin:6px;padding:16px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;line-height:20px;position:fixed;overflow:auto;box-shadow:0 4px 16px -4px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.04)}.sheerly-popover-content:popover-open{opacity:1}@starting-style{.sheerly-popover-content:popover-open{opacity:0}}

package/lib/popover.d.ts

@@ -0,0 +1,7 @@
+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>;
+/** 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;

package/lib/progress.css

@@ -0,0 +1 @@
+.sheerly-progress{appearance:none;border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-border);border:none;width:100%;height:8px;overflow:hidden}.sheerly-progress::-webkit-progress-bar{background-color:var(--sheerly-border);border-radius:var(--sheerly-radius-full)}.sheerly-progress::-webkit-progress-value{background-color:var(--sheerly-foreground);border-radius:var(--sheerly-radius-full);transition:width .3s}.sheerly-progress:indeterminate::-webkit-progress-bar{background-color:var(--sheerly-border)}.sheerly-progress[data-variant=blue]::-webkit-progress-value{background-color:oklch(54.6% .245 262.88)}:is(.sheerly-progress[data-variant=green],.sheerly-progress[data-variant=success])::-webkit-progress-value{background-color:oklch(52.7% .154 150.07)}:is(.sheerly-progress[data-variant=red],.sheerly-progress[data-variant=error])::-webkit-progress-value{background-color:var(--sheerly-destructive)}:is(.sheerly-progress[data-variant=amber],.sheerly-progress[data-variant=warning])::-webkit-progress-value{background-color:oklch(66.6% .179 58.32)}.sheerly-progress[data-size=sm]{height:4px}.sheerly-progress[data-size=lg]{height:12px}.dark .sheerly-progress{background-color:var(--sheerly-border)}.dark .sheerly-progress::-webkit-progress-bar{background-color:var(--sheerly-border)}

package/lib/progress.d.ts

@@ -0,0 +1,6 @@
+import { ProgressHTMLAttributes } from 'react';
+export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElement> {
+    'data-variant'?: 'default' | 'blue' | 'green' | 'success' | 'red' | 'error' | 'amber' | 'warning';
+    'data-size'?: 'sm' | 'default' | 'lg';
+}
+export declare function Progress({ className, ...props }: ProgressProps): import("react").JSX.Element;

package/lib/radio.css

@@ -0,0 +1 @@
+.sheerly-radio-group{gap:12px;display:grid}.sheerly-radio{border-radius:var(--sheerly-radius-full);border:1px solid var(--sheerly-input);background-color:var(--sheerly-background);cursor:pointer;appearance:none;outline:none;flex-shrink:0;place-content:center;width:16px;height:16px;transition:background-color .15s,border-color .15s;display:grid}.sheerly-radio:before{content:"";border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-background);width:6px;height:6px;transition:transform .1s;transform:scale(0)}.sheerly-radio:hover{border-color:var(--sheerly-border)}.sheerly-radio:checked,.sheerly-radio[data-state=checked]{background-color:var(--sheerly-foreground);border-color:var(--sheerly-foreground)}:is(.sheerly-radio:checked,.sheerly-radio[data-state=checked]):before{transform:scale(1)}.sheerly-radio:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-radio:disabled{background-color:var(--sheerly-muted);border-color:var(--sheerly-border);cursor:not-allowed;opacity:.5}.sheerly-radio[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}

package/lib/radio.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, InputHTMLAttributes } from 'react';
+export type RadioGroupProps = HTMLAttributes<HTMLDivElement>;
+export declare function RadioGroup({ className, ...props }: RadioGroupProps): import("react").JSX.Element;
+export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+export declare function Radio({ className, ...props }: RadioProps): import("react").JSX.Element;

package/lib/root.css

@@ -0,0 +1 @@
+:root{--sheerly-radius:.625rem;--sheerly-radius-sm:calc(var(--sheerly-radius) * .6);--sheerly-radius-md:calc(var(--sheerly-radius) * .8);--sheerly-radius-lg:var(--sheerly-radius);--sheerly-radius-xl:calc(var(--sheerly-radius) * 1.4);--sheerly-radius-2xl:calc(var(--sheerly-radius) * 1.8);--sheerly-background:oklch(100% 0 0);--sheerly-foreground:oklch(14.5% 0 0);--sheerly-card:oklch(100% 0 0);--sheerly-card-foreground:oklch(14.5% 0 0);--sheerly-popover:oklch(100% 0 0);--sheerly-popover-foreground:oklch(14.5% 0 0);--sheerly-primary:oklch(20.5% 0 0);--sheerly-primary-foreground:oklch(98.5% 0 0);--sheerly-secondary:oklch(97% 0 0);--sheerly-secondary-foreground:oklch(20.5% 0 0);--sheerly-muted:oklch(97% 0 0);--sheerly-muted-foreground:oklch(55.6% 0 0);--sheerly-accent:oklch(97% 0 0);--sheerly-accent-foreground:oklch(20.5% 0 0);--sheerly-destructive:oklch(57.7% .245 27.325);--sheerly-border:oklch(92.2% 0 0);--sheerly-input:oklch(92.2% 0 0);--sheerly-ring:oklch(70.8% 0 0);--sheerly-sidebar:oklch(98.5% 0 0);--sheerly-sidebar-foreground:oklch(14.5% 0 0);--sheerly-sidebar-primary:oklch(20.5% 0 0);--sheerly-sidebar-primary-foreground:oklch(98.5% 0 0);--sheerly-sidebar-accent:oklch(97% 0 0);--sheerly-sidebar-accent-foreground:oklch(20.5% 0 0);--sheerly-sidebar-border:oklch(92.2% 0 0);--sheerly-sidebar-ring:oklch(70.8% 0 0)}.dark{--sheerly-background:oklch(14.5% 0 0);--sheerly-foreground:oklch(98.5% 0 0);--sheerly-card:oklch(20.5% 0 0);--sheerly-card-foreground:oklch(98.5% 0 0);--sheerly-popover:oklch(20.5% 0 0);--sheerly-popover-foreground:oklch(98.5% 0 0);--sheerly-primary:oklch(92.2% 0 0);--sheerly-primary-foreground:oklch(20.5% 0 0);--sheerly-secondary:oklch(26.9% 0 0);--sheerly-secondary-foreground:oklch(98.5% 0 0);--sheerly-muted:oklch(26.9% 0 0);--sheerly-muted-foreground:oklch(70.8% 0 0);--sheerly-accent:oklch(26.9% 0 0);--sheerly-accent-foreground:oklch(98.5% 0 0);--sheerly-destructive:oklch(70.4% .191 22.216);--sheerly-border:oklch(100% 0 0/.1);--sheerly-input:oklch(100% 0 0/.15);--sheerly-ring:oklch(55.6% 0 0);--sheerly-sidebar:oklch(20.5% 0 0);--sheerly-sidebar-foreground:oklch(98.5% 0 0);--sheerly-sidebar-primary:oklch(48.8% .243 264.376);--sheerly-sidebar-primary-foreground:oklch(98.5% 0 0);--sheerly-sidebar-accent:oklch(26.9% 0 0);--sheerly-sidebar-accent-foreground:oklch(98.5% 0 0);--sheerly-sidebar-border:oklch(100% 0 0/.1);--sheerly-sidebar-ring:oklch(55.6% 0 0)}:root{--sheerly-radius-full:9999px;--sheerly-focus-ring:0 0 0 3px oklch(from var(--sheerly-ring) l c h / 50%)}

package/lib/select.css

@@ -0,0 +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}

package/lib/select.d.ts

@@ -0,0 +1,10 @@
+import { SelectHTMLAttributes } from 'react';
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    'data-size'?: 'sm' | 'default' | 'lg';
+}
+/**
+ * Uses the customizable-select API. Requires
+ * `<button><selectedcontent></selectedcontent></button>` as the first child,
+ * which this wrapper injects before the consumer's <option>s.
+ */
+export declare function Select({ className, children, ...props }: SelectProps): import("react").JSX.Element;

package/lib/separator.css

@@ -0,0 +1 @@
+.sheerly-separator{background-color:var(--sheerly-border);flex-shrink:0;width:100%;height:1px}.sheerly-separator[data-orientation=vertical]{width:1px;height:100%}

package/lib/separator.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    'data-orientation'?: 'horizontal' | 'vertical';
+}
+export declare function Separator({ className, ...props }: SeparatorProps): import("react").JSX.Element;

package/lib/sheet.css

@@ -0,0 +1 @@
+.sheerly-sheet{z-index:50;background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);opacity:0;max-width:100vw;max-height:100dvh;transition:translate .3s cubic-bezier(.32, .72, 0, 1), opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;border:none;outline:none;flex-direction:column;gap:16px;margin:0;padding:0;font-size:14px;line-height:20px;display:none;position:fixed;overflow:hidden}.sheerly-sheet[open]{opacity:1;display:flex}.sheerly-sheet::backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;transition:opacity .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;background-color:oklch(0% 0 0/.1)}.sheerly-sheet[open]::backdrop{opacity:1}@starting-style{.sheerly-sheet[open]::backdrop{opacity:0}}.sheerly-sheet{width:100%;max-width:384px;height:100dvh;inset:0 0 0 auto;translate:100%}.sheerly-sheet[open]{translate:0}@starting-style{.sheerly-sheet[open]{translate:100%}}.sheerly-sheet[data-side=left]{width:100%;max-width:384px;height:100dvh;inset:0 auto 0 0;translate:-100%}.sheerly-sheet[data-side=left][open]{translate:0}@starting-style{.sheerly-sheet[data-side=left][open]{translate:-100%}}.sheerly-sheet[data-side=top]{width:100%;max-width:none;height:auto;inset:0 0 auto;translate:0 -100%}.sheerly-sheet[data-side=top][open]{translate:0}@starting-style{.sheerly-sheet[data-side=top][open]{translate:0 -100%}}.sheerly-sheet[data-side=bottom]{width:100%;max-width:none;height:auto;inset:auto 0 0;translate:0 100%}.sheerly-sheet[data-side=bottom][open]{translate:0}@starting-style{.sheerly-sheet[data-side=bottom][open]{translate:0 100%}}.sheerly-sheet-header{flex-direction:column;flex-shrink:0;gap:4px;padding:16px;display:flex}.sheerly-sheet-title{color:var(--sheerly-foreground);margin:0;padding-right:32px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:16px;font-weight:500;line-height:1}.sheerly-sheet-description{color:var(--sheerly-muted-foreground);margin:0;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;line-height:20px}.sheerly-sheet-body{flex:1;padding:0 16px;overflow-y:auto}.sheerly-sheet-footer{flex-direction:column;flex-shrink:0;gap:8px;margin-top:auto;padding:16px;display:flex}.sheerly-sheet-footer>*{width:100%}.sheerly-sheet-close{border-radius:var(--sheerly-radius-md);width:28px;height:28px;color:var(--sheerly-muted-foreground);cursor:pointer;z-index:1;background-color:#0000;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;top:12px;right:16px}.sheerly-sheet-close:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-sheet-close:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-sheet-close svg{width:16px;height:16px}.sheerly-sheet-close:empty:before{content:"";background-color:currentColor;width:16px;height:16px;-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") 50%/contain no-repeat}

package/lib/sheet.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, DialogHTMLAttributes, HTMLAttributes } from 'react';
+export interface SheetProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    'data-side'?: 'right' | 'left' | 'top' | 'bottom';
+}
+/**
+ * Native <dialog> that slides in from an edge. Open via invoker command
+ * (`command="show-modal"`) or `.showModal()`. Add `closedby="any"` for
+ * light-dismiss.
+ */
+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 declare function SheetClose({ className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;

package/lib/skeleton.css

@@ -0,0 +1 @@
+.sheerly-skeleton{border-radius:var(--sheerly-radius-sm);background-color:var(--sheerly-muted);animation:2s cubic-bezier(.4,0,.6,1) infinite sheerly-pulse}@keyframes sheerly-pulse{0%,to{opacity:1}50%{opacity:.5}}

package/lib/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;

package/lib/slider.css

@@ -0,0 +1 @@
+.sheerly-slider{appearance:none;background-color:var(--sheerly-border);border-radius:var(--sheerly-radius-full);cursor:pointer;outline:none;width:100%;height:4px;margin:8px 0}.sheerly-slider::-webkit-slider-runnable-track{appearance:none;background-color:var(--sheerly-border);border-radius:var(--sheerly-radius-full);height:4px}.sheerly-slider::-webkit-slider-thumb{appearance:none;border:2px solid var(--sheerly-foreground);cursor:grab;background-color:#fff;border-radius:50%;width:16px;height:16px;margin-top:-6px;transition:transform .15s,box-shadow .15s;transform:scale(.85)}.sheerly-slider:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1)}.sheerly-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--sheerly-focus-ring);transform:scale(1)}.sheerly-slider:disabled{opacity:.5;cursor:not-allowed}.sheerly-slider:disabled::-webkit-slider-thumb{cursor:not-allowed;border-color:var(--sheerly-input)}.dark .sheerly-slider{background-color:var(--sheerly-border)}.dark .sheerly-slider::-webkit-slider-runnable-track{background-color:var(--sheerly-border)}.dark .sheerly-slider::-webkit-slider-thumb{background-color:var(--sheerly-foreground);border-color:var(--sheerly-foreground)}

package/lib/slider.d.ts

@@ -0,0 +1,3 @@
+import { InputHTMLAttributes } from 'react';
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+export declare function Slider({ className, ...props }: SliderProps): import("react").JSX.Element;

package/lib/spinner.css

@@ -0,0 +1 @@
+.sheerly-spinner{background-color:currentColor;flex-shrink:0;width:16px;height:16px;animation:1s linear infinite sheerly-spin;display:inline-block;-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") 50%/contain no-repeat}.sheerly-spinner[data-size=sm]{width:12px;height:12px}.sheerly-spinner[data-size=md]{width:20px;height:20px}.sheerly-spinner[data-size=lg]{width:24px;height:24px}@keyframes sheerly-spin{0%{rotate:0deg}to{rotate:360deg}}

package/lib/spinner.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    '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.
+ */
+export declare function Spinner({ className, children, ...props }: SpinnerProps): import("react").JSX.Element;

package/lib/switch.css

@@ -0,0 +1 @@
+.sheerly-switch{border-radius:var(--sheerly-radius-full);cursor:pointer;appearance:none;background-color:var(--sheerly-input);border:none;outline:none;flex-shrink:0;align-items:center;width:32px;height:18px;transition:background-color .15s;display:inline-flex;position:relative}.sheerly-switch:before{content:"";border-radius:var(--sheerly-radius-full);background-color:var(--sheerly-background);pointer-events:none;width:14px;height:14px;transition:transform .15s;display:block;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.sheerly-switch:hover{background-color:var(--sheerly-ring)}.sheerly-switch:checked,.sheerly-switch[data-state=checked]{background-color:var(--sheerly-foreground)}:is(.sheerly-switch:checked,.sheerly-switch[data-state=checked]):before{background-color:var(--sheerly-background);transform:translate(14px)translateY(-50%)}.sheerly-switch:focus-visible{box-shadow:var(--sheerly-focus-ring)}.sheerly-switch:disabled{background-color:var(--sheerly-muted);cursor:not-allowed}.sheerly-switch:disabled:before{background-color:var(--sheerly-input)}.sheerly-switch[data-size=sm]{width:24px;height:14px}.sheerly-switch[data-size=sm]:before{width:10px;height:10px}:is(.sheerly-switch[data-size=sm]:checked,.sheerly-switch[data-size=sm][data-state=checked]):before{transform:translate(10px)translateY(-50%)}

package/lib/switch.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {
+    'data-size'?: 'default' | 'sm';
+}
+export declare function Switch({ className, ...props }: SwitchProps): import("react").JSX.Element;

package/lib/table.css

@@ -0,0 +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}

package/lib/table.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, TableHTMLAttributes } from 'react';
+export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
+export declare function TableContainer({ className, ...props }: TableContainerProps): import("react").JSX.Element;
+export type TableProps = TableHTMLAttributes<HTMLTableElement>;
+export declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;

package/lib/tabs.css

@@ -0,0 +1 @@
+.sheerly-tabs{flex-direction:column;gap:8px;display:flex}.sheerly-tabs-list{background-color:var(--sheerly-muted);border-radius:8px;justify-content:center;align-items:center;width:fit-content;height:36px;padding:3px;display:inline-flex}.sheerly-tabs-list[data-variant=line]{border-bottom:1px solid var(--sheerly-border);background-color:#0000;border-radius:0;gap:4px;height:auto;padding:0}.sheerly-tabs-trigger{white-space:nowrap;color:var(--sheerly-muted-foreground);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;outline:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:4px 8px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;transition:color .15s,background-color .15s;display:inline-flex;position:relative}.sheerly-tabs-trigger:hover{color:var(--sheerly-foreground)}.sheerly-tabs-trigger:focus-visible{box-shadow:var(--sheerly-focus-ring)}.sheerly-tabs-trigger:disabled{pointer-events:none;opacity:.5}.sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-trigger[data-state=active]{background-color:var(--sheerly-background);color:var(--sheerly-foreground);box-shadow:0 1px 2px #0000000d}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger{box-shadow:none;border-radius:0;padding:8px 12px}.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]{box-shadow:none;background-color:#0000}:is(.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[aria-selected=true],.sheerly-tabs-list[data-variant=line] .sheerly-tabs-trigger[data-state=active]):after{content:"";background-color:var(--sheerly-foreground);height:2px;position:absolute;bottom:-1px;left:0;right:0}.sheerly-tabs-trigger svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.sheerly-tabs-content{outline:none;flex:1}.sheerly-tabs-content[hidden]{display:none}

package/lib/tabs.d.ts

@@ -0,0 +1,13 @@
+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> {
+    'data-variant'?: 'line';
+}
+export declare function TabsList({ className, role, ...props }: TabsListProps): import("react").JSX.Element;
+export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    '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;

package/lib/textarea.css

@@ -0,0 +1 @@
+.sheerly-textarea{border-radius:var(--sheerly-radius-lg);border:1px solid var(--sheerly-input);width:100%;min-height:64px;color:var(--sheerly-foreground);resize:vertical;field-sizing:content;background-color:#0000;outline:none;padding:6px 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;display:block}.sheerly-textarea::placeholder{color:var(--sheerly-muted-foreground)}.sheerly-textarea:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-textarea:disabled{cursor:not-allowed;opacity:.5}.sheerly-textarea[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}

package/lib/textarea.d.ts

@@ -0,0 +1,3 @@
+import { TextareaHTMLAttributes } from 'react';
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;

package/lib/toggle.css

@@ -0,0 +1 @@
+.sheerly-toggle{border-radius:var(--sheerly-radius-lg);white-space:nowrap;color:var(--sheerly-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:4px;min-width:32px;height:32px;padding:0 10px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;transition:all .15s;display:inline-flex}.sheerly-toggle>input[type=checkbox]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sheerly-toggle:hover{background-color:var(--sheerly-muted);color:var(--sheerly-foreground)}.sheerly-toggle:focus-visible{border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:has(>input:focus-visible){border-color:var(--sheerly-ring);box-shadow:var(--sheerly-focus-ring)}.sheerly-toggle:disabled{pointer-events:none;opacity:.5}.sheerly-toggle:has(>input:disabled){pointer-events:none;opacity:.5}.sheerly-toggle[aria-invalid=true]{border-color:var(--sheerly-destructive);box-shadow:0 0 0 3px oklch(from var(--sheerly-destructive) l c h / 20%)}.sheerly-toggle[aria-pressed=true],.sheerly-toggle[data-state=on]{background-color:var(--sheerly-muted)}.sheerly-toggle:has(>input:checked){background-color:var(--sheerly-muted)}.sheerly-toggle[data-variant=default]{background-color:#0000}.sheerly-toggle[data-variant=outline]{border-color:var(--sheerly-input);background-color:#0000}.sheerly-toggle[data-variant=outline]:hover{background-color:var(--sheerly-muted)}.sheerly-toggle[data-size=default]{min-width:32px;height:32px;padding:0 10px}.sheerly-toggle[data-size=sm]{border-radius:min(var(--sheerly-radius-md), 12px);min-width:28px;height:28px;padding:0 10px;font-size:12.8px}.sheerly-toggle[data-size=sm] svg{width:14px;height:14px}.sheerly-toggle[data-size=lg]{min-width:36px;height:36px;padding:0 10px}.sheerly-toggle:has([data-icon=inline-start]){padding-inline-start:8px}.sheerly-toggle:has([data-icon=inline-end]){padding-inline-end:8px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-start]){padding-inline-start:6px}.sheerly-toggle[data-size=sm]:has([data-icon=inline-end]){padding-inline-end:6px}.sheerly-toggle svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}

package/lib/toggle.d.ts

@@ -0,0 +1,16 @@
+import { LabelHTMLAttributes, ReactNode } from 'react';
+export interface ToggleProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'onChange'> {
+    'data-variant'?: 'default' | 'outline';
+    'data-size'?: 'sm' | 'default' | 'lg';
+    /** Controlled pressed state (drives the nested checkbox). */
+    pressed?: boolean;
+    /** Uncontrolled initial pressed state. */
+    defaultPressed?: boolean;
+    /** Fires with the next pressed state when toggled. */
+    onPressedChange?: (pressed: boolean) => void;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    children?: ReactNode;
+}
+export declare function Toggle({ className, pressed, defaultPressed, onPressedChange, disabled, name, value, children, ...props }: ToggleProps): import("react").JSX.Element;

package/lib/tooltip.css

@@ -0,0 +1 @@
+.sheerly-tooltip{anchor-name:--sheerly-tip;anchor-scope:--sheerly-tip;width:fit-content;display:inline-block}.sheerly-tooltip-content{position-anchor:--sheerly-tip;position-area:var(--sheerly-tooltip-position,block-start);position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;position-visibility:anchors-visible;inset:unset;background-color:var(--sheerly-foreground);color:var(--sheerly-background);text-align:center;white-space:normal;text-wrap:pretty;border-radius:var(--sheerly-radius-sm);pointer-events:none;opacity:0;max-width:200px;transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete;border:none;margin:6px;padding:4px 8px;font-family:Geist Sans,system-ui,-apple-system,sans-serif;font-size:12px;font-weight:400;line-height:16px;position:fixed;overflow:visible}.sheerly-tooltip-content:popover-open{opacity:1}@starting-style{.sheerly-tooltip-content:popover-open{opacity:0}}

package/lib/tooltip.d.ts

@@ -0,0 +1,7 @@
+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>;
+/** 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;

package/lib/typography.css

@@ -0,0 +1 @@
+.sheerly-typography{color:var(--sheerly-foreground);font-family:Geist Sans,Geist,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.75}.sheerly-typography h1{letter-spacing:-.025em;text-wrap:balance;scroll-margin-block-start:5rem;font-size:36px;font-weight:800;line-height:1.1}.sheerly-typography h2{letter-spacing:-.025em;border-bottom:1px solid var(--sheerly-border);padding-bottom:8px;scroll-margin-block-start:5rem;font-size:30px;font-weight:600;line-height:1.2}.sheerly-typography h3{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:24px;font-weight:600;line-height:1.3}.sheerly-typography h4{letter-spacing:-.025em;scroll-margin-block-start:5rem;font-size:20px;font-weight:600;line-height:1.4}.sheerly-typography h1,.sheerly-typography h2,.sheerly-typography h3,.sheerly-typography h4,.sheerly-typography p,.sheerly-typography blockquote,.sheerly-typography ul,.sheerly-typography ol,.sheerly-typography table,.sheerly-typography pre{margin-block-start:24px}.sheerly-typography h2{margin-block-start:40px}.sheerly-typography h3,.sheerly-typography h4{margin-block-start:32px}.sheerly-typography>:first-child{margin-block-start:0}.sheerly-typography a{color:var(--sheerly-primary);text-underline-offset:4px;font-weight:500;text-decoration:underline}.sheerly-typography a:hover{color:oklch(from var(--sheerly-primary) l c h / 80%)}.sheerly-typography blockquote{border-inline-start:2px solid var(--sheerly-border);color:var(--sheerly-muted-foreground);padding-inline-start:24px;font-style:italic}.sheerly-typography ul{padding-inline-start:24px;list-style:outside}.sheerly-typography ol{padding-inline-start:24px;list-style:decimal}.sheerly-typography li{margin-block-start:8px}.sheerly-typography li::marker{color:var(--sheerly-muted-foreground)}.sheerly-typography code{border-radius:var(--sheerly-radius-sm);background-color:var(--sheerly-muted);padding:.2em .35em;font-family:Geist Mono,ui-monospace,monospace;font-size:.875em;font-weight:600}.sheerly-typography pre{border-radius:var(--sheerly-radius-md);background-color:var(--sheerly-muted);padding:16px;overflow-x:auto}.sheerly-typography pre code{background-color:#0000;padding:0;font-weight:400}.sheerly-typography table{border-collapse:collapse;width:100%;font-size:14px}.sheerly-typography th,.sheerly-typography td{border:1px solid var(--sheerly-border);text-align:start;padding:8px 16px}.sheerly-typography th{font-weight:700}.sheerly-typography tbody tr:nth-child(2n){background-color:oklch(from var(--sheerly-muted) l c h / 50%)}.sheerly-typography small{font-size:14px;font-weight:500;line-height:1}.sheerly-typography [data-variant=lead]{color:var(--sheerly-muted-foreground);font-size:20px}.sheerly-typography [data-variant=large]{font-size:18px;font-weight:600}.sheerly-typography [data-variant=muted]{color:var(--sheerly-muted-foreground);font-size:14px}

package/lib/typography.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export interface TypographyProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 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.
+ */
+export declare function Typography({ className, ...props }: TypographyProps): import("react").JSX.Element;

package/package.json

@@ -0,0 +1,33 @@
+{
+  "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"
+  }
+}

package/src/accordion.css

@@ -0,0 +1,108 @@
+/* Accordion — native <details>; shared name attribute makes items exclusive */
+.sheerly-accordion {
+  /* Enable animating height to/from the `auto` keyword. */
+  interpolate-size: allow-keywords;
+
+  /* Bottom border between items (shadcn: not-last:border-b) */
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--sheerly-border);
+  }
+
+  /* Remove default marker */
+  & summary {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 10px 0;
+    border: 1px solid transparent;
+    border-radius: var(--sheerly-radius-lg);
+    font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--sheerly-foreground);
+    cursor: pointer;
+    list-style: none;
+    outline: none;
+    transition: box-shadow 0.15s ease, border-color 0.15s ease;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      content: "";
+    }
+
+    /* Chevron icon (down when closed, flips to up when open) */
+    &::after {
+      content: "";
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      background-color: var(--sheerly-muted-foreground);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      transition: rotate 0.2s ease;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      border-color: var(--sheerly-ring);
+      box-shadow: var(--sheerly-focus-ring);
+    }
+  }
+
+  & .sheerly-accordion-content {
+    font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: var(--sheerly-muted-foreground);
+    padding-top: 0;
+    padding-bottom: 10px;
+
+    & a {
+      text-decoration: underline;
+      text-underline-offset: 3px;
+
+      &:hover {
+        color: var(--sheerly-foreground);
+      }
+    }
+
+    & p:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  }
+
+  /* Animate the content wrapper open/closed. `interpolate-size` above lets
+     height interpolate to/from `auto`; `allow-discrete` handles the
+     content-visibility flip so the collapse animates too. */
+  &::details-content {
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition:
+      height 0.2s ease,
+      content-visibility 0.2s ease,
+      opacity 0.2s ease;
+    transition-behavior: allow-discrete;
+  }
+
+  &[open]::details-content {
+    height: auto;
+    opacity: 1;
+  }
+
+  /* Open state — rotate chevron */
+  &[open] > summary::after {
+    rotate: 180deg;
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,15 @@
+import type { DetailsHTMLAttributes, HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export type AccordionProps = DetailsHTMLAttributes<HTMLDetailsElement>
+
+/** Native <details>. Set the same `name` on siblings for exclusive open. */
+export function Accordion({ className, ...props }: AccordionProps) {
+  return <details className={cn('sheerly-accordion', className)} {...props} />
+}
+
+export type AccordionContentProps = HTMLAttributes<HTMLDivElement>
+
+export function AccordionContent({ className, ...props }: AccordionContentProps) {
+  return <div className={cn('sheerly-accordion-content', className)} {...props} />
+}

package/src/alert.css

@@ -0,0 +1,126 @@
+/*
+ * Alert — a callout for user attention. <div role="alert">
+ * The leading icon is embedded in CSS (via a masked ::before) and swaps
+ * per variant, so no <svg> child is required.
+ *
+ * Usage:
+ *   <div class="sheerly-alert" role="alert">
+ *     <div class="sheerly-alert-title">Payment successful</div>
+ *     <div class="sheerly-alert-description">Your payment has been processed.</div>
+ *     <div class="sheerly-alert-action"><button class="sheerly-button">Undo</button></div>
+ *   </div>
+ *
+ * Variants (data-variant): default | destructive | success | info | warning
+ */
+.sheerly-alert {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 8px;
+  row-gap: 2px;
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--sheerly-radius-lg);
+  padding: 8px 10px;
+  background-color: var(--sheerly-card);
+  color: var(--sheerly-card-foreground);
+  box-shadow: 0 0 0 1px oklch(from var(--sheerly-foreground) l c h / 10%);
+  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+
+  /* Embedded leading icon (default: info) — spans both text rows. */
+  &::before {
+    content: "";
+    grid-row: 1 / span 2;
+    align-self: start;
+    translate: 0 2px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    background-color: currentColor;
+    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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  /* Reserve the icon column only when a title/description follows. */
+  & > * {
+    grid-column: 2;
+  }
+
+  &[data-variant="destructive"] {
+    color: var(--sheerly-destructive);
+
+    &::before {
+      mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
+    }
+
+    .sheerly-alert-description {
+      color: oklch(from var(--sheerly-destructive) l c h / 90%);
+    }
+  }
+
+  &[data-variant="success"] {
+    color: oklch(0.527 0.132 152.53);
+
+    &::before {
+      mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
+    }
+  }
+
+  &[data-variant="warning"] {
+    color: oklch(0.553 0.135 66.44);
+
+    &::before {
+      mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
+    }
+  }
+
+  &[data-variant="info"] {
+    color: oklch(0.488 0.243 264.38);
+  }
+}
+
+.sheerly-alert-title {
+  color: inherit;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+
+  & a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+
+    &:hover {
+      color: var(--sheerly-foreground);
+    }
+  }
+}
+
+.sheerly-alert-description {
+  color: var(--sheerly-muted-foreground);
+  font-size: 14px;
+  line-height: 20px;
+  text-wrap: balance;
+
+  & a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+
+    &:hover {
+      color: var(--sheerly-foreground);
+    }
+  }
+
+  & p:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+
+/* Action pinned to the top-right corner. */
+.sheerly-alert-action {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  grid-column: auto;
+}

package/src/alert.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn'
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  'data-variant'?: 'default' | 'destructive' | 'success' | 'info' | 'warning'
+}
+
+export function Alert({ className, role = 'alert', ...props }: AlertProps) {
+  return <div role={role} className={cn('sheerly-alert', className)} {...props} />
+}
+
+export function AlertTitle({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-alert-title', className)} {...props} />
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-alert-description', className)} {...props} />
+}
+
+export function AlertAction({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('sheerly-alert-action', className)} {...props} />
+}