@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Tag/SkTag.vue

@@ -0,0 +1,129 @@
+<!-------------------------------------------------------------------------------------------------------------------
+  - Tag Component
+  ------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <span :class="classes" :style="customColorStyles">
+        <span class="sk-tag-content">
+            <slot />
+        </span>
+        <button
+            v-if="removable"
+            type="button"
+            class="sk-tag-remove"
+            aria-label="Remove"
+            @click="handleRemove"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                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>
+        </button>
+    </span>
+</template>
+
+<!------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A compact label component for displaying metadata, categories, or status information.
+     * Supports multiple variants, sizes, and optional remove functionality.
+     */
+
+    import { computed, toRef } from 'vue';
+    import type { ComponentCustomColors, ComponentKind } from '@/types';
+    import type { SkTagSize, SkTagVariant } from './types';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A compact label component for displaying metadata, categories, or status information.
+     * Supports multiple variants, sizes, and optional remove functionality.
+     *
+     * @example Basic tags
+     * ```vue
+     * <SkTag kind="primary">Featured</SkTag>
+     * <SkTag kind="success" removable @remove="handleRemove">Active</SkTag>
+     * ```
+     *
+     * @example Custom colored tag
+     * ```vue
+     * <SkTag
+     *   base-color="oklch(0.75 0.2 150)"
+     *   text-color="white"
+     *   variant="solid"
+     * >
+     *   Custom Green Tag
+     * </SkTag>
+     * ```
+     */
+    export interface SkTagComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the tag */
+        kind ?: ComponentKind;
+        /** Visual variant style (solid, outline, subtle, or ghost) */
+        variant ?: SkTagVariant;
+        /** Size of the tag affecting padding and font size */
+        size ?: SkTagSize;
+        /** Whether to show a remove button that emits a 'remove' event when clicked */
+        removable ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTagComponentProps>(), {
+        kind: 'neutral',
+        variant: 'solid',
+        size: 'md',
+        removable: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const emit = defineEmits<{
+        remove : [];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() =>
+    {
+        return {
+            'sk-tag': true,
+            [`sk-${ props.kind }`]: true,
+            [`sk-${ props.variant }`]: true,
+            [`sk-${ props.size }`]: true,
+            'sk-removable': props.removable,
+        };
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function handleRemove() : void
+    {
+        emit('remove');
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Custom color styles
+    const customColorStyles = useCustomColors(
+        'tag',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!------------------------------------------------------------------------------------------------------------------->

package/src/components/Tag/types.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tag Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Tag variant options
+ */
+export type SkTagVariant = 'solid' | 'outline' | 'subtle' | 'ghost';
+
+/**
+ * Tag size options
+ */
+export type SkTagSize = 'sm' | 'md' | 'lg' | 'xl';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/TagsInput/SkTagsInput.vue

@@ -0,0 +1,184 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - TagsInput Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <TagsInputRoot
+        v-model="modelValue"
+        :class="wrapperClasses"
+        :style="customColorStyles"
+        :disabled="disabled"
+        :max="max"
+        :add-on-paste="addOnPaste"
+    >
+        <div :class="containerClasses">
+            <TagsInputItem v-for="tag in modelValue" :key="tag" :value="tag" :class="tagClasses" class="sk-tag">
+                <TagsInputItemText />
+                <TagsInputItemDelete :class="deleteClasses">
+                    <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"
+                        style="width: 0.875rem; height: 0.875rem;"
+                    >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                </TagsInputItemDelete>
+            </TagsInputItem>
+
+            <TagsInputInput :class="inputClasses" :placeholder="placeholder" :disabled="isInputDisabled" />
+        </div>
+    </TagsInputRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_tags-input.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A multi-value tag input component powered by RekaUI.
+     * Add tags by typing and pressing Enter, remove with backspace or delete button.
+     */
+
+    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import {
+        TagsInputInput,
+        TagsInputItem,
+        TagsInputItemDelete,
+        TagsInputItemText,
+        TagsInputRoot,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkTagsInputKind, SkTagsInputSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A multi-value tag input component powered by RekaUI.
+     */
+    export interface SkTagsInputComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for input */
+        kind ?: SkTagsInputKind;
+        /** Input size */
+        size ?: SkTagsInputSize;
+        /** Placeholder text */
+        placeholder ?: string;
+        /** Disabled state */
+        disabled ?: boolean;
+        /** Maximum number of tags */
+        max ?: number;
+        /** Add tags on paste */
+        addOnPaste ?: boolean;
+        /** Kind for tag badges (inherits from input kind if not set) */
+        tagKind ?: string;
+        /** Variant for tag badges */
+        tagVariant ?: 'solid' | 'outline' | 'ghost';
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTagsInputComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        placeholder: 'Add tag...',
+        disabled: false,
+        max: undefined,
+        addOnPaste: true,
+        tagKind: undefined,
+        tagVariant: 'solid',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const modelValue = defineModel<string[]>({ default: () => [] });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject field kind
+    const fieldKind = inject<ComputedRef<SkTagsInputKind | undefined>>('field-kind', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveTagKind = computed(() => props.tagKind || effectiveKind.value);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Disable just the input field when max tags reached (still allow removing tags)
+    const isInputDisabled = computed(() =>
+    {
+        if(props.disabled)
+        {
+            return true;
+        }
+        if(props.max && modelValue.value.length >= props.max)
+        {
+            return true;
+        }
+        return false;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-tags-input': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const containerClasses = computed(() => ({
+        'sk-tags-input-container': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const tagClasses = computed(() => ({
+        [`sk-${ effectiveTagKind.value }`]: true,
+        [`sk-${ props.tagVariant }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const deleteClasses = computed(() => ({
+        'sk-tags-input-delete': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const inputClasses = computed(() => ({
+        'sk-tags-input-field': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'tags-input',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/TagsInput/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// TagsInput Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkTagsInput } from './SkTagsInput.vue';
+export type { SkTagsInputKind, SkTagsInputSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/TagsInput/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// TagsInput Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkTagsInputKind = ComponentKind;
+export type SkTagsInputSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Textarea/SkTextarea.vue

@@ -0,0 +1,117 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Textarea Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <textarea
+        v-model="modelValue"
+        :class="classes"
+        :style="customColorStyles"
+        :disabled="disabled"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :required="required"
+        :name="name"
+        :rows="rows"
+        :autocomplete="autocomplete"
+        v-bind="$attrs"
+    />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_textarea.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A multiline textarea component with validation states and semantic color support.
+     * Supports flexible sizing and row configuration.
+     */
+
+    import { type ComputedRef, computed, inject, toRef } from 'vue';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkTextareaKind, SkTextareaSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A multiline textarea component with validation states and semantic color support.
+     */
+    export interface SkTextareaComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind (useful for validation states) */
+        kind ?: SkTextareaKind;
+        /** Textarea size */
+        size ?: SkTextareaSize;
+        /** Placeholder text */
+        placeholder ?: string;
+        /** Disabled state */
+        disabled ?: boolean;
+        /** Read-only state */
+        readonly ?: boolean;
+        /** Required for form validation */
+        required ?: boolean;
+        /** Form field name */
+        name ?: string;
+        /** Number of visible text rows */
+        rows ?: number;
+        /** Autocomplete hint */
+        autocomplete ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkTextareaComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        placeholder: undefined,
+        disabled: false,
+        readonly: false,
+        required: false,
+        name: undefined,
+        rows: 4,
+        autocomplete: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const modelValue = defineModel<string>({ default: '' });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject kind from parent SkField if available
+    const fieldKind = inject<ComputedRef<SkTextareaKind | undefined>>('field-kind', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-textarea': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+        'sk-readonly': props.readonly,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'textarea',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Textarea/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Textarea Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkTextarea } from './SkTextarea.vue';
+export type { SkTextareaKind, SkTextareaSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Textarea/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Textarea Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkTextareaKind = ComponentKind;
+export type SkTextareaSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Theme/SkTheme.vue

@@ -0,0 +1,47 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Theme Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :data-scheme="currentTheme">
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A theme provider component that controls the color scheme for all child components.
+     * Wrap your application or sections in this component to apply a theme.
+     */
+
+    import { provide, watch } from 'vue';
+    import type { SkThemeComponentProps } from './types';
+    import { provideTheme } from './useTheme';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkThemeComponentProps>(), {
+        theme: 'greyscale',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const { currentTheme, setTheme } = provideTheme(props.theme);
+
+    // Provide theme for components that use portals (dropdown, modal, tooltip, etc.)
+    provide('sk-theme', currentTheme);
+
+    // Watch for external theme prop changes
+    watch(() => props.theme, (newTheme) =>
+    {
+        if(newTheme)
+        {
+            setTheme(newTheme);
+        }
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Theme/types.ts

@@ -0,0 +1,17 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Theme Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkThemeName = 'greyscale' | 'colorful';
+
+/**
+ * A theme provider component that controls the color scheme for all child components.
+ * Wrap your application or sections in this component to apply a theme.
+ */
+export interface SkThemeComponentProps
+{
+    /** Theme name controlling the overall color scheme (greyscale or colorful) */
+    theme ?: SkThemeName;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Theme/useTheme.ts

@@ -0,0 +1,131 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Theme Composable
+//----------------------------------------------------------------------------------------------------------------------
+
+import { type InjectionKey, type Ref, inject, provide, ref } from 'vue';
+import type { SkThemeName } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Context object for theme management.
+ * Provides reactive theme state and methods to change the theme.
+ */
+export interface ThemeContext
+{
+    /** Reactive reference to the currently active theme */
+    currentTheme : Ref<SkThemeName>;
+    /** Function to change the active theme */
+    setTheme : (theme : SkThemeName) => void;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+const ThemeSymbol : InjectionKey<ThemeContext> = Symbol('SkTheme');
+
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Provides theme context to child components.
+ * Call this function at the root of your component tree (typically in SkTheme component).
+ *
+ * @param initialTheme - The initial theme to use. Defaults to 'greyscale'
+ * @returns ThemeContext object containing currentTheme ref and setTheme function
+ *
+ * @example Basic usage
+ * ```ts
+ * const theme = provideTheme('blue');
+ * ```
+ *
+ * @example Changing theme
+ * ```ts
+ * const theme = provideTheme();
+ * theme.setTheme('blue'); // Switch to blue theme
+ * ```
+ */
+export function provideTheme(initialTheme : SkThemeName = 'greyscale') : ThemeContext
+{
+    const currentTheme = ref<SkThemeName>(initialTheme);
+
+    const setTheme = (theme : SkThemeName) : void =>
+    {
+        currentTheme.value = theme;
+    };
+
+    const context : ThemeContext = {
+        currentTheme,
+        setTheme,
+    };
+
+    provide(ThemeSymbol, context);
+
+    return context;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Accesses the theme context in a child component.
+ * Must be called within a component that has an SkTheme ancestor.
+ *
+ * @returns ThemeContext object containing currentTheme ref and setTheme function
+ * @throws Error if called outside of an SkTheme component tree
+ *
+ * @example Get current theme
+ * ```vue
+ * <script setup>
+ * import { useTheme } from '@skewedaspect/sleekspace-ui';
+ *
+ * const { currentTheme } = useTheme();
+ * console.log(currentTheme.value); // 'greyscale', 'blue', etc.
+ * </script>
+ * ```
+ *
+ * @example Change theme
+ * ```vue
+ * <script setup>
+ * import { useTheme } from '@skewedaspect/sleekspace-ui';
+ *
+ * const { setTheme } = useTheme();
+ *
+ * function switchToDarkTheme() {
+ *   setTheme('blue');
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="switchToDarkTheme">Switch to Blue Theme</button>
+ * </template>
+ * ```
+ *
+ * @example Reactive theme usage
+ * ```vue
+ * <script setup>
+ * import { computed } from 'vue';
+ * import { useTheme } from '@skewedaspect/sleekspace-ui';
+ *
+ * const { currentTheme } = useTheme();
+ * const isDarkTheme = computed(() => currentTheme.value === 'blue');
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     Current theme: {{ currentTheme }}
+ *     <span v-if="isDarkTheme">Dark mode active</span>
+ *   </div>
+ * </template>
+ * ```
+ */
+export function useTheme() : ThemeContext
+{
+    const context = inject(ThemeSymbol);
+
+    if(!context)
+    {
+        throw new Error('useTheme must be called within an SkTheme component');
+    }
+
+    return context;
+}
+
+//----------------------------------------------------------------------------------------------------------------------