tembro 1.0.2 → 2.0.0

package/packages/cli/vendor/src/components/calendar/calendar.tsx

@@ -269,7 +269,7 @@ function Calendar({
       data-slot="calendar"
       data-months={resolvedNumberOfMonths}
       className={cn(
-        "w-fit rounded-[calc(var(--radius-2xl)+2px)] border border-border/70 bg-popover p-3 text-popover-foreground shadow-[0_18px_48px_rgba(15,23,42,0.18)] backdrop-blur",
+        "w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur",
         className
       )}
       {...props}
@@ -310,7 +310,7 @@ function Calendar({
         }
       >
         {monthDaysByMonth.map(({ month: visibleMonth, days }) => (
-          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-2xl)] bg-transparent p-1">
+          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-lg)] bg-transparent p-1">
             {shouldShowMonthHeaders && (
               <div className="mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground">
                 {getMonthLabel(visibleMonth, locale)}
@@ -354,7 +354,7 @@ function Calendar({
                     data-in-range={inRange || undefined}
                     data-disabled-reason={disabledReason}
                     className={cn(
-                      "flex h-9 items-center justify-center rounded-[min(var(--radius-xl),14px)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30",
+                      "flex h-9 items-center justify-center rounded-[var(--radius-md)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30",
                       outside && "text-muted-foreground/34",
                       dateKey === todayKey && "border-border/70 bg-muted/60 text-foreground",
                       inRange && "bg-primary/10 text-foreground",

package/packages/cli/vendor/src/components/calendar/date-picker.tsx

@@ -59,7 +59,7 @@ function DatePicker({
               variant="outline"
               disabled={disabled}
               className={cn(
-                "min-h-11 w-full justify-start rounded-[min(var(--radius-xl),16px)] border-border/80 bg-background/96 text-left font-normal shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+                "min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
                 !hasValue && "text-muted-foreground",
                 triggerClassName
               )}
@@ -74,7 +74,7 @@ function DatePicker({
         <PopoverContent
           align="start"
           className={cn(
-            "w-auto overflow-hidden rounded-[calc(var(--radius-2xl)+2px)] border-border/70 bg-popover p-0 shadow-[0_22px_56px_rgba(15,23,42,0.2)] backdrop-blur",
+            "w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur",
             contentClassName
           )}
         >

package/packages/cli/vendor/src/components/calendar/date-range-picker.tsx

@@ -119,7 +119,7 @@ function DateRangePicker({
               variant="outline"
               disabled={disabled}
               className={cn(
-                "min-h-11 w-full justify-start rounded-[min(var(--radius-xl),16px)] border-border/80 bg-background/96 text-left font-normal shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+                "min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
                 !hasValue && "text-muted-foreground",
                 triggerClassName
               )}
@@ -132,7 +132,7 @@ function DateRangePicker({
         <PopoverContent
           align="start"
           className={cn(
-            "w-auto overflow-hidden rounded-[calc(var(--radius-2xl)+2px)] border-border/70 bg-popover p-0 shadow-[0_22px_56px_rgba(15,23,42,0.2)] backdrop-blur",
+            "w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur",
             contentClassName
           )}
         >
@@ -151,14 +151,13 @@ function DateRangePicker({
                 <span className="block truncate">{draftLabel}</span>
               </div>
               <div className="flex items-center gap-2">
-                <Button type="button" variant="ghost" size="sm" className="rounded-full" onClick={clearDraftValue}>
+                <Button type="button" variant="ghost" size="sm" onClick={clearDraftValue}>
                   {labels?.clear ?? "Clear"}
                 </Button>
                 <Button
                   type="button"
                   size="sm"
-                  className="rounded-full"
-                  disabled={!hasDraftValue}
+                  disabled={!hasDraftValue}
                   onClick={applyDraftValue}
                 >
                   {labels?.apply ?? "Apply"}

package/packages/cli/vendor/src/components/data-table/data-table-toolbar.tsx

@@ -8,7 +8,7 @@ const dataTableToolbarVariants = cva("flex flex-col", {
     variant: {
       default: "",
       plain: "border-transparent bg-transparent shadow-none",
-      soft: "rounded-[var(--radius-2xl)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--card),var(--background)_16%)] shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
+      soft: "rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--card),var(--background)_16%)] shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
     },
     density: {
       compact: "gap-3 p-3",
@@ -91,7 +91,7 @@ function DataTableToolbar({
           </div>
 
           {hasSelection && (
-            <div data-slot="data-table-selection-bar" className="flex shrink-0 items-center gap-2 rounded-full border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur">
+            <div data-slot="data-table-selection-bar" className="flex shrink-0 items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur">
               <span className="text-muted-foreground">{selectedLabel(selectedCount, totalCount)}</span>
               {selectionActions}
             </div>

package/packages/cli/vendor/src/components/data-table/data-table.tsx

@@ -433,7 +433,7 @@ function DataTable<TData, TValue = unknown>({
         data-striped={striped || undefined}
         data-bordered={bordered || undefined}
         className={cn(
-          "overflow-hidden rounded-[var(--radius-2xl)] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_30px_rgba(15,23,42,0.08))] backdrop-blur",
+          "overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur",
           renderMobileCard && "hidden md:block",
           tableWrapperClassName
         )}
@@ -461,7 +461,7 @@ function DataTable<TData, TValue = unknown>({
                     }}
                       className={cn(
                         densityHeadClassName[density],
-                        "bg-transparent text-muted-foreground",
+                        "bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground",
                         stickyHeader && "bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur",
                         header.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]",
                         bordered && "border-r last:border-r-0",
@@ -492,7 +492,7 @@ function DataTable<TData, TValue = unknown>({
                         data-disabled={rowDisabled || undefined}
                         className={cn(
                           onRowClick && !rowDisabled && "cursor-pointer",
-                          !rowDisabled && "transition-colors hover:bg-[color:var(--aui-page-bg-alt)]",
+                          !rowDisabled && "transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]",
                           rowDisabled && "pointer-events-none opacity-55",
                           getRowClassName(row, rowClassName)
                         )}

package/packages/cli/vendor/src/components/display/smart-card.tsx

@@ -192,22 +192,22 @@ function InfoCard({
   )
 }
 
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardVariant = InfoCardVariant
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardSize = InfoCardSize
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardDensity = InfoCardDensity
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardOrientation = InfoCardOrientation
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardClassNames = InfoCardClassNames
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardRenderContext = InfoCardRenderContext
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 export type SmartCardProps = InfoCardProps
 
-/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+/** @deprecated Prefer `InfoCard` for new public usage. */
 function SmartCard(props: SmartCardProps) {
   return <InfoCard {...props} />
 }

package/packages/cli/vendor/src/components/inputs/combobox.tsx

@@ -1,9 +1,10 @@
 import * as React from "react"
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
 
 export type ComboboxOption<TValue extends string = string> = {
   value: TValue
@@ -22,8 +23,12 @@ export type ComboboxProps<TValue extends string = string> = React.ComponentProps
   searchPlaceholder?: string
   emptyLabel?: React.ReactNode
   disabled?: boolean
-  invalid?: boolean
-}
+  invalid?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+  optionClassName?: string
+  searchClassName?: string
+}
 
 function Combobox<TValue extends string = string>({
   value,
@@ -32,11 +37,15 @@ function Combobox<TValue extends string = string>({
   placeholder = "Select option",
   searchPlaceholder = "Search...",
   emptyLabel = "No option found",
-  disabled = false,
-  invalid,
-  className,
-  ...props
-}: ComboboxProps<TValue>) {
+  disabled = false,
+  invalid,
+  triggerClassName,
+  contentClassName,
+  optionClassName,
+  searchClassName,
+  className,
+  ...props
+}: ComboboxProps<TValue>) {
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
   const selectedOption = options.find((option) => option.value === value)
@@ -47,45 +56,66 @@ function Combobox<TValue extends string = string>({
     return String(option.searchValue ?? option.label).toLowerCase().includes(normalizedSearch)
   })
 
-  return (
-    <div data-slot="combobox" className={cn("relative grid gap-2", className)} {...props}>
-      <Button type="button" variant="outline" disabled={disabled} aria-invalid={invalid || undefined} className="w-full justify-between" onClick={() => setOpen((value) => !value)}>
-        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>{selectedOption?.label ?? placeholder}</span>
-        <ChevronDownIcon className="size-4 opacity-60" />
-      </Button>
-      {open && (
-        <div className="absolute top-full z-30 mt-2 w-full rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
-          <div className="relative mb-2">
-            <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className="h-9 pl-8" />
-          </div>
-          <div className="max-h-64 overflow-y-auto">
-            {filteredOptions.length ? filteredOptions.map((option) => {
+  return (
+    <div data-slot="combobox" className={cn("grid w-full gap-2", className)} {...props}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              aria-expanded={open}
+              aria-invalid={invalid || undefined}
+              className={cn("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", triggerClassName)}
+            />
+          }
+        >
+          <span className={cn("min-w-0 flex-1 truncate font-medium", !selectedOption && "font-normal text-muted-foreground")}>
+            {selectedOption?.label ?? placeholder}
+          </span>
+          <ChevronDownIcon className="size-4 opacity-60" />
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          data-slot="combobox-content"
+          className={cn("w-(--anchor-width) min-w-72 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", contentClassName)}
+        >
+          <div className="relative mb-2">
+            <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className={cn("h-9 pl-8", searchClassName)} />
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {filteredOptions.length ? filteredOptions.map((option) => {
               const active = option.value === value
               return (
                 <button
-                  key={option.value}
-                  type="button"
-                  disabled={option.disabled}
-                  className={cn("flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50", active && "bg-muted")}
-                  onClick={() => {
-                    onValueChange?.(option.value, option)
-                    setOpen(false)
-                  }}
-                >
-                  <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">{active && <CheckIcon className="size-4" />}</span>
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  data-selected={active || undefined}
+                  className={cn(
+                    "flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm transition-colors hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)]",
+                    optionClassName
+                  )}
+                  onClick={() => {
+                    onValueChange?.(option.value, option)
+                    setOpen(false)
+                  }}
+                >
+                  <span className={cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", active && "border-primary bg-primary text-primary-foreground")}>{active && <CheckIcon className="size-3" />}</span>
                   <span className="min-w-0">
                     <span className="block truncate font-medium">{option.label}</span>
                     {option.description && <span className="block text-xs text-muted-foreground">{option.description}</span>}
                   </span>
                 </button>
               )
-            }) : <div className="px-2 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+            }) : <div className="rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
 
 export { Combobox }

package/packages/cli/vendor/src/components/inputs/simple-select.tsx

@@ -29,7 +29,7 @@ export type SimpleSelectProps = Omit<
   searchPlaceholder?: string
   emptyLabel?: React.ReactNode
   clearLabel?: string
-  size?: "sm" | "default"
+  size?: "sm" | "default" | "lg"
   clearable?: boolean
   searchable?: boolean
   loading?: boolean
@@ -94,7 +94,7 @@ function SimpleSelect({
           <button
             type="button"
             aria-label={clearLabel}
-            className="ml-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={(event) => {
               event.preventDefault()
               stopInteractivePropagation(event)
@@ -114,7 +114,7 @@ function SimpleSelect({
         )}
       >
         {searchable ? (
-          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border px-2.5 py-2 text-sm">
+          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm">
             <SearchIcon className="size-4 text-muted-foreground" />
             <input
               value={search}
@@ -126,12 +126,12 @@ function SimpleSelect({
         ) : null}
 
         {loading ? (
-          <div data-slot="select-state" className="flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">
+          <div data-slot="select-state" className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground">
             <LoaderCircleIcon className="size-4 animate-spin" />
             {loadingLabel}
           </div>
         ) : filteredOptions.length === 0 ? (
-          <div data-slot="select-state" className="rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
+          <div data-slot="select-state" className="rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
         ) : (
           filteredOptions.map((option) => {
             const selected = option.value === value
@@ -140,7 +140,7 @@ function SimpleSelect({
                 key={option.value}
                 value={option.value}
                 disabled={option.disabled}
-                className={cn("rounded-[min(var(--radius-lg),14px)]", itemClassName)}
+                className={cn("rounded-[var(--radius-md)]", itemClassName)}
               >
                 {renderOption ? (
                   renderOption(option, { selected })

package/packages/cli/vendor/src/components/ui/button.tsx

@@ -0,0 +1,2 @@
+export * from "./button/index"
+

package/packages/cli/vendor/src/components/ui/input.tsx

@@ -0,0 +1,2 @@
+export * from "./input/index"
+

package/packages/cli/vendor/src/index.ts

@@ -44,7 +44,6 @@ export * from './components/upload'
 export * from './components/charts'
 export * from './components/wizard'
 
-// Meta and helpers
-export * from './families'
-export * from './hooks'
-export * from './lib/utils'
+// Meta and helpers
+export * from './hooks'
+export * from './lib/utils'

package/packages/cli/vendor/src/showcase/index.ts

@@ -18,12 +18,11 @@ import { registrySpecificDemoRegistry } from "./registry-specific"
 import { supplementalShowcaseDemoRegistry } from "./supplemental"
 
 export * from "./types"
-export * from "./premium"
-export * from "./registry-quality"
-export * from "./registry-specific"
-export * from "./fallback"
-export * from "./families/index"
-export * from "./preview-catalog"
+export * from "./premium"
+export * from "./registry-quality"
+export * from "./registry-specific"
+export * from "./fallback"
+export * from "./preview-catalog"
 export * from "./preview-registry"
 export * from "./site-data"
 export * from "./component-api-schema"

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "1.0.0"
+export const PACKAGE_LATEST_VERSION = "2.0.0"
 export const PACKAGE_LATEST_RELEASE_DATE = "July 7, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
 

package/packages/cli/vendor/src/showcase/premium/accordion/mock.ts

@@ -11,10 +11,10 @@ const items = [
     content: "Keep product decisions inside tokens instead of hardcoded one-off wrappers.",
   },
   {
-    key: "families",
-    title: "Component families",
-    description: "Teach one primary surface first.",
-    content: "Members like AsyncSelect or FormAsyncSelect should stay inside the canonical route.",
+    key: "composition",
+    title: "Component composition",
+    description: "Teach one component first.",
+    content: "Advanced behavior should be exposed through props, hooks, and helpers instead of separate public groups.",
   },
 ]
 

package/packages/cli/vendor/src/showcase/{families/data-table → premium/data-table-parts}/data.ts

@@ -1,4 +1,28 @@
-import type { DataTableDemoPreset, DataTableDemoRow, DataTableDemoToolbarAction } from "./types"
+export type DataTableDemoRow = {
+  invoice: string
+  order: string
+  customer: string
+  owner: string
+  channel: string
+  status: "Paid" | "Review" | "Draft" | "Overdue"
+  stock: number
+  items: number
+  amount: string
+  amountValue: number
+  trend: "up" | "down" | "steady"
+  updatedAt: string
+}
+
+export type DataTableDemoToolbarAction = {
+  label: string
+  variant: "default" | "outline"
+}
+
+export type DataTableDemoPreset = {
+  value: "all" | "finance" | "at-risk"
+  label: string
+  description: string
+}
 
 const customers = ["Acme Inc.", "Larana", "ShipFast", "Toolpad", "Pixels UI", "Northstar"] as const
 const owners = ["Azamat", "Malika", "Sardor", "Nodira", "Asadbek", "Kamola"] as const

package/packages/cli/vendor/src/showcase/premium/data-table-parts/showcase.tsx

@@ -15,8 +15,7 @@ import {
   createDataTableSelectColumn,
 } from "@/index"
 
-import { buildDataTableDemoRows, dataTableDemoPresets } from "@/showcase/families/data-table/data"
-import type { DataTableDemoRow } from "@/showcase/families/data-table/types"
+import { buildDataTableDemoRows, dataTableDemoPresets, type DataTableDemoRow } from "./data"
 
 import type { ComponentDemoProps } from "../types"