tembro 2.0.4 → 2.0.6

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

@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
 
 export type SelectRootProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
 export type SelectGroupProps = SelectPrimitive.Group.Props
@@ -21,7 +21,216 @@ export type SelectSeparatorProps = SelectPrimitive.Separator.Props
 export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>
 export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>
 
-const Select = SelectPrimitive.Root
+export type SelectOption = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+  description?: React.ReactNode
+  keywords?: string[]
+}
+
+export type SelectProps = Omit<SelectRootProps, "value" | "defaultValue" | "onValueChange"> & {
+  value?: string | null
+  defaultValue?: string | null
+  onValueChange?: (value: string | undefined) => void
+  options?: SelectOption[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: React.ReactNode
+  clearLabel?: string
+  size?: "sm" | "default" | "lg"
+  clearable?: boolean
+  searchable?: boolean
+  loading?: boolean
+  loadingLabel?: React.ReactNode
+  disabled?: boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+  itemClassName?: string
+  searchClassName?: string
+  renderOption?: (option: SelectOption, state: { selected: boolean }) => React.ReactNode
+  invalid?: boolean
+}
+
+const SelectRoot = SelectPrimitive.Root
+
+function optionMatchesSearch(option: SelectOption, search: string) {
+  const normalized = search.trim().toLowerCase()
+  if (!normalized) return true
+
+  const labelText =
+    typeof option.label === "string" || typeof option.label === "number"
+      ? String(option.label)
+      : option.value
+  const haystack = [labelText, option.value, ...(option.keywords ?? [])].join(" ").toLowerCase()
+  return haystack.includes(normalized)
+}
+
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  placeholder = "Select",
+  searchPlaceholder = "Search options...",
+  emptyLabel = "No options found",
+  clearLabel = "Clear selection",
+  size = "default",
+  clearable = false,
+  searchable = false,
+  loading = false,
+  loadingLabel = "Loading options...",
+  disabled = false,
+  showSelectedDescription = true,
+  triggerClassName,
+  contentClassName,
+  itemClassName,
+  searchClassName,
+  renderOption,
+  invalid,
+  children,
+  onOpenChange,
+  ...props
+}: SelectProps) {
+  if (!options) {
+    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 [search, setSearch] = React.useState("")
+  const selectedOption = options.find((option) => option.value === value)
+  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
+
+  return (
+    <SelectRoot
+      value={value ?? undefined}
+      defaultValue={defaultValue ?? undefined}
+      onValueChange={(nextValue) => onValueChange?.((nextValue as string | null | undefined) ?? undefined)}
+      disabled={disabled || loading}
+      onOpenChange={(open, eventDetails) => {
+        if (!open) setSearch("")
+        onOpenChange?.(open, eventDetails)
+      }}
+      {...props}
+    >
+      <SelectTrigger
+        size={size}
+        aria-invalid={invalid || undefined}
+        className={cn("w-full", triggerClassName)}
+      >
+        <SelectValue placeholder={placeholder}>
+          {selectedOption ? (
+            <span className="flex min-w-0 flex-col items-start">
+              <span className="truncate">{selectedOption.label}</span>
+              {showSelectedDescription && selectedOption.description ? (
+                <span className="truncate text-[11px] font-medium text-muted-foreground">
+                  {selectedOption.description}
+                </span>
+              ) : null}
+            </span>
+          ) : null}
+        </SelectValue>
+        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
+        {clearable && value && !disabled && !loading ? (
+          <span
+            role="button"
+            tabIndex={0}
+            aria-label={clearLabel}
+            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)
+              onValueChange?.(undefined)
+            }}
+            onMouseDown={stopInteractivePropagation}
+            onDoubleClick={stopInteractivePropagation}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                onValueChange?.(undefined)
+              }
+            }}
+          >
+            <XIcon className="size-3.5" />
+          </span>
+        ) : null}
+      </SelectTrigger>
+      <SelectContent className={cn("w-(--anchor-width)", contentClassName)}>
+        {searchable ? (
+          <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}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={searchPlaceholder}
+              className={cn(
+                "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                searchClassName
+              )}
+            />
+          </div>
+        ) : null}
+
+        {loading ? (
+          <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-[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
+            return (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+                className={cn("rounded-[var(--radius-md)]", itemClassName)}
+              >
+                {renderOption ? (
+                  renderOption(option, { selected })
+                ) : (
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="flex min-w-0 items-center gap-2">
+                      <span className="truncate">{option.label}</span>
+                      {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
+                    </span>
+                    {option.description ? (
+                      <span className="truncate text-xs text-muted-foreground">{option.description}</span>
+                    ) : null}
+                  </span>
+                )}
+              </SelectItem>
+            )
+          })
+        )}
+      </SelectContent>
+    </SelectRoot>
+  )
+}
 
 function SelectGroup({ className, ...props }: SelectGroupProps) {
   return (
@@ -60,11 +269,7 @@ function SelectTrigger({
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon
-        render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-        }
-      />
+      <SelectPrimitive.Icon render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />} />
     </SelectPrimitive.Trigger>
   )
 }
@@ -92,7 +297,10 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          className={cn(
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
           {...props}
         >
           <SelectScrollUpButton />
@@ -104,24 +312,20 @@ function SelectContent({
   )
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectLabelProps) {
+function SelectLabel({ className, ...props }: SelectLabelProps) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn("px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90", className)}
+      className={cn(
+        "px-2 py-1.5 text-[11px] font-semibold tracking-[0.14em] uppercase text-muted-foreground/90",
+        className
+      )}
       {...props}
     />
   )
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectItemProps) {
+function SelectItem({ className, children, ...props }: SelectItemProps) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
@@ -135,9 +339,7 @@ function SelectItem({
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
+        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
       >
         <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
@@ -145,10 +347,7 @@ function SelectItem({
   )
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectSeparatorProps) {
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
@@ -158,10 +357,7 @@ function SelectSeparator({
   )
 }
 
-function SelectScrollUpButton({
-  className,
-  ...props
-}: SelectScrollUpButtonProps) {
+function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps) {
   return (
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
@@ -176,10 +372,7 @@ function SelectScrollUpButton({
   )
 }
 
-function SelectScrollDownButton({
-  className,
-  ...props
-}: SelectScrollDownButtonProps) {
+function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps) {
   return (
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"

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

@@ -30,18 +30,15 @@ export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "command-bar", registryName: "command-bar", surface: "standalone" },
   { slug: "quantity-stepper", registryName: "quantity-stepper", surface: "standalone" },
   { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
-  { slug: "empty-search-state", registryName: "empty-search-state", 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: "descriptions", registryName: "descriptions", 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: "copy-field", registryName: "copy-field", surface: "standalone" },
   { slug: "section", registryName: "section", surface: "standalone" },
   { slug: "sticky-footer-bar", registryName: "sticky-footer-bar", surface: "standalone" },
   { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },

package/packages/cli/vendor/src/showcase/component-api-schema.ts

@@ -133,8 +133,8 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { name: "loadingVariant", type: "'skeleton' | 'state'", defaultValue: "'skeleton'", description: "Choose between skeleton rows or a dedicated loading state block." },
       { name: "loadingState", type: "LoadingStateProps", defaultValue: "-", description: "Customizes the loading state when `loadingVariant=\"state\"`." },
       { name: "isError", type: "boolean", defaultValue: "false", description: "Switches the grid into an error fallback state." },
-      { name: "emptyState", type: "EmptyStateProps", defaultValue: "-", description: "Fallback when there are no rows." },
-      { name: "errorState", type: "EmptyStateProps", defaultValue: "-", description: "Fallback when the data request fails." },
+      { name: "emptyState", type: "Omit<DataStateProps, \"status\">", defaultValue: "-", description: "Fallback when there are no rows." },
+      { name: "errorState", type: "Omit<DataStateProps, \"status\">", defaultValue: "-", description: "Fallback when the data request fails." },
       { name: "skeletonRows", type: "number", defaultValue: "6", description: "How many skeleton rows to render during loading." },
       { name: "cellFallback", type: "ReactNode", defaultValue: "\"-\"", description: "Value rendered when a cell returns empty content." },
     ],

package/packages/cli/vendor/src/showcase/create-demo.tsx

@@ -63,36 +63,36 @@ function createCodeSnippet(definition: ShowcaseDemoDefinition) {
 }
 
 const exactCodeSnippets: Record<string, string> = {
-  "search-input": `import { SearchInput } from "@/components/search-input"
-
-export function Demo() {
-  return (
-    <SearchInput
-      value="invoice"
-      onValueChange={(value) => console.log(value)}
-      placeholder="Search invoices..."
-      resultCount={12}
-      shortcut="Ctrl K"
+  "search-input": `import { Input } from "tembro"
+
+export function Demo() {
+  return (
+    <Input
+      type="search"
+      value="invoice"
+      onValueChange={(value) => console.log(value)}
+      placeholder="Search invoices..."
+      resultCount={12}
+      shortcut="Ctrl K"
     />
   )
 }`,
-  "password-input": `import { PasswordInput } from "@/components/password-input"
+  "password-input": `import { PasswordInput } from "tembro"
 
 export function Demo() {
   return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
 }`,
-  "clearable-input": `import { ClearableInput } from "@/components/clearable-input"
-
-export function Demo() {
-  return <ClearableInput defaultValue="Azamat UI" placeholder="Search customer" />
-}`,
-  "tag-input": `import { TagInput } from "@/components/tag-input"
+  "clearable-input": `import { Input } from "tembro"
+
+export function Demo() {
+  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
+}`,
+  "tag-input": `import { TagInput } from "tembro"
 
 export function Demo() {
   return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
 }`,
-  "action-menu": `import { ActionMenu } from "@/components/action-menu"
-import { Button } from "@/components/button"
+  "action-menu": `import { ActionMenu, Button } from "tembro"
 
 export function Demo() {
   return (
@@ -107,7 +107,7 @@ export function Demo() {
     />
   )
 }`,
-  "button-group": `import { ButtonGroup } from "@/components/button-group"
+  "button-group": `import { ButtonGroup } from "tembro"
 
 export function Demo() {
   return (
@@ -120,7 +120,7 @@ export function Demo() {
     />
   )
 }`,
-  "quick-action-grid": `import { QuickActionGrid } from "@/components/quick-action-grid"
+  "quick-action-grid": `import { QuickActionGrid } from "tembro"
 
 export function Demo() {
   return (
@@ -134,22 +134,23 @@ export function Demo() {
     />
   )
 }`,
-  "filter-bar": `import { FilterBar } from "@/components/filter-bar"
-import { SearchInput } from "@/components/search-input"
-import { Button } from "@/components/button"
-
-export function Demo() {
-  return (
-    <FilterBar
-      search={<SearchInput value="" placeholder="Search rows..." readOnly />}
-      activeCount={2}
-      filters={<Button variant="outline">Status</Button>}
-      actions={<Button>Export</Button>}
-      onReset={() => undefined}
-    />
-  )
-}`,
-  "description-list": `import { DescriptionList } from "@/components/description-list"
+  "filter-bar": `import { Button, FilterBar, Input } from "tembro"
+
+export function Demo() {
+  return (
+    <FilterBar
+      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
+      chips={[
+        { key: "status", label: "Status", value: "Active", tone: "success" },
+        { key: "owner", label: "Owner", value: "Azamat" },
+      ]}
+      filters={<Button variant="outline">Status</Button>}
+      actions={<Button>Export</Button>}
+      onReset={() => undefined}
+    />
+  )
+}`,
+  "description-list": `import { DescriptionList } from "tembro"
 
 export function Demo() {
   return (
@@ -163,22 +164,7 @@ export function Demo() {
     />
   )
 }`,
-  "entity-card": `import { EntityCard } from "@/components/entity-card"
-import { Badge } from "@/components/badge"
-import { Button } from "@/components/button"
-
-export function Demo() {
-  return (
-    <EntityCard
-      title="Azamat Workspace"
-      description="Admin console and live dashboard route."
-      status={<Badge variant="secondary">Live</Badge>}
-      meta="Updated 8 min ago"
-      actions={<Button size="sm" variant="outline">Open</Button>}
-    />
-  )
-}`,
-  "stat-card": `import { StatCard } from "@/components/stat-card"
+  "stat-card": `import { StatCard } from "tembro"
 
 export function Demo() {
   return (
@@ -191,12 +177,12 @@ export function Demo() {
     />
   )
 }`,
-  "pagination": `import { Pagination } from "@/components/pagination"
+  "pagination": `import { Pagination } from "tembro"
 
 export function Demo() {
   return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />
 }`,
-  "dialog-actions": `import { DialogActionButton, DialogActions } from "@/components/dialog-actions"
+  "dialog-actions": `import { DialogActionButton, DialogActions } from "tembro"
 
 export function Demo() {
   return (
@@ -207,12 +193,12 @@ export function Demo() {
     </DialogActions>
   )
 }`,
-  "file-dropzone": `import { FileDropzone } from "@/components/file-dropzone"
+  "file-dropzone": `import { FileDropzone } from "tembro"
 
 export function Demo() {
   return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
 }`,
-  "stepper": `import { Stepper } from "@/components/stepper"
+  "stepper": `import { Stepper } from "tembro"
 
 export function Demo() {
   return (
@@ -231,7 +217,7 @@ export function Demo() {
 
 function createKindSnippet(definition: ShowcaseDemoDefinition) {
   const importName = definition.importName ?? definition.component
-  const importPath = `@/components/${definition.slug}`
+  const importPath = "tembro"
 
   if (definition.kind === "data-table") {
     return `import { ${importName} } from "${importPath}"