@aiaiai-pt/design-system 0.3.6 → 0.3.8

package/components/Alert.svelte.d.ts

@@ -0,0 +1,35 @@
+export default Alert;
+type Alert = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Alert
+ *
+ * Inline callout for contextual messages.
+ * Unlike Toast (floating, transient), Alert is in-flow and persistent.
+ * Consumes --alert-* tokens from components.css.
+ *
+ * @example Info
+ * <Alert variant="info">
+ *   <strong>Note:</strong> This pipeline requires a source connection.
+ * </Alert>
+ *
+ * @example Error with icon
+ * <Alert variant="error">
+ *   {#snippet icon()}<svg>...</svg>{/snippet}
+ *   <strong>Build failed.</strong> Check the CI logs for details.
+ * </Alert>
+ */
+declare const Alert: import("svelte").Component<{
+    variant?: string;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>;

package/components/Badge.svelte.d.ts

@@ -0,0 +1,31 @@
+export default Badge;
+type Badge = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Badge
+ *
+ * Semantic status label. Pill-shaped, mono font, color-coded.
+ * Consumes --badge-* tokens from components.css.
+ *
+ * @example
+ * <Badge variant="success">PASSED</Badge>
+ *
+ * @example With dot
+ * <Badge variant="info" dot>SYNCING</Badge>
+ */
+declare const Badge: import("svelte").Component<{
+    variant?: string;
+    dot?: boolean;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    dot?: boolean;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>;

package/components/BottomNav.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BottomNav;
+type BottomNav = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * BottomNav
+ *
+ * Mobile bottom navigation bar.
+ * Consumes --nav-bottom-* tokens from components.css.
+ *
+ * @example
+ * <BottomNav>
+ *   <BottomNavItem active label="Home">
+ *     {#snippet icon()}<svg>...</svg>{/snippet}
+ *   </BottomNavItem>
+ * </BottomNav>
+ */
+declare const BottomNav: import("svelte").Component<{
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/BottomNavItem.svelte.d.ts

@@ -0,0 +1,39 @@
+export default BottomNavItem;
+type BottomNavItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * BottomNavItem
+ *
+ * Individual item in a BottomNav.
+ * Consumes --nav-bottom-* tokens from components.css.
+ *
+ * @example
+ * <BottomNavItem active label="Home" onclick={() => goto('/')}>
+ *   {#snippet icon()}<svg>...</svg>{/snippet}
+ * </BottomNavItem>
+ *
+ * @example With badge dot
+ * <BottomNavItem label="Activity" badge>
+ *   {#snippet icon()}<svg>...</svg>{/snippet}
+ * </BottomNavItem>
+ */
+declare const BottomNavItem: import("svelte").Component<{
+    active?: boolean;
+    disabled?: boolean;
+    href?: any;
+    label: any;
+    badge?: boolean;
+    class?: string;
+    icon?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    active?: boolean;
+    disabled?: boolean;
+    href?: any;
+    label: any;
+    badge?: boolean;
+    class?: string;
+    icon?: any;
+} & Record<string, any>;

package/components/Button.svelte.d.ts

@@ -0,0 +1,58 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Button
+ *
+ * Four variants, three sizes. Labels always mono (Berkeley Mono).
+ * Renders as `<a>` when `href` is provided, `<button>` otherwise.
+ * Consumes --button-* tokens from components.css.
+ *
+ * @example
+ * <Button variant="primary" size="md">CREATE</Button>
+ *
+ * @example With icon
+ * <Button variant="secondary" size="sm">
+ *   {#snippet icon()}<PhPlus size={16} />{/snippet}
+ *   ADD ITEM
+ * </Button>
+ *
+ * @example As link
+ * <Button variant="secondary" size="sm" href="/some/path">
+ *   GO THERE
+ * </Button>
+ *
+ * @example Loading
+ * <Button variant="primary" loading>SAVING</Button>
+ *
+ * @example Icon only
+ * <Button variant="ghost" size="md" iconOnly aria-label="Settings">
+ *   {#snippet icon()}<PhGear size={16} />{/snippet}
+ * </Button>
+ */
+declare const Button: import("svelte").Component<{
+    variant?: string;
+    size?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    iconOnly?: boolean;
+    type?: string;
+    href?: any;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    size?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    iconOnly?: boolean;
+    type?: string;
+    href?: any;
+    class?: string;
+    icon?: any;
+    children?: any;
+} & Record<string, any>;

package/components/Card.svelte.d.ts

@@ -0,0 +1,36 @@
+export default Card;
+type Card = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Card
+ *
+ * Surface container. Three variants: flat, bordered (default), elevated.
+ * Content-agnostic. Consumes --card-* tokens from components.css.
+ *
+ * @example Bordered (default)
+ * <Card>Content here</Card>
+ *
+ * @example Elevated
+ * <Card variant="elevated">Floating content</Card>
+ *
+ * @example Interactive + selectable
+ * <Card interactive selected={isSelected} onclick={() => select(id)}>
+ *   Clickable card
+ * </Card>
+ */
+declare const Card: import("svelte").Component<{
+    variant?: string;
+    interactive?: boolean;
+    selected?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    interactive?: boolean;
+    selected?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/CardGrid.svelte.d.ts

@@ -0,0 +1,42 @@
+export default CardGrid;
+type CardGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * CardGrid
+ *
+ * Responsive grid layout for cards. Standardizes column counts and gaps
+ * across all card grid usages in the application.
+ *
+ * Uses --grid-gutter token for consistent gap spacing.
+ *
+ * @example Default (3-column card grid)
+ * <CardGrid>
+ *   <Card>...</Card>
+ *   <Card>...</Card>
+ *   <Card>...</Card>
+ * </CardGrid>
+ *
+ * @example Stats row (4-column, compact)
+ * <CardGrid columns="4">
+ *   <Card><StatValue /></Card>
+ *   <Card><StatValue /></Card>
+ * </CardGrid>
+ *
+ * @example 2-column layout
+ * <CardGrid columns="2">
+ *   <Card>...</Card>
+ *   <Card>...</Card>
+ * </CardGrid>
+ */
+declare const CardGrid: import("svelte").Component<{
+    columns?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    columns?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Checkbox.svelte.d.ts

@@ -0,0 +1,33 @@
+export default Checkbox;
+type Checkbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Checkbox
+ *
+ * Checkbox with label. Supports checked, indeterminate, and disabled states.
+ * Consumes --checkbox-* tokens from components.css.
+ *
+ * @example
+ * <Checkbox label="Accept terms" bind:checked />
+ *
+ * @example Indeterminate
+ * <Checkbox label="Select all" indeterminate />
+ */
+declare const Checkbox: import("svelte").Component<{
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: any;
+    id?: any;
+    class?: string;
+} & Record<string, any>, {}, "checked">;
+type $$ComponentProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: any;
+    id?: any;
+    class?: string;
+} & Record<string, any>;

package/components/CodeBlock.svelte.d.ts

@@ -0,0 +1,43 @@
+export default CodeBlock;
+type CodeBlock = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * CodeBlock
+ *
+ * Formatted code display with optional line numbers.
+ * Consumes --code-* tokens from components.css.
+ *
+ * Syntax highlighting is the consumer's responsibility (Prism, Shiki, etc).
+ * This component handles layout, line numbers, and copy.
+ *
+ * @example
+ * <CodeBlock code="SELECT * FROM users WHERE active = true;" language="sql" />
+ *
+ * @example Without line numbers
+ * <CodeBlock code="pip install pandas" lineNumbers={false} />
+ *
+ * @example With highlighted HTML (pre-highlighted by consumer)
+ * <CodeBlock language="python" lineNumbers>
+ *   {#snippet content()}
+ *     <span class="token keyword">def</span> <span class="token function">main</span>():
+ *   {/snippet}
+ * </CodeBlock>
+ */
+declare const CodeBlock: import("svelte").Component<{
+    code?: any;
+    language?: any;
+    lineNumbers?: boolean;
+    copyable?: boolean;
+    class?: string;
+    content?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    code?: any;
+    language?: any;
+    lineNumbers?: boolean;
+    copyable?: boolean;
+    class?: string;
+    content?: any;
+} & Record<string, any>;

package/components/CodeEditor.svelte.d.ts

@@ -0,0 +1,41 @@
+export default CodeEditor;
+type CodeEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * CodeEditor
+ *
+ * Editable code editor wrapping CodeMirror 6.
+ * Styled from --code-* tokens to match CodeBlock appearance.
+ * Requires @codemirror/* peer dependencies installed by the consumer.
+ *
+ * @example SQL editor
+ * <CodeEditor bind:value={sql} language="sql" />
+ *
+ * @example Readonly Python
+ * <CodeEditor value={code} readonly language="python" minLines={10} />
+ *
+ * @example Empty with placeholder
+ * <CodeEditor language="sql" placeholder="Enter your query..." />
+ */
+declare const CodeEditor: import("svelte").Component<{
+    value?: string;
+    language?: string;
+    readonly?: boolean;
+    placeholder?: string;
+    lineNumbers?: boolean;
+    minLines?: number;
+    maxLines?: number;
+    class?: string;
+}, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    language?: string;
+    readonly?: boolean;
+    placeholder?: string;
+    lineNumbers?: boolean;
+    minLines?: number;
+    maxLines?: number;
+    class?: string;
+};

package/components/CollapsibleSection.svelte.d.ts

@@ -0,0 +1,43 @@
+export default CollapsibleSection;
+type CollapsibleSection = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * CollapsibleSection
+ *
+ * Animated expand/collapse container for grouped content.
+ * Built on native <details>/<summary> for no-JS accessibility.
+ * Consumes --type-label-* and --color-* tokens.
+ *
+ * @example Basic
+ * <CollapsibleSection title="Advanced Options" bind:open>
+ *   <p>Content here</p>
+ * </CollapsibleSection>
+ *
+ * @example With badge count and action buttons
+ * <CollapsibleSection title="Filters" bind:open badge={3}>
+ *   {#snippet actions()}
+ *     <Button variant="ghost" size="sm">Clear</Button>
+ *   {/snippet}
+ *   <p>Filter content</p>
+ * </CollapsibleSection>
+ */
+declare const CollapsibleSection: import("svelte").Component<{
+    title?: string;
+    open?: boolean;
+    badge?: any;
+    defaultOpen?: boolean;
+    class?: string;
+    actions?: any;
+    children?: any;
+} & Record<string, any>, {}, "open">;
+type $$ComponentProps = {
+    title?: string;
+    open?: boolean;
+    badge?: any;
+    defaultOpen?: boolean;
+    class?: string;
+    actions?: any;
+    children?: any;
+} & Record<string, any>;

package/components/Combobox.svelte.d.ts

@@ -0,0 +1,60 @@
+export default Combobox;
+export type ComboboxItem = {
+    value: string;
+    label: string;
+    group?: string;
+    description?: string;
+};
+type Combobox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Combobox
+ *
+ * Searchable select composing Input + Popover + filtered list.
+ * Supports grouped items, description text, and highlighted matches.
+ * Consumes --combobox-* tokens from components.css.
+ *
+ * @example Basic
+ * <Combobox
+ *   label="FUNCTION"
+ *   items={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
+ *   bind:value={selected}
+ * />
+ *
+ * @example With groups and descriptions
+ * <Combobox
+ *   label="NODE TYPE"
+ *   placeholder="Search node types..."
+ *   items={[
+ *     { value: 'llm', label: 'LLM', group: 'Processing', description: 'AI model call' },
+ *     { value: 'fn', label: 'Function', group: 'Integration', description: 'HTTP endpoint' },
+ *   ]}
+ *   bind:value={selected}
+ * />
+ */
+declare const Combobox: import("svelte").Component<{
+    items?: any[];
+    value?: string;
+    label?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: any;
+    help?: any;
+    size?: string;
+    onchange?: any;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    items?: any[];
+    value?: string;
+    label?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: any;
+    help?: any;
+    size?: string;
+    onchange?: any;
+    class?: string;
+} & Record<string, any>;

package/components/CommandPalette.svelte.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Simple fuzzy score: returns 0-1 for how well query matches text.
+ * 0 = no match, 1 = exact prefix match. Based on command-score heuristics.
+ * @param {string} text
+ * @param {string} query
+ * @returns {number}
+ */
+export function commandScore(text: string, query: string): number;
+export default CommandPalette;
+type CommandPalette = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * CommandPalette
+ *
+ * Modal search + command launcher triggered by keyboard shortcut.
+ * Supports built-in fuzzy scoring, grouped results, keyboard navigation,
+ * and both declarative (sections prop) and composable (children) APIs.
+ * Consumes --palette-* tokens from components.css.
+ *
+ * @example Declarative
+ * <CommandPalette
+ *   bind:open={paletteOpen}
+ *   trigger="mod+k"
+ *   placeholder="Type a command or search..."
+ *   sections={[
+ *     { heading: 'Recent', items: [
+ *       { value: 'pipeline-1', label: 'Customer ETL', onselect: () => goto('/pipelines/1') },
+ *     ]},
+ *     { heading: 'Actions', items: [
+ *       { value: 'new-pipeline', label: 'Create pipeline', shortcut: '⌘N', onselect: createPipeline },
+ *     ]},
+ *   ]}
+ * />
+ *
+ * @example Composable
+ * <CommandPalette.Root bind:open={paletteOpen} trigger="mod+k">
+ *   <CommandPalette.Input placeholder="Search..." />
+ *   <CommandPalette.List>
+ *     <CommandPalette.Group heading="Recent">
+ *       <CommandPalette.Item value="pipeline-1" onselect={...}>Customer ETL</CommandPalette.Item>
+ *     </CommandPalette.Group>
+ *     <CommandPalette.Empty>No results found</CommandPalette.Empty>
+ *   </CommandPalette.List>
+ * </CommandPalette.Root>
+ */
+declare const CommandPalette: import("svelte").Component<{
+    open?: boolean;
+    trigger?: string;
+    placeholder?: string;
+    sections?: any[];
+    shouldFilter?: boolean;
+    loop?: boolean;
+    onopenchange?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "open">;
+type $$ComponentProps = {
+    open?: boolean;
+    trigger?: string;
+    placeholder?: string;
+    sections?: any[];
+    shouldFilter?: boolean;
+    loop?: boolean;
+    onopenchange?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/ConditionTable.svelte.d.ts

@@ -0,0 +1,61 @@
+export default ConditionTable;
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export type ComboboxItem = {
+    value: string;
+    label: string;
+    group?: string;
+    description?: string;
+};
+export type ColumnDef = {
+    key: string;
+    label: string;
+    type: "text" | "select" | "combobox";
+    width?: string;
+    options?: SelectOption[];
+    items?: ComboboxItem[];
+    placeholder?: string;
+};
+type ConditionTable = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * ConditionTable
+ *
+ * Configurable condition-row editor for building rule-based filters.
+ * Composes Input, Select, and Button primitives into an interactive grid.
+ *
+ * @example
+ * <ConditionTable
+ *   columns={[
+ *     { key: 'field', label: 'Field', type: 'text', placeholder: 'data.field_name' },
+ *     { key: 'operator', label: 'Operator', type: 'select', width: '10rem', options: operators },
+ *     { key: 'value', label: 'Value', type: 'text', placeholder: 'value' },
+ *   ]}
+ *   bind:conditions
+ *   onchange={handleChange}
+ * />
+ */
+declare const ConditionTable: import("svelte").Component<{
+    conditions?: any[];
+    columns?: any[];
+    maxRows?: number;
+    disabled?: boolean;
+    emptyMessage?: string;
+    addLabel?: string;
+    onchange?: any;
+    class?: string;
+} & Record<string, any>, {}, "conditions">;
+type $$ComponentProps = {
+    conditions?: any[];
+    columns?: any[];
+    maxRows?: number;
+    disabled?: boolean;
+    emptyMessage?: string;
+    addLabel?: string;
+    onchange?: any;
+    class?: string;
+} & Record<string, any>;

package/components/EmptyState.svelte.d.ts

@@ -0,0 +1,54 @@
+export default EmptyState;
+type EmptyState = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * EmptyState
+ *
+ * Shown when there's nothing to display. Different contexts need different copy.
+ * Consumes --empty-* tokens from components.css.
+ *
+ * @example First use
+ * <EmptyState
+ *   heading="Create your first project"
+ *   body="Projects organize your work into focused spaces."
+ *   actionLabel="NEW PROJECT"
+ *   onaction={() => create()}
+ * >
+ *   {#snippet icon()}
+ *     <PhPlusCircle size={48} />
+ *   {/snippet}
+ * </EmptyState>
+ *
+ * @example Error recovery
+ * <EmptyState
+ *   heading="Couldn't load your projects"
+ *   body="The server didn't respond. Check your connection."
+ *   actionLabel="TRY AGAIN"
+ *   actionVariant="secondary"
+ *   onaction={() => retry()}
+ * >
+ *   {#snippet icon()}
+ *     <PhWarningCircle size={48} />
+ *   {/snippet}
+ * </EmptyState>
+ */
+declare const EmptyState: import("svelte").Component<{
+    heading: any;
+    body?: any;
+    actionLabel?: any;
+    actionVariant?: string;
+    onaction?: any;
+    class?: string;
+    icon?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    heading: any;
+    body?: any;
+    actionLabel?: any;
+    actionVariant?: string;
+    onaction?: any;
+    class?: string;
+    icon?: any;
+} & Record<string, any>;