@sabrenski/spire-ui 0.0.1

package/src/components/Layout/GridItem.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type SpanCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full'
+
+export interface ResponsiveSpan {
+  default?: SpanCount
+  sm?: SpanCount
+  md?: SpanCount
+  lg?: SpanCount
+  xl?: SpanCount
+}
+
+export interface GridItemProps {
+  /** Number of columns to span (or responsive object) */
+  span?: SpanCount | ResponsiveSpan
+  /** Grid column start */
+  start?: number
+  /** Grid column end */
+  end?: number
+  /** Grid row span */
+  rowSpan?: number
+  /** HTML tag to render */
+  as?: string
+}
+
+const props = withDefaults(defineProps<GridItemProps>(), {
+  span: 1,
+  as: 'div'
+})
+
+const isResponsive = computed(() => typeof props.span === 'object')
+
+const itemClasses = computed(() => {
+  const classes = ['ui-grid-item']
+
+  if (isResponsive.value) {
+    const span = props.span as ResponsiveSpan
+    if (span.default) classes.push(`ui-grid-item--span-${span.default}`)
+    if (span.sm) classes.push(`ui-grid-item--span-sm-${span.sm}`)
+    if (span.md) classes.push(`ui-grid-item--span-md-${span.md}`)
+    if (span.lg) classes.push(`ui-grid-item--span-lg-${span.lg}`)
+    if (span.xl) classes.push(`ui-grid-item--span-xl-${span.xl}`)
+  } else {
+    classes.push(`ui-grid-item--span-${props.span}`)
+  }
+
+  return classes
+})
+
+const itemStyle = computed(() => {
+  const style: Record<string, string | number> = {}
+
+  if (props.start !== undefined) {
+    style['grid-column-start'] = props.start
+  }
+
+  if (props.end !== undefined) {
+    style['grid-column-end'] = props.end
+  }
+
+  if (props.rowSpan !== undefined) {
+    style['grid-row'] = `span ${props.rowSpan} / span ${props.rowSpan}`
+  }
+
+  return style
+})
+</script>
+
+<template>
+  <component :is="as" :class="itemClasses" :style="itemStyle">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.ui-grid-item--span-1 { grid-column: span 1 / span 1; }
+.ui-grid-item--span-2 { grid-column: span 2 / span 2; }
+.ui-grid-item--span-3 { grid-column: span 3 / span 3; }
+.ui-grid-item--span-4 { grid-column: span 4 / span 4; }
+.ui-grid-item--span-5 { grid-column: span 5 / span 5; }
+.ui-grid-item--span-6 { grid-column: span 6 / span 6; }
+.ui-grid-item--span-7 { grid-column: span 7 / span 7; }
+.ui-grid-item--span-8 { grid-column: span 8 / span 8; }
+.ui-grid-item--span-9 { grid-column: span 9 / span 9; }
+.ui-grid-item--span-10 { grid-column: span 10 / span 10; }
+.ui-grid-item--span-11 { grid-column: span 11 / span 11; }
+.ui-grid-item--span-12 { grid-column: span 12 / span 12; }
+.ui-grid-item--span-full { grid-column: 1 / -1; }
+
+@media (min-width: 640px) {
+  .ui-grid-item--span-sm-1 { grid-column: span 1 / span 1; }
+  .ui-grid-item--span-sm-2 { grid-column: span 2 / span 2; }
+  .ui-grid-item--span-sm-3 { grid-column: span 3 / span 3; }
+  .ui-grid-item--span-sm-4 { grid-column: span 4 / span 4; }
+  .ui-grid-item--span-sm-5 { grid-column: span 5 / span 5; }
+  .ui-grid-item--span-sm-6 { grid-column: span 6 / span 6; }
+  .ui-grid-item--span-sm-7 { grid-column: span 7 / span 7; }
+  .ui-grid-item--span-sm-8 { grid-column: span 8 / span 8; }
+  .ui-grid-item--span-sm-9 { grid-column: span 9 / span 9; }
+  .ui-grid-item--span-sm-10 { grid-column: span 10 / span 10; }
+  .ui-grid-item--span-sm-11 { grid-column: span 11 / span 11; }
+  .ui-grid-item--span-sm-12 { grid-column: span 12 / span 12; }
+  .ui-grid-item--span-sm-full { grid-column: 1 / -1; }
+}
+
+@media (min-width: 768px) {
+  .ui-grid-item--span-md-1 { grid-column: span 1 / span 1; }
+  .ui-grid-item--span-md-2 { grid-column: span 2 / span 2; }
+  .ui-grid-item--span-md-3 { grid-column: span 3 / span 3; }
+  .ui-grid-item--span-md-4 { grid-column: span 4 / span 4; }
+  .ui-grid-item--span-md-5 { grid-column: span 5 / span 5; }
+  .ui-grid-item--span-md-6 { grid-column: span 6 / span 6; }
+  .ui-grid-item--span-md-7 { grid-column: span 7 / span 7; }
+  .ui-grid-item--span-md-8 { grid-column: span 8 / span 8; }
+  .ui-grid-item--span-md-9 { grid-column: span 9 / span 9; }
+  .ui-grid-item--span-md-10 { grid-column: span 10 / span 10; }
+  .ui-grid-item--span-md-11 { grid-column: span 11 / span 11; }
+  .ui-grid-item--span-md-12 { grid-column: span 12 / span 12; }
+  .ui-grid-item--span-md-full { grid-column: 1 / -1; }
+}
+
+@media (min-width: 1024px) {
+  .ui-grid-item--span-lg-1 { grid-column: span 1 / span 1; }
+  .ui-grid-item--span-lg-2 { grid-column: span 2 / span 2; }
+  .ui-grid-item--span-lg-3 { grid-column: span 3 / span 3; }
+  .ui-grid-item--span-lg-4 { grid-column: span 4 / span 4; }
+  .ui-grid-item--span-lg-5 { grid-column: span 5 / span 5; }
+  .ui-grid-item--span-lg-6 { grid-column: span 6 / span 6; }
+  .ui-grid-item--span-lg-7 { grid-column: span 7 / span 7; }
+  .ui-grid-item--span-lg-8 { grid-column: span 8 / span 8; }
+  .ui-grid-item--span-lg-9 { grid-column: span 9 / span 9; }
+  .ui-grid-item--span-lg-10 { grid-column: span 10 / span 10; }
+  .ui-grid-item--span-lg-11 { grid-column: span 11 / span 11; }
+  .ui-grid-item--span-lg-12 { grid-column: span 12 / span 12; }
+  .ui-grid-item--span-lg-full { grid-column: 1 / -1; }
+}
+
+@media (min-width: 1280px) {
+  .ui-grid-item--span-xl-1 { grid-column: span 1 / span 1; }
+  .ui-grid-item--span-xl-2 { grid-column: span 2 / span 2; }
+  .ui-grid-item--span-xl-3 { grid-column: span 3 / span 3; }
+  .ui-grid-item--span-xl-4 { grid-column: span 4 / span 4; }
+  .ui-grid-item--span-xl-5 { grid-column: span 5 / span 5; }
+  .ui-grid-item--span-xl-6 { grid-column: span 6 / span 6; }
+  .ui-grid-item--span-xl-7 { grid-column: span 7 / span 7; }
+  .ui-grid-item--span-xl-8 { grid-column: span 8 / span 8; }
+  .ui-grid-item--span-xl-9 { grid-column: span 9 / span 9; }
+  .ui-grid-item--span-xl-10 { grid-column: span 10 / span 10; }
+  .ui-grid-item--span-xl-11 { grid-column: span 11 / span 11; }
+  .ui-grid-item--span-xl-12 { grid-column: span 12 / span 12; }
+  .ui-grid-item--span-xl-full { grid-column: 1 / -1; }
+}
+</style>

package/src/components/Layout/Layout.test.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Container from './Container.vue'
+import Stack from './Stack.vue'
+import Grid from './Grid.vue'
+import GridItem from './GridItem.vue'
+
+describe('Container', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(Container, {
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.text()).toBe('Content')
+    expect(wrapper.classes()).toContain('ui-container')
+    expect(wrapper.classes()).toContain('ui-container--centered')
+    expect(wrapper.classes()).not.toContain('ui-container--fluid')
+  })
+
+  it('renders fluid container', () => {
+    const wrapper = mount(Container, {
+      props: { fluid: true },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.classes()).toContain('ui-container--fluid')
+  })
+
+  it('renders without centering', () => {
+    const wrapper = mount(Container, {
+      props: { centered: false },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.classes()).not.toContain('ui-container--centered')
+  })
+
+  it('renders as custom element', () => {
+    const wrapper = mount(Container, {
+      props: { as: 'section' },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.element.tagName).toBe('SECTION')
+  })
+})
+
+describe('Stack', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(Stack, {
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-stack')
+    expect(wrapper.classes()).toContain('ui-stack--column')
+    expect(wrapper.classes()).toContain('ui-stack--align-stretch')
+    expect(wrapper.classes()).toContain('ui-stack--justify-start')
+  })
+
+  it('renders with row direction', () => {
+    const wrapper = mount(Stack, {
+      props: { direction: 'row' },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-stack--row')
+  })
+
+  it('applies gap as CSS variable', () => {
+    const wrapper = mount(Stack, {
+      props: { gap: 4 },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.attributes('style')).toContain('--stack-gap: var(--space-4)')
+  })
+
+  it('renders with alignment', () => {
+    const wrapper = mount(Stack, {
+      props: { align: 'center', justify: 'between' },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-stack--align-center')
+    expect(wrapper.classes()).toContain('ui-stack--justify-between')
+  })
+
+  it('renders inline', () => {
+    const wrapper = mount(Stack, {
+      props: { inline: true },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-stack--inline')
+  })
+
+  it('renders with wrap', () => {
+    const wrapper = mount(Stack, {
+      props: { wrap: true },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-stack--wrap')
+  })
+})
+
+describe('Grid', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(Grid, {
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid')
+    expect(wrapper.classes()).toContain('ui-grid--cols-1')
+  })
+
+  it('renders with column count', () => {
+    const wrapper = mount(Grid, {
+      props: { columns: 3 },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid--cols-3')
+  })
+
+  it('renders with responsive columns', () => {
+    const wrapper = mount(Grid, {
+      props: { columns: { default: 1, md: 2, lg: 4 } },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid--cols-1')
+    expect(wrapper.classes()).toContain('ui-grid--cols-md-2')
+    expect(wrapper.classes()).toContain('ui-grid--cols-lg-4')
+  })
+
+  it('applies gap as CSS variable', () => {
+    const wrapper = mount(Grid, {
+      props: { gap: 6 },
+      slots: { default: '<div>Item</div>' }
+    })
+    expect(wrapper.attributes('style')).toContain('--grid-gap: var(--space-6)')
+  })
+
+  it('applies separate gapX and gapY', () => {
+    const wrapper = mount(Grid, {
+      props: { gap: 4, gapX: 2, gapY: 6 },
+      slots: { default: '<div>Item</div>' }
+    })
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--grid-gap-x: var(--space-2)')
+    expect(style).toContain('--grid-gap-y: var(--space-6)')
+  })
+})
+
+describe('GridItem', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(GridItem, {
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid-item--span-1')
+  })
+
+  it('renders with span', () => {
+    const wrapper = mount(GridItem, {
+      props: { span: 2 },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid-item--span-2')
+  })
+
+  it('renders with full span', () => {
+    const wrapper = mount(GridItem, {
+      props: { span: 'full' },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid-item--span-full')
+  })
+
+  it('renders with responsive span', () => {
+    const wrapper = mount(GridItem, {
+      props: { span: { default: 1, md: 2, lg: 4 } },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.classes()).toContain('ui-grid-item--span-1')
+    expect(wrapper.classes()).toContain('ui-grid-item--span-md-2')
+    expect(wrapper.classes()).toContain('ui-grid-item--span-lg-4')
+  })
+
+  it('applies start and end', () => {
+    const wrapper = mount(GridItem, {
+      props: { start: 2, end: 4 },
+      slots: { default: 'Content' }
+    })
+    const style = wrapper.attributes('style')
+    expect(style).toContain('grid-column-start: 2')
+    expect(style).toContain('grid-column-end: 4')
+  })
+
+  it('applies rowSpan', () => {
+    const wrapper = mount(GridItem, {
+      props: { rowSpan: 2 },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.attributes('style')).toContain('grid-row: span 2')
+  })
+
+  it('renders as custom element', () => {
+    const wrapper = mount(GridItem, {
+      props: { as: 'section' },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.element.tagName).toBe('SECTION')
+  })
+})

package/src/components/Layout/Stack.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type SpacingToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
+
+export interface StackProps {
+  /** Flex direction */
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
+  /** Gap using spacing tokens (maps to var(--space-X)) */
+  gap?: SpacingToken
+  /** Align items */
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+  /** Justify content */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+  /** Enable flex wrap */
+  wrap?: boolean
+  /** Use inline-flex instead of flex */
+  inline?: boolean
+  /** HTML tag to render */
+  as?: string
+}
+
+const props = withDefaults(defineProps<StackProps>(), {
+  direction: 'column',
+  gap: 0,
+  align: 'stretch',
+  justify: 'start',
+  wrap: false,
+  inline: false,
+  as: 'div'
+})
+
+const stackClasses = computed(() => [
+  'ui-stack',
+  `ui-stack--${props.direction}`,
+  `ui-stack--align-${props.align}`,
+  `ui-stack--justify-${props.justify}`,
+  {
+    'ui-stack--wrap': props.wrap,
+    'ui-stack--inline': props.inline
+  }
+])
+
+const stackStyle = computed(() => ({
+  '--stack-gap': `var(--space-${props.gap})`
+}))
+</script>
+
+<template>
+  <component :is="as" :class="stackClasses" :style="stackStyle">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.ui-stack {
+  display: flex;
+  gap: var(--stack-gap);
+}
+
+.ui-stack--inline {
+  display: inline-flex;
+}
+
+.ui-stack--row {
+  flex-direction: row;
+}
+
+.ui-stack--column {
+  flex-direction: column;
+}
+
+.ui-stack--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.ui-stack--column-reverse {
+  flex-direction: column-reverse;
+}
+
+.ui-stack--align-start {
+  align-items: flex-start;
+}
+
+.ui-stack--align-center {
+  align-items: center;
+}
+
+.ui-stack--align-end {
+  align-items: flex-end;
+}
+
+.ui-stack--align-stretch {
+  align-items: stretch;
+}
+
+.ui-stack--align-baseline {
+  align-items: baseline;
+}
+
+.ui-stack--justify-start {
+  justify-content: flex-start;
+}
+
+.ui-stack--justify-center {
+  justify-content: center;
+}
+
+.ui-stack--justify-end {
+  justify-content: flex-end;
+}
+
+.ui-stack--justify-between {
+  justify-content: space-between;
+}
+
+.ui-stack--justify-around {
+  justify-content: space-around;
+}
+
+.ui-stack--justify-evenly {
+  justify-content: space-evenly;
+}
+
+.ui-stack--wrap {
+  flex-wrap: wrap;
+}
+</style>

package/src/components/Layout/index.ts

@@ -0,0 +1,9 @@
+export { default as Container } from './Container.vue'
+export { default as Stack } from './Stack.vue'
+export { default as Grid } from './Grid.vue'
+export { default as GridItem } from './GridItem.vue'
+
+export type { ContainerProps } from './Container.vue'
+export type { StackProps, SpacingToken } from './Stack.vue'
+export type { GridProps, ColumnCount, ResponsiveColumns } from './Grid.vue'
+export type { GridItemProps, SpanCount, ResponsiveSpan } from './GridItem.vue'

package/src/components/Layout/keys.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export interface GridContext {
+  gap: Ref<number>
+}
+
+export const GridKey: InjectionKey<GridContext> = Symbol('Grid')