@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Button/SkButton.vue

@@ -0,0 +1,148 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Button Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <component
+        :is="componentTag"
+        :type="componentTag === 'button' ? type : undefined"
+        :href="componentTag === 'a' ? href : undefined"
+        :to="componentTag === 'router-link' ? to : undefined"
+        :disabled="disabled || loading"
+        :class="classes"
+        :style="customColorStyles"
+        :aria-pressed="pressed ? 'true' : undefined"
+        :aria-busy="loading ? 'true' : undefined"
+        role="button"
+    >
+        <span v-if="loading" class="sk-button-loader" aria-hidden="true" />
+        <span :class="{ 'sk-button-content': true, 'loading': loading }">
+            <span v-if="$slots.leading" class="sk-button-icon sk-button-icon-leading">
+                <slot name="leading" />
+            </span>
+            <span v-if="$slots.icon" class="sk-button-icon sk-button-icon-only">
+                <slot name="icon" />
+            </span>
+            <span v-if="$slots.default" class="sk-button-text">
+                <slot />
+            </span>
+            <span v-if="$slots.trailing" class="sk-button-icon sk-button-icon-trailing">
+                <slot name="trailing" />
+            </span>
+        </span>
+    </component>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_button.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A versatile button component with multiple variants, sizes, and states.
+     * Supports rendering as button, link (a), or router-link.
+     */
+
+    import { type Slots, computed, toRef, useSlots } from 'vue';
+    import type { SkButtonKind, SkButtonSize, SkButtonType, SkButtonVariant } from './types';
+    import type { ComponentCustomColors } from '@/types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A versatile button component with multiple variants, sizes, and states.
+     * Supports rendering as button, link (a), or router-link.
+     */
+    export interface SkButtonComponentProps extends ComponentCustomColors
+    {
+        /** HTML button type attribute */
+        type ?: SkButtonType;
+        /** Semantic color kind */
+        kind ?: SkButtonKind;
+        /** Visual variant style */
+        variant ?: SkButtonVariant;
+        /** Button size */
+        size ?: SkButtonSize;
+        /** Disabled state */
+        disabled ?: boolean;
+        /** Loading state with spinner */
+        loading ?: boolean;
+        /** Toggle pressed state */
+        pressed ?: boolean;
+        /** Href for anchor tag rendering */
+        href ?: string;
+        /** Route for router-link rendering */
+        to ?: string | Record<string, any>;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkButtonComponentProps>(), {
+        type: 'button',
+        kind: 'neutral',
+        variant: 'solid',
+        size: 'md',
+        disabled: false,
+        loading: false,
+        pressed: false,
+        href: undefined,
+        to: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Determine which component to render
+    const componentTag = computed<string>(() =>
+    {
+        if(props.to !== undefined)
+        {
+            return 'router-link';
+        }
+        else if(props.href !== undefined)
+        {
+            return 'a';
+        }
+        else
+        {
+            return 'button';
+        }
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed<Record<string, boolean>>(() =>
+    {
+        const isIconOnly = !!(slots.icon && !slots.default);
+
+        return {
+            'sk-button': true,
+            [`sk-${ props.kind }`]: true,
+            [`sk-${ props.variant }`]: true,
+            [`sk-${ props.size }`]: true,
+            'sk-loading': props.loading,
+            'sk-pressed': props.pressed,
+            'sk-icon-only': isIconOnly,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'button',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Button/types.ts

@@ -0,0 +1,21 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Button Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize, ComponentVariant } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// HTML button type attribute
+export type SkButtonType = 'button' | 'submit' | 'reset';
+
+// Button semantic kinds (uses common types)
+export type SkButtonKind = ComponentKind;
+
+// Button visual variants (uses common types)
+export type SkButtonVariant = ComponentVariant;
+
+// Button sizes (uses common types)
+export type SkButtonSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Card/SkCard.vue

@@ -0,0 +1,144 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Card Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SkPanel
+        :kind="kind"
+        :size="size"
+        :show-decoration="effectiveShowDecoration"
+        :no-border="noBorder"
+        :base-color="baseColor"
+        :text-color="textColor"
+        :class="classes"
+    >
+        <div v-if="title || $slots.header" class="sk-card-header" :style="headerStyles">
+            <h3 v-if="title" class="sk-card-title">
+                {{ title }}
+            </h3>
+            <slot name="header" />
+        </div>
+        <div v-if="$slots.media" class="sk-card-media">
+            <slot name="media" />
+        </div>
+        <div v-if="$slots.default" :class="contentClasses">
+            <slot />
+        </div>
+        <div v-if="$slots.footer" class="sk-card-footer">
+            <slot name="footer" />
+        </div>
+    </SkPanel>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A structured card component with optional header, media, content, and footer sections.
+     * Built on top of SkPanel with additional styling and layout features.
+     */
+
+    import { computed } from 'vue';
+    import SkPanel from '../Panel/SkPanel.vue';
+    import type { SkCardKind } from './types';
+    import type { SkPanelSize } from '../Panel/types';
+    import type { ComponentCustomColors } from '@/types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A structured card component with optional header, media, content, and footer sections.
+     * Built on top of SkPanel with additional styling and layout features.
+     */
+    export interface SkCardComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the card */
+        kind ?: SkCardKind;
+        /** Size of the card affecting padding and spacing */
+        size ?: SkPanelSize;
+        /** Whether to show the decorative accent border (when not explicitly disabled by noDecoration) */
+        showDecoration ?: boolean;
+        /** Explicitly disable the decorative accent border */
+        noDecoration ?: boolean;
+        /** Whether to hide the card border entirely */
+        noBorder ?: boolean;
+        /** Optional title text displayed in the header section */
+        title ?: string;
+        /** Custom background color for the card header */
+        headerColor ?: string;
+        /** Makes the content area scrollable (card needs a constrained height) */
+        scrollable ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkCardComponentProps>(), {
+        kind: 'neutral',
+        size: 'md',
+        showDecoration: undefined,
+        noDecoration: false,
+        noBorder: false,
+        title: undefined,
+        headerColor: undefined,
+        scrollable: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-card': true,
+        };
+    });
+
+    const contentClasses = computed(() =>
+    {
+        return {
+            'sk-card-content': true,
+            'sk-panel-scroll-content': props.scrollable,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle decoration prop logic
+    const effectiveShowDecoration = computed(() =>
+    {
+        // noBorder automatically disables decoration
+        if(props.noBorder)
+        {
+            return false;
+        }
+        // noDecoration takes precedence
+        if(props.noDecoration)
+        {
+            return false;
+        }
+        // If showDecoration is explicitly set, use it
+        if(props.showDecoration !== undefined)
+        {
+            return props.showDecoration;
+        }
+        // Default to true
+        return true;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Header styles - set background color directly
+    const headerStyles = computed(() =>
+    {
+        const styles : Record<string, string> = {};
+
+        if(props.headerColor)
+        {
+            styles['background-color'] = props.headerColor;
+        }
+
+        return styles;
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Card/types.ts

@@ -0,0 +1,12 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Card Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Card semantic kinds (uses common types)
+export type SkCardKind = ComponentKind;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Checkbox/SkCheckbox.vue

@@ -0,0 +1,136 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Checkbox Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <label :class="labelClasses">
+        <CheckboxRoot
+            v-model="checked"
+            :class="classes"
+            :style="customColorStyles"
+            :disabled="disabled"
+            :required="required"
+            :name="name"
+        >
+            <CheckboxIndicator class="sk-checkbox-indicator">
+                <!-- Checkmark for checked state -->
+                <svg
+                    v-if="checked === true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    stroke-linecap="square"
+                    stroke-linejoin="miter"
+                    class="sk-checkbox-icon"
+                >
+                    <polyline points="20 6 9 17 4 12" />
+                </svg>
+                <!-- Horizontal line for indeterminate state -->
+                <svg
+                    v-else-if="checked === 'indeterminate'"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    stroke-linecap="square"
+                    class="sk-checkbox-icon"
+                >
+                    <line x1="6" y1="12" x2="18" y2="12" />
+                </svg>
+            </CheckboxIndicator>
+        </CheckboxRoot>
+        <span v-if="label || $slots.default" class="sk-checkbox-label">
+            <slot>{{ label }}</slot>
+        </span>
+    </label>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_checkbox.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A checkbox component for boolean or indeterminate states powered by RekaUI.
+     * Supports semantic color kinds and flexible sizing.
+     */
+
+    import { computed, toRef } from 'vue';
+    import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkCheckboxKind, SkCheckboxSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A checkbox component for boolean or indeterminate states powered by RekaUI.
+     */
+    export interface SkCheckboxComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind */
+        kind ?: SkCheckboxKind;
+        /** Checkbox size */
+        size ?: SkCheckboxSize;
+        /** Disabled state */
+        disabled ?: boolean;
+        /** Required for form validation */
+        required ?: boolean;
+        /** Form field name */
+        name ?: string;
+        /** Label text (can be overridden by default slot) */
+        label ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkCheckboxComponentProps>(), {
+        kind: 'neutral',
+        size: 'md',
+        disabled: false,
+        required: false,
+        name: undefined,
+        label: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const checked = defineModel<boolean | 'indeterminate'>({ default: false });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-checkbox': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const labelClasses = computed(() => ({
+        'sk-checkbox-wrapper': true,
+        'sk-disabled': props.disabled,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'checkbox',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Checkbox/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Checkbox Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkCheckbox } from './SkCheckbox.vue';
+export type { SkCheckboxKind, SkCheckboxSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Checkbox/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Checkbox Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkCheckboxKind = ComponentKind;
+export type SkCheckboxSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Collapsible/SkCollapsible.vue

@@ -0,0 +1,159 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Collapsible Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <CollapsibleRoot
+        v-model:open="isOpen"
+        :disabled="disabled"
+        :class="classes"
+        :style="customColorStyles"
+    >
+        <CollapsibleTrigger as-child>
+            <slot name="trigger" :open="isOpen">
+                <SkButton
+                    :kind="baseColor ? undefined : kind"
+                    :base-color="baseColor"
+                    :text-color="textColor"
+                    variant="ghost"
+                >
+                    {{ triggerText }}
+                    <template #trailing>
+                        <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"
+                            :class="chevronClasses"
+                            style="width: 1rem; height: 1rem;"
+                        >
+                            <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                    </template>
+                </SkButton>
+            </slot>
+        </CollapsibleTrigger>
+        <CollapsibleContent class="sk-collapsible-content">
+            <div class="sk-collapsible-content-inner">
+                <slot />
+            </div>
+        </CollapsibleContent>
+    </CollapsibleRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Collapsible styles are implemented in /src/styles/components/_collapsible.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Collapsible component for showing/hiding content with smooth animations.
+     */
+
+    import { computed, toRef } from 'vue';
+    import {
+        CollapsibleContent,
+        CollapsibleRoot,
+        CollapsibleTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkCollapsibleKind } from './types';
+
+    // Components
+    import SkButton from '../Button/SkButton.vue';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Collapsible component for showing/hiding content with smooth animations.
+     *
+     * @example Basic usage
+     * ```vue
+     * <SkCollapsible v-model:open="isOpen" trigger-text="Show more">
+     *   <p>Hidden content here</p>
+     * </SkCollapsible>
+     * ```
+     *
+     * @example Custom trigger
+     * ```vue
+     * <SkCollapsible v-model:open="isOpen">
+     *   <template #trigger="{ open }">
+     *     <SkButton>{{ open ? 'Hide' : 'Show' }} Details</SkButton>
+     *   </template>
+     *   <p>Collapsible content here</p>
+     * </SkCollapsible>
+     * ```
+     */
+    export interface SkCollapsibleComponentProps extends ComponentCustomColors
+    {
+        /** Controlled state (v-model:open) */
+        open ?: boolean;
+        /** Initial uncontrolled state */
+        defaultOpen ?: boolean;
+        /** Disable interaction */
+        disabled ?: boolean;
+        /** Semantic color kind */
+        kind ?: SkCollapsibleKind;
+        /** Text for default trigger */
+        triggerText ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkCollapsibleComponentProps>(), {
+        open: undefined,
+        defaultOpen: false,
+        disabled: false,
+        kind: 'neutral',
+        triggerText: 'Toggle',
+    });
+
+    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),
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-collapsible': true,
+        // Only apply kind class if custom colors are NOT provided
+        [`sk-${ props.kind }`]: !props.baseColor,
+        'sk-open': isOpen.value,
+    }));
+
+    const chevronClasses = computed(() => ({
+        'sk-collapsible-chevron': true,
+        'sk-open': isOpen.value,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'collapsible',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Collapsible/index.ts

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

package/src/components/Collapsible/types.ts

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