@sakoa/ui 0.1.0

package/registry/source/components/ui/modal/SModalContent.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+/**
+ * SModalContent - Scrollable modal 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-modal-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-modal-content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--s-border) transparent;
+}
+
+.s-modal-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.s-modal-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.s-modal-content::-webkit-scrollbar-thumb {
+  background: var(--s-border);
+  border-radius: 3px;
+}
+
+.s-modal-content::-webkit-scrollbar-thumb:hover {
+  background: var(--s-input);
+}
+</style>

package/registry/source/components/ui/modal/SModalDescription.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+/**
+ * SModalDescription - Description element for modal
+ * Automatically binds to ARIA describedby via context
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SModalContextKey } from './SModal.vue'
+
+export interface Props {
+  /** HTML tag to use */
+  as?: 'p' | 'span' | 'div'
+  /** Additional class */
+  descriptionClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'p',
+  descriptionClass: ''
+})
+
+const context = inject(SModalContextKey)
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    :id="context?.descriptionId"
+    :class="cn('s-modal-description text-sm text-muted-foreground leading-relaxed', descriptionClass, $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

package/registry/source/components/ui/modal/SModalFooter.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+/**
+ * SModalFooter - Modal footer with action buttons
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, onMounted, onBeforeUnmount } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SModalContextKey, type SModalContext } from './SModal.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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'right',
+  divider: true,
+  padding: 'md',
+  gap: 'md',
+  stackOnMobile: false,
+  footerClass: ''
+})
+
+const context = inject(SModalContextKey) as SModalContext
+
+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-modal-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' : '', footerClass, $attrs.class ?? '')"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-modal-footer {
+  background: inherit;
+}
+</style>

package/registry/source/components/ui/modal/SModalHeader.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+/**
+ * SModalHeader - Modal 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 { SModalContextKey, type SModalContext } from './SModal.vue'
+
+export interface Props {
+  /** Modal title */
+  title?: string
+  /** Modal 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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  description: undefined,
+  closable: true,
+  divider: true,
+  padding: 'md',
+  headerClass: ''
+})
+
+const context = inject(SModalContextKey) as SModalContext
+
+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-modal-header flex items-start justify-between gap-4 shrink-0', paddingClasses[padding], divider ? 'border-b border-border' : '', 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-modal-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 modal"
+      @click="context?.close()"
+    >
+      <span class="mdi mdi-close text-xl" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.s-modal-header {
+  background: inherit;
+}
+</style>

package/registry/source/components/ui/modal/SModalTitle.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+/**
+ * SModalTitle - Title element for modal
+ * Automatically binds to ARIA labelledby via context
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SModalContextKey } from './SModal.vue'
+
+export interface Props {
+  /** HTML tag to use */
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'
+  /** Additional class */
+  titleClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'h2',
+  titleClass: ''
+})
+
+const context = inject(SModalContextKey)
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    :id="context?.titleId"
+    :class="cn('s-modal-title text-lg font-semibold text-foreground tracking-tight', titleClass, $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

package/registry/source/components/ui/modal/SModalTrigger.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+/**
+ * SModalTrigger - Trigger element that opens the modal
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { cn } from '../../../lib/utils'
+
+export interface Props {
+  /** Trigger element type */
+  as?: string
+  /** Disable trigger */
+  disabled?: boolean
+  /** Additional class */
+  triggerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+  disabled: false,
+  triggerClass: ''
+})
+
+const emit = defineEmits<{
+  'click': [event: MouseEvent]
+}>()
+
+const modalOpen = defineModel<boolean>({ default: false })
+
+const handleClick = (event: MouseEvent) => {
+  if (props.disabled) return
+  
+  modalOpen.value = true
+  emit('click', event)
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    :type="as === 'button' ? 'button' : undefined"
+    :class="cn('s-modal-trigger inline-flex outline-none', disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer', triggerClass, $attrs.class ?? '')"
+    :disabled="disabled && as === 'button'"
+    :aria-disabled="disabled"
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.s-modal-trigger:focus-visible {
+  outline: 2px solid var(--s-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+</style>