@skewedaspect/sleekspace-ui 0.2.0-beta.1 → 0.2.0-beta.3

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

@@ -0,0 +1,3 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkCheckboxKind = ComponentKind;
+export type SkCheckboxSize = ComponentSize;

package/dist/components/Collapsible/SkCollapsible.vue.d.ts

@@ -0,0 +1,70 @@
+import { ComponentCustomColors } from '../../types';
+import { SkCollapsibleKind } from './types';
+export interface SkCollapsibleComponentProps extends ComponentCustomColors {
+    /**
+     * Controls the expanded/collapsed state of the component. Use with `v-model:open` for
+     * two-way binding. When true, the content is visible; when false, it's hidden. If not
+     * provided, the component manages its own state internally starting with `defaultOpen`.
+     * @default undefined (uncontrolled mode)
+     */
+    open?: boolean;
+    /**
+     * The initial expanded state when the component is first rendered in uncontrolled mode.
+     * Only applies when the `open` prop is not provided. After initial render, the component
+     * manages its own state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * When true, disables the trigger and prevents state changes. The current expanded/collapsed
+     * state is preserved but cannot be changed by user interaction. The trigger element appears
+     * with reduced opacity and cursor changes to not-allowed.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Semantic color kind that controls the default trigger button appearance. Semantic kinds
+     * (neutral, primary, accent, etc.) adapt to your theme, while color kinds provide fixed
+     * branding colors. Only applies when using the default trigger; ignored when using the
+     * trigger slot.
+     * @default 'neutral'
+     */
+    kind?: SkCollapsibleKind;
+    /**
+     * Label text for the default trigger button. Displayed alongside the animated chevron
+     * icon. Only applies when the trigger slot is not provided. For more control over the
+     * trigger appearance, use the trigger slot instead.
+     * @default 'Toggle'
+     */
+    triggerText?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {
+            open: boolean | undefined;
+        }): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkCollapsibleComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<SkCollapsibleComponentProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    kind: SkCollapsibleKind;
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    triggerText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkCollapsible } from './SkCollapsible.vue';
+export * from './types';

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

@@ -0,0 +1,2 @@
+import { ComponentKind } from '../../types';
+export type SkCollapsibleKind = ComponentKind;

package/dist/components/Divider/SkDivider.vue.d.ts

@@ -0,0 +1,39 @@
+import { ComponentKind, ComponentSize } from '../../types';
+import { SkDividerOrientation, SkDividerVariant } from './types';
+export interface SkDividerComponentProps {
+    /**
+     * Controls the direction of the divider line. Use 'horizontal' for separating
+     * vertically stacked content (the divider spans width), or 'vertical' for
+     * separating horizontally arranged elements (the divider spans height).
+     * @default 'horizontal'
+     */
+    orientation?: SkDividerOrientation;
+    /**
+     * Semantic color kind that controls the divider's line color. Semantic kinds
+     * (neutral, primary, accent, etc.) adapt to your theme. Use colored dividers
+     * sparingly to draw attention to important content boundaries.
+     * @default 'neutral'
+     */
+    kind?: ComponentKind;
+    /**
+     * Visual intensity variant for the divider. The default variant provides a
+     * clearly visible line, while 'subtle' reduces opacity for a softer, less
+     * prominent separation that doesn't compete with content for attention.
+     * @default undefined (uses default styling)
+     */
+    variant?: SkDividerVariant;
+    /**
+     * Controls the thickness of the divider line and the spacing (margin) around it.
+     * Larger sizes create bolder visual breaks between content sections, while smaller
+     * sizes provide minimal separation. Available: 'sm', 'md', 'lg', 'xl'.
+     * @default 'md'
+     */
+    size?: ComponentSize;
+}
+declare const _default: import('vue').DefineComponent<SkDividerComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkDividerComponentProps> & Readonly<{}>, {
+    kind: ComponentKind;
+    size: ComponentSize;
+    orientation: SkDividerOrientation;
+    variant: SkDividerVariant;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLHRElement>;
+export default _default;

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

@@ -0,0 +1,8 @@
+/**
+ * Divider orientation options
+ */
+export type SkDividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Divider variant options
+ */
+export type SkDividerVariant = 'subtle';

package/dist/components/Dropdown/SkDropdown.vue.d.ts

@@ -0,0 +1,63 @@
+import { ComponentCustomColors } from '../../types';
+import { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';
+export interface SkDropdownComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the menu's accent colors for hover states and
+     * focus indicators. The kind is inherited by nested SkDropdownSubmenu components
+     * unless they specify their own kind.
+     * @default 'neutral'
+     */
+    kind?: SkDropdownKind;
+    /**
+     * Text displayed on the default trigger button. Only used when the trigger slot
+     * is not provided. For custom trigger elements (icons, avatar buttons, etc.),
+     * use the trigger slot instead.
+     * @default 'Menu'
+     */
+    triggerText?: string;
+    /**
+     * Which side of the trigger element to position the dropdown menu. The menu
+     * will automatically flip to the opposite side if there isn't enough space.
+     * The caret icon on the default trigger rotates to match this direction.
+     * @default 'bottom'
+     */
+    side?: SkDropdownSide;
+    /**
+     * Horizontal alignment of the dropdown menu relative to the trigger. 'start'
+     * aligns the menu's left edge with the trigger's left edge, 'center' centers
+     * the menu, and 'end' aligns right edges.
+     * @default 'start'
+     */
+    align?: SkDropdownAlign;
+    /**
+     * Distance in pixels between the trigger element and the dropdown menu.
+     * Increase for more visual separation or decrease for a tighter connection
+     * to the trigger element.
+     * @default 4
+     */
+    sideOffset?: number;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkDropdownComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkDropdownComponentProps> & Readonly<{}>, {
+    kind: SkDropdownKind;
+    triggerText: string;
+    side: SkDropdownSide;
+    align: SkDropdownAlign;
+    sideOffset: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Dropdown/SkDropdownMenuItem.vue.d.ts

@@ -0,0 +1,32 @@
+export interface SkDropdownMenuItemComponentProps {
+    /**
+     * When true, the menu item is visually dimmed and cannot be interacted with.
+     * Disabled items are skipped during keyboard navigation. Use for actions that
+     * are temporarily unavailable based on application state.
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkDropdownMenuItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<SkDropdownMenuItemComponentProps> & Readonly<{
+    onClick?: ((event: Event) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Dropdown/SkDropdownMenuSeparator.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Dropdown/SkDropdownSubmenu.vue.d.ts

@@ -0,0 +1,34 @@
+import { SkDropdownKind } from './types';
+export interface SkDropdownSubmenuComponentProps {
+    /**
+     * The label text displayed on the submenu trigger item. This appears as a menu
+     * item in the parent menu with a right-pointing caret indicating it opens a submenu.
+     */
+    triggerText: string;
+    /**
+     * Semantic color kind for the submenu content. When not specified, the submenu
+     * automatically inherits the kind from its parent SkDropdown, ensuring visual
+     * consistency throughout nested menu structures.
+     * @default inherited from parent
+     */
+    kind?: SkDropdownKind;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkDropdownSubmenuComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkDropdownSubmenuComponentProps> & Readonly<{}>, {
+    kind: SkDropdownKind;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export { default as SkDropdown } from './SkDropdown.vue';
+export { default as SkDropdownMenuItem } from './SkDropdownMenuItem.vue';
+export { default as SkDropdownMenuSeparator } from './SkDropdownMenuSeparator.vue';
+export { default as SkDropdownSubmenu } from './SkDropdownSubmenu.vue';
+export type { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';

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

@@ -0,0 +1,4 @@
+import { ComponentKind } from '../../types';
+export type SkDropdownKind = ComponentKind;
+export type SkDropdownSide = 'top' | 'right' | 'bottom' | 'left';
+export type SkDropdownAlign = 'start' | 'center' | 'end';

package/dist/components/Field/SkField.vue.d.ts

@@ -0,0 +1,99 @@
+import { SkFieldLabelPosition } from './types';
+export interface SkFieldComponentProps {
+    /**
+     * Label text displayed above or beside the input. The label is automatically associated
+     * with the input via the `for` attribute using the generated or provided ID. Leave empty
+     * for inputs that don't need a visible label (use aria-label on the input instead).
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Help text displayed below the input providing additional context or instructions.
+     * When an error message is present, the description is hidden and replaced by the error.
+     * Connected to the input via aria-describedby for screen reader accessibility.
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Error message displayed below the input in a danger/red color. When present, replaces
+     * the description text and sets aria-invalid="true" on the input. Typically populated
+     * from form validation results.
+     * @default undefined
+     */
+    error?: string;
+    /**
+     * When true, displays a red asterisk (*) after the label to indicate the field is required.
+     * This is a visual indicator only—you must also set the `required` attribute on the input
+     * itself for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Position of the label relative to the input. 'top' places the label above the input
+     * (default, best for most forms). 'left' places the label to the left of the input
+     * (useful for horizontal form layouts or settings panels).
+     * @default 'top'
+     */
+    labelPosition?: SkFieldLabelPosition;
+    /**
+     * Custom ID for the field. When provided, this ID is passed to the slotted input and
+     * used for label association. When not provided, a unique ID is auto-generated. Use
+     * custom IDs when you need to reference the input from elsewhere in your code.
+     * @default undefined (auto-generated)
+     */
+    id?: string;
+    /**
+     * Validation state that controls the visual kind of the child input. `true` applies the
+     * `validKind` (default: 'success'), `false` applies the `invalidKind` (default: 'danger'),
+     * and `null`/`undefined` lets the input use its own kind prop. Child inputs automatically
+     * inherit this via provide/inject.
+     * @default null
+     */
+    state?: boolean | null;
+    /**
+     * Semantic kind to apply to the child input when `state` is `true` (valid). Typically
+     * 'success' for green styling indicating valid input. The kind is provided to child
+     * inputs via Vue's provide/inject system.
+     * @default 'success'
+     */
+    validKind?: string;
+    /**
+     * Semantic kind to apply to the child input when `state` is `false` (invalid). Typically
+     * 'danger' for red styling indicating validation errors. The kind is provided to child
+     * inputs via Vue's provide/inject system.
+     * @default 'danger'
+     */
+    invalidKind?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            id: string;
+            ariaDescribedby: string | undefined;
+            ariaInvalid: string | undefined;
+            kind: string | undefined;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkFieldComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkFieldComponentProps> & Readonly<{}>, {
+    label: string;
+    required: boolean;
+    id: string;
+    description: string;
+    error: string;
+    labelPosition: SkFieldLabelPosition;
+    state: boolean | null;
+    validKind: string;
+    invalidKind: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Field/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkField } from './SkField.vue';
+export type { SkFieldLabelPosition } from './types';

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

@@ -0,0 +1 @@
+export type SkFieldLabelPosition = 'top' | 'left';

package/dist/components/Group/SkGroup.vue.d.ts

@@ -0,0 +1,29 @@
+import { SkGroupOrientation } from './types';
+export interface SkGroupComponentProps {
+    /**
+     * Controls how child elements are arranged within the group. Use 'horizontal' for
+     * side-by-side layouts (like button groups or inline form controls), or 'vertical'
+     * for stacked layouts (like form field groups or menu items).
+     * @default 'horizontal'
+     */
+    orientation?: SkGroupOrientation;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkGroupComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkGroupComponentProps> & Readonly<{}>, {
+    orientation: SkGroupOrientation;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Group orientation options
+ */
+export type SkGroupOrientation = 'horizontal' | 'vertical';

package/dist/components/Input/SkInput.vue.d.ts

@@ -0,0 +1,84 @@
+import { ComponentCustomColors } from '../../types';
+import { SkInputKind, SkInputSize, SkInputType } from './types';
+export interface SkInputComponentProps extends ComponentCustomColors {
+    /**
+     * The HTML input type attribute controlling the input behavior and keyboard on mobile devices.
+     * Common types include 'text', 'email', 'password', 'tel', 'url', 'search', and 'number'.
+     * Note: For numeric inputs with stepper buttons, consider using SkNumberInput instead.
+     * @default 'text'
+     */
+    type?: SkInputType;
+    /**
+     * Semantic color kind for the input border and focus ring. Use semantic kinds like 'success'
+     * or 'danger' to indicate validation states. When used inside an SkField with a `state` prop,
+     * the field's kind automatically overrides this value.
+     * @default 'neutral'
+     */
+    kind?: SkInputKind;
+    /**
+     * Input size controlling height, padding, and font size. Available sizes: 'sm' (small,
+     * compact forms), 'md' (medium, default), 'lg' (large), 'xl' (extra large, prominent inputs).
+     * @default 'md'
+     */
+    size?: SkInputSize;
+    /**
+     * Placeholder text displayed when the input is empty. Use to provide hints about expected
+     * input format or example values. The placeholder disappears when the user begins typing.
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * When true, disables the input preventing all user interaction. The input appears with
+     * reduced opacity and the cursor changes to not-allowed. Disabled inputs are excluded
+     * from form submission.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When true, makes the input read-only. The user can select and copy text but cannot
+     * modify it. Unlike disabled, read-only inputs are still included in form submission
+     * and maintain normal visual appearance.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * When true, marks the input as required for form validation. The browser will prevent
+     * form submission if the input is empty. For visual required indicators, wrap the input
+     * in an SkField component with `required` prop.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The form field name used when submitting the input value. Required for native form
+     * submission and useful for form libraries that track fields by name.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Autocomplete hint for the browser's autofill feature. Common values include 'off',
+     * 'email', 'username', 'current-password', 'new-password', 'given-name', 'family-name',
+     * 'street-address', etc. See MDN for the complete list of valid values.
+     * @default undefined
+     */
+    autocomplete?: string;
+}
+type __VLS_Props = SkInputComponentProps;
+type __VLS_PublicProps = {
+    modelValue?: string | number;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    type: SkInputType;
+    kind: SkInputKind;
+    disabled: boolean;
+    size: SkInputSize;
+    placeholder: string;
+    required: boolean;
+    name: string;
+    readonly: boolean;
+    autocomplete: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkInput } from './SkInput.vue';
+export type { SkInputKind, SkInputSize, SkInputType } from './types';

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

@@ -0,0 +1,4 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkInputKind = ComponentKind;
+export type SkInputSize = ComponentSize;
+export type SkInputType = 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'number';

package/dist/components/Listbox/SkListbox.vue.d.ts

@@ -0,0 +1,62 @@
+import { ComponentCustomColors } from '../../types';
+import { SkListboxKind, SkListboxSize } from './types';
+export interface SkListboxComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the input border, focus ring, and selected
+     * item highlight appearance. When used inside SkField, inherits the field's
+     * kind if not explicitly set.
+     * @default 'neutral' (or inherited from parent SkField)
+     */
+    kind?: SkListboxKind;
+    /**
+     * Size of the input field and dropdown content. Controls the input height,
+     * text size, and option item dimensions. Available sizes: 'sm' (small),
+     * 'md' (medium), 'lg' (large).
+     * @default 'md'
+     */
+    size?: SkListboxSize;
+    /**
+     * Placeholder text displayed in the input field when no option is selected
+     * and no search text is entered. Use to guide users on what type of selection
+     * to make or to indicate the field purpose.
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * When true, the listbox is disabled and cannot be interacted with. The input
+     * field is non-editable and the dropdown cannot be opened. The component
+     * appears with reduced opacity and the cursor changes to not-allowed.
+     * @default false
+     */
+    disabled?: boolean;
+}
+type __VLS_Props = SkListboxComponentProps;
+type __VLS_PublicProps = {
+    modelValue?: string | string[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    kind: SkListboxKind;
+    disabled: boolean;
+    size: SkListboxSize;
+    placeholder: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Listbox/SkListboxItem.vue.d.ts

@@ -0,0 +1,34 @@
+export interface SkListboxItemComponentProps {
+    /**
+     * The value this option represents. When selected, the parent SkListbox's v-model
+     * will be set to this value. Can be a string, number, or object for complex data.
+     * Must be unique within the listbox to ensure proper selection behavior.
+     */
+    value: string | number | object;
+    /**
+     * When true, this option is disabled and cannot be selected. The item appears
+     * with reduced opacity and is skipped during keyboard navigation. Use for
+     * temporarily unavailable options that should still be visible.
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkListboxItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkListboxItemComponentProps> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Listbox/SkListboxSeparator.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Listbox/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SkListbox } from './SkListbox.vue';
+export { default as SkListboxItem } from './SkListboxItem.vue';
+export { default as SkListboxSeparator } from './SkListboxSeparator.vue';
+export type { SkListboxKind, SkListboxSize } from './types';

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

@@ -0,0 +1,3 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkListboxKind = ComponentKind;
+export type SkListboxSize = ComponentSize;