@sabrenski/spire-ui 0.0.6 → 0.0.7

package/package.json

@@ -1,70 +1,83 @@
-{
-  "name": "@sabrenski/spire-ui",
-  "version": "0.0.6",
-  "description": "A dependency-free Vue 3 component library built with pure CSS and OKLCH colors",
-  "type": "module",
-  "license": "MIT",
-  "author": "Sabri Stratos",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sabristratos/spire-ui.git"
-  },
-  "homepage": "https://github.com/sabristratos/spire-ui#readme",
-  "bugs": {
-    "url": "https://github.com/sabristratos/spire-ui/issues"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "components",
-    "ui",
-    "component-library",
-    "design-system",
-    "typescript",
-    "oklch",
-    "css"
-  ],
-  "files": [
-    "dist",
-    "src"
-  ],
-  "main": "./dist/spire-ui.umd.js",
-  "module": "./dist/spire-ui.es.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/spire-ui.es.js",
-      "require": "./dist/spire-ui.umd.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./style.css": "./dist/spire-ui.css"
-  },
-  "peerDependencies": {
-    "chart.js": "^4.4.0",
-    "vue": "^3.3.0"
-  },
-  "peerDependenciesMeta": {
-    "chart.js": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/test-utils": "^2.4.6",
-    "chart.js": "^4.5.1",
-    "happy-dom": "^20.3.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.7",
-    "vite-plugin-dts": "^4.4.0",
-    "vitest": "^4.0.17",
-    "vue": "^3.5.13",
-    "vue-tsc": "^2.2.0"
-  },
-  "scripts": {
-    "build": "vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "vue-tsc --noEmit",
-    "docs:tokens": "npx tsx scripts/generate-token-docs.ts"
-  }
-}
+{
+  "name": "@sabrenski/spire-ui",
+  "version": "0.0.7",
+  "description": "A dependency-free Vue 3 component library built with pure CSS and OKLCH colors",
+  "type": "module",
+  "license": "MIT",
+  "author": "Sabri Stratos",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sabristratos/spire-ui.git"
+  },
+  "homepage": "https://github.com/sabristratos/spire-ui#readme",
+  "bugs": {
+    "url": "https://github.com/sabristratos/spire-ui/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "ui",
+    "component-library",
+    "design-system",
+    "typescript",
+    "oklch",
+    "css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./style.css": "./src/styles/main.css",
+    "./src/*": "./src/*"
+  },
+  "publishConfig": {
+    "main": "./dist/spire-ui.umd.js",
+    "module": "./dist/spire-ui.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "import": "./dist/spire-ui.es.js",
+        "require": "./dist/spire-ui.umd.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./style.css": "./dist/spire-ui.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit",
+    "docs:tokens": "npx tsx scripts/generate-token-docs.ts"
+  },
+  "peerDependencies": {
+    "chart.js": "^4.4.0",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "chart.js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "chart.js": "^4.5.1",
+    "happy-dom": "^20.3.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^4.0.17",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/src/components/Accordion/AccordionContent.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 import { AccordionItemKey } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface AccordionContentProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Lazy render - use v-if instead of v-show. Better performance but breaks Ctrl+F search. */
   lazy?: boolean
 }
@@ -59,7 +62,7 @@ function onAfterLeave(el: Element) {
     <div
       v-if="item.isOpen.value"
       :id="item.contentId"
-      class="ui-accordion__content"
+      :class="[props.class, 'ui-accordion__content']"
       role="region"
       :aria-labelledby="item.triggerId"
     >
@@ -81,7 +84,7 @@ function onAfterLeave(el: Element) {
     <div
       v-show="item.isOpen.value"
       :id="item.contentId"
-      class="ui-accordion__content"
+      :class="[props.class, 'ui-accordion__content']"
       role="region"
       :aria-labelledby="item.triggerId"
     >

package/src/components/Accordion/AccordionItem.vue

@@ -2,8 +2,11 @@
 import { computed, provide, inject } from 'vue'
 import { useId } from '../../composables'
 import { AccordionKey, AccordionItemKey } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface AccordionItemProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Unique identifier for this item */
   value: string
   /** Disable this item */
@@ -40,6 +43,7 @@ provide(AccordionItemKey, {
 })
 
 const itemClasses = computed(() => [
+  props.class,
   'ui-accordion__item',
   `ui-accordion__item--${accordion.variant.value}`,
   {

package/src/components/Accordion/AccordionRoot.vue

@@ -2,8 +2,11 @@
 import { computed, provide, toRef, ref, watch } from 'vue'
 import { AccordionKey } from './keys'
 import type { AccordionVariant } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface AccordionRootProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Currently open item(s) - single value or array for multiple mode */
   modelValue?: string | string[]
   /** Allow all items to be collapsed */
@@ -84,8 +87,7 @@ provide(AccordionKey, {
 
 <template>
   <div
-    class="ui-accordion"
-    :class="[`ui-accordion--${variant}`]"
+    :class="[props.class, 'ui-accordion', `ui-accordion--${variant}`]"
   >
     <slot />
   </div>

package/src/components/Accordion/AccordionTrigger.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { inject, useSlots } from 'vue'
 import { AccordionItemKey } from './keys'
+import type { ClassValue } from '../../types/common'
 
 export interface AccordionTriggerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Hide the default chevron indicator */
   hideIndicator?: boolean
 }
@@ -23,7 +26,7 @@ const hasIconSlot = !!slots.icon
 </script>
 
 <template>
-  <h3 class="ui-accordion__heading">
+  <h3 :class="[props.class, 'ui-accordion__heading']">
     <button
       type="button"
       class="ui-accordion__trigger"

package/src/components/Avatar/Avatar.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { getInitials } from '../../utils/string'
+import type { ClassValue } from '../../types/common'
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 type AvatarShape = 'circle' | 'square'
 type AvatarVariant = 'neutral' | 'primary' | 'soft'
 
 export interface AvatarProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Image source URL */
   src?: string
   /** User name - used for alt text AND initials fallback */
@@ -49,6 +52,7 @@ const showInitials = computed(() => !showImage.value && initials.value)
 const showFallback = computed(() => !showImage.value && !initials.value)
 
 const classes = computed(() => [
+  props.class,
   'ui-avatar',
   `ui-avatar--${props.size}`,
   `ui-avatar--${props.shape}`,

package/src/components/Badge/Badge.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info'
 
 export interface BadgeProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Color variant */
   variant?: BadgeVariant
   /** Render as dot indicator instead of pill */
@@ -39,6 +42,7 @@ const ariaLabel = computed(() => {
 })
 
 const classes = computed(() => [
+  props.class,
   'ui-badge',
   `ui-badge--${props.variant}`,
   {

package/src/components/BadgeContainer/BadgeContainer.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
 
 export interface BadgeContainerProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Badge position relative to content */
   position?: BadgePosition
   /** Horizontal offset adjustment (CSS value) */
@@ -54,7 +57,7 @@ const badgeClasses = computed(() => [
 </script>
 
 <template>
-  <span class="ui-badge-container">
+  <span :class="[props.class, 'ui-badge-container']">
     <!-- Content (Button, Avatar, etc.) -->
     <slot />
 

package/src/components/Breadcrumb/BreadcrumbLink.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, type Component } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export interface BreadcrumbLinkProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** URL for standard anchor */
   href?: string
   /** Route location for vue-router (string or route object) */
@@ -34,7 +37,7 @@ const linkProps = computed(() => {
   <component
     :is="componentType"
     v-bind="linkProps"
-    class="ui-breadcrumb__link"
+    :class="[props.class, 'ui-breadcrumb__link']"
   >
     <slot />
   </component>

package/src/components/Breadcrumb/BreadcrumbRoot.vue

@@ -2,8 +2,11 @@
 import { provide, useSlots } from 'vue'
 import { BreadcrumbKey } from './keys'
 import type { Component, VNode } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export interface BreadcrumbRootProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Custom separator component or string */
   separator?: Component | string | (() => VNode)
 }
@@ -27,7 +30,7 @@ provide(BreadcrumbKey, {
 </script>
 
 <template>
-  <nav aria-label="Breadcrumb" class="ui-breadcrumb">
+  <nav aria-label="Breadcrumb" :class="[props.class, 'ui-breadcrumb']">
     <slot />
   </nav>
 </template>

package/src/components/Button/Button.vue

@@ -3,8 +3,11 @@ import { computed, useSlots, type Component, type Slots } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import Icon from '../Icon/Icon.vue'
 import type { IconInput } from '../Icon/Icon.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface ButtonProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Visual style variant */
   variant?: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline'
   /** Button size */
@@ -70,8 +73,9 @@ const iconSize = computed(() => iconSizeMap[props.size])
     :disabled="as === 'button' ? isDisabled : undefined"
     :aria-disabled="isDisabled"
     :aria-busy="loading"
-    class="ui-button"
     :class="[
+      props.class,
+      'ui-button',
       `ui-button--${variant}`,
       `ui-button--${size}`,
       {

package/src/components/Callout/Callout.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type CalloutVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral'
 
 export interface CalloutProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Visual variant determining color and icon */
   variant?: CalloutVariant
   /** Title text (alternative to #title slot) */
@@ -44,6 +47,7 @@ const ariaRole = computed(() => {
 })
 
 const calloutClasses = computed(() => [
+  props.class,
   'ui-callout',
   `ui-callout--${props.variant}`,
   {

package/src/components/Card/Card.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { provide, ref, toRef, computed, type Component } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type CardVariant = 'elevated' | 'outline' | 'ghost'
 export type CardPadding = 'none' | 'sm' | 'md' | 'lg'
 
 export interface CardProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Visual style variant */
   variant?: CardVariant
   /** Render as different element (article, section, aside, etc.) */
@@ -78,8 +81,9 @@ const isClickable = computed(() => props.interactive && !props.disabled && !prop
 <template>
   <component
     :is="as"
-    class="ui-card"
     :class="[
+      props.class,
+      'ui-card',
       `ui-card--${variant}`,
       `ui-card--padding-${padding}`,
       {

package/src/components/Card/CardContent.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { inject, computed, type Ref } from 'vue'
 import type { CardPadding } from './Card.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface CardContentProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Remove default padding */
   flush?: boolean
 }
@@ -23,8 +26,9 @@ const paddingSize = computed(() => cardContext?.padding?.value ?? 'md')
 
 <template>
   <div
-    class="ui-card__content"
     :class="[
+      props.class,
+      'ui-card__content',
       `ui-card__content--padding-${paddingSize}`,
       {
         'ui-card__content--flush': flush,

package/src/components/Card/CardFooter.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { inject, computed, type Ref } from 'vue'
 import type { CardPadding } from './Card.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface CardFooterProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Content alignment */
   align?: 'start' | 'center' | 'end' | 'between'
   /** Remove separator border */
@@ -23,8 +26,9 @@ const paddingSize = computed(() => cardContext?.padding?.value ?? 'md')
 
 <template>
   <div
-    class="ui-card__footer"
     :class="[
+      props.class,
+      'ui-card__footer',
       `ui-card__footer--${align}`,
       `ui-card__footer--padding-${paddingSize}`,
       { 'ui-card__footer--borderless': borderless }

package/src/components/Card/CardHeader.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { inject, onMounted, useSlots, computed, type Ref } from 'vue'
 import type { CardPadding } from './Card.vue'
+import type { ClassValue } from '../../types/common'
 
 export interface CardHeaderProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Title text (alternative to slot) */
   title?: string
   /** Subtitle text (alternative to slot) */
@@ -32,8 +35,9 @@ const paddingSize = computed(() => cardContext?.padding?.value ?? 'md')
 
 <template>
   <div
-    class="ui-card__header"
     :class="[
+      props.class,
+      'ui-card__header',
       `ui-card__header--${align}`,
       `ui-card__header--padding-${paddingSize}`
     ]"

package/src/components/Card/CardImage.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { inject, onMounted, computed } from 'vue'
+import type { ClassValue } from '../../types/common'
 
 export type CardImagePosition = 'top' | 'bottom' | 'left' | 'right' | 'background'
 export type CardImageAspectRatio = '16:9' | '4:3' | '3:2' | '1:1' | 'auto'
 export type CardImageFit = 'cover' | 'contain' | 'fill'
 
 export interface CardImageProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** Image source URL */
   src: string
   /** Alt text for accessibility */
@@ -52,8 +55,7 @@ const aspectRatioValue = computed(() => {
 
 <template>
   <div
-    class="ui-card__image"
-    :class="[`ui-card__image--${position}`]"
+    :class="[props.class, 'ui-card__image', `ui-card__image--${position}`]"
     :style="aspectRatio !== 'auto' ? { '--aspect-ratio': aspectRatioValue } : undefined"
   >
     <img

package/src/components/Chart/BarChart.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 BarChartData = ChartData<'bar'>
 type BarChartOptions = ChartOptions<'bar'>
@@ -14,6 +15,8 @@ export interface BarChartSeries {
 }
 
 export interface BarChartProps {
+  /** Additional CSS classes */
+  class?: ClassValue
   /** X-axis labels */
   labels: string[]
   /** Data series */
@@ -123,6 +126,7 @@ const chartOptions = computed(() => ({
 
 <template>
   <BaseChart
+    :class="props.class"
     type="bar"
     :data="chartData"
     :options="chartOptions"