@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/components/Group/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Group Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Group orientation options
+ */
+export type SkGroupOrientation = 'horizontal' | 'vertical';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Input/SkInput.vue

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

package/src/components/Input/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Input Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkInput } from './SkInput.vue';
+export type { SkInputKind, SkInputSize, SkInputType } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Input/types.ts

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Input Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkInputKind = ComponentKind;
+export type SkInputSize = ComponentSize;
+export type SkInputType = 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'number';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Listbox/SkListbox.vue

@@ -0,0 +1,164 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Listbox Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ComboboxRoot v-model="modelValue" :disabled="disabled" :class="wrapperClasses" :style="customColorStyles">
+        <ComboboxAnchor :class="anchorClasses">
+            <ComboboxInput
+                :class="inputClasses"
+                :placeholder="placeholder"
+            />
+            <ComboboxTrigger :class="triggerClasses">
+                <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: 1rem; height: 1rem;"
+                >
+                    <polyline points="6 9 12 15 18 9" />
+                </svg>
+            </ComboboxTrigger>
+        </ComboboxAnchor>
+
+        <ComboboxPortal>
+            <ComboboxContent
+                :data-scheme="theme"
+                :class="contentClasses"
+                :style="customColorStyles"
+                position="popper"
+                side="bottom"
+                align="start"
+                :side-offset="4"
+            >
+                <ComboboxViewport>
+                    <slot />
+                </ComboboxViewport>
+            </ComboboxContent>
+        </ComboboxPortal>
+    </ComboboxRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_listbox.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A searchable listbox component for selecting from predefined options.
+     * Use with SkListboxItem components.
+     */
+
+    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import {
+        ComboboxAnchor,
+        ComboboxContent,
+        ComboboxInput,
+        ComboboxPortal,
+        ComboboxRoot,
+        ComboboxTrigger,
+        ComboboxViewport,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkListboxKind, SkListboxSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A searchable listbox component for selecting from predefined options.
+     */
+    export interface SkListboxComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind */
+        kind ?: SkListboxKind;
+        /** Input size */
+        size ?: SkListboxSize;
+        /** Placeholder text */
+        placeholder ?: string;
+        /** Disabled state */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkListboxComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        placeholder: 'Search...',
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const modelValue = defineModel<string | string[]>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    // Inject field kind from parent SkField
+    const fieldKind = inject<ComputedRef<SkListboxKind | undefined>>('field-kind', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-listbox': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const anchorClasses = computed(() => ({
+        'sk-listbox-anchor': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const inputClasses = computed(() => ({
+        'sk-listbox-input': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const triggerClasses = computed(() => ({
+        'sk-listbox-trigger': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-listbox-content': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'listbox',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Listbox/SkListboxItem.vue

@@ -0,0 +1,68 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ListboxItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ComboboxItem :class="classes" :value="value" :disabled="disabled">
+        <slot />
+        <ComboboxItemIndicator class="sk-listbox-item-indicator">
+            <svg
+                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"
+                style="width: 1rem; height: 1rem;"
+            >
+                <polyline points="20 6 9 17 4 12" />
+            </svg>
+        </ComboboxItemIndicator>
+    </ComboboxItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_listbox.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A listbox item for use within SkListbox.
+     */
+
+    import { computed } from 'vue';
+    import { ComboboxItem, ComboboxItemIndicator } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * A listbox item for use within SkListbox.
+     */
+    export interface SkListboxItemComponentProps
+    {
+        /** Value for this item */
+        value : string | number | object;
+        /** Disabled state */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkListboxItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-listbox-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Listbox/SkListboxSeparator.vue

@@ -0,0 +1,26 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ListboxSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ComboboxSeparator class="sk-listbox-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_listbox.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * A listbox separator for use within SkListbox.
+     */
+
+    import { ComboboxSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Listbox/index.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Listbox Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkListbox } from './SkListbox.vue';
+export { default as SkListboxItem } from './SkListboxItem.vue';
+export { default as SkListboxSeparator } from './SkListboxSeparator.vue';
+export type { SkListboxKind, SkListboxSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Listbox/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Listbox Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkListboxKind = ComponentKind;
+export type SkListboxSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Modal/SkModal.vue

@@ -0,0 +1,231 @@
+<template>
+    <DialogRoot v-model:open="isOpen">
+        <DialogTrigger v-if="$slots.trigger || triggerText" as-child>
+            <slot name="trigger">
+                <SkButton :kind="kind">
+                    {{ triggerText }}
+                </SkButton>
+            </slot>
+        </DialogTrigger>
+        <DialogPortal>
+            <DialogOverlay :class="overlayClasses" :data-scheme="theme" />
+            <DialogContent
+                :class="contentClasses"
+                :style="customColorStyles"
+                :data-scheme="theme"
+                @escape-key-down="handleEscapeKey"
+                @pointer-down-outside="handleOverlayClick"
+                @interact-outside="handleOverlayClick"
+            >
+                <div v-if="$slots.title || title" class="sk-modal-header">
+                    <DialogTitle class="sk-modal-title">
+                        <slot name="title" :close="close">
+                            {{ title }}
+                        </slot>
+                    </DialogTitle>
+                    <DialogClose as-child>
+                        <SkButton
+                            :kind="kind"
+                            :base-color="baseColor"
+                            :text-color="textColor"
+                            variant="outline"
+                            size="sm"
+                            class="sk-modal-close"
+                            aria-label="Close"
+                        >
+                            ✕
+                        </SkButton>
+                    </DialogClose>
+                </div>
+                <div class="sk-modal-body">
+                    <slot :close="close" />
+                </div>
+                <div v-if="$slots.footer" class="sk-modal-footer">
+                    <slot name="footer" :close="close" />
+                </div>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Modal styles are implemented in /src/styles/components/_modal.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Modal dialog component for displaying content in an overlay
+     */
+
+    import { computed, ref, toRef, watch } from 'vue';
+    import {
+        DialogClose,
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        DialogTitle,
+        DialogTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors, ComponentKind, ComponentSize } from '@/types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    // Components
+    import SkButton from '../Button/SkButton.vue';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Modal dialog component for displaying content in an overlay
+     *
+     * @example Basic usage with footer close button
+     * ```vue
+     * <SkModal title="Confirm Action" trigger-text="Open">
+     *   <p>Are you sure?</p>
+     *   <template #footer="{ close }">
+     *     <SkButton @click="close">Cancel</SkButton>
+     *     <SkButton kind="primary" @click="doAction(); close()">Confirm</SkButton>
+     *   </template>
+     * </SkModal>
+     * ```
+     *
+     * @example Prevent escape/overlay dismissal
+     * ```vue
+     * <SkModal
+     *   title="Important Form"
+     *   no-close-on-escape
+     *   no-close-on-overlay
+     * >
+     *   <!-- User must use buttons to close -->
+     * </SkModal>
+     * ```
+     */
+    export interface SkModalComponentProps extends ComponentCustomColors
+    {
+        /** Semantic color kind for the modal */
+        kind ?: ComponentKind;
+        /** Size of the modal (width) */
+        size ?: ComponentSize;
+        /** Title text displayed in the header */
+        title ?: string;
+        /** Text for the default trigger button */
+        triggerText ?: string;
+        /** Whether the modal is open (v-model:open) */
+        open ?: boolean;
+        /** Whether pressing Escape closes the modal (default: true) */
+        closeOnEscape ?: boolean;
+        /** Whether clicking the overlay closes the modal (default: true) */
+        closeOnOverlay ?: boolean;
+        /** Prevent closing on Escape key (alternative to :close-on-escape="false") */
+        noCloseOnEscape ?: boolean;
+        /** Prevent closing on overlay click (alternative to :close-on-overlay="false") */
+        noCloseOnOverlay ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkModalComponentProps>(), {
+        kind: 'neutral',
+        size: 'md',
+        title: undefined,
+        triggerText: undefined,
+        open: false,
+        closeOnEscape: true,
+        closeOnOverlay: true,
+        noCloseOnEscape: false,
+        noCloseOnOverlay: false,
+    });
+
+    const emit = defineEmits<{
+        'update:open' : [ value : boolean ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const isOpen = ref(props.open);
+
+    watch(() => props.open, (newValue) =>
+    {
+        isOpen.value = newValue;
+    });
+
+    watch(isOpen, (newValue) =>
+    {
+        emit('update:open', newValue);
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Close the modal programmatically.
+     * This function is exposed to all slots via slot props.
+     */
+    function close() : void
+    {
+        isOpen.value = false;
+    }
+
+    /**
+     * Handle escape key press - prevent if closeOnEscape is false or noCloseOnEscape is true
+     */
+    function handleEscapeKey(event : Event) : void
+    {
+        if(!props.closeOnEscape || props.noCloseOnEscape)
+        {
+            event.preventDefault();
+        }
+    }
+
+    /**
+     * Handle overlay/outside click - prevent if closeOnOverlay is false or noCloseOnOverlay is true
+     */
+    function handleOverlayClick(event : Event) : void
+    {
+        if(!props.closeOnOverlay || props.noCloseOnOverlay)
+        {
+            event.preventDefault();
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const overlayClasses = computed(() => ({
+        'sk-modal-overlay': true,
+    }));
+
+    const contentClasses = computed(() => ({
+        'sk-modal-content': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'modal',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Expose close function for external use via template ref
+    defineExpose({ close });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Modal/index.ts

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