@sabrenski/spire-ui 0.0.6 → 0.0.7

package/src/components/Combobox/Combobox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface ComboboxOption {
   /** Display text shown to user */
@@ -12,6 +13,8 @@ export interface ComboboxOption {
 }
 
 export interface ComboboxProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected value(s) - single value or array for multiple */
   modelValue?: string | number | (string | number)[] | null
   /** Available options */
@@ -411,8 +414,9 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="ui-combobox"
     :class="[
+      props.class,
+      'ui-combobox',
       `ui-combobox--${size}`,
       {
         'ui-combobox--block': block,
@@ -827,108 +831,110 @@ onBeforeUnmount(() => {
 </style>
 
 <style>
-.ui-combobox__listbox {
-  z-index: 9999;
-  margin: 0;
-  padding: var(--space-1);
-  list-style: none;
-  background-color: var(--select-menu-bg);
-  border: 1px solid var(--select-menu-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  max-height: 256px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-.ui-combobox__option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
-  font-size: var(--text-sm);
-  color: var(--select-option-text);
-  cursor: pointer;
-  transition: background-color var(--duration-fast) var(--ease-default);
-}
+@layer spire-components {
+  .ui-combobox__listbox {
+    z-index: 9999;
+    margin: 0;
+    padding: var(--space-1);
+    list-style: none;
+    background-color: var(--select-menu-bg);
+    border: 1px solid var(--select-menu-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    max-height: 256px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
 
-.ui-combobox__option--highlighted {
-  background-color: var(--select-option-hover);
-}
+  .ui-combobox__option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--select-option-text);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-default);
+  }
 
-.ui-combobox__option--selected {
-  color: var(--select-option-selected);
-  font-weight: var(--font-medium);
-}
+  .ui-combobox__option--highlighted {
+    background-color: var(--select-option-hover);
+  }
 
-.ui-combobox__option--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  .ui-combobox__option--selected {
+    color: var(--select-option-selected);
+    font-weight: var(--font-medium);
+  }
 
-.ui-combobox__option--create {
-  color: var(--action-primary);
-}
+  .ui-combobox__option--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.ui-combobox__checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border: 1.5px solid var(--checkbox-border);
-  border-radius: var(--radius-sm);
-  background-color: var(--checkbox-bg);
-  flex-shrink: 0;
-}
+  .ui-combobox__option--create {
+    color: var(--action-primary);
+  }
 
-.ui-combobox__option--selected .ui-combobox__checkbox {
-  background-color: var(--checkbox-checked-bg);
-  border-color: var(--checkbox-checked-bg);
-  color: var(--checkbox-check);
-}
+  .ui-combobox__checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border: 1.5px solid var(--checkbox-border);
+    border-radius: var(--radius-sm);
+    background-color: var(--checkbox-bg);
+    flex-shrink: 0;
+  }
 
-.ui-combobox__checkbox svg {
-  width: 0.75rem;
-  height: 0.75rem;
-}
+  .ui-combobox__option--selected .ui-combobox__checkbox {
+    background-color: var(--checkbox-checked-bg);
+    border-color: var(--checkbox-checked-bg);
+    color: var(--checkbox-check);
+  }
 
-.ui-combobox__option-label {
-  flex: 1;
-}
+  .ui-combobox__checkbox svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 
-.ui-combobox__option-label mark {
-  background-color: transparent;
-  color: var(--action-primary);
-  font-weight: var(--font-semibold);
-}
+  .ui-combobox__option-label {
+    flex: 1;
+  }
 
-.ui-combobox__check {
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  color: var(--select-option-selected);
-}
+  .ui-combobox__option-label mark {
+    background-color: transparent;
+    color: var(--action-primary);
+    font-weight: var(--font-semibold);
+  }
 
-.ui-combobox__empty {
-  padding: var(--space-3);
-  text-align: center;
-  font-size: var(--text-sm);
-  color: var(--input-placeholder);
-}
+  .ui-combobox__check {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    color: var(--select-option-selected);
+  }
 
-.ui-combobox-menu-enter-active,
-.ui-combobox-menu-leave-active {
-  transition:
-    opacity var(--duration-fast) var(--ease-default),
-    transform var(--duration-fast) var(--ease-default);
-}
+  .ui-combobox__empty {
+    padding: var(--space-3);
+    text-align: center;
+    font-size: var(--text-sm);
+    color: var(--input-placeholder);
+  }
 
-.ui-combobox-menu-enter-from,
-.ui-combobox-menu-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
+  .ui-combobox-menu-enter-active,
+  .ui-combobox-menu-leave-active {
+    transition:
+      opacity var(--duration-fast) var(--ease-default),
+      transform var(--duration-fast) var(--ease-default);
+  }
+
+  .ui-combobox-menu-enter-from,
+  .ui-combobox-menu-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
 }
 </style>

package/src/components/DataTable/DataTable.vue

@@ -10,6 +10,7 @@ import Input from '../Input/Input.vue'
 import { getNestedValue } from '../../utils/object'
 import { useInternalIcon } from '../../config/icons'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 const skeletonWidths = ['60%', '75%', '90%', '70%', '85%', '65%', '80%', '55%']
 function getSkeletonWidth(rowIndex: number, colIndex: number): string {
@@ -66,6 +67,8 @@ export interface PaginationConfig {
 }
 
 export interface DataTableProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Data array */
   data: Record<string, unknown>[]
   /** Column definitions */
@@ -548,8 +551,9 @@ const skeletonArray = computed(() => Array.from({ length: props.skeletonRows }))
 <template>
   <div
     ref="tableRef"
-    class="ui-table"
     :class="[
+      props.class,
+      'ui-table',
       `ui-table--${size}`,
       {
         'ui-table--striped': striped,

package/src/components/DatePicker/DatePicker.vue

@@ -20,10 +20,13 @@ import {
   type CalendarDay,
   type RangeState
 } from '../../utils'
+import type { ClassValue } from '../../types/common'
 
 export type ViewMode = 'day' | 'month' | 'year'
 
 export interface DatePickerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected date in ISO format (single mode) or [start, end] tuple (range mode) */
   modelValue?: string | [string, string]
   /** Selection mode */
@@ -602,8 +605,9 @@ defineExpose({
 
 <template>
   <div
-    class="ui-datepicker-field"
     :class="[
+      props.class,
+      'ui-datepicker-field',
       `ui-datepicker-field--${size}`,
       {
         'ui-datepicker-field--block': block,

package/src/components/Drawer/Drawer.vue

@@ -8,12 +8,15 @@ import {
   nextTick
 } from 'vue'
 import { useId, useScrollLock } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export type DrawerPlacement = 'right' | 'left' | 'bottom'
 export type DrawerVariant = 'default' | 'floating'
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
 
 export interface DrawerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Controls visibility (v-model) */
   modelValue?: boolean
   /** Drawer title */
@@ -184,7 +187,7 @@ defineExpose({
     <Transition :name="transitionName">
       <div
         v-if="isOpen"
-        :class="['ui-drawer', { 'ui-drawer--force-placement': forcePlacement }]"
+        :class="[props.class, 'ui-drawer', { 'ui-drawer--force-placement': forcePlacement }]"
         @keydown="handleKeydown"
       >
         <div

package/src/components/Dropdown/Dropdown.vue

@@ -1,11 +1,14 @@
 <script lang="ts">
 import type { InjectionKey, Ref } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type DropdownPlacement =
   | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
   | 'right-start' | 'right-end' | 'left-start' | 'left-end'
 
 export interface DropdownProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Menu placement relative to trigger */
   placement?: DropdownPlacement
   /** Offset from trigger (px) */
@@ -585,8 +588,7 @@ const showMobileDrilldown = computed(() => {
 
 <template>
   <div
-    class="ui-dropdown"
-    :class="{ 'ui-dropdown--submenu': isSubmenu }"
+    :class="[props.class, 'ui-dropdown', { 'ui-dropdown--submenu': isSubmenu }]"
   >
     <div
       ref="triggerRef"

package/src/components/Dropdown/DropdownItem.vue

@@ -8,8 +8,11 @@ import {
   type Component
 } from 'vue'
 import { dropdownContextKey, type DropdownContext } from './Dropdown.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface DropdownItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Renders as RouterLink when provided */
   to?: string | Record<string, unknown>
   /** Renders as anchor when provided */
@@ -51,6 +54,7 @@ const componentType = computed(() => {
 const componentProps = computed(() => {
   const base: Record<string, unknown> = {
     class: [
+      props.class,
       'ui-dropdown-item',
       {
         'ui-dropdown-item--disabled': props.disabled,

package/src/components/Dropdown/DropdownSubTrigger.vue

@@ -8,8 +8,11 @@ import {
 } from 'vue'
 import { dropdownContextKey } from './Dropdown.vue'
 import { dropdownSubContextKey } from './DropdownSub.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface DropdownSubTriggerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Disabled state */
   disabled?: boolean
   /** Leading icon */
@@ -60,8 +63,7 @@ onUnmounted(() => {
   <button
     ref="triggerRef"
     type="button"
-    class="ui-dropdown-sub-trigger"
-    :class="{ 'ui-dropdown-sub-trigger--disabled': disabled }"
+    :class="[props.class, 'ui-dropdown-sub-trigger', { 'ui-dropdown-sub-trigger--disabled': disabled }]"
     role="menuitem"
     :aria-haspopup="true"
     :aria-expanded="subContext?.isOpen.value"

package/src/components/EmptyState/EmptyState.vue

@@ -3,10 +3,13 @@ import { computed, useSlots } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import type { IconInput } from '../Icon/Icon.vue'
 import { useInternalIcon } from '../../config/icons'
+import type { ClassValue } from '../../types/common'
 
 export type EmptyStateVariant = 'default' | 'search' | 'error'
 
 export interface EmptyStateProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Title text */
   title?: string
   /** Description text */
@@ -43,8 +46,9 @@ const hasAction = computed(() => !!slots.default)
 
 <template>
   <div
-    class="ui-empty-state"
     :class="[
+      props.class,
+      'ui-empty-state',
       `ui-empty-state--${variant}`,
       { 'ui-empty-state--compact': compact }
     ]"

package/src/components/FileUpload/FileUpload.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import Button from '../Button/Button.vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface UploadFile {
   /** Unique identifier */
@@ -25,6 +26,8 @@ export interface UploadFile {
 }
 
 export interface FileUploadProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Currently selected files (v-model) */
   modelValue?: UploadFile[]
   /** Accepted file types (MIME types or extensions) */
@@ -479,12 +482,15 @@ function getFileIcon(type: string): string {
 
 <template>
   <div
-    class="ui-file-upload"
-    :class="{
-      'ui-file-upload--disabled': disabled,
-      'ui-file-upload--error': error,
-      'ui-file-upload--compact': compact
-    }"
+    :class="[
+      props.class,
+      'ui-file-upload',
+      {
+        'ui-file-upload--disabled': disabled,
+        'ui-file-upload--error': error,
+        'ui-file-upload--compact': compact
+      }
+    ]"
   >
     <label
       v-if="label"

package/src/components/Heading/Heading.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span'
 type HeadingSize = '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md'
 
 export interface HeadingProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Semantic HTML tag */
   as?: HeadingTag
   /** Visual hierarchy size */
@@ -22,6 +25,7 @@ const props = withDefaults(defineProps<HeadingProps>(), {
 })
 
 const classes = computed(() => [
+  props.class,
   'ui-heading',
   `ui-heading--${props.size}`,
   `ui-heading--${props.align}`,

package/src/components/Icon/Icon.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { computed, h, type Component, type VNode } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 type HugeIconData = [string, Record<string, unknown>][]
 
 export type IconInput = Component | HugeIconData
 
 export interface IconProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** The icon - Vue component OR HugeIcons data array */
   icon: IconInput
   /** Predefined size or custom value */
@@ -51,7 +54,7 @@ function renderHugeIcon(): VNode {
     xmlns: 'http://www.w3.org/2000/svg',
     viewBox: '0 0 24 24',
     fill: 'none',
-    class: 'ui-icon',
+    class: [props.class, 'ui-icon'],
     style: { '--icon-size': resolvedSize.value },
     'aria-label': props.label,
     'aria-hidden': ariaHidden.value,
@@ -64,7 +67,7 @@ function renderHugeIcon(): VNode {
   <component
     v-if="!isHugeIconData"
     :is="icon"
-    class="ui-icon"
+    :class="[props.class, 'ui-icon']"
     :style="{ '--icon-size': resolvedSize }"
     :stroke-width="strokeWidth"
     :aria-label="label"

package/src/components/Input/Input.vue

@@ -4,8 +4,11 @@ import Icon from '../Icon/Icon.vue'
 import Spinner from '../Spinner/Spinner.vue'
 import type { IconInput } from '../Icon/Icon.vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface InputProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Input value (v-model) */
   modelValue?: string | number
   /** Input type */
@@ -100,8 +103,9 @@ function handleBlur(event: FocusEvent) {
 
 <template>
   <div
-    class="ui-input-field"
     :class="[
+      props.class,
+      'ui-input-field',
       `ui-input-field--${size}`,
       {
         'ui-input-field--block': block,

package/src/components/Layout/Container.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export interface ContainerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** If true, width is 100%. If false, max-width snaps to breakpoints. */
   fluid?: boolean
   /** Auto margins (mx-auto). Default: true */
@@ -17,6 +20,7 @@ const props = withDefaults(defineProps<ContainerProps>(), {
 })
 
 const containerClasses = computed(() => [
+  props.class,
   'ui-container',
   {
     'ui-container--fluid': props.fluid,

package/src/components/Layout/Grid.vue

@@ -2,6 +2,7 @@
 import { computed, provide, toRef } from 'vue'
 import { GridKey } from './keys'
 import type { SpacingToken } from './Stack.vue'
+import type { ClassValue } from '../../types/common'
 
 export type ColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
@@ -14,6 +15,8 @@ export interface ResponsiveColumns {
 }
 
 export interface GridProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Number of columns (or responsive object) */
   columns?: ColumnCount | ResponsiveColumns
   /** Grid gap using spacing tokens */
@@ -35,7 +38,7 @@ const props = withDefaults(defineProps<GridProps>(), {
 const isResponsive = computed(() => typeof props.columns === 'object')
 
 const gridClasses = computed(() => {
-  const classes = ['ui-grid']
+  const classes: (string | undefined | null | boolean | ClassValue)[] = [props.class, 'ui-grid']
 
   if (isResponsive.value) {
     const cols = props.columns as ResponsiveColumns

package/src/components/Layout/GridItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type SpanCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full'
 
@@ -12,6 +13,8 @@ export interface ResponsiveSpan {
 }
 
 export interface GridItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Number of columns to span (or responsive object) */
   span?: SpanCount | ResponsiveSpan
   /** Grid column start */
@@ -32,7 +35,7 @@ const props = withDefaults(defineProps<GridItemProps>(), {
 const isResponsive = computed(() => typeof props.span === 'object')
 
 const itemClasses = computed(() => {
-  const classes = ['ui-grid-item']
+  const classes: (string | undefined | null | boolean | ClassValue)[] = [props.class, 'ui-grid-item']
 
   if (isResponsive.value) {
     const span = props.span as ResponsiveSpan

package/src/components/Layout/Stack.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type SpacingToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
 
 export interface StackProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Flex direction */
   direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
   /** Gap using spacing tokens (maps to var(--space-X)) */
@@ -31,6 +34,7 @@ const props = withDefaults(defineProps<StackProps>(), {
 })
 
 const stackClasses = computed(() => [
+  props.class,
   'ui-stack',
   `ui-stack--${props.direction}`,
   `ui-stack--align-${props.align}`,