@sabrenski/spire-ui 0.0.1

package/src/config/icons.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { h, type FunctionalComponent } from 'vue'
+import {
+  configureIcons,
+  resetIcons,
+  useInternalIcon,
+  getIconRegistry
+} from './icons'
+
+const MockIcon: FunctionalComponent = () => h('svg', { class: 'mock-icon' })
+
+describe('Icon Registry', () => {
+  beforeEach(() => {
+    resetIcons()
+  })
+
+  describe('useInternalIcon', () => {
+    it('returns default icon for sortAsc', () => {
+      const icon = useInternalIcon('sortAsc')
+      expect(icon).toBeDefined()
+      expect(typeof icon).toBe('function')
+    })
+
+    it('returns default icon for all semantic keys', () => {
+      const keys = [
+        'sortAsc', 'sortDesc', 'sortNeutral',
+        'expand', 'collapse', 'close', 'search', 'check',
+        'info', 'success', 'warning', 'error',
+        'emptyData', 'emptySearch'
+      ] as const
+
+      keys.forEach(key => {
+        const icon = useInternalIcon(key)
+        expect(icon).toBeDefined()
+      })
+    })
+  })
+
+  describe('configureIcons', () => {
+    it('overrides a single icon', () => {
+      configureIcons({ sortAsc: MockIcon })
+      const icon = useInternalIcon('sortAsc')
+      expect(icon).toBe(MockIcon)
+    })
+
+    it('overrides multiple icons', () => {
+      configureIcons({
+        sortAsc: MockIcon,
+        sortDesc: MockIcon,
+        close: MockIcon
+      })
+
+      expect(useInternalIcon('sortAsc')).toBe(MockIcon)
+      expect(useInternalIcon('sortDesc')).toBe(MockIcon)
+      expect(useInternalIcon('close')).toBe(MockIcon)
+    })
+
+    it('preserves non-overridden icons', () => {
+      const originalExpand = useInternalIcon('expand')
+      configureIcons({ sortAsc: MockIcon })
+      expect(useInternalIcon('expand')).toBe(originalExpand)
+    })
+
+    it('allows partial updates', () => {
+      configureIcons({ sortAsc: MockIcon })
+      const originalSortDesc = useInternalIcon('sortDesc')
+
+      const AnotherMockIcon: FunctionalComponent = () => h('svg', { class: 'another-mock' })
+      configureIcons({ sortDesc: AnotherMockIcon })
+
+      expect(useInternalIcon('sortAsc')).toBe(MockIcon)
+      expect(useInternalIcon('sortDesc')).toBe(AnotherMockIcon)
+    })
+  })
+
+  describe('resetIcons', () => {
+    it('resets all icons to defaults', () => {
+      const originalSortAsc = useInternalIcon('sortAsc')
+      configureIcons({ sortAsc: MockIcon })
+      expect(useInternalIcon('sortAsc')).toBe(MockIcon)
+
+      resetIcons()
+      expect(useInternalIcon('sortAsc')).not.toBe(MockIcon)
+      expect(typeof useInternalIcon('sortAsc')).toBe('function')
+    })
+  })
+
+  describe('getIconRegistry', () => {
+    it('returns all icons', () => {
+      const registry = getIconRegistry()
+      expect(registry.sortAsc).toBeDefined()
+      expect(registry.sortDesc).toBeDefined()
+      expect(registry.emptyData).toBeDefined()
+    })
+
+    it('reflects configuration changes', () => {
+      configureIcons({ sortAsc: MockIcon })
+      const registry = getIconRegistry()
+      expect(registry.sortAsc).toBe(MockIcon)
+    })
+  })
+
+  describe('Default Icons', () => {
+    it('default icons are functional components', () => {
+      const icon = useInternalIcon('sortAsc')
+      expect(typeof icon).toBe('function')
+    })
+
+    it('default icons render SVG elements', () => {
+      const icon = useInternalIcon('emptyData')
+      const vnode = (icon as FunctionalComponent)({}, { attrs: {}, slots: {}, emit: () => {} })
+      expect(vnode.type).toBe('svg')
+    })
+  })
+})

package/src/config/icons.ts

@@ -0,0 +1,170 @@
+import { shallowRef, h, type Component, type FunctionalComponent } from 'vue'
+
+/**
+ * Semantic icon keys used internally by Spire UI components.
+ * Components request icons by function, not by name.
+ */
+export interface IconMap {
+  sortAsc: Component
+  sortDesc: Component
+  sortNeutral: Component
+  expand: Component
+  collapse: Component
+  close: Component
+  search: Component
+  check: Component
+  info: Component
+  success: Component
+  warning: Component
+  error: Component
+  emptyData: Component
+  emptySearch: Component
+  calendar: Component
+  chevronLeft: Component
+  chevronRight: Component
+  star: Component
+  starFilled: Component
+}
+
+type SVGProps = { class?: string }
+
+function createSvgIcon(paths: string[], viewBox = '0 0 24 24'): FunctionalComponent<SVGProps> {
+  return (props) => h('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox,
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.5',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    class: props.class
+  }, paths.map(d => h('path', { d })))
+}
+
+function createFilledSvgIcon(paths: string[], viewBox = '0 0 24 24'): FunctionalComponent<SVGProps> {
+  return (props) => h('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox,
+    fill: 'currentColor',
+    class: props.class
+  }, paths.map(d => h('path', { d })))
+}
+
+const defaultIcons: IconMap = {
+  sortAsc: createSvgIcon(['M4 10l4-4 4 4'], '0 0 16 16'),
+
+  sortDesc: createSvgIcon(['M4 6l4 4 4-4'], '0 0 16 16'),
+
+  sortNeutral: createSvgIcon([
+    'M4 6l4-3 4 3',
+    'M4 10l4 3 4-3'
+  ], '0 0 16 16'),
+
+  expand: createSvgIcon(['M6 9l6 6 6-6']),
+
+  collapse: createSvgIcon(['M18 15l-6-6-6 6']),
+
+  close: createSvgIcon(['M18 6L6 18', 'M6 6l12 12']),
+
+  search: createSvgIcon([
+    'M11 19a8 8 0 100-16 8 8 0 000 16z',
+    'M21 21l-4.35-4.35'
+  ]),
+
+  check: createSvgIcon(['M20 6L9 17l-5-5']),
+
+  info: createSvgIcon([
+    'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z',
+    'M12 16v-4',
+    'M12 8h.01'
+  ]),
+
+  success: createSvgIcon([
+    'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z',
+    'M9 12l2 2 4-4'
+  ]),
+
+  warning: createSvgIcon([
+    'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z',
+    'M12 8v4',
+    'M12 16h.01'
+  ]),
+
+  error: createSvgIcon([
+    'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z',
+    'M15 9l-6 6',
+    'M9 9l6 6'
+  ]),
+
+  emptyData: createSvgIcon([
+    'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'
+  ]),
+
+  emptySearch: createSvgIcon([
+    'M11 19a8 8 0 100-16 8 8 0 000 16z',
+    'M21 21l-4.35-4.35'
+  ]),
+
+  calendar: createSvgIcon([
+    'M8 2v4',
+    'M16 2v4',
+    'M3 10h18',
+    'M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z'
+  ]),
+
+  chevronLeft: createSvgIcon(['M15 18l-6-6 6-6']),
+
+  chevronRight: createSvgIcon(['M9 18l6-6-6-6']),
+
+  star: createSvgIcon([
+    'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'
+  ]),
+
+  starFilled: createFilledSvgIcon([
+    'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'
+  ])
+}
+
+const iconRegistry = shallowRef<IconMap>({ ...defaultIcons })
+
+/**
+ * Configure internal icons used by Spire UI components.
+ * Call this before mounting your app to customize icons globally.
+ *
+ * @example
+ * ```ts
+ * import { configureIcons } from 'spire-ui'
+ * import { ArrowUp, ArrowDown, X } from 'lucide-vue-next'
+ *
+ * configureIcons({
+ *   sortAsc: ArrowUp,
+ *   sortDesc: ArrowDown,
+ *   close: X
+ * })
+ * ```
+ */
+export function configureIcons(userIcons: Partial<IconMap>): void {
+  iconRegistry.value = { ...iconRegistry.value, ...userIcons }
+}
+
+/**
+ * Reset icons to defaults. Useful for testing.
+ */
+export function resetIcons(): void {
+  iconRegistry.value = { ...defaultIcons }
+}
+
+/**
+ * Get an internal icon by semantic key.
+ * Used internally by Spire UI components.
+ */
+export function useInternalIcon(key: keyof IconMap): Component {
+  return iconRegistry.value[key]
+}
+
+/**
+ * Get all currently configured icons.
+ */
+export function getIconRegistry(): Readonly<IconMap> {
+  return iconRegistry.value
+}

package/src/index.ts

@@ -0,0 +1,361 @@
+// Styles - Must be imported by consumer
+import './styles/main.css'
+
+// Components
+export {
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from './components/Accordion'
+export type {
+  AccordionRootProps,
+  AccordionItemProps,
+  AccordionTriggerProps
+} from './components/Accordion'
+
+export { Avatar } from './components/Avatar'
+export type { AvatarProps } from './components/Avatar'
+
+export { Badge } from './components/Badge'
+export type { BadgeProps } from './components/Badge'
+
+export { BadgeContainer } from './components/BadgeContainer'
+export type { BadgeContainerProps } from './components/BadgeContainer'
+
+export {
+  BreadcrumbRoot,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis
+} from './components/Breadcrumb'
+export type {
+  BreadcrumbRootProps,
+  BreadcrumbLinkProps,
+  BreadcrumbEllipsisProps,
+  BreadcrumbEllipsisItem,
+  BreadcrumbContext
+} from './components/Breadcrumb'
+
+export { Button } from './components/Button'
+export type { ButtonProps } from './components/Button'
+
+export { Callout } from './components/Callout'
+export type { CalloutProps, CalloutVariant } from './components/Callout'
+
+export { Card, CardHeader, CardContent, CardFooter, CardImage } from './components/Card'
+export type {
+  CardProps,
+  CardVariant,
+  CardPadding,
+  CardHeaderProps,
+  CardContentProps,
+  CardFooterProps,
+  CardImageProps,
+  CardImagePosition,
+  CardImageAspectRatio,
+  CardImageFit
+} from './components/Card'
+
+export { Checkbox } from './components/Checkbox'
+export type { CheckboxProps } from './components/Checkbox'
+
+export { ColorPicker, ColorArea, ColorSlider } from './components/ColorPicker'
+export type { ColorPickerProps, ColorFormat, ColorAreaProps, ColorSliderProps } from './components/ColorPicker'
+
+export {
+  BaseChart,
+  LineChart,
+  BarChart,
+  DonutChart,
+  useChartTheme
+} from './components/Chart'
+export type {
+  BaseChartProps,
+  ChartDataset,
+  TooltipData,
+  LegendItem,
+  LineChartProps,
+  LineChartSeries,
+  BarChartProps,
+  BarChartSeries,
+  DonutChartProps,
+  DonutChartSegment,
+  ChartTheme,
+  ChartThemeColors
+} from './components/Chart'
+
+export { DataTable } from './components/DataTable'
+export type {
+  DataTableProps,
+  DataTableColumn,
+  SortState,
+  SortDirection,
+  ColumnAlign,
+  PaginationConfig,
+  FilterFn
+} from './components/DataTable'
+
+export { Pagination } from './components/Pagination'
+export type { PaginationProps } from './components/Pagination'
+export { generatePageRange, type PageItem } from './components/Pagination'
+
+export { DatePicker } from './components/DatePicker'
+export type { DatePickerProps, ViewMode as DatePickerViewMode } from './components/DatePicker'
+
+export { Drawer } from './components/Drawer'
+export type {
+  DrawerProps,
+  DrawerPlacement,
+  DrawerVariant,
+  DrawerSize
+} from './components/Drawer'
+
+export {
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownSub,
+  DropdownSubTrigger,
+  DropdownSubContent
+} from './components/Dropdown'
+export type {
+  DropdownProps,
+  DropdownPlacement,
+  DropdownContext,
+  DropdownItemProps,
+  DropdownSubContext,
+  DropdownSubTriggerProps
+} from './components/Dropdown'
+
+export { EmptyState } from './components/EmptyState'
+export type { EmptyStateProps, EmptyStateVariant } from './components/EmptyState'
+
+export { Combobox } from './components/Combobox'
+export type { ComboboxProps, ComboboxOption } from './components/Combobox'
+
+export { ChoiceChip } from './components/ChoiceChip'
+export type { ChoiceChipProps } from './components/ChoiceChip'
+
+export { ChoiceChipGroup } from './components/ChoiceChipGroup'
+export type { ChoiceChipGroupProps } from './components/ChoiceChipGroup'
+
+export { FileUpload } from './components/FileUpload'
+export type { FileUploadProps, UploadFile } from './components/FileUpload'
+
+export { Heading } from './components/Heading'
+export type { HeadingProps } from './components/Heading'
+
+export { Icon } from './components/Icon'
+export type { IconProps, IconInput } from './components/Icon'
+
+export { Input } from './components/Input'
+export type { InputProps } from './components/Input'
+
+export { Modal } from './components/Modal'
+export type { ModalProps, ModalSize } from './components/Modal'
+
+export { Popover } from './components/Popover'
+export type { PopoverProps, PopoverPlacement } from './components/Popover'
+
+export { Progress } from './components/Progress'
+export type {
+  ProgressProps,
+  ProgressVariant,
+  ProgressSize,
+  ProgressColor
+} from './components/Progress'
+
+export { Radio } from './components/Radio'
+export type { RadioProps } from './components/Radio'
+
+export { Rating } from './components/Rating'
+export type { RatingProps } from './components/Rating'
+
+export { SegmentedControl } from './components/SegmentedControl'
+export type { SegmentedControlProps, SegmentedOption } from './components/SegmentedControl'
+
+export { Select } from './components/Select'
+export type { SelectProps, SelectOption } from './components/Select'
+
+export { Slider } from './components/Slider'
+export type { SliderProps } from './components/Slider'
+
+export {
+  SidebarLayout,
+  SidebarRoot,
+  SidebarItem,
+  SidebarGroup
+} from './components/Sidebar'
+export type {
+  SidebarLayoutProps,
+  SidebarRootProps,
+  SidebarItemProps,
+  SidebarGroupProps,
+  SidebarContext,
+  SidebarGroupContext
+} from './components/Sidebar'
+export { SidebarKey, SidebarGroupKey } from './components/Sidebar'
+
+export { Skeleton } from './components/Skeleton'
+export type { SkeletonProps, SkeletonVariant } from './components/Skeleton'
+
+export { SpireProvider, spireConfigKey } from './components/SpireProvider'
+export type {
+  Theme,
+  Mood,
+  Depth,
+  Motion,
+  Texture,
+  SpireConfig,
+  SpireProviderProps
+} from './components/SpireProvider'
+
+export { Spinner } from './components/Spinner'
+export type { SpinnerProps } from './components/Spinner'
+
+export {
+  StepperRoot,
+  StepperItem,
+  StepperTrigger,
+  StepperContent,
+  StepperSeparator
+} from './components/Stepper'
+export type {
+  StepperRootProps,
+  StepperItemProps,
+  StepperTriggerProps,
+  StepperContext,
+  StepperItemContext,
+  StepState,
+  StepperOrientation
+} from './components/Stepper'
+export { StepperKey, StepperItemKey } from './components/Stepper'
+
+export { Switch } from './components/Switch'
+export type { SwitchProps } from './components/Switch'
+
+export { Tabs } from './components/Tabs'
+export type { TabsProps, TabItem } from './components/Tabs'
+
+export { Textarea } from './components/Textarea'
+export type { TextareaProps } from './components/Textarea'
+
+export { Text } from './components/Text'
+export type { TextProps } from './components/Text'
+
+export { Timeline, TimelineItem } from './components/Timeline'
+export type {
+  TimelineProps,
+  TimelineItemProps,
+  TimelineContext,
+  TimelineAlign,
+  TimelineLineStyle,
+  TimelineDotColor
+} from './components/Timeline'
+export { TimelineKey } from './components/Timeline'
+
+export { TimePicker } from './components/TimePicker'
+export type { TimePickerProps } from './components/TimePicker'
+
+export { ToggleButton } from './components/ToggleButton'
+export type { ToggleButtonProps } from './components/ToggleButton'
+
+export { ToggleGroup } from './components/ToggleGroup'
+export type { ToggleGroupProps } from './components/ToggleGroup'
+
+export { ToastProvider, ToastItem, useToast } from './components/Toast'
+export type { ToastProviderProps, ToastItemProps, Toast, ToastOptions, ToastVariant, ToastAction } from './components/Toast'
+
+export { Tooltip } from './components/Tooltip'
+export type { TooltipProps } from './components/Tooltip'
+
+export { TreeView, TreeViewItem } from './components/TreeView'
+export type {
+  TreeViewProps,
+  TreeViewItemProps,
+  TreeNode,
+  TreeViewContext,
+  TreeViewItemContext
+} from './components/TreeView'
+export { TreeViewKey, TreeViewItemKey } from './components/TreeView'
+
+export { Container, Stack, Grid, GridItem } from './components/Layout'
+export type {
+  ContainerProps,
+  StackProps,
+  SpacingToken,
+  GridProps,
+  ColumnCount,
+  ResponsiveColumns,
+  GridItemProps,
+  SpanCount,
+  ResponsiveSpan
+} from './components/Layout'
+
+// Composables
+export { useClickOutside } from './composables'
+export { useClipboard } from './composables'
+export { useEventListener } from './composables'
+export { useFocusTrap } from './composables'
+export { useHoverReveal, type UseHoverRevealOptions } from './composables'
+export { useId } from './composables'
+export { useMagnetic, type UseMagneticOptions, type UseMagneticReturn } from './composables'
+export { useRelativePosition, type Placement } from './composables'
+export { useRipple, type UseRippleOptions } from './composables'
+export { useScrollLock } from './composables'
+export { useStagger, getStaggerStyle, type UseStaggerOptions, type UseStaggerReturn } from './composables'
+
+// Utilities
+export { getInitials, getNestedValue } from './utils'
+export {
+  generateCalendarGrid,
+  getDaysInMonth,
+  formatDate,
+  parseDate,
+  isSameDate,
+  isDateBefore,
+  isDateAfter,
+  getMonthName,
+  getMonthNamesShort,
+  getWeekdayNames,
+  isDateInRange,
+  isDateBetween,
+  getRangeClass,
+  normalizeRange,
+  generateYearGrid,
+  getPresetRange
+} from './utils'
+export type { CalendarDay, RangeState, RangeClass } from './utils'
+export {
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  hexToHsv,
+  hsvToHex,
+  oklchToRgb,
+  rgbToOklch,
+  hsvToOklch,
+  oklchToHsv,
+  formatRgb,
+  formatOklch,
+  parseColorString,
+  formatColor
+} from './utils/color'
+export type { RGB, HSV, OKLCH, RGBA, HSVA } from './utils/color'
+export {
+  parseTime,
+  formatTime,
+  generateRange,
+  to12Hour,
+  to24Hour,
+  isValidTimeString
+} from './utils/time'
+export type { ParsedTime, TimeFormat } from './utils/time'
+
+// Configuration
+export { configureIcons, resetIcons, type IconMap } from './config/icons'