@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Modal/types.ts

@@ -0,0 +1,12 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkModalKind = ComponentKind;
+export type SkModalSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/NavBar/SkNavBar.vue

@@ -0,0 +1,83 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - NavBar Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <nav :class="classes" :style="customColorStyles">
+        <div class="sk-navbar-content">
+            <div v-if="slots.brand" class="sk-navbar-brand">
+                <slot name="brand" />
+            </div>
+
+            <div v-if="slots.default" class="sk-navbar-nav">
+                <slot />
+            </div>
+
+            <div v-if="slots.actions" class="sk-navbar-actions">
+                <slot name="actions" />
+            </div>
+        </div>
+    </nav>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A navigation bar component for site-wide navigation with brand, nav items, and action slots.
+     * Supports sticky positioning and semantic color theming.
+     */
+
+    import { computed, toRef, useSlots } from 'vue';
+    import type { SkNavBarKind } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A navigation bar component for site-wide navigation with brand, nav items, and action slots.
+     * Supports sticky positioning and semantic color theming.
+     */
+    export interface SkNavBarComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the navbar */
+        kind ?: SkNavBarKind;
+        /** Whether the navbar sticks to the top of the viewport when scrolling */
+        sticky ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkNavBarComponentProps>(), {
+        kind: 'neutral',
+        sticky: true,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-navbar': true,
+            [`sk-${ props.kind }`]: true,
+            'sk-sticky': props.sticky,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'navbar',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/NavBar/index.ts

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

package/src/components/NavBar/types.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// NavBar Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { 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/src/components/NumberInput/SkNumberInput.vue

@@ -0,0 +1,168 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - NumberInput Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="wrapperClasses">
+        <NumberFieldRoot
+            v-model="modelValue"
+            :class="classes"
+            :style="customColorStyles"
+            :disabled="disabled"
+            :readonly="readonly"
+            :required="required"
+            :name="name"
+            :min="min"
+            :max="max"
+            :step="step"
+        >
+            <NumberFieldInput :class="inputClasses" :placeholder="placeholder" />
+            <div class="sk-number-input-steppers">
+                <NumberFieldIncrement class="sk-number-input-increment">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="square"
+                        stroke-linejoin="miter"
+                    >
+                        <polyline points="18 15 12 9 6 15" />
+                    </svg>
+                </NumberFieldIncrement>
+                <NumberFieldDecrement class="sk-number-input-decrement">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="square"
+                        stroke-linejoin="miter"
+                    >
+                        <polyline points="18 9 12 15 6 9" />
+                    </svg>
+                </NumberFieldDecrement>
+            </div>
+        </NumberFieldRoot>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_number-input.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A numeric input component with stepper buttons powered by RekaUI.
+     * Supports keyboard navigation, min/max values, and step increments.
+     */
+
+    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import {
+        NumberFieldDecrement,
+        NumberFieldIncrement,
+        NumberFieldInput,
+        NumberFieldRoot,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkNumberInputKind, SkNumberInputSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A numeric input component with stepper buttons powered by RekaUI.
+     */
+    export interface SkNumberInputComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind (useful for validation states) */
+        kind ?: SkNumberInputKind;
+        /** Input size */
+        size ?: SkNumberInputSize;
+        /** Placeholder text */
+        placeholder ?: string;
+        /** Disabled state */
+        disabled ?: boolean;
+        /** Read-only state */
+        readonly ?: boolean;
+        /** Required for form validation */
+        required ?: boolean;
+        /** Form field name */
+        name ?: string;
+        /** Minimum value */
+        min ?: number;
+        /** Maximum value */
+        max ?: number;
+        /** Step increment/decrement amount */
+        step ?: number;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkNumberInputComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        placeholder: undefined,
+        disabled: false,
+        readonly: false,
+        required: false,
+        name: undefined,
+        min: undefined,
+        max: undefined,
+        step: 1,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const modelValue = defineModel<number>({ default: 0 });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject kind from parent SkField if available
+    const fieldKind = inject<ComputedRef<SkNumberInputKind | undefined>>('field-kind', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-number-input-wrapper': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-number-input': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const inputClasses = computed(() => ({
+        'sk-number-input-field': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'number-input',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/NumberInput/index.ts

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

package/src/components/NumberInput/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// NumberInput Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkNumberInputKind = ComponentKind;
+export type SkNumberInputSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Page/SkPage.vue

@@ -0,0 +1,94 @@
+<template>
+    <div :class="classes" :style="customStyles">
+        <header v-if="$slots.header" class="sk-page-header">
+            <slot name="header" />
+        </header>
+
+        <div class="sk-page-main">
+            <aside v-if="$slots.sidebar" class="sk-page-sidebar">
+                <slot name="sidebar" />
+            </aside>
+
+            <main class="sk-page-content">
+                <slot />
+            </main>
+        </div>
+
+        <footer v-if="$slots.footer" class="sk-page-footer">
+            <slot name="footer" />
+        </footer>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_page.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkPage
+     * A full-page layout component with header, sidebar, content, and footer slots.
+     * Provides a standard page structure with optional fixed header/footer and configurable sidebar.
+     */
+
+    import { computed } from 'vue';
+
+    // Types
+    import type { SkPageSidebarPosition } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkPageComponentProps
+    {
+        /** 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;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkPageComponentProps>(), {
+        sidebarPosition: 'left',
+        fixedHeader: false,
+        fixedFooter: false,
+        sidebarWidth: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-page': true,
+        [`sk-sidebar-${ props.sidebarPosition }`]: true,
+        'sk-fixed-header': props.fixedHeader,
+        'sk-fixed-footer': props.fixedFooter,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Custom Styles
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customStyles = computed(() =>
+    {
+        if(!props.sidebarWidth)
+        {
+            return {};
+        }
+
+        return {
+            '--sk-page-sidebar-width': props.sidebarWidth,
+        };
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Page/index.ts

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

package/src/components/Page/types.ts

@@ -0,0 +1,21 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Page Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/** 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/src/components/Pagination/SkPagination.vue

@@ -0,0 +1,185 @@
+<template>
+    <nav :class="classes" :style="customColorStyles" aria-label="Pagination">
+        <SkPaginationItem
+            v-if="showFirstLast"
+            type="first"
+            :page="1"
+            :disabled="disabled || currentPage === 1"
+            @click="goToPage"
+        />
+
+        <SkPaginationItem
+            v-if="showPrevNext"
+            type="prev"
+            :page="currentPage - 1"
+            :disabled="disabled || currentPage === 1"
+            @click="goToPage"
+        />
+
+        <SkPaginationItem
+            v-for="(item, index) in paginationRange"
+            :key="index"
+            :type="typeof item === 'string' ? 'ellipsis' : 'page'"
+            :page="typeof item === 'number' ? item : undefined"
+            :active="typeof item === 'number' && item === currentPage"
+            :disabled="disabled"
+            @click="goToPage"
+        />
+
+        <SkPaginationItem
+            v-if="showPrevNext"
+            type="next"
+            :page="currentPage + 1"
+            :disabled="disabled || currentPage === total"
+            @click="goToPage"
+        />
+
+        <SkPaginationItem
+            v-if="showFirstLast"
+            type="last"
+            :page="total"
+            :disabled="disabled || currentPage === total"
+            @click="goToPage"
+        />
+    </nav>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Styles implemented in /src/styles/components/_pagination.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, provide, toRef } from 'vue';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkPaginationProps } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkPaginationComponentProps extends SkPaginationProps, ComponentCustomColors
+    {
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Components
+    import SkPaginationItem from './SkPaginationItem.vue';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkPaginationComponentProps>(), {
+        modelValue: 1,
+        siblingCount: 1,
+        showFirstLast: true,
+        showPrevNext: true,
+        kind: 'neutral',
+        size: 'md',
+        variant: 'solid',
+        disabled: false,
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    const emit = defineEmits<{
+        'update:modelValue' : [ page : number ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const currentPage = computed<number>({
+        get: () => props.modelValue,
+        set: (value) => emit('update:modelValue', value),
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    provide('pagination-kind', toRef(() => props.kind));
+    provide('pagination-size', toRef(() => props.size));
+    provide('pagination-variant', toRef(() => props.variant));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'pagination',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-pagination': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+        [`sk-${ props.variant }`]: true,
+    }));
+
+    const paginationRange = computed<(number | string)[]>(() =>
+    {
+        const range : (number | string)[] = [];
+
+        // If total pages fit in display, show all
+        const maxDisplay = 5 + (props.siblingCount * 2);
+        if(props.total <= maxDisplay)
+        {
+            return Array.from({ length: props.total }, (_, i) => i + 1);
+        }
+
+        // Always show first page
+        range.push(1);
+
+        // Calculate left and right boundaries
+        const leftSibling = Math.max(currentPage.value - props.siblingCount, 2);
+        const rightSibling = Math.min(currentPage.value + props.siblingCount, props.total - 1);
+
+        // Add left ellipsis if needed
+        if(leftSibling > 2)
+        {
+            range.push('...');
+        }
+
+        // Add sibling pages
+        for(let i = leftSibling; i <= rightSibling; i++)
+        {
+            range.push(i);
+        }
+
+        // Add right ellipsis if needed
+        if(rightSibling < props.total - 1)
+        {
+            range.push('...');
+        }
+
+        // Always show last page
+        if(props.total > 1)
+        {
+            range.push(props.total);
+        }
+
+        return range;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function goToPage(page : number) : void
+    {
+        if(page < 1 || page > props.total || page === currentPage.value || props.disabled)
+        {
+            return;
+        }
+
+        currentPage.value = page;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->