@soft-stech/bootsman-ui-shadcn 2.0.4 → 2.0.5

package/dist/theme.css

@@ -0,0 +1,211 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  /* --container-padding: 2rem; */
+  /* --container-screen-2xl: 1400px; */
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar: var(--side-bar);
+  --color-tabs-sidebar: var(--tabs-sidebar);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --shadow-card: 0px 4px 8px 0px var(--card-shadow);
+  --shadow-tab: 0px 2px 4px 0px var(--tab-shadow), 0px 4px 4px 0px var(--tab-shadow);
+  --shadow-top: 0px -2px 4px 0px var(--tab-shadow);
+  --shadow-level1:
+    0px 16px 16px 0px var(--tab-shadow), 0px 8px 16px 0px var(--tab-shadow),
+    0px 8px 8px 0px var(--tab-shadow);
+  --shadow-level2:
+    0px 32px 16px 0px var(--tab-shadow), 0px 16px 16px 0px var(--tab-shadow),
+    0px 16px 16px 0px var(--tab-shadow);
+  --shadow-level3:
+    0px 56px 24px 0px var(--tab-shadow), 0px 32px 24px 0px var(--tab-shadow),
+    0px 32px 24px 0px var(--tab-shadow);
+  --shadow-tab-sidebar: inset -8px 0px 16px 0px var(--tabs-sidebar-shadow);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
+
+  --bg-image-logo: url('/src/assets/logo-full.png');
+  --bg-image-logo-dark: url('/src/assets/logo-full-dark.png');
+
+  --color-tooltip: var(--tooltip);
+  --color-tooltip-link: var(--tooltip-link);
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(242 24% 21%);
+
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(225 5% 47%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+  --card-shadow: hsl(241, 92%, 71%, 0.16);
+  --tab-shadow: hsl(228, 51%, 11%, 0.08);
+
+  --side-bar: hsl(0 0% 100%);
+  --tabs-sidebar: hsl(210 40% 96.1%);
+  --tabs-sidebar-shadow: hsl(0, 0%, 100%, 0);
+
+  --border: hsl(241 92% 71%);
+  --input: hsl(225 11% 84%);
+
+  --primary: hsl(241 92% 71%);
+  --primary-hover: hsl(241 76% 62%);
+  --primary-active: hsl(241 54% 54%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(241 76% 62%);
+
+  --accent: hsl(241 92% 71%);
+  --accent-foreground: hsl(241 76% 62%);
+
+  --destructive: hsl(328, 68%, 63%, 0.16);
+  --destructive-foreground: hsl(328 68% 63%);
+
+  --success: hsl(181, 34%, 39%, 0.16);
+  --success-foreground: hsl(181 34% 39%);
+
+  --warning: hsl(48, 79%, 45%, 0.16);
+  --warning-foreground: hsl(48 79% 45%);
+
+  --info: hsl(198, 85%, 45%, 0.16);
+  --info-foreground: hsl(198 85% 45%);
+
+  --ring: hsl(241 92% 71%);
+
+  --radius: 0.5rem;
+
+  --tooltip: hsl(225 5% 47%);
+  --tooltip-link: hsl(241 100% 88%);
+}
+
+.dark {
+  --background: hsl(242 24% 21%);
+  --foreground: hsl(0 0% 100%);
+
+  --muted: hsl(217.2 32.6% 17.5%);
+  --muted-foreground: hsl(0, 0%, 100%, 0.32);
+
+  --popover: hsl(222.2 84% 4.9%);
+  --popover-foreground: hsl(210 40% 98%);
+
+  --card: hsl(242 24% 21%);
+  --card-foreground: hsl(210 40% 98%);
+  --card-shadow: hsl(241, 92%, 71%, 0.4);
+  --tab-shadow: hsl(228, 51%, 11%, 0.08);
+
+  --side-bar: hsl(243.2 24.1% 15.5%);
+  --tabs-sidebar: hsl(243.2 24.1% 15.5%);
+  --tabs-sidebar-shadow: hsl(0, 0%, 0%, 0.08);
+
+  --border: hsl(241 92% 71%);
+  --input: hsl(0, 0%, 100%, 0.32);
+
+  --primary: hsl(241 92% 71%);
+  --primary-hover: hsl(241 76% 62%);
+  --primary-active: hsl(241 54% 54%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(217.2 32.6% 17.5%);
+  --secondary-foreground: hsl(210 40% 98%);
+
+  --accent: hsl(241 92% 71%);
+  --accent-foreground: hsl(240 100% 77%);
+
+  --destructive: hsl(328, 68%, 63%, 0.16);
+  --destructive-foreground: hsl(328 68% 63%);
+
+  --success: hsl(154, 84%, 45%, 0.16);
+  --success-foreground: hsl(181 35% 49%);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "type": "module",
   "files": [
     "dist",
@@ -68,6 +68,7 @@
     "typescript-eslint": "^8.44.0",
     "vite": "^7.1.2",
     "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.3",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.0.5"
   },

package/src/components/input/BuiInput.vue

@@ -53,6 +53,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
     :readonly="readonlyContext || props.readonly"
     :disabled="props.disabled"
     :placeholder="props.placeholder"
+    :type="props.type || 'text'"
     @focus="handleFocus"
     @blur="handleBlur"
     @keydown="handleKeyDown"

package/src/components/tabs/index.ts

@@ -29,7 +29,7 @@ export const tabsTriggerVariants = cva(
         ghost:
           'whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 data-[state=active]:[&_div]:border-b-2 data-[state=active]:[&_div]:border-primary',
         vertical:
-          'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6'
+          'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6!'
       }
     },
     defaultVariants: {

package/src/stories/BuiSelect.stories.ts

@@ -1,23 +1,22 @@
 import {
   BuiSelect,
   BuiSelectContent,
+  BuiSelectGroup,
   BuiSelectItem,
   BuiSelectItemText,
   BuiSelectLabel,
-  BuiSelectGroup,
   BuiSelectTrigger,
   BuiSelectValue
 } from '@/components/select'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { toTypedSchema } from '@vee-validate/zod'
 import { BringToFrontIcon } from 'lucide-vue-next'
 import z from 'zod'
 
 import {
   BuiForm,
+  BuiFormControl,
   BuiFormField,
   BuiFormItem,
-  BuiFormControl,
   BuiFormMessage
 } from '@/components/form'
 import type { AcceptableValue, SelectRootProps } from 'reka-ui'
@@ -134,7 +133,7 @@ export const WithValidation: Story = {
       const validationRules = z.object({
         favoriteFruit: z.enum(['banana'])
       })
-      const validationSchema = toTypedSchema(validationRules)
+      const validationSchema = validationRules
       const initialValues = {
         favoriteFruit: 'apple'
       }

package/src/stories/components/ComboboxStoryFormFields.vue

@@ -17,17 +17,14 @@ import {
 } from '@/components/form'
 import { BuiLabel } from '@/components/label'
 import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/popover'
-import { toTypedSchema } from '@vee-validate/zod'
 import { CheckIcon, ChevronDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { z } from 'zod'
 
-const formSchema = toTypedSchema(
-  z.object({
-    namespace: z.string().min(2),
-    groups: z.array(z.string())
-  })
-)
+const formSchema = z.object({
+  namespace: z.string().min(2),
+  groups: z.array(z.string())
+})
 const isNamespacesPopoverOpen = ref(false)
 const namespaces = ['default', 'local', 'my-namespace']
 </script>

package/src/stories/components/ComboboxStoryMultipleCreate.vue

@@ -18,18 +18,15 @@ import {
 } from '@/components/form'
 import { BuiLabel } from '@/components/label'
 import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/popover'
-import { toTypedSchema } from '@vee-validate/zod'
 import { CheckIcon, ChevronDown, CirclePlusIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { z } from 'zod'
 
 const search = ref<string>('')
-const formSchema = toTypedSchema(
-  z.object({
-    namespace: z.string().min(2),
-    groups: z.array(z.string())
-  })
-)
+const formSchema = z.object({
+  namespace: z.string().min(2),
+  groups: z.array(z.string())
+})
 const isGroupsPopoverOpen = ref(false)
 const existingGroups = ref(['group-1', 'group-2', 'group-3'])
 </script>

package/src/stories/components/LoginForm.vue

@@ -11,15 +11,12 @@ import {
   BuiFormMessage
 } from '@/components/form'
 
-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)
-  })
-)
+const loginFormSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8).max(64)
+})
 
 const initialValues = {
   email: 'test@example.com',

package/src/stories/components/LoginFormHook.vue

@@ -11,15 +11,12 @@ import {
   useBuiForm
 } from '@/components/form'
 
-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)
-  })
-)
+const loginFormSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8).max(64)
+})
 
 const initialValues = {
   email: 'test@example.com',
@@ -40,11 +37,11 @@ const onSubmit = handleSubmit((values) => {
   <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"
+        class="bg-logo dark:bg-logo-dark mx-auto h-10 bg-contain bg-center bg-no-repeat"
         alt="Bootsman"
       />
       <h2
-        class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-white"
+        class="mt-6 text-center text-2xl leading-9 font-bold tracking-tight text-gray-900 dark:text-white"
       >
         Sign in to your account
       </h2>

package/src/stories/components/ReadonlyForm.vue

@@ -25,19 +25,16 @@ import BuiSelectTrigger from '@/components/select/BuiSelectTrigger.vue'
 import BuiSelectValue from '@/components/select/BuiSelectValue.vue'
 import BuiSwitch from '@/components/switch/BuiSwitch.vue'
 import BuiTextarea from '@/components/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 loginFormSchema = 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',

package/src/stories/components/UseBuiField.vue

@@ -11,16 +11,13 @@ import {
   useBuiForm
 } from '@/components/form'
 
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
 import SubForm from '@/stories/components/SubForm.vue'
+import * as z from 'zod'
 
-const formSchema = toTypedSchema(
-  z.object({
-    meta: z.object({ field: z.string().trim().min(1) }),
-    example: z.string().trim().min(1)
-  })
-)
+const formSchema = z.object({
+  meta: z.object({ field: z.string().trim().min(1) }),
+  example: z.string().trim().min(1)
+})
 
 const initialValues = {
   meta: {

package/src/style.css

@@ -3,214 +3,4 @@
 
 @plugin 'tailwind-scrollbar';
 
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  /* --container-padding: 2rem; */
-  /* --container-screen-2xl: 1400px; */
-
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-sidebar: var(--side-bar);
-  --color-tabs-sidebar: var(--tabs-sidebar);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary-hover: var(--primary-hover);
-  --color-primary-active: var(--primary-active);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  --shadow-card: 0px 4px 8px 0px var(--card-shadow);
-  --shadow-tab: 0px 2px 4px 0px var(--tab-shadow), 0px 4px 4px 0px var(--tab-shadow);
-  --shadow-top: 0px -2px 4px 0px var(--tab-shadow);
-  --shadow-level1:
-    0px 16px 16px 0px var(--tab-shadow), 0px 8px 16px 0px var(--tab-shadow),
-    0px 8px 8px 0px var(--tab-shadow);
-  --shadow-level2:
-    0px 32px 16px 0px var(--tab-shadow), 0px 16px 16px 0px var(--tab-shadow),
-    0px 16px 16px 0px var(--tab-shadow);
-  --shadow-level3:
-    0px 56px 24px 0px var(--tab-shadow), 0px 32px 24px 0px var(--tab-shadow),
-    0px 32px 24px 0px var(--tab-shadow);
-  --shadow-tab-sidebar: inset -8px 0px 16px 0px var(--tabs-sidebar-shadow);
-
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
-  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
-
-  --bg-image-logo: url('/src/assets/logo-full.png');
-  --bg-image-logo-dark: url('/src/assets/logo-full-dark.png');
-
-  --color-tooltip: var(--tooltip);
-  --color-tooltip-link: var(--tooltip-link);
-}
-
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--reka-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--reka-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@keyframes collapsible-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--reka-collapsible-content-height);
-  }
-}
-
-@keyframes collapsible-up {
-  from {
-    height: var(--reka-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-
-  button:not(:disabled),
-  [role='button']:not(:disabled) {
-    cursor: pointer;
-  }
-}
-
-:root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(242 24% 21%);
-
-  --muted: hsl(210 40% 96.1%);
-  --muted-foreground: hsl(225 5% 47%);
-
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(222.2 84% 4.9%);
-
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(222.2 84% 4.9%);
-  --card-shadow: hsl(241, 92%, 71%, 0.16);
-  --tab-shadow: hsl(228, 51%, 11%, 0.08);
-
-  --side-bar: hsl(0 0% 100%);
-  --tabs-sidebar: hsl(210 40% 96.1%);
-  --tabs-sidebar-shadow: hsl(0, 0%, 100%, 0);
-
-  --border: hsl(241 92% 71%);
-  --input: hsl(225 11% 84%);
-
-  --primary: hsl(241 92% 71%);
-  --primary-hover: hsl(241 76% 62%);
-  --primary-active: hsl(241 54% 54%);
-  --primary-foreground: hsl(0 0% 100%);
-
-  --secondary: hsl(210 40% 96.1%);
-  --secondary-foreground: hsl(241 76% 62%);
-
-  --accent: hsl(241 92% 71%);
-  --accent-foreground: hsl(241 76% 62%);
-
-  --destructive: hsl(328, 68%, 63%, 0.16);
-  --destructive-foreground: hsl(328 68% 63%);
-
-  --success: hsl(181, 34%, 39%, 0.16);
-  --success-foreground: hsl(181 34% 39%);
-
-  --warning: hsl(48, 79%, 45%, 0.16);
-  --warning-foreground: hsl(48 79% 45%);
-
-  --info: hsl(198, 85%, 45%, 0.16);
-  --info-foreground: hsl(198 85% 45%);
-
-  --ring: hsl(241 92% 71%);
-
-  --radius: 0.5rem;
-
-  --tooltip: hsl(225 5% 47%);
-  --tooltip-link: hsl(241 100% 88%);
-}
-
-.dark {
-  --background: hsl(242 24% 21%);
-  --foreground: hsl(0 0% 100%);
-
-  --muted: hsl(217.2 32.6% 17.5%);
-  --muted-foreground: hsl(0, 0%, 100%, 0.32);
-
-  --popover: hsl(222.2 84% 4.9%);
-  --popover-foreground: hsl(210 40% 98%);
-
-  --card: hsl(242 24% 21%);
-  --card-foreground: hsl(210 40% 98%);
-  --card-shadow: hsl(241, 92%, 71%, 0.4);
-  --tab-shadow: hsl(228, 51%, 11%, 0.08);
-
-  --side-bar: hsl(243.2 24.1% 15.5%);
-  --tabs-sidebar: hsl(243.2 24.1% 15.5%);
-  --tabs-sidebar-shadow: hsl(0, 0%, 0%, 0.08);
-
-  --border: hsl(241 92% 71%);
-  --input: hsl(0, 0%, 100%, 0.32);
-
-  --primary: hsl(241 92% 71%);
-  --primary-hover: hsl(241 76% 62%);
-  --primary-active: hsl(241 54% 54%);
-  --primary-foreground: hsl(0 0% 100%);
-
-  --secondary: hsl(217.2 32.6% 17.5%);
-  --secondary-foreground: hsl(210 40% 98%);
-
-  --accent: hsl(241 92% 71%);
-  --accent-foreground: hsl(240 100% 77%);
-
-  --destructive: hsl(328, 68%, 63%, 0.16);
-  --destructive-foreground: hsl(328 68% 63%);
-
-  --success: hsl(154, 84%, 45%, 0.16);
-  --success-foreground: hsl(181 35% 49%);
-}
+@import './theme.css';