@soft-stech/bootsman-ui-shadcn 1.4.0 → 1.4.2

package/dist/{variables-CNeTUlbe.js → variables-CrSZeYxO.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-BHJAGWXq.js";
 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-B_yo-lBV.js";
+import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-_eZ4ckcI.js";
+import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-BPlOWBwP.js";
+import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-CbuirZfj.js";
+import { _ as q } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-B8myd3vi.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-CH35iRuh.js";
+import { _ as j } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-DAFDIxBZ.js";
+import { _ as D } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-CSdu-ROG.js";
+import { _ as F } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-TzEJw5_p.js";
 const L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ $({
   __name: "BuiPaginationCommon",
   props: /* @__PURE__ */ y({

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

@@ -1,4 +1,4 @@
-import { a as e } from "./utils-BiLiPt4t.js";
+import { a as e } from "./utils-CYuWbTr4.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.0",
+  "version": "1.4.2",
   "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/BuiStepper.story.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { BuiSlider } from '@/index'
+import { cn } from '@/lib/utils'
+import { ref } from 'vue'
+import BuiStepperSeparator from '../ui/stepper/BuiStepperSeparator.vue';
+import BuiStepper from '../ui/stepper/BuiStepper.vue';
+import BuiStepperItem from '../ui/stepper/BuiStepperItem.vue';
+import BuiStepperTrigger from '../ui/stepper/BuiStepperTrigger.vue';
+import { Check, Circle, Dot } from 'lucide-vue-next';
+import BuiStepperTitle from '../ui/stepper/BuiStepperTitle.vue';
+import BuiStepperDescription from '../ui/stepper/BuiStepperDescription.vue';
+import BuiButton from '../ui/button/BuiButton.vue';
+
+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 rounded-full shrink-0 size-10"
+              :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 rounded-full shrink-0 size-10"
+              :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/ui/stepper/BuiStepper.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    v-slot="slotProps"
+    :class="cn(
+      'flex gap-2',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>

package/src/components/ui/stepper/BuiStepperDescription.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { StepperDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperDescription, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
+  </StepperDescription>
+</template>

package/src/components/ui/stepper/BuiStepperIndicator.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { StepperIndicatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperIndicator, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperIndicator>
+</template>

package/src/components/ui/stepper/BuiStepperItem.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { StepperItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperItem, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>

package/src/components/ui/stepper/BuiStepperSeparator.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { StepperSeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperSeparator, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'bg-muted',
+      // Disabled
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent-foreground',
+      props.class,
+    )"
+  />
+</template>

package/src/components/ui/stepper/BuiStepperTitle.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { StepperTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperTitle, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>

package/src/components/ui/stepper/BuiStepperTrigger.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { StepperTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { StepperTrigger, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as BuiStepper } from './BuiStepper.vue'
+export { default as BuiStepperDescription } from './BuiStepperDescription.vue'
+export { default as BuiStepperIndicator } from './BuiStepperIndicator.vue'
+export { default as BuiStepperItem } from './BuiStepperItem.vue'
+export { default as BuiStepperSeparator } from './BuiStepperSeparator.vue'
+export { default as BuiStepperTitle } from './BuiStepperTitle.vue'
+export { default as BuiStepperTrigger } from './BuiStepperTrigger.vue'

package/src/components/ui/textarea/BuiTextarea.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 import { textareaVariants } from '.'
@@ -17,8 +18,31 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
   defaultValue: props.defaultValue
 })
+
+const isFocused = ref<Boolean>(false)
+
+const handleFocus = () => {
+  isFocused.value = true
+}
+const handleBlur = () => {
+  isFocused.value = false
+}
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Home' || e.key === 'End' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+    if (isFocused.value) {
+      e.stopPropagation()
+    }
+  }
+}
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn(textareaVariants({ variant }), $attrs.class ?? '')" />
+  <textarea
+    v-model="modelValue"
+    :class="cn(textareaVariants({ variant }), $attrs.class ?? '')"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown="handleKeyDown"
+  />
 </template>

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './components/ui/health/index'
 export * from './components/ui/radio-group/index'
 export * from './components/ui/select/index'
 export * from './components/ui/separator/index'
+export * from './components/ui/stepper/index'
 export * from './components/ui/switch/index'
 export * from './components/ui/table/index'
 export * from './components/ui/tabs/index'

package/dist/BuiAccordionContent.vue_vue_type_script_setup_true_lang-Bl05etBT.js

@@ -1,30 +0,0 @@
-import { defineComponent as s, openBlock as n, createBlock as r, unref as o, mergeProps as c, withCtx as d, createElementVNode as i, renderSlot as l } from "vue";
-import { d as p } from "./index-qHyoMY5p.js";
-import { c as m } from "./utils-BiLiPt4t.js";
-const f = { class: "px-8 py-4" }, B = /* @__PURE__ */ s({
-  __name: "BuiAccordionContent",
-  props: {
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(t) {
-    const e = t;
-    return (a, _) => (n(), r(o(p), c(e, {
-      class: o(m)(
-        "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-        e.class
-      )
-    }), {
-      default: d(() => [
-        i("div", f, [
-          l(a.$slots, "default")
-        ])
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-});
-export {
-  B as _
-};

package/dist/BuiCommandEmpty.vue_vue_type_script_setup_true_lang-BRdwzVNo.js

@@ -1,24 +0,0 @@
-import { defineComponent as r, openBlock as a, createBlock as n, unref as t, mergeProps as p, withCtx as m, renderSlot as c } from "vue";
-import { s as l } from "./index-qHyoMY5p.js";
-import { c as f } from "./utils-BiLiPt4t.js";
-const B = /* @__PURE__ */ r({
-  __name: "BuiCommandEmpty",
-  props: {
-    asChild: { type: Boolean },
-    as: {}
-  },
-  setup(s) {
-    const o = s;
-    return (e, i) => (a(), n(t(l), p(o, {
-      class: t(f)("py-6 text-center text-sm", e.$attrs.class ?? "")
-    }), {
-      default: m(() => [
-        c(e.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-});
-export {
-  B as _
-};