@sabrenski/spire-ui 0.0.5 → 0.0.7

package/src/components/Radio/Radio.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface RadioProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected value (v-model) - shared across radio group */
   modelValue?: string | number | boolean
   /** Value of this radio option */
   value: string | number | boolean
+  /** Visual variant */
+  variant?: 'default' | 'pill'
   /** Radio size */
   size?: 'sm' | 'md' | 'lg'
   /** Disabled state */
@@ -22,6 +27,7 @@ export interface RadioProps {
 }
 
 const props = withDefaults(defineProps<RadioProps>(), {
+  variant: 'default',
   size: 'md',
   disabled: false
 })
@@ -44,9 +50,53 @@ function handleChange() {
 </script>
 
 <template>
+  <!-- Pill variant -->
   <label
-    class="ui-radio"
+    v-if="variant === 'pill'"
     :class="[
+      props.class,
+      'ui-radio-pill',
+      `ui-radio-pill--${size}`,
+      {
+        'ui-radio-pill--disabled': disabled,
+        'ui-radio-pill--checked': isChecked
+      }
+    ]"
+  >
+    <input
+      :id="radioId"
+      type="radio"
+      :checked="isChecked"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      class="ui-radio-pill__input"
+      @change="handleChange"
+    />
+
+    <span class="ui-radio-pill__indicator" aria-hidden="true">
+      <svg
+        class="ui-radio-pill__check"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M3.5 8.5L6.5 11L12.5 5" />
+      </svg>
+    </span>
+
+    <span v-if="label" class="ui-radio-pill__label">{{ label }}</span>
+  </label>
+
+  <!-- Default variant -->
+  <label
+    v-else
+    :class="[
+      props.class,
+      'ui-radio',
       `ui-radio--${size}`,
       {
         'ui-radio--disabled': disabled,
@@ -211,4 +261,122 @@ function handleChange() {
 .ui-radio--lg .ui-radio__description {
   font-size: var(--text-sm);
 }
+
+/* Pill variant styles */
+.ui-radio-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 36px;
+  padding: 0 var(--space-3);
+  background: var(--chip-bg);
+  border: 1px solid var(--chip-border);
+  border-radius: var(--radius-full);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--chip-text);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ui-radio-pill--sm {
+  height: 32px;
+  font-size: var(--text-xs);
+}
+
+.ui-radio-pill--lg {
+  height: 44px;
+  font-size: var(--text-md);
+  padding: 0 var(--space-4);
+}
+
+.ui-radio-pill__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-radio-pill:not(.ui-radio-pill--disabled):hover {
+  background: var(--chip-bg-hover);
+  border-color: var(--chip-border-hover);
+}
+
+.ui-radio-pill:not(.ui-radio-pill--disabled):active {
+  background: var(--chip-bg-active);
+  border-color: var(--chip-border-active);
+}
+
+.ui-radio-pill--checked {
+  background: var(--chip-bg-selected);
+  border-color: var(--chip-border-selected);
+  color: var(--chip-text-selected);
+}
+
+.ui-radio-pill--checked:not(.ui-radio-pill--disabled):hover {
+  background: var(--chip-bg-selected-hover);
+  border-color: var(--chip-border-selected-hover);
+}
+
+.ui-radio-pill--checked:not(.ui-radio-pill--disabled):active {
+  background: var(--chip-bg-selected-active);
+  border-color: var(--chip-border-selected-active);
+}
+
+.ui-radio-pill:has(.ui-radio-pill__input:focus-visible) {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-radio-pill--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-radio-pill__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  margin-right: calc(-1 * var(--space-2));
+  overflow: hidden;
+  transition:
+    width var(--duration-fast) var(--ease-out-expo),
+    margin var(--duration-fast) var(--ease-out-expo);
+}
+
+.ui-radio-pill--checked .ui-radio-pill__indicator {
+  width: 1rem;
+  margin-right: 0;
+}
+
+.ui-radio-pill__check {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity var(--duration-fast) var(--ease-default),
+    transform var(--duration-fast) var(--ease-out-back);
+}
+
+.ui-radio-pill--checked .ui-radio-pill__check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ui-radio-pill__label {
+  white-space: nowrap;
+}
 </style>

package/src/components/Rating/Rating.vue

@@ -2,11 +2,14 @@
 import { computed, ref } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import { useInternalIcon } from '../../config/icons'
+import type { ClassValue } from '../../types/common'
 
 const StarIcon = useInternalIcon('star')
 const StarFilledIcon = useInternalIcon('starFilled')
 
 export interface RatingProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current rating value (0 to max) */
   modelValue: number
   /** Maximum rating value */
@@ -134,8 +137,9 @@ const iconSize = computed(() => {
 
 <template>
   <div
-    class="ui-rating"
     :class="[
+      props.class,
+      'ui-rating',
       `ui-rating--${size}`,
       { 'ui-rating--readonly': readonly }
     ]"

package/src/components/SegmentedControl/SegmentedControl.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface SegmentedOption {
   label: string
@@ -9,6 +10,8 @@ export interface SegmentedOption {
 }
 
 export interface SegmentedControlProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Array of options to display */
   options: SegmentedOption[]
   /** Selected value (v-model) */
@@ -146,8 +149,9 @@ function setItemRef(el: HTMLButtonElement | null, index: number) {
     role="radiogroup"
     :aria-label="label"
     :aria-disabled="disabled || undefined"
-    class="ui-segmented"
     :class="[
+      props.class,
+      'ui-segmented',
       `ui-segmented--${size}`,
       { 'ui-segmented--disabled': disabled }
     ]"

package/src/components/Select/Select.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface SelectOption {
   /** Display text shown to user */
@@ -12,6 +13,8 @@ export interface SelectOption {
 }
 
 export interface SelectProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected value (v-model) */
   modelValue?: string | number | null
   /** Available options */
@@ -301,8 +304,9 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="ui-select"
     :class="[
+      props.class,
+      'ui-select',
       `ui-select--${size}`,
       {
         'ui-select--block': block,
@@ -602,65 +606,67 @@ onBeforeUnmount(() => {
 </style>
 
 <style>
-.ui-select__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-select__option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  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-select__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-select__option--highlighted {
-  background-color: var(--select-option-hover);
-}
+  .ui-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    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-select__option--selected {
-  color: var(--select-option-selected);
-  font-weight: var(--font-medium);
-}
+  .ui-select__option--highlighted {
+    background-color: var(--select-option-hover);
+  }
 
-.ui-select__option--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  .ui-select__option--selected {
+    color: var(--select-option-selected);
+    font-weight: var(--font-medium);
+  }
 
-.ui-select__check {
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  color: var(--select-option-selected);
-}
+  .ui-select__option--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.ui-select-menu-enter-active,
-.ui-select-menu-leave-active {
-  transition:
-    opacity var(--duration-fast) var(--ease-default),
-    transform var(--duration-fast) var(--ease-default);
-}
+  .ui-select__check {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    color: var(--select-option-selected);
+  }
 
-.ui-select-menu-enter-from,
-.ui-select-menu-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
+  .ui-select-menu-enter-active,
+  .ui-select-menu-leave-active {
+    transition:
+      opacity var(--duration-fast) var(--ease-default),
+      transform var(--duration-fast) var(--ease-default);
+  }
+
+  .ui-select-menu-enter-from,
+  .ui-select-menu-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
 }
 </style>

package/src/components/Sidebar/SidebarGroup.vue

@@ -2,8 +2,11 @@
 import { computed, inject, provide } from 'vue'
 import { useId } from '../../composables'
 import { SidebarKey, SidebarGroupKey } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface SidebarGroupProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Group label displayed when expanded */
   label?: string
   /** Show separator line when collapsed */
@@ -26,6 +29,7 @@ const isCollapsed = computed(() => sidebar.collapsed.value)
 provide(SidebarGroupKey, { groupId })
 
 const groupClasses = computed(() => [
+  props.class,
   'ui-sidebar-group',
   {
     'ui-sidebar-group--collapsed': isCollapsed.value,

package/src/components/Sidebar/SidebarItem.vue

@@ -3,11 +3,14 @@ import { computed, inject, type Component } from 'vue'
 import { SidebarKey } from './keys'
 import Icon from '../Icon/Icon.vue'
 import Tooltip from '../Tooltip/Tooltip.vue'
+import type { ClassValue } from '../../types/common'
 
 type HugeIconData = [string, Record<string, unknown>][]
 type IconInput = Component | HugeIconData
 
 export interface SidebarItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Text label for the item */
   label: string
   /** Icon component or HugeIcons data */
@@ -41,6 +44,7 @@ if (!sidebar) {
 const isCollapsed = computed(() => sidebar.collapsed.value)
 
 const itemClasses = computed(() => [
+  props.class,
   'ui-sidebar-item',
   {
     'ui-sidebar-item--active': props.active,

package/src/components/Sidebar/SidebarLayout.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import type { ClassValue } from '../../types/common'
+
 export interface SidebarLayoutProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Position of the sidebar */
   sidebarPosition?: 'left' | 'right'
 }
@@ -11,8 +15,7 @@ const props = withDefaults(defineProps<SidebarLayoutProps>(), {
 
 <template>
   <div
-    class="ui-sidebar-layout"
-    :class="[`ui-sidebar-layout--${sidebarPosition}`]"
+    :class="[props.class, 'ui-sidebar-layout', `ui-sidebar-layout--${sidebarPosition}`]"
   >
     <slot name="sidebar" />
     <main class="ui-sidebar-layout__main">

package/src/components/Sidebar/SidebarRoot.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, provide, toRef, ref, watch } from 'vue'
 import { SidebarKey } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface SidebarRootProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Whether the sidebar is collapsed */
   modelValue?: boolean
   /** Width when expanded */
@@ -54,8 +57,7 @@ defineExpose({ toggle, collapsed })
 
 <template>
   <aside
-    class="ui-sidebar"
-    :class="{ 'ui-sidebar--collapsed': collapsed }"
+    :class="[props.class, 'ui-sidebar', { 'ui-sidebar--collapsed': collapsed }]"
     :style="{ '--sidebar-current-width': currentWidth }"
     role="navigation"
   >

package/src/components/Skeleton/Skeleton.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type SkeletonVariant = 'text' | 'circle' | 'rect'
 
 export interface SkeletonProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Shape variant */
   variant?: SkeletonVariant
   /** Width (px, %, or CSS value) */
@@ -34,8 +37,9 @@ const style = computed(() => ({
 
 <template>
   <span
-    class="ui-skeleton"
     :class="[
+      props.class,
+      'ui-skeleton',
       `ui-skeleton--${variant}`,
       `ui-skeleton--${animation}`
     ]"

package/src/components/Slider/Slider.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, onUnmounted } from 'vue'
 import { valueToPercent, getValueFromPointer, getClosestThumb, clamp, snapToStep } from './utils'
+import type { ClassValue } from '../../types/common'
 
 export interface SliderProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current value (number for single, [min, max] tuple for range) */
   modelValue: number | [number, number]
   /** Minimum value */
@@ -231,8 +234,9 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="ui-slider"
     :class="[
+      props.class,
+      'ui-slider',
       `ui-slider--${size}`,
       {
         'ui-slider--disabled': disabled,

package/src/components/Spinner/Spinner.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export interface SpinnerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Predefined size or custom value */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string
   /** Animation speed in seconds */
@@ -30,7 +33,7 @@ const resolvedSpeed = computed(() => `${props.speed}s`)
 
 <template>
   <div
-    class="ui-spinner"
+    :class="[props.class, 'ui-spinner']"
     role="status"
     :aria-label="label"
     :style="{

package/src/components/SpireProvider/SpireProvider.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { InjectionKey, ComputedRef } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type Theme = 'light' | 'dark'
 export type Mood = 'warm' | 'cool' | 'vibrant' | 'muted' | 'earthy'
@@ -16,6 +17,8 @@ export interface SpireConfig {
 }
 
 export interface SpireProviderProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   theme?: Theme
   mood?: Mood
   depth?: Depth
@@ -58,7 +61,7 @@ const dataAttributes = computed(() => {
 </script>
 
 <template>
-  <component :is="tag" class="spire-provider" v-bind="dataAttributes">
+  <component :is="tag" :class="[props.class, 'spire-provider']" v-bind="dataAttributes">
     <slot />
   </component>
 </template>

package/src/components/Stepper/StepperItem.vue

@@ -2,8 +2,11 @@
 import { computed, provide, inject, onMounted } from 'vue'
 import { useId } from '../../composables'
 import { StepperKey, StepperItemKey } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface StepperItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Step index (0-based) */
   index: number
   /** Disable this step */
@@ -47,6 +50,7 @@ provide(StepperItemKey, {
 })
 
 const itemClasses = computed(() => [
+  props.class,
   'ui-stepper__item',
   `ui-stepper__item--${stepper.orientation.value}`,
   `ui-stepper__item--${state.value}`,

package/src/components/Stepper/StepperRoot.vue

@@ -2,8 +2,11 @@
 import { computed, provide, toRef, ref, watch } from 'vue'
 import { StepperKey } from './keys'
 import type { StepperOrientation, StepState } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface StepperRootProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current step index (0-based, v-model) */
   modelValue?: number
   /** Layout direction */
@@ -75,8 +78,7 @@ provide(StepperKey, {
 
 <template>
   <div
-    class="ui-stepper"
-    :class="[`ui-stepper--${orientation}`]"
+    :class="[props.class, 'ui-stepper', `ui-stepper--${orientation}`]"
     role="tablist"
     :aria-orientation="orientation"
   >

package/src/components/Stepper/StepperTrigger.vue

@@ -2,14 +2,15 @@
 import { computed, inject, h, type Component } from 'vue'
 import { StepperKey, StepperItemKey } from './keys'
 import { useInternalIcon } from '../../config/icons'
+import type { ClassValue } from '../../types/common'
 
 export interface StepperTriggerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Custom icon to display instead of step number */
   icon?: Component
 }
 
-defineProps<StepperTriggerProps>()
-
 const stepper = inject(StepperKey)
 const stepperItem = inject(StepperItemKey)
 
@@ -19,7 +20,10 @@ if (!stepper || !stepperItem) {
 
 const CheckIcon = useInternalIcon('check')
 
+const props = defineProps<StepperTriggerProps>()
+
 const triggerClasses = computed(() => [
+  props.class,
   'ui-stepper__trigger',
   `ui-stepper__trigger--${stepperItem.state.value}`
 ])

package/src/components/Switch/Switch.vue

@@ -2,8 +2,11 @@
 import { computed } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface SwitchProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Checked state (v-model) */
   modelValue?: boolean
   /** Switch size */
@@ -67,8 +70,9 @@ const spinnerSize = computed(() => spinnerSizeMap[props.size])
     :aria-checked="modelValue"
     :aria-label="label"
     :disabled="isDisabled"
-    class="ui-switch"
     :class="[
+      props.class,
+      'ui-switch',
       `ui-switch--${size}`,
       {
         'ui-switch--checked': modelValue,