@aiaiai-pt/design-system 0.3.5 → 0.3.7

package/components/Panel.svelte.d.ts

@@ -0,0 +1,52 @@
+export default Panel;
+type Panel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Panel
+ *
+ * Slide-over drawer surface. Opens from the left or right edge.
+ * Consumes --panel-* tokens from components.css.
+ *
+ * @example Right (default)
+ * <Panel open={showEditor} title="Edit Step" onclose={() => showEditor = false}>
+ *   Panel content here
+ * </Panel>
+ *
+ * @example Left side
+ * <Panel open side="left" title="History" onclose={() => showHistory = false}>
+ *   Navigation content
+ * </Panel>
+ *
+ * @example Persistent (no backdrop, inline layout)
+ * <Panel open persistent side="left" title="History">
+ *   Always-visible sidebar content
+ * </Panel>
+ */
+declare const Panel: import("svelte").Component<{
+    open?: boolean;
+    title: any;
+    width?: string;
+    side?: string;
+    persistent?: boolean;
+    scrollBody?: boolean;
+    onclose: any;
+    class?: string;
+    header?: any;
+    children?: any;
+    footer?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    open?: boolean;
+    title: any;
+    width?: string;
+    side?: string;
+    persistent?: boolean;
+    scrollBody?: boolean;
+    onclose: any;
+    class?: string;
+    header?: any;
+    children?: any;
+    footer?: any;
+} & Record<string, any>;

package/components/Popover.svelte.d.ts

@@ -0,0 +1,43 @@
+export default Popover;
+type Popover = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Popover
+ *
+ * Positioned floating content anchored to a trigger element.
+ * Uses position: fixed + JS positioning (no CSS Anchor).
+ * Consumes --popover-* tokens from components.css.
+ *
+ * @example
+ * <button bind:this={anchor} onclick={() => open = !open}>Options</button>
+ * <Popover bind:open {anchor} placement="bottom-start">
+ *   <p>Popover content</p>
+ * </Popover>
+ *
+ * @example Match trigger width
+ * <Popover bind:open {anchor} matchWidth>
+ *   <ul>...</ul>
+ * </Popover>
+ */
+declare const Popover: import("svelte").Component<{
+    open?: boolean;
+    anchor?: any;
+    placement?: string;
+    offset?: number;
+    matchWidth?: boolean;
+    onclose?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "open">;
+type $$ComponentProps = {
+    open?: boolean;
+    anchor?: any;
+    placement?: string;
+    offset?: number;
+    matchWidth?: boolean;
+    onclose?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Progress.svelte.d.ts

@@ -0,0 +1,29 @@
+export default Progress;
+type Progress = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Progress
+ *
+ * Determinate or indeterminate progress bar.
+ * Consumes --progress-* tokens from components.css.
+ *
+ * @example Determinate
+ * <Progress value={65} />
+ *
+ * @example Indeterminate
+ * <Progress indeterminate />
+ */
+declare const Progress: import("svelte").Component<{
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    class?: string;
+} & Record<string, any>;

package/components/SearchInput.svelte.d.ts

@@ -0,0 +1,64 @@
+export default SearchInput;
+type SearchInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * SearchInput
+ *
+ * Text input optimized for search with built-in icon, clear button,
+ * debounced callback, optional keyboard shortcut hint, and loading state.
+ * Extends the Input token system (--input-*) with search-specific tokens (--search-*).
+ *
+ * @example Basic
+ * <SearchInput placeholder="Search transforms..." onsearch={handleSearch} />
+ *
+ * @example With shortcut hint
+ * <SearchInput placeholder="Search..." shortcutHint="⌘K" onsearch={handleSearch} />
+ *
+ * @example Loading state
+ * <SearchInput placeholder="Search..." loading={true} onsearch={handleSearch} />
+ *
+ * @example Collapsible (for toolbars / mobile)
+ * <SearchInput collapsible placeholder="Search..." onsearch={handleSearch} />
+ *
+ * @example Inside a modal (preserve value on Escape)
+ * <SearchInput holdValueOnEscape placeholder="Search..." onsearch={handleSearch} />
+ *
+ * @example No debounce (instant)
+ * <SearchInput debounce={0} onsearch={handleSearch} />
+ */
+declare const SearchInput: import("svelte").Component<{
+    value?: string;
+    placeholder?: string;
+    size?: string;
+    debounce?: number;
+    loading?: boolean;
+    collapsible?: boolean;
+    shortcutHint?: any;
+    holdValueOnEscape?: boolean;
+    disabled?: boolean;
+    label?: string;
+    id?: any;
+    class?: string;
+    oninput?: any;
+    onsearch?: any;
+    onclear?: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    size?: string;
+    debounce?: number;
+    loading?: boolean;
+    collapsible?: boolean;
+    shortcutHint?: any;
+    holdValueOnEscape?: boolean;
+    disabled?: boolean;
+    label?: string;
+    id?: any;
+    class?: string;
+    oninput?: any;
+    onsearch?: any;
+    onclear?: any;
+} & Record<string, any>;

package/components/Select.svelte.d.ts

@@ -0,0 +1,47 @@
+export default Select;
+type Select = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Select
+ *
+ * Native select with label, help text, and error state.
+ * Consumes --input-* tokens from components.css.
+ *
+ * Usage patterns:
+ * - Two-way binding: `<Select bind:value={myVar} options={opts} />`
+ * - Controlled: `<Select value={myVar} onchange={(val) => myVar = val} options={opts} />`
+ *
+ * @example
+ * <Select label="COUNTRY" placeholder="Select a country" options={[
+ *   { value: 'pt', label: 'Portugal' },
+ *   { value: 'br', label: 'Brazil' },
+ * ]} />
+ */
+declare const Select: import("svelte").Component<{
+    label?: any;
+    placeholder?: any;
+    value?: any;
+    options?: any[];
+    onchange?: any;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    id?: any;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    label?: any;
+    placeholder?: any;
+    value?: any;
+    options?: any[];
+    onchange?: any;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    id?: any;
+    class?: string;
+} & Record<string, any>;

package/components/Separator.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Separator;
+type Separator = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Separator
+ *
+ * Visual divider between content sections.
+ * Consumes --separator-* tokens from components.css.
+ *
+ * @example Horizontal
+ * <Separator />
+ *
+ * @example Vertical (inside a flex row)
+ * <Separator orientation="vertical" />
+ */
+declare const Separator: import("svelte").Component<{
+    orientation?: string;
+    decorative?: boolean;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    orientation?: string;
+    decorative?: boolean;
+    class?: string;
+} & Record<string, any>;

package/components/Sidebar.svelte.d.ts

@@ -0,0 +1,38 @@
+export default Sidebar;
+type Sidebar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Sidebar
+ *
+ * Vertical navigation container with collapsible support.
+ * Children (SidebarItem, SidebarSection) read collapsed state via context.
+ * Consumes --nav-sidebar-* tokens from components.css.
+ *
+ * @example
+ * <Sidebar bind:collapsed>
+ *   {#snippet header()}
+ *     <span class="type-label">AIAIAI</span>
+ *   {/snippet}
+ *   <SidebarSection title="WORKSPACE" />
+ *   <SidebarItem href="/dashboard" active>
+ *     {#snippet icon()}<DashboardIcon />{/snippet}
+ *     DASHBOARD
+ *   </SidebarItem>
+ * </Sidebar>
+ */
+declare const Sidebar: import("svelte").Component<{
+    collapsed?: boolean;
+    class?: string;
+    header?: any;
+    footer?: any;
+    children?: any;
+} & Record<string, any>, {}, "collapsed">;
+type $$ComponentProps = {
+    collapsed?: boolean;
+    class?: string;
+    header?: any;
+    footer?: any;
+    children?: any;
+} & Record<string, any>;

package/components/SidebarItem.svelte.d.ts

@@ -0,0 +1,48 @@
+export default SidebarItem;
+type SidebarItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * SidebarItem
+ *
+ * Navigation item for use inside Sidebar.
+ * Reads collapsed state from Sidebar context — hides label and badge when collapsed.
+ * Consumes --nav-item-* tokens from components.css.
+ *
+ * @example Button
+ * <SidebarItem active onclick={() => navigate('/')}>
+ *   {#snippet icon()}<svg>...</svg>{/snippet}
+ *   DASHBOARD
+ * </SidebarItem>
+ *
+ * @example Link
+ * <SidebarItem href="/settings">
+ *   {#snippet icon()}<svg>...</svg>{/snippet}
+ *   SETTINGS
+ * </SidebarItem>
+ *
+ * @example With badge
+ * <SidebarItem href="/inbox" badge={3}>
+ *   {#snippet icon()}<svg>...</svg>{/snippet}
+ *   INBOX
+ * </SidebarItem>
+ */
+declare const SidebarItem: import("svelte").Component<{
+    active?: boolean;
+    disabled?: boolean;
+    href?: any;
+    badge?: any;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    active?: boolean;
+    disabled?: boolean;
+    href?: any;
+    badge?: any;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>;

package/components/SidebarSection.svelte.d.ts

@@ -0,0 +1,23 @@
+export default SidebarSection;
+type SidebarSection = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * SidebarSection
+ *
+ * Section header for grouping sidebar items.
+ * Hidden when Sidebar is collapsed (reads context).
+ * Consumes --nav-section-* tokens from components.css.
+ *
+ * @example
+ * <SidebarSection title="WORKSPACE" />
+ */
+declare const SidebarSection: import("svelte").Component<{
+    title: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    title: any;
+    class?: string;
+} & Record<string, any>;

package/components/Skeleton.svelte.d.ts

@@ -0,0 +1,34 @@
+export default Skeleton;
+type Skeleton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Skeleton
+ *
+ * Loading placeholder with shimmer animation.
+ * Consumes --skeleton-* tokens from components.css.
+ *
+ * @example Text line
+ * <Skeleton width="80%" height="16px" />
+ *
+ * @example Circle (avatar)
+ * <Skeleton width="40px" height="40px" circle />
+ *
+ * @example Card
+ * <Skeleton width="100%" height="120px" radius="var(--radius-md)" />
+ */
+declare const Skeleton: import("svelte").Component<{
+    width?: string;
+    height?: string;
+    circle?: boolean;
+    radius?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    width?: string;
+    height?: string;
+    circle?: boolean;
+    radius?: any;
+    class?: string;
+} & Record<string, any>;

package/components/Status.svelte.d.ts

@@ -0,0 +1,31 @@
+export default Status;
+type Status = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Status
+ *
+ * Colored indicator dot with label. Used for real-time status, health, presence.
+ * Consumes --status-* tokens from components.css.
+ *
+ * Dot shapes encode meaning: circle=success, triangle=warning, diamond=error, ring=inactive.
+ *
+ * @example
+ * <Status variant="success">ACTIVE</Status>
+ *
+ * @example Pulsing
+ * <Status variant="warning" pulse>DEGRADED</Status>
+ */
+declare const Status: import("svelte").Component<{
+    variant?: string;
+    pulse?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    pulse?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Stepper.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Stepper;
+type Stepper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Stepper
+ *
+ * Horizontal step indicator for multi-step flows.
+ * Consumes --stepper-* tokens from components.css.
+ *
+ * @example
+ * <Stepper steps={[
+ *   { label: 'Source', status: 'complete' },
+ *   { label: 'Configure', status: 'active' },
+ *   { label: 'Review', status: 'upcoming' },
+ * ]} />
+ */
+declare const Stepper: import("svelte").Component<{
+    steps?: any[];
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    steps?: any[];
+    class?: string;
+} & Record<string, any>;

package/components/Tab.svelte.d.ts

@@ -0,0 +1,30 @@
+export default Tab;
+type Tab = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tab
+ *
+ * Individual tab trigger inside a TabList.
+ * Reads active state from Tabs context.
+ * Consumes --tabs-trigger-* tokens from components.css.
+ *
+ * @example
+ * <Tab value="overview">OVERVIEW</Tab>
+ *
+ * @example Disabled
+ * <Tab value="admin" disabled>ADMIN</Tab>
+ */
+declare const Tab: import("svelte").Component<{
+    value: any;
+    disabled?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value: any;
+    disabled?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/TabList.svelte.d.ts

@@ -0,0 +1,25 @@
+export default TabList;
+type TabList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TabList
+ *
+ * Horizontal bar containing Tab triggers.
+ * Consumes --tabs-list-* tokens from components.css.
+ *
+ * @example
+ * <TabList>
+ *   <Tab value="one">ONE</Tab>
+ *   <Tab value="two">TWO</Tab>
+ * </TabList>
+ */
+declare const TabList: import("svelte").Component<{
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/TabPanel.svelte.d.ts

@@ -0,0 +1,27 @@
+export default TabPanel;
+type TabPanel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TabPanel
+ *
+ * Content panel shown when its matching Tab is active.
+ * Reads active state from Tabs context.
+ * Consumes --tabs-content-* tokens from components.css.
+ *
+ * @example
+ * <TabPanel value="overview">
+ *   Overview content goes here.
+ * </TabPanel>
+ */
+declare const TabPanel: import("svelte").Component<{
+    value: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    value: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Tabs.svelte.d.ts

@@ -0,0 +1,31 @@
+export default Tabs;
+type Tabs = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tabs
+ *
+ * Container for tabbed interface. Provides context to TabList, Tab, and TabPanel.
+ * Consumes --tabs-* tokens from components.css.
+ *
+ * @example
+ * <Tabs bind:value={activeTab}>
+ *   <TabList>
+ *     <Tab value="overview">OVERVIEW</Tab>
+ *     <Tab value="settings">SETTINGS</Tab>
+ *   </TabList>
+ *   <TabPanel value="overview">Overview content</TabPanel>
+ *   <TabPanel value="settings">Settings content</TabPanel>
+ * </Tabs>
+ */
+declare const Tabs: import("svelte").Component<{
+    value?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Tag.svelte.d.ts

@@ -0,0 +1,29 @@
+export default Tag;
+type Tag = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tag
+ *
+ * Categorization label. Bordered, optionally removable.
+ * Consumes --tag-* tokens from components.css.
+ *
+ * @example
+ * <Tag>SVELTE</Tag>
+ *
+ * @example Removable
+ * <Tag removable onremove={() => console.log('removed')}>CSS</Tag>
+ */
+declare const Tag: import("svelte").Component<{
+    removable?: boolean;
+    onremove?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    removable?: boolean;
+    onremove?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Textarea.svelte.d.ts

@@ -0,0 +1,42 @@
+export default Textarea;
+type Textarea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Textarea
+ *
+ * Multi-line text input with label, help text, and error state.
+ * Values displayed in Berkeley Mono (data font).
+ * Consumes --input-* and --textarea-* tokens from components.css.
+ *
+ * @example
+ * <Textarea label="DESCRIPTION" placeholder="Enter a description..." rows={4} />
+ *
+ * @example With error
+ * <Textarea label="SQL QUERY" value="SELCT *" error="Syntax error near SELCT" />
+ */
+declare const Textarea: import("svelte").Component<{
+    label?: any;
+    placeholder?: any;
+    value?: string;
+    help?: any;
+    error?: any;
+    rows?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: any;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    label?: any;
+    placeholder?: any;
+    value?: string;
+    help?: any;
+    error?: any;
+    rows?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: any;
+    class?: string;
+} & Record<string, any>;