pendentive 0.1.1

package/LICENSE

@@ -0,0 +1,13 @@
+        DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                Version 2, December 2004
+
+Copyright (C) 2026 Nolly
+
+Everyone is permitted to copy and distribute verbatim or modified
+copies of this license document, and changing it is allowed as long
+as the name is changed.
+
+        DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+ 0. You just DO WHAT THE FUCK YOU WANT TO.

package/README.md

@@ -0,0 +1,88 @@
+# Pendentive
+
+A self-sufficient UI component library with **zero dependencies**, no Tailwind, no CSS framework, and no build step required by consumers. Every component is a real, fully-typed DOM element with attached controller methods -- append it, control it, destroy it.
+
+Works in:
+- The browser, via a single `<script>` tag (`dist/pendentive.global.js`, global `window.Pendentive`)
+- Node.js and Bun, as an ESM/CJS package (`import { Button } from 'pendentive'`)
+- TypeScript and plain JavaScript, with full `.d.ts` types shipped
+
+## Install
+
+```bash
+npm install pendentive
+# or
+bun add pendentive
+```
+
+## Browser (no build step)
+
+```html
+<script src="./pendentive.global.js"></script>
+<script>
+  const button = Pendentive.Button('Save', { variant: 'default' })
+  document.body.append(button)
+</script>
+```
+
+## Node / Bun / bundlers
+
+```ts
+import { Button, Section, setTheme } from 'pendentive'
+
+const button = Button('Save', {
+  variant: 'default',
+  onClick: () => console.log('saved')
+})
+
+document.body.append(button)
+```
+
+## Components
+
+| Category | Components |
+|---|---|
+| Buttons | Button, ButtonGroup |
+| Layout | Section, Card, Separator |
+| Form fields | TextField, TextArea, NumberField, ColorField |
+| Selection controls | Checkbox, RadioGroup, Switch, Slider, RangeSlider, Select, Combobox |
+| Specialized inputs | ChipInput, FileDropzone, DatePicker |
+| Display | Badge, Avatar, ModeCard |
+| Feedback | Spinner, ProgressBar, Skeleton, Toast, Alert |
+| Overlays | Tooltip, Dialog, Drawer, Popover, DropdownMenu, ContextMenu |
+| Navigation | Tabs, Accordion, Breadcrumb, Pagination |
+| Data display | Table, List, Tree |
+
+Every component ships its own CSS alongside its code -- import only what you use, and only that component's styles are ever injected.
+
+## Styling
+
+CSS is injected automatically at runtime -- nothing to import or link. Customize the whole design system through CSS custom properties (all prefixed `--pendentive-*` so they never collide with your own variables) or the `setTheme()` API:
+
+```ts
+import { setTheme } from 'pendentive'
+
+setTheme({ primary: 'oklch(0.7 0.2 250)', radius: '0.25rem' })
+```
+
+## Icons
+
+Pendentive ships a built-in set of lucide-compatible icons, each a standalone, tree-shakeable component. Every `icon` prop across the library accepts any of: one of Pendentive's built-ins, a lucide-style icon-node array, raw SVG markup, an existing `SVGSVGElement`, a render function, or nothing at all.
+
+```ts
+import { Icon, icons } from 'pendentive/svg'
+
+const check = Icon(icons.check, 16)
+```
+
+Mix in your own icons (from a lucide clone or hand-rolled) freely -- they're fully interchangeable:
+
+```ts
+import { icons } from 'pendentive/svg'
+
+const allIcons = { ...icons, ...myLucideCloneIcons }
+```
+
+## License
+
+WTFPL -- do what the fuck you want to.

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,26 @@
+/** Options accepted by the `Avatar` factory. */
+export interface AvatarOptions {
+    /** Image URL. Falls back to `initials` if omitted or if the image fails to load. */
+    src?: string;
+    /** Accessible alt text for the image. */
+    alt?: string;
+    /** Fallback text (typically 1-2 letters) shown when there's no image. */
+    initials?: string;
+    /** Pixel diameter/side length. Defaults to `36`. */
+    size?: number;
+    /** Outline shape. Defaults to `'circle'`. */
+    shape?: 'circle' | 'square';
+}
+/** The runtime control surface attached to every `Avatar` element. */
+export interface AvatarApi {
+    /** Replaces the image source, or falls back to initials if `undefined`. */
+    setSrc: (src: string | undefined) => void;
+    /** Detaches the avatar from the DOM. */
+    destroy: () => void;
+}
+/** An `Avatar` is a real `HTMLDivElement` extended with `AvatarApi`. */
+export type AvatarElement = HTMLDivElement & AvatarApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const avatarCss = "\n.linteau-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--linteau-secondary); color: var(--linteau-secondary-foreground); font-size: 12px; font-weight: 600; overflow: hidden; flex-shrink: 0 }\n.linteau-avatar-circle { border-radius: 50% }\n.linteau-avatar-square { border-radius: var(--linteau-radius-sm) }\n.linteau-avatar img { width: 100%; height: 100%; object-fit: cover }\n";
+/** Creates a circular or square avatar with an automatic initials fallback. */
+export declare function Avatar(options?: AvatarOptions): AvatarElement;

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,25 @@
+import type { IconInput } from '../../svg/types';
+/** Visual style of a `Badge`. */
+export type BadgeVariant = 'default' | 'outline' | 'success' | 'warning' | 'destructive';
+/** Options accepted by the `Badge` factory. */
+export interface BadgeOptions {
+    /** Visual style. Defaults to `'default'`. */
+    variant?: BadgeVariant;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+}
+/** The runtime control surface attached to every `Badge` element. */
+export interface BadgeApi {
+    /** Updates the visible label text. */
+    setLabel: (text: string) => void;
+    /** Swaps the visual variant, updating classes in place. */
+    setVariant: (variant: BadgeVariant) => void;
+    /** Detaches the badge from the DOM. */
+    destroy: () => void;
+}
+/** A `Badge` is a real `HTMLSpanElement` extended with `BadgeApi`. */
+export type BadgeElement = HTMLSpanElement & BadgeApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const badgeCss = "\n.linteau-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1.6;\n  border: 1px solid transparent;\n}\n.linteau-badge-default { background: var(--linteau-secondary); color: var(--linteau-secondary-foreground) }\n.linteau-badge-outline { background: transparent; border-color: var(--linteau-border); color: var(--linteau-foreground) }\n.linteau-badge-success { background: var(--linteau-success); color: var(--linteau-success-foreground) }\n.linteau-badge-warning { background: var(--linteau-warning); color: var(--linteau-warning-foreground) }\n.linteau-badge-destructive { background: var(--linteau-destructive); color: var(--linteau-destructive-foreground) }\n";
+/** Creates a small pill-shaped status/label indicator. */
+export declare function Badge(text: string, options?: BadgeOptions): BadgeElement;

package/dist/components/button/Button.d.ts

@@ -0,0 +1,51 @@
+import type { IconInput } from '../../svg/types';
+/** Visual style of a `Button`. */
+export type ButtonVariant = 'default' | 'outline' | 'ghost' | 'destructive';
+/** Sizing preset of a `Button`. */
+export type ButtonSize = 'sm' | 'default';
+/** Options accepted by the `Button` factory. */
+export interface ButtonOptions {
+    /** Visual style. Defaults to `'default'`. */
+    variant?: ButtonVariant;
+    /** Sizing preset. Defaults to `'default'`. */
+    size?: ButtonSize;
+    /** Optional icon, in any `IconInput` shape. */
+    icon?: IconInput;
+    /** Which side of the label the icon renders on. Defaults to `'start'`. */
+    iconPosition?: 'start' | 'end';
+    /** Disables the button and blocks click handling. Defaults to `false`. */
+    disabled?: boolean;
+    /** Stretches the button to 100% of its container's width. Defaults to `false`. */
+    fullWidth?: boolean;
+    /** Called on every click while the button is enabled. */
+    onClick?: (event: MouseEvent) => void;
+}
+/** The full runtime control surface attached to every `Button` element. */
+export interface ButtonApi {
+    /** Updates the visible label text. */
+    setLabel: (text: string) => void;
+    /** Swaps the visual variant, updating classes in place. */
+    setVariant: (variant: ButtonVariant) => void;
+    /** Swaps the sizing preset, updating classes in place. */
+    setSize: (size: ButtonSize) => void;
+    /** Replaces the icon (or removes it if `icon` is `null`/`undefined`), optionally moving its position. */
+    setIcon: (icon: IconInput, position?: 'start' | 'end') => void;
+    /** Enables/disables the button. */
+    setDisabled: (disabled: boolean) => void;
+    /** Replaces the click handler (pass `undefined` to remove it). */
+    setOnClick: (handler: ((event: MouseEvent) => void) | undefined) => void;
+    /** Removes the click listener and detaches the button from the DOM. */
+    destroy: () => void;
+}
+/** A `Button` is a real `HTMLButtonElement` extended with `ButtonApi`. */
+export type ButtonElement = HTMLButtonElement & ButtonApi;
+/** This component's own CSS -- colocated so `Button.ts` is a single, self-contained, tree-shakeable unit. */
+export declare const buttonCss = "\n.linteau-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  border-radius: var(--linteau-radius-sm);\n  border: 1px solid transparent;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, opacity 120ms ease;\n}\n.linteau-button-default { padding: 10px 14px }\n.linteau-button-sm { padding: 6px 10px; font-size: 12px }\n.linteau-button-full { width: 100% }\n.linteau-button:active { transform: scale(0.97) }\n.linteau-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none }\n.linteau-button-default:not(.linteau-button-outline):not(.linteau-button-ghost):not(.linteau-button-destructive) {\n  background: var(--linteau-primary);\n  color: var(--linteau-primary-foreground);\n}\n.linteau-button-default:not(.linteau-button-outline):not(.linteau-button-ghost):not(.linteau-button-destructive):hover:not(:disabled) {\n  filter: brightness(0.92);\n}\n.linteau-button-outline { background: transparent; border-color: var(--linteau-border); color: var(--linteau-foreground) }\n.linteau-button-outline:hover:not(:disabled) { background: var(--linteau-accent) }\n.linteau-button-ghost { background: transparent; color: var(--linteau-muted-foreground) }\n.linteau-button-ghost:hover:not(:disabled) { background: var(--linteau-accent); color: var(--linteau-foreground) }\n.linteau-button-destructive { background: var(--linteau-destructive); color: var(--linteau-destructive-foreground) }\n.linteau-button-destructive:hover:not(:disabled) { filter: brightness(0.92) }\n";
+/**
+ * Creates a fully controllable, self-styled button.
+ *
+ * @param text - Initial label text.
+ * @param options - Configuration; every field is optional and can change later via the returned API.
+ * @returns The button element itself, extended with `ButtonApi` methods.
+ */
+export declare function Button(text: string, options?: ButtonOptions): ButtonElement;

package/dist/components/button/ButtonGroup.d.ts

@@ -0,0 +1,36 @@
+import type { IconInput } from '../../svg/types';
+/** A single selectable item within a `ButtonGroup`. */
+export interface ButtonGroupItem {
+    /** Visible label. */
+    label: string;
+    /** Unique value identifying this item. */
+    value: string;
+    /** Optional icon shown before the label. */
+    icon?: IconInput;
+}
+/** Options accepted by the `ButtonGroup` factory. */
+export interface ButtonGroupOptions {
+    /** The items rendered as segments. */
+    items: ButtonGroupItem[];
+    /** Initially selected value (controlled if you keep calling `setValue`, uncontrolled otherwise). */
+    value?: string;
+    /** Called whenever the selection changes via user interaction. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `ButtonGroup` element. */
+export interface ButtonGroupApi {
+    /** Returns the currently selected value, if any. */
+    getValue: () => string | undefined;
+    /** Programmatically selects a value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Replaces the full list of items, preserving selection where possible. */
+    setItems: (items: ButtonGroupItem[]) => void;
+    /** Detaches the group from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `ButtonGroup` is a real `HTMLDivElement` extended with `ButtonGroupApi`. */
+export type ButtonGroupElement = HTMLDivElement & ButtonGroupApi;
+/** This component's own CSS. Depends on `.linteau-button`, which `Button()` registers itself the moment `ButtonGroup` renders its first segment. */
+export declare const buttonGroupCss = "\n.linteau-button-group { display: inline-flex; border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm); overflow: hidden }\n.linteau-button-group .linteau-button { border-radius: 0; border: none; border-right: 1px solid var(--linteau-border); background: transparent; color: var(--linteau-muted-foreground) }\n.linteau-button-group .linteau-button:last-child { border-right: none }\n.linteau-button-group .linteau-button:hover:not(:disabled) { background: var(--linteau-accent) }\n.linteau-button-group .linteau-button-group-item-active { background: var(--linteau-primary); color: var(--linteau-primary-foreground) }\n";
+/** Creates a segmented, single-select group of buttons -- useful for compact mode/tab-like pickers that don't need a full `Select`. */
+export declare function ButtonGroup(options: ButtonGroupOptions): ButtonGroupElement;

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,34 @@
+/** Options accepted by the `Checkbox` factory. */
+export interface CheckboxOptions {
+    /** Label rendered next to the box. */
+    label: string;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Uncontrolled initial state, used only if `checked` is omitted. Defaults to `false`. */
+    defaultChecked?: boolean;
+    /** Renders a dash instead of a check mark, without affecting the boolean value. Defaults to `false`. */
+    indeterminate?: boolean;
+    /** Disables interaction. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the user toggles the checkbox. */
+    onChange?: (checked: boolean) => void;
+}
+/** The runtime control surface attached to every `Checkbox` element. */
+export interface CheckboxApi {
+    /** Returns the current checked state. */
+    getValue: () => boolean;
+    /** Programmatically sets the checked state (does not trigger `onChange`). */
+    setValue: (checked: boolean) => void;
+    /** Toggles the indeterminate visual state. */
+    setIndeterminate: (indeterminate: boolean) => void;
+    /** Enables/disables the checkbox. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the checkbox from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `Checkbox` is a real `HTMLDivElement` (the row) extended with `CheckboxApi`. */
+export type CheckboxElement = HTMLDivElement & CheckboxApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const checkboxCss = "\n.linteau-checkbox-row { display: flex; align-items: center; gap: 8px }\n.linteau-checkbox {\n  width: 18px;\n  height: 18px;\n  border-radius: var(--linteau-radius-sm);\n  border: 1px solid var(--linteau-border);\n  background: var(--linteau-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: var(--linteau-primary-foreground);\n}\n.linteau-checkbox:disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-checkbox.linteau-checked { background: var(--linteau-primary); border-color: var(--linteau-primary) }\n.linteau-checkbox svg { display: none }\n.linteau-checkbox.linteau-checked svg, .linteau-checkbox.linteau-indeterminate svg { display: block }\n";
+/** Creates a labeled checkbox, supporting controlled/uncontrolled and indeterminate states. */
+export declare function Checkbox(options: CheckboxOptions): CheckboxElement;

package/dist/components/command/Command.d.ts

@@ -0,0 +1,59 @@
+import type { IconInput } from '../../svg/types';
+/** A single selectable entry in a `Command` palette. */
+export interface CommandItem {
+    /** Visible label. */
+    label: string;
+    /** Value passed to `onSelect` when this item is chosen. */
+    value: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Extra terms matched against the search query, alongside `label`. */
+    keywords?: string[];
+    /** Disables this item. Defaults to `false`. */
+    disabled?: boolean;
+}
+/** A labeled cluster of `CommandItem`s within the palette. */
+export interface CommandGroup {
+    /** Optional heading shown above this group's items. */
+    heading?: string;
+    /** The items in this group. */
+    items: CommandItem[];
+}
+/** Options accepted by the `Command` factory. */
+export interface CommandOptions {
+    /** The groups of selectable items. */
+    groups?: CommandGroup[];
+    /** Placeholder shown in the search input. Defaults to `'Type a command or search...'`. */
+    placeholder?: string;
+    /** Text shown when no items match the query. Defaults to `'No results found.'`. */
+    emptyText?: string;
+    /** Closes the palette after a selection is made. Defaults to `true`. */
+    closeOnSelect?: boolean;
+    /** Called when an enabled item is chosen. */
+    onSelect?: (value: string) => void;
+}
+/** The runtime control surface attached to every `Command` element. */
+export interface CommandApi {
+    /** Opens the palette, locks scroll, and focuses the search input. */
+    open: () => void;
+    /** Closes the palette. */
+    close: () => void;
+    /** Toggles between open and closed. */
+    toggle: () => void;
+    /** Returns whether the palette is currently open. */
+    isOpen: () => boolean;
+    /** Replaces the full list of groups. */
+    setGroups: (groups: CommandGroup[]) => void;
+    /** Removes all listeners and detaches the palette from the DOM. */
+    destroy: () => void;
+}
+/** A `Command` is a real `HTMLDivElement` (the overlay) extended with `CommandApi`. */
+export type CommandElement = HTMLDivElement & CommandApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const commandCss = "\n.linteau-command-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 60%, transparent); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; z-index: 1500; backdrop-filter: blur(4px) }\n.linteau-command-panel { width: min(560px, 92vw); max-height: 60vh; display: flex; flex-direction: column; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden }\n.linteau-command-input-wrap { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linteau-border) }\n.linteau-command-input { flex: 1; background: transparent; border: none; outline: none; color: var(--linteau-foreground); font-size: 14px; font-family: inherit }\n.linteau-command-list { overflow-y: auto; padding: 6px; flex: 1 }\n.linteau-command-group-heading { padding: 6px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--linteau-muted-foreground) }\n.linteau-command-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--linteau-radius-sm); font-size: 13px; color: var(--linteau-foreground); cursor: pointer }\n.linteau-command-item-highlighted { background: var(--linteau-accent) }\n.linteau-command-item-disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-command-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--linteau-muted-foreground) }\n";
+/**
+ * Creates a full-screen command palette: a search input backed by a live-filtered,
+ * grouped, keyboard-navigable list -- opened on demand (bind it to a keyboard shortcut
+ * like Cmd/Ctrl+K in your app).
+ */
+export declare function Command(options?: CommandOptions): CommandElement;

package/dist/components/data/List.d.ts

@@ -0,0 +1,40 @@
+import type { IconInput } from '../../svg/types';
+/** A single row rendered inside a `List`. */
+export interface ListItem {
+    /** Visible label. */
+    label: string;
+    /** Unique value identifying this row. */
+    value: string;
+    /** Optional icon rendered before the text. */
+    icon?: IconInput;
+    /** Optional secondary line under the label. */
+    description?: string;
+}
+/** Options accepted by the `List` factory. */
+export interface ListOptions {
+    /** The rows to render. */
+    items: ListItem[];
+    /** Enables single-select highlighting/interaction. Defaults to `true`. */
+    selectable?: boolean;
+    /** Controlled selected value. */
+    value?: string;
+    /** Called whenever the user selects a row (only when `selectable`). */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `List` element. */
+export interface ListApi {
+    /** Returns the currently selected value, if any. */
+    getValue: () => string | undefined;
+    /** Programmatically selects a value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Replaces the full list of rows. */
+    setItems: (items: ListItem[]) => void;
+    /** Detaches the list from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `List` is a real `HTMLDivElement` extended with `ListApi`. */
+export type ListElement = HTMLDivElement & ListApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const listCss = "\n.linteau-list { display: flex; flex-direction: column; gap: 2px; width: 100% }\n.linteau-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--linteau-radius-sm); cursor: pointer }\n.linteau-list-item:hover { background: var(--linteau-accent) }\n.linteau-list-item-selected { background: var(--linteau-accent) }\n.linteau-list-item-text { display: flex; flex-direction: column }\n.linteau-list-item-label { font-size: 13px; color: var(--linteau-foreground) }\n.linteau-list-item-description { font-size: 11px; color: var(--linteau-muted-foreground) }\n";
+/** Creates a vertical list of rows, optionally single-selectable. */
+export declare function List(options: ListOptions): ListElement;

package/dist/components/data/Table.d.ts

@@ -0,0 +1,37 @@
+/** Sort direction used by `Table`. */
+export type SortDirection = 'asc' | 'desc';
+/** Definition of a single `Table` column. */
+export interface TableColumn<TRow> {
+    /** Unique key, also used as the sort key passed to `onSortChange`. */
+    key: string;
+    /** Header label. */
+    header: string;
+    /** Allows this column's header to trigger sorting. Defaults to `false`. */
+    sortable?: boolean;
+    /** Custom cell renderer; defaults to reading `row[key]` as a string if omitted. */
+    render?: (row: TRow) => HTMLElement | string;
+}
+/** Options accepted by the `Table` factory. */
+export interface TableOptions<TRow> {
+    /** Column definitions, in display order. */
+    columns: Array<TableColumn<TRow>>;
+    /** The rows to render. */
+    rows: TRow[];
+    /** Derives a stable string id for a row; used only internally for key stability. */
+    getRowId?: (row: TRow) => string;
+    /** Called when the user clicks a sortable header. */
+    onSortChange?: (key: string, direction: SortDirection) => void;
+}
+/** The runtime control surface attached to every `Table` element. */
+export interface TableApi<TRow> {
+    /** Replaces the rows shown, re-rendering the body. */
+    setRows: (rows: TRow[]) => void;
+    /** Detaches the table from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `Table` is a real `HTMLDivElement` (the scroll wrapper) extended with `TableApi`. */
+export type TableElement<TRow> = HTMLDivElement & TableApi<TRow>;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const tableCss = "\n.linteau-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg) }\n.linteau-table { width: 100%; border-collapse: collapse; font-size: 12px }\n.linteau-table th { text-align: left; padding: 10px 12px; background: var(--linteau-muted); color: var(--linteau-muted-foreground); font-weight: 600; border-bottom: 1px solid var(--linteau-border); cursor: default; white-space: nowrap }\n.linteau-table th.linteau-table-sortable { cursor: pointer; user-select: none }\n.linteau-table td { padding: 10px 12px; border-bottom: 1px solid var(--linteau-border); color: var(--linteau-foreground) }\n.linteau-table tr:last-child td { border-bottom: none }\n.linteau-table-sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle }\n";
+/** Creates a data table with optional click-to-sort headers and custom cell rendering. */
+export declare function Table<TRow>(options: TableOptions<TRow>): TableElement<TRow>;

package/dist/components/data/Tree.d.ts

@@ -0,0 +1,36 @@
+import type { IconInput } from '../../svg/types';
+/** A single node in a `Tree`, optionally containing children. */
+export interface TreeNode {
+    /** Visible label. */
+    label: string;
+    /** Unique value identifying this node. */
+    value: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Nested child nodes. */
+    children?: TreeNode[];
+}
+/** Options accepted by the `Tree` factory. */
+export interface TreeOptions {
+    /** The root-level nodes to render. */
+    nodes: TreeNode[];
+    /** Values expanded by default. */
+    defaultExpanded?: string[];
+    /** Called when a leaf or branch node is clicked. */
+    onSelect?: (value: string) => void;
+}
+/** The runtime control surface attached to every `Tree` element. */
+export interface TreeApi {
+    /** Expands every branch node. */
+    expandAll: () => void;
+    /** Collapses every branch node. */
+    collapseAll: () => void;
+    /** Detaches the tree from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `Tree` is a real `HTMLDivElement` extended with `TreeApi`. */
+export type TreeElement = HTMLDivElement & TreeApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const treeCss = "\n.linteau-tree { display: flex; flex-direction: column; gap: 2px }\n.linteau-tree-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--linteau-radius-sm); cursor: pointer; font-size: 12px }\n.linteau-tree-row:hover { background: var(--linteau-accent) }\n.linteau-tree-chevron { transition: transform 150ms ease }\n.linteau-tree-chevron.linteau-open { transform: rotate(90deg) }\n.linteau-tree-children { margin-left: 18px; display: flex; flex-direction: column; gap: 2px }\n.linteau-tree-children.linteau-collapsed { display: none }\n";
+/** Creates a recursively nested, expandable tree of nodes. */
+export declare function Tree(options: TreeOptions): TreeElement;

package/dist/components/feedback/Alert.d.ts

@@ -0,0 +1,29 @@
+import type { IconInput } from '../../svg/types';
+/** Visual style of an `Alert`. */
+export type AlertVariant = 'default' | 'success' | 'warning' | 'destructive';
+/** Options accepted by the `Alert` factory. */
+export interface AlertOptions {
+    /** Title shown above the description. */
+    title?: string;
+    /** Visual style. Defaults to `'default'`. */
+    variant?: AlertVariant;
+    /** Optional icon; defaults to a sensible one per variant if omitted. */
+    icon?: IconInput;
+    /** Shows a close button. Defaults to `false`. */
+    dismissible?: boolean;
+    /** Called when the close button is clicked. */
+    onDismiss?: () => void;
+}
+/** The runtime control surface attached to every `Alert` element. */
+export interface AlertApi {
+    /** Updates the description text. */
+    setDescription: (description: string) => void;
+    /** Detaches the alert from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** An `Alert` is a real `HTMLDivElement` extended with `AlertApi`. */
+export type AlertElement = HTMLDivElement & AlertApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const alertCss = "\n.linteau-alert { display: flex; gap: 10px; padding: 12px; border-radius: var(--linteau-radius-lg); border: 1px solid var(--linteau-border); background: var(--linteau-muted) }\n.linteau-alert-success { border-color: var(--linteau-success) }\n.linteau-alert-warning { border-color: var(--linteau-warning) }\n.linteau-alert-destructive { border-color: var(--linteau-destructive) }\n.linteau-alert-body { flex: 1 }\n.linteau-alert-title { font-size: 13px; font-weight: 600; margin-bottom: 2px }\n.linteau-alert-description { font-size: 12px; color: var(--linteau-muted-foreground) }\n.linteau-alert-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; align-self: flex-start }\n";
+/** Creates a static informational/status banner. */
+export declare function Alert(description: string, options?: AlertOptions): AlertElement;

package/dist/components/feedback/ProgressBar.d.ts

@@ -0,0 +1,32 @@
+/** Options accepted by the `ProgressBar` factory. */
+export interface ProgressBarOptions {
+    /** Title shown at the top of the overlay card. */
+    title?: string;
+    /** Initial progress percentage (0-100). Defaults to `0`. */
+    value?: number;
+    /** Whether the bar starts in indeterminate ("Working...") mode. Defaults to `false`. */
+    indeterminate?: boolean;
+    /** Whether the overlay is visible immediately. Defaults to `false`. */
+    visible?: boolean;
+}
+/** The runtime control surface attached to every `ProgressBar` element. */
+export interface ProgressBarApi {
+    /** Sets the progress percentage (clamped 0-100) and optional custom label text. */
+    setValue: (percent: number, label?: string) => void;
+    /** Toggles indeterminate ("Working...") mode on or off. */
+    setIndeterminate: (indeterminate: boolean) => void;
+    /** Updates the overlay title text. */
+    setTitle: (title: string) => void;
+    /** Reveals the full-screen overlay. */
+    show: () => void;
+    /** Hides the full-screen overlay. */
+    hide: () => void;
+    /** Detaches the overlay from the DOM. */
+    destroy: () => void;
+}
+/** A `ProgressBar` is a real `HTMLDivElement` extended with `ProgressBarApi`. */
+export type ProgressBarElement = HTMLDivElement & ProgressBarApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const progressBarCss = "\n.linteau-progress-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 55%, transparent); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px) }\n.linteau-progress-card { width: 280px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); padding: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) }\n.linteau-progress-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--linteau-foreground) }\n.linteau-progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--linteau-secondary); overflow: hidden; position: relative }\n.linteau-progress-fill { height: 100%; width: 0%; background: var(--linteau-primary); border-radius: 999px; transition: width 180ms ease }\n.linteau-progress-fill.linteau-indeterminate { width: 40% !important; animation: linteau-progress-slide 1.1s ease-in-out infinite }\n@keyframes linteau-progress-slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } }\n.linteau-progress-percent { margin-top: 8px; font-size: 12px; color: var(--linteau-muted-foreground); text-align: right; font-variant-numeric: tabular-nums }\n";
+/** Creates a full-screen progress overlay, ideal for long-running async operations. */
+export declare function ProgressBar(options?: ProgressBarOptions): ProgressBarElement;

package/dist/components/feedback/Skeleton.d.ts

@@ -0,0 +1,20 @@
+/** Options accepted by the `Skeleton` factory. */
+export interface SkeletonOptions {
+    /** CSS width value or pixel number. Defaults to `'100%'`. */
+    width?: string | number;
+    /** CSS height value or pixel number. Defaults to `'1em'`. */
+    height?: string | number;
+    /** CSS border-radius value. Defaults to the theme's small radius. */
+    radius?: string;
+}
+/** The runtime control surface attached to every `Skeleton` element. */
+export interface SkeletonApi {
+    /** Detaches the placeholder from the DOM. */
+    destroy: () => void;
+}
+/** A `Skeleton` is a real `HTMLDivElement` extended with `SkeletonApi`. */
+export type SkeletonElement = HTMLDivElement & SkeletonApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const skeletonCss = "\n.linteau-skeleton { background: linear-gradient(90deg, var(--linteau-secondary) 25%, var(--linteau-accent) 37%, var(--linteau-secondary) 63%); background-size: 400% 100%; animation: linteau-skeleton-shine 1.4s ease infinite; border-radius: var(--linteau-radius-sm) }\n@keyframes linteau-skeleton-shine { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }\n";
+/** Creates an animated shimmering placeholder for content that's still loading. */
+export declare function Skeleton(options?: SkeletonOptions): SkeletonElement;

package/dist/components/feedback/Spinner.d.ts

@@ -0,0 +1,20 @@
+/** Options accepted by the `Spinner` factory. */
+export interface SpinnerOptions {
+    /** Pixel size of the spinner. Defaults to `16`. */
+    size?: number;
+    /** Stroke/text color. Defaults to `'currentColor'` via the icon's default. */
+    color?: string;
+}
+/** The runtime control surface attached to every `Spinner` element. */
+export interface SpinnerApi {
+    /** Resizes the spinner in place. */
+    setSize: (size: number) => void;
+    /** Detaches the spinner from the DOM. */
+    destroy: () => void;
+}
+/** A `Spinner` is a real `SVGSVGElement` extended with `SpinnerApi`. */
+export type SpinnerElement = SVGSVGElement & SpinnerApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const spinnerCss = "\n.linteau-spinner { animation: linteau-spin 0.8s linear infinite; color: var(--linteau-muted-foreground) }\n@keyframes linteau-spin { to { transform: rotate(360deg) } }\n";
+/** Creates a small, continuously rotating loading indicator. */
+export declare function Spinner(options?: SpinnerOptions): SpinnerElement;

package/dist/components/feedback/Toast.d.ts

@@ -0,0 +1,30 @@
+/** Visual style of a `Toast`. */
+export type ToastVariant = 'default' | 'success' | 'warning' | 'destructive';
+/** Options accepted by `ToastManager.show`. */
+export interface ToastOptions {
+    /** Toast title. */
+    title?: string;
+    /** Supporting description text. */
+    description?: string;
+    /** Visual style. Defaults to `'default'`. */
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in milliseconds. `0` disables auto-dismiss. Defaults to `4000`. */
+    duration?: number;
+}
+/** A stack-based toast notification manager. Lazily mounts its viewport to `document.body` on first use. */
+export interface ToastManager {
+    /** Shows a new toast and returns its id (usable with `dismiss`). */
+    show: (options: ToastOptions) => string;
+    /** Dismisses a specific toast by id. */
+    dismiss: (id: string) => void;
+    /** Dismisses every visible toast. */
+    clear: () => void;
+    /** Removes the viewport entirely. */
+    destroy: () => void;
+}
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const toastCss = "\n.linteau-toast-viewport { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 1400; width: min(340px, 92vw) }\n.linteau-toast { display: flex; gap: 8px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-left: 3px solid var(--linteau-primary); border-radius: var(--linteau-radius-md); padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }\n.linteau-toast-success { border-left-color: var(--linteau-success) }\n.linteau-toast-warning { border-left-color: var(--linteau-warning) }\n.linteau-toast-destructive { border-left-color: var(--linteau-destructive) }\n.linteau-toast-body { flex: 1 }\n.linteau-toast-title { font-size: 12px; font-weight: 600 }\n.linteau-toast-description { font-size: 12px; color: var(--linteau-muted-foreground); margin-top: 2px }\n.linteau-toast-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; align-self: flex-start }\n";
+/** Creates an independent toast manager with its own viewport. Most apps only need the shared `toast` export below. */
+export declare function createToastManager(): ToastManager;
+/** A ready-to-use shared toast manager: `toast.show({ title: 'Saved' })`. */
+export declare const toast: ToastManager;

package/dist/components/field/ColorField.d.ts

@@ -0,0 +1,33 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `ColorField` factory. */
+export interface ColorFieldOptions {
+    /** Label rendered before the swatch. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Controlled hex value. When provided together with `onChange`, you own the state. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. Defaults to `'#ffffff'`. */
+    defaultValue?: string;
+    /** Disables interaction. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called on every color change. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `ColorField` element. */
+export interface ColorFieldApi {
+    /** Returns the current hex color string. */
+    getValue: () => string;
+    /** Programmatically sets the color (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Enables/disables the control. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the field from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `ColorField` is a real `HTMLDivElement` (the field row) extended with `ColorFieldApi`. */
+export type ColorFieldElement = HTMLDivElement & ColorFieldApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const swatchCss = "\n.linteau-swatch { --linteau-swatch-color: #ffffff; width: 28px; height: 28px; border-radius: var(--linteau-radius-sm); background: var(--linteau-swatch-color); border: 1px solid var(--linteau-border); cursor: pointer; display: block; position: relative; overflow: hidden; transition: transform 120ms ease }\n.linteau-swatch:hover { transform: scale(1.06) }\n.linteau-swatch input[type='color'] { position: absolute; inset: 0; opacity: 0; cursor: pointer }\n";
+/** Creates a labeled native color-picker swatch, supporting controlled and uncontrolled usage. */
+export declare function ColorField(options: ColorFieldOptions): ColorFieldElement;