@aiaiai-pt/design-system 0.3.6 → 0.3.8

package/components/FileUpload.svelte.d.ts

@@ -0,0 +1,47 @@
+export default FileUpload;
+type FileUpload = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FileUpload
+ *
+ * Drag-and-drop file upload zone. Does NOT handle uploads — emits
+ * validated File[] to parent via callback. Parent owns upload logic.
+ *
+ * Consumes --fileupload-* tokens from components.css.
+ *
+ * @example
+ * <FileUpload accept=".pdf,.docx" maxSize={52_428_800} onfiles={(files) => handleFiles(files)}>
+ *   {#snippet icon()}<PhCloudArrowUp size={32} />{/snippet}
+ * </FileUpload>
+ *
+ * @example Custom content
+ * <FileUpload onfiles={handleFiles}>
+ *   {#snippet children()}
+ *     <p>Custom drop zone content</p>
+ *   {/snippet}
+ * </FileUpload>
+ */
+declare const FileUpload: import("svelte").Component<{
+    accept?: string;
+    maxSize?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    onfiles?: any;
+    onreject?: any;
+    icon?: any;
+    children?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    accept?: string;
+    maxSize?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    onfiles?: any;
+    onreject?: any;
+    icon?: any;
+    children?: any;
+    class?: string;
+} & Record<string, any>;

package/components/FileUploadItem.svelte.d.ts

@@ -0,0 +1,40 @@
+export default FileUploadItem;
+type FileUploadItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FileUploadItem
+ *
+ * Per-file upload/processing status row. Parent controls all state —
+ * this is a pure display component. Uses DS Progress internally.
+ *
+ * Consumes --fileupload-item-* tokens from components.css.
+ *
+ * @example Uploading
+ * <FileUploadItem name="report.pdf" size={2_400_000} status="uploading" progress={65} />
+ *
+ * @example Error
+ * <FileUploadItem name="data.csv" status="error" error="File exceeds 50 MB limit" onremove={() => {}} />
+ *
+ * @example Complete
+ * <FileUploadItem name="notes.txt" size={1_200} status="complete" />
+ */
+declare const FileUploadItem: import("svelte").Component<{
+    name?: string;
+    size?: number;
+    status?: string;
+    progress?: number;
+    error?: string;
+    onremove?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    name?: string;
+    size?: number;
+    status?: string;
+    progress?: number;
+    error?: string;
+    onremove?: any;
+    class?: string;
+} & Record<string, any>;

package/components/FilterBar.svelte.d.ts

@@ -0,0 +1,62 @@
+export default FilterBar;
+export type FilterOption = {
+    value: string;
+    label: string;
+    icon?: import("svelte").Component;
+};
+export type FilterDef = {
+    key: string;
+    label: string;
+    type: "toggle" | "select" | "multi-select";
+    options?: FilterOption[];
+    defaultValue?: any;
+};
+type FilterBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * FilterBar
+ *
+ * Horizontal bar of filter chips with active-filter state and clear-all action.
+ * Accepts a declarative config of filters or renders children directly.
+ * Consumes --filter-chip-* and --filter-bar-* tokens from components.css.
+ *
+ * @example Declarative (common case)
+ * <FilterBar
+ *   filters={[
+ *     { key: 'status', label: 'Status', type: 'toggle', options: [
+ *       { value: 'active', label: 'Active' },
+ *       { value: 'draft', label: 'Draft' },
+ *       { value: 'error', label: 'Error' },
+ *     ]},
+ *   ]}
+ *   bind:value={activeFilters}
+ *   onchange={handleFilterChange}
+ * />
+ *
+ * @example Composable (custom rendering)
+ * <FilterBar bind:value={activeFilters} onchange={handleFilterChange}>
+ *   {#snippet children(toggle, isActive)}
+ *     <FilterBar.Chip active={isActive('status', 'active')} onclick={() => toggle('status', 'active')}>
+ *       Active
+ *     </FilterBar.Chip>
+ *   {/snippet}
+ * </FilterBar>
+ */
+declare const FilterBar: import("svelte").Component<{
+    filters?: any[];
+    value?: Record<string, any>;
+    onchange?: any;
+    onclear?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    filters?: any[];
+    value?: Record<string, any>;
+    onchange?: any;
+    onclear?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/Input.svelte.d.ts

@@ -0,0 +1,56 @@
+export default Input;
+type Input = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Input
+ *
+ * Text input with label, help text, and error state.
+ * Values displayed in Berkeley Mono (data font).
+ * Consumes --input-* tokens from components.css.
+ *
+ * @example Basic
+ * <Input label="EMAIL" placeholder="you@example.com" />
+ *
+ * @example With help text
+ * <Input label="USERNAME" placeholder="Enter username" help="3-20 characters" />
+ *
+ * @example Error
+ * <Input label="EMAIL" value="bad" error="Please enter a valid email" />
+ *
+ * @example With leading icon
+ * <Input label="SEARCH" placeholder="Search...">
+ *   {#snippet leadingIcon()}
+ *     <PhMagnifyingGlass size={16} />
+ *   {/snippet}
+ * </Input>
+ */
+declare const Input: import("svelte").Component<{
+    label?: any;
+    placeholder?: any;
+    value?: string;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: string;
+    id?: any;
+    class?: string;
+    leadingIcon?: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    label?: any;
+    placeholder?: any;
+    value?: string;
+    help?: any;
+    error?: any;
+    size?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: string;
+    id?: any;
+    class?: string;
+    leadingIcon?: any;
+} & Record<string, any>;

package/components/KeyValue.svelte.d.ts

@@ -0,0 +1,34 @@
+export default KeyValue;
+type KeyValue = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * KeyValue
+ *
+ * Structured data display. Key in mono label, value in mono data.
+ * Consumes --kv-* tokens from components.css.
+ *
+ * @example Stacked (default)
+ * <KeyValue key="STATUS" value="Active" />
+ *
+ * @example Inline
+ * <KeyValue key="PLAN" value="Pro" layout="inline" />
+ *
+ * @example Custom value via snippet
+ * <KeyValue key="STATUS">
+ *   {#snippet value()}<Badge variant="success">ACTIVE</Badge>{/snippet}
+ * </KeyValue>
+ */
+declare const KeyValue: import("svelte").Component<{
+    key: any;
+    value?: any;
+    layout?: string;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    key: any;
+    value?: any;
+    layout?: string;
+    class?: string;
+} & Record<string, any>;

package/components/Label.svelte.d.ts

@@ -0,0 +1,29 @@
+export default Label;
+type Label = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Label
+ *
+ * Standalone form label. Uses the same typography tokens as Input labels.
+ * Use this in complex form layouts where the label isn't built into a form component.
+ *
+ * @example
+ * <Label for="my-input">EMAIL ADDRESS</Label>
+ *
+ * @example Disabled
+ * <Label for="my-input" disabled>LOCKED FIELD</Label>
+ */
+declare const Label: import("svelte").Component<{
+    for?: any;
+    disabled?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    for?: any;
+    disabled?: boolean;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/List.svelte.d.ts

@@ -0,0 +1,36 @@
+export default List;
+type List = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * List
+ *
+ * Container for sequences of items. Two variants:
+ * - "gap" (default) — flex column with `var(--list-gap)` between children.
+ * - "bordered" — outer border + border-radius + overflow hidden. Children use border-bottom dividers.
+ *
+ * Consumes --list-* tokens from components.css.
+ *
+ * @example Gap variant (default)
+ * <List>
+ *   <ListItem>First item</ListItem>
+ *   <ListItem>Second item</ListItem>
+ * </List>
+ *
+ * @example Bordered variant
+ * <List variant="bordered">
+ *   <ListItem>Row one</ListItem>
+ *   <ListItem>Row two</ListItem>
+ * </List>
+ */
+declare const List: import("svelte").Component<{
+    variant?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/ListItem.svelte.d.ts

@@ -0,0 +1,46 @@
+export default ListItem;
+type ListItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * ListItem
+ *
+ * A single row with leading content area (flex: 1, column layout) and trailing action area (flex-shrink: 0).
+ * Consumes --list-item-* tokens from components.css.
+ *
+ * @example Simple content
+ * <ListItem>Item text here</ListItem>
+ *
+ * @example With leading and trailing snippets
+ * <ListItem>
+ *   {#snippet leading()}
+ *     <span class="name">Pipeline v2</span>
+ *     <span class="desc">Last run: 2 hours ago</span>
+ *   {/snippet}
+ *   {#snippet trailing()}
+ *     <Toggle checked />
+ *   {/snippet}
+ * </ListItem>
+ *
+ * @example Interactive (renders as button)
+ * <ListItem interactive onclick={() => select(id)}>
+ *   {#snippet leading()}
+ *     <span>Clickable row</span>
+ *   {/snippet}
+ * </ListItem>
+ */
+declare const ListItem: import("svelte").Component<{
+    interactive?: boolean;
+    class?: string;
+    leading?: any;
+    trailing?: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    interactive?: boolean;
+    class?: string;
+    leading?: any;
+    trailing?: any;
+    children?: any;
+} & Record<string, any>;

package/components/LogViewer.svelte.d.ts

@@ -0,0 +1,56 @@
+export default LogViewer;
+type LogViewer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * LogViewer
+ *
+ * Structured log display for viewing timestamped, level-coded entries.
+ * Optimized for scanning many entries at compact density.
+ * Composes Badge, Input, Checkbox, Toggle, Alert, EmptyState, and Skeleton.
+ * Consumes --log-viewer-* tokens from components.css.
+ *
+ * @example Basic
+ * <LogViewer entries={logEntries} />
+ *
+ * @example With all states
+ * <LogViewer
+ *   entries={logEntries}
+ *   available={true}
+ *   truncated={false}
+ *   fallbackUrl="https://temporal.example.com/..."
+ *   loading={false}
+ * />
+ *
+ * @example Unavailable (show fallback)
+ * <LogViewer available={false} fallbackUrl="https://temporal.example.com/..." />
+ */
+declare const LogViewer: import("svelte").Component<{
+    entries?: any[];
+    available?: boolean;
+    truncated?: boolean;
+    fallbackUrl?: any;
+    loading?: boolean;
+    emptyHeading?: string;
+    emptyBody?: string;
+    unavailableHeading?: string;
+    unavailableBody?: string;
+    class?: string;
+    emptyIcon?: any;
+    unavailableIcon?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    entries?: any[];
+    available?: boolean;
+    truncated?: boolean;
+    fallbackUrl?: any;
+    loading?: boolean;
+    emptyHeading?: string;
+    emptyBody?: string;
+    unavailableHeading?: string;
+    unavailableBody?: string;
+    class?: string;
+    emptyIcon?: any;
+    unavailableIcon?: any;
+} & Record<string, any>;

package/components/Menu.svelte.d.ts

@@ -0,0 +1,44 @@
+export default Menu;
+type Menu = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Menu
+ *
+ * Positioned floating menu anchored to a trigger element.
+ * Composes Popover internally and adds WAI-ARIA Menu Button semantics:
+ * arrow key navigation, typeahead, and Enter/Space activation.
+ *
+ * Consumes --menu-* tokens from components.css.
+ *
+ * @example
+ * <button bind:this={anchor} onclick={() => open = !open}>Options</button>
+ * <Menu bind:open {anchor} placement="bottom-start">
+ *   <MenuItem onclick={handleEdit}>
+ *     {#snippet leading()}<PencilIcon size={14} />{/snippet}
+ *     Edit name
+ *   </MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem variant="destructive" onclick={handleDelete}>
+ *     {#snippet leading()}<TrashIcon size={14} />{/snippet}
+ *     Delete
+ *   </MenuItem>
+ * </Menu>
+ */
+declare const Menu: import("svelte").Component<{
+    open?: boolean;
+    anchor?: any;
+    placement?: string;
+    onclose?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "open">;
+type $$ComponentProps = {
+    open?: boolean;
+    anchor?: any;
+    placement?: string;
+    onclose?: any;
+    class?: string;
+    children?: any;
+} & Record<string, any>;

package/components/MenuItem.svelte.d.ts

@@ -0,0 +1,47 @@
+export default MenuItem;
+type MenuItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MenuItem
+ *
+ * A single actionable row inside a Menu.
+ * Renders as <button role="menuitem"> with optional leading/trailing snippets.
+ *
+ * Consumes --menu-item-* tokens from components.css.
+ *
+ * @example
+ * <MenuItem onclick={handleEdit}>
+ *   {#snippet leading()}<PencilIcon size={14} />{/snippet}
+ *   Edit name
+ * </MenuItem>
+ *
+ * @example Destructive
+ * <MenuItem variant="destructive" onclick={handleDelete}>
+ *   {#snippet leading()}<TrashIcon size={14} />{/snippet}
+ *   Delete
+ * </MenuItem>
+ *
+ * @example With keyboard shortcut
+ * <MenuItem onclick={handleCopy}>
+ *   Copy
+ *   {#snippet trailing()}<kbd>⌘C</kbd>{/snippet}
+ * </MenuItem>
+ */
+declare const MenuItem: import("svelte").Component<{
+    variant?: string;
+    disabled?: boolean;
+    leading?: any;
+    trailing?: any;
+    children?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    disabled?: boolean;
+    leading?: any;
+    trailing?: any;
+    children?: any;
+    class?: string;
+} & Record<string, any>;

package/components/MenuSeparator.svelte.d.ts

@@ -0,0 +1,24 @@
+export default MenuSeparator;
+type MenuSeparator = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MenuSeparator
+ *
+ * A thin visual divider between groups of MenuItems.
+ * Consumes --menu-separator-* tokens from components.css.
+ *
+ * @example
+ * <Menu bind:open {anchor}>
+ *   <MenuItem>Edit</MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem variant="destructive">Delete</MenuItem>
+ * </Menu>
+ */
+declare const MenuSeparator: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+} & Record<string, any>;

package/components/Modal.svelte.d.ts

@@ -0,0 +1,46 @@
+export default Modal;
+type Modal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Modal
+ *
+ * Centered overlay dialog with focus trap and backdrop.
+ * Unlike Panel (slide-over drawer), Modal is centered and rounded.
+ * Consumes --modal-* tokens from components.css.
+ *
+ * @example
+ * <Modal open={showConfirm} title="Delete Pipeline" onclose={() => showConfirm = false}>
+ *   Are you sure you want to delete this pipeline?
+ *   {#snippet footer()}
+ *     <Button variant="ghost" onclick={() => showConfirm = false}>CANCEL</Button>
+ *     <Button variant="destructive" onclick={handleDelete}>DELETE</Button>
+ *   {/snippet}
+ * </Modal>
+ *
+ * @example Small
+ * <Modal open width="sm" title="Rename" onclose={close}>
+ *   <Input label="NAME" bind:value={name} />
+ * </Modal>
+ */
+declare const Modal: import("svelte").Component<{
+    open?: boolean;
+    title: any;
+    width?: string;
+    onclose: any;
+    class?: string;
+    header?: any;
+    footer?: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    open?: boolean;
+    title: any;
+    width?: string;
+    onclose: any;
+    class?: string;
+    header?: any;
+    footer?: any;
+    children?: any;
+} & Record<string, any>;

package/components/OptionGrid.svelte.d.ts

@@ -0,0 +1,40 @@
+export default OptionGrid;
+type OptionGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * OptionGrid
+ *
+ * Exclusive selection grid using Card (interactive + selected).
+ * Implements radiogroup semantics with keyboard navigation.
+ *
+ * @example
+ * <script>
+ *   import { Database, Code } from 'phosphor-svelte';
+ *   let type = $state(null);
+ *   const options = [
+ *     { value: 'sql', label: 'SQL', description: 'SQL transform', icon: Database },
+ *     { value: 'python', label: 'Python', description: 'Python code', icon: Code },
+ *   ];
+ * </script>
+ *
+ * <OptionGrid {options} bind:value={type} columns={2} />
+ *
+ * @example Compact mode (no descriptions)
+ * <OptionGrid {options} bind:value={type} columns={3} compact />
+ */
+declare const OptionGrid: import("svelte").Component<{
+    options?: any[];
+    value?: any;
+    columns?: number;
+    compact?: boolean;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    options?: any[];
+    value?: any;
+    columns?: number;
+    compact?: boolean;
+    class?: string;
+} & Record<string, any>;

package/components/PageContainer.svelte.d.ts

@@ -0,0 +1,45 @@
+export default PageContainer;
+type PageContainer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * PageContainer
+ *
+ * Content container for page-level layout. Centers content with max-width
+ * and consistent horizontal/vertical padding. Used inside an app shell's
+ * main content area — one per page.
+ *
+ * Uses semantic content-width and content-padding tokens from semantic.css.
+ *
+ * @example Default (standard content width)
+ * <PageContainer>
+ *   <h1>Page Title</h1>
+ *   <p>Content here</p>
+ * </PageContainer>
+ *
+ * @example Narrow (forms, settings)
+ * <PageContainer size="narrow">
+ *   <SettingsForm />
+ * </PageContainer>
+ *
+ * @example Wide (dashboards, data tables)
+ * <PageContainer size="wide">
+ *   <DataTable />
+ * </PageContainer>
+ *
+ * @example Fluid (no max-width)
+ * <PageContainer size="full">
+ *   <CanvasEditor />
+ * </PageContainer>
+ */
+declare const PageContainer: import("svelte").Component<{
+    size?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    size?: string;
+    class?: string;
+    children?: any;
+} & Record<string, any>;