tembro 2.0.5 → 2.0.6

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

@@ -39,6 +39,7 @@ export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
   kind?: "text"
   value?: string | number | readonly string[] | null
   onValueChange?: (value: string) => void
+  onDebouncedValueChange?: (value: string) => void
   leading?: React.ReactNode
   trailing?: React.ReactNode
   trailingAction?: React.ReactNode
@@ -57,6 +58,13 @@ export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
   helperClassName?: string
   leadingPointerEvents?: boolean
   trailingPointerEvents?: boolean
+  searchIcon?: React.ReactNode
+  loading?: boolean
+  loadingLabel?: string
+  resultCount?: number
+  shortcut?: React.ReactNode
+  debounceMs?: number
+  showMetaOnClear?: boolean
 }
 
 export type InputClearableProps = Omit<ClearableInputProps, "kind"> & {
@@ -121,6 +129,20 @@ function getInputTextLength(value: InputTextProps["value"] | InputTextProps["def
   return 0
 }
 
+function shouldRenderSearchInput(props: InputTextProps) {
+  return (
+    props.type === "search" ||
+    props.searchIcon !== undefined ||
+    props.loading !== undefined ||
+    props.loadingLabel !== undefined ||
+    props.resultCount !== undefined ||
+    props.shortcut !== undefined ||
+    props.debounceMs !== undefined ||
+    props.showMetaOnClear !== undefined ||
+    props.onDebouncedValueChange !== undefined
+  )
+}
+
 const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((props, ref) => {
   const kind = props.kind ?? "text"
 
@@ -210,6 +232,82 @@ const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((p
   }
 
   const inputProps = props as Omit<InputTextProps, "kind">
+
+  if (shouldRenderSearchInput(inputProps)) {
+    const {
+      leading,
+      searchIcon,
+      helperText,
+      errorText,
+      showCharacterCount,
+      countFormatter,
+      helperClassName,
+      inputClassName,
+      ...searchInputProps
+    } = inputProps
+    const searchValue: SearchInputProps["value"] = Array.isArray(inputProps.value)
+      ? inputProps.value.join(" ")
+      : inputProps.value == null || typeof inputProps.value === "string" || typeof inputProps.value === "number"
+        ? inputProps.value
+        : String(inputProps.value)
+    const searchDefaultValue: SearchInputProps["defaultValue"] = Array.isArray(inputProps.defaultValue)
+      ? inputProps.defaultValue.join(" ")
+      : inputProps.defaultValue == null ||
+          typeof inputProps.defaultValue === "string" ||
+          typeof inputProps.defaultValue === "number"
+        ? inputProps.defaultValue
+        : String(inputProps.defaultValue)
+
+    const searchInput = (
+      <SearchInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        searchIcon={searchIcon ?? leading}
+        inputClassName={inputClassName}
+        {...searchInputProps}
+        value={searchValue}
+        defaultValue={searchDefaultValue}
+      />
+    )
+
+    if (!helperText && !errorText && !showCharacterCount) {
+      return searchInput
+    }
+
+    const currentLength = getInputTextLength(inputProps.value ?? inputProps.defaultValue)
+
+    return (
+      <div data-slot="input-field" className="grid gap-1.5">
+        {searchInput}
+        <div data-slot="input-meta" className="flex items-start justify-between gap-3 px-1">
+          <div
+            data-slot="input-helper"
+            className={cn(
+              "min-w-0 text-xs leading-5",
+              errorText ? "text-destructive" : "text-muted-foreground",
+              helperClassName
+            )}
+          >
+            {errorText ?? helperText}
+          </div>
+          {showCharacterCount ? (
+            <div
+              data-slot="input-count"
+              className={cn(
+                "shrink-0 text-[11px] font-medium tabular-nums",
+                errorText ? "text-destructive" : "text-muted-foreground"
+              )}
+            >
+              {countFormatter?.(currentLength, inputProps.maxLength) ??
+                (typeof inputProps.maxLength === "number"
+                  ? `${currentLength}/${inputProps.maxLength}`
+                  : currentLength)}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
   const {
     value,
     defaultValue,

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/showcase/create-demo.tsx

@@ -63,16 +63,17 @@ function createCodeSnippet(definition: ShowcaseDemoDefinition) {
 }
 
 const exactCodeSnippets: Record<string, string> = {
-  "search-input": `import { SearchInput } from "tembro"
-
-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"
     />
   )
 }`,
@@ -133,12 +134,12 @@ export function Demo() {
     />
   )
 }`,
-  "filter-bar": `import { Button, FilterBar, SearchInput } from "tembro"
-
-export function Demo() {
-  return (
+  "filter-bar": `import { Button, FilterBar, Input } from "tembro"
+
+export function Demo() {
+  return (
     <FilterBar
-      search={<SearchInput value="" placeholder="Search rows..." readOnly />}
+      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
       chips={[
         { key: "status", label: "Status", value: "Active", tone: "success" },
         { key: "owner", label: "Owner", value: "Azamat" },

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

@@ -7,7 +7,7 @@ import {
   DataTable,
   DataTableColumnVisibilityMenu,
   DataTableSortableHeader,
-  SimpleSelect,
+  Select,
 } from "@/index"
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
 import { createDataTableSelectColumn } from "@/components/data-table/data-table-select-column"
@@ -127,7 +127,7 @@ export function DataTableShowcase() {
         }}
         filters={
           <>
-            <SimpleSelect
+            <Select
               value={statusFilter}
               onValueChange={(value) => setStatusFilter(value ?? "all")}
               options={[
@@ -138,7 +138,7 @@ export function DataTableShowcase() {
               ]}
               triggerClassName="min-w-40"
             />
-            <SimpleSelect
+            <Select
               value={ownerFilter}
               onValueChange={(value) => setOwnerFilter(value ?? "all")}
               options={[

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

@@ -9,7 +9,7 @@ import {
   DataTableColumnVisibilityMenu,
   DataTableSortableHeader,
   DataTableViewPresets,
-  SearchInput,
+  Input,
 } from "@/index"
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
 import { DataTableSavedFilters } from "@/components/data-table/data-table-saved-filters"
@@ -147,7 +147,7 @@ export function DataTablePartShowcase({
               size="sm"
             />
             <div className="w-full max-w-[320px]">
-              <SearchInput value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
+              <Input type="search" value={search} onValueChange={setSearch} placeholder="Search invoice, customer..." />
             </div>
           </div>
         </div>
@@ -168,7 +168,7 @@ export function DataTablePartShowcase({
         toolbarProps={(table) => ({
           title: "Invoices",
           description: "Premium subroute preview for reusable DataTable parts.",
-          search: <SearchInput value={search} onValueChange={setSearch} placeholder="Search rows..." />,
+          search: <Input type="search" value={search} onValueChange={setSearch} placeholder="Search rows..." />,
           actions: (
             <div className="flex items-center gap-2">
               <DataTableColumnVisibilityMenu table={table} />

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

@@ -1,7 +1,7 @@
 import type { ComponentDemoMock } from "../types"
 
 export const selectMock: ComponentDemoMock = {
-  code: `import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "tembro"\n\nexport function Example() {\n  return (\n    <Select defaultValue="starter">\n      <SelectTrigger><SelectValue /></SelectTrigger>\n      <SelectContent>\n        <SelectItem value="starter">Starter</SelectItem>\n      </SelectContent>\n    </Select>\n  )\n}`,
+  code: `import { Select } from "tembro"\n\nconst planOptions = [\n  { value: "starter", label: "Starter" },\n  { value: "growth", label: "Growth" },\n  { value: "enterprise", label: "Enterprise" },\n]\n\nexport function Example() {\n  return <Select defaultValue="starter" options={planOptions} />\n}`,
   cliCommand: "npx tembro add select",
   highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Compact trigger options"],
   relatedBlockSlugs: ["crm-dashboard", "users-table", "dashboard-starter"],

package/packages/cli/vendor/src/showcase/premium/select/showcase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/index"
+import { Badge, Button, Select } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -75,27 +75,19 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
               <p className="text-sm font-medium aui-text-muted">{surface === "plan" ? "Workspace plan" : "Toolbar density"}</p>
               <div className="mt-3">
                 {surface === "plan" ? (
-                  <Select value={selectedValue} onValueChange={(value: string | null | undefined) => setState({ selectValue: value ?? planOptions[0].value })}>
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {planOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <Select
+                    value={selectedValue}
+                    onValueChange={(value) => setState({ selectValue: value ?? planOptions[0].value })}
+                    options={planOptions}
+                    triggerClassName="w-full"
+                  />
                 ) : (
-                  <Select defaultValue={compactOptions[0].value}>
-                    <SelectTrigger size="sm" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {compactOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <Select
+                    defaultValue={compactOptions[0].value}
+                    options={compactOptions}
+                    size="sm"
+                    triggerClassName="w-full"
+                  />
                 )}
               </div>
             </div>