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

package/dist/components/Progress/SkProgress.vue.d.ts

@@ -0,0 +1,66 @@
+import { ComponentKind } from '../../types';
+import { SkProgressSize, SkProgressValuePosition } from './types';
+export interface SkProgressComponentProps {
+    /**
+     * The current progress value between 0 and `max`. Pass `null` or `undefined` to enable
+     * indeterminate mode, which displays an animated loading indicator instead of a specific
+     * percentage. Use indeterminate mode when the operation duration is unknown.
+     * @default null
+     */
+    value?: number | null;
+    /**
+     * The maximum value representing 100% completion. Adjust this when your progress is
+     * measured in units other than percentages (e.g., bytes downloaded, steps completed).
+     * The percentage is calculated as `(value / max) * 100`.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Semantic color kind that controls the progress bar fill color. Semantic kinds
+     * (neutral, primary, accent, etc.) adapt to your theme, making it easy to indicate
+     * success (primary/success), warning states, or danger levels.
+     * @default 'primary'
+     */
+    kind?: ComponentKind;
+    /**
+     * Height size of the progress bar. Use 'sm' for inline or compact layouts, 'md' for
+     * standard forms, and 'lg' or 'xl' for prominent progress displays.
+     * @default 'md'
+     */
+    size?: SkProgressSize;
+    /**
+     * When true, displays the current percentage value as a text label on the progress bar.
+     * The label is automatically hidden in indeterminate mode since no percentage is available.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Position of the percentage label when `showValue` is true. Choose 'left' for
+     * left-aligned, 'center' for centered over the bar, or 'right' for right-aligned.
+     * @default 'center'
+     */
+    valuePosition?: SkProgressValuePosition;
+    /**
+     * Custom color for the progress bar fill, overriding the `kind` color. Accepts any
+     * valid CSS color value. Use OKLCH colors for consistency with the design system
+     * (e.g., "oklch(0.7 0.2 145)").
+     */
+    baseColor?: string;
+    /**
+     * Custom color for the progress bar track (background), overriding the default track
+     * color. Accepts any valid CSS color value. Useful for creating custom color schemes
+     * or matching specific brand colors.
+     */
+    trackColor?: string;
+}
+declare const _default: import('vue').DefineComponent<SkProgressComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkProgressComponentProps> & Readonly<{}>, {
+    kind: ComponentKind;
+    baseColor: string;
+    value: number | null;
+    size: SkProgressSize;
+    max: number;
+    showValue: boolean;
+    valuePosition: SkProgressValuePosition;
+    trackColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,22 @@
+import { ComponentKind, ComponentSize } from '../../types';
+/** Progress bar size */
+export type SkProgressSize = ComponentSize;
+/** Progress value label position */
+export type SkProgressValuePosition = 'left' | 'center' | 'right';
+/** Progress bar props interface */
+export interface SkProgressProps {
+    /** Progress value (0 to max). Use null or undefined for indeterminate state */
+    modelValue?: number | null;
+    /** Maximum value */
+    max?: number;
+    /** Semantic color kind */
+    kind?: ComponentKind;
+    /** Bar height size */
+    size?: SkProgressSize;
+    /** Show percentage label */
+    showValue?: boolean;
+    /** Custom bar color (overrides kind) */
+    baseColor?: string;
+    /** Custom track/background color */
+    trackColor?: string;
+}

package/dist/components/Radio/SkRadio.vue.d.ts

@@ -0,0 +1,59 @@
+import { ComponentCustomColors } from '../../types';
+import { SkRadioKind, SkRadioSize } from './types';
+export interface SkRadioComponentProps extends ComponentCustomColors {
+    /**
+     * The value this radio option represents. When selected, the parent SkRadioGroup's
+     * v-model will be set to this value. Must be unique within the radio group to ensure
+     * proper selection behavior.
+     */
+    value: string | number;
+    /**
+     * Label text displayed next to the radio button. Can be overridden by the default
+     * slot for custom label content (icons, formatted text, etc.). If neither label
+     * nor slot content is provided, only the radio circle is rendered.
+     */
+    label?: string;
+    /**
+     * When true, this radio option is disabled and cannot be selected. The radio
+     * button appears with reduced opacity and the cursor changes to not-allowed.
+     * Does not affect other radio options in the same group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Semantic color kind that controls the radio button appearance when selected.
+     * If not set, inherits from the parent SkRadioGroup's kind prop. Use to style
+     * individual radio options differently from the group default.
+     * @default Inherited from SkRadioGroup, or 'neutral' if not set
+     */
+    kind?: SkRadioKind;
+    /**
+     * Radio button size. Controls both the radio circle dimensions and the label text
+     * size. If not set, inherits from the parent SkRadioGroup's size prop.
+     * Available sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).
+     * @default Inherited from SkRadioGroup, or 'md' if not set
+     */
+    size?: SkRadioSize;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkRadioComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkRadioComponentProps> & Readonly<{}>, {
+    kind: SkRadioKind;
+    disabled: boolean;
+    size: SkRadioSize;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+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/Radio/SkRadioGroup.vue.d.ts

@@ -0,0 +1,85 @@
+import { SkRadioGroupOrientation, SkRadioKind, SkRadioSize } from './types';
+export interface SkRadioGroupComponentProps {
+    /**
+     * Layout orientation of the radio options. Controls how child SkRadio components
+     * are arranged. 'vertical' stacks options top to bottom, 'horizontal' arranges
+     * them left to right. Keyboard arrow navigation adapts to match the orientation.
+     * @default 'vertical'
+     */
+    orientation?: SkRadioGroupOrientation;
+    /**
+     * Semantic color kind applied to all child SkRadio components. Sets the default
+     * appearance for the entire group. Individual radios can override this by setting
+     * their own `kind` prop.
+     * @default 'neutral'
+     */
+    kind?: SkRadioKind;
+    /**
+     * Size applied to all child SkRadio components. Controls the radio circle
+     * dimensions and label text size for the entire group. Individual radios can
+     * override this by setting their own `size` prop.
+     * Available sizes: 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).
+     * @default 'md'
+     */
+    size?: SkRadioSize;
+    /**
+     * When true, the entire radio group is disabled and no options can be selected.
+     * All child radios appear with reduced opacity. Use for temporarily unavailable
+     * form fields or read-only states.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When true, marks the radio group as required for form validation. At least one
+     * option must be selected before the form can be submitted. This does not add
+     * visual indication—use a SkField wrapper for required field styling.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The form field name used when submitting the selected value in a form.
+     * Required for native form submission. The selected radio's value is submitted
+     * under this name.
+     */
+    name?: string;
+    /**
+     * Enables circular keyboard navigation within the group. When true, pressing
+     * arrow down/right on the last option moves focus to the first option, and
+     * vice versa. When false, navigation stops at the boundaries.
+     * @default true
+     */
+    loop?: boolean;
+}
+type __VLS_Props = SkRadioGroupComponentProps;
+type __VLS_PublicProps = {
+    modelValue?: string | number;
+} & __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 | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    kind: SkRadioKind;
+    disabled: boolean;
+    size: SkRadioSize;
+    orientation: SkRadioGroupOrientation;
+    required: boolean;
+    name: string;
+    loop: 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/Radio/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SkRadio } from './SkRadio.vue';
+export { default as SkRadioGroup } from './SkRadioGroup.vue';
+export type { SkRadioKind, SkRadioGroupOrientation, SkRadioSize } from './types';

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

@@ -0,0 +1,4 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkRadioKind = ComponentKind;
+export type SkRadioSize = ComponentSize;
+export type SkRadioGroupOrientation = 'horizontal' | 'vertical';

package/dist/components/Sidebar/SkSidebar.vue.d.ts

@@ -0,0 +1,38 @@
+import { SkSidebarKind } from './types';
+import { ComponentCustomColors } from '../../types';
+export interface SkSidebarComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the sidebar panel's background, border, and text colors.
+     * The kind is passed to the underlying SkPanel component. Use semantic kinds like 'neutral'
+     * or 'primary' to match your theme, or use `baseColor`/`textColor` props for custom colors.
+     * @default 'neutral'
+     */
+    kind?: SkSidebarKind;
+    /**
+     * CSS width value for the sidebar. Accepts any valid CSS width including pixels, rems,
+     * percentages, or viewport units. The sidebar maintains this fixed width while the main
+     * content area fills the remaining space in a typical sidebar layout.
+     * @default '180px'
+     */
+    width?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkSidebarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSidebarComponentProps> & Readonly<{}>, {
+    kind: SkSidebarKind;
+    width: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+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/Sidebar/SkSidebarItem.vue.d.ts

@@ -0,0 +1,37 @@
+export interface SkSidebarItemComponentProps {
+    /**
+     * The HTML element or Vue component to render as. Use 'a' for standard links, 'RouterLink'
+     * for Vue Router navigation, 'button' for click actions, or any custom component. All
+     * additional attributes (href, to, @click, etc.) are passed through via v-bind="$attrs".
+     * @default 'a'
+     */
+    as?: string;
+    /**
+     * When true, applies active/selected styling to indicate this is the current page or
+     * selected item. The active state uses a distinct background color and may include
+     * additional visual indicators. You must manage this prop yourself based on your
+     * routing logic (e.g., comparing against the current route path).
+     * @default false
+     */
+    active?: 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<SkSidebarItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSidebarItemComponentProps> & Readonly<{}>, {
+    as: string;
+    active: 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/Sidebar/SkSidebarSection.vue.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @component SkSidebarSection
+ * @description A grouping container for organizing related sidebar items under a common heading. Use
+ * sections to create logical categories in your navigation, such as "Getting Started", "Components",
+ * or "Settings". The section title appears as a small, muted heading above its items.
+ *
+ * @example
+ * ```vue
+ * <SkSidebarSection title="Documentation">
+ *   <SkSidebarItem as="RouterLink" to="/docs/intro">Introduction</SkSidebarItem>
+ *   <SkSidebarItem as="RouterLink" to="/docs/install">Installation</SkSidebarItem>
+ *   <SkSidebarItem as="RouterLink" to="/docs/config">Configuration</SkSidebarItem>
+ * </SkSidebarSection>
+ * ```
+ *
+ * @slot default - Container for SkSidebarItem components. Items are rendered as a vertical list
+ *                 below the section title (if provided).
+ */
+export interface SkSidebarSectionComponentProps {
+    /**
+     * The heading text displayed above the section's navigation items. When provided, renders
+     * as an h3 element with muted styling to visually separate it from the navigation links.
+     * When omitted, the section renders without a heading, useful for ungrouped items or
+     * when you want spacing between groups without labels.
+     */
+    title?: string;
+}
+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<SkSidebarSectionComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSidebarSectionComponentProps> & Readonly<{}>, {}, {}, {}, {}, 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/Sidebar/types.d.ts

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

package/dist/components/Skeleton/SkSkeleton.vue.d.ts

@@ -0,0 +1,55 @@
+import { SkSkeletonAnimation, SkSkeletonCorner, SkSkeletonVariant } from './types';
+export interface SkSkeletonComponentProps {
+    /**
+     * The shape variant that determines the skeleton's default proportions and styling.
+     * 'text' creates a short-height line suitable for text placeholders. 'rectangular'
+     * creates a flexible rectangle for images or content blocks. 'circular' creates a
+     * round shape for avatars. 'square' creates equal width/height with beveled corners.
+     * @default 'text'
+     */
+    variant?: SkSkeletonVariant;
+    /**
+     * The width of the skeleton. Accepts any valid CSS width value (px, rem, %, etc.).
+     * For responsive layouts, use percentage values. For fixed-size elements like avatars,
+     * use pixel or rem values.
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * The height of the skeleton. Accepts any valid CSS height value. When not specified,
+     * the height is determined by the variant (text has a small fixed height, circular and
+     * square match their width). Required for rectangular variant to have visible height.
+     * @default undefined (varies by variant)
+     */
+    height?: string;
+    /**
+     * The loading animation style. 'shimmer' creates a moving gradient highlight effect
+     * that sweeps across the skeleton. 'pulse' creates a fading opacity animation.
+     * 'none' disables animation for static placeholders.
+     * @default 'shimmer'
+     */
+    animation?: SkSkeletonAnimation;
+    /**
+     * Array of corner positions to bevel, overriding the variant's default corner styling.
+     * Use this for skeletons that need to match specific card or panel layouts where only
+     * certain corners are beveled. Options: 'top-left', 'top-right', 'bottom-right', 'bottom-left'.
+     * @default undefined (uses variant default)
+     */
+    corners?: SkSkeletonCorner[];
+    /**
+     * Custom bevel size for beveled corners. Accepts any valid CSS length value.
+     * Only applies when `corners` prop is provided. Use this to match the bevel size
+     * of the component the skeleton is replacing.
+     * @default '0.5rem'
+     */
+    bevel?: string;
+}
+declare const _default: import('vue').DefineComponent<SkSkeletonComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSkeletonComponentProps> & Readonly<{}>, {
+    bevel: string;
+    variant: SkSkeletonVariant;
+    width: string;
+    height: string;
+    animation: SkSkeletonAnimation;
+    corners: SkSkeletonCorner[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,21 @@
+/** Skeleton shape variant */
+export type SkSkeletonVariant = 'text' | 'circular' | 'rectangular' | 'square';
+/** Skeleton animation style */
+export type SkSkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+/** Corner positions for beveling */
+export type SkSkeletonCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Skeleton props interface */
+export interface SkSkeletonProps {
+    /** Shape variant */
+    variant?: SkSkeletonVariant;
+    /** Width (CSS value) */
+    width?: string;
+    /** Height (CSS value) */
+    height?: string;
+    /** Animation style */
+    animation?: SkSkeletonAnimation;
+    /** Custom corners to bevel (overrides variant default) */
+    corners?: SkSkeletonCorner[];
+    /** Custom bevel size (CSS value, e.g. '0.5rem', '8px') */
+    bevel?: string;
+}

package/dist/components/Slider/SkSlider.vue.d.ts

@@ -0,0 +1,100 @@
+import { ComponentKind } from '../../types';
+import { SkSliderOrientation, SkSliderSize } from './types';
+export interface SkSliderComponentProps {
+    /**
+     * The current value(s) of the slider. Pass a single number for a standard slider,
+     * or an array of numbers to create a range slider with multiple thumbs. The number
+     * of thumbs automatically matches the length of the array.
+     */
+    modelValue: number | number[];
+    /**
+     * The minimum allowed value for the slider. The leftmost (or bottommost for vertical)
+     * position of the thumb corresponds to this value. Values outside the min/max range
+     * are clamped automatically.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value for the slider. The rightmost (or topmost for vertical)
+     * position of the thumb corresponds to this value. Values outside the min/max range
+     * are clamped automatically.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The granularity of the slider. The value will snap to multiples of this step.
+     * For example, a step of 5 on a 0-100 slider allows values 0, 5, 10, ..., 100.
+     * Use smaller steps for fine-grained control or larger steps for discrete selections.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Semantic color kind that controls the filled track and thumb appearance. Semantic
+     * kinds (neutral, primary, accent, etc.) adapt to your theme. Use custom colors via
+     * `baseColor` and `thumbColor` props for branding-specific styling.
+     * @default 'primary'
+     */
+    kind?: ComponentKind;
+    /**
+     * Size of the slider track and thumb. Controls the visual thickness of the track
+     * and diameter of the thumb. Available sizes: 'sm' (small), 'md' (medium), 'lg' (large).
+     * @default 'md'
+     */
+    size?: SkSliderSize;
+    /**
+     * Orientation of the slider layout. Use 'horizontal' for left-to-right value increase,
+     * or 'vertical' for bottom-to-top value increase. Keyboard navigation arrows adapt
+     * automatically based on orientation.
+     * @default 'horizontal'
+     */
+    orientation?: SkSliderOrientation;
+    /**
+     * When true, the slider is disabled and cannot be interacted with. The slider
+     * appears with reduced opacity and the cursor changes to not-allowed. Thumb
+     * positions remain visible but cannot be moved.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The form field name used when submitting the slider value in a form.
+     * Required for native form submission. Each thumb value is submitted separately.
+     */
+    name?: string;
+    /**
+     * For range sliders (multiple thumbs), the minimum number of steps that must
+     * separate adjacent thumbs. Prevents thumbs from overlapping or crossing each
+     * other. A value of 0 allows thumbs to touch but not cross.
+     * @default 0
+     */
+    minStepsBetweenThumbs?: number;
+    /**
+     * Custom color for the filled portion of the track. Overrides the `kind` prop
+     * color when set. Use any valid CSS color value (hex, rgb, oklch, etc.).
+     * For complete customization, combine with `thumbColor`.
+     */
+    baseColor?: string;
+    /**
+     * Custom color for the slider thumb(s). Independent of the track color, allowing
+     * two-tone designs. Use any valid CSS color value. If not set, the thumb inherits
+     * styling from the current theme.
+     */
+    thumbColor?: string;
+}
+declare const _default: import('vue').DefineComponent<SkSliderComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | number[]) => any;
+}, string, import('vue').PublicProps, Readonly<SkSliderComponentProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+}>, {
+    kind: ComponentKind;
+    disabled: boolean;
+    baseColor: string;
+    size: SkSliderSize;
+    orientation: SkSliderOrientation;
+    name: string;
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetweenThumbs: number;
+    thumbColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,32 @@
+import { ComponentKind, ComponentSize } from '../../types';
+/** Slider size */
+export type SkSliderSize = ComponentSize;
+/** Slider orientation */
+export type SkSliderOrientation = 'horizontal' | 'vertical';
+/** Slider props interface */
+export interface SkSliderProps {
+    /** Current value(s) of the slider */
+    modelValue: number | number[];
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Semantic color kind */
+    kind?: ComponentKind;
+    /** Slider size */
+    size?: SkSliderSize;
+    /** Slider orientation */
+    orientation?: SkSliderOrientation;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether multiple thumbs are allowed (range slider) */
+    minStepsBetweenThumbs?: number;
+    /** Custom track color (overrides kind) */
+    baseColor?: string;
+    /** Custom thumb color */
+    thumbColor?: string;
+}

package/dist/components/Spinner/SkSpinner.vue.d.ts

@@ -0,0 +1,39 @@
+import { ComponentKind } from '../../types';
+import { SkSpinnerSize, SkSpinnerVariant } from './types';
+export interface SkSpinnerComponentProps {
+    /**
+     * Semantic color kind that controls the spinner color. Semantic kinds (neutral, primary,
+     * accent, etc.) adapt to your theme. Use 'primary' for general loading states, or match
+     * the kind to the context (e.g., 'danger' when loading after an error action).
+     * @default 'primary'
+     */
+    kind?: ComponentKind;
+    /**
+     * Size of the spinner. Controls both the spinner dimensions and animation scale.
+     * Use 'sm' for inline loading indicators (e.g., inside buttons), 'md' for standard
+     * loading states, and 'lg' or 'xl' for full-page or section loading overlays.
+     * @default 'md'
+     */
+    size?: SkSpinnerSize;
+    /**
+     * Animation variant that determines the spinner's visual style:
+     * - 'circular': Two concentric spinning arcs (default, most common)
+     * - 'dots': Three bouncing dots in sequence
+     * - 'crosshair': Rotating crosshair pattern (fits cyberpunk aesthetic)
+     * @default 'circular'
+     */
+    variant?: SkSpinnerVariant;
+    /**
+     * Custom color for the spinner, overriding the `kind` color. Accepts any valid CSS
+     * color value. Use "currentColor" to inherit the text color from the parent element,
+     * which is useful for spinners inside buttons or other colored containers.
+     */
+    color?: string;
+}
+declare const _default: import('vue').DefineComponent<SkSpinnerComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSpinnerComponentProps> & Readonly<{}>, {
+    kind: ComponentKind;
+    size: SkSpinnerSize;
+    variant: SkSpinnerVariant;
+    color: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,16 @@
+import { ComponentKind, ComponentSize } from '../../types';
+/** Spinner animation variant */
+export type SkSpinnerVariant = 'circular' | 'dots' | 'crosshair';
+/** Spinner size */
+export type SkSpinnerSize = ComponentSize;
+/** Spinner props interface */
+export interface SkSpinnerProps {
+    /** Semantic color kind */
+    kind?: ComponentKind;
+    /** Spinner size */
+    size?: SkSpinnerSize;
+    /** Animation variant */
+    variant?: SkSpinnerVariant;
+    /** Custom spinner color (overrides kind) */
+    color?: string;
+}