@k3-universe/react-kit 0.0.21 → 0.0.23

package/dist/kit/themes/spotify.css

@@ -1052,10 +1052,6 @@
     max-height: var(--radix-select-content-available-height);
   }
 
-  .max-h-56 {
-    max-height: calc(var(--spacing) * 56);
-  }
-
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -1072,6 +1068,10 @@
     min-height: calc(var(--spacing) * 4);
   }
 
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -1208,10 +1208,6 @@
     width: calc(var(--spacing) * 80);
   }
 
-  .w-\[--radix-popover-trigger-width\] {
-    width: --radix-popover-trigger-width;
-  }
-
   .w-\[70px\] {
     width: 70px;
   }
@@ -1308,8 +1304,8 @@
     max-width: var(--container-6xl);
   }
 
-  .max-w-\[10rem\] {
-    max-width: 10rem;
+  .max-w-\[150px\] {
+    max-width: 150px;
   }
 
   .max-w-\[calc\(100\%-2rem\)\] {
@@ -1372,10 +1368,6 @@
     min-width: calc(var(--spacing) * 10);
   }
 
-  .min-w-\[8ch\] {
-    min-width: 8ch;
-  }
-
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1384,6 +1376,10 @@
     min-width: 12rem;
   }
 
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
+
   .min-w-\[200px\] {
     min-width: 200px;
   }
@@ -1532,6 +1528,10 @@
     cursor: default;
   }
 
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1548,6 +1548,14 @@
     scroll-padding-block: calc(var(--spacing) * 1);
   }
 
+  .list-inside {
+    list-style-position: inside;
+  }
+
+  .list-disc {
+    list-style-type: disc;
+  }
+
   .list-none {
     list-style-type: none;
   }
@@ -2543,10 +2551,6 @@
     opacity: .5;
   }
 
-  .opacity-60 {
-    opacity: .6;
-  }
-
   .opacity-70 {
     opacity: .7;
   }
@@ -2656,10 +2660,6 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
-  .filter {
-    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-  }
-
   .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -3211,6 +3211,25 @@
     z-index: 20;
   }
 
+  .focus-within\:ring-2:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-within\:ring-ring:focus-within {
+    --tw-ring-color: var(--ring);
+  }
+
+  .focus-within\:ring-offset-2:focus-within {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .focus-within\:outline-none:focus-within {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   @media (hover: hover) {
     .hover\:border-foreground\/50:hover {
       border-color: var(--foreground);
@@ -3226,16 +3245,6 @@
       background-color: var(--accent);
     }
 
-    .hover\:bg-black\/5:hover {
-      background-color: #0000000d;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-black\/5:hover {
-        background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
-      }
-    }
-
     .hover\:bg-destructive\/90:hover {
       background-color: var(--destructive);
     }
@@ -3442,11 +3451,6 @@
     outline-color: var(--ring);
   }
 
-  .focus-visible\:outline-none:focus-visible {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-
   .active\:bg-sidebar-accent:active {
     background-color: var(--sidebar-accent);
   }
@@ -4869,16 +4873,6 @@
         }
       }
 
-      .dark\:hover\:bg-white\/10:hover {
-        background-color: #ffffff1a;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .dark\:hover\:bg-white\/10:hover {
-          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-        }
-      }
-
       .dark\:hover\:text-accent-foreground:hover {
         color: var(--accent-foreground);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k3-universe/react-kit",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -19,9 +19,9 @@
     }
   },
   "peerDependencies": {
+    "@tanstack/react-router": "^1.131.27",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@tanstack/react-router": "^1.131.27"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.1",
@@ -57,15 +57,17 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "downshift": "^9.0.10",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.540.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.9.0",
-    "react-hook-form": "^7.62.0",
     "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.62.0",
     "react-resizable-panels": "^3.0.4",
+    "react-select": "^5.10.2",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
@@ -74,15 +76,15 @@
     "zod": "^4.0.17"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.20",
     "@biomejs/biome": "^2.2.0",
     "@storybook/addon-a11y": "9.1.2",
     "@storybook/addon-essentials": "9.0.0-alpha.12",
     "@storybook/addon-interactions": "9.0.0-alpha.10",
     "@storybook/addon-storysource": "9.0.0-alpha.14",
+    "@tailwindcss/vite": "^4.1.12",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^20.19.11",
     "tailwindcss": "^4.1.12",
-    "tw-animate-css": "^1.3.7",
-    "@tailwindcss/vite": "^4.1.12"
+    "tw-animate-css": "^1.3.7"
   }
 }

package/src/kit/builder/data-table/components/DataTable.tsx

@@ -270,10 +270,10 @@ export function DataTable<TData, TValue>({
     <div className={cn('space-y-3', className)}>
       {formFilters && formFilters.length ? (
         effectiveFilterWrapper === 'accordion' ? (
-          <div className="rounded-md border">
+          <div className="rounded-md border border-border">
             <Accordion type="single" collapsible className="w-full" defaultValue="filters">
               <AccordionItem value="filters">
-                <AccordionTrigger className="px-4 py-3 border-b text-md">{effectiveFilterTitle}</AccordionTrigger>
+                <AccordionTrigger className="px-4 py-3 border-b border-border text-md">{effectiveFilterTitle}</AccordionTrigger>
                 <AccordionContent className="px-4 pb-4 pt-5">
                   <FormBuilder
                     key={JSON.stringify(formFilterValues ?? {})}
@@ -291,7 +291,7 @@ export function DataTable<TData, TValue>({
             </Accordion>
           </div>
         ) : effectiveFilterWrapper === 'card' ? (
-          <div className="rounded-md border p-4">
+          <div className="rounded-md border border-border p-4">
             <FormBuilder
               key={JSON.stringify(formFilterValues ?? {})}
               sections={formFilters as FormBuilderSectionConfig[]}
@@ -346,7 +346,7 @@ export function DataTable<TData, TValue>({
           </div>
         </div>
       )}
-      <div className="relative overflow-hidden rounded-md border" aria-busy={loading || undefined}>
+      <div className="relative overflow-hidden rounded-md border border-border" aria-busy={loading || undefined}>
         {loading && (
           <div className="pointer-events-none absolute inset-0 z-10 flex items-start justify-end p-2">
             <span className="inline-flex items-center gap-2 rounded bg-background/80 px-2 py-1 text-xs shadow-sm ring-1 ring-border">

package/src/kit/builder/form/components/FormBuilder.tsx

@@ -97,6 +97,9 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
           case 'switch':
             baseSchema = z.boolean();
             break;
+          case 'custom_field':
+            baseSchema = z.any();
+          break;
           default:
             baseSchema = z.string();
         }
@@ -256,8 +259,11 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
             fieldSchema = z.array(z.unknown());
           }
           break;
-        default:
+        case 'custom_field':
           fieldSchema = z.any();
+          break;
+        default:
+          fieldSchema = z.string();
       }
 
       return field.required ? fieldSchema : fieldSchema.optional();

package/src/kit/builder/form/components/fields/AutocompleteField.tsx

@@ -40,12 +40,11 @@ export function AutocompleteField({ field, value, onChange, className }: FieldRe
       chipClassName={field.chipClassName}
       clearable={field.clearable}
       defaultValue={defaultValueShaped}
-      initialSelectedOptions={field.initialSelectedOptions ?? null}
+      initialSelectedOptions={field.initialSelectedOptions ?? undefined}
       loadSelected={field.loadSelected}
       value={field.multiple ? ((Array.isArray(value) ? value : (value ? [value] : [])) as Array<string | number>) : ((value as string | number | null) ?? null)}
       onChange={(val, option, raw) => onChange(val, option, raw)}
       placeholder={field.placeholder}
-      searchPlaceholder={field.searchPlaceholder}
       renderOption={field.renderOption}
       disabled={field.disabled}
       className={className}

package/src/kit/builder/form/types.ts

@@ -61,12 +61,11 @@ export interface FormBuilderFieldConfig<
   description?: string
   required?: boolean
   disabled?: boolean
-  options?: { label: string; value: string | number | null }[]
+  options?: { label: string; value: string | number | boolean | null }[]
   autocompleteMode?: 'client' | 'server'
   fetcher?: AutocompleteFetcher
   fetcherFilter?: () => Record<string, string | number | boolean | null>
   pageSize?: number
-  searchPlaceholder?: string
   renderOption?: (option: AutocompleteOption, selected: boolean) => React.ReactNode
   multiple?: boolean
   allowCustomValue?: boolean