pendentive 0.1.1

package/dist/components/overlay/Dialog.d.ts

@@ -0,0 +1,38 @@
+/** Options accepted by the `Dialog` factory. */
+export interface DialogOptions {
+    /** Title shown in the header. */
+    title?: string;
+    /** Initial body content. */
+    content?: HTMLElement | string;
+    /** Footer action elements (e.g. Buttons), right-aligned. */
+    actions?: HTMLElement[];
+    /** Closes the dialog when the backdrop is clicked. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    /** Closes the dialog on Escape. Defaults to `true`. */
+    closeOnEscape?: boolean;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/** The runtime control surface attached to every `Dialog` element. */
+export interface DialogApi {
+    /** The scrollable body container -- set once via `content`, or update later with `setContent`. */
+    body: HTMLElement;
+    /** Opens the dialog: locks scroll, binds Escape. */
+    open: () => void;
+    /** Closes the dialog. */
+    close: () => void;
+    /** Returns whether the dialog is currently open. */
+    isOpen: () => boolean;
+    /** Updates the header title text. */
+    setTitle: (title: string) => void;
+    /** Replaces the body content. */
+    setContent: (content: HTMLElement | string) => void;
+    /** Removes all listeners/subscriptions and detaches the dialog from the DOM. */
+    destroy: () => void;
+}
+/** A `Dialog` is a real `HTMLDivElement` (the overlay) extended with `DialogApi`. */
+export type DialogElement = HTMLDivElement & DialogApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const dialogCss = "\n.linteau-dialog-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 60%, transparent); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px) }\n.linteau-dialog-panel { width: min(480px, 92vw); max-height: 86vh; 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-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linteau-border) }\n.linteau-dialog-title { font-size: 14px; font-weight: 600 }\n.linteau-dialog-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; padding: 4px; border-radius: var(--linteau-radius-sm) }\n.linteau-dialog-close:hover { background: var(--linteau-accent); color: var(--linteau-foreground) }\n.linteau-dialog-body { padding: 16px; overflow-y: auto }\n.linteau-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linteau-border) }\n";
+/** Creates a centered modal dialog with a backdrop, focus-safe scroll lock, and Escape-to-close. */
+export declare function Dialog(options?: DialogOptions): DialogElement;

package/dist/components/overlay/Drawer.d.ts

@@ -0,0 +1,40 @@
+/** Which edge of the screen a `Drawer` slides in from. */
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+/** Options accepted by the `Drawer` factory. */
+export interface DrawerOptions {
+    /** Which edge to slide in from. Defaults to `'right'`. */
+    side?: DrawerSide;
+    /** Title shown in the header. */
+    title?: string;
+    /** Initial body content. */
+    content?: HTMLElement | string;
+    /** Closes the drawer when the backdrop is clicked. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    /** Closes the drawer on Escape. Defaults to `true`. */
+    closeOnEscape?: boolean;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/** The runtime control surface attached to every `Drawer` element. */
+export interface DrawerApi {
+    /** The scrollable body container. */
+    body: HTMLElement;
+    /** Opens the drawer. */
+    open: () => void;
+    /** Closes the drawer. */
+    close: () => void;
+    /** Returns whether the drawer is currently open. */
+    isOpen: () => boolean;
+    /** Updates the header title text. */
+    setTitle: (title: string) => void;
+    /** Replaces the body content. */
+    setContent: (content: HTMLElement | string) => void;
+    /** Removes all listeners/subscriptions and detaches the drawer from the DOM. */
+    destroy: () => void;
+}
+/** A `Drawer` is a real `HTMLDivElement` (the overlay) extended with `DrawerApi`. */
+export type DrawerElement = HTMLDivElement & DrawerApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const drawerCss = "\n.linteau-drawer-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 55%, transparent); z-index: 1000 }\n.linteau-drawer-panel { position: fixed; background: var(--linteau-card); border: 1px solid var(--linteau-border); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transition: transform 200ms ease }\n.linteau-drawer-right { top: 0; right: 0; bottom: 0; width: min(360px, 90vw); transform: translateX(0) }\n.linteau-drawer-left { top: 0; left: 0; bottom: 0; width: min(360px, 90vw); transform: translateX(0) }\n.linteau-drawer-top { top: 0; left: 0; right: 0; height: min(320px, 80vh); transform: translateY(0) }\n.linteau-drawer-bottom { bottom: 0; left: 0; right: 0; height: min(320px, 80vh); transform: translateY(0) }\n.linteau-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linteau-border) }\n.linteau-drawer-title { font-size: 14px; font-weight: 600 }\n.linteau-drawer-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; padding: 4px; border-radius: var(--linteau-radius-sm) }\n.linteau-drawer-body { padding: 16px; overflow-y: auto; flex: 1 }\n";
+/** Creates a slide-in panel anchored to a screen edge, ideal for side navigation or contextual forms. */
+export declare function Drawer(options?: DrawerOptions): DrawerElement;

package/dist/components/overlay/DropdownMenu.d.ts

@@ -0,0 +1,55 @@
+import type { FloatingPlacement } from '../../core/overlay';
+import type { IconInput } from '../../svg/types';
+/** A single actionable entry in a `DropdownMenu`/`ContextMenu`. */
+export interface MenuItem {
+    /** Visible label. */
+    label: string;
+    /** Value passed to `onSelect` when this item is chosen. */
+    value: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Disables this item. Defaults to `false`. */
+    disabled?: boolean;
+    /** Renders the item in the destructive color. Defaults to `false`. */
+    destructive?: boolean;
+}
+/** A visual divider between menu items. */
+export interface MenuSeparator {
+    separator: true;
+}
+/** A single entry rendered by a menu -- either a selectable item or a separator. */
+export type MenuEntry = MenuItem | MenuSeparator;
+/** Renders `entries` into `container`, wiring up click handling. Shared by `DropdownMenu` and `ContextMenu`. */
+export declare function renderMenuEntries(container: HTMLElement, entries: MenuEntry[], onSelect: (value: string) => void, onAfterSelect: () => void): void;
+/** Options accepted by the `DropdownMenu` factory. */
+export interface DropdownMenuOptions {
+    /** The element the menu is anchored to and toggled by. */
+    anchor: HTMLElement;
+    /** The menu's items/separators. */
+    items: MenuEntry[];
+    /** Side of the anchor the menu appears on. Defaults to `'bottom'`. */
+    placement?: FloatingPlacement;
+    /** Called when an enabled item is chosen. */
+    onSelect?: (value: string) => void;
+}
+/** The runtime control surface attached to every `DropdownMenu` element. */
+export interface DropdownMenuApi {
+    /** Opens the menu. */
+    open: () => void;
+    /** Closes the menu. */
+    close: () => void;
+    /** Toggles between open and closed. */
+    toggle: () => void;
+    /** Returns whether the menu is currently open. */
+    isOpen: () => boolean;
+    /** Replaces the full list of items/separators. */
+    setItems: (items: MenuEntry[]) => void;
+    /** Removes all listeners and detaches the menu from the DOM. */
+    destroy: () => void;
+}
+/** A `DropdownMenu` is a real `HTMLDivElement` (the floating menu) extended with `DropdownMenuApi`. */
+export type DropdownMenuElement = HTMLDivElement & DropdownMenuApi;
+/** This component's own CSS. Reused by `ContextMenu` under the same `menu` key, so it's only ever injected once. */
+export declare const menuCss = "\n.linteau-menu { position: fixed; z-index: 1200; min-width: 160px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }\n.linteau-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--linteau-radius-sm); font-size: 12px; color: var(--linteau-foreground); cursor: pointer }\n.linteau-menu-item:hover:not(.linteau-menu-item-disabled) { background: var(--linteau-accent) }\n.linteau-menu-item-disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-menu-item-destructive { color: var(--linteau-destructive) }\n.linteau-menu-separator { height: 1px; background: var(--linteau-border); margin: 4px 0 }\n";
+/** Creates a floating action menu anchored to another element, toggled by clicking that anchor. */
+export declare function DropdownMenu(options: DropdownMenuOptions): DropdownMenuElement;

package/dist/components/overlay/Popover.d.ts

@@ -0,0 +1,33 @@
+import type { FloatingPlacement } from '../../core/overlay';
+/** Options accepted by the `Popover` factory. */
+export interface PopoverOptions {
+    /** The element the popover is anchored to and toggled by. */
+    anchor: HTMLElement;
+    /** Initial panel content. */
+    content: HTMLElement | string;
+    /** Side of the anchor the panel appears on. Defaults to `'bottom'`. */
+    placement?: FloatingPlacement;
+    /** Closes the popover when clicking outside it. Defaults to `true`. */
+    closeOnClickOutside?: boolean;
+}
+/** The runtime control surface attached to every `Popover` element. */
+export interface PopoverApi {
+    /** Opens the popover and positions it against its anchor. */
+    open: () => void;
+    /** Closes the popover. */
+    close: () => void;
+    /** Toggles between open and closed. */
+    toggle: () => void;
+    /** Returns whether the popover is currently open. */
+    isOpen: () => boolean;
+    /** Replaces the panel content. */
+    setContent: (content: HTMLElement | string) => void;
+    /** Removes all listeners and detaches the popover from the DOM. */
+    destroy: () => void;
+}
+/** A `Popover` is a real `HTMLDivElement` (the floating panel) extended with `PopoverApi`. */
+export type PopoverElement = HTMLDivElement & PopoverApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const popoverCss = "\n.linteau-popover { position: fixed; z-index: 1200; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }\n";
+/** Creates a floating panel anchored to another element, toggled by clicking that anchor. */
+export declare function Popover(options: PopoverOptions): PopoverElement;

package/dist/components/radio/RadioGroup.d.ts

@@ -0,0 +1,37 @@
+/** A single selectable option within a `RadioGroup`. */
+export interface RadioOptionItem {
+    /** Visible label. */
+    label: string;
+    /** Unique value identifying this option. */
+    value: string;
+    /** Disables just this option. Defaults to `false`. */
+    disabled?: boolean;
+}
+/** Options accepted by the `RadioGroup` factory. */
+export interface RadioGroupOptions {
+    /** The list of selectable options. */
+    items: RadioOptionItem[];
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: string;
+    /** Disables every option. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the user picks a new option. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `RadioGroup` element. */
+export interface RadioGroupApi {
+    /** Returns the currently selected value, if any. */
+    getValue: () => string | undefined;
+    /** Programmatically selects a value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Detaches the group from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `RadioGroup` is a real `HTMLDivElement` extended with `RadioGroupApi`. */
+export type RadioGroupElement = HTMLDivElement & RadioGroupApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const radioCss = "\n.linteau-radio-group { display: flex; flex-direction: column; gap: 8px }\n.linteau-radio-row { display: flex; align-items: center; gap: 8px; cursor: pointer }\n.linteau-radio-row.linteau-disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-radio { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linteau-border); background: var(--linteau-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }\n.linteau-radio.linteau-checked { border-color: var(--linteau-primary) }\n.linteau-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--linteau-primary); opacity: 0; transition: opacity 100ms ease }\n.linteau-radio.linteau-checked .linteau-radio-dot { opacity: 1 }\n";
+/** Creates a single-select group of radio rows. */
+export declare function RadioGroup(options: RadioGroupOptions): RadioGroupElement;

package/dist/components/select/Combobox.d.ts

@@ -0,0 +1,42 @@
+import type { IconInput } from '../../svg/types';
+import type { SelectOptionItem } from './Select';
+/** Options accepted by the `Combobox` factory. */
+export interface ComboboxOptions {
+    /** Label rendered above the field. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** The list of selectable options, filtered live against the typed text. */
+    options: SelectOptionItem[];
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: string;
+    /** Placeholder shown when nothing is typed/selected. */
+    placeholder?: string;
+    /** Disables the field. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the user selects an option. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `Combobox` element. */
+export interface ComboboxApi {
+    /** Returns the currently selected value. */
+    getValue: () => string;
+    /** Programmatically selects a value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Replaces the full list of options. */
+    setOptions: (options: SelectOptionItem[]) => void;
+    /** Opens the suggestion list. */
+    open: () => void;
+    /** Closes the suggestion list. */
+    close: () => void;
+    /** Detaches the field from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `Combobox` is a real `HTMLDivElement` (the field wrapper) extended with `ComboboxApi`. */
+export type ComboboxElement = HTMLDivElement & ComboboxApi;
+/** This component's own CSS. Reused by `DatePicker` under the same `combobox` key, so it's only ever injected once. */
+export declare const comboboxCss = "\n.linteau-combobox { position: relative; display: flex; align-items: center }\n.linteau-combobox-input { padding-right: 28px }\n.linteau-combobox-chevron { position: absolute; right: 8px; pointer-events: none; color: var(--linteau-muted-foreground) }\n.linteau-combobox-list { position: fixed; z-index: 1200; min-width: 180px; max-height: 220px; overflow-y: auto; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }\n.linteau-combobox-option { padding: 6px 8px; border-radius: var(--linteau-radius-sm); font-size: 12px; cursor: pointer; color: var(--linteau-foreground) }\n.linteau-combobox-option-highlighted, .linteau-combobox-option:hover { background: var(--linteau-accent) }\n";
+/** Creates a filterable, type-to-search select -- a text input backed by a live-filtered dropdown of options. */
+export declare function Combobox(options: ComboboxOptions): ComboboxElement;

package/dist/components/select/Select.d.ts

@@ -0,0 +1,48 @@
+import type { IconInput } from '../../svg/types';
+/** A single option rendered inside a `Select`. */
+export interface SelectOptionItem {
+    /** Visible label. */
+    label: string;
+    /** Underlying value. */
+    value: string;
+    /** Disables just this option. Defaults to `false`. */
+    disabled?: boolean;
+}
+/** Options accepted by the `Select` factory. */
+export interface SelectOptions {
+    /** Label rendered before the dropdown. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** The list of selectable options. */
+    options: SelectOptionItem[];
+    /** Controlled value. When provided together with `onChange`, you own the state. */
+    value?: string;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: string;
+    /** Placeholder shown when no value is selected (renders as a disabled first option). */
+    placeholder?: string;
+    /** Disables the whole control. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the user picks a new option. */
+    onChange?: (value: string) => void;
+}
+/** The runtime control surface attached to every `Select` element. */
+export interface SelectApi {
+    /** Returns the currently selected value. */
+    getValue: () => string;
+    /** Programmatically selects a value (does not trigger `onChange`). */
+    setValue: (value: string) => void;
+    /** Replaces the full list of options, preserving selection where possible. */
+    setOptions: (options: SelectOptionItem[]) => void;
+    /** Enables/disables the control. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the select from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `Select` is a real `HTMLDivElement` (the field row) extended with `SelectApi`. */
+export type SelectElement = HTMLDivElement & SelectApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const selectCss = "\n.linteau-select-wrap { position: relative }\n.linteau-select { appearance: none; background: var(--linteau-secondary); color: var(--linteau-foreground); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm); padding: 6px 28px 6px 10px; font-size: 12px; font-family: inherit; cursor: pointer; transition: border-color 120ms ease }\n.linteau-select:disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-select:focus { outline: none; border-color: var(--linteau-ring); box-shadow: 0 0 0 2px color-mix(in oklch, var(--linteau-ring) 20%, transparent) }\n.linteau-select-chevron { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none }\n";
+/** Creates a labeled native select dropdown, restyled to match the design system. */
+export declare function Select(options: SelectOptions): SelectElement;

package/dist/components/slider/RangeSlider.d.ts

@@ -0,0 +1,43 @@
+import type { IconInput } from '../../svg/types';
+/** A `[low, high]` numeric pair. */
+export type RangeValue = [number, number];
+/** Options accepted by the `RangeSlider` factory. */
+export interface RangeSliderOptions {
+    /** Label rendered above the track. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Minimum value. */
+    min: number;
+    /** Maximum value. */
+    max: number;
+    /** Step increment. */
+    step: number;
+    /** Controlled `[low, high]` value. */
+    value?: RangeValue;
+    /** Uncontrolled initial `[low, high]` value, used only if `value` is omitted. */
+    defaultValue?: RangeValue;
+    /** Disables both thumbs. Defaults to `false`. */
+    disabled?: boolean;
+    /** Formats each displayed bound. Defaults to `String(value)`. */
+    format?: (value: number) => string;
+    /** Called on every change with the new `[low, high]` pair. */
+    onChange?: (value: RangeValue) => void;
+}
+/** The runtime control surface attached to every `RangeSlider` element. */
+export interface RangeSliderApi {
+    /** Returns the current `[low, high]` value. */
+    getValue: () => RangeValue;
+    /** Programmatically sets the value (does not trigger `onChange`). */
+    setValue: (value: RangeValue) => void;
+    /** Enables/disables both thumbs. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the slider from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `RangeSlider` is a real `HTMLDivElement` (the field wrapper) extended with `RangeSliderApi`. */
+export type RangeSliderElement = HTMLDivElement & RangeSliderApi;
+/** This component's own CSS. Depends on `.linteau-slider` (registered via the imported `sliderCss`) for its thumbs. */
+export declare const rangeSliderCss = "\n.linteau-range-track { position: relative; height: 20px; display: flex; align-items: center }\n.linteau-range-track::before { content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--linteau-secondary) }\n.linteau-range-track::after { content: ''; position: absolute; height: 6px; border-radius: 999px; background: var(--linteau-primary); left: var(--linteau-range-low, 0%); right: calc(100% - var(--linteau-range-high, 100%)) }\n.linteau-range-input { position: absolute; left: 0; right: 0; width: 100%; height: 20px; background: transparent; pointer-events: none; margin: 0 }\n.linteau-range-input::-webkit-slider-thumb { pointer-events: auto }\n.linteau-range-input::-moz-range-thumb { pointer-events: auto }\n";
+/** Creates a labeled dual-thumb range slider, supporting controlled and uncontrolled usage. */
+export declare function RangeSlider(options: RangeSliderOptions): RangeSliderElement;

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,41 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `Slider` factory. */
+export interface SliderOptions {
+    /** Label rendered above the track. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Minimum value. */
+    min: number;
+    /** Maximum value. */
+    max: number;
+    /** Step increment. */
+    step: number;
+    /** Controlled value. When provided together with `onChange`, you own the state. */
+    value?: number;
+    /** Uncontrolled initial value, used only if `value` is omitted. */
+    defaultValue?: number;
+    /** Disables interaction. Defaults to `false`. */
+    disabled?: boolean;
+    /** Formats the displayed value string. Defaults to `String(value)`. */
+    format?: (value: number) => string;
+    /** Called on every input event with the new numeric value. */
+    onChange?: (value: number) => void;
+}
+/** The runtime control surface attached to every `Slider` element. */
+export interface SliderApi {
+    /** Returns the current numeric value. */
+    getValue: () => number;
+    /** Programmatically sets the value (does not trigger `onChange`, clamped to `[min, max]`). */
+    setValue: (value: number) => void;
+    /** Enables/disables the slider. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the slider from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `Slider` is a real `HTMLDivElement` (the field wrapper) extended with `SliderApi`. */
+export type SliderElement = HTMLDivElement & SliderApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const sliderCss = "\n.linteau-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--linteau-primary) 0%, var(--linteau-primary) var(--linteau-fill, 0%), var(--linteau-secondary) var(--linteau-fill, 0%), var(--linteau-secondary) 100%); outline: none; transition: background 120ms ease }\n.linteau-slider:disabled { opacity: 0.5 }\n.linteau-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--linteau-primary); border: 2px solid var(--linteau-card); box-shadow: 0 0 0 1px var(--linteau-border); cursor: pointer; transition: transform 120ms ease }\n.linteau-slider::-webkit-slider-thumb:hover { transform: scale(1.15) }\n.linteau-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--linteau-primary); border: 2px solid var(--linteau-card); cursor: pointer }\n";
+/** Creates a labeled range slider with a live value readout, supporting controlled and uncontrolled usage. */
+export declare function Slider(options: SliderOptions): SliderElement;

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,35 @@
+import type { IconInput } from '../../svg/types';
+/** Options accepted by the `Switch` factory. */
+export interface SwitchOptions {
+    /** Label rendered next to the toggle. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Controlled checked state. When provided together with `onChange`, you own the state. */
+    checked?: boolean;
+    /** Uncontrolled initial state, used only if `checked` is omitted. Defaults to `false`. */
+    defaultChecked?: boolean;
+    /** Disables interaction. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the user toggles the switch. */
+    onChange?: (checked: boolean) => void;
+}
+/** The runtime control surface attached to every `Switch` element. */
+export interface SwitchApi {
+    /** Returns the current checked state. */
+    getValue: () => boolean;
+    /** Programmatically sets the checked state (does not trigger `onChange`). */
+    setValue: (checked: boolean) => void;
+    /** Updates the label text. */
+    setLabel: (label: string) => void;
+    /** Enables/disables the switch. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the switch from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `Switch` is a real `HTMLDivElement` (the row) extended with `SwitchApi`. */
+export type SwitchElement = HTMLDivElement & SwitchApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const switchCss = "\n.linteau-switch-row { display: flex; align-items: center; justify-content: space-between }\n.linteau-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--linteau-secondary); border: 1px solid var(--linteau-border); padding: 2px; cursor: pointer; display: flex; align-items: center; transition: background 150ms ease }\n.linteau-switch:disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-switch.linteau-checked { background: var(--linteau-primary) }\n.linteau-switch-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--linteau-card); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0) }\n.linteau-switch.linteau-checked .linteau-switch-thumb { transform: translateX(16px); background: var(--linteau-primary-foreground) }\n";
+/** Creates a labeled on/off toggle, supporting both controlled and uncontrolled usage. */
+export declare function Switch(options: SwitchOptions): SwitchElement;

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,39 @@
+import type { IconInput } from '../../svg/types';
+/** Visual style of a `Toggle`. */
+export type ToggleVariant = 'default' | 'outline';
+/** Sizing preset of a `Toggle`. */
+export type ToggleSize = 'sm' | 'default';
+/** Options accepted by the `Toggle` factory. */
+export interface ToggleOptions {
+    /** Visual style. Defaults to `'default'`. */
+    variant?: ToggleVariant;
+    /** Sizing preset. Defaults to `'default'`. */
+    size?: ToggleSize;
+    /** Optional icon rendered before the label. */
+    icon?: IconInput;
+    /** Controlled pressed state. When provided together with `onPressedChange`, you own the state. */
+    pressed?: boolean;
+    /** Uncontrolled initial pressed state, used only if `pressed` is omitted. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Disables interaction. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the user toggles the button. */
+    onPressedChange?: (pressed: boolean) => void;
+}
+/** The runtime control surface attached to every `Toggle` element. */
+export interface ToggleApi {
+    /** Returns the current pressed state. */
+    getPressed: () => boolean;
+    /** Programmatically sets the pressed state (does not trigger `onPressedChange`). */
+    setPressed: (pressed: boolean) => void;
+    /** Enables/disables the toggle. */
+    setDisabled: (disabled: boolean) => void;
+    /** Detaches the toggle from the DOM and its internal listener. */
+    destroy: () => void;
+}
+/** A `Toggle` is a real `HTMLButtonElement` extended with `ToggleApi`. */
+export type ToggleElement = HTMLButtonElement & ToggleApi;
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const toggleCss = "\n.linteau-toggle {\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  background: transparent;\n  color: var(--linteau-muted-foreground);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n}\n.linteau-toggle-default { padding: 8px 12px }\n.linteau-toggle-sm { padding: 5px 8px; font-size: 12px }\n.linteau-toggle:hover:not(:disabled) { background: var(--linteau-accent); color: var(--linteau-foreground) }\n.linteau-toggle:disabled { opacity: 0.5; cursor: not-allowed }\n.linteau-toggle-outline { border-color: var(--linteau-border) }\n.linteau-toggle.linteau-pressed { background: var(--linteau-accent); color: var(--linteau-foreground) }\n";
+/** Creates a single pressable toggle button -- a two-state control (like a checkbox rendered as a button), useful for toolbar options (bold, italic, view modes). */
+export declare function Toggle(text: string, options?: ToggleOptions): ToggleElement;

package/dist/components/toggle/ToggleGroup.d.ts

@@ -0,0 +1,47 @@
+import type { ToggleSize, ToggleVariant } from './Toggle';
+import type { IconInput } from '../../svg/types';
+/** A single item within a `ToggleGroup`. */
+export interface ToggleGroupItem {
+    /** Visible label. */
+    label: string;
+    /** Unique value identifying this item. */
+    value: string;
+    /** Optional icon shown before the label. */
+    icon?: IconInput;
+    /** Disables just this item. Defaults to `false`. */
+    disabled?: boolean;
+}
+/** Options accepted by the `ToggleGroup` factory. */
+export interface ToggleGroupOptions {
+    /** The items rendered as toggles. */
+    items: ToggleGroupItem[];
+    /** `'single'` allows one selected item at a time; `'multiple'` allows several. Defaults to `'single'`. */
+    type?: 'single' | 'multiple';
+    /** Controlled selected value(s) -- a `string` in `'single'` mode, a `string[]` in `'multiple'` mode. */
+    value?: string | string[];
+    /** Uncontrolled initial value(s), used only if `value` is omitted. */
+    defaultValue?: string | string[];
+    /** Visual style applied to every item. Defaults to `'outline'`. */
+    variant?: ToggleVariant;
+    /** Sizing preset applied to every item. Defaults to `'default'`. */
+    size?: ToggleSize;
+    /** Disables every item. Defaults to `false`. */
+    disabled?: boolean;
+    /** Called whenever the selection changes via user interaction. */
+    onChange?: (value: string | string[]) => void;
+}
+/** The runtime control surface attached to every `ToggleGroup` element. */
+export interface ToggleGroupApi {
+    /** Returns the current selected value(s). */
+    getValue: () => string | string[];
+    /** Programmatically sets the selected value(s) (does not trigger `onChange`). */
+    setValue: (value: string | string[]) => void;
+    /** Detaches the group from the DOM and its internal listeners. */
+    destroy: () => void;
+}
+/** A `ToggleGroup` is a real `HTMLDivElement` extended with `ToggleGroupApi`. */
+export type ToggleGroupElement = HTMLDivElement & ToggleGroupApi;
+/** This component's own CSS. Depends on `.linteau-toggle`, which `Toggle()` registers itself the moment `ToggleGroup` renders its first item. */
+export declare const toggleGroupCss = "\n.linteau-toggle-group { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm) }\n";
+/** Creates a group of toggle buttons supporting single- or multiple-selection, useful for view/alignment/format pickers. */
+export declare function ToggleGroup(options: ToggleGroupOptions): ToggleGroupElement;

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import type { FloatingPlacement } from '../../core/overlay';
+import type { Destroyable } from '../../core/types';
+/** Options accepted by the `Tooltip` factory. */
+export interface TooltipOptions {
+    /** Side of the anchor the tooltip appears on. Defaults to `'top'`. */
+    placement?: FloatingPlacement;
+    /** Milliseconds to wait before showing, after hover/focus starts. Defaults to `200`. */
+    delay?: number;
+}
+/**
+ * The runtime control surface returned by `Tooltip`. Unlike most components, this is a
+ * plain controller -- not an element -- because it attaches behavior to an existing anchor
+ * rather than creating a new one to place in your layout.
+ */
+export interface TooltipApi extends Destroyable {
+    /** Updates the tooltip's text content. */
+    setContent: (content: string) => void;
+}
+/** This component's own CSS, colocated and self-injected on first use. */
+export declare const tooltipCss = "\n.linteau-tooltip { position: fixed; z-index: 1300; background: var(--linteau-foreground); color: var(--linteau-background); font-size: 11px; font-weight: 500; padding: 5px 8px; border-radius: var(--linteau-radius-sm); pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) }\n";
+/** Attaches a floating text tooltip to `anchor`, shown on hover/focus. */
+export declare function Tooltip(anchor: HTMLElement, content: string, options?: TooltipOptions): TooltipApi;

package/dist/core/classNames.d.ts

@@ -0,0 +1,6 @@
+/** Every class name Linteau generates starts with this prefix, so it can never collide with a consumer's own CSS. */
+export declare const PREFIX: 'linteau-';
+/** Prefixes a class-name fragment with the library namespace, e.g. `px('button')` -> `'linteau-button'`. */
+export declare function px(part: string): string;
+/** Joins class-name fragments, dropping any falsy value. Handy for conditional classes. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/core/content.d.ts

@@ -0,0 +1,2 @@
+/** Replaces `target`'s children with either an appended element or plain text. Shared by every component with a "content" slot. */
+export declare function fillContent(target: HTMLElement, content: HTMLElement | string): void;

package/dist/core/controller.d.ts

@@ -0,0 +1,34 @@
+/** A listener function subscribed to a single event of type `T`. */
+export type Listener<T> = (payload: T) => void;
+/** A minimal, fully-typed event emitter used internally by stateful components. */
+export interface Emitter<TEvents extends Record<string, unknown>> {
+    /** Subscribes to an event, returning an unsubscribe function. */
+    on<K extends keyof TEvents>(event: K, listener: Listener<TEvents[K]>): () => void;
+    /** Removes a previously-subscribed listener. */
+    off<K extends keyof TEvents>(event: K, listener: Listener<TEvents[K]>): void;
+    /** Synchronously notifies every listener subscribed to `event`. */
+    emit<K extends keyof TEvents>(event: K, payload: TEvents[K]): void;
+    /** Removes every listener for every event. */
+    clear: () => void;
+}
+/** Creates a standalone, strongly-typed event emitter. */
+export declare function createEmitter<TEvents extends Record<string, unknown>>(): Emitter<TEvents>;
+/**
+ * Merges a strongly-typed controller API onto a real DOM element, producing
+ * a single value that IS a valid Node (append it anywhere) AND a fully
+ * controllable component instance (no wrapper object required).
+ *
+ * This is the pattern every Linteau component factory returns through.
+ *
+ * @typeParam TElement - The native element type being extended, e.g. `HTMLButtonElement`.
+ * @typeParam TApi - The extra methods/properties to attach.
+ * @param element - The native element instance created by the component.
+ * @param api - The controller methods/properties to merge onto the element.
+ * @returns The same element instance, typed as `TElement & TApi`.
+ */
+export declare function attachController<TElement extends HTMLElement, TApi extends object>(element: TElement, api: TApi): TElement & TApi;
+/** A small helper for collecting and running teardown callbacks in `destroy()` implementations. */
+export declare function createCleanup(): {
+    add: (fn: () => void) => void;
+    run: () => void;
+};

package/dist/core/dom.d.ts

@@ -0,0 +1,14 @@
+/**
+ * True when running in an environment with a real `document`/`window`
+ * (browser, or Node/Bun with a DOM shim like `happy-dom`/`linkedom`).
+ */
+export declare function isBrowser(): boolean;
+/**
+ * Guards a component factory against being called without a DOM, throwing
+ * one clear, actionable error instead of a cryptic `ReferenceError`.
+ *
+ * @param componentName - Name shown in the thrown error, e.g. `'Button'`.
+ */
+export declare function assertDom(componentName: string): void;
+/** Tiny `document.createElement` wrapper that also applies an initial class name. */
+export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string): HTMLElementTagNameMap[K];

package/dist/core/overlay.d.ts

@@ -0,0 +1,14 @@
+/** Placement of a floating element relative to its anchor. */
+export type FloatingPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Calls `callback` when a mouse press lands outside every element in `targets`.
+ * Accepts one or more elements so a floating panel and its anchor can both be excluded.
+ * @returns An unsubscribe function.
+ */
+export declare function onClickOutside(targets: HTMLElement | HTMLElement[], callback: () => void): () => void;
+/** Calls `callback` whenever the Escape key is pressed. @returns An unsubscribe function. */
+export declare function onEscapeKey(callback: () => void): () => void;
+/** Locks page scroll (used by modal-like overlays). @returns A function that restores the previous overflow value. */
+export declare function lockBodyScroll(): () => void;
+/** Positions `floating` next to `anchor`, clamped to stay inside the viewport. */
+export declare function positionFloating(anchor: HTMLElement, floating: HTMLElement, placement?: FloatingPlacement, gap?: number): void;

package/dist/core/styleInjector.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Injects a single CSS block exactly once, keyed by `key`. Safe to call from every
+ * instance of every component -- the second and later calls for the same key are no-ops.
+ *
+ * Each component factory calls this with its own colocated CSS string right after
+ * `assertDom`, so consumers never import or link any CSS file themselves -- and an app
+ * that only imports `Button` never pays for `Dialog`'s or `Table`'s styles.
+ *
+ * @param key - A stable identifier for this CSS block (typically the component name). Shared blocks (e.g. field-base) reuse the same key across multiple components to dedupe.
+ * @param css - The raw CSS text to inject.
+ */
+export declare function ensureComponentStyles(key: string, css: string): void;