tembro 2.0.5 → 2.1.0

package/packages/cli/vendor/src/components/feedback/page-state.tsx

@@ -11,9 +11,10 @@ export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
   title?: React.ReactNode
   description?: React.ReactNode
   icon?: React.ReactNode
-  action?: React.ReactNode
-  compact?: boolean
-}
+  action?: React.ReactNode
+  extra?: React.ReactNode
+  compact?: boolean
+}
 
 function defaultPageStateIcon(tone: PageStateTone) {
   switch (tone) {
@@ -30,7 +31,7 @@ function defaultPageStateIcon(tone: PageStateTone) {
   }
 }
 
-function PageState({ tone = "empty", title, description, icon, action, compact = false, className, ...props }: PageStateProps) {
+function PageState({ tone = "empty", title, description, icon, action, extra, compact = false, className, ...props }: PageStateProps) {
   return (
     <div
       data-slot="page-state"
@@ -49,10 +50,10 @@ function PageState({ tone = "empty", title, description, icon, action, compact =
         {title && <div className="text-base font-semibold tracking-tight text-foreground">{title}</div>}
         {description && <div className="max-w-md text-sm leading-6 text-muted-foreground">{description}</div>}
       </div>
-      {action && <div>{action}</div>}
+      {(action || extra) ? <div className="flex flex-wrap items-center justify-center gap-2">{action}{extra}</div> : null}
     </div>
-  )
-}
+  )
+}
 
 export type InlineStateProps = Omit<PageStateProps, "compact"> & {
   retryLabel?: React.ReactNode

package/packages/cli/vendor/src/components/form/form-field-shell.tsx

@@ -10,6 +10,8 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
   label?: React.ReactNode
   description?: React.ReactNode
   error?: React.ReactNode
+  success?: React.ReactNode
+  loading?: boolean
   required?: boolean
   htmlFor?: string
   labelId?: string
@@ -34,6 +36,8 @@ export type FormFieldShellControlProps = Pick<
   FormFieldShellProps,
   | "label"
   | "description"
+  | "success"
+  | "loading"
   | "required"
   | "className"
   | "htmlFor"
@@ -89,6 +93,8 @@ function FormFieldShell({
   label,
   description,
   error,
+  success,
+  loading = false,
   required = false,
   htmlFor,
   labelId,
@@ -181,13 +187,30 @@ function FormFieldShell({
       {showErrorIcon && <span className="mt-1 shrink-0">{resolvedErrorIcon}</span>}
       <span className="min-w-0">{error}</span>
     </p>
-  ) : null
-
-  return (
+  ) : null
+
+  const successNode = success && !error ? (
+    <p
+      data-slot="form-field-success"
+      className="rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300"
+    >
+      {success}
+    </p>
+  ) : null
+
+  const loadingNode = loading ? (
+    <p data-slot="form-field-loading" className="text-sm leading-6 text-muted-foreground">
+      Loading...
+    </p>
+  ) : null
+
+  return (
     <div
       data-slot="form-field-shell"
       data-layout={layout}
       data-invalid={Boolean(error) || undefined}
+      data-success={Boolean(success && !error) || undefined}
+      data-loading={loading || undefined}
       data-disabled={disabled || undefined}
       data-readonly={readOnly || undefined}
       aria-disabled={disabled || undefined}
@@ -202,7 +225,9 @@ function FormFieldShell({
           </div>
           <div className="grid min-w-0 gap-2">
             {content}
+            {loadingNode}
             {hasDescriptionBottom && descriptionNode}
+            {successNode}
             {errorNode}
           </div>
         </>
@@ -212,17 +237,21 @@ function FormFieldShell({
           <div className="grid min-w-0 flex-1 gap-2">
             {hasDescriptionTop && descriptionNode}
             {content}
+            {loadingNode}
             {hasDescriptionBottom && descriptionNode}
-            {errorNode}
+            {successNode}
+            {errorNode}
           </div>
         </>
       ) : (
         <>
           {header}
-          {hasDescriptionTop && descriptionNode}
-          {content}
-          {hasDescriptionBottom && descriptionNode}
-          {errorNode}
+          {hasDescriptionTop && descriptionNode}
+          {content}
+          {loadingNode}
+          {hasDescriptionBottom && descriptionNode}
+          {successNode}
+          {errorNode}
         </>
       )}
     </div>

package/packages/cli/vendor/src/components/form/form-input.tsx

@@ -8,7 +8,7 @@ import {
   type DateRangeValue,
 } from "@/components/inputs/date-range-input"
 import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
-import { Input, type InputTextProps } from "@/components/ui/input"
+import { Input, type InputClearableProps, type InputSearchProps, type InputTextProps } from "@/components/ui/input"
 import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
 import { MoneyInput, type MoneyInputProps } from "@/components/inputs/money-input"
 import { NumberInput, type NumberInputProps } from "@/components/inputs/number-input"
@@ -18,11 +18,6 @@ import {
   type PhoneInputProps,
 } from "@/components/inputs/phone-input"
 import { QuantityInput, type QuantityInputProps } from "@/components/inputs/quantity-input"
-import { SearchInput, type SearchInputProps } from "@/components/inputs/search-input"
-import {
-  ClearableInput,
-  type ClearableInputProps,
-} from "@/components/inputs/clearable-input"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
@@ -76,7 +71,7 @@ export type FormTextInputProps<
 export type FormInputSearchVariantProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SearchInputProps, "name" | "value" | "defaultValue" | "onValueChange"> &
+> = Omit<InputSearchProps, "name" | "value" | "defaultValue" | "onValueChange" | "kind"> &
   FormControlledFieldProps<TFieldValues, TName> & {
     kind: "search"
     onValueChange?: (value: string) => void
@@ -134,7 +129,7 @@ export type FormInputDateRangeVariantProps<
 export type FormInputClearableVariantProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<ClearableInputProps, "name" | "value" | "defaultValue" | "onValueChange"> &
+> = Omit<InputClearableProps, "name" | "value" | "defaultValue" | "onValueChange" | "kind"> &
   FormControlledFieldProps<TFieldValues, TName> & {
     kind: "clearable"
     emptyValue?: unknown
@@ -197,6 +192,8 @@ function buildShellProps<
   return {
     label: props.label,
     description: props.description,
+    success: props.success,
+    loading: props.loading,
     required: props.required,
     className: props.className,
     htmlFor: props.id ?? props.name,
@@ -275,8 +272,9 @@ function FormInput<
               error={error}
               htmlFor={id ?? inputId}
             >
-              <SearchInput
-                {...searchProps}
+              <Input
+                {...(searchProps as Omit<InputSearchProps, "kind">)}
+                type="search"
                 id={id ?? inputId}
                 name={field.name}
                 ref={field.ref}
@@ -605,8 +603,9 @@ function FormInput<
               error={error}
               htmlFor={id ?? inputId}
             >
-              <ClearableInput
-                {...clearableProps}
+              <Input
+                {...(clearableProps as Omit<InputClearableProps, "kind">)}
+                clearable
                 id={id ?? inputId}
                 name={field.name}
                 ref={field.ref}

package/packages/cli/vendor/src/components/form/form-select.tsx

@@ -6,7 +6,7 @@ import {
   type AsyncSelectOption,
   type AsyncSelectProps,
 } from "@/components/inputs/async-select"
-import { SimpleSelect, type SimpleSelectProps } from "@/components/inputs/simple-select"
+import { Select, type SelectProps } from "@/components/ui/select"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
@@ -27,7 +27,7 @@ type FormSelectBaseProps<
 export type FormSimpleSelectProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SimpleSelectProps, "value" | "onValueChange" | "disabled"> &
+> = Omit<SelectProps, "children" | "value" | "onValueChange" | "disabled"> &
   FormSelectBaseProps<TFieldValues, TName> & {
     kind?: "simple"
     emptyValue?: unknown
@@ -67,6 +67,8 @@ function buildShellProps<
   return {
     label: props.label,
     description: props.description,
+    success: props.success,
+    loading: props.loading,
     required: props.required,
     className: props.className,
     htmlFor: props.name,
@@ -196,9 +198,9 @@ function FormSelect<
             errorId={resolvedIds.errorId}
             error={error}
           >
-            <SimpleSelect
+            <Select
               {...simpleProps}
-              value={field.value == null ? "" : String(field.value)}
+              value={field.value == null ? undefined : String(field.value)}
               disabled={disabled || readOnly}
               aria-describedby={resolvedIds.describedBy}
               aria-errormessage={error ? resolvedIds.errorId : undefined}

package/packages/cli/vendor/src/components/form/form-switch.tsx

@@ -29,9 +29,11 @@ function FormSwitch<
 >({
   control,
   name,
-  label,
-  description,
-  required,
+  label,
+  description,
+  success,
+  loading,
+  required,
   className,
   layout,
   descriptionPosition,
@@ -96,6 +98,8 @@ function FormSwitch<
           <FormFieldShell
             label={label}
             description={description}
+            success={success}
+            loading={loading}
             required={required}
             error={error}
             htmlFor={switchId}
@@ -122,6 +126,8 @@ function FormSwitch<
         ) : (
           <FormFieldShell
             error={error}
+            success={success}
+            loading={loading}
             className={className}
             descriptionId={resolvedIds.descriptionId}
             errorId={resolvedIds.errorId}

package/packages/cli/vendor/src/components/form/form-textarea.tsx

@@ -29,8 +29,10 @@ function FormTextarea<
   name,
   rules,
   label,
-  description,
-  required,
+  description,
+  success,
+  loading,
+  required,
   className,
   layout,
   descriptionPosition,
@@ -68,6 +70,8 @@ function FormTextarea<
           <FormFieldShell
             label={label}
             description={description}
+            success={success}
+            loading={loading}
             required={required}
             error={error}
             htmlFor={textareaId}

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

@@ -109,11 +109,11 @@ export type AsyncSelectMultiModeProps<
   isMulti: true
 }
 
-export type AsyncMultiSelectProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = Omit<React.ComponentProps<"div">, "onChange"> & {
+export type AsyncMultiSelectProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<React.ComponentProps<"div">, "onChange"> & {
   value?: TValue[]
   selectedOptions?: TOption[]
   onValueChange?: (value: TValue[], options: TOption[]) => void
@@ -148,8 +148,8 @@ export type AsyncMultiSelectProps<
   searchClassName?: string
   optionClassName?: string
   tagClassName?: string
-  invalid?: boolean
-}
+  invalid?: boolean
+}
 
 type AsyncSelectCacheEntry<
   TValue extends string,
@@ -778,7 +778,10 @@ function AsyncSelect<
   )
 }
 
-function AsyncMultiSelect<
+/**
+ * @deprecated Prefer `AsyncSelect` with `isMulti` for new usage.
+ */
+function AsyncMultiSelect<
   TValue extends string = string,
   TData = unknown,
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,

package/packages/cli/vendor/src/components/inputs/search-input.tsx

@@ -14,8 +14,11 @@ export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type"
   onValueChange?: (value: string) => void
   onDebouncedValueChange?: (value: string) => void
 }
-
-const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+
+/**
+ * @deprecated Prefer `Input` with `type="search"` and search-related props for new usage.
+ */
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   (
     {
       searchIcon,

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

@@ -1,193 +1,23 @@
-import * as React from "react"
-import { CheckIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
-
 import {
   Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  type SelectOption,
+  type SelectProps,
 } from "@/components/ui/select"
-import { cn, stopInteractivePropagation } from "@/lib/utils"
-
-export type SimpleSelectOption = {
-  label: React.ReactNode
-  value: string
-  disabled?: boolean
-  description?: React.ReactNode
-  keywords?: string[]
-}
-
-export type SimpleSelectProps = Omit<
-  React.ComponentProps<typeof Select>,
-  "value" | "onValueChange"
-> & {
-  value?: string
-  onValueChange?: (value: string | undefined) => void
-  options: SimpleSelectOption[]
-  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: SimpleSelectOption, state: { selected: boolean }) => React.ReactNode
-  invalid?: boolean
-}
-
-function optionMatchesSearch(option: SimpleSelectOption, 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 SimpleSelect({
-  value,
-  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,
-  onOpenChange,
-  ...props
-}: SimpleSelectProps) {
-  const [search, setSearch] = React.useState("")
-  const selectedOption = options.find((option) => option.value === value)
-  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
-
-  return (
-    <Select
-      value={value}
-      onValueChange={(val) => onValueChange?.(val as string)}
-      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>}
-                  </span>
-                )}
-              </SelectItem>
-            )
-          })
-        )}
-      </SelectContent>
-    </Select>
-  )
-}
-
-export { SimpleSelect }
+
+export type SimpleSelectOption = SelectOption
+
+/**
+ * @deprecated Prefer `Select` with `options` for new usage.
+ */
+export type SimpleSelectProps = Omit<SelectProps, "children"> & {
+  options: SimpleSelectOption[]
+}
+
+/**
+ * @deprecated Prefer `Select` with `options` for new usage.
+ */
+function SimpleSelect(props: SimpleSelectProps) {
+  return <Select {...props} />
+}
+
+export { SimpleSelect }

package/packages/cli/vendor/src/components/layout/app-sidebar.tsx

@@ -59,6 +59,7 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   mobileToggleClassName?: string
   mobilePanelClassName?: string
   mobileOverlayClassName?: string
+  footerClassName?: string
   renderMobileToggle?: (state: { open: boolean; setOpen: (open: boolean) => void }) => React.ReactNode
   onItemSelect?: (item: AppSidebarNavItem) => void
   renderItem?: (item: AppSidebarNavItem, state: { collapsed: boolean }) => React.ReactNode
@@ -433,6 +434,7 @@ function SidebarSurface({
   footerAccount,
   secondaryActions = [],
   footerSecondary,
+  footerClassName,
   tooltipOnCollapsed,
   onItemSelect,
   renderItem,
@@ -531,7 +533,7 @@ function SidebarSurface({
       </nav>
 
       {(footerAccount || footerSecondary || footer || visibleSecondaryActions.length > 0 || (collapsed && (collapsedRail || visibleRailItems.length > 0))) && (
-        <div data-slot="app-sidebar-footer" className="shrink-0 border-t p-3">
+        <div data-slot="app-sidebar-footer" className={cn("shrink-0 border-t p-3", footerClassName)}>
           {collapsed ? (
             <>
               {visibleRailItems.length > 0 ? (

package/packages/cli/vendor/src/components/layout/breadcrumbs.tsx

@@ -19,6 +19,7 @@ export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
   collapseLabel?: React.ReactNode
   separator?: React.ReactNode
   wrap?: boolean
+  currentItemLabel?: React.AriaAttributes["aria-current"]
   renderLink?: (props: React.ComponentProps<"a"> & { item: BreadcrumbItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
 }
 
@@ -46,6 +47,7 @@ function Breadcrumbs({
   collapseLabel = "…",
   separator = <ChevronRightIcon className="size-3.5" />,
   wrap = false,
+  currentItemLabel,
   renderLink,
   ...props
 }: BreadcrumbsProps) {
@@ -106,7 +108,7 @@ function Breadcrumbs({
             ) : (
               <span
                 data-slot="breadcrumbs-current"
-                aria-current={isCurrent ? (item.currentLabel ?? "page") : undefined}
+                aria-current={isCurrent ? ((item.currentLabel ?? currentItemLabel ?? "page") as React.AriaAttributes["aria-current"]) : undefined}
                 className={cn(
                   "inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5",
                   isCurrent && "bg-accent/45 font-medium text-foreground"