@sabrenski/spire-ui 0.0.5 → 0.0.7

package/src/components/Tabs/Tabs.vue

@@ -2,6 +2,7 @@
 import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import type { IconInput } from '../Icon/Icon.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface TabItem {
   /** Display label */
@@ -15,6 +16,8 @@ export interface TabItem {
 }
 
 export interface TabsProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Currently active tab value (v-model) */
   modelValue: string | number
   /** Tab items configuration */
@@ -136,7 +139,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="ui-tabs">
+  <div :class="[props.class, 'ui-tabs']">
     <div
       ref="tabListRef"
       class="ui-tabs__list"

package/src/components/Text/Text.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { computed, type CSSProperties } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 type TextTag = 'p' | 'span' | 'div' | 'label' | 'li'
 type TextSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl'
 type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold'
 
 export interface TextProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Semantic HTML tag */
   as?: TextTag
   /** Font size */
@@ -30,6 +33,7 @@ const props = withDefaults(defineProps<TextProps>(), {
 })
 
 const classes = computed(() => [
+  props.class,
   'ui-text',
   `ui-text--${props.size}`,
   `ui-text--${props.weight}`,

package/src/components/Textarea/Textarea.vue

@@ -3,8 +3,11 @@ import { ref, computed, watch, onMounted, nextTick, useSlots } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import type { IconInput } from '../Icon/Icon.vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface TextareaProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Textarea value (v-model) */
   modelValue?: string
   /** Label text above the textarea */
@@ -153,13 +156,16 @@ defineExpose({
 
 <template>
   <div
-    class="ui-textarea-field"
-    :class="{
-      'ui-textarea-field--block': block,
-      'ui-textarea-field--disabled': disabled,
-      'ui-textarea-field--error': error || isOverLimit,
-      'ui-textarea-field--readonly': readonly
-    }"
+    :class="[
+      props.class,
+      'ui-textarea-field',
+      {
+        'ui-textarea-field--block': block,
+        'ui-textarea-field--disabled': disabled,
+        'ui-textarea-field--error': error || isOverLimit,
+        'ui-textarea-field--readonly': readonly
+      }
+    ]"
   >
     <label
       v-if="label"

package/src/components/TimePicker/TimePicker.vue

@@ -21,8 +21,11 @@ import {
   isValidTimeString,
   type TimeFormat
 } from '../../utils/time'
+import type { ClassValue } from '../../types/common'
 
 export interface TimePickerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected time in HH:mm format (24h) */
   modelValue?: string
   /** Time display format */
@@ -342,8 +345,9 @@ defineExpose({
 
 <template>
   <div
-    class="ui-timepicker"
     :class="[
+      props.class,
+      'ui-timepicker',
       `ui-timepicker--${size}`,
       {
         'ui-timepicker--block': block,

package/src/components/Timeline/Timeline.vue

@@ -2,8 +2,11 @@
 import { provide, toRef, ref, computed, onBeforeUpdate } from 'vue'
 import { TimelineKey } from './keys'
 import type { TimelineAlign, TimelineLineStyle } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface TimelineProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Content alignment relative to the spine */
   align?: TimelineAlign
   /** Connector line style */
@@ -36,6 +39,7 @@ provide(TimelineKey, {
 })
 
 const timelineClasses = computed(() => [
+  props.class,
   'ui-timeline',
   `ui-timeline--${props.align}`,
   `ui-timeline--line-${props.lineStyle}`

package/src/components/Timeline/TimelineItem.vue

@@ -2,8 +2,11 @@
 import { computed, inject, onMounted, ref, type Component } from 'vue'
 import { TimelineKey } from './keys'
 import type { TimelineDotColor } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface TimelineItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Dot color variant */
   dotColor?: TimelineDotColor
   /** Custom icon in dot */
@@ -37,6 +40,7 @@ const position = computed(() => {
 })
 
 const itemClasses = computed(() => [
+  props.class,
   'ui-timeline__item',
   `ui-timeline__item--${timeline.align.value}`,
   `ui-timeline__item--position-${position.value}`,

package/src/components/Toast/ToastItem.vue

@@ -2,8 +2,11 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import Avatar from '../Avatar/Avatar.vue'
 import type { Toast, ToastVariant } from './toastState'
+import type { ClassValue } from '../../types/common'
 
 export interface ToastItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Toast data */
   toast: Toast
 }
@@ -100,8 +103,9 @@ const iconPaths: Record<ToastVariant, string> = {
 
 <template>
   <div
-    class="ui-toast"
     :class="[
+      props.class,
+      'ui-toast',
       `ui-toast--${toast.variant}`,
       { 'ui-toast--clickable': isClickable }
     ]"

package/src/components/Toast/ToastProvider.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { toasts, toastActions } from './toastState'
 import ToastItem from './ToastItem.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface ToastProviderProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Position of the toast container */
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
 }
 
-withDefaults(defineProps<ToastProviderProps>(), {
+const props = withDefaults(defineProps<ToastProviderProps>(), {
   position: 'top-right'
 })
 
@@ -19,8 +22,7 @@ function handleDismiss(id: string) {
 <template>
   <Teleport to="body">
     <div
-      class="ui-toast-provider"
-      :class="[`ui-toast-provider--${position}`]"
+      :class="[props.class, 'ui-toast-provider', `ui-toast-provider--${position}`]"
       role="region"
       aria-label="Notifications"
     >

package/src/components/ToggleButton/ToggleButton.vue

@@ -2,8 +2,11 @@
 import { computed, inject } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import type { IconInput } from '../Icon/Icon.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface ToggleButtonProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Pressed state for standalone usage (v-model) */
   modelValue?: boolean
   /** Value for group usage */
@@ -74,8 +77,9 @@ const isIconOnly = computed(() => props.icon && !props.label)
     :aria-pressed="isPressed"
     :aria-label="isIconOnly ? label : undefined"
     :disabled="effectiveDisabled"
-    class="ui-toggle-button"
     :class="[
+      props.class,
+      'ui-toggle-button',
       `ui-toggle-button--${effectiveSize}`,
       {
         'ui-toggle-button--pressed': isPressed,

package/src/components/ToggleGroup/ToggleGroup.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { provide, computed, toRef } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export interface ToggleGroupProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected value(s) - single value for 'single' type, array for 'multiple' */
   modelValue?: string | number | (string | number)[]
   /** Selection type */
@@ -60,8 +63,9 @@ const role = computed(() => props.type === 'single' ? 'radiogroup' : 'group')
     :aria-label="label"
     :aria-orientation="orientation"
     :aria-disabled="disabled || undefined"
-    class="ui-toggle-group"
     :class="[
+      props.class,
+      'ui-toggle-group',
       `ui-toggle-group--${orientation}`,
       { 'ui-toggle-group--disabled': disabled }
     ]"

package/src/components/Tooltip/Tooltip.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted } from 'vue'
 import { useId, useRelativePosition, calculatePosition, type Placement } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface TooltipProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Tooltip text content */
   text: string
   /** Preferred placement (may flip on collision) */
@@ -90,12 +93,17 @@ onUnmounted(() => {
   if (showTimer) clearTimeout(showTimer)
   if (hideTimer) clearTimeout(hideTimer)
 })
+
+defineOptions({
+  inheritAttrs: false
+})
 </script>
 
 <template>
   <span
     ref="triggerRef"
-    class="ui-tooltip-trigger"
+    :class="[props.class, 'ui-tooltip-trigger']"
+    v-bind="$attrs"
     :aria-describedby="isVisible ? tooltipId : undefined"
     @mouseenter="show"
     @mouseleave="hide"

package/src/components/TreeView/TreeView.vue

@@ -2,8 +2,11 @@
 import { provide, ref, computed, watch, toRef } from 'vue'
 import { TreeViewKey, TreeViewItemKey } from './keys'
 import type { TreeNode } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface TreeViewProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Hierarchical data */
   data: TreeNode[]
   /** Selected node ID(s) - v-model */
@@ -226,7 +229,7 @@ provide(TreeViewItemKey, {
 
 <template>
   <div
-    class="ui-treeview"
+    :class="[props.class, 'ui-treeview']"
     role="tree"
     :aria-multiselectable="multiSelect"
     tabindex="0"

package/src/components/TreeView/TreeViewItem.vue

@@ -3,8 +3,11 @@ import { computed, inject, provide, ref, watch, onMounted, Transition, type Comp
 import { TreeViewKey, TreeViewItemKey } from './keys'
 import type { TreeNode } from './keys'
 import { useInternalIcon } from '../../config/icons'
+import type { ClassValue } from '../../types/common'
 
 export interface TreeViewItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Node data */
   node: TreeNode
 }
@@ -86,6 +89,7 @@ provide(TreeViewItemKey, {
 })
 
 const itemClasses = computed(() => [
+  props.class,
   'ui-treeview__item',
   {
     'ui-treeview__item--selected': isSelected.value,

package/src/index.ts

@@ -359,3 +359,6 @@ export type { ParsedTime, TimeFormat } from './utils/time'
 
 // Configuration
 export { configureIcons, resetIcons, type IconMap } from './config/icons'
+
+// Types
+export type { ClassValue } from './types/common'

package/src/styles/main.css

@@ -1,25 +1,25 @@
-/* Main CSS Entry Point - Import order matters */
+/* Layer order declaration - MUST come first */
+@layer spire-base, spire-theme, spire-components;
 
-@import './fallback.css';
-@import './tokens.css';
-@import './theme.css';
-@import './mood.css';
-@import './depth.css';
-@import './motion.css';
-@import './effects.css';
-@import './reset.css';
+/* Base layer: resets, fallbacks, tokens */
+@import './fallback.css' layer(spire-base);
+@import './tokens.css' layer(spire-base);
+@import './reset.css' layer(spire-base);
 
-/* Utility: Avatar Group (overlapping avatars) */
-.ui-avatar-group {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-.ui-avatar-group > * {
-  margin-left: -0.5rem;
-}
+/* Theme layer: semantic tokens, moods, depth, motion, effects */
+@import './theme.css' layer(spire-theme);
+@import './mood.css' layer(spire-theme);
+@import './depth.css' layer(spire-theme);
+@import './motion.css' layer(spire-theme);
+@import './effects.css' layer(spire-theme);
 
-.ui-avatar-group > *:last-child {
-  margin-left: 0;
+/* Components layer: global component utilities */
+@layer spire-components {
+  .ui-avatar-group {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+  .ui-avatar-group > * { margin-left: -0.5rem; }
+  .ui-avatar-group > *:last-child { margin-left: 0; }
 }

package/src/types/common.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'vue'
+
+/** CSS class value - string, array, or object */
+export type ClassValue = HTMLAttributes['class']