@spavn/ui 0.0.1

package/src/lib/input-group/InputGroupAddon.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  position?: 'start' | 'end'
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex items-center px-3 text-sm text-muted-foreground',
+        position === 'start' && 'border-r',
+        position === 'end' && 'border-l',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/input-group/InputGroupInput.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  type?: string
+  disabled?: boolean
+  placeholder?: string
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <input
+    :type="type"
+    :class="
+      cn(
+        'flex h-full w-full bg-transparent px-3 py-2 text-sm',
+        'placeholder:text-muted-foreground',
+        'focus-visible:outline-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+      )
+    "
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  />
+</template>

package/src/lib/input-group/index.ts

@@ -0,0 +1,3 @@
+export { default as InputGroup } from './InputGroup.vue'
+export { default as InputGroupAddon } from './InputGroupAddon.vue'
+export { default as InputGroupInput } from './InputGroupInput.vue'

package/src/lib/input-otp/InputOTP.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { PinInputRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="$attrs"
+    :class="cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </PinInputRoot>
+</template>

package/src/lib/input-otp/InputOTPGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/input-otp/InputOTPSeparator.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div role="separator">
+    <span>-</span>
+  </div>
+</template>

package/src/lib/input-otp/InputOTPSlot.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { PinInputInput } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <PinInputInput
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md shadow-depth-1',
+        'focus:z-10 focus:ring-2 focus:ring-ring focus:ring-offset-background',
+        props.class
+      )
+    "
+  />
+</template>

package/src/lib/input-otp/index.ts

@@ -0,0 +1,4 @@
+export { default as InputOTP } from './InputOTP.vue'
+export { default as InputOTPGroup } from './InputOTPGroup.vue'
+export { default as InputOTPSlot } from './InputOTPSlot.vue'
+export { default as InputOTPSeparator } from './InputOTPSeparator.vue'

package/src/lib/kbd/Kbd.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <kbd :class="cn('pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100', props.class)">
+    <slot />
+  </kbd>
+</template>

package/src/lib/kbd/index.ts

@@ -0,0 +1 @@
+export { default as Kbd } from './Kbd.vue'

package/src/lib/label/Label.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Label from './Label.vue'
+
+describe('Label', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Label)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Label, {
+      slots: { default: 'Email Address' },
+    })
+    expect(wrapper.text()).toContain('Email Address')
+  })
+
+  it('passes for prop to radix Label', () => {
+    const wrapper = mount(Label, {
+      props: { for: 'email-input' },
+    })
+    expect(wrapper.attributes('for')).toBe('email-input')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Label, {
+      props: { class: 'custom-label' },
+    })
+    expect(wrapper.html()).toContain('custom-label')
+  })
+
+  it('applies default styling classes', () => {
+    const wrapper = mount(Label)
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('text-sm')
+    expect(classes).toContain('font-medium')
+  })
+})

package/src/lib/label/Label.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: string }>()
+</script>
+
+<template>
+  <Label
+    v-bind="props"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/src/lib/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'

package/src/lib/layout/AppFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <footer
+    :class="cn(
+      'border-t bg-background px-4 py-6 text-sm text-muted-foreground lg:px-6',
+      props.class,
+    )"
+  >
+    <slot />
+  </footer>
+</template>

package/src/lib/layout/AppHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: string
+  sticky?: boolean
+}>(), {
+  sticky: true,
+})
+</script>
+
+<template>
+  <header
+    :class="cn(
+      'flex h-14 items-center border-b bg-background/80 backdrop-blur-xl px-4 lg:px-6',
+      sticky && 'sticky top-0 z-30',
+      props.class,
+    )"
+  >
+    <slot />
+  </header>
+</template>

package/src/lib/layout/AppLayout.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="cn('h-screen flex overflow-hidden bg-background text-foreground', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/layout/AppMain.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  sidebarWidth?: string
+}>()
+</script>
+
+<template>
+  <main
+    :style="sidebarWidth ? { marginLeft: sidebarWidth } : undefined"
+    :class="cn(
+      'flex-1 flex flex-col min-h-0 overflow-hidden',
+      !sidebarWidth && 'lg:ml-0',
+      props.class,
+    )"
+    class="max-lg:!ml-0"
+  >
+    <slot />
+  </main>
+</template>

package/src/lib/layout/AppSidebar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: string
+  width?: string
+  open?: boolean
+}>(), {
+  width: '17rem',
+  open: true,
+})
+
+defineEmits<{
+  'update:open': [value: boolean]
+}>()
+</script>
+
+<template>
+  <!-- Mobile overlay -->
+  <Transition name="sidebar-overlay">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-30 bg-black/40 backdrop-blur-sm lg:hidden"
+      @click="$emit('update:open', false)"
+    />
+  </Transition>
+
+  <!-- Sidebar -->
+  <aside
+    :style="{ width: width }"
+    :class="cn(
+      'fixed left-0 top-0 z-40 h-full border-r bg-card/80 backdrop-blur-xl transition-transform duration-300 lg:translate-x-0',
+      open ? 'translate-x-0' : '-translate-x-full',
+      props.class,
+    )"
+  >
+    <slot />
+  </aside>
+</template>
+
+<style scoped>
+.sidebar-overlay-enter-active,
+.sidebar-overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+.sidebar-overlay-enter-from,
+.sidebar-overlay-leave-to {
+  opacity: 0;
+}
+</style>

package/src/lib/menubar/Menubar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { MenubarRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex h-10 items-center space-x-1 rounded-md border bg-background p-1 shadow-depth-1',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </MenubarRoot>
+</template>

package/src/lib/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  MenubarCheckboxItem,
+  MenubarItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'update:checked': [checked: boolean]; 'select': [event: Event] }>()
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @update:checked="emits('update:checked', $event)"
+    @select="emits('select', $event)"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4"
+        >
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>

package/src/lib/menubar/MenubarContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  MenubarContent,
+  MenubarPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{ class?: string; align?: 'start' | 'center' | 'end'; sideOffset?: number }>(), { align: 'start', sideOffset: 8 })
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="$attrs"
+      :align="props.align" :side-offset="props.sideOffset"
+      :class="
+        cn(
+          'z-depth-3 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-depth-3',
+          'data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>

package/src/lib/menubar/MenubarGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { MenubarGroup } from 'radix-vue'
+</script>
+
+<template>
+  <MenubarGroup v-bind="$attrs">
+    <slot />
+  </MenubarGroup>
+</template>

package/src/lib/menubar/MenubarItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { MenubarItem } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </MenubarItem>
+</template>

package/src/lib/menubar/MenubarLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { MenubarLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <MenubarLabel
+    v-bind="$attrs"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </MenubarLabel>
+</template>

package/src/lib/menubar/MenubarMenu.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { MenubarMenu } from 'radix-vue'
+</script>
+
+<template>
+  <MenubarMenu v-bind="$attrs">
+    <slot />
+  </MenubarMenu>
+</template>

package/src/lib/menubar/MenubarRadioGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { MenubarRadioGroup } from 'radix-vue'
+</script>
+
+<template>
+  <MenubarRadioGroup v-bind="$attrs">
+    <slot />
+  </MenubarRadioGroup>
+</template>

package/src/lib/menubar/MenubarRadioItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-2 w-2"
+        >
+          <circle cx="12" cy="12" r="6" fill="currentColor" />
+        </svg>
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>

package/src/lib/menubar/MenubarSeparator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { MenubarSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <MenubarSeparator
+    v-bind="$attrs"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
+</template>

package/src/lib/menubar/MenubarShortcut.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

package/src/lib/menubar/MenubarSub.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { MenubarSub } from 'radix-vue'
+</script>
+
+<template>
+  <MenubarSub v-bind="$attrs">
+    <slot />
+  </MenubarSub>
+</template>

package/src/lib/menubar/MenubarSubContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  MenubarSubContent,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <MenubarSubContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'z-depth-3 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-depth-3',
+        'data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </MenubarSubContent>
+</template>