@sabrenski/spire-ui 0.0.5 → 0.0.7

package/src/components/Chart/BaseChart.vue

@@ -17,6 +17,7 @@ import {
   type TooltipModel
 } from 'chart.js'
 import { useChartTheme } from './useChartTheme'
+import type { ClassValue } from '../../types/common'
 
 Chart.register(...registerables)
 
@@ -57,6 +58,8 @@ export interface PointClickData {
 }
 
 export interface BaseChartProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Chart type (line, bar, doughnut, pie, etc.) */
   type: ChartType
   /** Chart.js data configuration */
@@ -281,7 +284,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="ui-chart" ref="containerRef">
+  <div :class="[props.class, 'ui-chart']" ref="containerRef">
     <!-- Custom Legend Slot -->
     <slot name="legend" :items="legendItems" :toggle="toggleDataset" />
 
@@ -387,58 +390,60 @@ defineExpose({
 
 <!-- Tooltip styles must be unscoped because content is teleported to body -->
 <style>
-.ui-chart__tooltip {
-  position: fixed;
-  z-index: var(--z-tooltip, 100);
-  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
-  background-color: var(--chart-tooltip-bg, var(--tooltip-bg, #1c1917));
-  color: var(--chart-tooltip-text, var(--tooltip-text, #fafaf9));
-  border-radius: var(--radius-md, 0.375rem);
-  font-size: var(--text-sm, 0.875rem);
-  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
-  pointer-events: none;
-  transform: translate(-50%, calc(-100% - 8px));
-  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  min-width: 120px;
-}
+@layer spire-components {
+  .ui-chart__tooltip {
+    position: fixed;
+    z-index: var(--z-tooltip, 100);
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    background-color: var(--chart-tooltip-bg, var(--tooltip-bg, #1c1917));
+    color: var(--chart-tooltip-text, var(--tooltip-text, #fafaf9));
+    border-radius: var(--radius-md, 0.375rem);
+    font-size: var(--text-sm, 0.875rem);
+    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+    pointer-events: none;
+    transform: translate(-50%, calc(-100% - 8px));
+    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    min-width: 120px;
+  }
 
-.ui-chart__tooltip-title {
-  font-weight: var(--font-medium, 500);
-  margin-bottom: var(--space-1, 0.25rem);
-  padding-bottom: var(--space-1, 0.25rem);
-  border-bottom: 1px solid var(--chart-tooltip-border, rgba(255, 255, 255, 0.1));
-}
+  .ui-chart__tooltip-title {
+    font-weight: var(--font-medium, 500);
+    margin-bottom: var(--space-1, 0.25rem);
+    padding-bottom: var(--space-1, 0.25rem);
+    border-bottom: 1px solid var(--chart-tooltip-border, rgba(255, 255, 255, 0.1));
+  }
 
-.ui-chart__tooltip-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2, 0.5rem);
-  padding: var(--space-1, 0.25rem) 0;
-}
+  .ui-chart__tooltip-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    padding: var(--space-1, 0.25rem) 0;
+  }
 
-.ui-chart__tooltip-color {
-  width: 10px;
-  height: 10px;
-  border-radius: var(--radius-sm, 0.25rem);
-  flex-shrink: 0;
-}
+  .ui-chart__tooltip-color {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius-sm, 0.25rem);
+    flex-shrink: 0;
+  }
 
-.ui-chart__tooltip-label {
-  flex: 1;
-  opacity: 0.8;
-}
+  .ui-chart__tooltip-label {
+    flex: 1;
+    opacity: 0.8;
+  }
 
-.ui-chart__tooltip-value {
-  font-weight: var(--font-medium, 500);
-  font-variant-numeric: tabular-nums;
-}
+  .ui-chart__tooltip-value {
+    font-weight: var(--font-medium, 500);
+    font-variant-numeric: tabular-nums;
+  }
 
-[data-theme='dark'] .ui-chart__tooltip {
-  background-color: var(--chart-tooltip-bg, #fafaf9);
-  color: var(--chart-tooltip-text, #1c1917);
-}
+  [data-theme='dark'] .ui-chart__tooltip {
+    background-color: var(--chart-tooltip-bg, #fafaf9);
+    color: var(--chart-tooltip-text, #1c1917);
+  }
 
-[data-theme='dark'] .ui-chart__tooltip-title {
-  border-bottom-color: var(--chart-tooltip-border, rgba(0, 0, 0, 0.1));
+  [data-theme='dark'] .ui-chart__tooltip-title {
+    border-bottom-color: var(--chart-tooltip-border, rgba(0, 0, 0, 0.1));
+  }
 }
 </style>

package/src/components/Chart/DonutChart.vue

@@ -4,6 +4,7 @@ import type { ChartData, ChartOptions } from 'chart.js'
 import BaseChart from './BaseChart.vue'
 import type { LegendItem, TooltipData, PointClickData } from './BaseChart.vue'
 import { useChartTheme } from './useChartTheme'
+import type { ClassValue } from '../../types/common'
 
 type DonutChartData = ChartData<'doughnut'>
 type DonutChartOptions = ChartOptions<'doughnut'>
@@ -21,6 +22,8 @@ export interface SegmentClickData {
 }
 
 export interface DonutChartProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Chart segments */
   segments: DonutChartSegment[]
   /** Chart height */
@@ -115,8 +118,7 @@ function handlePointClick(data: PointClickData) {
 
 <template>
   <div
-    class="ui-donut-chart"
-    :class="[`ui-donut-chart--legend-${legendPosition}`]"
+    :class="[props.class, 'ui-donut-chart', `ui-donut-chart--legend-${legendPosition}`]"
   >
     <!-- Legend (conditional position) -->
     <slot v-if="showLegend && (legendPosition === 'top' || legendPosition === 'left')" name="legend" :items="legendItems" :toggle="() => {}">

package/src/components/Chart/LineChart.vue

@@ -4,6 +4,7 @@ import type { ChartData, ChartOptions } from 'chart.js'
 import BaseChart from './BaseChart.vue'
 import type { LegendItem, TooltipData, PointClickData } from './BaseChart.vue'
 import { useChartTheme } from './useChartTheme'
+import type { ClassValue } from '../../types/common'
 
 type LineChartData = ChartData<'line'>
 type LineChartOptions = ChartOptions<'line'>
@@ -14,6 +15,8 @@ export interface LineChartSeries {
 }
 
 export interface LineChartProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** X-axis labels */
   labels: string[]
   /** Data series */
@@ -126,6 +129,7 @@ const chartOptions = computed(() => ({
 
 <template>
   <BaseChart
+    :class="props.class"
     type="line"
     :data="chartData"
     :options="chartOptions"

package/src/components/Checkbox/Checkbox.test.ts

@@ -206,4 +206,98 @@ describe('Checkbox', () => {
       expect(wrapper.find('input').attributes('value')).toBe('accepted')
     })
   })
+
+  describe('Pill variant', () => {
+    it('renders pill structure when variant is pill', () => {
+      const wrapper = mount(Checkbox, {
+        props: { variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-checkbox-pill').exists()).toBe(true)
+      expect(wrapper.find('.ui-checkbox').exists()).toBe(false)
+    })
+
+    it('renders default structure when variant is default', () => {
+      const wrapper = mount(Checkbox, {
+        props: { variant: 'default' }
+      })
+      expect(wrapper.find('.ui-checkbox').exists()).toBe(true)
+      expect(wrapper.find('.ui-checkbox-pill').exists()).toBe(false)
+    })
+
+    it('defaults to default variant', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('.ui-checkbox').exists()).toBe(true)
+      expect(wrapper.find('.ui-checkbox-pill').exists()).toBe(false)
+    })
+
+    it('renders pill label', () => {
+      const wrapper = mount(Checkbox, {
+        props: { variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-checkbox-pill__label').text()).toBe('Option A')
+    })
+
+    it('renders pill check indicator', () => {
+      const wrapper = mount(Checkbox, {
+        props: { variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-checkbox-pill__indicator').exists()).toBe(true)
+      expect(wrapper.find('.ui-checkbox-pill__check').exists()).toBe(true)
+    })
+
+    it('applies checked class when checked', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: true, variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-checkbox-pill').classes()).toContain('ui-checkbox-pill--checked')
+    })
+
+    it('does not apply checked class when unchecked', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false, variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-checkbox-pill').classes()).not.toContain('ui-checkbox-pill--checked')
+    })
+
+    it('applies disabled class when disabled', () => {
+      const wrapper = mount(Checkbox, {
+        props: { variant: 'pill', label: 'Option A', disabled: true }
+      })
+      expect(wrapper.find('.ui-checkbox-pill').classes()).toContain('ui-checkbox-pill--disabled')
+    })
+
+    it('emits events on pill change', async () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false, variant: 'pill', label: 'Option A' }
+      })
+      await wrapper.find('input').setValue(true)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+      expect(wrapper.emitted('change')?.[0]).toEqual([true])
+    })
+
+    it('toggles off when checked pill is clicked', async () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: true, variant: 'pill', label: 'Option A' }
+      })
+      await wrapper.find('input').setValue(false)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    })
+
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach(size => {
+      it(`applies ${size} size class to pill`, () => {
+        const wrapper = mount(Checkbox, {
+          props: { variant: 'pill', label: 'Option A', size }
+        })
+        expect(wrapper.find('.ui-checkbox-pill').classes()).toContain(`ui-checkbox-pill--${size}`)
+      })
+    })
+
+    it('pill indicator has aria-hidden', () => {
+      const wrapper = mount(Checkbox, {
+        props: { variant: 'pill', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-checkbox-pill__indicator').attributes('aria-hidden')).toBe('true')
+    })
+  })
 })

package/src/components/Checkbox/Checkbox.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted } from 'vue'
 import { useId } from '../../composables'
+import type { ClassValue } from '../../types/common'
 
 export interface CheckboxProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Checked state (v-model) */
   modelValue?: boolean
   /** Indeterminate state (partial selection) */
   indeterminate?: boolean
+  /** Visual variant */
+  variant?: 'default' | 'pill'
   /** Checkbox size */
   size?: 'sm' | 'md' | 'lg'
   /** Disabled state */
@@ -26,6 +31,7 @@ export interface CheckboxProps {
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   indeterminate: false,
+  variant: 'default',
   size: 'md',
   disabled: false
 })
@@ -66,9 +72,54 @@ const indeterminatePathLength = 10
 </script>
 
 <template>
+  <!-- Pill variant -->
   <label
-    class="ui-checkbox"
+    v-if="variant === 'pill'"
     :class="[
+      props.class,
+      'ui-checkbox-pill',
+      `ui-checkbox-pill--${size}`,
+      {
+        'ui-checkbox-pill--disabled': disabled,
+        'ui-checkbox-pill--checked': modelValue
+      }
+    ]"
+  >
+    <input
+      ref="inputRef"
+      :id="checkboxId"
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      class="ui-checkbox-pill__input"
+      @change="handleChange"
+    />
+
+    <span class="ui-checkbox-pill__indicator" aria-hidden="true">
+      <svg
+        class="ui-checkbox-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-checkbox-pill__label">{{ label }}</span>
+  </label>
+
+  <!-- Default variant -->
+  <label
+    v-else
+    :class="[
+      props.class,
+      'ui-checkbox',
       `ui-checkbox--${size}`,
       {
         'ui-checkbox--disabled': disabled,
@@ -282,4 +333,122 @@ const indeterminatePathLength = 10
 .ui-checkbox--lg .ui-checkbox__description {
   font-size: var(--text-sm);
 }
+
+/* Pill variant styles */
+.ui-checkbox-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-checkbox-pill--sm {
+  height: 32px;
+  font-size: var(--text-xs);
+}
+
+.ui-checkbox-pill--lg {
+  height: 44px;
+  font-size: var(--text-md);
+  padding: 0 var(--space-4);
+}
+
+.ui-checkbox-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-checkbox-pill:not(.ui-checkbox-pill--disabled):hover {
+  background: var(--chip-bg-hover);
+  border-color: var(--chip-border-hover);
+}
+
+.ui-checkbox-pill:not(.ui-checkbox-pill--disabled):active {
+  background: var(--chip-bg-active);
+  border-color: var(--chip-border-active);
+}
+
+.ui-checkbox-pill--checked {
+  background: var(--chip-bg-selected);
+  border-color: var(--chip-border-selected);
+  color: var(--chip-text-selected);
+}
+
+.ui-checkbox-pill--checked:not(.ui-checkbox-pill--disabled):hover {
+  background: var(--chip-bg-selected-hover);
+  border-color: var(--chip-border-selected-hover);
+}
+
+.ui-checkbox-pill--checked:not(.ui-checkbox-pill--disabled):active {
+  background: var(--chip-bg-selected-active);
+  border-color: var(--chip-border-selected-active);
+}
+
+.ui-checkbox-pill:has(.ui-checkbox-pill__input:focus-visible) {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-checkbox-pill--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-checkbox-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-checkbox-pill--checked .ui-checkbox-pill__indicator {
+  width: 1rem;
+  margin-right: 0;
+}
+
+.ui-checkbox-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-checkbox-pill--checked .ui-checkbox-pill__check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ui-checkbox-pill__label {
+  white-space: nowrap;
+}
 </style>

package/src/components/ChoiceChip/ChoiceChip.vue

@@ -3,8 +3,11 @@ import { computed, inject } 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 ChoiceChipProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected state for standalone usage (v-model) */
   modelValue?: boolean
   /** Value for group usage */
@@ -65,11 +68,14 @@ function handleChange() {
 
 <template>
   <label
-    class="ui-choice-chip"
-    :class="{
-      'ui-choice-chip--selected': isSelected,
-      'ui-choice-chip--disabled': effectiveDisabled
-    }"
+    :class="[
+      props.class,
+      'ui-choice-chip',
+      {
+        'ui-choice-chip--selected': isSelected,
+        'ui-choice-chip--disabled': effectiveDisabled
+      }
+    ]"
   >
     <input
       :id="chipId"

package/src/components/ChoiceChipGroup/ChoiceChipGroup.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { provide, toRef } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export interface ChoiceChipGroupProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Selected value(s) - single value for 'single' type, array for 'multiple' */
   modelValue?: string | number | (string | number)[]
   /** Selection type */
@@ -50,8 +53,7 @@ provide('choiceChipGroup', {
     role="group"
     :aria-label="label"
     :aria-disabled="disabled || undefined"
-    class="ui-choice-chip-group"
-    :class="{ 'ui-choice-chip-group--disabled': disabled }"
+    :class="[props.class, 'ui-choice-chip-group', { 'ui-choice-chip-group--disabled': disabled }]"
   >
     <slot />
   </div>

package/src/components/ColorPicker/ColorArea.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted } from 'vue'
 import { clamp } from '../../utils/color'
+import type { ClassValue } from '../../types/common'
 
 export interface ColorAreaProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Hue value (0-360) */
   hue: number
   /** Saturation value (0-1) */
@@ -94,8 +97,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="areaRef"
-    class="ui-color-area"
-    :class="{ 'ui-color-area--dragging': isDragging }"
+    :class="[props.class, 'ui-color-area', { 'ui-color-area--dragging': isDragging }]"
     :style="{ '--hue-color': hueColor }"
     @mousedown="handleMouseDown"
     @touchstart="handleTouchStart"

package/src/components/ColorPicker/ColorPicker.vue

@@ -12,10 +12,13 @@ import {
   formatRgb,
   type HSV
 } from '../../utils/color'
+import type { ClassValue } from '../../types/common'
 
 export type ColorFormat = 'hex' | 'rgb' | 'oklch'
 
 export interface ColorPickerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current color value */
   modelValue: string
   /** Output format */
@@ -144,8 +147,7 @@ const hasEyeDropper = computed(() => 'EyeDropper' in window)
   >
     <template #trigger>
       <div
-        class="ui-color-picker__trigger"
-        :class="{ 'ui-color-picker__trigger--disabled': disabled }"
+        :class="[props.class, 'ui-color-picker__trigger', { 'ui-color-picker__trigger--disabled': disabled }]"
       >
         <div
           class="ui-color-picker__swatch"

package/src/components/ColorPicker/ColorSlider.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted } from 'vue'
 import { clamp } from '../../utils/color'
+import type { ClassValue } from '../../types/common'
 
 export interface ColorSliderProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Current value (0-1 for alpha, 0-360 for hue) */
   modelValue: number
   /** Slider type */
@@ -100,8 +103,9 @@ onUnmounted(() => {
 <template>
   <div
     ref="trackRef"
-    class="ui-color-slider"
     :class="[
+      props.class,
+      'ui-color-slider',
       `ui-color-slider--${type}`,
       { 'ui-color-slider--dragging': isDragging }
     ]"