@tessera-ui/core 0.4.0

package/dist/types/components/modal/modal.stories.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        open: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        closeOnOverlay: {
+            control: string;
+            description: string;
+        };
+        closeOnEscape: {
+            control: string;
+            description: string;
+        };
+        showClose: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        open: boolean;
+        size: string;
+        label: string;
+        closeOnOverlay: boolean;
+        closeOnEscape: boolean;
+        showClose: boolean;
+    };
+};
+export declare const Sizes: () => string;
+export declare const States: () => string;
+export declare const Composition: () => string;

package/dist/types/components/nav/nav-item.d.ts

@@ -0,0 +1,23 @@
+import type { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot - Default slot for label text.
+ *
+ * @part item - The list item wrapper.
+ * @part link - The anchor or button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ */
+export declare class TsNavItem {
+    /** The URL to navigate to. */
+    href?: string;
+    /** Whether this item is currently active. */
+    active: boolean;
+    /** Whether this item is disabled. */
+    disabled: boolean;
+    /** Lucide icon name to display. */
+    icon?: string;
+    /** Emitted when the nav item is selected. */
+    tsSelect: EventEmitter<void>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/nav/nav-item.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+};
+export default _default;

package/dist/types/components/nav/nav.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @slot - Default slot for ts-nav-item children.
+ *
+ * @part nav - The native nav element.
+ * @part list - The list container.
+ */
+export declare class TsNav {
+    /** The navigation layout variant. */
+    variant: 'sidebar' | 'horizontal';
+    /** Whether the sidebar nav is collapsed (icons only). */
+    collapsed: boolean;
+    render(): any;
+}

package/dist/types/components/nav/nav.stories.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        collapsed: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        variant: string;
+        collapsed: boolean;
+    };
+};
+export declare const Variants: () => string;
+export declare const States: () => string;
+export declare const Composition: () => string;

package/dist/types/components/pagination/pagination.d.ts

@@ -0,0 +1,28 @@
+import type { EventEmitter } from '../../stencil-public-runtime';
+import type { TsSize } from '../../types';
+/**
+ * @part nav - The nav element.
+ * @part button - Each page button.
+ * @part prev - The previous button.
+ * @part next - The next button.
+ */
+export declare class TsPagination {
+    /** Total number of items. */
+    total: number;
+    /** Number of items per page. */
+    pageSize: number;
+    /** The current active page (1-based). */
+    currentPage: number;
+    /** Number of sibling pages shown around the current page. */
+    siblingCount: number;
+    /** The size of the pagination buttons. */
+    size: TsSize;
+    /** Emitted when the page changes. */
+    tsChange: EventEmitter<{
+        page: number;
+    }>;
+    private get totalPages();
+    private getPageRange;
+    private handlePageClick;
+    render(): any;
+}

package/dist/types/components/pagination/pagination.stories.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        total: {
+            control: string;
+            description: string;
+        };
+        pageSize: {
+            control: string;
+            description: string;
+        };
+        currentPage: {
+            control: string;
+            description: string;
+        };
+        siblingCount: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        total: number;
+        pageSize: number;
+        currentPage: number;
+        siblingCount: number;
+        size: string;
+    };
+};
+export declare const Sizes: () => string;
+export declare const States: () => string;
+export declare const Composition: () => string;

package/dist/types/components/popover/popover.d.ts

@@ -0,0 +1,44 @@
+import type { EventEmitter } from '../../stencil-public-runtime';
+type TsPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * @slot trigger - The element that triggers the popover.
+ * @slot - Default slot for popover content.
+ *
+ * @part base - The popover container.
+ * @part arrow - The popover arrow.
+ * @part trigger - The trigger wrapper.
+ */
+export declare class TsPopover {
+    hostEl: HTMLElement;
+    private popoverId;
+    private outsideClickHandler?;
+    private escapeHandler?;
+    /** Whether the popover is currently visible. */
+    open: boolean;
+    /** Placement of the popover relative to the trigger. */
+    placement: TsPopoverPlacement;
+    /** How the popover is triggered. */
+    trigger: 'click' | 'hover' | 'manual';
+    /** Whether the popover closes on outside click or Escape. */
+    dismissible: boolean;
+    /** Emitted when the popover opens. */
+    tsOpen: EventEmitter<void>;
+    /** Emitted when the popover closes. */
+    tsClose: EventEmitter<void>;
+    isVisible: boolean;
+    handleOpenChange(newValue: boolean): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Programmatically show the popover. */
+    show(): Promise<void>;
+    /** Programmatically hide the popover. */
+    hide(): Promise<void>;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private handleTriggerClick;
+    private handleTriggerKeydown;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    render(): any;
+}
+export {};

package/dist/types/components/popover/popover.stories.d.ts

@@ -0,0 +1,38 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        open: {
+            control: string;
+            description: string;
+        };
+        placement: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        trigger: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        dismissible: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        open: boolean;
+        placement: string;
+        trigger: string;
+        dismissible: boolean;
+    };
+};
+export declare const Variants: () => string;
+export declare const States: () => string;
+export declare const Composition: () => string;

package/dist/types/components/progress/progress.d.ts

@@ -0,0 +1,26 @@
+import type { TsSize } from '../../types';
+type TsProgressVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * @part track - The progress track.
+ * @part fill - The progress fill bar.
+ * @part label - The value label text.
+ */
+export declare class TsProgress {
+    /** Current progress value (0 to max). */
+    value: number;
+    /** Maximum value. */
+    max: number;
+    /** The color variant. */
+    variant: TsProgressVariant;
+    /** The size of the progress bar. */
+    size: TsSize;
+    /** Whether the progress is indeterminate. */
+    indeterminate: boolean;
+    /** Accessible label for the progress bar. */
+    label?: string;
+    /** Whether to display the percentage value. */
+    showValue: boolean;
+    private get percentage();
+    render(): any;
+}
+export {};

package/dist/types/components/progress/progress.stories.d.ts

@@ -0,0 +1,59 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        max: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        indeterminate: {
+            control: string;
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        showValue: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        value: number;
+        max: number;
+        variant: string;
+        size: string;
+        indeterminate: boolean;
+        label: string;
+        showValue: boolean;
+    };
+};
+export declare const Variants: () => string;
+export declare const Sizes: () => string;
+export declare const States: () => string;
+export declare const Composition: () => string;

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

@@ -0,0 +1,32 @@
+import type { EventEmitter } from '../../stencil-public-runtime';
+import type { TsCheckboxChangeEventDetail } from '../../types';
+/**
+ * @slot - Default slot for the radio label.
+ *
+ * @part base - The radio container.
+ * @part control - The visual radio circle.
+ * @part label - The label wrapper.
+ */
+export declare class TsRadio {
+    hostEl: HTMLElement;
+    private inputId;
+    /** Whether the radio is checked. */
+    checked: boolean;
+    /** Renders the radio as disabled. */
+    disabled: boolean;
+    /** The value associated with this radio. */
+    value: string;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** Label text. If omitted, use the default slot. */
+    label?: string;
+    /** The radio size. */
+    size: 'sm' | 'md' | 'lg';
+    /** Emitted when the radio is selected. */
+    tsChange: EventEmitter<TsCheckboxChangeEventDetail>;
+    /** Programmatically select the radio. */
+    select(): Promise<void>;
+    private handleClick;
+    private handleKeydown;
+    render(): any;
+}

package/dist/types/components/radio/radio.stories.d.ts

@@ -0,0 +1,48 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: string;
+            description: string;
+        };
+        name: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        checked: boolean;
+        disabled: boolean;
+        size: string;
+        label: string;
+        value: string;
+        name: string;
+    };
+};
+export declare const Sizes: () => string;
+export declare const States: () => string;
+export declare const ShippingOptions: () => string;
+export declare const PaymentMethod: () => string;

package/dist/types/components/row/row.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @slot - Default slot for row content.
+ */
+export declare class TsRow {
+    /** Spacing token number controlling the gap between items. */
+    gap: string;
+    /** Cross-axis alignment of items. */
+    align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Main-axis alignment of items. */
+    justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /** Whether items should wrap to the next line. */
+    wrap: boolean;
+    /** Reverse the row direction. */
+    reverse: boolean;
+    /** Breakpoint at which the row stacks vertically. */
+    stackAt: 'sm' | 'md' | 'lg' | 'never';
+    render(): any;
+}

package/dist/types/components/row/row.stories.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        gap: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        align: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        justify: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        wrap: {
+            control: string;
+            description: string;
+        };
+        reverse: {
+            control: string;
+            description: string;
+        };
+        stackAt: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        gap: string;
+        align: string;
+        justify: string;
+        wrap: boolean;
+        reverse: boolean;
+        stackAt: string;
+    };
+};
+export declare const Justify: () => string;
+export declare const Alignment: () => string;
+export declare const Wrap: () => string;
+export declare const StackAt: () => string;
+export declare const Composition: () => string;

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

@@ -0,0 +1,74 @@
+import type { EventEmitter } from '../../stencil-public-runtime';
+import type { TsSize, TsSelectChangeEventDetail } from '../../types';
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled: boolean;
+}
+/**
+ * @slot - Default slot for `<option>` elements.
+ *
+ * @part base - The outer wrapper.
+ * @part label - The label element.
+ * @part trigger - The select trigger button.
+ * @part dropdown - The dropdown panel.
+ * @part option - An option in the dropdown list.
+ * @part help-text - The help text wrapper.
+ * @part error-text - The error message wrapper.
+ */
+export declare class TsSelect {
+    hostEl: HTMLElement;
+    private inputId;
+    private triggerEl?;
+    /** The current value. */
+    value: string;
+    /** Placeholder text when no value is selected. */
+    placeholder?: string;
+    /** Renders the select as disabled. */
+    disabled: boolean;
+    /** The select size. */
+    size: TsSize;
+    /** Label text displayed above the select. */
+    label?: string;
+    /** Help text displayed below the select. */
+    helpText?: string;
+    /** Renders the select in an error state. */
+    error: boolean;
+    /** Error message displayed below the select. */
+    errorMessage?: string;
+    /** Makes the select required. */
+    required: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** Allow multiple selections. */
+    multiple: boolean;
+    /** Whether the dropdown is open. */
+    isOpen: boolean;
+    /** The index of the currently focused option. */
+    focusedIndex: number;
+    /** Parsed options from slotted <option> elements. */
+    options: SelectOption[];
+    /** Emitted when the value changes. */
+    tsChange: EventEmitter<TsSelectChangeEventDetail>;
+    /** Emitted when the select gains focus. */
+    tsFocus: EventEmitter<void>;
+    /** Emitted when the select loses focus. */
+    tsBlur: EventEmitter<void>;
+    handleValueChange(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private parseOptions;
+    private open;
+    private close;
+    private selectOption;
+    private handleTriggerClick;
+    private handleTriggerKeydown;
+    private handleDropdownKeydown;
+    private moveFocus;
+    private handleFocus;
+    private handleBlur;
+    private getDisplayText;
+    render(): any;
+}
+export {};

package/dist/types/components/select/select.stories.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        helpText: {
+            control: string;
+            description: string;
+        };
+        error: {
+            control: string;
+            description: string;
+        };
+        errorMessage: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        name: {
+            control: string;
+            description: string;
+        };
+        multiple: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: ((args: Record<string, unknown>) => string) & {
+    args: Record<string, unknown>;
+} & {
+    args: {
+        value: string;
+        placeholder: string;
+        disabled: boolean;
+        size: string;
+        label: string;
+        helpText: string;
+        error: boolean;
+        errorMessage: string;
+        required: boolean;
+        name: string;
+        multiple: boolean;
+    };
+};
+export declare const Sizes: () => string;
+export declare const States: () => string;
+export declare const RoleSelector: () => string;
+export declare const CategoryFilter: () => string;

package/dist/types/components/skeleton/skeleton.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @part base - The skeleton element container.
+ * @part line - Individual skeleton line (text variant).
+ */
+export declare class TsSkeleton {
+    /** The skeleton shape variant. */
+    variant: 'text' | 'circular' | 'rectangular';
+    /** CSS width of the skeleton. */
+    width: string;
+    /** CSS height of the skeleton. */
+    height?: string;
+    /** Number of lines to render (text variant only). */
+    lines: number;
+    /** Animation style. */
+    animation: 'pulse' | 'wave' | 'none';
+    render(): any;
+}