@sabrenski/spire-ui 0.0.1

package/src/components/Badge/Badge.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info'
+
+export interface BadgeProps {
+  /** Color variant */
+  variant?: BadgeVariant
+  /** Render as dot indicator instead of pill */
+  dot?: boolean
+  /** Add pulse animation (dot mode only) */
+  pulse?: boolean
+  /** Numeric value for count badges */
+  value?: number
+  /** Max value before showing "+" (default: 99) */
+  max?: number
+  /** Accessible label (required for numeric badges) */
+  label?: string
+}
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  variant: 'default',
+  max: 99
+})
+
+const slots = useSlots()
+
+const isDot = computed(() => props.dot || (!slots.default && props.value === undefined))
+
+const displayText = computed(() => {
+  if (props.value === undefined) return null
+  return props.value > props.max ? `${props.max}+` : String(props.value)
+})
+
+const ariaLabel = computed(() => {
+  if (props.label) return props.label
+  if (props.value !== undefined) return String(props.value)
+  return undefined
+})
+
+const classes = computed(() => [
+  'ui-badge',
+  `ui-badge--${props.variant}`,
+  {
+    'ui-badge--dot': isDot.value,
+    'ui-badge--pulse': props.pulse && isDot.value
+  }
+])
+</script>
+
+<template>
+  <span :class="classes" :aria-label="ariaLabel" role="status">
+    <template v-if="!isDot">
+      <slot>{{ displayText }}</slot>
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+  border-radius: 9999px;
+  padding: 0.25em 0.625em;
+  border: 1px solid transparent;
+}
+
+.ui-badge--dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border: none;
+}
+
+.ui-badge--pulse {
+  animation: ui-badge-pulse 2s ease-in-out infinite;
+}
+
+@keyframes ui-badge-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  50% {
+    box-shadow: 0 0 0 4px currentColor;
+    opacity: 0.6;
+  }
+}
+
+.ui-badge--default {
+  background-color: var(--badge-default-bg);
+  color: var(--badge-default-text);
+  border-color: var(--badge-default-border);
+}
+
+.ui-badge--success {
+  background-color: var(--badge-success-bg);
+  color: var(--badge-success-text);
+  border-color: var(--badge-success-border);
+}
+
+.ui-badge--warning {
+  background-color: var(--badge-warning-bg);
+  color: var(--badge-warning-text);
+  border-color: var(--badge-warning-border);
+}
+
+.ui-badge--danger {
+  background-color: var(--badge-danger-bg);
+  color: var(--badge-danger-text);
+  border-color: var(--badge-danger-border);
+}
+
+.ui-badge--info {
+  background-color: var(--badge-info-bg);
+  color: var(--badge-info-text);
+  border-color: var(--badge-info-border);
+}
+
+.ui-badge--dot.ui-badge--default { background-color: var(--badge-default-text); }
+.ui-badge--dot.ui-badge--success { background-color: var(--badge-success-text); }
+.ui-badge--dot.ui-badge--warning { background-color: var(--badge-warning-text); }
+.ui-badge--dot.ui-badge--danger { background-color: var(--badge-danger-text); }
+.ui-badge--dot.ui-badge--info { background-color: var(--badge-info-text); }
+</style>

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue'
+export type { BadgeProps } from './Badge.vue'

package/src/components/BadgeContainer/BadgeContainer.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BadgeContainer from './BadgeContainer.vue'
+
+describe('BadgeContainer', () => {
+  describe('Rendering', () => {
+    it('renders default slot content', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: { default: '<button>Click me</button>' }
+      })
+      expect(wrapper.find('button').exists()).toBe(true)
+      expect(wrapper.find('button').text()).toBe('Click me')
+    })
+
+    it('renders badge slot when provided', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: {
+          default: '<button>Inbox</button>',
+          badge: '<span class="test-badge">3</span>'
+        }
+      })
+      expect(wrapper.find('.test-badge').exists()).toBe(true)
+    })
+
+    it('does not render badge wrapper when no badge slot', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: { default: '<button>Click</button>' }
+      })
+      expect(wrapper.find('.ui-badge-container__badge').exists()).toBe(false)
+    })
+  })
+
+  describe('Positioning', () => {
+    it('defaults to top-right position', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      const badge = wrapper.find('.ui-badge-container__badge')
+      expect(badge.attributes('style')).toContain('top: 0')
+      expect(badge.attributes('style')).toContain('right: 0')
+    })
+
+    it('applies top-left position', () => {
+      const wrapper = mount(BadgeContainer, {
+        props: { position: 'top-left' },
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      const badge = wrapper.find('.ui-badge-container__badge')
+      expect(badge.attributes('style')).toContain('top: 0')
+      expect(badge.attributes('style')).toContain('left: 0')
+    })
+
+    it('applies bottom-right position', () => {
+      const wrapper = mount(BadgeContainer, {
+        props: { position: 'bottom-right' },
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      const badge = wrapper.find('.ui-badge-container__badge')
+      expect(badge.attributes('style')).toContain('bottom: 0')
+      expect(badge.attributes('style')).toContain('right: 0')
+    })
+
+    it('applies bottom-left position', () => {
+      const wrapper = mount(BadgeContainer, {
+        props: { position: 'bottom-left' },
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      const badge = wrapper.find('.ui-badge-container__badge')
+      expect(badge.attributes('style')).toContain('bottom: 0')
+      expect(badge.attributes('style')).toContain('left: 0')
+    })
+  })
+
+  describe('Offset adjustments', () => {
+    it('applies custom offsetX', () => {
+      const wrapper = mount(BadgeContainer, {
+        props: { offsetX: '4px' },
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      const badge = wrapper.find('.ui-badge-container__badge')
+      expect(badge.attributes('style')).toContain('4px')
+    })
+
+    it('applies custom offsetY', () => {
+      const wrapper = mount(BadgeContainer, {
+        props: { offsetY: '-2px' },
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      const badge = wrapper.find('.ui-badge-container__badge')
+      expect(badge.attributes('style')).toContain('-2px')
+    })
+  })
+
+  describe('Cutout effect', () => {
+    it('applies cutout class when cutout prop is true', () => {
+      const wrapper = mount(BadgeContainer, {
+        props: { cutout: true },
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      expect(wrapper.find('.ui-badge-container__badge--cutout').exists()).toBe(true)
+    })
+
+    it('does not apply cutout class by default', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: {
+          default: '<button>Test</button>',
+          badge: '<span>1</span>'
+        }
+      })
+      expect(wrapper.find('.ui-badge-container__badge--cutout').exists()).toBe(false)
+    })
+  })
+
+  describe('Structure', () => {
+    it('has ui-badge-container class on root', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: { default: '<button>Test</button>' }
+      })
+      expect(wrapper.classes()).toContain('ui-badge-container')
+    })
+
+    it('uses inline-flex display for proper alignment', () => {
+      const wrapper = mount(BadgeContainer, {
+        slots: { default: '<button>Test</button>' }
+      })
+      expect(wrapper.classes()).toContain('ui-badge-container')
+    })
+  })
+})

package/src/components/BadgeContainer/BadgeContainer.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+export interface BadgeContainerProps {
+  /** Badge position relative to content */
+  position?: BadgePosition
+  /** Horizontal offset adjustment (CSS value) */
+  offsetX?: string
+  /** Vertical offset adjustment (CSS value) */
+  offsetY?: string
+  /** Show cutout border matching background */
+  cutout?: boolean
+}
+
+const props = withDefaults(defineProps<BadgeContainerProps>(), {
+  position: 'top-right',
+  offsetX: '0px',
+  offsetY: '0px',
+  cutout: false
+})
+
+const badgeStyle = computed(() => {
+  const positions: Record<BadgePosition, Record<string, string>> = {
+    'top-right': {
+      top: '0',
+      right: '0',
+      transform: `translate(calc(50% + ${props.offsetX}), calc(-50% + ${props.offsetY}))`
+    },
+    'top-left': {
+      top: '0',
+      left: '0',
+      transform: `translate(calc(-50% + ${props.offsetX}), calc(-50% + ${props.offsetY}))`
+    },
+    'bottom-right': {
+      bottom: '0',
+      right: '0',
+      transform: `translate(calc(50% + ${props.offsetX}), calc(50% + ${props.offsetY}))`
+    },
+    'bottom-left': {
+      bottom: '0',
+      left: '0',
+      transform: `translate(calc(-50% + ${props.offsetX}), calc(50% + ${props.offsetY}))`
+    }
+  }
+  return positions[props.position]
+})
+
+const badgeClasses = computed(() => [
+  'ui-badge-container__badge',
+  { 'ui-badge-container__badge--cutout': props.cutout }
+])
+</script>
+
+<template>
+  <span class="ui-badge-container">
+    <!-- Content (Button, Avatar, etc.) -->
+    <slot />
+
+    <!-- Badge overlay -->
+    <span v-if="$slots.badge" :class="badgeClasses" :style="badgeStyle">
+      <slot name="badge" />
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.ui-badge-container {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+
+.ui-badge-container__badge {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  line-height: 0;
+}
+
+/* Cutout effect - creates visual separation from content */
+.ui-badge-container__badge--cutout :deep(.ui-badge) {
+  box-shadow: 0 0 0 2px var(--bg-primary);
+}
+
+.ui-badge-container__badge--cutout :deep(.ui-badge--dot) {
+  box-shadow: 0 0 0 2px var(--bg-primary);
+}
+</style>

package/src/components/BadgeContainer/index.ts

@@ -0,0 +1,2 @@
+export { default as BadgeContainer } from './BadgeContainer.vue'
+export type { BadgeContainerProps } from './BadgeContainer.vue'