tembro 2.1.13 → 3.1.1

package/packages/cli/vendor/src/components/ui/select/index.tsx

@@ -104,25 +104,11 @@ function Select({
   onSearchChange,
   ...props
 }: SelectProps) {
-  if (!options && !groups) {
-    return (
-      <SelectRoot
-        value={value ?? undefined}
-        defaultValue={defaultValue ?? undefined}
-        onValueChange={(nextValue) => onValueChange?.((nextValue as string | null | undefined) ?? undefined)}
-        onOpenChange={onOpenChange}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </SelectRoot>
-    )
-  }
-
+  const hasCustomOptions = Boolean(options || groups)
   const [search, setSearch] = React.useState("")
   const optionGroups = React.useMemo<SelectOptionGroup[]>(
-    () => groups ?? [{ options: options ?? [] }],
-    [groups, options]
+    () => (hasCustomOptions ? groups ?? [{ options: options ?? [] }] : []),
+    [groups, hasCustomOptions, options]
   )
   const flatOptions = React.useMemo(
     () => optionGroups.flatMap((group) => group.options),
@@ -137,6 +123,21 @@ function Select({
     .filter((group) => group.options.length > 0)
   const filteredOptionsCount = filteredGroups.reduce((count, group) => count + group.options.length, 0)
 
+  if (!hasCustomOptions) {
+    return (
+      <SelectRoot
+        value={value ?? undefined}
+        defaultValue={defaultValue ?? undefined}
+        onValueChange={(nextValue) => onValueChange?.((nextValue as string | null | undefined) ?? undefined)}
+        onOpenChange={onOpenChange}
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </SelectRoot>
+    )
+  }
+
   return (
     <SelectRoot
       value={value ?? undefined}
@@ -302,7 +303,13 @@ function SelectTrigger({
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />} />
+      <SelectPrimitive.Icon
+        render={
+          <span className="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground">
+            <ChevronDownIcon className="size-4" />
+          </span>
+        }
+      />
     </SelectPrimitive.Trigger>
   )
 }

package/packages/cli/vendor/src/components/ui/table/index.tsx

@@ -1,121 +1,129 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-type TableProps = React.ComponentProps<"table"> & {
-  containerClassName?: string
-}
-
-function Table({ className, containerClassName, ...props }: TableProps) {
-  return (
-    <div
-      data-slot="table-container"
-      className={cn(
-        "relative w-full overflow-x-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-table-container-surface,var(--card))] shadow-[var(--aui-card-shadow,0_12px_30px_rgba(15,23,42,0.08))]",
-        containerClassName
-      )}
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("bg-[color:color-mix(in_oklch,var(--muted),var(--background)_30%)] [&_tr]:border-b [&_tr]:border-[color:var(--aui-card-border,var(--border))]", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "border-t border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_46%)] font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "border-b border-[color:var(--aui-card-border,var(--border))] transition-colors hover:bg-[color:color-mix(in_oklch,var(--muted),var(--background)_14%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[striped=true]:bg-[color:color-mix(in_oklch,var(--muted),transparent_68%)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "h-11 px-4 text-left align-middle text-[0.72rem] font-semibold whitespace-nowrap uppercase tracking-[0.14em] text-muted-foreground [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "px-4 py-3.5 align-middle whitespace-nowrap text-foreground/92 [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TableProps = React.ComponentProps<"table"> & {
+  containerClassName?: string
+  containerRef?: React.Ref<HTMLDivElement>
+  containerStyle?: React.CSSProperties
+}
+
+function Table({ className, containerClassName, containerRef, containerStyle, ...props }: TableProps) {
+  return (
+    <div
+      ref={containerRef}
+      data-slot="table-container"
+      className={cn(
+        "relative w-full overflow-x-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-table-container-surface,var(--card))] shadow-[var(--aui-card-shadow,0_12px_30px_rgba(15,23,42,0.08))]",
+        containerClassName
+      )}
+      style={containerStyle}
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("bg-[color:color-mix(in_oklch,var(--muted),var(--background)_30%)] [&_tr]:border-b [&_tr]:border-[color:var(--aui-card-border,var(--border))]", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_46%)] font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.ComponentPropsWithoutRef<"tr">
+>(function TableRow({ className, ...props }, ref) {
+  return (
+    <tr
+      ref={ref}
+      data-slot="table-row"
+      className={cn(
+        "border-b border-[color:var(--aui-card-border,var(--border))] transition-colors hover:bg-[color:color-mix(in_oklch,var(--muted),var(--background)_14%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[striped=true]:bg-[color:color-mix(in_oklch,var(--muted),transparent_68%)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-11 px-4 text-left align-middle text-[0.72rem] font-semibold whitespace-nowrap uppercase tracking-[0.14em] text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-4 py-3.5 align-middle whitespace-nowrap text-foreground/92 [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

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

@@ -31,7 +31,7 @@ export * from './components/layout/public'
 export * from './components/navigation'
 export * from './components/filters'
 export * from './components/overlay'
-export * from './components/inputs/public'
+export * from './components/inputs/public'
 export * from './components/form/public'
 export * from './components/feedback'
 export * from './components/display'
@@ -43,7 +43,8 @@ export * from './components/calendar'
 export * from './components/upload'
 export * from './components/charts'
 export * from './components/wizard'
+export * from './components/dnd'
 
-// Meta and helpers
-export * from './hooks'
-export * from './lib/utils'
+// Meta and helpers
+export * from './hooks'
+export * from './lib/utils'

package/packages/cli/vendor/src/public-component-surface.ts

@@ -1,93 +1,90 @@
-export type PublicComponentSurfaceEntry = {
-  slug: string
-  registryName: string
-  surface: "documented" | "standalone"
-}
-
-export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
-  { slug: "button", registryName: "button", surface: "documented" },
-  { slug: "input", registryName: "input", surface: "documented" },
-  { slug: "select", registryName: "select", surface: "documented" },
-  { slug: "card", registryName: "card", surface: "documented" },
-  { slug: "badge", registryName: "badge", surface: "documented" },
-  { slug: "checkbox", registryName: "checkbox", surface: "documented" },
-  { slug: "overlay", registryName: "dialog", surface: "documented" },
-  { slug: "data-table", registryName: "data-table", surface: "documented" },
-  { slug: "calendar", registryName: "calendar", surface: "documented" },
-  { slug: "date-picker", registryName: "date-picker", surface: "documented" },
-  { slug: "date-range-picker", registryName: "date-range-picker", surface: "documented" },
-  { slug: "alert", registryName: "alert", surface: "documented" },
-  { slug: "bar-chart", registryName: "charts", surface: "documented" },
-  { slug: "sidebar", registryName: "sidebar", surface: "documented" },
-  { slug: "file-upload", registryName: "file-upload", surface: "documented" },
-  { slug: "progress", registryName: "progress", surface: "documented" },
-] as const
-
-export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
-  { slug: "accordion", registryName: "accordion", surface: "standalone" },
-  { slug: "divider", registryName: "divider", surface: "standalone" },
-  { slug: "segmented-control", registryName: "segmented-control", surface: "standalone" },
-  { slug: "skeleton", registryName: "skeleton", surface: "standalone" },
-  { slug: "spinner", registryName: "spinner", surface: "standalone" },
-  { slug: "command-bar", registryName: "command-bar", surface: "standalone" },
-  { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
-  { slug: "avatar", registryName: "avatar", surface: "standalone" },
-  { slug: "code-block", registryName: "code-block", surface: "standalone" },
-  { slug: "data-state", registryName: "data-state", surface: "standalone" },
-  { slug: "kanban", registryName: "kanban", surface: "standalone" },
-  { slug: "list", registryName: "list", surface: "standalone" },
-  { slug: "property-grid", registryName: "property-grid", surface: "standalone" },
-  { slug: "statistic", registryName: "statistic", surface: "standalone" },
-  { slug: "tree-view", registryName: "tree-view", surface: "standalone" },
-  { slug: "copy-button", registryName: "copy-button", surface: "standalone" },
-  { slug: "section", registryName: "section", surface: "standalone" },
-  { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },
-  { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "standalone" },
-  { slug: "menubar", registryName: "menubar", surface: "standalone" },
-  { slug: "navigation-menu", registryName: "navigation-menu", surface: "standalone" },
-  { slug: "resizable-panel", registryName: "resizable-panel", surface: "standalone" },
-  { slug: "rich-text-editor", registryName: "rich-text-editor", surface: "standalone" },
-  { slug: "tour", registryName: "tour", surface: "standalone" },
-  { slug: "qr-code", registryName: "qr-code", surface: "standalone" },
-  { slug: "tag", registryName: "tag", surface: "standalone" },
-  { slug: "carousel", registryName: "carousel", surface: "standalone" },
-  { slug: "typography", registryName: "typography", surface: "standalone" },
-  { slug: "json-input", registryName: "json-input", surface: "standalone" },
-  { slug: "time-picker", registryName: "time-picker", surface: "standalone" },
-] as const
-
-export const publicComponentSurfaceEntries = [
-  ...documentedPublicComponentSurfaces,
-  ...standalonePublicComponentSurfaces,
-] as const
-
-const publicComponentSurfaceOrder = new Map(
-  publicComponentSurfaceEntries.map((entry, index) => [entry.slug, index] as const)
-)
-
-const publicComponentSurfaceRegistryMap = new Map(
-  publicComponentSurfaceEntries.map((entry) => [entry.slug, entry.registryName] as const)
-)
-
-export const publicComponentSurfaceSlugs = publicComponentSurfaceEntries.map((entry) => entry.slug)
-export const publicComponentSurfaceSlugSet = new Set(publicComponentSurfaceSlugs)
-export const standalonePublicComponentSlugs = standalonePublicComponentSurfaces.map((entry) => entry.slug)
-export const documentedPublicRegistrySurfaceNames = documentedPublicComponentSurfaces.map((entry) => entry.registryName)
-export const standalonePublicRegistrySurfaceNames = standalonePublicComponentSurfaces.map((entry) => entry.registryName)
-export const publicRegistrySurfaceNames = publicComponentSurfaceEntries.map((entry) => entry.registryName)
-
-export function getPublicComponentSurfaceOrder(slug: string) {
-  return publicComponentSurfaceOrder.get(slug) ?? Number.MAX_SAFE_INTEGER
-}
-
-export function isPublicComponentSurfaceSlug(slug: string) {
-  return publicComponentSurfaceSlugSet.has(slug)
-}
-
-export function getPublicComponentRegistryName(slug: string) {
-  return publicComponentSurfaceRegistryMap.get(slug)
-}
-
-export function comparePublicComponentSurfaceOrder(leftSlug: string, rightSlug: string) {
-  return getPublicComponentSurfaceOrder(leftSlug) - getPublicComponentSurfaceOrder(rightSlug)
-}
+export type PublicComponentSurfaceEntry = {
+  slug: string
+  registryName: string
+  surface: "documented" | "standalone"
+}
+
+export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
+  { slug: "button", registryName: "button", surface: "documented" },
+  { slug: "input", registryName: "input", surface: "documented" },
+  { slug: "select", registryName: "select", surface: "documented" },
+  { slug: "card", registryName: "card", surface: "documented" },
+  { slug: "badge", registryName: "badge", surface: "documented" },
+  { slug: "checkbox", registryName: "checkbox", surface: "documented" },
+  { slug: "overlay", registryName: "dialog", surface: "documented" },
+  { slug: "data-table", registryName: "data-table", surface: "documented" },
+  { slug: "calendar", registryName: "calendar", surface: "documented" },
+  { slug: "date-picker", registryName: "date-picker", surface: "documented" },
+  { slug: "date-range-picker", registryName: "date-range-picker", surface: "documented" },
+  { slug: "alert", registryName: "alert", surface: "documented" },
+  { slug: "bar-chart", registryName: "charts", surface: "documented" },
+  { slug: "sidebar", registryName: "sidebar", surface: "documented" },
+  { slug: "file-upload", registryName: "file-upload", surface: "documented" },
+  { slug: "progress", registryName: "progress", surface: "documented" },
+] as const
+
+export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [
+  { slug: "accordion", registryName: "accordion", surface: "standalone" },
+  { slug: "divider", registryName: "divider", surface: "standalone" },
+  { slug: "segmented-control", registryName: "segmented-control", surface: "standalone" },
+  { slug: "skeleton", registryName: "skeleton", surface: "standalone" },
+  { slug: "spinner", registryName: "spinner", surface: "standalone" },
+  { slug: "command-bar", registryName: "command-bar", surface: "standalone" },
+  { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
+  { slug: "avatar", registryName: "avatar", surface: "standalone" },
+  { slug: "code-block", registryName: "code-block", surface: "standalone" },
+  { slug: "data-state", registryName: "data-state", surface: "standalone" },
+  { slug: "kanban", registryName: "kanban", surface: "standalone" },
+  { slug: "list", registryName: "list", surface: "standalone" },
+  { slug: "property-grid", registryName: "property-grid", surface: "standalone" },
+  { slug: "statistic", registryName: "statistic", surface: "standalone" },
+  { slug: "tree-view", registryName: "tree-view", surface: "standalone" },
+  { slug: "copy-button", registryName: "copy-button", surface: "standalone" },
+  { slug: "section", registryName: "section", surface: "standalone" },
+  { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },
+  { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "standalone" },
+  { slug: "resizable-panel", registryName: "resizable-panel", surface: "standalone" },
+  { slug: "tag", registryName: "tag", surface: "standalone" },
+  { slug: "carousel", registryName: "carousel", surface: "standalone" },
+  { slug: "typography", registryName: "typography", surface: "standalone" },
+  { slug: "json-input", registryName: "json-input", surface: "standalone" },
+  { slug: "time-picker", registryName: "time-picker", surface: "standalone" },
+  { slug: "sortable-list", registryName: "sortable-list", surface: "standalone" },
+  { slug: "virtual-list", registryName: "virtual-list", surface: "standalone" },
+] as const
+
+export const publicComponentSurfaceEntries = [
+  ...documentedPublicComponentSurfaces,
+  ...standalonePublicComponentSurfaces,
+] as const
+
+const publicComponentSurfaceOrder = new Map(
+  publicComponentSurfaceEntries.map((entry, index) => [entry.slug, index] as const)
+)
+
+const publicComponentSurfaceRegistryMap = new Map(
+  publicComponentSurfaceEntries.map((entry) => [entry.slug, entry.registryName] as const)
+)
+
+export const publicComponentSurfaceSlugs = publicComponentSurfaceEntries.map((entry) => entry.slug)
+export const publicComponentSurfaceSlugSet = new Set(publicComponentSurfaceSlugs)
+export const standalonePublicComponentSlugs = standalonePublicComponentSurfaces.map((entry) => entry.slug)
+export const documentedPublicRegistrySurfaceNames = documentedPublicComponentSurfaces.map((entry) => entry.registryName)
+export const standalonePublicRegistrySurfaceNames = standalonePublicComponentSurfaces.map((entry) => entry.registryName)
+export const publicRegistrySurfaceNames = publicComponentSurfaceEntries.map((entry) => entry.registryName)
+
+export function getPublicComponentSurfaceOrder(slug: string) {
+  return publicComponentSurfaceOrder.get(slug) ?? Number.MAX_SAFE_INTEGER
+}
+
+export function isPublicComponentSurfaceSlug(slug: string) {
+  return publicComponentSurfaceSlugSet.has(slug)
+}
+
+export function getPublicComponentRegistryName(slug: string) {
+  return publicComponentSurfaceRegistryMap.get(slug)
+}
+
+export function comparePublicComponentSurfaceOrder(leftSlug: string, rightSlug: string) {
+  return getPublicComponentSurfaceOrder(leftSlug) - getPublicComponentSurfaceOrder(rightSlug)
+}