@soft-stech/bootsman-ui-shadcn 1.4.1 → 1.4.3

package/dist/{variables-CNeTUlbe.js → variables-DVhUyg_H.js}

@@ -1,24 +1,24 @@
 import { defineComponent as $, mergeModels as y, useModel as g, computed as c, openBlock as n, createBlock as I, unref as e, withCtx as r, createVNode as t, createElementVNode as v, createElementBlock as x, Fragment as S, renderList as P, createTextVNode as M, toDisplayString as u, createCommentVNode as k } from "vue";
 /* empty css            */
-import { f as z, y as B } from "./index-qHyoMY5p.js";
+import { f as z, y as B } from "./index-DKlaqzM0.js";
+import "vee-validate";
 import "@vueuse/core";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
-import "vee-validate";
 import { BuiInput as C } from "./components/ui/input/index.js";
-import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-vIpTbd1h.js";
-import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-_KvT2-8Z.js";
-import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-CvbvvbdW.js";
-import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-DHGB-WLw.js";
-import { _ as q } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-BGKDvzJl.js";
+import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-CgsLboTA.js";
+import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-BNN6bEtZ.js";
+import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-DkxJd5P1.js";
+import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-Cm3Rhbn-.js";
+import { _ as q } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-BrrOFWT-.js";
 import "@tanstack/vue-table";
 import "./components/ui/toast/use-toast.js";
 import "@vee-validate/zod";
 import "zod";
 import "./index-BGsblnmA.js";
-import { _ as E } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-Dm3GQPzm.js";
-import { _ as j } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-B6i3KF8J.js";
-import { _ as D } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-JJGF2BE-.js";
-import { _ as F } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-BzXE0IN0.js";
+import { _ as E } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-CnD3O2et.js";
+import { _ as j } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-BwOCzBPt.js";
+import { _ as D } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-l9rrJImX.js";
+import { _ as F } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-CsTM8l1o.js";
 const L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ $({
   __name: "BuiPaginationCommon",
   props: /* @__PURE__ */ y({

package/dist/{x-BROfHUIb.js → x-DjGG8Lwe.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./utils-BiLiPt4t.js";
+import { h as e } from "./utils-Do5XvoZJ.js";
 /**
  * @license lucide-vue-next v0.441.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "type": "module",
   "files": [
     "dist",
@@ -27,7 +27,7 @@
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-vue-next": "0.441.0",
-    "radix-vue": "1.9.5",
+    "radix-vue": "1.9.8",
     "tailwind-merge": "2.5.2",
     "tailwindcss-animate": "1.0.7",
     "v-calendar": "3.1.2"

package/src/components/stories/BuiCombobox.story.vue

@@ -135,8 +135,8 @@ const namespaces = ['default', 'local', 'my-namespace']
                   </BuiButton>
                 </BuiPopoverTrigger>
 
-                <BuiPopoverContent class="w-full min-w-full p-0">
-                  <BuiCommand class="w-full min-w-full p-0">
+                <BuiPopoverContent class="w-[var(--radix-popper-anchor-width)] p-0">
+                  <BuiCommand class="p-0">
                     <BuiCommandInput class="h-9" placeholder="Search" />
                     <BuiCommandEmpty> No results </BuiCommandEmpty>
                     <BuiFormControl>

package/src/components/stories/BuiForm.story.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import LoginForm from '@/components/stories/components/LoginForm.vue'
+import LoginFormHook from '@/components/stories/components/LoginFormHook.vue'
 import UseBuiField from '@/components/stories/components/UseBuiField.vue'
-import LoginForm from './components/LoginForm.vue'
-import LoginFormHook from './components/LoginFormHook.vue'
 </script>
 
 <template>

package/src/components/stories/BuiStepper.story.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import BuiButton from '@/components/ui/button/BuiButton.vue'
+import BuiStepper from '@/components/ui/stepper/BuiStepper.vue'
+import BuiStepperDescription from '@/components/ui/stepper/BuiStepperDescription.vue'
+import BuiStepperItem from '@/components/ui/stepper/BuiStepperItem.vue'
+import BuiStepperSeparator from '@/components/ui/stepper/BuiStepperSeparator.vue'
+import BuiStepperTitle from '@/components/ui/stepper/BuiStepperTitle.vue'
+import BuiStepperTrigger from '@/components/ui/stepper/BuiStepperTrigger.vue'
+import { Check, Circle, Dot } from 'lucide-vue-next'
+
+const steps = [
+  {
+    step: 1,
+    title: 'Your details',
+    description: 'Provide your name and email'
+  },
+  {
+    step: 2,
+    title: 'Company details',
+    description: 'A few details about your company'
+  },
+  {
+    step: 3,
+    title: 'Invite your team',
+    description: 'Start collaborating with your team'
+  }
+]
+</script>
+
+<template>
+  <Story title="BuiStepper" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
+    <Variant title="Horizontal">
+      <BuiStepper class="flex w-full items-start gap-2 p-10">
+        <BuiStepperItem
+          v-for="step in steps"
+          :key="step.step"
+          v-slot="{ state }"
+          class="relative flex w-full flex-col items-center justify-center"
+          :step="step.step"
+        >
+          <BuiStepperSeparator
+            v-if="step.step !== steps[steps.length - 1].step"
+            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
+          />
+
+          <BuiStepperTrigger as-child>
+            <BuiButton
+              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
+              class="z-10 size-10 shrink-0 rounded-full"
+              :class="[
+                state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background'
+              ]"
+            >
+              <Check v-if="state === 'completed'" class="size-5" />
+              <Circle v-if="state === 'active'" />
+              <Dot v-if="state === 'inactive'" />
+            </BuiButton>
+          </BuiStepperTrigger>
+
+          <div class="mt-5 flex flex-col items-center text-center">
+            <BuiStepperTitle
+              :class="[state === 'active' && 'text-primary']"
+              class="text-sm font-semibold transition lg:text-base"
+            >
+              {{ step.title }}
+            </BuiStepperTitle>
+            <BuiStepperDescription
+              :class="[state === 'active' && 'text-primary']"
+              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
+            >
+              {{ step.description }}
+            </BuiStepperDescription>
+          </div>
+        </BuiStepperItem>
+      </BuiStepper>
+    </Variant>
+
+    <Variant title="Vertical">
+      <BuiStepper
+        orientation="vertical"
+        class="mx-auto flex w-full max-w-md flex-col justify-start gap-10 p-10"
+      >
+        <BuiStepperItem
+          v-for="step in steps"
+          :key="step.step"
+          v-slot="{ state }"
+          class="relative flex w-full items-start gap-6"
+          :step="step.step"
+        >
+          <BuiStepperSeparator
+            v-if="step.step !== steps[steps.length - 1].step"
+            class="absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
+          />
+
+          <BuiStepperTrigger as-child>
+            <BuiButton
+              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
+              class="z-10 size-10 shrink-0 rounded-full"
+              :class="[
+                state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background'
+              ]"
+            >
+              <Check v-if="state === 'completed'" class="size-5" />
+              <Circle v-if="state === 'active'" />
+              <Dot v-if="state === 'inactive'" />
+            </BuiButton>
+          </BuiStepperTrigger>
+
+          <div class="flex flex-col gap-1">
+            <BuiStepperTitle
+              :class="[state === 'active' && 'text-primary']"
+              class="text-sm font-semibold transition lg:text-base"
+            >
+              {{ step.title }}
+            </BuiStepperTitle>
+            <BuiStepperDescription
+              :class="[state === 'active' && 'text-primary']"
+              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
+            >
+              {{ step.description }}
+            </BuiStepperDescription>
+          </div>
+        </BuiStepperItem>
+      </BuiStepper>
+    </Variant>
+  </Story>
+</template>

package/src/components/stories/ReadonlyForm.story.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import ReadonlyForm from '@/components/stories/components/ReadonlyForm.vue'
+import ReadonlyFormWrapper from '@/components/stories/components/ReadonlyFormWrapper.vue'
+import { ref } from 'vue'
+
+const readonly = ref(false)
+</script>
+
+<template>
+  <Story
+    title="ReadonlyForm"
+    autoPropsDisabled
+    :layout="{ type: 'grid', width: '100%' }"
+    :controls="{
+      readonly: { type: 'boolean', default: false, description: 'Toggle readonly mode' }
+    }"
+  >
+    <template #controls>
+      <input type="checkbox" id="checkbox" v-model="readonly" />
+      <label for="checkbox">Readonly</label>
+    </template>
+
+    <Variant title="Default">
+      <ReadonlyFormWrapper :readonly="readonly">
+        <ReadonlyForm />
+      </ReadonlyFormWrapper>
+    </Variant>
+  </Story>
+</template>

package/src/components/stories/components/ReadonlyForm.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import BuiButton from '@/components/ui/button/BuiButton.vue'
+import BuiCheckbox from '@/components/ui/checkbox/BuiCheckbox.vue'
+import {
+  BuiForm,
+  BuiFormControl,
+  BuiFormField,
+  BuiFormItem,
+  BuiFormLabel,
+  BuiFormMessage
+} from '@/components/ui/form'
+import BuiInput from '@/components/ui/input/BuiInput.vue'
+import BuiPasswordInput from '@/components/ui/input/BuiPasswordInput.vue'
+import BuiLabel from '@/components/ui/label/BuiLabel.vue'
+import BuiPopover from '@/components/ui/popover/BuiPopover.vue'
+import BuiPopoverContent from '@/components/ui/popover/BuiPopoverContent.vue'
+import BuiPopoverTrigger from '@/components/ui/popover/BuiPopoverTrigger.vue'
+import BuiRadioGroup from '@/components/ui/radio-group/BuiRadioGroup.vue'
+import BuiRadioGroupItem from '@/components/ui/radio-group/BuiRadioGroupItem.vue'
+import BuiSelect from '@/components/ui/select/BuiSelect.vue'
+import BuiSelectContent from '@/components/ui/select/BuiSelectContent.vue'
+import BuiSelectGroup from '@/components/ui/select/BuiSelectGroup.vue'
+import BuiSelectItem from '@/components/ui/select/BuiSelectItem.vue'
+import BuiSelectTrigger from '@/components/ui/select/BuiSelectTrigger.vue'
+import BuiSelectValue from '@/components/ui/select/BuiSelectValue.vue'
+import BuiSwitch from '@/components/ui/switch/BuiSwitch.vue'
+import BuiTextarea from '@/components/ui/textarea/BuiTextarea.vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+const loginFormSchema = toTypedSchema(
+  z.object({
+    email: z.string().email(),
+    password: z.string().min(8).max(64),
+    remember: z.boolean(),
+    favoriteFruit: z.enum(['banana']),
+    description: z.string().min(2).max(10),
+    display: z.enum(['default', 'compact', 'comfortable'])
+  })
+)
+
+const initialValues = {
+  email: 'test@example.com',
+  password: '12345678',
+  remember: false,
+  favoriteFruit: 'banana',
+  description: 'test',
+  display: 'default'
+}
+
+const onSubmit = (values: any) => {
+  console.debug('Form submitted!', values)
+}
+</script>
+
+<template>
+  <div class="flex min-h-full flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+      <div
+        class="mx-auto h-10 bg-logo bg-contain bg-center bg-no-repeat dark:bg-logo-dark"
+        alt="Bootsman"
+      />
+      <h2
+        class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-white"
+      >
+        Sign in to your account
+      </h2>
+    </div>
+
+    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
+      <div class="px-6 py-12 shadow sm:rounded-lg sm:px-12">
+        <BuiForm
+          class="space-y-6"
+          v-slot="{ meta }"
+          :initialValues="initialValues"
+          :validation-schema="loginFormSchema"
+          @submit="onSubmit"
+        >
+          <BuiFormField v-slot="{ componentField }" name="email">
+            <BuiFormItem>
+              <BuiFormLabel>Email address</BuiFormLabel>
+              <div class="mt-2">
+                <BuiFormControl>
+                  <BuiInput
+                    type="email"
+                    autocomplete="email"
+                    placeholder="Email"
+                    v-bind="componentField"
+                  />
+                </BuiFormControl>
+                <BuiFormMessage class="mt-1" />
+              </div>
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiFormField v-slot="{ componentField }" name="password">
+            <BuiFormItem>
+              <BuiFormLabel>Password</BuiFormLabel>
+              <div class="mt-2">
+                <BuiFormControl>
+                  <BuiPasswordInput
+                    type="password"
+                    autocomplete="current-password"
+                    placeholder="Password"
+                    v-bind="componentField"
+                  />
+                </BuiFormControl>
+                <BuiFormMessage class="mt-1" />
+              </div>
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiFormField v-slot="{ value, handleChange }" name="remember">
+            <BuiFormItem class="mt-2 flex items-center gap-2 space-y-0">
+              <BuiFormControl>
+                <BuiCheckbox :checked="value" @update:checked="handleChange" />
+              </BuiFormControl>
+              <div class="space-y-1 leading-none">
+                <BuiFormLabel>Remember me</BuiFormLabel>
+                <BuiFormMessage />
+              </div>
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiFormField v-slot="{ componentField }" name="favoriteFruit">
+            <BuiFormItem class="">
+              <BuiFormLabel>Fruits</BuiFormLabel>
+              <BuiFormControl>
+                <BuiSelect v-bind="componentField">
+                  <BuiSelectTrigger>
+                    <BuiSelectValue />
+                  </BuiSelectTrigger>
+                  <BuiSelectContent>
+                    <BuiSelectGroup>
+                      <BuiSelectLabel>Fruits</BuiSelectLabel>
+                      <BuiSelectItem value="apple"> Apple </BuiSelectItem>
+                      <BuiSelectItem value="banana"> Banana </BuiSelectItem>
+                      <BuiSelectItem value="blueberry"> Blueberry </BuiSelectItem>
+                      <BuiSelectItem value="grapes"> Grapes </BuiSelectItem>
+                      <BuiSelectItem value="pineapple"> Pineapple </BuiSelectItem>
+                    </BuiSelectGroup>
+                  </BuiSelectContent>
+                </BuiSelect>
+              </BuiFormControl>
+              <BuiFormMessage class="!mt-0.5" />
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiFormField v-slot="{ componentField }" name="description">
+            <BuiFormItem>
+              <BuiFormLabel>Email address</BuiFormLabel>
+              <div class="mt-2">
+                <BuiFormControl>
+                  <BuiTextarea placeholder="Description" v-bind="componentField" />
+                </BuiFormControl>
+                <BuiFormMessage class="mt-1" />
+              </div>
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiFormField v-slot="{ componentField }" name="display">
+            <BuiFormItem class="">
+              <BuiRadioGroup v-bind="componentField">
+                <div class="flex items-center space-x-2">
+                  <BuiRadioGroupItem id="default" value="default" />
+                  <BuiLabel for="default">Default</BuiLabel>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <BuiRadioGroupItem id="compact" value="compact" />
+                  <BuiLabel for="compact">Compact</BuiLabel>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <BuiRadioGroupItem id="comfortable" value="comfortable" />
+                  <BuiLabel for="comfortable">Comfortable</BuiLabel>
+                </div>
+              </BuiRadioGroup>
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiFormField v-slot="{ value, handleChange }" name="remember">
+            <BuiFormItem class="mt-2 flex items-center gap-2 space-y-0">
+              <BuiFormControl>
+                <BuiSwitch :checked="value" @update:checked="handleChange"></BuiSwitch>
+              </BuiFormControl>
+              <div class="space-y-1 leading-none">
+                <BuiFormLabel>Remember me switch</BuiFormLabel>
+                <BuiFormMessage />
+              </div>
+            </BuiFormItem>
+          </BuiFormField>
+
+          <BuiPopover>
+            <BuiPopoverTrigger as-child>
+              <BuiButton variant="outline"> Open popover </BuiButton>
+            </BuiPopoverTrigger>
+            <BuiPopoverContent class="w-80">
+              <div class="grid gap-4">
+                <div class="space-y-2">
+                  <h4 class="font-medium leading-none">Dimensions</h4>
+                  <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+                </div>
+                <div class="grid gap-2">
+                  <div class="grid grid-cols-3 items-center gap-4">
+                    <BuiLabel for="width">Width</BuiLabel>
+                    <BuiInput id="width" type="text" default-value="100%" class="col-span-2 h-8" />
+                  </div>
+                  <div class="grid grid-cols-3 items-center gap-4">
+                    <BuiLabel for="maxWidth">Max. width</BuiLabel>
+                    <BuiInput
+                      id="maxWidth"
+                      type="text"
+                      default-value="300px"
+                      class="col-span-2 h-8"
+                    />
+                  </div>
+                  <div class="grid grid-cols-3 items-center gap-4">
+                    <BuiLabel for="height">Height</BuiLabel>
+                    <BuiInput id="height" type="text" default-value="25px" class="col-span-2 h-8" />
+                  </div>
+                  <div class="grid grid-cols-3 items-center gap-4">
+                    <BuiLabel for="maxHeight">Max. height</BuiLabel>
+                    <BuiInput
+                      id="maxHeight"
+                      type="text"
+                      default-value="none"
+                      class="col-span-2 h-8"
+                    />
+                  </div>
+                </div>
+              </div>
+            </BuiPopoverContent>
+          </BuiPopover>
+
+          <div>
+            <BuiButton class="w-full" type="submit" :disabled="!meta.valid">Sign in</BuiButton>
+          </div>
+        </BuiForm>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/stories/components/ReadonlyFormWrapper.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { FORM_READONLY_INJECTION_KEY } from '@/components/ui/form'
+import { provide, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  readonly?: boolean
+}>()
+
+const readonly = ref(props.readonly)
+watchEffect(() => (readonly.value = props.readonly))
+
+provide(FORM_READONLY_INJECTION_KEY, readonly)
+</script>
+
+<template>
+  <slot name="default" />
+</template>

package/src/components/ui/button/BuiButton.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { FORM_READONLY_INJECTION_KEY } from '@/components/ui/form'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { inject, toRef, type HTMLAttributes } from 'vue'
 import { buttonVariants } from '.'
-import { cn } from '@/lib/utils'
-import { type HTMLAttributes } from 'vue'
 
 interface Props extends PrimitiveProps {
   class?: HTMLAttributes['class']
@@ -10,6 +11,7 @@ interface Props extends PrimitiveProps {
   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
   as?: string
   type?: string
+  disabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -17,6 +19,9 @@ const props = withDefaults(defineProps<Props>(), {
   as: 'button',
   type: 'button'
 })
+
+// Inject readonly state from context
+const readonlyContext = inject(FORM_READONLY_INJECTION_KEY, toRef(false))
 </script>
 
 <template>
@@ -25,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
     :type="type"
+    :disabled="readonlyContext || props.disabled"
   >
     <slot />
   </Primitive>

package/src/components/ui/checkbox/BuiCheckbox.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { Check, Minus } from 'lucide-vue-next'
+import { FORM_READONLY_INJECTION_KEY } from '@/components/ui/form'
 import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
-import { useAttrs } from 'vue'
+import { Check, Minus } from 'lucide-vue-next'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { inject, toRef, useAttrs } from 'vue'
 
 const props = defineProps<CheckboxRootProps>()
 const emits = defineEmits<CheckboxRootEmits>()
@@ -19,10 +20,13 @@ const checkboxClasses = cva([
   /* text */ 'text-primary-foreground'
 ])
 const classes = cn(checkboxClasses(), attrs.class as string)
+
+// Inject readonly state from context
+const readonlyContext = inject(FORM_READONLY_INJECTION_KEY, toRef(false))
 </script>
 
 <template>
-  <CheckboxRoot v-bind="forwarded" :class="classes">
+  <CheckboxRoot v-bind="forwarded" :class="classes" :disabled="readonlyContext || props.disabled">
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <Check v-if="checked === true" class="h-4 w-4" />
       <Minus v-if="checked === 'indeterminate'" class="h-4 w-4" />

package/src/components/ui/form/index.ts

@@ -1,13 +1,17 @@
+import type { InjectionKey, Ref } from 'vue'
+
 export {
   Form as BuiForm,
   Field as BuiFormField,
   FieldArray as BuiFormFieldArray,
-  useForm as useBuiForm,
   useField as useBuiField,
-  useFieldArray as useBuiFieldArray
+  useFieldArray as useBuiFieldArray,
+  useForm as useBuiForm
 } from 'vee-validate'
+export { default as BuiFormControl } from './BuiFormControl.vue'
+export { default as BuiFormDescription } from './BuiFormDescription.vue'
 export { default as BuiFormItem } from './BuiFormItem.vue'
 export { default as BuiFormLabel } from './BuiFormLabel.vue'
-export { default as BuiFormControl } from './BuiFormControl.vue'
 export { default as BuiFormMessage } from './BuiFormMessage.vue'
-export { default as BuiFormDescription } from './BuiFormDescription.vue'
+
+export const FORM_READONLY_INJECTION_KEY = Symbol() as InjectionKey<Ref<boolean>>

package/src/components/ui/input/BuiInput.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, type HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
+import { FORM_READONLY_INJECTION_KEY } from '@/components/ui/form'
 import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+import { inject, ref, toRef, type HTMLAttributes } from 'vue'
 import { inputVariants } from '.'
 
 const props = defineProps<{
@@ -9,6 +10,7 @@ const props = defineProps<{
   variant?: NonNullable<Parameters<typeof inputVariants>[0]>['variant']
   modelValue?: string | number
   class?: HTMLAttributes['class']
+  readonly?: boolean | 'true' | 'false'
 }>()
 
 const emits = defineEmits<{
@@ -20,6 +22,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue
 })
 
+// Inject readonly state from context
+const readonlyContext = inject(FORM_READONLY_INJECTION_KEY, toRef(false))
+
 const isFocused = ref<Boolean>(false)
 
 const handleFocus = () => {
@@ -30,9 +35,9 @@ const handleBlur = () => {
 }
 
 const handleKeyDown = (e: KeyboardEvent) => {
-  if(e.key === 'Home' || e.key === 'End') {
-    if(isFocused.value) {
-      e.stopPropagation();
+  if (e.key === 'Home' || e.key === 'End') {
+    if (isFocused.value) {
+      e.stopPropagation()
     }
   }
 }
@@ -42,6 +47,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
   <input
     v-model="modelValue"
     :class="cn(inputVariants({ variant }), props.class ?? '')"
+    :readonly="readonlyContext || props.readonly"
     @focus="handleFocus"
     @blur="handleBlur"
     @keydown="handleKeyDown"