@sakoa/ui 0.1.0

package/registry/source/components/ui/drawer/SDrawerClose.vue

@@ -0,0 +1,64 @@
+<script lang="ts">
+/**
+ * SDrawerClose - Drawer close button that uses context
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** Additional CSS class */
+  closeClass?: string
+  /** Disable the close button */
+  disabled?: boolean
+  /** Visual variant */
+  variant?: 'default' | 'ghost' | 'subtle'
+  /** Icon to display */
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  closeClass: '',
+  disabled: false,
+  variant: 'default',
+  icon: 'close'
+})
+
+const context = inject(SDrawerContextKey) as SDrawerContext
+
+const handleClose = () => {
+  if (!props.disabled) {
+    context?.close()
+  }
+}
+
+const variantClasses = {
+  default: 'text-muted-foreground hover:text-foreground hover:bg-accent',
+  ghost: 'text-muted-foreground hover:text-foreground',
+  subtle: 'text-muted-foreground hover:text-foreground hover:bg-muted'
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    v-bind="$attrs"
+    :class="cn(
+      's-drawer-close flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-150 outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-0',
+      variantClasses[variant],
+      disabled ? 'opacity-50 cursor-not-allowed' : '',
+      closeClass,
+      $attrs.class ?? ''
+    )"
+    :disabled="disabled"
+    aria-label="Close drawer"
+    @click="handleClose"
+  >
+    <span :class="`mdi mdi-${icon} text-xl`" />
+  </button>
+</template>

package/registry/source/components/ui/drawer/SDrawerContent.vue

@@ -0,0 +1,81 @@
+<script lang="ts">
+/**
+ * SDrawerContent - Scrollable drawer content area
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { cn } from '../../../lib/utils'
+
+export interface Props {
+  /** Padding size */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+  /** Center content */
+  centered?: boolean
+  /** Additional class */
+  contentClass?: string
+  /** Max height (enables scrolling) */
+  maxHeight?: string
+  /** Enable scrolling */
+  scrollable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: 'md',
+  centered: false,
+  contentClass: '',
+  maxHeight: undefined,
+  scrollable: true
+})
+
+const paddingClasses = {
+  none: '',
+  sm: 'p-4',
+  md: 'p-6',
+  lg: 'p-8',
+  xl: 'p-10'
+}
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-drawer-content flex-1',
+      paddingClasses[padding],
+      centered ? 'flex flex-col items-center justify-center text-center' : '',
+      scrollable ? 'overflow-y-auto overscroll-contain' : 'overflow-hidden',
+      contentClass,
+      $attrs.class ?? ''
+    )"
+    :style="maxHeight ? { maxHeight } : {}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-drawer-content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--s-border) transparent;
+}
+
+.s-drawer-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.s-drawer-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.s-drawer-content::-webkit-scrollbar-thumb {
+  background: var(--s-border);
+  border-radius: 3px;
+}
+
+.s-drawer-content::-webkit-scrollbar-thumb:hover {
+  background: var(--s-input);
+}
+</style>

package/registry/source/components/ui/drawer/SDrawerDescription.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+/**
+ * SDrawerDescription - Drawer description component that automatically binds to ARIA
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** HTML tag to use */
+  as?: 'p' | 'span' | 'div'
+  /** Additional CSS class */
+  descriptionClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'p',
+  descriptionClass: ''
+})
+
+const context = inject(SDrawerContextKey) as SDrawerContext
+
+const tag = computed(() => props.as)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-bind="$attrs"
+    :id="context?.descriptionId"
+    :class="cn('text-sm text-muted-foreground leading-relaxed', descriptionClass, $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

package/registry/source/components/ui/drawer/SDrawerFooter.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+/**
+ * SDrawerFooter - Drawer footer with action buttons
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, onMounted, onBeforeUnmount } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** Button alignment */
+  align?: 'left' | 'center' | 'right' | 'between' | 'stretch'
+  /** Show divider line */
+  divider?: boolean
+  /** Padding size */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  /** Gap between items */
+  gap?: 'none' | 'sm' | 'md' | 'lg'
+  /** Stack buttons vertically on mobile */
+  stackOnMobile?: boolean
+  /** Additional class */
+  footerClass?: string
+  /** Sticky footer */
+  sticky?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'right',
+  divider: true,
+  padding: 'md',
+  gap: 'md',
+  stackOnMobile: false,
+  footerClass: '',
+  sticky: false
+})
+
+const context = inject(SDrawerContextKey) as SDrawerContext
+
+const paddingClasses = {
+  none: '',
+  sm: 'px-4 py-3',
+  md: 'px-6 py-4',
+  lg: 'px-8 py-5'
+}
+
+const gapClasses = {
+  none: '',
+  sm: 'gap-2',
+  md: 'gap-3',
+  lg: 'gap-4'
+}
+
+const alignClasses = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end',
+  between: 'justify-between',
+  stretch: 'justify-stretch [&>*]:flex-1'
+}
+
+onMounted(() => {
+  context?.setHasFooter(true)
+})
+
+onBeforeUnmount(() => {
+  context?.setHasFooter(false)
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-drawer-footer flex items-center shrink-0',
+      paddingClasses[padding],
+      gapClasses[gap],
+      alignClasses[align],
+      divider ? 'border-t border-border' : '',
+      stackOnMobile ? 'max-sm:flex-col max-sm:items-stretch' : '',
+      sticky ? 'sticky bottom-0 z-10 bg-background' : '',
+      footerClass,
+      $attrs.class ?? ''
+    )"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-drawer-footer {
+  background: inherit;
+}
+</style>

package/registry/source/components/ui/drawer/SDrawerHandle.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+/**
+ * SDrawerHandle - Drag handle for swipe gestures
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** Size of the handle */
+  size?: 'sm' | 'md' | 'lg'
+  /** Custom class */
+  handleClass?: string
+  /** Show when dragging */
+  showProgress?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  handleClass: '',
+  showProgress: false
+})
+
+const context = inject(SDrawerContextKey) as SDrawerContext
+
+const sizeClasses = computed(() => ({
+  sm: 'w-8 h-1',
+  md: 'w-12 h-1.5',
+  lg: 'w-16 h-2'
+}[props.size]))
+
+const progressWidth = computed(() => {
+  if (!props.showProgress || !context) return 0
+  return Math.round(context.dragProgress.value * 100)
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn('s-drawer-handle flex items-center justify-center py-3 cursor-grab active:cursor-grabbing', handleClass, $attrs.class ?? '')"
+  >
+    <div 
+      class="relative rounded-full bg-muted-foreground/30 transition-all duration-150 hover:bg-muted-foreground/50"
+      :class="[
+        sizeClasses,
+        context?.isDragging?.value ? 'bg-muted-foreground/50 scale-110' : ''
+      ]"
+    >
+      <!-- Progress indicator -->
+      <div
+        v-if="showProgress && context?.isDragging?.value"
+        class="absolute inset-y-0 left-0 rounded-full bg-primary transition-none"
+        :style="{ width: `${progressWidth}%` }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-drawer-handle {
+  touch-action: none;
+  user-select: none;
+}
+
+.s-drawer-handle:hover > div {
+  animation: handle-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes handle-pulse {
+  0%, 100% { transform: scaleX(1); }
+  50% { transform: scaleX(1.08); }
+}
+</style>

package/registry/source/components/ui/drawer/SDrawerHeader.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+/**
+ * SDrawerHeader - Drawer header component with title, description, and close button
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, onMounted, onBeforeUnmount } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** Drawer title */
+  title?: string
+  /** Drawer description/subtitle */
+  description?: string
+  /** Show close button */
+  closable?: boolean
+  /** Show divider line */
+  divider?: boolean
+  /** Additional padding */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  /** Custom class */
+  headerClass?: string
+  /** Sticky header */
+  sticky?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  description: undefined,
+  closable: true,
+  divider: true,
+  padding: 'md',
+  headerClass: '',
+  sticky: false
+})
+
+const context = inject(SDrawerContextKey) as SDrawerContext
+
+const paddingClasses = {
+  none: '',
+  sm: 'px-4 py-3',
+  md: 'px-6 py-5',
+  lg: 'px-8 py-6'
+}
+
+onMounted(() => {
+  context?.setHasHeader(true)
+})
+
+onBeforeUnmount(() => {
+  context?.setHasHeader(false)
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-drawer-header flex items-start justify-between gap-4 shrink-0',
+      paddingClasses[padding],
+      divider ? 'border-b border-border' : '',
+      sticky ? 'sticky top-0 z-10 bg-background' : '',
+      headerClass,
+      $attrs.class ?? ''
+    )"
+  >
+    <div class="flex-1 min-w-0">
+      <!-- Title -->
+      <h2
+        v-if="title"
+        :id="context?.titleId"
+        class="text-lg font-semibold text-foreground tracking-tight"
+      >
+        {{ title }}
+      </h2>
+      
+      <!-- Title slot for custom content -->
+      <slot name="title" />
+
+      <!-- Description -->
+      <p
+        v-if="description"
+        :id="context?.descriptionId"
+        class="mt-1.5 text-sm text-muted-foreground leading-relaxed"
+      >
+        {{ description }}
+      </p>
+      
+      <!-- Description slot -->
+      <slot name="description" />
+    </div>
+
+    <!-- Extra content (between title and close button) -->
+    <slot name="extra" />
+
+    <!-- Close button -->
+    <button
+      v-if="closable"
+      type="button"
+      class="s-drawer-close shrink-0 flex items-center justify-center w-8 h-8 -mt-1 -mr-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150 outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-0"
+      aria-label="Close drawer"
+      @click="context?.close()"
+    >
+      <span class="mdi mdi-close text-xl" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.s-drawer-header {
+  background: inherit;
+}
+</style>

package/registry/source/components/ui/drawer/SDrawerTitle.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+/**
+ * SDrawerTitle - Drawer title component that automatically binds to ARIA
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** HTML tag to use */
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'
+  /** Additional CSS class */
+  titleClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'h2',
+  titleClass: ''
+})
+
+const context = inject(SDrawerContextKey) as SDrawerContext
+
+const tag = computed(() => props.as)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-bind="$attrs"
+    :id="context?.titleId"
+    :class="cn('text-lg font-semibold text-foreground tracking-tight', titleClass, $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

package/registry/source/components/ui/drawer/SDrawerTrigger.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+/**
+ * SDrawerTrigger - Button that triggers drawer open
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
+
+export interface Props {
+  /** Disable the trigger */
+  disabled?: boolean
+  /** Render as child (passes click to first child) */
+  asChild?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  asChild: false
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+// Note: Trigger typically doesn't need context, it's just a wrapper
+// that emits events to be handled by parent
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <slot v-if="asChild" @click="handleClick" />
+  <button
+    v-else
+    type="button"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :class="cn('s-drawer-trigger', $attrs.class ?? '')"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>

package/registry/source/components/ui/drawer/index.ts

@@ -0,0 +1,20 @@
+// Drawer Component Exports
+export { default as SDrawer } from './SDrawer.vue'
+export { default as SDrawerHeader } from './SDrawerHeader.vue'
+export { default as SDrawerContent } from './SDrawerContent.vue'
+export { default as SDrawerFooter } from './SDrawerFooter.vue'
+export { default as SDrawerTitle } from './SDrawerTitle.vue'
+export { default as SDrawerDescription } from './SDrawerDescription.vue'
+export { default as SDrawerClose } from './SDrawerClose.vue'
+export { default as SDrawerTrigger } from './SDrawerTrigger.vue'
+export { default as SDrawerHandle } from './SDrawerHandle.vue'
+
+// Type exports
+export type {
+  DrawerSide,
+  DrawerSize,
+  DrawerVariant,
+  SDrawerContext
+} from './SDrawer.vue'
+
+export { SDrawerContextKey } from './SDrawer.vue'