@polymarbot/nuxt-layer-shadcn-ui 0.8.8 → 0.9.1

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

@@ -10,6 +10,7 @@ const meta = {
     defaultValue: { control: 'select', options: [ true, false, 'indeterminate' ]},
     disabled: { control: 'boolean' },
     required: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     name: { control: 'text' },
     value: { control: 'text' },
   },
@@ -18,6 +19,7 @@ const meta = {
     defaultValue: false,
     disabled: false,
     required: false,
+    invalid: false,
     name: '',
     value: '',
   },
@@ -104,6 +106,13 @@ export const Indeterminate: Story = {
   }),
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const Disabled: Story = {
   parameters: {
     ...noControls,

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

@@ -2,12 +2,15 @@
 import { Checkbox as ShadcnCheckbox } from '../../shadcn/checkbox'
 import type { CheckboxProps } from './types'
 
-defineProps<CheckboxProps>()
+const props = defineProps<CheckboxProps>()
+
+const isInvalid = useFormItemInvalid(() => props.invalid)
 </script>
 
 <template>
   <ShadcnCheckbox
     v-slot="{ state }"
+    :aria-invalid="isInvalid || undefined"
     class="
       data-[state=indeterminate]:border-primary
       data-[state=indeterminate]:bg-primary

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

@@ -1,3 +1,5 @@
 import type { CheckboxRootProps } from 'reka-ui'
 
-export interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {}
+export interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {
+  invalid?: boolean
+}

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

@@ -16,6 +16,7 @@ const meta = {
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     placeholder: { control: 'text' },
     minDate: { control: 'date' },
     maxDate: { control: 'date' },
@@ -29,6 +30,7 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
+    invalid: false,
     placeholder: '',
     minDate: undefined,
     maxDate: undefined,
@@ -224,6 +226,13 @@ export const Readonly: Story = {
   }),
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const InModal: Story = {
   parameters: {
     ...noControls,

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

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   showTime: false,
   disabled: false,
   readonly: false,
+  invalid: false,
   placeholder: undefined,
   minDate: undefined,
   maxDate: undefined,
@@ -28,6 +29,8 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   class: undefined,
 })
 
+useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: Date | string | number | null]
 }>()

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

@@ -27,6 +27,8 @@ export interface DatePickerProps {
   disabled?: boolean
   /** Readonly mode */
   readonly?: boolean
+  /** Mark the field as invalid (renders the inner Input with destructive styling) */
+  invalid?: boolean
   /** Placeholder text */
   placeholder?: string
   /** Minimum selectable date */

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

@@ -13,6 +13,7 @@ const meta = {
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     startPlaceholder: { control: 'text' },
     endPlaceholder: { control: 'text' },
     maxSpanDays: { control: 'number' },
@@ -28,6 +29,7 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
+    invalid: false,
     startPlaceholder: '',
     endPlaceholder: '',
     maxSpanDays: undefined,
@@ -196,3 +198,10 @@ export const Readonly: Story = {
     `,
   }),
 }
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}

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

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
   showTime: false,
   disabled: false,
   readonly: false,
+  invalid: false,
   startPlaceholder: undefined,
   endPlaceholder: undefined,
   minDate: undefined,
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
   class: undefined,
 })
 
+useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:start': [value: Date | string | number | null]
   'update:end': [value: Date | string | number | null]

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

@@ -21,6 +21,8 @@ export interface DateRangePickerProps {
   disabled?: boolean
   /** Readonly mode */
   readonly?: boolean
+  /** Mark the field as invalid (renders both inputs with destructive styling) */
+  invalid?: boolean
   /** Placeholder for start date input */
   startPlaceholder?: string
   /** Placeholder for end date input */

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

@@ -1,5 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { RadioCardGroupOption } from '../RadioCardGroup/types'
+import type { RadioGroupItem } from '../RadioGroup/types'
+import type { SelectOption } from '../Select/types'
+import type {
+  SearchSelectLoadMethodParams,
+  SearchSelectLoadMethodResult,
+} from '../SearchSelect/types'
+import Checkbox from '../Checkbox/index.vue'
+import DatePicker from '../DatePicker/index.vue'
+import DateRangePicker from '../DateRangePicker/index.vue'
 import Input from '../Input/index.vue'
+import InputCurrency from '../InputCurrency/index.vue'
+import InputNumber from '../InputNumber/index.vue'
+import InputOtp from '../InputOtp/index.vue'
+import InputPercent from '../InputPercent/index.vue'
+import InputRange from '../InputRange/index.vue'
+import RadioCardGroup from '../RadioCardGroup/index.vue'
+import RadioGroup from '../RadioGroup/index.vue'
+import SearchSelect from '../SearchSelect/index.vue'
+import Select from '../Select/index.vue'
+import Textarea from '../Textarea/index.vue'
 import FormItem from './index.vue'
 
 const orientations = [ 'vertical', 'horizontal', 'responsive' ] as const
@@ -51,15 +71,6 @@ export const Required: Story = {
   },
 }
 
-export const WithError: Story = {
-  parameters: noControls,
-  args: {
-    label: 'Username',
-    required: true,
-    error: 'Username is already taken',
-  },
-}
-
 export const WithDescription: Story = {
   parameters: noControls,
   args: {
@@ -76,6 +87,122 @@ export const Horizontal: Story = {
   },
 }
 
+const selectOptions: SelectOption[] = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Angular', value: 'angular' },
+]
+
+const radioOptions: RadioGroupItem[] = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+]
+
+const radioCardOptions: RadioCardGroupOption[] = [
+  { value: 'card-a', title: 'Card A', description: 'First option' },
+  { value: 'card-b', title: 'Card B', description: 'Second option' },
+]
+
+function mockLoadMethod (params: SearchSelectLoadMethodParams): Promise<SearchSelectLoadMethodResult<string>> {
+  const items = selectOptions.slice(params.offset, params.offset + params.limit)
+  return Promise.resolve({ items, total: selectOptions.length })
+}
+
+export const InvalidControls: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      description: {
+        story: 'Every input-like control automatically inherits the surrounding `FormItem`\'s error state via provide/inject — no need to wire `invalid` on each control. The same destructive styling appears whether the error comes from `<FormItem :error>` or the control\'s own `invalid` prop.',
+      },
+      source: {
+        code: `
+<template>
+  <FormItem required label="Username" error="Required">
+    <Input placeholder="Type your username" />
+  </FormItem>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      FormItem,
+      Input,
+      Textarea,
+      InputNumber,
+      InputCurrency,
+      InputPercent,
+      InputRange,
+      InputOtp,
+      Select,
+      SearchSelect,
+      DatePicker,
+      DateRangePicker,
+      Checkbox,
+      RadioGroup,
+      RadioCardGroup,
+    },
+    setup: () => ({
+      error: 'This field is required',
+      selectOptions,
+      radioOptions,
+      radioCardOptions,
+      mockLoadMethod,
+    }),
+    template: `
+      <div class="max-w-md space-y-4">
+        <FormItem required label="Input" :error="error">
+          <Input placeholder="Type something" />
+        </FormItem>
+        <FormItem required label="Textarea" :error="error">
+          <Textarea placeholder="Long text" />
+        </FormItem>
+        <FormItem required label="InputNumber" :error="error">
+          <InputNumber />
+        </FormItem>
+        <FormItem required label="InputCurrency" :error="error">
+          <InputCurrency :modelValue="1000" currency="JPY" />
+        </FormItem>
+        <FormItem required label="InputPercent" :error="error">
+          <InputPercent :modelValue="0.5" />
+        </FormItem>
+        <FormItem required label="InputRange" :error="error">
+          <InputRange />
+        </FormItem>
+        <FormItem required label="InputOtp" :error="error">
+          <InputOtp />
+        </FormItem>
+        <FormItem required label="Select" :error="error">
+          <Select :options="selectOptions" placeholder="Pick a framework" />
+        </FormItem>
+        <FormItem required label="SearchSelect" :error="error">
+          <SearchSelect :loadMethod="mockLoadMethod" autoLoad />
+        </FormItem>
+        <FormItem required label="DatePicker" :error="error">
+          <DatePicker />
+        </FormItem>
+        <FormItem required label="DateRangePicker" :error="error">
+          <DateRangePicker />
+        </FormItem>
+        <FormItem required label="Checkbox" :error="error">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <Checkbox />
+            <span class="text-sm">Accept terms</span>
+          </label>
+        </FormItem>
+        <FormItem required label="RadioGroup" :error="error">
+          <RadioGroup :items="radioOptions" />
+        </FormItem>
+        <FormItem required label="RadioCardGroup" :error="error">
+          <RadioCardGroup :options="radioCardOptions" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
+
 export const Responsive: Story = {
   parameters: {
     ...noControls,
@@ -98,7 +225,7 @@ export const Responsive: Story = {
     template: `
       <div class="max-w-md">
         <div class="@container/field-group resize-x overflow-auto rounded border border-dashed border-border bg-card p-4" style="min-width: 200px;">
-          <FormItem label="Address" orientation="responsive" description="Your mailing address">
+          <FormItem required label="Address" orientation="responsive" description="Your mailing address">
             <Input placeholder="Enter address" />
           </FormItem>
         </div>

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

@@ -10,15 +10,22 @@ import type { FormItemProps } from './types'
 
 const props = defineProps<FormItemProps>()
 
+useFormItemInvalid(() => !!props.error)
+
 const errorArray = computed(() => {
   if (!props.error) return undefined
   return [{ message: props.error }]
 })
 
 const labelClass = computed(() => {
-  if (props.orientation === 'horizontal') return 'justify-end text-right mt-2'
-  if (props.orientation === 'responsive') return '@md/field-group:justify-end @md/field-group:text-right @md/field-group:mt-2'
-  return undefined
+  const base = 'group-data-[invalid=true]/field:text-foreground'
+  if (props.orientation === 'horizontal') return cn(base, `
+    mt-2 justify-end text-right
+  `)
+  if (props.orientation === 'responsive') return cn(base, `
+    @md/field-group:justify-end @md/field-group:text-right @md/field-group:mt-2
+  `)
+  return base
 })
 </script>
 

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

@@ -16,6 +16,8 @@ const emit = defineEmits<{
   'change': [value: string | undefined]
 }>()
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const $slots = defineSlots<{
   prefix?: () => unknown
   suffix?: () => unknown
@@ -65,7 +67,7 @@ function clearInput () {
       v-bind="$attrs"
       :readonly="readonly"
       :disabled="disabled"
-      :aria-invalid="invalid || undefined"
+      :aria-invalid="isInvalid || undefined"
       :data-1p-ignore="autocomplete === 'off' || !autocomplete ? true : undefined"
       :autocomplete="autocomplete || 'off'"
       @input="handleInput"

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

@@ -11,11 +11,13 @@ const meta = {
     modelValue: { control: 'number' },
     currency: { control: 'text' },
     currencyDisplay: { control: 'select', options: currencyDisplays },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: 1000,
     currency: 'JPY',
     currencyDisplay: 'symbol',
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -78,3 +80,10 @@ export const JpyNameDisplay: Story = {
     currencyDisplay: 'name',
   },
 }
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}

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

@@ -1,4 +1,6 @@
-export interface InputCurrencyProps {
+import type { InputNumberProps } from '../InputNumber/types'
+
+export interface InputCurrencyProps extends /* @vue-ignore */ Pick<InputNumberProps, 'invalid'> {
   currency?: string
   currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name'
 }

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

@@ -28,26 +28,32 @@ const model = computed({
   set: value => emit('update:modelValue', value),
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const contentClass = computed(() =>
   cn(
     `
-      flex h-9 items-center rounded-md border border-input shadow-xs
-      transition-[color,box-shadow]
+      h-9 rounded-md border-input shadow-xs
       dark:bg-input/30
+      flex items-center border transition-[color,box-shadow]
     `,
     `
       has-[[data-slot=input]:focus-visible]:border-ring
-      has-[[data-slot=input]:focus-visible]:ring-[3px]
       has-[[data-slot=input]:focus-visible]:ring-ring/50
+      has-[[data-slot=input]:focus-visible]:ring-[3px]
     `,
-    props.invalid && `
+    isInvalid.value && `
       border-destructive ring-destructive/20
       dark:ring-destructive/40
+      has-[[data-slot=input]:focus-visible]:border-destructive
+      has-[[data-slot=input]:focus-visible]:ring-destructive/20
+      dark:has-[[data-slot=input]:focus-visible]:ring-destructive/40
     `,
   ),
 )
 
-const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-none'
+const buttonClass = 'static translate-y-0 shrink-0 cursor-pointer'
+const inputClass = 'flex-1 min-w-0 border-0 shadow-none focus-visible:ring-0 rounded-none'
 </script>
 
 <template>
@@ -61,7 +67,7 @@ const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-non
     <NumberFieldContent :class="contentClass">
       <NumberFieldDecrement
         v-if="showButtons"
-        class="cursor-pointer"
+        :class="buttonClass"
       />
       <NumberFieldInput
         :placeholder="placeholder"
@@ -69,7 +75,7 @@ const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-non
       />
       <NumberFieldIncrement
         v-if="showButtons"
-        class="cursor-pointer"
+        :class="buttonClass"
       />
     </NumberFieldContent>
   </NumberField>

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

@@ -10,11 +10,13 @@ const meta = {
     modelValue: { control: 'text' },
     length: { control: 'number' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: '',
     length: 6,
     disabled: false,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -53,6 +55,14 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+    modelValue: '123456',
+  },
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -6,10 +6,11 @@ import {
 } from '../../shadcn/pin-input'
 import type { InputOtpProps } from './types'
 
-withDefaults(defineProps<InputOtpProps>(), {
+const props = withDefaults(defineProps<InputOtpProps>(), {
   modelValue: '',
   length: 6,
   disabled: false,
+  invalid: false,
 })
 
 const emit = defineEmits<{
@@ -17,6 +18,8 @@ const emit = defineEmits<{
   'complete': [value: string]
 }>()
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 function handleComplete (values: string[]) {
   emit('complete', values.join(''))
 }
@@ -39,6 +42,7 @@ function handleUpdate (value: string[]) {
         v-for="(_, index) in length"
         :key="index"
         :index="index"
+        :aria-invalid="isInvalid || undefined"
       />
     </PinInputGroup>
   </PinInput>

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

@@ -2,4 +2,5 @@ export interface InputOtpProps {
   modelValue?: string
   length?: number
   disabled?: boolean
+  invalid?: boolean
 }

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

@@ -7,9 +7,11 @@ const meta = {
   component: InputPercent as any,
   argTypes: {
     modelValue: { control: 'number' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: 0.5,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -29,4 +31,13 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}

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

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import type { InputPercentProps } from './types'
+
+defineProps<InputPercentProps>()
+</script>
+
 <template>
   <InputNumber
     :formatOptions="{ style: 'percent' }"

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

@@ -0,0 +1,3 @@
+import type { InputNumberProps } from '../InputNumber/types'
+
+export interface InputPercentProps extends /* @vue-ignore */ Pick<InputNumberProps, 'invalid'> {}

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

@@ -15,6 +15,7 @@ const meta = {
     startPlaceholder: { control: 'text' },
     endPlaceholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     as: { control: false },
   },
   args: {
@@ -25,6 +26,7 @@ const meta = {
     startPlaceholder: '',
     endPlaceholder: '',
     disabled: false,
+    invalid: false,
     as: undefined,
   },
   render: args => {
@@ -71,6 +73,15 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+    start: 20,
+    end: 80,
+  },
+}
+
 export const CustomInput: Story = {
   parameters: {
     ...noControls,

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

@@ -43,11 +43,13 @@ const meta = {
     modelValue: { control: 'text' },
     options: { control: 'object' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: 'current',
     options,
     disabled: false,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -106,6 +108,13 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const EventHandling: Story = {
   parameters: {
     ...noControls,

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

@@ -8,9 +8,12 @@ import type { RadioCardGroupProps } from './types'
 const props = withDefaults(defineProps<RadioCardGroupProps>(), {
   modelValue: undefined,
   disabled: false,
+  invalid: false,
   class: undefined,
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -47,6 +50,7 @@ const mergedClass = computed(() => cn('gap-3', props.class))
       <ShadcnRadioGroupItem
         :value="option.value"
         :disabled="option.disabled"
+        :aria-invalid="isInvalid || undefined"
       />
       <div class="gap-0.5 grid flex-1">
         <span class="text-sm font-medium">

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

@@ -9,5 +9,6 @@ export interface RadioCardGroupProps {
   modelValue?: string
   options: RadioCardGroupOption[]
   disabled?: boolean
+  invalid?: boolean
   class?: ClassValue
 }

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

@@ -23,12 +23,14 @@ const meta = {
     items: { control: 'object' },
     modelValue: { control: 'text' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     orientation: { control: 'inline-radio', options: [ 'vertical', 'horizontal' ]},
   },
   args: {
     items: options,
     modelValue: 'option1',
     disabled: false,
+    invalid: false,
     orientation: 'vertical',
   },
   render: args => {
@@ -70,6 +72,13 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const CustomSlots: Story = {
   parameters: {
     ...noControls,

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

@@ -9,10 +9,13 @@ const props = withDefaults(defineProps<RadioGroupProps>(), {
   items: () => [],
   modelValue: undefined,
   disabled: false,
+  invalid: false,
   orientation: 'vertical',
   class: undefined,
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -58,6 +61,7 @@ const mergedClass = computed(() => cn(
       <ShadcnRadioGroupItem
         :value="item.value"
         :disabled="item.disabled"
+        :aria-invalid="isInvalid || undefined"
       />
       <slot
         name="label"

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

@@ -8,6 +8,7 @@ export interface RadioGroupProps {
   modelValue?: string
   items?: RadioGroupItem[]
   disabled?: boolean
+  invalid?: boolean
   orientation?: 'vertical' | 'horizontal'
   class?: ClassValue
 }

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

@@ -52,6 +52,7 @@ const meta = {
     loadLimit: { control: 'number' },
     autoLoad: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: undefined,
@@ -64,6 +65,7 @@ const meta = {
     loadLimit: 20,
     autoLoad: false,
     disabled: false,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -182,6 +184,13 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const EventHandling: Story = {
   parameters: {
     ...noControls,

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

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<SearchSelectProps<TValue, TMeta>>(), {
   loadLimit: 20,
   placeholder: undefined,
   disabled: false,
+  invalid: false,
   searchPlaceholder: undefined,
   emptyText: undefined,
   searchEmptyText: undefined,
@@ -191,6 +192,7 @@ defineExpose({ refresh: resetAndLoad })
     :searchPlaceholder="searchPlaceholder"
     :emptyText="computedEmptyText"
     :disabled="disabled"
+    :invalid="invalid"
     :loading="isLoading"
     @search="handleSearch"
     @open="handleOpen"

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

@@ -27,6 +27,7 @@ export interface SearchSelectProps<V extends string | number = string, M = unkno
   loadLimit?: number
   placeholder?: string
   disabled?: boolean
+  invalid?: boolean
   searchPlaceholder?: string
   /** Message when no options available (no search keyword) */
   emptyText?: string

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

@@ -38,6 +38,7 @@ const meta = {
     modelValue: { control: 'text' },
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     loading: { control: 'boolean' },
     filter: { control: 'boolean' },
     multiple: { control: 'boolean' },
@@ -48,6 +49,7 @@ const meta = {
     modelValue: undefined,
     placeholder: 'Select an option',
     disabled: false,
+    invalid: false,
     loading: false,
     filter: false,
     multiple: false,
@@ -290,6 +292,13 @@ export const Loading: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -29,6 +29,7 @@ const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
   modelValue: undefined,
   placeholder: undefined,
   disabled: false,
+  invalid: false,
   loading: false,
   filter: false,
   searchPlaceholder: undefined,
@@ -36,6 +37,8 @@ const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
   multiple: false,
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: TValue | TValue[]]
   'search': [value: string]
@@ -154,10 +157,16 @@ function handleClear (event: MouseEvent) {
         role="combobox"
         tabindex="0"
         :aria-expanded="open"
+        :aria-invalid="isInvalid || undefined"
         :data-disabled="disabled || undefined"
         :data-state="open ? 'open' : 'closed'"
         class="
           data-[state=open]:border-ring data-[state=open]:ring-ring/50
+          aria-invalid:ring-destructive/20 aria-invalid:border-destructive
+          dark:aria-invalid:ring-destructive/40
+          aria-invalid:data-[state=open]:border-destructive
+          aria-invalid:data-[state=open]:ring-destructive/20
+          dark:aria-invalid:data-[state=open]:ring-destructive/40
           cursor-pointer
           data-[state=open]:ring-[3px]
         "

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

@@ -13,6 +13,7 @@ export type SelectBaseProps<V extends string | number = string, M = unknown> = {
   options?: SelectOption<V, M>[]
   placeholder?: string
   disabled?: boolean
+  invalid?: boolean
   /** Show a spinner in place of the chevron */
   loading?: boolean
   /** true: enable client-side label filter; function: custom filter (disables internal filter) */

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

@@ -17,6 +17,8 @@ const emit = defineEmits<{
   'change': [value: string]
 }>()
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 function handleInput (event: Event) {
   const target = event.target as HTMLTextAreaElement
   emit('update:modelValue', target.value)
@@ -40,7 +42,7 @@ const mergedClass = computed(() =>
     :modelValue="modelValue"
     :rows="rows"
     :class="mergedClass"
-    :aria-invalid="invalid || undefined"
+    :aria-invalid="isInvalid || undefined"
     :data-1p-ignore="autocomplete === 'off' || !autocomplete ? true : undefined"
     :autocomplete="autocomplete || 'off'"
     v-bind="$attrs"

package/app/composables/useFormItemInvalid.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+
+const formItemInvalidKey: InjectionKey<Ref<boolean>> = Symbol('formItemInvalid')
+
+/**
+ * Resolves the effective invalid state for an input-like component, combining
+ * its own `invalid` prop with any ancestor FormItem's error state. Re-provides
+ * the combined state so nested input-likes (e.g. Input inside DatePicker)
+ * inherit it without manual prop forwarding.
+ */
+export function useFormItemInvalid (localInvalid?: MaybeRefOrGetter<boolean | undefined>) {
+  const ancestor = inject(formItemInvalidKey, ref(false))
+  const effective = computed(() => !!toValue(localInvalid) || ancestor.value)
+  provide(formItemInvalidKey, effective)
+  return effective
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.8.8",
+  "version": "0.9.1",
   "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": "802c526041ac9f00b5c54357d6a36fe4e549929c"
+  "gitHead": "84fc05150b4f347b2927ab7bd444101fa8696b76"
 }