@sekiui/elements 0.0.61 → 0.0.64

package/dist/types/components/accordion/seki-accordion-item.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Context interface for Accordion Item
+ */
+export interface AccordionItemContext {
+    value: string;
+    isOpen: boolean;
+    disabled: boolean;
+    contentId: string;
+    triggerId: string;
+    toggle: () => void;
+}
+/**
+ * Individual accordion item container
+ *
+ * @slot - Accordion trigger and content
+ *
+ * @part item - The item wrapper
+ */
+export declare class SekiAccordionItem {
+    el: HTMLElement;
+    private static instanceCount;
+    private instanceId;
+    /**
+     * Unique value for this item
+     */
+    value: string;
+    /**
+     * Disable this specific item
+     */
+    disabled: boolean;
+    _isOpen: boolean;
+    constructor();
+    private getAccordionContext;
+    private get contentId();
+    private get triggerId();
+    private getItemContext;
+    componentDidLoad(): void;
+    componentWillRender(): void;
+    render(): any;
+}

package/dist/types/components/accordion/seki-accordion-trigger.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Trigger button for accordion item - click to toggle
+ *
+ * @slot - The trigger content
+ *
+ * @part trigger - The trigger button
+ * @part icon - The chevron icon
+ */
+export declare class SekiAccordionTrigger {
+    el: HTMLElement;
+    _isOpen: boolean;
+    private getItemContext;
+    componentWillRender(): void;
+    handleClick(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private getAllTriggers;
+    private focusPreviousTrigger;
+    private focusNextTrigger;
+    private focusFirstTrigger;
+    private focusLastTrigger;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/accordion/seki-accordion.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Context interface for Accordion component
+ */
+export interface AccordionContext {
+    type: 'single' | 'multiple';
+    value: string[];
+    disabled: boolean;
+    collapsible: boolean;
+    toggleItem: (itemValue: string) => void;
+    isItemOpen: (itemValue: string) => boolean;
+}
+/**
+ * Accordion root component that manages expanded state of items
+ *
+ * @slot - Accordion items
+ *
+ * @part accordion - The main container
+ */
+export declare class SekiAccordion {
+    el: HTMLElement;
+    /**
+     * Accordion type - single allows only one item open, multiple allows many
+     */
+    type: 'single' | 'multiple';
+    /**
+     * Controlled value - which items are open
+     */
+    value?: string | string[];
+    /**
+     * Default value for uncontrolled usage
+     */
+    defaultValue?: string | string[];
+    /**
+     * Whether all items can be closed in single mode
+     */
+    collapsible: boolean;
+    /**
+     * Disable all accordion items
+     */
+    disabled: boolean;
+    /**
+     * Internal state for open items
+     */
+    _openItems: string[];
+    /**
+     * Emitted when value changes
+     */
+    sekiValueChange: EventEmitter<string | string[]>;
+    componentWillLoad(): void;
+    valueChanged(newValue: string | string[] | undefined): void;
+    /**
+     * Toggle an item's open state
+     */
+    toggleItem(itemValue: string): Promise<void>;
+    private isItemOpen;
+    private getContext;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/alert/seki-alert-description.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Description text within an alert component.
+ * Renders supporting text with appropriate typography styles.
+ *
+ * @example
+ * <seki-alert>
+ *   <seki-alert-title>Heads up!</seki-alert-title>
+ *   <seki-alert-description>
+ *     You can add components to your app using the CLI.
+ *   </seki-alert-description>
+ * </seki-alert>
+ */
+export declare class SekiAlertDescription {
+    /**
+     * Optional CSS class for custom styling
+     */
+    class?: string;
+    render(): any;
+}

package/dist/types/components/alert/seki-alert-title.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Title text within an alert component.
+ * Renders as a heading with appropriate typography styles.
+ *
+ * @example
+ * <seki-alert>
+ *   <seki-alert-title>Heads up!</seki-alert-title>
+ * </seki-alert>
+ */
+export declare class SekiAlertTitle {
+    /**
+     * Optional CSS class for custom styling
+     */
+    class?: string;
+    render(): any;
+}

package/dist/types/components/alert/seki-alert.d.ts

@@ -0,0 +1,29 @@
+export type AlertVariant = 'default' | 'destructive';
+/**
+ * Alert component for displaying contextual feedback messages.
+ * Supports icons, titles, and descriptions with multiple visual variants.
+ *
+ * @example
+ * <seki-alert>
+ *   <seki-alert-title>Heads up!</seki-alert-title>
+ *   <seki-alert-description>You can add components using the CLI.</seki-alert-description>
+ * </seki-alert>
+ *
+ * @example
+ * <seki-alert variant="destructive">
+ *   <svg slot="icon">...</svg>
+ *   <seki-alert-title>Error</seki-alert-title>
+ *   <seki-alert-description>Your session has expired.</seki-alert-description>
+ * </seki-alert>
+ */
+export declare class SekiAlert {
+    el: HTMLElement;
+    /**
+     * Visual variant of the alert
+     * @default 'default'
+     */
+    variant?: AlertVariant;
+    componentWillLoad(): void;
+    render(): any;
+    private hasSlot;
+}

package/dist/types/components/aspect-ratio/seki-aspect-ratio.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Aspect Ratio component for maintaining consistent aspect ratios
+ *
+ * @slot - The content to display within the aspect ratio container (images, videos, iframes, etc.)
+ *
+ * @part container - The inner container element
+ */
+export declare class SekiAspectRatio {
+    /**
+     * The desired aspect ratio as a number (width / height)
+     * Common values: 16/9 (widescreen), 4/3 (standard), 1 (square), 21/9 (ultrawide)
+     */
+    ratio: number;
+    componentWillLoad(): void;
+    private getSafeRatio;
+    render(): any;
+}

package/dist/types/components/aspect-ratio/seki-aspect-ratio.interface.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Props interface for the Aspect Ratio component
+ */
+export interface AspectRatioProps {
+    /**
+     * The desired aspect ratio as a number (width / height)
+     * Common values: 16/9 (widescreen), 4/3 (standard), 1 (square), 21/9 (ultrawide)
+     * @default 1
+     */
+    ratio?: number;
+}

package/dist/types/components/avatar/seki-avatar-fallback.d.ts

@@ -0,0 +1,27 @@
+/**
+ * seki-avatar-fallback: Fallback content for avatar when image fails to load
+ *
+ * @component AvatarFallback
+ * @example
+ * <seki-avatar>
+ *   <seki-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+ *   <seki-avatar-fallback>JD</seki-avatar-fallback>
+ * </seki-avatar>
+ */
+export declare class SekiAvatarFallback {
+    el: HTMLElement;
+    /**
+     * Delay in milliseconds before showing the fallback
+     * Useful to avoid flickering when image loads quickly
+     * @default 0
+     */
+    delayMs: number;
+    /**
+     * Whether to show the fallback content
+     */
+    canRender: boolean;
+    private timeoutId?;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/avatar/seki-avatar-image.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * seki-avatar-image: Image element for the avatar with load/error handling
+ *
+ * @component AvatarImage
+ * @example
+ * <seki-avatar>
+ *   <seki-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+ *   <seki-avatar-fallback>JD</seki-avatar-fallback>
+ * </seki-avatar>
+ */
+export declare class SekiAvatarImage {
+    el: HTMLElement;
+    /**
+     * Source URL of the avatar image
+     */
+    src?: string;
+    /**
+     * Alt text for the avatar image
+     */
+    alt?: string;
+    /**
+     * Tracks whether the image has loaded
+     */
+    loaded: boolean;
+    /**
+     * Tracks whether the image has errored
+     */
+    hasError: boolean;
+    /**
+     * Emitted when the image loads successfully
+     */
+    avatarImageLoad: EventEmitter<void>;
+    /**
+     * Emitted when the image fails to load
+     */
+    avatarImageError: EventEmitter<void>;
+    private handleLoad;
+    private handleError;
+    render(): any;
+}

package/dist/types/components/avatar/seki-avatar.d.ts

@@ -0,0 +1,39 @@
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+/**
+ * seki-avatar: Container for avatar image with fallback support
+ *
+ * @component Avatar
+ * @example
+ * <seki-avatar>
+ *   <seki-avatar-image src="https://example.com/avatar.jpg" alt="User" />
+ *   <seki-avatar-fallback>JD</seki-avatar-fallback>
+ * </seki-avatar>
+ */
+export declare class SekiAvatar {
+    el: HTMLElement;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size: AvatarSize;
+    /**
+     * Shape of the avatar
+     * @default 'circle'
+     */
+    shape: AvatarShape;
+    /**
+     * Tracks whether the image has loaded successfully
+     */
+    imageLoaded: boolean;
+    /**
+     * Tracks whether the image has errored
+     */
+    imageError: boolean;
+    validateSize(newValue: string): void;
+    validateShape(newValue: string): void;
+    handleImageLoad(): void;
+    handleImageError(): void;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/button-group/seki-button-group.d.ts

@@ -0,0 +1,19 @@
+export declare class SekiButtonGroup {
+    el: HTMLElement;
+    /**
+     * Layout direction of the button group
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Size applied to all child buttons (optional)
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Accessible label for the button group
+     */
+    ariaLabel?: string;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private updateChildButtons;
+    render(): any;
+}

package/dist/types/components/calendar/seki-calendar.d.ts

@@ -0,0 +1,98 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { WeekStartsOn } from '../../utils/calendar/date-utils';
+export type CalendarMode = 'single' | 'range';
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+/**
+ * seki-calendar: A calendar component for date selection
+ *
+ * @component Calendar
+ * @example
+ * <seki-calendar></seki-calendar>
+ * <seki-calendar mode="range"></seki-calendar>
+ */
+export declare class SekiCalendar {
+    el: HTMLElement;
+    /**
+     * Selection mode: single date or date range
+     * @default 'single'
+     */
+    mode: CalendarMode;
+    /**
+     * Currently selected date (for single mode)
+     */
+    selected?: Date | string;
+    /**
+     * Start of date range (for range mode)
+     */
+    rangeFrom?: Date | string;
+    /**
+     * End of date range (for range mode)
+     */
+    rangeTo?: Date | string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date | string;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date | string;
+    /**
+     * Dates that are disabled
+     */
+    disabledDates?: Date[] | string[];
+    /**
+     * Day the week starts on (0 = Sunday, 1 = Monday, etc.)
+     * @default 0
+     */
+    weekStartsOn: WeekStartsOn;
+    /**
+     * Number of months to display
+     * @default 1
+     */
+    numberOfMonths: number;
+    /**
+     * Whether to show days outside the current month
+     * @default true
+     */
+    showOutsideDays: boolean;
+    /**
+     * Whether to fix the number of weeks displayed
+     * @default false
+     */
+    fixedWeeks: boolean;
+    /**
+     * The currently displayed month
+     */
+    displayMonth: Date;
+    /**
+     * The currently focused date for keyboard navigation
+     */
+    focusedDate: Date | null;
+    /**
+     * Emitted when a date is selected
+     */
+    sekiSelect: EventEmitter<Date>;
+    /**
+     * Emitted when a date range is selected
+     */
+    sekiRangeSelect: EventEmitter<DateRange>;
+    /**
+     * Emitted when the displayed month changes
+     */
+    sekiMonthChange: EventEmitter<Date>;
+    private weekDays;
+    updateWeekDays(): void;
+    componentWillLoad(): void;
+    private parseDate;
+    private parseDateArray;
+    private handlePreviousMonth;
+    private handleNextMonth;
+    private handleDayClick;
+    private handleKeyDown;
+    private getDayClasses;
+    render(): any;
+}

package/dist/types/components/carousel/seki-carousel-content.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Container for carousel slides. This component serves as the viewport
+ * for the Embla carousel.
+ *
+ * @slot - Carousel items (seki-carousel-item)
+ */
+export declare class SekiCarouselContent {
+    render(): any;
+}

package/dist/types/components/carousel/seki-carousel-dots.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Dot indicators for carousel navigation.
+ * Automatically syncs with parent seki-carousel.
+ */
+export declare class SekiCarouselDots {
+    el: HTMLElement;
+    selectedIndex: number;
+    scrollSnapCount: number;
+    private parentCarousel;
+    private unsubscribe;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private findParentCarousel;
+    private subscribeToCarousel;
+    private handleSlideChange;
+    private updateState;
+    private handleDotClick;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/carousel/seki-carousel-item.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Individual carousel slide item.
+ *
+ * @slot - Slide content (images, cards, any content)
+ */
+export declare class SekiCarouselItem {
+    /**
+     * Width of the item as CSS flex-basis.
+     * Examples: '100%' (full width), '50%' (half), '33.33%' (third)
+     */
+    basis: string;
+    render(): any;
+}

package/dist/types/components/carousel/seki-carousel-next.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Next slide navigation button.
+ * Automatically connects to parent seki-carousel.
+ */
+export declare class SekiCarouselNext {
+    el: HTMLElement;
+    disabled: boolean;
+    private parentCarousel;
+    private unsubscribe;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private findParentCarousel;
+    private subscribeToCarousel;
+    private handleSlideChange;
+    private updateState;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/carousel/seki-carousel-previous.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Previous slide navigation button.
+ * Automatically connects to parent seki-carousel.
+ */
+export declare class SekiCarouselPrevious {
+    el: HTMLElement;
+    disabled: boolean;
+    private parentCarousel;
+    private unsubscribe;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private findParentCarousel;
+    private subscribeToCarousel;
+    private handleSlideChange;
+    private updateState;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/carousel/seki-carousel.d.ts

@@ -0,0 +1,95 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmblaCarouselType } from 'embla-carousel';
+/**
+ * Carousel context shared with child components
+ */
+export interface CarouselContext {
+    emblaApi: EmblaCarouselType | null;
+    selectedIndex: number;
+    scrollSnapCount: number;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number) => void;
+}
+/**
+ * Interface for the carousel element with its public methods
+ */
+export interface CarouselElement extends HTMLElement {
+    scrollPrev: () => Promise<void>;
+    scrollNext: () => Promise<void>;
+    goToSlide: (index: number) => Promise<void>;
+    getSelectedIndex: () => Promise<number>;
+    getContext: () => Promise<CarouselContext>;
+}
+/**
+ * @slot - Carousel content (seki-carousel-content, arrows, dots)
+ */
+export declare class SekiCarousel {
+    el: HTMLElement;
+    /** Enable infinite loop scrolling */
+    loop: boolean;
+    /** Enable autoplay */
+    autoplay: boolean;
+    /** Autoplay delay in milliseconds */
+    autoplayDelay: number;
+    /** Pause autoplay on hover */
+    pauseOnHover: boolean;
+    /** Number of slides to scroll at once */
+    slidesToScroll: number;
+    /** Initial slide index */
+    startIndex: number;
+    /** Enable momentum/free scrolling */
+    dragFree: boolean;
+    /** Accessible label for the carousel */
+    ariaLabel: string;
+    /** Currently selected slide index */
+    selectedIndex: number;
+    /** Total number of scroll snaps */
+    scrollSnapCount: number;
+    /** Whether can scroll to previous */
+    canScrollPrev: boolean;
+    /** Whether can scroll to next */
+    canScrollNext: boolean;
+    /** Whether autoplay is currently paused */
+    autoplayPaused: boolean;
+    /** Emitted when the selected slide changes */
+    slideChange: EventEmitter<{
+        index: number;
+        total: number;
+    }>;
+    private emblaApi;
+    private autoplayInterval;
+    private viewportEl;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleAutoplayChange(newValue: boolean): void;
+    handleOptionsChange(): void;
+    /** Scroll to the previous slide */
+    scrollPrev(): Promise<void>;
+    /** Scroll to the next slide */
+    scrollNext(): Promise<void>;
+    /** Scroll to a specific slide index */
+    goToSlide(index: number): Promise<void>;
+    /** Get the currently selected slide index */
+    getSelectedIndex(): Promise<number>;
+    /** Get the carousel context for child components */
+    getContext(): Promise<CarouselContext>;
+    private initEmbla;
+    private handleSelect;
+    private handleReInit;
+    private handlePointerDown;
+    private handlePointerUp;
+    private updateState;
+    private startAutoplay;
+    private stopAutoplay;
+    private pauseAutoplay;
+    private resumeAutoplay;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleKeyDown;
+    render(): any;
+}