@sabrenski/spire-ui 0.0.1

package/src/components/Card/Card.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { provide, ref, toRef, computed, type Component } from 'vue'
+
+export type CardVariant = 'elevated' | 'outline' | 'ghost'
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg'
+
+export interface CardProps {
+  /** Visual style variant */
+  variant?: CardVariant
+  /** Render as different element (article, section, aside, etc.) */
+  as?: string | Component
+  /** Makes the entire card clickable with overlay pattern */
+  interactive?: boolean
+  /** Horizontal layout - image on side instead of top */
+  horizontal?: boolean
+  /** Disabled state for interactive cards */
+  disabled?: boolean
+  /** Loading state - shows skeleton overlay */
+  loading?: boolean
+  /** Custom padding override */
+  padding?: CardPadding
+}
+
+const props = withDefaults(defineProps<CardProps>(), {
+  variant: 'elevated',
+  as: 'div',
+  interactive: false,
+  horizontal: false,
+  disabled: false,
+  loading: false,
+  padding: 'md'
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const hasHeader = ref(false)
+const hasTopImage = ref(false)
+
+function registerHeader() {
+  hasHeader.value = true
+}
+
+function registerTopImage() {
+  hasTopImage.value = true
+}
+
+provide('card', {
+  variant: toRef(props, 'variant'),
+  horizontal: toRef(props, 'horizontal'),
+  interactive: toRef(props, 'interactive'),
+  loading: toRef(props, 'loading'),
+  padding: toRef(props, 'padding'),
+  hasHeader,
+  hasTopImage,
+  registerHeader,
+  registerTopImage
+})
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled || props.loading) return
+  if (props.interactive) {
+    emit('click', event)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleClick(event as unknown as MouseEvent)
+  }
+}
+
+const isClickable = computed(() => props.interactive && !props.disabled && !props.loading)
+</script>
+
+<template>
+  <component
+    :is="as"
+    class="ui-card"
+    :class="[
+      `ui-card--${variant}`,
+      `ui-card--padding-${padding}`,
+      {
+        'ui-card--interactive': interactive,
+        'ui-card--horizontal': horizontal,
+        'ui-card--disabled': disabled,
+        'ui-card--loading': loading
+      }
+    ]"
+    :tabindex="isClickable ? 0 : undefined"
+    :role="isClickable ? 'button' : undefined"
+    :aria-disabled="disabled || undefined"
+    :aria-busy="loading || undefined"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <slot />
+    <div v-if="loading" class="ui-card__skeleton" aria-hidden="true" />
+  </component>
+</template>
+
+<style scoped>
+.ui-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--card-bg);
+  border-radius: var(--card-radius);
+  overflow: hidden;
+  font-family: var(--font-sans);
+}
+
+.ui-card--elevated {
+  border: 1px solid var(--card-border);
+  box-shadow: var(--card-shadow);
+}
+
+.ui-card--outline {
+  border: 1px solid var(--card-border);
+  box-shadow: none;
+}
+
+.ui-card--ghost {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+
+.ui-card--interactive {
+  cursor: pointer;
+  transition:
+    box-shadow var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-card--interactive::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-card--interactive:hover:not(.ui-card--disabled):not(.ui-card--loading)::after {
+  background-color: oklch(0 0 0 / calc(var(--depth-shadow-opacity, 0.1) * 0.3));
+}
+
+.ui-card--interactive:active:not(.ui-card--disabled):not(.ui-card--loading)::after {
+  background-color: oklch(0 0 0 / var(--depth-inset-opacity, 0.06));
+}
+
+.ui-card--interactive.ui-card--elevated:hover:not(.ui-card--disabled):not(.ui-card--loading) {
+  box-shadow: var(--card-shadow-hover);
+  border-color: var(--card-border-hover);
+}
+
+.ui-card--interactive > :deep(*) {
+  position: relative;
+  z-index: 1;
+}
+
+.ui-card--interactive:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-card--horizontal {
+  flex-direction: row;
+}
+
+.ui-card--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.ui-card--loading {
+  cursor: wait;
+}
+
+.ui-card__skeleton {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: linear-gradient(
+    90deg,
+    var(--card-bg) 25%,
+    var(--color-stone-100) 50%,
+    var(--card-bg) 75%
+  );
+  background-size: 200% 100%;
+  animation: card-skeleton-shimmer 1.5s infinite;
+  border-radius: inherit;
+}
+
+@keyframes card-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (max-width: 640px) {
+  .ui-card--horizontal {
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/Card/CardContent.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { inject, computed, type Ref } from 'vue'
+import type { CardPadding } from './Card.vue'
+
+export interface CardContentProps {
+  /** Remove default padding */
+  flush?: boolean
+}
+
+const props = withDefaults(defineProps<CardContentProps>(), {
+  flush: false
+})
+
+const cardContext = inject<{
+  hasHeader: { value: boolean }
+  hasTopImage: { value: boolean }
+  padding: Ref<CardPadding>
+} | null>('card', null)
+
+const removeTopPadding = computed(() => cardContext?.hasHeader?.value ?? false)
+const paddingSize = computed(() => cardContext?.padding?.value ?? 'md')
+</script>
+
+<template>
+  <div
+    class="ui-card__content"
+    :class="[
+      `ui-card__content--padding-${paddingSize}`,
+      {
+        'ui-card__content--flush': flush,
+        'ui-card__content--no-top-padding': removeTopPadding
+      }
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-card__content {
+  color: var(--card-text);
+  flex: 1;
+}
+
+.ui-card__content--padding-none { padding: 0; }
+.ui-card__content--padding-sm { padding: var(--space-2); }
+.ui-card__content--padding-md { padding: var(--space-3); }
+.ui-card__content--padding-lg { padding: var(--space-4); }
+
+.ui-card__content--flush {
+  padding: 0;
+}
+
+.ui-card__content--no-top-padding {
+  padding-top: 0;
+}
+</style>

package/src/components/Card/CardFooter.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { inject, computed, type Ref } from 'vue'
+import type { CardPadding } from './Card.vue'
+
+export interface CardFooterProps {
+  /** Content alignment */
+  align?: 'start' | 'center' | 'end' | 'between'
+  /** Remove separator border */
+  borderless?: boolean
+}
+
+const props = withDefaults(defineProps<CardFooterProps>(), {
+  align: 'end',
+  borderless: false
+})
+
+const cardContext = inject<{
+  padding: Ref<CardPadding>
+} | null>('card', null)
+
+const paddingSize = computed(() => cardContext?.padding?.value ?? 'md')
+</script>
+
+<template>
+  <div
+    class="ui-card__footer"
+    :class="[
+      `ui-card__footer--${align}`,
+      `ui-card__footer--padding-${paddingSize}`,
+      { 'ui-card__footer--borderless': borderless }
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  background: var(--card-footer-bg);
+  border-top: 1px solid var(--card-footer-border);
+  margin-top: auto;
+}
+
+.ui-card__footer--padding-none { padding: 0; }
+.ui-card__footer--padding-sm { padding: var(--space-2); }
+.ui-card__footer--padding-md { padding: var(--space-3); }
+.ui-card__footer--padding-lg { padding: var(--space-4); }
+
+.ui-card__footer--start {
+  justify-content: flex-start;
+}
+
+.ui-card__footer--center {
+  justify-content: center;
+}
+
+.ui-card__footer--end {
+  justify-content: flex-end;
+}
+
+.ui-card__footer--between {
+  justify-content: space-between;
+}
+
+.ui-card__footer--borderless {
+  border-top: none;
+  background: transparent;
+}
+</style>

package/src/components/Card/CardHeader.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { inject, onMounted, useSlots, computed, type Ref } from 'vue'
+import type { CardPadding } from './Card.vue'
+
+export interface CardHeaderProps {
+  /** Title text (alternative to slot) */
+  title?: string
+  /** Subtitle text (alternative to slot) */
+  subtitle?: string
+  /** Aligns header content */
+  align?: 'start' | 'center'
+}
+
+const props = withDefaults(defineProps<CardHeaderProps>(), {
+  align: 'start'
+})
+
+const slots = useSlots()
+
+const cardContext = inject<{
+  registerHeader: () => void
+  padding: Ref<CardPadding>
+} | null>('card', null)
+
+onMounted(() => {
+  cardContext?.registerHeader()
+})
+
+const hasActions = !!slots.actions
+const paddingSize = computed(() => cardContext?.padding?.value ?? 'md')
+</script>
+
+<template>
+  <div
+    class="ui-card__header"
+    :class="[
+      `ui-card__header--${align}`,
+      `ui-card__header--padding-${paddingSize}`
+    ]"
+  >
+    <div class="ui-card__header-content">
+      <slot name="title">
+        <h3 v-if="title" class="ui-card__title">{{ title }}</h3>
+      </slot>
+      <slot name="subtitle">
+        <p v-if="subtitle" class="ui-card__subtitle">{{ subtitle }}</p>
+      </slot>
+      <slot />
+    </div>
+    <div v-if="$slots.actions" class="ui-card__header-actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.ui-card__header--padding-none { padding: 0; }
+.ui-card__header--padding-sm { padding: var(--space-2); }
+.ui-card__header--padding-md { padding: var(--space-3); }
+.ui-card__header--padding-lg { padding: var(--space-4); }
+
+.ui-card__header--start {
+  text-align: start;
+}
+
+.ui-card__header--center {
+  text-align: center;
+  justify-content: center;
+}
+
+.ui-card__header--center .ui-card__header-content {
+  align-items: center;
+}
+
+.ui-card__header-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  flex: 1;
+}
+
+.ui-card__header-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ui-card__title {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-tight);
+  color: var(--card-title);
+}
+
+.ui-card__subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: var(--card-subtitle);
+}
+</style>

package/src/components/Card/CardImage.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { inject, onMounted, computed } from 'vue'
+
+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 {
+  /** Image source URL */
+  src: string
+  /** Alt text for accessibility */
+  alt: string
+  /** Aspect ratio constraint */
+  aspectRatio?: CardImageAspectRatio
+  /** Image position within card */
+  position?: CardImagePosition
+  /** Object-fit behavior */
+  fit?: CardImageFit
+  /** Loading attribute for native lazy loading */
+  loading?: 'eager' | 'lazy'
+}
+
+const props = withDefaults(defineProps<CardImageProps>(), {
+  aspectRatio: 'auto',
+  position: 'top',
+  fit: 'cover',
+  loading: 'lazy'
+})
+
+const cardContext = inject<{
+  horizontal: { value: boolean }
+  registerTopImage: () => void
+} | null>('card', null)
+
+onMounted(() => {
+  if (props.position === 'top') {
+    cardContext?.registerTopImage()
+  }
+})
+
+const aspectRatioValue = computed(() => {
+  const ratioMap: Record<string, string> = {
+    '16:9': '16 / 9',
+    '4:3': '4 / 3',
+    '3:2': '3 / 2',
+    '1:1': '1 / 1',
+    'auto': 'auto'
+  }
+  return ratioMap[props.aspectRatio]
+})
+</script>
+
+<template>
+  <div
+    class="ui-card__image"
+    :class="[`ui-card__image--${position}`]"
+    :style="aspectRatio !== 'auto' ? { '--aspect-ratio': aspectRatioValue } : undefined"
+  >
+    <img
+      :src="src"
+      :alt="alt"
+      :loading="loading"
+      class="ui-card__image-img"
+      :class="[`ui-card__image-img--${fit}`]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ui-card__image {
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.ui-card__image--top,
+.ui-card__image--bottom {
+  width: 100%;
+  aspect-ratio: var(--aspect-ratio, auto);
+}
+
+.ui-card__image--left,
+.ui-card__image--right {
+  width: 40%;
+  min-width: 120px;
+  max-width: 300px;
+}
+
+.ui-card__image--background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.ui-card__image-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.ui-card__image-img--cover {
+  object-fit: cover;
+}
+
+.ui-card__image-img--contain {
+  object-fit: contain;
+}
+
+.ui-card__image-img--fill {
+  object-fit: fill;
+}
+
+.ui-card__image--bottom {
+  order: 999;
+}
+
+@media (max-width: 640px) {
+  .ui-card__image--left,
+  .ui-card__image--right {
+    width: 100%;
+    max-width: none;
+  }
+}
+</style>

package/src/components/Card/index.ts

@@ -0,0 +1,14 @@
+export { default as Card } from './Card.vue'
+export type { CardProps, CardVariant, CardPadding } from './Card.vue'
+
+export { default as CardHeader } from './CardHeader.vue'
+export type { CardHeaderProps } from './CardHeader.vue'
+
+export { default as CardContent } from './CardContent.vue'
+export type { CardContentProps } from './CardContent.vue'
+
+export { default as CardFooter } from './CardFooter.vue'
+export type { CardFooterProps } from './CardFooter.vue'
+
+export { default as CardImage } from './CardImage.vue'
+export type { CardImageProps, CardImagePosition, CardImageAspectRatio, CardImageFit } from './CardImage.vue'