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

package/dist/components/Modal/SkModal.vue.d.ts

@@ -0,0 +1,108 @@
+import { ComponentCustomColors, ComponentKind, ComponentSize } from '../../types';
+export interface SkModalComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the modal's accent colors, including the header,
+     * close button, and any kind-styled elements within the modal. Semantic kinds
+     * (neutral, primary, accent, etc.) adapt to your theme.
+     * @default 'neutral'
+     */
+    kind?: ComponentKind;
+    /**
+     * Size of the modal dialog, controlling its maximum width. Use 'sm' for simple
+     * confirmations, 'md' for standard forms, 'lg' for complex content, and 'xl' for
+     * dashboards or data-heavy dialogs.
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Title text displayed in the modal header. When provided, a header section with
+     * the title and close button is automatically rendered. Can be overridden with
+     * the title slot for custom header content.
+     */
+    title?: string;
+    /**
+     * Text label for the default trigger button. When provided (and no trigger slot is
+     * used), renders an SkButton that opens the modal when clicked. Omit both this and
+     * the trigger slot to control the modal programmatically via v-model:open.
+     */
+    triggerText?: string;
+    /**
+     * Controls whether the modal is open. Use with `v-model:open` for two-way binding.
+     * Set to true to open the modal programmatically, false to close it. The modal
+     * can also be closed via the close button, Escape key, or overlay click.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether pressing the Escape key closes the modal. Set to false for important
+     * dialogs where accidental dismissal should be prevented, such as unsaved form
+     * data or critical confirmations.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether clicking the overlay (dark backdrop) closes the modal. Set to false to
+     * require users to interact with modal buttons rather than dismissing accidentally.
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /**
+     * Boolean shorthand to prevent closing on Escape key. Equivalent to
+     * `:close-on-escape="false"`. Use when you prefer attribute syntax over bound values.
+     * @default false
+     */
+    noCloseOnEscape?: boolean;
+    /**
+     * Boolean shorthand to prevent closing on overlay click. Equivalent to
+     * `:close-on-overlay="false"`. Use when you prefer attribute syntax over bound values.
+     * @default false
+     */
+    noCloseOnOverlay?: boolean;
+}
+/**
+ * Close the modal programmatically.
+ * This function is exposed to all slots via slot props.
+ */
+declare function close(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        title?(_: {
+            close: typeof close;
+        }): any;
+        default?(_: {
+            close: typeof close;
+        }): any;
+        footer?(_: {
+            close: typeof close;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkModalComponentProps, {
+    close: typeof close;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<SkModalComponentProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    kind: ComponentKind;
+    size: ComponentSize;
+    title: string;
+    open: boolean;
+    triggerText: string;
+    closeOnEscape: boolean;
+    closeOnOverlay: boolean;
+    noCloseOnEscape: boolean;
+    noCloseOnOverlay: 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/Modal/index.d.ts

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

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

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

package/dist/components/NavBar/SkNavBar.vue.d.ts

@@ -0,0 +1,40 @@
+import { SkNavBarKind } from './types';
+import { ComponentCustomColors } from '../../types';
+export interface SkNavBarComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the navbar's background and text colors. Use semantic kinds
+     * like 'primary' or 'accent' to match your theme, or color kinds like 'neon-blue' for fixed
+     * branding colors. The kind affects the entire navbar including all three slot areas.
+     * @default 'neutral'
+     */
+    kind?: SkNavBarKind;
+    /**
+     * When true, the navbar uses CSS `position: sticky` to remain fixed at the top of the viewport
+     * as the user scrolls down the page. The navbar will overlay page content below it. Set to false
+     * for a navbar that scrolls with the page content.
+     * @default true
+     */
+    sticky?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        brand?(_: {}): any;
+        default?(_: {}): any;
+        actions?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkNavBarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkNavBarComponentProps> & Readonly<{}>, {
+    kind: SkNavBarKind;
+    sticky: boolean;
+}, {}, {}, {}, 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/NavBar/index.d.ts

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

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

@@ -0,0 +1,6 @@
+import { ComponentKind } from '../../types';
+/**
+ * Available kinds for the navbar component.
+ * Supports both semantic kinds (themeable) and color kinds (direct palette access).
+ */
+export type SkNavBarKind = ComponentKind;

package/dist/components/NumberInput/SkNumberInput.vue.d.ts

@@ -0,0 +1,93 @@
+import { ComponentCustomColors } from '../../types';
+import { SkNumberInputKind, SkNumberInputSize } from './types';
+export interface SkNumberInputComponentProps extends ComponentCustomColors {
+    /**
+     * 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?: SkNumberInputKind;
+    /**
+     * Input size controlling height, padding, font size, and stepper button dimensions.
+     * Available sizes: 'sm' (small, compact forms), 'md' (medium, default), 'lg' (large),
+     * 'xl' (extra large).
+     * @default 'md'
+     */
+    size?: SkNumberInputSize;
+    /**
+     * Placeholder text displayed when the input is empty or has no value. Use to indicate
+     * expected format (e.g., "0.00" for currency) or provide a hint about the field's purpose.
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * When true, disables the input and stepper buttons preventing all user interaction.
+     * The component 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 the value but
+     * cannot modify it via typing or stepper buttons. Unlike disabled, read-only inputs
+     * are still included in form submission.
+     * @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;
+    /**
+     * Minimum allowed value. The stepper buttons will not decrement below this value, and
+     * manual input will be constrained on blur. Use to enforce business rules like positive
+     * quantities or minimum prices.
+     * @default undefined
+     */
+    min?: number;
+    /**
+     * Maximum allowed value. The stepper buttons will not increment above this value, and
+     * manual input will be constrained on blur. Use to enforce limits like maximum quantity
+     * or inventory caps.
+     * @default undefined
+     */
+    max?: number;
+    /**
+     * The increment/decrement step amount when using stepper buttons or arrow keys. Use
+     * fractional values like 0.01 for currency or 0.1 for percentages. Pressing Shift while
+     * stepping may multiply the step for faster navigation.
+     * @default 1
+     */
+    step?: number;
+}
+type __VLS_Props = SkNumberInputComponentProps;
+type __VLS_PublicProps = {
+    modelValue?: number;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    kind: SkNumberInputKind;
+    disabled: boolean;
+    size: SkNumberInputSize;
+    placeholder: string;
+    required: boolean;
+    name: string;
+    readonly: boolean;
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

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

package/dist/components/Page/SkPage.vue.d.ts

@@ -0,0 +1,55 @@
+import { SkPageSidebarPosition } from './types';
+export interface SkPageComponentProps {
+    /**
+     * Controls which side of the page the sidebar appears on. The sidebar slot content
+     * will be positioned on the specified side, with the main content area filling the
+     * remaining space. Has no effect if the sidebar slot is not provided.
+     * @default 'left'
+     */
+    sidebarPosition?: SkPageSidebarPosition;
+    /**
+     * When true, the header remains fixed at the top of the viewport while the main
+     * content scrolls beneath it. Useful for keeping navigation always accessible.
+     * The content area adjusts its top padding to prevent overlap with the fixed header.
+     * @default false
+     */
+    fixedHeader?: boolean;
+    /**
+     * When true, the footer remains fixed at the bottom of the viewport while the main
+     * content scrolls above it. Useful for persistent action bars or important links.
+     * The content area adjusts its bottom padding to prevent overlap with the fixed footer.
+     * @default false
+     */
+    fixedFooter?: boolean;
+    /**
+     * Custom width for the sidebar region. Accepts any valid CSS width value (px, rem, %, etc.).
+     * When not specified, the sidebar uses the default width defined in the design tokens.
+     * Only applies when the sidebar slot is provided.
+     */
+    sidebarWidth?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        sidebar?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkPageComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkPageComponentProps> & Readonly<{}>, {
+    sidebarPosition: SkPageSidebarPosition;
+    fixedHeader: boolean;
+    fixedFooter: boolean;
+    sidebarWidth: 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/Page/index.d.ts

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

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

@@ -0,0 +1,13 @@
+/** Sidebar position */
+export type SkPageSidebarPosition = 'left' | 'right';
+/** Page props interface */
+export interface SkPageProps {
+    /** Sidebar position */
+    sidebarPosition?: SkPageSidebarPosition;
+    /** Fixed header (stays at top when scrolling) */
+    fixedHeader?: boolean;
+    /** Fixed footer (stays at bottom when scrolling) */
+    fixedFooter?: boolean;
+    /** Custom sidebar width */
+    sidebarWidth?: string;
+}

package/dist/components/Pagination/SkPagination.vue.d.ts

@@ -0,0 +1,79 @@
+import { ComponentCustomColors } from '../../types';
+import { SkPaginationProps } from './types';
+export interface SkPaginationComponentProps extends SkPaginationProps, ComponentCustomColors {
+    /**
+     * The total number of pages available. This is a required prop that determines
+     * how many page numbers to display and when to show ellipsis indicators.
+     */
+    total: number;
+    /**
+     * The current active page number. Use with `v-model` for two-way binding. Page
+     * numbers are 1-indexed, so the first page is 1, not 0.
+     * @default 1
+     */
+    modelValue?: number;
+    /**
+     * The number of sibling pages to show on each side of the current page. For example,
+     * if the current page is 5 and siblingCount is 1, pages 4 and 6 will be shown.
+     * Higher values show more page numbers but take up more space.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Whether to show the "first page" and "last page" navigation buttons. These
+     * buttons allow users to jump directly to page 1 or the final page. Set to false
+     * for a more compact pagination layout.
+     * @default true
+     */
+    showFirstLast?: boolean;
+    /**
+     * Whether to show the "previous" and "next" navigation buttons. These buttons
+     * allow single-page navigation forward or backward. Typically left enabled for
+     * standard pagination behavior.
+     * @default true
+     */
+    showPrevNext?: boolean;
+    /**
+     * Semantic color kind that controls the pagination appearance. Affects the active
+     * page indicator and navigation button colors. Semantic kinds (neutral, primary,
+     * accent, etc.) adapt to your theme.
+     * @default 'neutral'
+     */
+    kind?: SkPaginationProps['kind'];
+    /**
+     * Size of the pagination buttons. Controls both the button dimensions and text size.
+     * Available sizes: 'xs' (extra small), 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).
+     * @default 'md'
+     */
+    size?: SkPaginationProps['size'];
+    /**
+     * Visual style variant for the pagination buttons. Choose 'solid' for filled buttons,
+     * 'outline' for bordered buttons, 'subtle' for lightly tinted backgrounds, or 'ghost'
+     * for transparent buttons that only show color on hover.
+     * @default 'solid'
+     */
+    variant?: SkPaginationProps['variant'];
+    /**
+     * When true, the entire pagination component is disabled. All buttons become
+     * non-interactive and appear with reduced opacity. The cursor changes to not-allowed.
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const _default: import('vue').DefineComponent<SkPaginationComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (page: number) => any;
+}, string, import('vue').PublicProps, Readonly<SkPaginationComponentProps> & Readonly<{
+    "onUpdate:modelValue"?: ((page: number) => any) | undefined;
+}>, {
+    modelValue: number;
+    kind: import('../../types').ComponentKind;
+    disabled: boolean;
+    baseColor: string;
+    textColor: string;
+    size: import('../../types').ComponentSize;
+    variant: import('./types').SkPaginationVariant;
+    siblingCount: number;
+    showFirstLast: boolean;
+    showPrevNext: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/components/Pagination/SkPaginationItem.vue.d.ts

@@ -0,0 +1,44 @@
+import { SkPaginationItemProps } from './types';
+export interface SkPaginationItemComponentProps {
+    /**
+     * The page number this item represents. Required for 'page', 'prev', 'next', 'first',
+     * and 'last' types. When clicked, this value is emitted to navigate to that page.
+     * Not needed for 'ellipsis' type items.
+     */
+    page?: number;
+    /**
+     * Whether this item is the currently active page. Only applicable to 'page' type items.
+     * Active items receive distinct styling and include aria-current="page" for accessibility.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * When true, the item is disabled and cannot be clicked. The item appears with
+     * reduced opacity and the cursor changes to not-allowed. Commonly used on
+     * prev/first buttons when on page 1, or next/last buttons when on the final page.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The type of pagination item to render. Determines both the visual content and behavior:
+     * - 'page': Shows a page number button
+     * - 'prev': Shows a previous arrow (‹)
+     * - 'next': Shows a next arrow (›)
+     * - 'first': Shows a first-page arrow (‹‹)
+     * - 'last': Shows a last-page arrow (››)
+     * - 'ellipsis': Shows non-interactive dots (...)
+     * @default 'page'
+     */
+    type?: SkPaginationItemProps['type'];
+}
+declare const _default: import('vue').DefineComponent<SkPaginationItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (page: number) => any;
+}, string, import('vue').PublicProps, Readonly<SkPaginationItemComponentProps> & Readonly<{
+    onClick?: ((page: number) => any) | undefined;
+}>, {
+    type: SkPaginationItemProps["type"];
+    disabled: boolean;
+    page: number;
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as SkPagination } from './SkPagination.vue';
+export { default as SkPaginationItem } from './SkPaginationItem.vue';
+export * from './types';

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

@@ -0,0 +1,24 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkPaginationKind = ComponentKind;
+export type SkPaginationSize = ComponentSize;
+export type SkPaginationVariant = 'solid' | 'outline' | 'subtle' | 'ghost';
+export type SkPaginationItemType = 'page' | 'prev' | 'next' | 'ellipsis' | 'first' | 'last';
+export interface SkPaginationProps {
+    modelValue?: number;
+    total: number;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+    kind?: SkPaginationKind;
+    size?: SkPaginationSize;
+    variant?: SkPaginationVariant;
+    disabled?: boolean;
+    baseColor?: string;
+    textColor?: string;
+}
+export interface SkPaginationItemProps {
+    page?: number;
+    active?: boolean;
+    disabled?: boolean;
+    type: SkPaginationItemType;
+}

package/dist/components/Panel/SkPanel.vue.d.ts

@@ -0,0 +1,55 @@
+import { ComponentCustomColors } from '../../types';
+import { SkPanelKind, SkPanelSize } from './types';
+export interface SkPanelComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the panel's border color and decorative accent stripe.
+     * Semantic kinds (neutral, primary, accent, etc.) automatically adapt to your current theme,
+     * while color kinds (neon-blue, neon-purple, etc.) provide fixed branding colors that remain
+     * consistent across themes.
+     * @default 'neutral'
+     */
+    kind?: SkPanelKind;
+    /**
+     * Controls the internal padding of the panel. Larger sizes provide more breathing room
+     * for content, while smaller sizes create compact, dense layouts. Available sizes:
+     * 'sm' (small), 'md' (medium), 'lg' (large), 'xl' (extra large).
+     * @default 'md'
+     */
+    size?: SkPanelSize;
+    /**
+     * When true, displays a colored accent stripe along the top edge of the panel.
+     * The stripe color matches the selected `kind`. This decoration is automatically
+     * disabled when `noBorder` is true since the decoration is part of the border styling.
+     * @default true
+     */
+    showDecoration?: boolean;
+    /**
+     * When true, removes the border entirely from the panel, creating a borderless container.
+     * Useful for nested panels or when you want the panel background without visual boundaries.
+     * Note: Setting this to true automatically disables the decoration stripe.
+     * @default false
+     */
+    noBorder?: boolean;
+}
+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<SkPanelComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkPanelComponentProps> & Readonly<{}>, {
+    kind: SkPanelKind;
+    size: SkPanelSize;
+    showDecoration: boolean;
+    noBorder: boolean;
+}, {}, {}, {}, 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/Panel/types.d.ts

@@ -0,0 +1,3 @@
+import { ComponentKind } from '../../types';
+export type SkPanelKind = ComponentKind;
+export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/Popover/SkPopover.vue.d.ts

@@ -0,0 +1,94 @@
+import { ComponentCustomColors, ComponentKind } from '../../types';
+import { SkPopoverAlign, SkPopoverSide } from './types';
+export interface SkPopoverComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the popover's header accent and overall color scheme.
+     * Semantic kinds (neutral, primary, accent, info, success, warning, danger) adapt to your
+     * theme. Use 'neutral' for general popovers, or match the kind to contextual meaning
+     * (e.g., 'danger' for delete confirmations, 'success' for completion messages).
+     * @default 'neutral'
+     */
+    kind?: ComponentKind;
+    /**
+     * Which side of the trigger element to display the popover. The popover automatically
+     * repositions if there isn't enough space on the preferred side. 'bottom' works well
+     * for toolbars, 'right' for sidebar items, 'top' for footer elements.
+     * @default 'bottom'
+     */
+    side?: SkPopoverSide;
+    /**
+     * Alignment of the popover along its side. 'center' centers the popover on the trigger,
+     * 'start' aligns to the left/top edge, 'end' aligns to the right/bottom edge. Useful
+     * when triggers are near screen edges or when you want the arrow to point at a specific
+     * part of the trigger.
+     * @default 'center'
+     */
+    align?: SkPopoverAlign;
+    /**
+     * Distance in pixels between the popover and its trigger element. Increase for more
+     * visual separation, decrease for tighter coupling. The arrow (if shown) bridges
+     * this gap to maintain visual connection.
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * Whether to display a small arrow pointing from the popover toward its trigger element.
+     * Arrows help visually anchor the popover to its trigger, especially important when
+     * multiple triggers are close together. Disable for a cleaner, card-like appearance.
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Optional title text displayed in the popover header. Creates a header section with
+     * the title and close button (if closable). When omitted and no header slot is provided,
+     * no header is rendered, creating a content-only popover.
+     */
+    title?: string;
+    /**
+     * Whether to show an X close button in the header. Provides an obvious way for users
+     * to dismiss the popover beyond clicking outside. Automatically creates a header section
+     * if title is also set. Users can always close by clicking outside or pressing Escape.
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * Controls the popover's open state for two-way binding with `v-model:open`. When provided,
+     * you control when the popover opens and closes. When omitted, the popover manages its own
+     * state internally (opens on trigger click, closes on outside click or Escape).
+     * @default undefined
+     */
+    open?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkPopoverComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<SkPopoverComponentProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    kind: ComponentKind;
+    title: string;
+    open: boolean;
+    side: SkPopoverSide;
+    align: SkPopoverAlign;
+    sideOffset: number;
+    showArrow: boolean;
+    closable: 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/Popover/index.d.ts

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

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

@@ -0,0 +1,4 @@
+/** Popover positioning side */
+export type SkPopoverSide = 'top' | 'right' | 'bottom' | 'left';
+/** Popover alignment */
+export type SkPopoverAlign = 'start' | 'center' | 'end';