@polymarbot/nuxt-layer-shadcn-ui 0.5.3 → 0.6.0

package/app/components/ui/Alert/index.stories.ts

@@ -10,15 +10,19 @@ const meta = {
   argTypes: {
     type: { control: 'select', options: types },
     icon: { control: 'text' },
+    title: { control: 'text' },
+    description: { control: 'text' },
   },
   args: {
     type: 'default',
     icon: '',
+    title: 'Heads up!',
+    description: 'You can add components to your app using the cli.',
   },
   render: args => ({
     components: { Alert },
     setup: () => ({ args }),
-    template: '<Alert v-bind="args">This is an alert message.</Alert>',
+    template: '<Alert v-bind="args" />',
   }),
 } satisfies Meta<typeof Alert>
 
@@ -37,9 +41,13 @@ export const Types: Story = {
         code: `
 <template>
   <div class="space-y-3">
-    <Alert v-for="t in types" :key="t" :type="t">
-      This is a <strong>{{ t }}</strong> alert message.
-    </Alert>
+    <Alert
+      v-for="t in types"
+      :key="t"
+      :type="t"
+      :title="t"
+      description="This is an alert message."
+    />
   </div>
 </template>
 `.trim(),
@@ -51,14 +59,36 @@ export const Types: Story = {
     setup: () => ({ types }),
     template: `
       <div class="space-y-3">
-        <Alert v-for="t in types" :key="t" :type="t">
-          This is a <strong>{{ t }}</strong> alert message.
-        </Alert>
+        <Alert
+          v-for="t in types"
+          :key="t"
+          :type="t"
+          :title="t"
+          description="This is an alert message."
+        />
       </div>
     `,
   }),
 }
 
+export const TitleOnly: Story = {
+  parameters: noControls,
+  args: {
+    type: 'info',
+    title: 'A short title without description.',
+    description: '',
+  },
+}
+
+export const DescriptionOnly: Story = {
+  parameters: noControls,
+  args: {
+    type: 'info',
+    title: '',
+    description: 'A standalone description without a title.',
+  },
+}
+
 export const WithIcons: Story = {
   parameters: {
     ...noControls,
@@ -67,9 +97,9 @@ export const WithIcons: Story = {
         code: `
 <template>
   <div class="space-y-3">
-    <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
-    <Alert type="success" icon="sparkles">Alert with a custom sparkles icon.</Alert>
-    <Alert type="warn" icon="flag">Alert with a custom flag icon.</Alert>
+    <Alert type="info" icon="bell" title="Custom bell icon" description="Override the default icon for this type." />
+    <Alert type="success" icon="sparkles" title="Custom sparkles icon" description="Pass any lucide icon name." />
+    <Alert type="warn" icon="flag" title="Custom flag icon" description="Works for every type." />
   </div>
 </template>
 `.trim(),
@@ -80,10 +110,68 @@ export const WithIcons: Story = {
     components: { Alert },
     template: `
       <div class="space-y-3">
-        <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
-        <Alert type="success" icon="sparkles">Alert with a custom sparkles icon.</Alert>
-        <Alert type="warn" icon="flag">Alert with a custom flag icon.</Alert>
+        <Alert type="info" icon="bell" title="Custom bell icon" description="Override the default icon for this type." />
+        <Alert type="success" icon="sparkles" title="Custom sparkles icon" description="Pass any lucide icon name." />
+        <Alert type="warn" icon="flag" title="Custom flag icon" description="Works for every type." />
       </div>
     `,
   }),
 }
+
+export const HiddenIcon: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Alert type="success" :icon="null" title="Icon hidden" description="Pass icon=\\"null\\" to suppress the type's default icon." />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Alert },
+    template: `
+      <Alert type="success" :icon="null" title="Icon hidden" description="Pass icon=&quot;null&quot; to suppress the type's default icon." />
+    `,
+  }),
+}
+
+export const CustomSlots: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Alert type="info">
+    <template #icon>
+      <Icon name="rocket" />
+    </template>
+    <template #title>
+      <span class="underline">Custom title slot</span>
+    </template>
+    Description rendered via the default slot. You can put <strong>rich content</strong> here.
+  </Alert>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Alert },
+    template: `
+      <Alert type="info">
+        <template #icon>
+          <Icon name="rocket" />
+        </template>
+        <template #title>
+          <span class="underline">Custom title slot</span>
+        </template>
+        Description rendered via the default slot. You can put <strong>rich content</strong> here.
+      </Alert>
+    `,
+  }),
+}

package/app/components/ui/Alert/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Alert as ShadcnAlert } from '../../shadcn/alert'
+import { Alert as ShadcnAlert, AlertDescription, AlertTitle } from '../../shadcn/alert'
 import type { AlertProps, AlertType } from './types'
 
 const typeIconNameMap: Partial<Record<AlertType, string>> = {
@@ -22,9 +22,17 @@ const typeClasses: Record<AlertType, string> = {
 const props = withDefaults(defineProps<AlertProps>(), {
   type: 'default',
   icon: undefined,
+  title: undefined,
+  description: undefined,
   class: undefined,
 })
 
+const slots = defineSlots<{
+  default?: () => any
+  title?: () => any
+  icon?: () => any
+}>()
+
 const defaultIconName = computed(() => {
   // null explicitly hides the icon; any truthy value is an explicit icon.
   if (props.icon || props.icon === null) return undefined
@@ -37,25 +45,39 @@ const mergedClass = computed(() =>
     props.class,
   ),
 )
+
+const hasTitle = computed(() => Boolean(slots.title || props.title))
+const hasDescription = computed(() => Boolean(slots.default || props.description))
 </script>
 
 <template>
   <ShadcnAlert :class="mergedClass">
-    <Icon
-      v-if="typeof icon === 'string' && icon"
-      :name="icon"
-    />
-    <component
-      :is="icon"
-      v-else-if="icon"
-      class="size-4"
-    />
-    <Icon
-      v-else-if="defaultIconName"
-      :name="defaultIconName"
-    />
-    <div class="col-start-2">
-      <slot />
-    </div>
+    <slot name="icon">
+      <Icon
+        v-if="typeof icon === 'string' && icon"
+        :name="icon"
+      />
+      <component
+        :is="icon"
+        v-else-if="icon"
+      />
+      <Icon
+        v-else-if="defaultIconName"
+        :name="defaultIconName"
+      />
+    </slot>
+    <AlertTitle v-if="hasTitle">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </AlertTitle>
+    <AlertDescription
+      v-if="hasDescription"
+      class="text-current/80"
+    >
+      <slot>
+        {{ description }}
+      </slot>
+    </AlertDescription>
   </ShadcnAlert>
 </template>

package/app/components/ui/Alert/types.ts

@@ -6,5 +6,9 @@ export interface AlertProps {
   type?: AlertType
   /** Pass `null` to explicitly hide the icon; leave undefined to use the type's default. */
   icon?: string | Component | null
+  /** Bold heading line. Slot `#title` takes precedence. */
+  title?: string
+  /** Description text. Default slot takes precedence. */
+  description?: string
   class?: ClassValue
 }

package/app/components/ui/Button/index.stories.ts

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { SurfaceColor } from '../Surface/types'
 import type { ButtonSize, ButtonVariant } from './types'
 import Icon from '../Icon/index.vue'
+import Surface from '../Surface/index.vue'
 import Button from './index.vue'
 
 const variants = [
   'default',
+  'secondary',
   'destructive',
   'outline',
-  'secondary',
   'ghost',
   'link',
 ] as const satisfies readonly ButtonVariant[]
@@ -21,6 +23,16 @@ const sizes = [
   'icon-lg',
 ] as const satisfies readonly ButtonSize[]
 
+const surfaceColors = [
+  'default',
+  'primary',
+  'success',
+  'info',
+  'help',
+  'warn',
+  'danger',
+] as const satisfies readonly SurfaceColor[]
+
 const meta = {
   title: 'UI/Button',
   component: Button,
@@ -70,9 +82,9 @@ export const Variants: Story = {
         code: `
 <template>
   <Button variant="default">default</Button>
+  <Button variant="secondary">secondary</Button>
   <Button variant="destructive">destructive</Button>
   <Button variant="outline">outline</Button>
-  <Button variant="secondary">secondary</Button>
   <Button variant="ghost">ghost</Button>
   <Button variant="link">link</Button>
 </template>
@@ -265,3 +277,43 @@ export const LinkButtons: Story = {
     `,
   }),
 }
+
+export const InheritedHoverColor: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <!-- outline / ghost / link inherit the parent's currentColor -->
+  <Surface variant="soft" color="success">
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+    <Button variant="link">Link</Button>
+  </Surface>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Button, Surface },
+    setup: () => ({ surfaceColors }),
+    template: `
+      <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        <Surface
+          v-for="c in surfaceColors"
+          :key="c"
+          variant="soft"
+          :color="c"
+          class="p-3 flex items-center gap-2"
+        >
+          <span class="mr-auto text-sm font-medium capitalize">{{ c }}</span>
+          <Button variant="outline" size="sm">Outline</Button>
+          <Button variant="ghost" size="sm">Ghost</Button>
+          <Button variant="link" size="sm">Link</Button>
+        </Surface>
+      </div>
+    `,
+  }),
+}

package/app/components/ui/Button/index.vue

@@ -4,10 +4,28 @@ import WebLink from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/WebLink/
 import type { ButtonProps } from './types'
 
 const props = defineProps<ButtonProps>()
-const isTransparentHover = computed(() => props.variant === 'outline' || props.variant === 'ghost')
+
+const variantClasses: Partial<Record<NonNullable<ButtonVariant>, string>> = {
+  outline: `
+    bg-transparent
+    dark:bg-transparent
+    border-current/20
+    dark:border-current/20
+    hover:bg-current/10
+    dark:hover:bg-current/10
+    hover:text-current
+  `,
+  ghost: `
+    hover:bg-current/10
+    dark:hover:bg-current/10
+    hover:text-current
+  `,
+  link: 'text-current',
+}
+
 const mergedClass = computed(() => cn(
   'cursor-pointer',
-  isTransparentHover.value && 'hover:bg-accent/50',
+  props.variant && variantClasses[props.variant],
   props.rounded && 'rounded-full',
   props.class,
 ))

package/app/components/ui/DatePicker/index.stories.ts

@@ -28,11 +28,11 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
-    placeholder: '',
+    placeholder: undefined,
     minDate: undefined,
     maxDate: undefined,
-    valueFormat: '',
-    autoApply: false,
+    valueFormat: undefined,
+    autoApply: true,
     class: '',
   },
   render: args => ({
@@ -43,7 +43,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs">
-        <DatePicker v-model="value" v-bind="args" />
+        <DatePicker v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

package/app/components/ui/DateRangePicker/index.stories.ts

@@ -1,48 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import type { DateRangePickerValue } from './types'
 import DateRangePicker from './index.vue'
 
 const meta = {
   title: 'UI/DateRangePicker',
   component: DateRangePicker,
   argTypes: {
-    modelValue: { control: 'object' },
+    start: { control: 'date' },
+    end: { control: 'date' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
     startPlaceholder: { control: 'text' },
     endPlaceholder: { control: 'text' },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
     maxSpanDays: { control: 'number' },
     valueFormat: { control: 'text' },
     autoApply: { control: 'boolean' },
     class: { control: 'text' },
   },
   args: {
-    modelValue: [ null, null ],
+    start: null,
+    end: null,
+    minDate: undefined,
+    maxDate: undefined,
     showTime: false,
     disabled: false,
     readonly: false,
-    startPlaceholder: '',
-    endPlaceholder: '',
-    minDate: undefined,
-    maxDate: undefined,
+    startPlaceholder: undefined,
+    endPlaceholder: undefined,
     maxSpanDays: undefined,
-    valueFormat: '',
-    autoApply: false,
+    valueFormat: undefined,
+    autoApply: true,
     class: '',
   },
   render: args => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>([ null, null ])
-      return { args, range }
+      const start = ref<Date | string | null>(args.start ?? null)
+      const end = ref<Date | string | null>(args.end ?? null)
+      return { args, start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="range" v-bind="args" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
+        <DateRangePicker v-bind="args" v-model:start="start" v-model:end="end" />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -60,20 +65,24 @@ export const WithTime: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="withTime" showTime />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" showTime />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const withTime = ref<DateRangePickerValue>([ null, null ])
-      return { withTime }
+      const start = ref<Date | string | null>(null)
+      const end = ref<Date | string | null>(null)
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="withTime" showTime />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ withTime }}</div>
+        <DateRangePicker v-model:start="start" v-model:end="end" showTime />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -84,20 +93,24 @@ export const MaxSpanDays: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="maxSpan" :maxSpanDays="7" />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" :maxSpanDays="7" />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const maxSpan = ref<DateRangePickerValue>([ null, null ])
-      return { maxSpan }
+      const start = ref<Date | string | null>(null)
+      const end = ref<Date | string | null>(null)
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="maxSpan" :maxSpanDays="7" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ maxSpan }}</div>
+        <DateRangePicker v-model:start="start" v-model:end="end" :maxSpanDays="7" />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -108,23 +121,24 @@ export const Preselected: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="preselected" />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const preselected = ref<DateRangePickerValue>([
-        new Date(2025, 5, 1),
-        new Date(2025, 5, 15),
-      ])
-      return { preselected }
+      const start = ref<Date | string | null>(new Date(2025, 5, 1))
+      const end = ref<Date | string | null>(new Date(2025, 5, 15))
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="preselected" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
+        <DateRangePicker v-model:start="start" v-model:end="end" />
+        <div class="mt-2 text-sm text-muted-foreground">
+          <div>Start: {{ start }}</div>
+          <div>End: {{ end }}</div>
+        </div>
       </div>
     `,
   }),
@@ -135,22 +149,20 @@ export const Disabled: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="range" disabled />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" disabled />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>([
-        new Date(2025, 5, 1),
-        new Date(2025, 5, 15),
-      ])
-      return { range }
+      const start = ref<Date | string | null>(new Date(2025, 5, 1))
+      const end = ref<Date | string | null>(new Date(2025, 5, 15))
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="range" disabled />
+        <DateRangePicker v-model:start="start" v-model:end="end" disabled />
       </div>
     `,
   }),
@@ -161,22 +173,20 @@ export const Readonly: Story = {
     ...noControls,
     docs: {
       source: {
-        code: '<DateRangePicker v-model="range" readonly />',
+        code: '<DateRangePicker v-model:start="start" v-model:end="end" readonly />',
       },
     },
   },
   render: () => ({
     components: { DateRangePicker },
     setup () {
-      const range = ref<DateRangePickerValue>([
-        new Date(2025, 5, 1),
-        new Date(2025, 5, 15),
-      ])
-      return { range }
+      const start = ref<Date | string | null>(new Date(2025, 5, 1))
+      const end = ref<Date | string | null>(new Date(2025, 5, 15))
+      return { start, end }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-model="range" readonly />
+        <DateRangePicker v-model:start="start" v-model:end="end" readonly />
       </div>
     `,
   }),

package/app/components/ui/DateRangePicker/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { DateRangePickerProps, DateRangePickerValue } from './types'
+import type { DateRangePickerProps } from './types'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
-  modelValue: () => [ null, null ],
+  start: null,
+  end: null,
   showTime: false,
   disabled: false,
   readonly: false,
@@ -19,81 +20,69 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: DateRangePickerValue]
+  'update:start': [value: Date | string | null]
+  'update:end': [value: Date | string | null]
 }>()
 
 const T = useTranslations('components.ui.DateRangePicker')
 
-const startDate = ref<Date | string | null>(props.modelValue?.[0] ?? null)
-const endDate = ref<Date | string | null>(props.modelValue?.[1] ?? null)
-
-watch(() => props.modelValue, val => {
-  startDate.value = val?.[0] ?? null
-  endDate.value = val?.[1] ?? null
+const start = computed({
+  get: () => props.start,
+  set: value => emit('update:start', value),
 })
 
-function emitRange () {
-  emit('update:modelValue', [ startDate.value, endDate.value ])
-}
-
-function handleStartUpdate (value: Date | string | null) {
-  startDate.value = value
-  emitRange()
-}
-
-function handleEndUpdate (value: Date | string | null) {
-  // If time is disabled, set end time to end of day
-  if (value instanceof Date && !props.showTime) {
-    const adjusted = new Date(value)
-    adjusted.setHours(23, 59, 59, 999)
-    endDate.value = adjusted
-  } else {
-    endDate.value = value
-  }
-  emitRange()
-}
+const end = computed({
+  get: () => props.end,
+  set: value => {
+    // When time is disabled, normalize end to end of day so range is inclusive
+    if (value instanceof Date && !props.showTime) {
+      const adjusted = new Date(value)
+      adjusted.setHours(23, 59, 59, 999)
+      emit('update:end', adjusted)
+    } else {
+      emit('update:end', value)
+    }
+  },
+})
 
-// Helper functions for date constraints
 function addDays (date: Date, days: number): Date {
   const result = new Date(date)
   result.setDate(result.getDate() + days)
   return result
 }
 
-function toDate (value: Date | string | null): Date | undefined {
+function toDate (value: Date | string | null | undefined): Date | undefined {
   if (!value) return undefined
   return value instanceof Date ? value : new Date(value)
 }
 
-// Start picker constraints
 const startMinDate = computed(() => {
   const min = props.minDate
-  const spanLimit = props.maxSpanDays && endDate.value
-    ? addDays(toDate(endDate.value)!, -(props.maxSpanDays - 1))
+  const spanLimit = props.maxSpanDays && props.end
+    ? addDays(toDate(props.end)!, -(props.maxSpanDays - 1))
     : undefined
   if (min && spanLimit) return new Date(Math.max(+new Date(min), +spanLimit))
   return min ?? spanLimit
 })
 
 const startMaxDate = computed(() => {
-  const end = toDate(endDate.value)
+  const endDate = toDate(props.end)
   const max = props.maxDate
-  if (end && max) return new Date(Math.min(+end, +new Date(max)))
-  return end ?? max
+  if (endDate && max) return new Date(Math.min(+endDate, +new Date(max)))
+  return endDate ?? max
 })
 
-// End picker constraints
 const endMinDate = computed(() => {
-  const start = toDate(startDate.value)
+  const startDate = toDate(props.start)
   const min = props.minDate
-  if (start && min) return new Date(Math.max(+start, +new Date(min)))
-  return start ?? min
+  if (startDate && min) return new Date(Math.max(+startDate, +new Date(min)))
+  return startDate ?? min
 })
 
 const endMaxDate = computed(() => {
   const max = props.maxDate
-  const spanLimit = props.maxSpanDays && startDate.value
-    ? addDays(toDate(startDate.value)!, props.maxSpanDays - 1)
+  const spanLimit = props.maxSpanDays && props.start
+    ? addDays(toDate(props.start)!, props.maxSpanDays - 1)
     : undefined
   if (max && spanLimit) return new Date(Math.min(+new Date(max), +spanLimit))
   return max ?? spanLimit
@@ -103,7 +92,7 @@ const endMaxDate = computed(() => {
 <template>
   <div :class="cn('gap-2 flex items-center', props.class)">
     <DatePicker
-      :modelValue="startDate"
+      v-model="start"
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
@@ -113,13 +102,12 @@ const endMaxDate = computed(() => {
       :valueFormat="valueFormat"
       :autoApply="autoApply"
       v-bind="$attrs"
-      @update:modelValue="handleStartUpdate"
     />
     <span class="text-muted-foreground shrink-0">
       {{ T('to') }}
     </span>
     <DatePicker
-      :modelValue="endDate"
+      v-model="end"
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
@@ -129,7 +117,6 @@ const endMaxDate = computed(() => {
       :valueFormat="valueFormat"
       :autoApply="autoApply"
       v-bind="$attrs"
-      @update:modelValue="handleEndUpdate"
     />
   </div>
 </template>

package/app/components/ui/DateRangePicker/types.ts

@@ -1,12 +1,12 @@
 import type { DatePickerTimeConfig } from '../DatePicker/types'
 
-export type DateRangePickerValue = [
-  start: Date | string | null,
-  end: Date | string | null,
-]
-
 export interface DateRangePickerProps {
-  modelValue?: DateRangePickerValue
+  start?: Date | string | null
+  end?: Date | string | null
+  /** Minimum selectable date */
+  minDate?: Date | string
+  /** Maximum selectable date */
+  maxDate?: Date | string
   /** Enable time selection, or pass DatePickerTimeConfig for fine-grained control */
   showTime?: boolean | DatePickerTimeConfig
   /** Disable the date range picker */
@@ -17,10 +17,6 @@ export interface DateRangePickerProps {
   startPlaceholder?: string
   /** Placeholder for end date input */
   endPlaceholder?: string
-  /** Minimum selectable date */
-  minDate?: Date | string
-  /** Maximum selectable date */
-  maxDate?: Date | string
   /** Maximum span in days between start and end date */
   maxSpanDays?: number
   /** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */

package/app/components/ui/Drawer/index.stories.ts

@@ -57,7 +57,7 @@ const meta = {
     template: `
       <div>
         <Button @click="visible = true">Open Drawer</Button>
-        <Drawer v-model:visible="visible" v-bind="args">
+        <Drawer v-bind="args" v-model:visible="visible">
           <p>This is the drawer content.</p>
           <Input class="mt-4" placeholder="Try interacting with this input" />
         </Drawer>

package/app/components/ui/InputCurrency/index.stories.ts

@@ -22,7 +22,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs">
-        <InputCurrency v-model="value" v-bind="args" />
+        <InputCurrency v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

package/app/components/ui/InputNumber/index.stories.ts

@@ -31,7 +31,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs">
-        <InputNumber v-model="value" v-bind="args" />
+        <InputNumber v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

package/app/components/ui/InputOtp/index.stories.ts

@@ -23,7 +23,7 @@ const meta = {
     },
     template: `
       <div class="space-y-4">
-        <InputOtp v-model="otp" v-bind="args" />
+        <InputOtp v-bind="args" v-model="otp" />
         <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
       </div>
     `,

package/app/components/ui/InputPercent/index.stories.ts

@@ -14,7 +14,7 @@ const meta = {
     },
     template: `
       <div class="max-w-xs space-y-4">
-        <InputPercent v-model="percent" v-bind="args" />
+        <InputPercent v-bind="args" v-model="percent" />
         <div class="text-sm text-muted-foreground">Value: {{ percent }}</div>
       </div>
     `,

package/app/components/ui/InputRange/index.stories.ts

@@ -28,7 +28,7 @@ const meta = {
     },
     template: `
       <div class="max-w-md">
-        <InputRange v-model:start="start" v-model:end="end" v-bind="args" />
+        <InputRange v-bind="args" v-model:start="start" v-model:end="end" />
         <div class="mt-2 text-sm text-muted-foreground">Start: {{ start }}, End: {{ end }}</div>
       </div>
     `,

package/app/components/ui/InputRange/index.vue

@@ -7,7 +7,7 @@ const props = withDefaults(defineProps<InputRangeProps>(), {
   start: undefined,
   end: undefined,
   min: 0,
-  max: 100,
+  max: undefined,
 })
 
 const emit = defineEmits<{
@@ -27,7 +27,7 @@ const end = computed({
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div class="gap-2 flex items-center">
     <InputNumber
       v-model="start"
       v-bind="$attrs"

package/app/components/ui/Modal/index.stories.ts

@@ -51,7 +51,7 @@ const meta = {
     template: `
       <div>
         <Button @click="visible = true">Open Modal</Button>
-        <Modal v-model:visible="visible" v-bind="args">
+        <Modal v-bind="args" v-model:visible="visible">
           <p>This is the modal content.</p>
           <Input class="mt-4" placeholder="Try interacting with this input" />
         </Modal>

package/app/components/ui/Select/index.stories.ts

@@ -57,7 +57,7 @@ const meta = {
     },
     template: `
       <div class="max-w-sm">
-        <Select v-model="value" :options="frameworks" v-bind="args" />
+        <Select v-bind="args" v-model="value" :options="frameworks" />
         <div class="mt-2 text-sm text-muted-foreground">Selected: {{ value ?? 'none' }}</div>
       </div>
     `,

package/app/components/ui/Slider/index.stories.ts

@@ -27,7 +27,7 @@ const meta = {
     },
     template: `
       <div class="max-w-sm">
-        <Slider v-model="value" v-bind="args" />
+        <Slider v-bind="args" v-model="value" />
         <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
       </div>
     `,

package/app/components/ui/Switch/index.stories.ts

@@ -19,7 +19,7 @@ const meta = {
     },
     template: `
       <div class="flex items-center gap-4">
-        <Switch v-model="on" v-bind="args" />
+        <Switch v-bind="args" v-model="on" />
         <div class="text-sm text-muted-foreground">Value: {{ on }}</div>
       </div>
     `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "79d1ad5f798390469ac3cdfa7aed7ddc530a6c1e"
+  "gitHead": "750dccbf085f045771b445f9ac7fe0d722cd1a4c"
 }