sigma-ui 1.2.0 → 1.4.0

package/__generated/registry-schemes/style-system/tailwind/checkbox.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\ninterface Props extends CheckboxRootProps {\n  label?: string;\n  description?: string;\n  id?: string;\n}\n\nconst props = defineProps<Props>();\nconst emits = defineEmits<CheckboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <div :class=\"cn('peer flex items-center gap-2', { 'items-start': props.description })\">\n    <CheckboxRoot\n      v-bind=\"forwarded\"\n      :id=\"(props.label && props.id) || forwarded.id\"\n      :class=\"cn(\n        'peer h-4 w-4 shrink-0 rounded-xs border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground overflow-hidden',\n      )\"\n    >\n      <transition name=\"fade-slide-top\">\n        <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n          <slot>\n            <CheckIcon class=\"h-4 w-4\" />\n          </slot>\n        </CheckboxIndicator>\n      </transition>\n    </CheckboxRoot>\n    <div\n      v-if=\"props.label\"\n      class=\"flex flex-col gap-1.5 leading-none peer-disabled:opacity-70\"\n    >\n      <label\n        v-if=\"props.label\"\n        class=\"text-sm font-medium leading-none select-none\"\n        :for=\"props.id\"\n      >{{ props.label }}\n      </label>\n      <p\n        v-if=\"props.description\"\n        class=\"text-sm leading-5 text-muted-foreground select-none\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\ninterface Props extends CheckboxRootProps {\n  label?: string;\n  description?: string;\n  id?: string;\n}\n\nconst props = defineProps<Props>();\nconst emits = defineEmits<CheckboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <div :class=\"cn('peer flex items-center gap-2', { 'items-start': props.description })\">\n    <CheckboxRoot\n      v-bind=\"forwarded\"\n      :id=\"(props.label && props.id) || forwarded.id\"\n      :class=\"cn(\n        'peer h-4 w-4 shrink-0 rounded-xs border border-primary focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground overflow-hidden',\n      )\"\n    >\n      <transition name=\"fade-slide-top\">\n        <CheckboxIndicator class=\"flex h-full w-full items-center justify-center text-current\">\n          <slot>\n            <CheckIcon class=\"h-4 w-4\" />\n          </slot>\n        </CheckboxIndicator>\n      </transition>\n    </CheckboxRoot>\n    <div\n      v-if=\"props.label\"\n      class=\"flex flex-col gap-1.5 leading-none peer-disabled:opacity-70\"\n    >\n      <label\n        v-if=\"props.label\"\n        class=\"text-sm font-medium leading-none select-none\"\n        :for=\"props.id\"\n      >{{ props.label }}\n      </label>\n      <p\n        v-if=\"props.description\"\n        class=\"text-sm leading-5 text-muted-foreground select-none\"\n      >\n        {{ props.description }}\n      </p>\n    </div>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/combobox.json

@@ -23,7 +23,7 @@
     },
     {
       "name": "ComboboxInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class'];\n}>();\n\nconst emits = defineEmits<ComboboxInputEmits>();\n\nconst delegatedProps = reactiveOmit(props, 'class');\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-border bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<ComboboxInputProps & {\n  class?: HTMLAttributes['class'];\n}>();\n\nconst emits = defineEmits<ComboboxInputEmits>();\n\nconst delegatedProps = reactiveOmit(props, 'class');\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <ComboboxInput\n    v-bind=\"forwarded\"\n    :class=\"cn('flex h-9 w-full rounded-md border border-border bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\"\n  >\n    <slot />\n  </ComboboxInput>\n</template>\n"
     },
     {
       "name": "ComboboxItem.vue",

package/__generated/registry-schemes/style-system/tailwind/dialog.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',\n          $attrs.class ?? '',\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary data-[state=open]:text-muted-foreground\"\n      >\n        <XIcon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<DialogContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      v-bind=\"forwarded\"\n      :class=\"\n        cn(\n          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',\n          $attrs.class ?? '',\n        )\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-2 focus:outline-ring focus:outline-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary data-[state=open]:text-muted-foreground\"\n      >\n        <XIcon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogDescription.vue",

package/__generated/registry-schemes/style-system/tailwind/faceted-filter.json

@@ -0,0 +1,16 @@
+{
+  "name": "faceted-filter",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "FacetedFilter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { CheckIcon, CirclePlusIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\nimport { Button } from '@ui/registry/tailwind/ui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@ui/registry/tailwind/ui/popover';\nimport { Separator } from '@ui/registry/tailwind/ui/separator';\nimport {\n  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator,\n} from '@ui/registry/tailwind/ui/command';\n\nconst props = withDefaults(defineProps<{\n  title: string;\n  options: string[];\n  modelValue: string[];\n  maxBadges?: number;\n  allowCreate?: boolean;\n  minWidth?: number;\n}>(), {\n  maxBadges: 2,\n  allowCreate: false,\n  minWidth: 200,\n});\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]];\n  'create': [value: string];\n}>();\n\nconst searchQuery = ref('');\nconst commandKey = ref(0);\n\nconst trimmedSearchQuery = computed(() => searchQuery.value.trim());\nconst selectedValues = computed(() => new Set(props.modelValue));\nconst filteredOptions = computed(() => {\n  const normalizedSearch = searchQuery.value.trim().toLowerCase();\n  if (!normalizedSearch) return props.options;\n  return props.options.filter(option => option.toLowerCase().includes(normalizedSearch));\n});\n\nconst canCreate = computed(() => {\n  if (!props.allowCreate) return false;\n  const value = trimmedSearchQuery.value;\n  if (value.length === 0) return false;\n  const normalizedValue = value.toLowerCase();\n  return !props.options.some(option => option.toLowerCase() === normalizedValue);\n});\n\nconst selectedBadges = computed(() => {\n  return props.options.filter(option => selectedValues.value.has(option)).slice(0, props.maxBadges);\n});\n\nconst contentStyle = computed(() => props.minWidth ? ({ minWidth: `${props.minWidth}px` }) : undefined);\n\nfunction toggleValue(value: string) {\n  const next = new Set(props.modelValue);\n  if (next.has(value)) next.delete(value);\n  else next.add(value);\n  emit('update:modelValue', Array.from(next));\n}\n\nfunction createFromSearchQuery() {\n  const value = trimmedSearchQuery.value;\n  if (!value) return;\n  emit('create', value);\n  clearSearch();\n  commandKey.value += 1;\n}\n\nfunction clearSearch() {\n  searchQuery.value = '';\n}\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        size=\"xs\"\n        class=\"gap-2 border-dashed\"\n      >\n        <CirclePlusIcon class=\"size-3.5\" />\n        {{ props.title }}\n        <template v-if=\"selectedValues.size > 0\">\n          <Separator\n            orientation=\"vertical\"\n            class=\"mx-1.5 h-3.5\"\n          />\n          <span class=\"inline-flex h-4 items-center justify-center rounded-md bg-secondary px-1.5 text-[11px] text-secondary-foreground lg:hidden\">\n            {{ selectedValues.size }}\n          </span>\n          <div class=\"hidden gap-1.5 lg:flex\">\n            <span\n              v-for=\"badge in selectedBadges\"\n              :key=\"badge\"\n              class=\"inline-flex h-4 items-center justify-center rounded-md bg-secondary px-1.5 text-[11px] text-secondary-foreground\"\n            >\n              {{ badge }}\n            </span>\n            <span\n              v-if=\"selectedValues.size > props.maxBadges\"\n              class=\"inline-flex h-4 items-center justify-center rounded-md bg-secondary px-1.5 text-[11px] text-secondary-foreground\"\n            >\n              +{{ selectedValues.size - props.maxBadges }}\n            </span>\n          </div>\n        </template>\n      </Button>\n    </PopoverTrigger>\n\n    <PopoverContent\n      class=\"w-80 p-0\"\n      align=\"start\"\n      :style=\"contentStyle\"\n    >\n      <Command :key=\"commandKey\">\n        <CommandInput\n          v-model=\"searchQuery\"\n          :placeholder=\"props.title\"\n          @keydown.esc=\"clearSearch\"\n        />\n        <CommandList>\n          <CommandEmpty v-if=\"filteredOptions.length === 0 && !canCreate\">\n            No results found.\n          </CommandEmpty>\n          <div\n            v-if=\"canCreate\"\n            class=\"p-2.5\"\n          >\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"w-full justify-start gap-2\"\n              @click=\"createFromSearchQuery\"\n            >\n              <CirclePlusIcon class=\"size-4\" />\n              Add {{ trimmedSearchQuery }}\n            </Button>\n          </div>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"option in filteredOptions\"\n              :key=\"option\"\n              :value=\"option\"\n              @select=\"() => toggleValue(option)\"\n            >\n              <div\n                :class=\"cn(\n                  'mr-2.5 flex size-4 shrink-0 items-center justify-center rounded border border-border opacity-60',\n                  selectedValues.has(option) && 'border-primary/60 bg-primary/15 opacity-100',\n                )\"\n              >\n                <CheckIcon\n                  :class=\"cn(\n                    'size-3.5 text-primary',\n                    !selectedValues.has(option) && 'invisible',\n                  )\"\n                />\n              </div>\n              <span class=\"truncate select-text\">{{ option }}</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator v-if=\"$slots.footer\" />\n          <div\n            v-if=\"$slots.footer\"\n            class=\"px-2.5 pb-3 pt-2.5\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as FacetedFilter } from './FacetedFilter.vue';\n"
+    }
+  ],
+  "type": "components:ui"
+}

package/__generated/registry-schemes/style-system/tailwind/input.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <input\n    v-model=\"model\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-border bg-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n    autocomplete=\"off\"\n  >\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <input\n    v-model=\"model\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-border bg-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n    autocomplete=\"off\"\n  >\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/number-field.json

@@ -21,7 +21,7 @@
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'reka-ui';\nimport { cn } from '@ui/utils';\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-border bg-transparent py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'reka-ui';\nimport { cn } from '@ui/utils';\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    :class=\"cn('flex h-10 w-full rounded-md border border-border bg-transparent py-2 text-sm text-center placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50')\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/pin-input.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<PinInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <PinInputInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('relative text-center focus:outline-hidden focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', $attrs.class ?? '')\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<PinInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <PinInputInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('relative text-center focus:outline-2 focus:outline-ring focus:-outline-offset-1 focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', $attrs.class ?? '')\"\n  />\n</template>\n"
     },
     {
       "name": "PinInputSeparator.vue",

package/__generated/registry-schemes/style-system/tailwind/radio-group.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<RadioGroupItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <CircleIcon class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<RadioGroupItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary focus:outline-hidden focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      class=\"flex items-center justify-center\"\n    >\n      <CircleIcon class=\"h-2.5 w-2.5 fill-current text-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/resizable.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "ResizableHandle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui';\nimport { GripVerticalIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SplitterResizeHandleProps & { withHandle?: boolean }>();\nconst emits = defineEmits<SplitterResizeHandleEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SplitterResizeHandle\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', $attrs.class ?? '')\"\n  >\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVerticalIcon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui';\nimport { GripVerticalIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SplitterResizeHandleProps & { withHandle?: boolean }>();\nconst emits = defineEmits<SplitterResizeHandleEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SplitterResizeHandle\n    v-bind=\"forwarded\"\n    :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-1 focus-visible:outline-ring focus-visible:outline-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', $attrs.class ?? '')\"\n  >\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVerticalIcon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
     },
     {
       "name": "ResizablePanelGroup.vue",

package/__generated/registry-schemes/style-system/tailwind/select.json

@@ -41,7 +41,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      $attrs.class ?? '',\n    )\"\n  >\n    <span class=\"break-all\">\n      <slot />\n    </span>\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 ml-2 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-2 focus:outline-ring focus:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      $attrs.class ?? '',\n    )\"\n  >\n    <span class=\"break-all\">\n      <slot />\n    </span>\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 ml-2 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",

package/__generated/registry-schemes/style-system/tailwind/sheet.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\nimport { type SheetVariants, sheetVariants } from '.';\nimport { cn } from '@ui/utils';\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: SheetVariants['side'];\n}\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<SheetContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, side: undefined }));\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), $attrs.class ?? '')\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\"\n      >\n        <XIcon class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { XIcon } from 'lucide-vue-next';\nimport { type SheetVariants, sheetVariants } from '.';\nimport { cn } from '@ui/utils';\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: SheetVariants['side'];\n}\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<SheetContentProps>();\nconst emits = defineEmits<DialogContentEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, side: undefined }));\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side }), $attrs.class ?? '')\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-2 focus:outline-ring focus:outline-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\"\n      >\n        <XIcon class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "SheetDescription.vue",

package/__generated/registry-schemes/style-system/tailwind/slider.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui';\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SliderRootProps>();\nconst emits = defineEmits<SliderRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SliderRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex w-full min-w-[50px] touch-none select-none items-center',\n      $attrs.class ?? '',\n    )\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n    />\n  </SliderRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'reka-ui';\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SliderRootProps>();\nconst emits = defineEmits<SliderRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SliderRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'relative flex w-full min-w-[50px] touch-none select-none items-center',\n      $attrs.class ?? '',\n    )\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background transition-colors focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n    />\n  </SliderRoot>\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/switch.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SwitchRootProps>();\nconst emits = defineEmits<SwitchRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-gray-300/70',\n      $attrs.class ?? '',\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')\"\n    />\n  </SwitchRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SwitchRootProps>();\nconst emits = defineEmits<SwitchRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"forwarded\"\n    :class=\"cn(\n      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-gray-300/70',\n      $attrs.class ?? '',\n    )\"\n  >\n    <SwitchThumb\n      :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')\"\n    />\n  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/tabs.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<TabsContentProps>();\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', $attrs.class ?? '')\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<TabsContentProps>();\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2', $attrs.class ?? '')\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
     },
     {
       "name": "TabsList.vue",
@@ -17,7 +17,7 @@
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<TabsTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 h-full text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-input data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      $attrs.class ?? '',\n    )\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<TabsTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 h-full text-sm font-medium transition-all focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-input data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n      $attrs.class ?? '',\n    )\"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/tags-input.json

@@ -15,7 +15,7 @@
     },
     {
       "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<TagsInputItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', $attrs.class ?? '')\"\n  >\n    <slot />\n  </TagsInputItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<TagsInputItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <TagsInputItem\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:outline-2 data-[state=active]:outline-ring data-[state=active]:outline-offset-2', $attrs.class ?? '')\"\n  >\n    <slot />\n  </TagsInputItem>\n</template>\n"
     },
     {
       "name": "TagsInputItemDelete.vue",

package/__generated/registry-schemes/style-system/tailwind/textarea.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<{\n  modelValue?: string | number;\n}>();\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <textarea\n    v-model=\"model\"\n    :class=\"cn('flex min-h-20 w-full rounded-md border border-border bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n    autocomplete=\"off\"\n  />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<{\n  modelValue?: string | number;\n}>();\n\nconst model = defineModel<string | number>();\n</script>\n\n<template>\n  <textarea\n    v-model=\"model\"\n    :class=\"cn('flex min-h-20 w-full rounded-md border border-border bg-input px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n    autocomplete=\"off\"\n  />\n</template>\n"
     },
     {
       "name": "index.ts",

package/__generated/registry-schemes/style-system/tailwind/toggle.json

@@ -9,7 +9,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Toggle } from './Toggle.vue';\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>;\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Toggle } from './Toggle.vue';\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>;\n"
     }
   ],
   "type": "components:ui"

package/dist/index.js

@@ -25088,7 +25088,7 @@ Components: ${highlight(DEFAULT_COMPONENTS)}`
     tailwindConfigType: detectedConfig.tailwindConfigType,
     setupTailwind: options8.styleSystem === "tailwind" ? detectedConfig.setupTailwind : false,
     components: DEFAULT_COMPONENTS,
-    utils: DEFAULT_UTILS,
+    utils: options8.styleSystem === "tailwind" ? DEFAULT_UTILS : "",
     generatePreflight: options8.styleSystem === "css"
   });
   await writeConfigFile(cwd, config);