@auronui/vue 1.3.0 → 1.4.0

package/dist/components/input/Input.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/Input.vue"],"sourcesContent":["<!--\n  Input — reference form-field component for @auronui/vue.\n\n  This is the canonical template for every form field in the library\n  (Textarea, NumberInput, DateInput, Select, etc.). Porting a new field\n  means mirroring its prop surface, slot layout, data-attribute contract,\n  CSS selector pairing, and a11y wiring. Keep these in sync.\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.input-root)                         ← layout container, carries class/data-attrs\n      label [outside | outside-left]           ← rendered here when placement !== 'inside'\n      mainWrapper (.input__main-wrapper)       ← groups field + helper vertically\n        inputWrapper (.input)                  ← styled field box (border, bg, focus)\n          label [inside]                       ← rendered here when placement === 'inside'\n          startContent (.input__start-content) ← leading icon slot\n          <input ref=\"inputEl\">                ← the native element\n          endContent (.input__end-content)     ← trailing icon slot\n          clearButton (.input__clear-button)   ← × button, after endContent\n          passwordToggle (.input__password-toggle) ← eye button, type=\"password\" only\n        helperWrapper (.input__helper-wrapper) ← holds description XOR error\n          errorMessage | description\n\n  ─── Data attributes on base (selector hooks) ──────────────────────────\n    data-invalid    — mirrors isInvalid\n    data-disabled   — mirrors isDisabled\n    data-readonly   — mirrors isReadonly\n    data-required   — mirrors isRequired\n    data-has-label  — true when label prop is set (any placement)\n    data-has-helper — true when description or error is visible\n    data-filled     — set on inputWrapper when the value is non-empty (for\n                      floating-label up-state)\n\n  Every interactive CSS rule in input.css pairs a pseudo-class with its\n  data-attribute counterpart (Reka UI selector pairing rule), e.g.\n    &:focus-within, &[data-focused=\"true\"] { ... }\n\n  ─── v-model ───────────────────────────────────────────────────────────\n    <Input v-model=\"value\" />   -- string | number | null\n\n  ─── Emits ─────────────────────────────────────────────────────────────\n    @clear   -- emitted when the user activates the clear (×) button.\n                The input is already empty and refocused by this point.\n\n  ─── Slots ─────────────────────────────────────────────────────────────\n    #startContent  -- leading icon / adornment\n    #endContent    -- trailing icon / adornment (renders BEFORE clear/toggle,\n                      so you can combine them freely)\n\n  ─── Accessibility contract (audited by vitest-axe) ────────────────────\n    • <label for=\"{inputId}\"> wraps the label text.\n    • aria-invalid reflects isInvalid.\n    • aria-describedby points to whichever helper is rendered (error wins).\n    • Required field uses the native `required` attribute; the visual\n      asterisk is aria-hidden.\n    • Clear button: tabindex=-1 (out of form tab flow), aria-label.\n    • Password toggle: tabbable, aria-pressed reflects visibility.\n    • All transitions are wrapped in motion-reduce:transition-none.\n\n  ─── Reuse checklist for new form fields ───────────────────────────────\n    1. Copy prop names verbatim (variant, size, color, labelPlacement,\n       fullWidth, isInvalid, isDisabled, isReadonly, isRequired, label,\n       description, errorMessage, class, classNames).\n    2. Expose the same slot keys in tailwind-variants.\n    3. Emit the same data-attributes on the root + data-filled on the\n       field box.\n    4. Reuse the aria-describedby / error-vs-description precedence\n       logic verbatim.\n    5. Generate ids with useId(), scope helper ids as `{id}-error` /\n       `{id}-description`.\n    6. Default labelPlacement to 'inside' and apply the inside-label\n       CSS via a compoundVariant of (hasLabel=true, labelPlacement='inside').\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'\nimport { inputVariants, type InputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  showPasswordToggle: false,\n  type: 'text',\n})\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the user activates the clear (×) button.\n   * At the time this fires the v-model value is already '' and focus\n   * has been returned to the input element.\n   */\n  clear: []\n}>()\n\n/**\n * Two-way value. String for text-like types, number for type=\"number\",\n * null allowed so controlled consumers can represent \"no value\" without\n * coercing to empty string.\n */\nconst modelValue = defineModel<string | number | null>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: InputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: InputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: InputVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the input (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: InputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute on the input. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the input when value is non-empty. @default false */\n  isClearable?: boolean\n  /** Shows a show/hide eye button. Only active when `type === 'password'`. @default false */\n  showPasswordToggle?: boolean\n  /** Native input type (e.g. `text`, `email`, `password`, `number`). @default 'text' */\n  type?: string\n  /** Placeholder shown when empty. Hidden behind the floating label until focused/filled for `labelPlacement: 'inside'`. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. Takes precedence over `description`. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   *\n   * @example\n   * ```vue\n   * <Input :class-names=\"{ input: 'text-xl', inputWrapper: 'border-2 border-blue-500' }\" />\n   * ```\n   *\n   * Available slots: `base`, `mainWrapper`, `inputWrapper`, `input`,\n   * `label`, `startContent`, `endContent`, `clearButton`, `passwordToggle`,\n   * `helperWrapper`, `description`, `errorMessage`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    input: ClassValue\n    label: ClassValue\n    startContent: ClassValue\n    endContent: ClassValue\n    clearButton: ClassValue\n    passwordToggle: ClassValue\n    helperWrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst inputEl = useTemplateRef<HTMLInputElement>('inputEl')\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(\n  () => modelValue.value !== null && modelValue.value !== undefined && String(modelValue.value) !== '',\n)\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isPasswordVisible = ref(false)\nconst isPasswordField = computed(() => props.type === 'password')\nconst effectiveType = computed(() =>\n  isPasswordField.value && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\nconst showPasswordToggleButton = computed(\n  () => props.showPasswordToggle && isPasswordField.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => inputEl.value?.focus())\n}\n\nfunction togglePasswordVisibility() {\n  isPasswordVisible.value = !isPasswordVisible.value\n}\n\nconst slotFns = computed(() =>\n  inputVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <div\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"inputEl\"\n          v-model=\"modelValue\"\n          :type=\"effectiveType\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        >\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"composeClassName(slotFns.clearButton(), props.classNames?.clearButton)\"\n          aria-label=\"Clear input\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n        <button\n          v-if=\"showPasswordToggleButton\"\n          type=\"button\"\n          :class=\"composeClassName(slotFns.passwordToggle(), props.classNames?.passwordToggle)\"\n          :aria-label=\"isPasswordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"isPasswordVisible\"\n          @click=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"isPasswordVisible\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n            <line\n              x1=\"1\"\n              y1=\"1\"\n              x2=\"23\"\n              y2=\"23\"\n            />\n          </svg>\n          <svg\n            v-else\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"3\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/Input.vue"],"sourcesContent":["<!--\n  Input — reference form-field component for @auronui/vue.\n\n  This is the canonical template for every form field in the library\n  (Textarea, NumberInput, DateInput, Select, etc.). Porting a new field\n  means mirroring its prop surface, slot layout, data-attribute contract,\n  CSS selector pairing, and a11y wiring. Keep these in sync.\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.input-root)                         ← layout container, carries class/data-attrs\n      label [outside | outside-left]           ← rendered here when placement !== 'inside'\n      mainWrapper (.input__main-wrapper)       ← groups field + helper vertically\n        inputWrapper (.input)                  ← styled field box (border, bg, focus)\n          label [inside]                       ← rendered here when placement === 'inside'\n          startContent (.input__start-content) ← leading icon slot\n          <input ref=\"inputEl\">                ← the native element\n          endContent (.input__end-content)     ← trailing icon slot\n          clearButton (.input__clear-button)   ← × button, after endContent\n          passwordToggle (.input__password-toggle) ← eye button, type=\"password\" only\n        helperWrapper (.input__helper-wrapper) ← holds description XOR error\n          errorMessage | description\n\n  ─── Data attributes on base (selector hooks) ──────────────────────────\n    data-invalid    — mirrors isInvalid\n    data-disabled   — mirrors isDisabled\n    data-readonly   — mirrors isReadOnly\n    data-required   — mirrors isRequired\n    data-has-label  — true when label prop is set (any placement)\n    data-has-helper — true when description or error is visible\n    data-filled     — set on inputWrapper when the value is non-empty (for\n                      floating-label up-state)\n\n  Every interactive CSS rule in input.css pairs a pseudo-class with its\n  data-attribute counterpart (Reka UI selector pairing rule), e.g.\n    &:focus-within, &[data-focused=\"true\"] { ... }\n\n  ─── v-model ───────────────────────────────────────────────────────────\n    <Input v-model=\"value\" />   -- string | number | null\n\n  ─── Emits ─────────────────────────────────────────────────────────────\n    @clear   -- emitted when the user activates the clear (×) button.\n                The input is already empty and refocused by this point.\n\n  ─── Slots ─────────────────────────────────────────────────────────────\n    #startContent  -- leading icon / adornment\n    #endContent    -- trailing icon / adornment (renders BEFORE clear/toggle,\n                      so you can combine them freely)\n\n  ─── Accessibility contract (audited by vitest-axe) ────────────────────\n    • <label for=\"{inputId}\"> wraps the label text.\n    • aria-invalid reflects isInvalid.\n    • aria-describedby points to whichever helper is rendered (error wins).\n    • Required field uses the native `required` attribute; the visual\n      asterisk is aria-hidden.\n    • Clear button: tabindex=-1 (out of form tab flow), aria-label.\n    • Password toggle: tabbable, aria-pressed reflects visibility.\n    • All transitions are wrapped in motion-reduce:transition-none.\n\n  ─── Reuse checklist for new form fields ───────────────────────────────\n    1. Copy prop names verbatim (variant, size, color, labelPlacement,\n       fullWidth, isInvalid, isDisabled, isReadOnly, isRequired, label,\n       description, errorMessage, class, classNames).\n    2. Expose the same slot keys in tailwind-variants.\n    3. Emit the same data-attributes on the root + data-filled on the\n       field box.\n    4. Use the `useFormField` composable (packages/vue/src/composables/useFormField.ts)\n       for the description/error/label-visibility state machine, and the\n       `FieldLabel` / `FormFieldHelper` components (components/_shared/) for\n       the repeated label and helper markup — do not hand-roll these again.\n    5. Generate ids with useId(), scope helper ids as `{id}-error` /\n       `{id}-description`.\n    6. Default labelPlacement to 'inside' and apply the inside-label\n       CSS via a compoundVariant of (hasLabel=true, labelPlacement='inside').\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'\nimport { inputVariants, type InputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\nimport { useFormField } from '../../composables/useFormField'\nimport FieldLabel from '../_shared/FieldLabel.vue'\nimport FormFieldHelper from '../_shared/FormFieldHelper.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: undefined,\n  isReadonly: undefined,\n  isRequired: false,\n  isClearable: false,\n  showPasswordToggle: false,\n  type: 'text',\n})\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the user activates the clear (×) button.\n   * At the time this fires the v-model value is already '' and focus\n   * has been returned to the input element.\n   */\n  clear: []\n}>()\n\n/**\n * Two-way value. String for text-like types, number for type=\"number\",\n * null allowed so controlled consumers can represent \"no value\" without\n * coercing to empty string.\n */\nconst modelValue = defineModel<string | number | null>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: InputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: InputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: InputVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the input (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: InputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute on the input. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the input when value is non-empty. @default false */\n  isClearable?: boolean\n  /** Shows a show/hide eye button. Only active when `type === 'password'`. @default false */\n  showPasswordToggle?: boolean\n  /** Native input type (e.g. `text`, `email`, `password`, `number`). @default 'text' */\n  type?: string\n  /** Placeholder shown when empty. Hidden behind the floating label until focused/filled for `labelPlacement: 'inside'`. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. Takes precedence over `description`. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   *\n   * @example\n   * ```vue\n   * <Input :class-names=\"{ input: 'text-xl', inputWrapper: 'border-2 border-blue-500' }\" />\n   * ```\n   *\n   * Available slots: `base`, `mainWrapper`, `inputWrapper`, `input`,\n   * `label`, `startContent`, `endContent`, `clearButton`, `passwordToggle`,\n   * `helperWrapper`, `description`, `errorMessage`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    input: ClassValue\n    label: ClassValue\n    startContent: ClassValue\n    endContent: ClassValue\n    clearButton: ClassValue\n    passwordToggle: ClassValue\n    helperWrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst inputEl = useTemplateRef<HTMLInputElement>('inputEl')\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Input', 'isReadOnly', () => props.isReadOnly, 'isReadonly', () => props.isReadonly,\n)\n\nconst isFilled = computed(\n  () => modelValue.value !== null && modelValue.value !== undefined && String(modelValue.value) !== '',\n)\n\nconst {\n  descriptionId,\n  errorMessageId,\n  showError,\n  showDescription,\n  hasHelper,\n  ariaDescribedBy,\n  hasLabel,\n  showOutsideLabel,\n  showInsideLabel,\n  rootDataAttrs,\n} = useFormField({\n  fieldId: () => inputId.value,\n  label: () => props.label,\n  description: () => props.description,\n  errorMessage: () => props.errorMessage,\n  isInvalid: () => props.isInvalid,\n  isDisabled: () => props.isDisabled,\n  isReadOnly: () => isReadOnly.value,\n  isRequired: () => props.isRequired,\n  labelPlacement: () => props.labelPlacement,\n})\n\nconst isPasswordVisible = ref(false)\nconst isPasswordField = computed(() => props.type === 'password')\nconst effectiveType = computed(() =>\n  isPasswordField.value && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst isInteractive = computed(() => !props.isDisabled && !isReadOnly.value)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\nconst showPasswordToggleButton = computed(\n  () => props.showPasswordToggle && isPasswordField.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => inputEl.value?.focus())\n}\n\nfunction togglePasswordVisibility() {\n  isPasswordVisible.value = !isPasswordVisible.value\n}\n\nconst slotFns = computed(() =>\n  inputVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: isReadOnly.value,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    v-bind=\"rootDataAttrs\"\n  >\n    <FieldLabel\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :label=\"label\"\n      :is-required=\"isRequired\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    />\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <div\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <FieldLabel\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :label=\"label\"\n          :is-required=\"isRequired\"\n          :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n        />\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"inputEl\"\n          v-model=\"modelValue\"\n          :type=\"effectiveType\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadOnly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        >\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"composeClassName(slotFns.clearButton(), props.classNames?.clearButton)\"\n          aria-label=\"Clear input\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n        <button\n          v-if=\"showPasswordToggleButton\"\n          type=\"button\"\n          :class=\"composeClassName(slotFns.passwordToggle(), props.classNames?.passwordToggle)\"\n          :aria-label=\"isPasswordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"isPasswordVisible\"\n          @click=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"isPasswordVisible\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n            <line\n              x1=\"1\"\n              y1=\"1\"\n              x2=\"23\"\n              y2=\"23\"\n            />\n          </svg>\n          <svg\n            v-else\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"3\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <FormFieldHelper\n        :has-helper=\"hasHelper\"\n        :show-error=\"showError\"\n        :show-description=\"showDescription\"\n        :error-message=\"errorMessage\"\n        :description=\"description\"\n        :error-message-id=\"errorMessageId\"\n        :description-id=\"descriptionId\"\n        :wrapper-class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n        :error-class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        :description-class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/input-otp/InputOTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  /** Text direction forwarded to PinInputRoot. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to PinInputRoot. */\n  id?: string\n  /** Whether PinInputRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render PinInputRoot as. */\n  as?: string\n  /** Whether the input is required. */\n  required?: boolean\n  /** Whether each PinInputInput renders as a child element. */\n  inputAsChild?: boolean\n  /** Element or component to render each PinInputInput as. */\n  inputAs?: string\n  class?: ClassValue\n  /** Optional per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    slot: ClassValue\n  }>\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  disabled: false,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  dir: undefined,\n  id: undefined,\n  asChild: false,\n  as: undefined,\n  required: false,\n  inputAsChild: false,\n  inputAs: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"disabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :dir=\"props.dir\"\n    :id=\"props.id\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"props.required\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"composeClassName(slotFns.group(), props.classNames?.group)\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :as-child=\"props.inputAsChild\"\n        :as=\"props.inputAs\"\n        :class=\"composeClassName(slotFns.slot(), props.classNames?.slot)\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InputOTP.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  /** Text direction forwarded to PinInputRoot. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to PinInputRoot. */\n  id?: string\n  /** Whether PinInputRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render PinInputRoot as. */\n  as?: string\n  isRequired?: boolean\n  /**\n   * Whether the input is required.\n   * @deprecated Use isRequired instead.\n   */\n  required?: boolean\n  /** Whether each PinInputInput renders as a child element. */\n  inputAsChild?: boolean\n  /** Element or component to render each PinInputInput as. */\n  inputAs?: string\n  class?: ClassValue\n  /** Optional per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    slot: ClassValue\n  }>\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  isDisabled: undefined,\n  disabled: undefined,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  dir: undefined,\n  id: undefined,\n  asChild: false,\n  as: undefined,\n  isRequired: undefined,\n  required: undefined,\n  inputAsChild: false,\n  inputAs: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'InputOTP', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'InputOTP', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"isDisabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :dir=\"props.dir\"\n    :id=\"props.id\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"isRequired\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"composeClassName(slotFns.group(), props.classNames?.group)\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :as-child=\"props.inputAsChild\"\n        :as=\"props.inputAs\"\n        :class=\"composeClassName(slotFns.slot(), props.classNames?.slot)\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":""}

package/dist/components/input-otp/InputOTP.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, unref, withCtx } from "vue";
 import { inputOTPVariants } from "@auronui/styles";
 import { PinInputInput, PinInputRoot } from "reka-ui";
@@ -16,9 +17,13 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			type: Boolean,
 			default: false
 		},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		placeholder: { default: "" },
 		modelValue: { default: void 0 },
@@ -32,9 +37,13 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			default: false
 		},
 		as: { default: void 0 },
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
 		required: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		inputAsChild: {
 			type: Boolean,
@@ -57,6 +66,8 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const isDisabled = useDeprecatedBooleanProp("InputOTP", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
+		const isRequired = useDeprecatedBooleanProp("InputOTP", "isRequired", () => props.isRequired, "required", () => props.required);
 		const slotFns = computed(() => inputOTPVariants({ variant: props.variant }));
 		const modelValueArray = computed(() => (props.modelValue ?? "").split(""));
 		const handleUpdate = (arr) => emit("update:modelValue", arr.join(""));
@@ -64,7 +75,7 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(PinInputRoot), {
 				"model-value": modelValueArray.value,
-				disabled: __props.disabled,
+				disabled: unref(isDisabled),
 				placeholder: __props.placeholder,
 				type: __props.type,
 				otp: __props.otp,
@@ -74,7 +85,7 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				id: props.id,
 				"as-child": props.asChild,
 				as: props.as,
-				required: props.required,
+				required: unref(isRequired),
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:modelValue": handleUpdate,
 				onComplete: handleComplete

package/dist/components/input-otp/InputOTP.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  /** Text direction forwarded to PinInputRoot. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to PinInputRoot. */\n  id?: string\n  /** Whether PinInputRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render PinInputRoot as. */\n  as?: string\n  /** Whether the input is required. */\n  required?: boolean\n  /** Whether each PinInputInput renders as a child element. */\n  inputAsChild?: boolean\n  /** Element or component to render each PinInputInput as. */\n  inputAs?: string\n  class?: ClassValue\n  /** Optional per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    slot: ClassValue\n  }>\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  disabled: false,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  dir: undefined,\n  id: undefined,\n  asChild: false,\n  as: undefined,\n  required: false,\n  inputAsChild: false,\n  inputAs: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"disabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :dir=\"props.dir\"\n    :id=\"props.id\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"props.required\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"composeClassName(slotFns.group(), props.classNames?.group)\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :as-child=\"props.inputAsChild\"\n        :as=\"props.inputAs\"\n        :class=\"composeClassName(slotFns.slot(), props.classNames?.slot)\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAsDd,MAAM,OAAO;EAKb,MAAM,UAAU,eAAe,iBAAiB,EAAE,SAAS,MAAM,SAAS,CAAC,CAAA;EAE3E,MAAM,kBAAkB,gBACrB,MAAM,cAAc,IAAI,MAAM,GAAE,CACnC;EAEA,MAAM,gBAAgB,QAAkB,KAAK,qBAAqB,IAAI,KAAK,GAAG,CAAA;EAC9E,MAAM,kBAAkB,QAAkB,KAAK,YAAY,IAAI,KAAK,GAAG,CAAA;;uBAIrE,YA2Be,MAAA,aAAA,EAAA;IA1BZ,eAAa,gBAAA;IACb,UAAU,QAAA;IACV,aAAa,QAAA;IACb,MAAM,QAAA;IACN,KAAK,QAAA;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,KAAK,MAAM;IACX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,IAAI,MAAM;IACV,UAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,uBAAoB;IACpB,YAAU;;2BAWL,CATN,mBASM,OAAA,EATA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACpE,mBAOE,UAAA,MAAA,WANY,QAAA,SAAL,MAAC;yBADV,YAOE,MAAA,cAAA,EAAA;MALC,KAAK,IAAC;MACN,OAAO,IAAC;MACR,YAAU,MAAM;MAChB,IAAI,MAAM;MACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA"}
+{"version":3,"file":"InputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  /** Text direction forwarded to PinInputRoot. */\n  dir?: 'ltr' | 'rtl'\n  /** HTML id attribute forwarded to PinInputRoot. */\n  id?: string\n  /** Whether PinInputRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render PinInputRoot as. */\n  as?: string\n  isRequired?: boolean\n  /**\n   * Whether the input is required.\n   * @deprecated Use isRequired instead.\n   */\n  required?: boolean\n  /** Whether each PinInputInput renders as a child element. */\n  inputAsChild?: boolean\n  /** Element or component to render each PinInputInput as. */\n  inputAs?: string\n  class?: ClassValue\n  /** Optional per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    slot: ClassValue\n  }>\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  isDisabled: undefined,\n  disabled: undefined,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  dir: undefined,\n  id: undefined,\n  asChild: false,\n  as: undefined,\n  isRequired: undefined,\n  required: undefined,\n  inputAsChild: false,\n  inputAs: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'InputOTP', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'InputOTP', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"isDisabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :dir=\"props.dir\"\n    :id=\"props.id\"\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    :required=\"isRequired\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"composeClassName(slotFns.group(), props.classNames?.group)\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :as-child=\"props.inputAsChild\"\n        :as=\"props.inputAs\"\n        :class=\"composeClassName(slotFns.slot(), props.classNames?.slot)\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EA8Dd,MAAM,OAAO;EAKb,MAAM,aAAa,yBACjB,YAAY,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC5E;EAEA,MAAM,aAAa,yBACjB,YAAY,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC5E;EAEA,MAAM,UAAU,eAAe,iBAAiB,EAAE,SAAS,MAAM,SAAS,CAAC,CAAA;EAE3E,MAAM,kBAAkB,gBACrB,MAAM,cAAc,IAAI,MAAM,GAAE,CACnC;EAEA,MAAM,gBAAgB,QAAkB,KAAK,qBAAqB,IAAI,KAAK,GAAG,CAAA;EAC9E,MAAM,kBAAkB,QAAkB,KAAK,YAAY,IAAI,KAAK,GAAG,CAAA;;uBAIrE,YA2Be,MAAA,aAAA,EAAA;IA1BZ,eAAa,gBAAA;IACb,UAAU,MAAA,WAAU;IACpB,aAAa,QAAA;IACb,MAAM,QAAA;IACN,KAAK,QAAA;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,KAAK,MAAM;IACX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,IAAI,MAAM;IACV,UAAU,MAAA,WAAU;IACpB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,uBAAoB;IACpB,YAAU;;2BAWL,CATN,mBASM,OAAA,EATA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACpE,mBAOE,UAAA,MAAA,WANY,QAAA,SAAL,MAAC;yBADV,YAOE,MAAA,cAAA,EAAA;MALC,KAAK,IAAC;MACN,OAAO,IAAC;MACR,YAAU,MAAM;MAChB,IAAI,MAAM;MACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA"}

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { linkVariants, type LinkVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string | object\n  href?: string\n  target?: string\n  rel?: string\n  isExternal?: boolean\n  disabled?: boolean\n  color?: LinkVariants['color']\n  underline?: LinkVariants['underline']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    icon: ClassValue\n  }>\n}>(), {\n  as: 'a',\n  isExternal: false,\n  disabled: false,\n})\n\nconst slotFns = computed(() => linkVariants({\n  color: props.color,\n  underline: props.underline,\n}))\n\n// isExternal auto-applies target + rel (D-19, T-02-EXT)\n// Consumer can override by passing explicit target/rel props\nconst resolvedTarget = computed(() => {\n  if (props.target) return props.target\n  if (props.isExternal) return '_blank'\n  return undefined\n})\n\nconst resolvedRel = computed(() => {\n  if (props.rel) return props.rel\n  if (props.isExternal) return 'noopener noreferrer'\n  return undefined\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :href=\"props.href\"\n    :target=\"resolvedTarget\"\n    :rel=\"resolvedRel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-disabled=\"props.disabled || undefined\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <!-- External link indicator (D-19): inline SVG glyph, 12x12, aria-hidden -->\n    <span\n      v-if=\"props.isExternal\"\n      :class=\"composeClassName(slotFns.icon(), props.classNames?.icon)\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n        <polyline points=\"15 3 21 3 21 9\" />\n        <line\n          x1=\"10\"\n          y1=\"14\"\n          x2=\"21\"\n          y2=\"3\"\n        />\n      </svg>\n    </span>\n  </Primitive>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { linkVariants, type LinkVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  as?: string | object\n  href?: string\n  target?: string\n  rel?: string\n  isExternal?: boolean\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  color?: LinkVariants['color']\n  underline?: LinkVariants['underline']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    icon: ClassValue\n  }>\n}>(), {\n  as: 'a',\n  isExternal: false,\n  isDisabled: undefined,\n  disabled: undefined,\n})\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'Link', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst slotFns = computed(() => linkVariants({\n  color: props.color,\n  underline: props.underline,\n}))\n\n// isExternal auto-applies target + rel (D-19, T-02-EXT)\n// Consumer can override by passing explicit target/rel props\nconst resolvedTarget = computed(() => {\n  if (props.target) return props.target\n  if (props.isExternal) return '_blank'\n  return undefined\n})\n\nconst resolvedRel = computed(() => {\n  if (props.rel) return props.rel\n  if (props.isExternal) return 'noopener noreferrer'\n  return undefined\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :href=\"props.href\"\n    :target=\"resolvedTarget\"\n    :rel=\"resolvedRel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-disabled=\"isDisabled || undefined\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <!-- External link indicator (D-19): inline SVG glyph, 12x12, aria-hidden -->\n    <span\n      v-if=\"props.isExternal\"\n      :class=\"composeClassName(slotFns.icon(), props.classNames?.icon)\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n        <polyline points=\"15 3 21 3 21 9\" />\n        <line\n          x1=\"10\"\n          y1=\"14\"\n          x2=\"21\"\n          y2=\"3\"\n        />\n      </svg>\n    </span>\n  </Primitive>\n</template>\n"],"mappings":""}

package/dist/components/link/Link.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
 import { linkVariants } from "@auronui/styles";
 import { Primitive } from "reka-ui";
@@ -14,9 +15,13 @@ var Link_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			type: Boolean,
 			default: false
 		},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		color: {},
 		underline: {},
@@ -31,6 +36,7 @@ var Link_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	},
 	setup(__props) {
 		const props = __props;
+		const isDisabled = useDeprecatedBooleanProp("Link", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const slotFns = computed(() => linkVariants({
 			color: props.color,
 			underline: props.underline
@@ -50,7 +56,7 @@ var Link_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				target: resolvedTarget.value,
 				rel: resolvedRel.value,
 				class: unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base),
-				"aria-disabled": props.disabled || void 0
+				"aria-disabled": unref(isDisabled) || void 0
 			}, _ctx.$attrs), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), props.isExternal ? (openBlock(), createElementBlock("span", {
 					key: 0,

package/dist/components/link/Link.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/link/Link.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { linkVariants, type LinkVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string | object\n  href?: string\n  target?: string\n  rel?: string\n  isExternal?: boolean\n  disabled?: boolean\n  color?: LinkVariants['color']\n  underline?: LinkVariants['underline']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    icon: ClassValue\n  }>\n}>(), {\n  as: 'a',\n  isExternal: false,\n  disabled: false,\n})\n\nconst slotFns = computed(() => linkVariants({\n  color: props.color,\n  underline: props.underline,\n}))\n\n// isExternal auto-applies target + rel (D-19, T-02-EXT)\n// Consumer can override by passing explicit target/rel props\nconst resolvedTarget = computed(() => {\n  if (props.target) return props.target\n  if (props.isExternal) return '_blank'\n  return undefined\n})\n\nconst resolvedRel = computed(() => {\n  if (props.rel) return props.rel\n  if (props.isExternal) return 'noopener noreferrer'\n  return undefined\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :href=\"props.href\"\n    :target=\"resolvedTarget\"\n    :rel=\"resolvedRel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-disabled=\"props.disabled || undefined\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <!-- External link indicator (D-19): inline SVG glyph, 12x12, aria-hidden -->\n    <span\n      v-if=\"props.isExternal\"\n      :class=\"composeClassName(slotFns.icon(), props.classNames?.icon)\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n        <polyline points=\"15 3 21 3 21 9\" />\n        <line\n          x1=\"10\"\n          y1=\"14\"\n          x2=\"21\"\n          y2=\"3\"\n        />\n      </svg>\n    </span>\n  </Primitive>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAqBd,MAAM,UAAU,eAAe,aAAa;GAC1C,OAAO,MAAM;GACb,WAAW,MAAM;GAClB,CAAC,CAAA;EAIF,MAAM,iBAAiB,eAAe;AACpC,OAAI,MAAM,OAAQ,QAAO,MAAM;AAC/B,OAAI,MAAM,WAAY,QAAO;IAE9B;EAED,MAAM,cAAc,eAAe;AACjC,OAAI,MAAM,IAAK,QAAO,MAAM;AAC5B,OAAI,MAAM,WAAY,QAAO;IAE9B;;uBAIC,YAuCY,MAAA,UAAA,EAvCZ,WAuCY;IAtCT,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,QAAQ,eAAA;IACR,KAAK,YAAA;IACL,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI;IAC3E,iBAAe,MAAM,YAAY,KAAA;MAC1BA,KAAAA,OAAM,EAAA;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,EAGA,MAAM,cAAA,WAAA,EADd,mBA2BO,QAAA;;KAzBJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;KAC/D,eAAY;sCAEZ,mBAqBM,OAAA;KApBJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;KACZ,WAAU;;KAEV,mBAAqE,QAAA,EAA/D,GAAE,4DAA0D,CAAA;KAClE,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA;KACjC,mBAKE,QAAA;MAJA,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG"}
+{"version":3,"file":"Link.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/link/Link.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { linkVariants, type LinkVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  as?: string | object\n  href?: string\n  target?: string\n  rel?: string\n  isExternal?: boolean\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  color?: LinkVariants['color']\n  underline?: LinkVariants['underline']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    icon: ClassValue\n  }>\n}>(), {\n  as: 'a',\n  isExternal: false,\n  isDisabled: undefined,\n  disabled: undefined,\n})\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'Link', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst slotFns = computed(() => linkVariants({\n  color: props.color,\n  underline: props.underline,\n}))\n\n// isExternal auto-applies target + rel (D-19, T-02-EXT)\n// Consumer can override by passing explicit target/rel props\nconst resolvedTarget = computed(() => {\n  if (props.target) return props.target\n  if (props.isExternal) return '_blank'\n  return undefined\n})\n\nconst resolvedRel = computed(() => {\n  if (props.rel) return props.rel\n  if (props.isExternal) return 'noopener noreferrer'\n  return undefined\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :href=\"props.href\"\n    :target=\"resolvedTarget\"\n    :rel=\"resolvedRel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-disabled=\"isDisabled || undefined\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <!-- External link indicator (D-19): inline SVG glyph, 12x12, aria-hidden -->\n    <span\n      v-if=\"props.isExternal\"\n      :class=\"composeClassName(slotFns.icon(), props.classNames?.icon)\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n        <polyline points=\"15 3 21 3 21 9\" />\n        <line\n          x1=\"10\"\n          y1=\"14\"\n          x2=\"21\"\n          y2=\"3\"\n        />\n      </svg>\n    </span>\n  </Primitive>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAwBd,MAAM,aAAa,yBACjB,QAAQ,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACxE;EAEA,MAAM,UAAU,eAAe,aAAa;GAC1C,OAAO,MAAM;GACb,WAAW,MAAM;GAClB,CAAC,CAAA;EAIF,MAAM,iBAAiB,eAAe;AACpC,OAAI,MAAM,OAAQ,QAAO,MAAM;AAC/B,OAAI,MAAM,WAAY,QAAO;IAE9B;EAED,MAAM,cAAc,eAAe;AACjC,OAAI,MAAM,IAAK,QAAO,MAAM;AAC5B,OAAI,MAAM,WAAY,QAAO;IAE9B;;uBAIC,YAuCY,MAAA,UAAA,EAvCZ,WAuCY;IAtCT,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,QAAQ,eAAA;IACR,KAAK,YAAA;IACL,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI;IAC3E,iBAAe,MAAA,WAAU,IAAI,KAAA;MACtBA,KAAAA,OAAM,EAAA;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,EAGA,MAAM,cAAA,WAAA,EADd,mBA2BO,QAAA;;KAzBJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;KAC/D,eAAY;sCAEZ,mBAqBM,OAAA;KApBJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;KACZ,WAAU;;KAEV,mBAAqE,QAAA,EAA/D,GAAE,4DAA0D,CAAA;KAClE,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA;KACjC,mBAKE,QAAA;MAJA,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG"}

package/dist/components/list-box/ListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useAttrs, useTemplateRef } from 'vue'\nimport { useInfiniteScroll } from '@vueuse/core'\nimport { ListboxRoot, ListboxContent, ListboxVirtualizer } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\nimport Button from '../button/Button.vue'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n  /** Allow selecting multiple values (alias for selectionMode=\"multiple\"). */\n  multiple?: boolean\n  /** Orientation of the listbox for keyboard navigation. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Selection behavior when multiple is true. */\n  selectionBehavior?: 'toggle' | 'replace'\n  /** Highlight item on hover. */\n  highlightOnHover?: boolean\n  /** Key used to compare items for equality. */\n  by?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Form field name for native form submission. */\n  name?: string\n  /** Mark the field as required. */\n  required?: boolean\n  /** Render the ListboxContent as a different element. */\n  contentAs?: string\n  /** Merge content props onto child element. */\n  contentAsChild?: boolean\n  /** Hide the selected checkmark on all items (forwarded via context). */\n  hideSelectedIcon?: boolean\n  /** Enable windowed rendering (opt-in). Renders from `items`. */\n  virtualized?: boolean\n  /** Estimated row height in px (or per-index fn) for the virtualizer. */\n  estimateSize?: number | ((index: number) => number)\n  /** Rows rendered outside the visible area. */\n  overscan?: number\n  /** Scroll-viewport height for the content when scrolling is active. */\n  maxHeight?: string | number\n  /** Whether more pages remain to load (gates load-more). */\n  hasMore?: boolean\n  /** A page is currently loading (gates load-more; drives #loading slot). */\n  isLoading?: boolean\n  /** Distance in px from the bottom that triggers load-more. */\n  loadMoreDistance?: number\n  /** How the next page is requested: auto on scroll, or a manual button. */\n  loadMode?: 'scroll' | 'button'\n  /** Label for the manual load-more button (loadMode=\"button\"). */\n  loadMoreLabel?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n  multiple: undefined,\n  orientation: undefined,\n  dir: undefined,\n  selectionBehavior: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  required: undefined,\n  contentAs: undefined,\n  contentAsChild: false,\n  hideSelectedIcon: false,\n  virtualized: false,\n  estimateSize: 36,\n  overscan: 12,\n  maxHeight: '16rem',\n  hasMore: false,\n  isLoading: false,\n  loadMoreDistance: 120,\n  loadMode: 'scroll',\n  loadMoreLabel: 'Load more',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n  'highlight': [context: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n  'load-more': []\n}>()\n\nconst attrs = useAttrs()\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n  hideSelectedIcon: toRef(props, 'hideSelectedIcon'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n\n// Bounded scroll viewport only when the content actually needs to scroll, so\n// default (non-virtualized) ListBoxes are visually unchanged.\n// useTemplateRef on a Reka component resolves to its instance; useInfiniteScroll's\n// internal unrefElement reads `.$el` to get the scroll DOM node.\nconst contentRef = useTemplateRef<HTMLElement>('content')\n\n// Re-arm latch. useInfiniteScroll keeps re-invoking onLoadMore while the scroll\n// element stays at the bottom and canLoadMore is true. Emitting `load-more` does\n// not itself flip hasMore/isLoading, so without this guard it fires in a tight\n// loop (unbounded emits → hang). We record the item count at the moment we ask\n// for a page and refuse to ask again until the dataset actually grows — i.e.\n// until the consumer has appended the next page.\nconst lastRequestedCount = ref(-1)\nuseInfiniteScroll(\n  contentRef,\n  () => {\n    lastRequestedCount.value = props.items?.length ?? 0\n    emit('load-more')\n  },\n  {\n    // Read once at setup: useScroll consumes `offset.bottom` as a raw number\n    // (no toValue), so a getter/ref here would break arrival math. Hot-swapping\n    // loadMoreDistance after mount is not supported (not a real use case).\n    distance: props.loadMoreDistance,\n    canLoadMore: () =>\n      props.loadMode === 'scroll'\n      && props.hasMore\n      && !props.isLoading\n      && (props.items?.length ?? 0) !== lastRequestedCount.value,\n  },\n)\n\n// Manual load-more (loadMode=\"button\"). User-driven, so no re-arm latch needed —\n// the hasMore/isLoading gate is enough (and the button is disabled while loading).\nfunction requestLoadMore() {\n  if (props.hasMore && !props.isLoading) emit('load-more')\n}\n\nconst needsScroll = computed(() => props.virtualized)\nconst contentStyle = computed(() =>\n  needsScroll.value\n    ? { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflowY: 'auto' as const }\n    : undefined,\n)\n\n// Stable array references for Reka. Building a fresh array inline on every render\n// would retrigger Reka's `watch(modelValue)`, which re-highlights and\n// scrollIntoView's the selected/first item — making the list jump to the top on\n// any unrelated re-render (e.g. when isLoading toggles during load-more). A\n// computed is cached, so the reference only changes when the value really does.\nconst rekaModelValue = computed(() =>\n  props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue),\n)\nconst rekaDefaultValue = computed(() =>\n  props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue),\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"rekaModelValue\"\n    :default-value=\"rekaDefaultValue\"\n    :multiple=\"props.multiple ?? props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionBehavior ?? (props.selectionMode === 'multiple' ? 'toggle' : 'replace')\"\n    :disabled=\"props.isDisabled\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :by=\"props.by\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n    @highlight=\"emit('highlight', $event)\"\n    @entry-focus=\"emit('entry-focus', $event)\"\n    @leave=\"emit('leave', $event)\"\n  >\n    <ListboxContent\n      ref=\"content\"\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :style=\"contentStyle\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <ListboxVirtualizer\n        v-if=\"props.virtualized && props.items\"\n        :options=\"props.items\"\n        :estimate-size=\"props.estimateSize\"\n        :overscan=\"props.overscan\"\n        :text-content=\"(o) => (o.label ?? o.value)\"\n      >\n        <template #default=\"{ option, virtualItem }\">\n          <slot name=\"item\" :item=\"option\" :index=\"virtualItem.index\">\n            <ListBoxItem\n              :value=\"option.value\"\n              :is-disabled=\"option.disabled\"\n              :text-value=\"option.textValue\"\n            >{{ option.label ?? option.value }}</ListBoxItem>\n          </slot>\n        </template>\n      </ListboxVirtualizer>\n\n      <template v-else-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n\n      <slot v-else />\n    </ListboxContent>\n\n    <!-- Bottom area, rendered outside role=\"listbox\" so it does not violate\n         aria-required-children. Scroll mode shows a loading row; button mode\n         shows a manual \"Load more\" button (which conveys its own loading state). -->\n    <div\n      v-if=\"props.loadMode === 'scroll' && props.isLoading\"\n      data-slot=\"list-box-loading\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <slot name=\"loading\">Loading…</slot>\n    </div>\n\n    <div\n      v-if=\"props.loadMode === 'button' && props.hasMore\"\n      class=\"flex justify-center p-2\"\n      data-slot=\"list-box-load-more\"\n    >\n      <slot\n        name=\"loadMore\"\n        :load-more=\"requestLoadMore\"\n        :is-loading=\"props.isLoading\"\n        :has-more=\"props.hasMore\"\n      >\n        <Button\n          size=\"sm\"\n          :is-loading=\"props.isLoading\"\n          :disabled=\"props.isLoading\"\n          data-slot=\"load-more-button\"\n          @click=\"requestLoadMore\"\n        >\n          {{ props.loadMoreLabel }}\n        </Button>\n      </slot>\n    </div>\n  </ListboxRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ListBox.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useAttrs, useTemplateRef } from 'vue'\nimport { useInfiniteScroll } from '@vueuse/core'\nimport { ListboxRoot, ListboxContent, ListboxVirtualizer } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\nimport Button from '../button/Button.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n  /** Allow selecting multiple values (alias for selectionMode=\"multiple\"). */\n  multiple?: boolean\n  /** Orientation of the listbox for keyboard navigation. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Selection behavior when multiple is true. */\n  selectionBehavior?: 'toggle' | 'replace'\n  /** Highlight item on hover. */\n  highlightOnHover?: boolean\n  /** Key used to compare items for equality. */\n  by?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Form field name for native form submission. */\n  name?: string\n  isRequired?: boolean\n  /**\n   * Mark the field as required.\n   * @deprecated Use isRequired instead.\n   */\n  required?: boolean\n  /** Render the ListboxContent as a different element. */\n  contentAs?: string\n  /** Merge content props onto child element. */\n  contentAsChild?: boolean\n  /** Hide the selected checkmark on all items (forwarded via context). */\n  hideSelectedIcon?: boolean\n  /** Enable windowed rendering (opt-in). Renders from `items`. */\n  virtualized?: boolean\n  /** Estimated row height in px (or per-index fn) for the virtualizer. */\n  estimateSize?: number | ((index: number) => number)\n  /** Rows rendered outside the visible area. */\n  overscan?: number\n  /** Scroll-viewport height for the content when scrolling is active. */\n  maxHeight?: string | number\n  /** Whether more pages remain to load (gates load-more). */\n  hasMore?: boolean\n  /** A page is currently loading (gates load-more; drives #loading slot). */\n  isLoading?: boolean\n  /** Distance in px from the bottom that triggers load-more. */\n  loadMoreDistance?: number\n  /** How the next page is requested: auto on scroll, or a manual button. */\n  loadMode?: 'scroll' | 'button'\n  /** Label for the manual load-more button (loadMode=\"button\"). */\n  loadMoreLabel?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n  multiple: undefined,\n  orientation: undefined,\n  dir: undefined,\n  selectionBehavior: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  isRequired: undefined,\n  required: undefined,\n  contentAs: undefined,\n  contentAsChild: false,\n  hideSelectedIcon: false,\n  virtualized: false,\n  estimateSize: 36,\n  overscan: 12,\n  maxHeight: '16rem',\n  hasMore: false,\n  isLoading: false,\n  loadMoreDistance: 120,\n  loadMode: 'scroll',\n  loadMoreLabel: 'Load more',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n  'highlight': [context: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n  'load-more': []\n}>()\n\nconst attrs = useAttrs()\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ListBox', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n  hideSelectedIcon: toRef(props, 'hideSelectedIcon'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n\n// Bounded scroll viewport only when the content actually needs to scroll, so\n// default (non-virtualized) ListBoxes are visually unchanged.\n// useTemplateRef on a Reka component resolves to its instance; useInfiniteScroll's\n// internal unrefElement reads `.$el` to get the scroll DOM node.\nconst contentRef = useTemplateRef<HTMLElement>('content')\n\n// Re-arm latch. useInfiniteScroll keeps re-invoking onLoadMore while the scroll\n// element stays at the bottom and canLoadMore is true. Emitting `load-more` does\n// not itself flip hasMore/isLoading, so without this guard it fires in a tight\n// loop (unbounded emits → hang). We record the item count at the moment we ask\n// for a page and refuse to ask again until the dataset actually grows — i.e.\n// until the consumer has appended the next page.\nconst lastRequestedCount = ref(-1)\nuseInfiniteScroll(\n  contentRef,\n  () => {\n    lastRequestedCount.value = props.items?.length ?? 0\n    emit('load-more')\n  },\n  {\n    // Read once at setup: useScroll consumes `offset.bottom` as a raw number\n    // (no toValue), so a getter/ref here would break arrival math. Hot-swapping\n    // loadMoreDistance after mount is not supported (not a real use case).\n    distance: props.loadMoreDistance,\n    canLoadMore: () =>\n      props.loadMode === 'scroll'\n      && props.hasMore\n      && !props.isLoading\n      && (props.items?.length ?? 0) !== lastRequestedCount.value,\n  },\n)\n\n// Manual load-more (loadMode=\"button\"). User-driven, so no re-arm latch needed —\n// the hasMore/isLoading gate is enough (and the button is disabled while loading).\nfunction requestLoadMore() {\n  if (props.hasMore && !props.isLoading) emit('load-more')\n}\n\nconst needsScroll = computed(() => props.virtualized)\nconst contentStyle = computed(() =>\n  needsScroll.value\n    ? { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflowY: 'auto' as const }\n    : undefined,\n)\n\n// Stable array references for Reka. Building a fresh array inline on every render\n// would retrigger Reka's `watch(modelValue)`, which re-highlights and\n// scrollIntoView's the selected/first item — making the list jump to the top on\n// any unrelated re-render (e.g. when isLoading toggles during load-more). A\n// computed is cached, so the reference only changes when the value really does.\nconst rekaModelValue = computed(() =>\n  props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue),\n)\nconst rekaDefaultValue = computed(() =>\n  props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue),\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"rekaModelValue\"\n    :default-value=\"rekaDefaultValue\"\n    :multiple=\"props.multiple ?? props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionBehavior ?? (props.selectionMode === 'multiple' ? 'toggle' : 'replace')\"\n    :disabled=\"props.isDisabled\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :by=\"props.by\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"isRequired\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n    @highlight=\"emit('highlight', $event)\"\n    @entry-focus=\"emit('entry-focus', $event)\"\n    @leave=\"emit('leave', $event)\"\n  >\n    <ListboxContent\n      ref=\"content\"\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :style=\"contentStyle\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <ListboxVirtualizer\n        v-if=\"props.virtualized && props.items\"\n        :options=\"props.items\"\n        :estimate-size=\"props.estimateSize\"\n        :overscan=\"props.overscan\"\n        :text-content=\"(o) => (o.label ?? o.value)\"\n      >\n        <template #default=\"{ option, virtualItem }\">\n          <slot name=\"item\" :item=\"option\" :index=\"virtualItem.index\">\n            <ListBoxItem\n              :value=\"option.value\"\n              :is-disabled=\"option.disabled\"\n              :text-value=\"option.textValue\"\n            >{{ option.label ?? option.value }}</ListBoxItem>\n          </slot>\n        </template>\n      </ListboxVirtualizer>\n\n      <template v-else-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n\n      <slot v-else />\n    </ListboxContent>\n\n    <!-- Bottom area, rendered outside role=\"listbox\" so it does not violate\n         aria-required-children. Scroll mode shows a loading row; button mode\n         shows a manual \"Load more\" button (which conveys its own loading state). -->\n    <div\n      v-if=\"props.loadMode === 'scroll' && props.isLoading\"\n      data-slot=\"list-box-loading\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <slot name=\"loading\">Loading…</slot>\n    </div>\n\n    <div\n      v-if=\"props.loadMode === 'button' && props.hasMore\"\n      class=\"flex justify-center p-2\"\n      data-slot=\"list-box-load-more\"\n    >\n      <slot\n        name=\"loadMore\"\n        :load-more=\"requestLoadMore\"\n        :is-loading=\"props.isLoading\"\n        :has-more=\"props.hasMore\"\n      >\n        <Button\n          size=\"sm\"\n          :is-loading=\"props.isLoading\"\n          :disabled=\"props.isLoading\"\n          data-slot=\"load-more-button\"\n          @click=\"requestLoadMore\"\n        >\n          {{ props.loadMoreLabel }}\n        </Button>\n      </slot>\n    </div>\n  </ListboxRoot>\n</template>\n"],"mappings":""}

package/dist/components/list-box/ListBox.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import Button_default from "../button/Button.js";
 import { useListBoxProvide } from "./ListBox.context.js";
 import ListBoxItem_default from "./ListBoxItem.js";
@@ -60,6 +61,10 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			default: false
 		},
 		name: { default: void 0 },
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
 		required: {
 			type: Boolean,
 			default: void 0
@@ -106,6 +111,7 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const isRequired = useDeprecatedBooleanProp("ListBox", "isRequired", () => props.isRequired, "required", () => props.required);
 		useListBoxProvide({
 			variant: toRef(props, "variant"),
 			itemVariant: toRef(props, "variant"),
@@ -146,7 +152,7 @@ var ListBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				as: props.as,
 				"as-child": props.asChild,
 				name: props.name,
-				required: props.required,
+				required: unref(isRequired),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", props.selectionMode === "single" ? Array.isArray($event) ? $event[0] : $event : $event)),
 				onHighlight: _cache[1] || (_cache[1] = ($event) => emit("highlight", $event)),
 				onEntryFocus: _cache[2] || (_cache[2] = ($event) => emit("entry-focus", $event)),

package/dist/components/list-box/ListBox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useAttrs, useTemplateRef } from 'vue'\nimport { useInfiniteScroll } from '@vueuse/core'\nimport { ListboxRoot, ListboxContent, ListboxVirtualizer } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\nimport Button from '../button/Button.vue'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n  /** Allow selecting multiple values (alias for selectionMode=\"multiple\"). */\n  multiple?: boolean\n  /** Orientation of the listbox for keyboard navigation. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Selection behavior when multiple is true. */\n  selectionBehavior?: 'toggle' | 'replace'\n  /** Highlight item on hover. */\n  highlightOnHover?: boolean\n  /** Key used to compare items for equality. */\n  by?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Form field name for native form submission. */\n  name?: string\n  /** Mark the field as required. */\n  required?: boolean\n  /** Render the ListboxContent as a different element. */\n  contentAs?: string\n  /** Merge content props onto child element. */\n  contentAsChild?: boolean\n  /** Hide the selected checkmark on all items (forwarded via context). */\n  hideSelectedIcon?: boolean\n  /** Enable windowed rendering (opt-in). Renders from `items`. */\n  virtualized?: boolean\n  /** Estimated row height in px (or per-index fn) for the virtualizer. */\n  estimateSize?: number | ((index: number) => number)\n  /** Rows rendered outside the visible area. */\n  overscan?: number\n  /** Scroll-viewport height for the content when scrolling is active. */\n  maxHeight?: string | number\n  /** Whether more pages remain to load (gates load-more). */\n  hasMore?: boolean\n  /** A page is currently loading (gates load-more; drives #loading slot). */\n  isLoading?: boolean\n  /** Distance in px from the bottom that triggers load-more. */\n  loadMoreDistance?: number\n  /** How the next page is requested: auto on scroll, or a manual button. */\n  loadMode?: 'scroll' | 'button'\n  /** Label for the manual load-more button (loadMode=\"button\"). */\n  loadMoreLabel?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n  multiple: undefined,\n  orientation: undefined,\n  dir: undefined,\n  selectionBehavior: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  required: undefined,\n  contentAs: undefined,\n  contentAsChild: false,\n  hideSelectedIcon: false,\n  virtualized: false,\n  estimateSize: 36,\n  overscan: 12,\n  maxHeight: '16rem',\n  hasMore: false,\n  isLoading: false,\n  loadMoreDistance: 120,\n  loadMode: 'scroll',\n  loadMoreLabel: 'Load more',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n  'highlight': [context: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n  'load-more': []\n}>()\n\nconst attrs = useAttrs()\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n  hideSelectedIcon: toRef(props, 'hideSelectedIcon'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n\n// Bounded scroll viewport only when the content actually needs to scroll, so\n// default (non-virtualized) ListBoxes are visually unchanged.\n// useTemplateRef on a Reka component resolves to its instance; useInfiniteScroll's\n// internal unrefElement reads `.$el` to get the scroll DOM node.\nconst contentRef = useTemplateRef<HTMLElement>('content')\n\n// Re-arm latch. useInfiniteScroll keeps re-invoking onLoadMore while the scroll\n// element stays at the bottom and canLoadMore is true. Emitting `load-more` does\n// not itself flip hasMore/isLoading, so without this guard it fires in a tight\n// loop (unbounded emits → hang). We record the item count at the moment we ask\n// for a page and refuse to ask again until the dataset actually grows — i.e.\n// until the consumer has appended the next page.\nconst lastRequestedCount = ref(-1)\nuseInfiniteScroll(\n  contentRef,\n  () => {\n    lastRequestedCount.value = props.items?.length ?? 0\n    emit('load-more')\n  },\n  {\n    // Read once at setup: useScroll consumes `offset.bottom` as a raw number\n    // (no toValue), so a getter/ref here would break arrival math. Hot-swapping\n    // loadMoreDistance after mount is not supported (not a real use case).\n    distance: props.loadMoreDistance,\n    canLoadMore: () =>\n      props.loadMode === 'scroll'\n      && props.hasMore\n      && !props.isLoading\n      && (props.items?.length ?? 0) !== lastRequestedCount.value,\n  },\n)\n\n// Manual load-more (loadMode=\"button\"). User-driven, so no re-arm latch needed —\n// the hasMore/isLoading gate is enough (and the button is disabled while loading).\nfunction requestLoadMore() {\n  if (props.hasMore && !props.isLoading) emit('load-more')\n}\n\nconst needsScroll = computed(() => props.virtualized)\nconst contentStyle = computed(() =>\n  needsScroll.value\n    ? { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflowY: 'auto' as const }\n    : undefined,\n)\n\n// Stable array references for Reka. Building a fresh array inline on every render\n// would retrigger Reka's `watch(modelValue)`, which re-highlights and\n// scrollIntoView's the selected/first item — making the list jump to the top on\n// any unrelated re-render (e.g. when isLoading toggles during load-more). A\n// computed is cached, so the reference only changes when the value really does.\nconst rekaModelValue = computed(() =>\n  props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue),\n)\nconst rekaDefaultValue = computed(() =>\n  props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue),\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"rekaModelValue\"\n    :default-value=\"rekaDefaultValue\"\n    :multiple=\"props.multiple ?? props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionBehavior ?? (props.selectionMode === 'multiple' ? 'toggle' : 'replace')\"\n    :disabled=\"props.isDisabled\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :by=\"props.by\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"props.required\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n    @highlight=\"emit('highlight', $event)\"\n    @entry-focus=\"emit('entry-focus', $event)\"\n    @leave=\"emit('leave', $event)\"\n  >\n    <ListboxContent\n      ref=\"content\"\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :style=\"contentStyle\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <ListboxVirtualizer\n        v-if=\"props.virtualized && props.items\"\n        :options=\"props.items\"\n        :estimate-size=\"props.estimateSize\"\n        :overscan=\"props.overscan\"\n        :text-content=\"(o) => (o.label ?? o.value)\"\n      >\n        <template #default=\"{ option, virtualItem }\">\n          <slot name=\"item\" :item=\"option\" :index=\"virtualItem.index\">\n            <ListBoxItem\n              :value=\"option.value\"\n              :is-disabled=\"option.disabled\"\n              :text-value=\"option.textValue\"\n            >{{ option.label ?? option.value }}</ListBoxItem>\n          </slot>\n        </template>\n      </ListboxVirtualizer>\n\n      <template v-else-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n\n      <slot v-else />\n    </ListboxContent>\n\n    <!-- Bottom area, rendered outside role=\"listbox\" so it does not violate\n         aria-required-children. Scroll mode shows a loading row; button mode\n         shows a manual \"Load more\" button (which conveys its own loading state). -->\n    <div\n      v-if=\"props.loadMode === 'scroll' && props.isLoading\"\n      data-slot=\"list-box-loading\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <slot name=\"loading\">Loading…</slot>\n    </div>\n\n    <div\n      v-if=\"props.loadMode === 'button' && props.hasMore\"\n      class=\"flex justify-center p-2\"\n      data-slot=\"list-box-load-more\"\n    >\n      <slot\n        name=\"loadMore\"\n        :load-more=\"requestLoadMore\"\n        :is-loading=\"props.isLoading\"\n        :has-more=\"props.hasMore\"\n      >\n        <Button\n          size=\"sm\"\n          :is-loading=\"props.isLoading\"\n          :disabled=\"props.isLoading\"\n          data-slot=\"load-more-button\"\n          @click=\"requestLoadMore\"\n        >\n          {{ props.loadMoreLabel }}\n        </Button>\n      </slot>\n    </div>\n  </ListboxRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"ListBox.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, toRef, useAttrs, useTemplateRef } from 'vue'\nimport { useInfiniteScroll } from '@vueuse/core'\nimport { ListboxRoot, ListboxContent, ListboxVirtualizer } from 'reka-ui'\nimport { listboxVariants, type ListBoxVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxProvide } from './ListBox.context'\nimport ListBoxItem from './ListBoxItem.vue'\nimport Button from '../button/Button.vue'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\ntype ListBoxShorthandItem = { value: string; label?: string; disabled?: boolean; textValue?: string }\n\n// Disable Vue attribute fallthrough — we manually forward ARIA attrs to ListboxContent\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  modelValue?: string | string[]\n  defaultValue?: string | string[]\n  selectionMode?: 'single' | 'multiple'\n  variant?: ListBoxVariants['variant']\n  isDisabled?: boolean\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n  }>\n  /** Shorthand API: render list items from an array instead of the compound slot API */\n  items?: ListBoxShorthandItem[]\n  /** Allow selecting multiple values (alias for selectionMode=\"multiple\"). */\n  multiple?: boolean\n  /** Orientation of the listbox for keyboard navigation. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Reading direction for the component. */\n  dir?: 'ltr' | 'rtl'\n  /** Selection behavior when multiple is true. */\n  selectionBehavior?: 'toggle' | 'replace'\n  /** Highlight item on hover. */\n  highlightOnHover?: boolean\n  /** Key used to compare items for equality. */\n  by?: string\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Form field name for native form submission. */\n  name?: string\n  isRequired?: boolean\n  /**\n   * Mark the field as required.\n   * @deprecated Use isRequired instead.\n   */\n  required?: boolean\n  /** Render the ListboxContent as a different element. */\n  contentAs?: string\n  /** Merge content props onto child element. */\n  contentAsChild?: boolean\n  /** Hide the selected checkmark on all items (forwarded via context). */\n  hideSelectedIcon?: boolean\n  /** Enable windowed rendering (opt-in). Renders from `items`. */\n  virtualized?: boolean\n  /** Estimated row height in px (or per-index fn) for the virtualizer. */\n  estimateSize?: number | ((index: number) => number)\n  /** Rows rendered outside the visible area. */\n  overscan?: number\n  /** Scroll-viewport height for the content when scrolling is active. */\n  maxHeight?: string | number\n  /** Whether more pages remain to load (gates load-more). */\n  hasMore?: boolean\n  /** A page is currently loading (gates load-more; drives #loading slot). */\n  isLoading?: boolean\n  /** Distance in px from the bottom that triggers load-more. */\n  loadMoreDistance?: number\n  /** How the next page is requested: auto on scroll, or a manual button. */\n  loadMode?: 'scroll' | 'button'\n  /** Label for the manual load-more button (loadMode=\"button\"). */\n  loadMoreLabel?: string\n}>(), {\n  modelValue: undefined,\n  defaultValue: undefined,\n  selectionMode: 'single',\n  variant: 'default',\n  isDisabled: false,\n  class: undefined,\n  multiple: undefined,\n  orientation: undefined,\n  dir: undefined,\n  selectionBehavior: undefined,\n  highlightOnHover: undefined,\n  by: undefined,\n  as: undefined,\n  asChild: false,\n  name: undefined,\n  isRequired: undefined,\n  required: undefined,\n  contentAs: undefined,\n  contentAsChild: false,\n  hideSelectedIcon: false,\n  virtualized: false,\n  estimateSize: 36,\n  overscan: 12,\n  maxHeight: '16rem',\n  hasMore: false,\n  isLoading: false,\n  loadMoreDistance: 120,\n  loadMode: 'scroll',\n  loadMoreLabel: 'Load more',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined]\n  'highlight': [context: unknown]\n  'entry-focus': [event: Event]\n  'leave': [event: Event]\n  'load-more': []\n}>()\n\nconst attrs = useAttrs()\n\nconst isRequired = useDeprecatedBooleanProp(\n  'ListBox', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\n// Provide context for ListBoxItem and ListBoxSection children\nuseListBoxProvide({\n  variant: toRef(props, 'variant'),\n  itemVariant: toRef(props, 'variant'),\n  isDisabled: toRef(props, 'isDisabled'),\n  hideSelectedIcon: toRef(props, 'hideSelectedIcon'),\n})\n\nconst slotFns = computed(() =>\n  listboxVariants({ variant: props.variant })\n)\n\n// Bounded scroll viewport only when the content actually needs to scroll, so\n// default (non-virtualized) ListBoxes are visually unchanged.\n// useTemplateRef on a Reka component resolves to its instance; useInfiniteScroll's\n// internal unrefElement reads `.$el` to get the scroll DOM node.\nconst contentRef = useTemplateRef<HTMLElement>('content')\n\n// Re-arm latch. useInfiniteScroll keeps re-invoking onLoadMore while the scroll\n// element stays at the bottom and canLoadMore is true. Emitting `load-more` does\n// not itself flip hasMore/isLoading, so without this guard it fires in a tight\n// loop (unbounded emits → hang). We record the item count at the moment we ask\n// for a page and refuse to ask again until the dataset actually grows — i.e.\n// until the consumer has appended the next page.\nconst lastRequestedCount = ref(-1)\nuseInfiniteScroll(\n  contentRef,\n  () => {\n    lastRequestedCount.value = props.items?.length ?? 0\n    emit('load-more')\n  },\n  {\n    // Read once at setup: useScroll consumes `offset.bottom` as a raw number\n    // (no toValue), so a getter/ref here would break arrival math. Hot-swapping\n    // loadMoreDistance after mount is not supported (not a real use case).\n    distance: props.loadMoreDistance,\n    canLoadMore: () =>\n      props.loadMode === 'scroll'\n      && props.hasMore\n      && !props.isLoading\n      && (props.items?.length ?? 0) !== lastRequestedCount.value,\n  },\n)\n\n// Manual load-more (loadMode=\"button\"). User-driven, so no re-arm latch needed —\n// the hasMore/isLoading gate is enough (and the button is disabled while loading).\nfunction requestLoadMore() {\n  if (props.hasMore && !props.isLoading) emit('load-more')\n}\n\nconst needsScroll = computed(() => props.virtualized)\nconst contentStyle = computed(() =>\n  needsScroll.value\n    ? { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflowY: 'auto' as const }\n    : undefined,\n)\n\n// Stable array references for Reka. Building a fresh array inline on every render\n// would retrigger Reka's `watch(modelValue)`, which re-highlights and\n// scrollIntoView's the selected/first item — making the list jump to the top on\n// any unrelated re-render (e.g. when isLoading toggles during load-more). A\n// computed is cached, so the reference only changes when the value really does.\nconst rekaModelValue = computed(() =>\n  props.modelValue == null ? undefined : ([] as string[]).concat(props.modelValue),\n)\nconst rekaDefaultValue = computed(() =>\n  props.defaultValue == null ? undefined : ([] as string[]).concat(props.defaultValue),\n)\n</script>\n\n<template>\n  <!-- ListboxRoot is an invisible wrapper that manages state; ListboxContent carries role=\"listbox\" -->\n  <!-- We forward attrs (aria-label, aria-labelledby, etc.) to ListboxContent, not the root -->\n  <ListboxRoot\n    :model-value=\"rekaModelValue\"\n    :default-value=\"rekaDefaultValue\"\n    :multiple=\"props.multiple ?? props.selectionMode === 'multiple'\"\n    :selection-behavior=\"props.selectionBehavior ?? (props.selectionMode === 'multiple' ? 'toggle' : 'replace')\"\n    :disabled=\"props.isDisabled\"\n    :orientation=\"props.orientation\"\n    :dir=\"props.dir\"\n    :highlight-on-hover=\"props.highlightOnHover\"\n    :by=\"props.by\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :name=\"props.name\"\n    :required=\"isRequired\"\n    @update:model-value=\"emit('update:modelValue', props.selectionMode === 'single' ? (Array.isArray($event) ? ($event as string[])[0] : $event as string) : $event as string[])\"\n    @highlight=\"emit('highlight', $event)\"\n    @entry-focus=\"emit('entry-focus', $event)\"\n    @leave=\"emit('leave', $event)\"\n  >\n    <ListboxContent\n      ref=\"content\"\n      v-bind=\"attrs\"\n      :as=\"props.contentAs\"\n      :as-child=\"props.contentAsChild\"\n      :style=\"contentStyle\"\n      :class=\"composeClassName(slotFns, props.class, props.classNames?.base)\"\n    >\n      <ListboxVirtualizer\n        v-if=\"props.virtualized && props.items\"\n        :options=\"props.items\"\n        :estimate-size=\"props.estimateSize\"\n        :overscan=\"props.overscan\"\n        :text-content=\"(o) => (o.label ?? o.value)\"\n      >\n        <template #default=\"{ option, virtualItem }\">\n          <slot name=\"item\" :item=\"option\" :index=\"virtualItem.index\">\n            <ListBoxItem\n              :value=\"option.value\"\n              :is-disabled=\"option.disabled\"\n              :text-value=\"option.textValue\"\n            >{{ option.label ?? option.value }}</ListBoxItem>\n          </slot>\n        </template>\n      </ListboxVirtualizer>\n\n      <template v-else-if=\"props.items\">\n        <ListBoxItem\n          v-for=\"item in props.items\"\n          :key=\"item.value\"\n          :value=\"item.value\"\n          :is-disabled=\"item.disabled\"\n          :text-value=\"item.textValue\"\n        >{{ item.label ?? item.value }}</ListBoxItem>\n      </template>\n\n      <slot v-else />\n    </ListboxContent>\n\n    <!-- Bottom area, rendered outside role=\"listbox\" so it does not violate\n         aria-required-children. Scroll mode shows a loading row; button mode\n         shows a manual \"Load more\" button (which conveys its own loading state). -->\n    <div\n      v-if=\"props.loadMode === 'scroll' && props.isLoading\"\n      data-slot=\"list-box-loading\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <slot name=\"loading\">Loading…</slot>\n    </div>\n\n    <div\n      v-if=\"props.loadMode === 'button' && props.hasMore\"\n      class=\"flex justify-center p-2\"\n      data-slot=\"list-box-load-more\"\n    >\n      <slot\n        name=\"loadMore\"\n        :load-more=\"requestLoadMore\"\n        :is-loading=\"props.isLoading\"\n        :has-more=\"props.hasMore\"\n      >\n        <Button\n          size=\"sm\"\n          :is-loading=\"props.isLoading\"\n          :disabled=\"props.isLoading\"\n          data-slot=\"load-more-button\"\n          @click=\"requestLoadMore\"\n        >\n          {{ props.loadMoreLabel }}\n        </Button>\n      </slot>\n    </div>\n  </ListboxRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/menubar/MenubarCheckboxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenubarCheckboxItem.js","names":[],"sources":["../../../src/components/menubar/MenubarCheckboxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'\nimport { menuItemVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  textValue?: string\n  isDisabled?: boolean\n  variant?: 'default' | 'danger'\n  class?: string\n  /** Controlled checked state. */\n  modelValue?: boolean\n  /** Whether this item is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: 'default',\n  class: undefined,\n  modelValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n  'update:modelValue': [value: boolean]\n}>()\n\nconst isSelected = defineModel<boolean>('isSelected', { default: false })\n\nconst slots = menuItemVariants({ variant: props.variant })\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    :model-value=\"props.modelValue ?? isSelected\"\n    :text-value=\"props.textValue\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @update:model-value=\"isSelected = $event; emit('update:modelValue', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      :class=\"slots.indicator()\"\n      force-mount\n    >\n      <!-- Checkmark indicator -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"10\"\n        height=\"10\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-slot=\"menu-item-indicator--checkmark\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"20 6 9 17 4 12\" />\n      </svg>\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"MenubarCheckboxItem.js","names":[],"sources":["../../../src/components/menubar/MenubarCheckboxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'\nimport { menuItemVariants } from '@auronui/styles'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  textValue?: string\n  isDisabled?: boolean\n  variant?: 'default' | 'danger'\n  class?: string\n  /** Controlled checked state. */\n  modelValue?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: undefined,\n  variant: 'default',\n  class: undefined,\n  modelValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n  'update:modelValue': [value: boolean]\n}>()\n\nconst isSelected = defineModel<boolean>('isSelected', { default: false })\n\nconst slots = menuItemVariants({ variant: props.variant })\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'MenubarCheckboxItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    :model-value=\"props.modelValue ?? isSelected\"\n    :text-value=\"props.textValue\"\n    :disabled=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @update:model-value=\"isSelected = $event; emit('update:modelValue', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      :class=\"slots.indicator()\"\n      force-mount\n    >\n      <!-- Checkmark indicator -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"10\"\n        height=\"10\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-slot=\"menu-item-indicator--checkmark\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"20 6 9 17 4 12\" />\n      </svg>\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"],"mappings":""}

package/dist/components/menubar/MenubarCheckboxItem.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { createBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
 import { menuItemVariants } from "@auronui/styles";
 import { MenubarCheckboxItem, MenubarItemIndicator } from "reka-ui";
@@ -8,7 +9,7 @@ var MenubarCheckboxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		variant: { default: "default" },
 		class: { default: void 0 },
@@ -38,11 +39,12 @@ var MenubarCheckboxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const emit = __emit;
 		const isSelected = useModel(__props, "isSelected");
 		const slots = menuItemVariants({ variant: props.variant });
+		const isDisabled = useDeprecatedBooleanProp("MenubarCheckboxItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MenubarCheckboxItem), {
 				"model-value": props.modelValue ?? isSelected.value,
 				"text-value": props.textValue,
-				disabled: props.disabled ?? props.isDisabled,
+				disabled: unref(isDisabled),
 				as: props.as,
 				"as-child": props.asChild,
 				class: normalizeClass([unref(slots).item(), props.class]),

package/dist/components/menubar/MenubarCheckboxItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenubarCheckboxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/menubar/MenubarCheckboxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'\nimport { menuItemVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  textValue?: string\n  isDisabled?: boolean\n  variant?: 'default' | 'danger'\n  class?: string\n  /** Controlled checked state. */\n  modelValue?: boolean\n  /** Whether this item is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: 'default',\n  class: undefined,\n  modelValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n  'update:modelValue': [value: boolean]\n}>()\n\nconst isSelected = defineModel<boolean>('isSelected', { default: false })\n\nconst slots = menuItemVariants({ variant: props.variant })\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    :model-value=\"props.modelValue ?? isSelected\"\n    :text-value=\"props.textValue\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @update:model-value=\"isSelected = $event; emit('update:modelValue', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      :class=\"slots.indicator()\"\n      force-mount\n    >\n      <!-- Checkmark indicator -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"10\"\n        height=\"10\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-slot=\"menu-item-indicator--checkmark\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"20 6 9 17 4 12\" />\n      </svg>\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIA,MAAM,QAAQ;EAwBd,MAAM,OAAO;EAKb,MAAM,aAAa,SAAoB,SAAC,aAAgC;EAExE,MAAM,QAAQ,iBAAiB,EAAE,SAAS,MAAM,SAAS,CAAA;;uBAIvD,YAiCsB,MAAA,oBAAA,EAAA;IAhCnB,eAAa,MAAM,cAAc,WAAA;IACjC,cAAY,MAAM;IAClB,UAAU,MAAM,YAAY,MAAM;IAClC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAA,CAAG,MAAA,MAAK,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;IACjC,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA;AAAE,gBAAA,QAAa;AAAQ,UAAI,qBAAsB,OAAM;;IACzE,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;;2BAsBP,CApBvB,YAoBuB,MAAA,qBAAA,EAAA;KAnBpB,OAAK,eAAE,MAAA,MAAK,CAAC,WAAS,CAAA;KACvB,eAAA;;4BAiBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAdN,mBAcM,OAAA;MAbJ,OAAM;MACN,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,QAAO;MACP,gBAAa;MACb,kBAAe;MACf,mBAAgB;MAChB,aAAU;MACV,eAAY;SAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA;;sBAIrC,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"MenubarCheckboxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/menubar/MenubarCheckboxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'\nimport { menuItemVariants } from '@auronui/styles'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  textValue?: string\n  isDisabled?: boolean\n  variant?: 'default' | 'danger'\n  class?: string\n  /** Controlled checked state. */\n  modelValue?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: undefined,\n  variant: 'default',\n  class: undefined,\n  modelValue: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n  'update:modelValue': [value: boolean]\n}>()\n\nconst isSelected = defineModel<boolean>('isSelected', { default: false })\n\nconst slots = menuItemVariants({ variant: props.variant })\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'MenubarCheckboxItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    :model-value=\"props.modelValue ?? isSelected\"\n    :text-value=\"props.textValue\"\n    :disabled=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @update:model-value=\"isSelected = $event; emit('update:modelValue', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      :class=\"slots.indicator()\"\n      force-mount\n    >\n      <!-- Checkmark indicator -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"10\"\n        height=\"10\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-slot=\"menu-item-indicator--checkmark\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"20 6 9 17 4 12\" />\n      </svg>\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAwBd,MAAM,OAAO;EAKb,MAAM,aAAa,SAAoB,SAAC,aAAgC;EAExE,MAAM,QAAQ,iBAAiB,EAAE,SAAS,MAAM,SAAS,CAAA;EAEzD,MAAM,aAAa,yBACjB,uBAAuB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACvF;;uBAIE,YAiCsB,MAAA,oBAAA,EAAA;IAhCnB,eAAa,MAAM,cAAc,WAAA;IACjC,cAAY,MAAM;IAClB,UAAU,MAAA,WAAU;IACpB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAA,CAAG,MAAA,MAAK,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;IACjC,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA;AAAE,gBAAA,QAAa;AAAQ,UAAI,qBAAsB,OAAM;;IACzE,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;;2BAsBP,CApBvB,YAoBuB,MAAA,qBAAA,EAAA;KAnBpB,OAAK,eAAE,MAAA,MAAK,CAAC,WAAS,CAAA;KACvB,eAAA;;4BAiBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAdN,mBAcM,OAAA;MAbJ,OAAM;MACN,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,QAAO;MACP,gBAAa;MACb,kBAAe;MACf,mBAAgB;MAChB,aAAU;MACV,eAAY;SAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA;;sBAIrC,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/menubar/MenubarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenubarItem.js","names":[],"sources":["../../../src/components/menubar/MenubarItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MenubarItem } from 'reka-ui'\nimport { menuItemVariants, type MenuItemVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  textValue?: string\n  isDisabled?: boolean\n  variant?: MenuItemVariants['variant']\n  shortcut?: string\n  description?: string\n  class?: string\n  /** Whether this item is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: 'default',\n  shortcut: undefined,\n  description: undefined,\n  class: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n}>()\n\nconst slots = menuItemVariants({ variant: props.variant })\n</script>\n\n<template>\n  <MenubarItem\n    :text-value=\"props.textValue\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n\n    <div class=\"flex flex-1 flex-col\">\n      <span data-slot=\"label\">\n        <slot />\n      </span>\n      <span\n        v-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </span>\n    </div>\n\n    <kbd\n      v-if=\"props.shortcut\"\n      data-slot=\"shortcut\"\n      class=\"ml-auto text-xs text-muted font-mono\"\n    >\n      {{ props.shortcut }}\n    </kbd>\n\n    <slot name=\"endContent\" />\n  </MenubarItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"MenubarItem.js","names":[],"sources":["../../../src/components/menubar/MenubarItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MenubarItem } from 'reka-ui'\nimport { menuItemVariants, type MenuItemVariants } from '@auronui/styles'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  textValue?: string\n  isDisabled?: boolean\n  variant?: MenuItemVariants['variant']\n  shortcut?: string\n  description?: string\n  class?: string\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: undefined,\n  variant: 'default',\n  shortcut: undefined,\n  description: undefined,\n  class: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst emit = defineEmits<{\n  select: [event: Event]\n}>()\n\nconst slots = menuItemVariants({ variant: props.variant })\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'MenubarItem', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n</script>\n\n<template>\n  <MenubarItem\n    :text-value=\"props.textValue\"\n    :disabled=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n\n    <div class=\"flex flex-1 flex-col\">\n      <span data-slot=\"label\">\n        <slot />\n      </span>\n      <span\n        v-if=\"props.description\"\n        data-slot=\"description\"\n      >\n        {{ props.description }}\n      </span>\n    </div>\n\n    <!-- Raw <kbd> (not <Kbd>): a menu shortcut renders as plain muted text; <Kbd> applies a\n         boxed keycap style that would break visual parity with HeroUI's menu shortcuts. -->\n    <kbd\n      v-if=\"props.shortcut\"\n      data-slot=\"shortcut\"\n      class=\"ml-auto text-xs text-muted font-mono\"\n    >\n      {{ props.shortcut }}\n    </kbd>\n\n    <slot name=\"endContent\" />\n  </MenubarItem>\n</template>\n"],"mappings":""}

package/dist/components/menubar/MenubarItem.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { menuItemVariants } from "@auronui/styles";
 import { MenubarItem } from "reka-ui";
@@ -19,7 +20,7 @@ var MenubarItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		variant: { default: "default" },
 		shortcut: { default: void 0 },
@@ -40,10 +41,11 @@ var MenubarItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const props = __props;
 		const emit = __emit;
 		const slots = menuItemVariants({ variant: props.variant });
+		const isDisabled = useDeprecatedBooleanProp("MenubarItem", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MenubarItem), {
 				"text-value": props.textValue,
-				disabled: props.disabled ?? props.isDisabled,
+				disabled: unref(isDisabled),
 				as: props.as,
 				"as-child": props.asChild,
 				class: normalizeClass([unref(slots).item(), props.class]),