fix: tailwind prefix usage

Author: damlayildiz

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqliteai/docs-chatbot",
   "description": "Documentation search chatbot powered by SQLite and AI",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.cjs.js",

src/components/ai-elements/message.tsx

@@ -11,7 +11,7 @@ export type MessageProps = HTMLAttributes<HTMLDivElement> & {
 export const Message = ({ className, from, ...props }: MessageProps) => (
   <div
     className={cn(
-      "group dcb:flex dcb:w-full dcb:items-end dcb:justify-end dcb:gap-2 dcb:py-4",
+      "dcb:group dcb:flex dcb:w-full dcb:items-end dcb:justify-end dcb:gap-2 dcb:py-4",
       from === "user"
         ? "is-user"
         : "is-assistant dcb:flex-row-reverse dcb:justify-end",
@@ -28,12 +28,12 @@ const messageContentVariants = cva(
       variant: {
         contained: [
           "dcb:max-w-[80%] dcb:px-4 dcb:py-3",
-          "group-[.is-user]:dcb:bg-primary group-[.is-user]:dcb:text-primary-foreground",
-          "group-[.is-assistant]:dcb:bg-secondary group-[.is-assistant]:dcb:text-foreground",
+          "dcb:group-[.is-user]:bg-primary dcb:group-[.is-user]:text-primary-foreground",
+          "dcb:group-[.is-assistant]:bg-secondary dcb:group-[.is-assistant]:text-foreground",
         ],
         flat: [
-          "group-[.is-user]:dcb:max-w-[80%] group-[.is-user]:dcb:bg-secondary group-[.is-user]:dcb:px-4 group-[.is-user]:dcb:py-3 group-[.is-user]:dcb:text-foreground",
-          "group-[.is-assistant]:dcb:text-foreground",
+          "dcb:group-[.is-user]:max-w-[80%] dcb:group-[.is-user]:bg-secondary dcb:group-[.is-user]:px-4 dcb:group-[.is-user]:py-3 dcb:group-[.is-user]:text-foreground",
+          "dcb:group-[.is-assistant]:text-foreground",
         ],
       },
     },

src/components/ai-elements/prompt-input.tsx

@@ -533,7 +533,7 @@ export const PromptInputTools = ({
   <div
     className={cn(
       "dcb:flex dcb:items-center dcb:gap-1",
-      "[&_button:first-child]:dcb:rounded-bl-xl",
+      "dcb:[&_button:first-child]:rounded-bl-xl",
       className
     )}
     {...props}
@@ -662,7 +662,7 @@ export const PromptInputModelSelectTrigger = ({
   <SelectTrigger
     className={cn(
       "dcb:border-none dcb:bg-transparent dcb:font-medium dcb:text-muted-foreground dcb:shadow-none dcb:transition-colors",
-      'hover:dcb:bg-accent hover:dcb:text-foreground [&[aria-expanded="true"]]:dcb:bg-accent [&[aria-expanded="true"]]:dcb:text-foreground',
+      'hover:dcb:bg-accent hover:dcb:text-foreground dcb:[&[aria-expanded="true"]]:bg-accent dcb:[&[aria-expanded="true"]]:text-foreground',
       className
     )}
     {...props}

src/components/response-light.tsx

@@ -12,7 +12,7 @@ export const ResponseLight = ({ children, className }: ResponseLightProps) => {
   return (
     <div
       className={cn(
-        "dcb:size-full dcb:prose dcb:prose-sm dark:dcb:prose-invert dcb:max-w-none [&>*:first-child]:dcb:mt-0 [&>*:last-child]:dcb:mb-0",
+        "dcb:size-full dcb:prose dcb:prose-sm dark:dcb:prose-invert dcb:max-w-none dcb:[&>*:first-child]:mt-0 dcb:[&>*:last-child]:mb-0",
         "dcb:text-sm dcb:text-muted-foreground",
         className
       )}

src/components/ui/alert.tsx

@@ -3,13 +3,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/cn";
 
 const alertVariants = cva(
-  "dcb:relative dcb:w-full dcb:rounded-lg dcb:border dcb:px-4 dcb:py-3 dcb:text-sm dcb:grid has-[>svg]:dcb:grid-cols-[calc(var(--spacing)*4)_1fr] dcb:grid-cols-[0_1fr] has-[>svg]:dcb:gap-x-3 dcb:gap-y-0.5 dcb:items-start [&>svg]:dcb:size-4 [&>svg]:dcb:translate-y-0.5 [&>svg]:dcb:text-current",
+  "dcb:relative dcb:w-full dcb:rounded-lg dcb:border dcb:px-4 dcb:py-3 dcb:text-sm dcb:grid dcb:has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] dcb:grid-cols-[0_1fr] dcb:has-[>svg]:gap-x-3 dcb:gap-y-0.5 dcb:items-start dcb:[&>svg]:size-4 dcb:[&>svg]:translate-y-0.5 dcb:[&>svg]:text-current",
   {
     variants: {
       variant: {
         default: "dcb:bg-card dcb:text-card-foreground",
         destructive:
-          "dcb:text-destructive dcb:bg-card [&>svg]:dcb:text-current *:data-[slot=alert-description]:dcb:text-destructive/90",
+          "dcb:text-destructive dcb:bg-card dcb:[&>svg]:text-current dcb:*:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
@@ -54,7 +54,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "dcb:text-muted-foreground dcb:col-start-2 dcb:grid dcb:justify-items-start dcb:gap-1 dcb:text-sm [&_p]:dcb:leading-relaxed",
+        "dcb:text-muted-foreground dcb:col-start-2 dcb:grid dcb:justify-items-start dcb:gap-1 dcb:text-sm dcb:[&_p]:leading-relaxed",
         className
       )}
       {...props}

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/cn";
 
 const buttonVariants = cva(
-  "dcb:inline-flex dcb:items-center dcb:justify-center dcb:gap-2 dcb:whitespace-nowrap dcb:rounded-md dcb:text-sm dcb:font-medium dcb:transition-all disabled:dcb:pointer-events-none disabled:dcb:opacity-50 [&_svg]:dcb:pointer-events-none [&_svg:not([class*='size-'])]:dcb:size-4 dcb:shrink-0 [&_svg]:dcb:shrink-0 dcb:outline-none focus-visible:dcb:border-ring focus-visible:dcb:ring-ring/50 focus-visible:dcb:ring-[3px] aria-invalid:dcb:ring-destructive/20 dark:aria-invalid:dcb:ring-destructive/40 aria-invalid:dcb:border-destructive",
+  "dcb:inline-flex dcb:items-center dcb:justify-center dcb:gap-2 dcb:whitespace-nowrap dcb:rounded-md dcb:text-sm dcb:font-medium dcb:transition-all disabled:dcb:pointer-events-none disabled:dcb:opacity-50 dcb:[&_svg]:pointer-events-none dcb:[&_svg:not([class*='size-'])]:size-4 dcb:shrink-0 dcb:[&_svg]:shrink-0 dcb:outline-none focus-visible:dcb:border-ring focus-visible:dcb:ring-ring/50 focus-visible:dcb:ring-[3px] aria-invalid:dcb:ring-destructive/20 dark:aria-invalid:dcb:ring-destructive/40 aria-invalid:dcb:border-destructive",
   {
     variants: {
       variant: {
@@ -22,9 +22,9 @@ const buttonVariants = cva(
         link: "dcb:text-primary dcb:underline-offset-4 hover:dcb:underline",
       },
       size: {
-        default: "dcb:h-9 dcb:px-4 dcb:py-2 has-[>svg]:dcb:px-3",
-        sm: "dcb:h-8 dcb:rounded-md dcb:gap-1.5 dcb:px-3 has-[>svg]:dcb:px-2.5",
-        lg: "dcb:h-10 dcb:rounded-md dcb:px-6 has-[>svg]:dcb:px-4",
+        default: "dcb:h-9 dcb:px-4 dcb:py-2 dcb:has-[>svg]:px-3",
+        sm: "dcb:h-8 dcb:rounded-md dcb:gap-1.5 dcb:px-3 dcb:has-[>svg]:px-2.5",
+        lg: "dcb:h-10 dcb:rounded-md dcb:px-6 dcb:has-[>svg]:px-4",
         icon: "dcb:size-9",
       },
     },

src/components/ui/dialog.tsx

@@ -77,7 +77,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="dcb:ring-offset-background dcb:bg-background focus:dcb:ring-ring data-[state=open]:dcb:bg-accent data-[state=open]:dcb:text-muted-foreground dcb:absolute dcb:top-4 dcb:right-4 dcb:rounded-xs dcb:opacity-70 dcb:transition-opacity hover:dcb:opacity-100 focus:dcb:ring-2 focus:dcb:ring-offset-2 focus:dcb:outline-hidden disabled:dcb:pointer-events-none [&_svg]:dcb:pointer-events-none [&_svg]:dcb:shrink-0 [&_svg:not([class*='size-'])]:dcb:size-4"
+            className="dcb:ring-offset-background dcb:bg-background focus:dcb:ring-ring dcb:data-[state=open]:bg-accent dcb:data-[state=open]:text-muted-foreground dcb:absolute dcb:top-4 dcb:right-4 dcb:rounded-xs dcb:opacity-70 dcb:transition-opacity hover:dcb:opacity-100 focus:dcb:ring-2 focus:dcb:ring-offset-2 focus:dcb:outline-hidden disabled:dcb:pointer-events-none dcb:[&_svg]:pointer-events-none dcb:[&_svg]:shrink-0 dcb:[&_svg:not([class*='size-'])]:size-4 dcb:cursor-pointer"
           >
             <XIcon />
             <span className="dcb:sr-only">Close</span>

src/components/ui/dropdown-menu.tsx

@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:dcb:bg-accent focus:dcb:text-accent-foreground data-[variant=destructive]:dcb:text-destructive data-[variant=destructive]:focus:dcb:bg-destructive/10 dark:data-[variant=destructive]:focus:dcb:bg-destructive/20 data-[variant=destructive]:focus:dcb:text-destructive data-[variant=destructive]:*:[svg]:!dcb:text-destructive [&_svg:not([class*='text-'])]:dcb:text-muted-foreground dcb:relative dcb:flex dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:px-2 dcb:py-1.5 dcb:text-sm dcb:outline-hidden dcb:select-none data-[disabled]:dcb:pointer-events-none data-[disabled]:dcb:opacity-50 data-[inset]:dcb:pl-8 [&_svg]:dcb:pointer-events-none [&_svg]:dcb:shrink-0 [&_svg:not([class*='size-'])]:dcb:size-4",
+        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:data-[variant=destructive]:text-destructive dcb:data-[variant=destructive]:focus:bg-destructive/10 dark:dcb:data-[variant=destructive]:focus:bg-destructive/20 dcb:data-[variant=destructive]:focus:text-destructive dcb:data-[variant=destructive]:*:[svg]:!text-destructive dcb:[&_svg:not([class*='text-'])]:text-muted-foreground dcb:relative dcb:flex dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:px-2 dcb:py-1.5 dcb:text-sm dcb:outline-hidden dcb:select-none dcb:data-[disabled]:pointer-events-none dcb:data-[disabled]:opacity-50 dcb:data-[inset]:pl-8 dcb:[&_svg]:pointer-events-none dcb:[&_svg]:shrink-0 dcb:[&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:relative dcb:flex dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:py-1.5 dcb:pr-2 dcb:pl-8 dcb:text-sm dcb:outline-hidden dcb:select-none data-[disabled]:dcb:pointer-events-none data-[disabled]:dcb:opacity-50 [&_svg]:dcb:pointer-events-none [&_svg]:dcb:shrink-0 [&_svg:not([class*='size-'])]:dcb:size-4",
+        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:relative dcb:flex dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:py-1.5 dcb:pr-2 dcb:pl-8 dcb:text-sm dcb:outline-hidden dcb:select-none dcb:data-[disabled]:pointer-events-none dcb:data-[disabled]:opacity-50 dcb:[&_svg]:pointer-events-none dcb:[&_svg]:shrink-0 dcb:[&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:relative dcb:flex dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:py-1.5 dcb:pr-2 dcb:pl-8 dcb:text-sm dcb:outline-hidden dcb:select-none data-[disabled]:dcb:pointer-events-none data-[disabled]:dcb:opacity-50 [&_svg]:dcb:pointer-events-none [&_svg]:dcb:shrink-0 [&_svg:not([class*='size-'])]:dcb:size-4",
+        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:relative dcb:flex dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:py-1.5 dcb:pr-2 dcb:pl-8 dcb:text-sm dcb:outline-hidden dcb:select-none dcb:data-[disabled]:pointer-events-none dcb:data-[disabled]:opacity-50 dcb:[&_svg]:pointer-events-none dcb:[&_svg]:shrink-0 dcb:[&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "dcb:px-2 dcb:py-1.5 dcb:text-sm dcb:font-medium data-[inset]:dcb:pl-8",
+        "dcb:px-2 dcb:py-1.5 dcb:text-sm dcb:font-medium dcb:data-[inset]:pl-8",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:dcb:bg-accent focus:dcb:text-accent-foreground data-[state=open]:dcb:bg-accent data-[state=open]:dcb:text-accent-foreground dcb:flex dcb:cursor-default dcb:items-center dcb:rounded-sm dcb:px-2 dcb:py-1.5 dcb:text-sm dcb:outline-hidden dcb:select-none data-[inset]:dcb:pl-8",
+        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:data-[state=open]:bg-accent dcb:data-[state=open]:text-accent-foreground dcb:flex dcb:cursor-default dcb:items-center dcb:rounded-sm dcb:px-2 dcb:py-1.5 dcb:text-sm dcb:outline-hidden dcb:select-none dcb:data-[inset]:pl-8",
         className
       )}
       {...props}

src/components/ui/select.tsx

@@ -35,7 +35,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "dcb:border-input data-[placeholder]:dcb:text-muted-foreground [&_svg:not([class*='text-'])]:dcb:text-muted-foreground focus-visible:dcb:border-ring focus-visible:dcb:ring-ring/50 aria-invalid:dcb:ring-destructive/20 dark:aria-invalid:dcb:ring-destructive/40 aria-invalid:dcb:border-destructive dark:dcb:bg-input/30 dark:hover:dcb:bg-input/50 dcb:flex dcb:w-fit dcb:items-center dcb:justify-between dcb:gap-2 dcb:rounded-md dcb:border dcb:bg-transparent dcb:px-3 dcb:py-2 dcb:text-sm dcb:whitespace-nowrap dcb:shadow-xs dcb:transition-[color,box-shadow] dcb:outline-none focus-visible:dcb:ring-[3px] disabled:dcb:cursor-not-allowed disabled:dcb:opacity-50 data-[size=default]:dcb:h-9 data-[size=sm]:dcb:h-8 *:data-[slot=select-value]:dcb:line-clamp-1 *:data-[slot=select-value]:dcb:flex *:data-[slot=select-value]:dcb:items-center *:data-[slot=select-value]:dcb:gap-2 [&_svg]:dcb:pointer-events-none [&_svg]:dcb:shrink-0 [&_svg:not([class*='size-'])]:dcb:size-4",
+        "dcb:border-input dcb:data-[placeholder]:text-muted-foreground dcb:[&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:dcb:border-ring focus-visible:dcb:ring-ring/50 aria-invalid:dcb:ring-destructive/20 dark:aria-invalid:dcb:ring-destructive/40 aria-invalid:dcb:border-destructive dark:dcb:bg-input/30 dark:hover:dcb:bg-input/50 dcb:flex dcb:w-fit dcb:items-center dcb:justify-between dcb:gap-2 dcb:rounded-md dcb:border dcb:bg-transparent dcb:px-3 dcb:py-2 dcb:text-sm dcb:whitespace-nowrap dcb:shadow-xs dcb:transition-[color,box-shadow] dcb:outline-none focus-visible:dcb:ring-[3px] disabled:dcb:cursor-not-allowed disabled:dcb:opacity-50 dcb:data-[size=default]:h-9 dcb:data-[size=sm]:h-8 dcb:*:data-[slot=select-value]:line-clamp-1 dcb:*:data-[slot=select-value]:flex dcb:*:data-[slot=select-value]:items-center dcb:*:data-[slot=select-value]:gap-2 dcb:[&_svg]:pointer-events-none dcb:[&_svg]:shrink-0 dcb:[&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function SelectContent({
         className={cn(
           "dcb:bg-popover dcb:text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dcb:relative dcb:z-50 dcb:max-h-(--radix-select-content-available-height) dcb:min-w-[8rem] dcb:origin-(--radix-select-content-transform-origin) dcb:overflow-x-hidden dcb:overflow-y-auto dcb:rounded-md dcb:border dcb:shadow-md",
           position === "popper" &&
-            "data-[side=bottom]:dcb:translate-y-1 data-[side=left]:dcb:-translate-x-1 data-[side=right]:dcb:translate-x-1 data-[side=top]:dcb:-translate-y-1",
+            "dcb:data-[side=bottom]:translate-y-1 dcb:data-[side=left]:-translate-x-1 dcb:data-[side=right]:translate-x-1 dcb:data-[side=top]:-translate-y-1",
           className
         )}
         position={position}
@@ -108,7 +108,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:dcb:bg-accent focus:dcb:text-accent-foreground [&_svg:not([class*='text-'])]:dcb:text-muted-foreground dcb:relative dcb:flex dcb:w-full dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:py-1.5 dcb:pr-8 dcb:pl-2 dcb:text-sm dcb:outline-hidden dcb:select-none data-[disabled]:dcb:pointer-events-none data-[disabled]:dcb:opacity-50 [&_svg]:dcb:pointer-events-none [&_svg]:dcb:shrink-0 [&_svg:not([class*='size-'])]:dcb:size-4 *:[span]:last:dcb:flex *:[span]:last:dcb:items-center *:[span]:last:dcb:gap-2",
+        "focus:dcb:bg-accent focus:dcb:text-accent-foreground dcb:[&_svg:not([class*='text-'])]:text-muted-foreground dcb:relative dcb:flex dcb:w-full dcb:cursor-default dcb:items-center dcb:gap-2 dcb:rounded-sm dcb:py-1.5 dcb:pr-8 dcb:pl-2 dcb:text-sm dcb:outline-hidden dcb:select-none dcb:data-[disabled]:pointer-events-none dcb:data-[disabled]:opacity-50 dcb:[&_svg]:pointer-events-none dcb:[&_svg]:shrink-0 dcb:[&_svg:not([class*='size-'])]:size-4 dcb:*:[span]:last:flex dcb:*:[span]:last:items-center dcb:*:[span]:last:gap-2",
         className
       )}
       {...props}