@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Pagination/SkPaginationItem.vue

@@ -0,0 +1,107 @@
+<template>
+    <button
+        :class="classes"
+        :disabled="disabled || type === 'ellipsis'"
+        :aria-label="ariaLabel"
+        :aria-current="active ? 'page' : undefined"
+        @click="handleClick"
+    >
+        <span v-if="type === 'prev'">‹</span>
+        <span v-else-if="type === 'next'">›</span>
+        <span v-else-if="type === 'first'">‹‹</span>
+        <span v-else-if="type === 'last'">››</span>
+        <span v-else-if="type === 'ellipsis'">...</span>
+        <span v-else>{{ page }}</span>
+    </button>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Styles implemented in /src/styles/components/_pagination.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { type Ref, computed, inject } from 'vue';
+
+    // Types
+    import type { SkPaginationItemProps, SkPaginationKind, SkPaginationSize, SkPaginationVariant } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export type SkPaginationItemComponentProps = SkPaginationItemProps;
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkPaginationItemComponentProps>(), {
+        page: undefined,
+        active: false,
+        disabled: false,
+        type: 'page',
+    });
+
+    const emit = defineEmits<{
+        click : [ page : number ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const kindRef = inject<Ref<SkPaginationKind>>('pagination-kind');
+    const sizeRef = inject<Ref<SkPaginationSize>>('pagination-size');
+    const variantRef = inject<Ref<SkPaginationVariant>>('pagination-variant');
+
+    const kind = computed(() => kindRef?.value ?? 'neutral');
+    const size = computed(() => sizeRef?.value ?? 'md');
+    const variant = computed(() => variantRef?.value ?? 'solid');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-pagination-item': true,
+        [`sk-${ kind.value }`]: true,
+        [`sk-${ size.value }`]: true,
+        [`sk-${ variant.value }`]: true,
+        'sk-active': props.active,
+        'sk-ellipsis': props.type === 'ellipsis',
+    }));
+
+    const ariaLabel = computed(() =>
+    {
+        switch (props.type)
+        {
+            case 'prev':
+                return 'Previous page';
+            case 'next':
+                return 'Next page';
+            case 'first':
+                return 'First page';
+            case 'last':
+                return 'Last page';
+            case 'page':
+                return `Page ${ props.page }`;
+            default:
+                return undefined;
+        }
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function handleClick() : void
+    {
+        if(props.type === 'ellipsis' || props.disabled)
+        {
+            return;
+        }
+
+        if(props.page !== undefined)
+        {
+            emit('click', props.page);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Pagination/index.ts

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

package/src/components/Pagination/types.ts

@@ -0,0 +1,40 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Types for SkPagination
+//----------------------------------------------------------------------------------------------------------------------
+
+// Types
+import type { 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/src/components/Panel/SkPanel.vue

@@ -0,0 +1,96 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Panel Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="classes" :style="customColorStyles">
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Control decoration visibility via v-bind
+    .sk-panel::after {
+        display: v-bind('decorationDisplay');
+    }
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A foundational container component with borders, background colors, and optional decorative accents.
+     * Serves as the base for other components like SkCard and SkSidebar.
+     */
+
+    import { computed, toRef } from 'vue';
+    import type { SkPanelKind, SkPanelSize } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A foundational container component with borders, background colors, and optional decorative accents.
+     * Serves as the base for other components like SkCard and SkSidebar.
+     */
+    export interface SkPanelComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the panel */
+        kind ?: SkPanelKind;
+        /** Size affecting padding and spacing inside the panel */
+        size ?: SkPanelSize;
+        /** Whether to display the decorative accent border */
+        showDecoration ?: boolean;
+        /** Whether to remove the border entirely */
+        noBorder ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkPanelComponentProps>(), {
+        kind: 'neutral',
+        size: 'md',
+        showDecoration: true,
+        noBorder: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-panel': true,
+            [`sk-${ props.kind }`]: true,
+            [`sk-${ props.size }`]: true,
+            'sk-no-border': props.noBorder,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'panel',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Control decoration visibility
+    // Note: noBorder automatically disables decoration
+    const decorationDisplay = computed(() =>
+    {
+        if(props.noBorder)
+        {
+            return 'none';
+        }
+        return props.showDecoration ? 'block' : 'none';
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Panel/types.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Panel Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Panel semantic kinds (uses common types)
+export type SkPanelKind = ComponentKind;
+
+// Panel sizes (only affects cut size, not padding or dimensions)
+export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Popover/SkPopover.vue

@@ -0,0 +1,185 @@
+<template>
+    <PopoverRoot v-model:open="isOpen">
+        <PopoverTrigger as-child>
+            <slot name="trigger" />
+        </PopoverTrigger>
+        <PopoverPortal>
+            <PopoverContent
+                :class="contentClasses"
+                :style="customColorStyles"
+                :data-scheme="theme"
+                :side="side"
+                :align="align"
+                :side-offset="sideOffset"
+                :collision-padding="8"
+            >
+                <!-- Header -->
+                <div v-if="title || $slots.header" class="sk-popover-header">
+                    <h3 v-if="title" class="sk-popover-title">
+                        {{ title }}
+                    </h3>
+                    <slot name="header" />
+                    <PopoverClose
+                        v-if="closable"
+                        class="sk-popover-close"
+                        aria-label="Close"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                    </PopoverClose>
+                </div>
+
+                <!-- Content -->
+                <div v-if="$slots.default" class="sk-popover-body">
+                    <slot />
+                </div>
+
+                <!-- Footer -->
+                <div v-if="$slots.footer" class="sk-popover-footer">
+                    <slot name="footer" />
+                </div>
+
+                <!-- Arrow -->
+                <PopoverArrow v-if="showArrow" class="sk-popover-arrow" />
+            </PopoverContent>
+        </PopoverPortal>
+    </PopoverRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Popover styles are implemented in /src/styles/components/_popover.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Popover component for floating panels positioned relative to a trigger.
+     * Combines tooltip-like positioning with card-like structure.
+     */
+
+    import { computed, toRef } from 'vue';
+    import {
+        PopoverArrow,
+        PopoverClose,
+        PopoverContent,
+        PopoverPortal,
+        PopoverRoot,
+        PopoverTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors, ComponentKind } from '@/types';
+    import type { SkPopoverAlign, SkPopoverSide } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Popover component for floating panels positioned relative to a trigger.
+     *
+     * Combines tooltip-like positioning with card-like structure for rich content.
+     *
+     * @example Basic usage with title
+     * ```vue
+     * <SkPopover title="Settings">
+     *   <template #trigger><SkButton>Open</SkButton></template>
+     *   <p>Popover content here</p>
+     * </SkPopover>
+     * ```
+     *
+     * @example With footer actions
+     * ```vue
+     * <SkPopover title="Confirm Action" kind="danger">
+     *   <template #trigger><SkButton kind="danger">Delete</SkButton></template>
+     *   <p>Are you sure you want to delete this item?</p>
+     *   <template #footer>
+     *     <SkButton variant="ghost" size="sm">Cancel</SkButton>
+     *     <SkButton kind="danger" size="sm">Delete</SkButton>
+     *   </template>
+     * </SkPopover>
+     * ```
+     */
+    export interface SkPopoverComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind */
+        kind ?: ComponentKind;
+        /** Which side of the trigger to show the popover */
+        side ?: SkPopoverSide;
+        /** Alignment along the side */
+        align ?: SkPopoverAlign;
+        /** Offset from the trigger in pixels */
+        sideOffset ?: number;
+        /** Whether to show the arrow pointing to the trigger */
+        showArrow ?: boolean;
+        /** Optional title displayed in the header */
+        title ?: string;
+        /** Whether to show a close button in the header */
+        closable ?: boolean;
+        /** Control the open state (v-model) */
+        open ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkPopoverComponentProps>(), {
+        kind: 'neutral',
+        side: 'bottom',
+        align: 'center',
+        sideOffset: 8,
+        showArrow: true,
+        title: undefined,
+        closable: true,
+        open: undefined,
+    });
+
+    const emit = defineEmits<{
+        'update:open' : [ value : boolean ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Two-way binding for open state
+    const isOpen = computed({
+        get: () => props.open,
+        set: (value) => emit('update:open', value ?? false),
+    });
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-popover-content': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'popover',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Popover/index.ts

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

package/src/components/Popover/types.ts

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

package/src/components/Progress/SkProgress.vue

@@ -0,0 +1,144 @@
+<template>
+    <ProgressRoot
+        v-model="internalValue"
+        :max="max"
+        :class="rootClasses"
+        :style="customStyles"
+    >
+        <ProgressIndicator
+            class="sk-progress-indicator"
+            :style="indicatorStyle"
+        />
+        <span
+            v-if="showValue && !isIndeterminate"
+            :class="['sk-progress-value', `sk-value-${ props.valuePosition }`]"
+        >
+            {{ Math.round(percentage) }}%
+        </span>
+    </ProgressRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_progress.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkProgress
+     * A progress bar component with determinate and indeterminate modes.
+     * Supports all 7 semantic kinds and custom colors.
+     */
+
+    import { computed } from 'vue';
+    import { ProgressIndicator, ProgressRoot } from 'reka-ui';
+
+    // Types
+    import type { ComponentKind } from '@/types';
+    import type { SkProgressSize, SkProgressValuePosition } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkProgressComponentProps
+    {
+        /** Progress value (0 to max). Use null or undefined for indeterminate state */
+        value ?: number | null;
+        /** Maximum value */
+        max ?: number;
+        /** Semantic color kind */
+        kind ?: ComponentKind;
+        /** Bar height size */
+        size ?: SkProgressSize;
+        /** Show percentage label */
+        showValue ?: boolean;
+        /** Position of the value label */
+        valuePosition ?: SkProgressValuePosition;
+        /** Custom bar color (overrides kind) */
+        baseColor ?: string;
+        /** Custom track/background color */
+        trackColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkProgressComponentProps>(), {
+        value: null,
+        max: 100,
+        kind: 'primary',
+        size: 'md',
+        showValue: false,
+        valuePosition: 'center',
+        baseColor: undefined,
+        trackColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Reka UI expects undefined for indeterminate, not null
+    const internalValue = computed(() =>
+    {
+        return props.value === null ? undefined : props.value;
+    });
+
+    const isIndeterminate = computed(() => props.value === null || props.value === undefined);
+
+    const percentage = computed(() =>
+    {
+        if(isIndeterminate.value)
+        {
+            return 0;
+        }
+        return ((props.value ?? 0) / props.max) * 100;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    const rootClasses = computed(() => ({
+        'sk-progress': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+        'sk-indeterminate': isIndeterminate.value,
+        'sk-empty': !isIndeterminate.value && percentage.value === 0,
+        'sk-complete': !isIndeterminate.value && percentage.value >= 100,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Custom Colors
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customStyles = computed(() =>
+    {
+        const styles : Record<string, string> = {};
+
+        if(props.baseColor)
+        {
+            styles['--sk-progress-color-base'] = props.baseColor;
+        }
+
+        if(props.trackColor)
+        {
+            styles['--sk-progress-track-bg'] = props.trackColor;
+        }
+
+        return styles;
+    });
+
+    const indicatorStyle = computed(() =>
+    {
+        if(isIndeterminate.value)
+        {
+            return {};
+        }
+
+        return {
+            width: `${ percentage.value }%`,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Progress/index.ts

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

package/src/components/Progress/types.ts

@@ -0,0 +1,34 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Progress Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { 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;
+}
+
+//----------------------------------------------------------------------------------------------------------------------