tembro 2.0.4 → 2.0.6

package/packages/cli/vendor/src/components/filters/filter-bar.tsx

@@ -1,40 +1,77 @@
 import * as React from "react"
-import { SlidersHorizontalIcon, XIcon } from "lucide-react"
+import { SlidersHorizontalIcon, XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type FilterBarChip = {
+  key: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
+  disabled?: boolean
+  hidden?: boolean
+}
 
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-export type FilterBarProps = React.ComponentProps<"div"> & {
+export type FilterBarProps = React.ComponentProps<"div"> & {
   search?: React.ReactNode
   filters?: React.ReactNode
-  actions?: React.ReactNode
-  activeCount?: number
-  activeLabel?: (count: number) => React.ReactNode
-  resetLabel?: React.ReactNode
-  onReset?: () => void
-  collapsible?: boolean
-  defaultExpanded?: boolean
-}
+  actions?: React.ReactNode
+  chips?: FilterBarChip[]
+  activeCount?: number
+  activeLabel?: (count: number) => React.ReactNode
+  resetLabel?: React.ReactNode
+  clearChipLabel?: React.ReactNode
+  onReset?: () => void
+  onRemoveChip?: (key: string) => void
+  collapsible?: boolean
+  defaultExpanded?: boolean
+  emptyChips?: React.ReactNode
+  chipLimit?: number
+  chipOverflowLabel?: (hiddenCount: number) => React.ReactNode
+}
+
+const chipVariant: Record<NonNullable<FilterBarChip["tone"]>, React.ComponentProps<typeof Badge>["variant"]> = {
+  default: "secondary",
+  success: "secondary",
+  warning: "outline",
+  danger: "destructive",
+  info: "outline",
+  muted: "outline",
+}
 
 function FilterBar({
   className,
-  search,
-  filters,
-  actions,
-  activeCount = 0,
-  activeLabel = (count) => `${count} active`,
-  resetLabel = "Reset",
-  onReset,
-  collapsible = false,
-  defaultExpanded = false,
-  children,
-  ...props
-}: FilterBarProps) {
-  const [expanded, setExpanded] = React.useState(defaultExpanded)
-  const hasFilters = Boolean(filters || children)
-  const shouldShowFilters = !collapsible || expanded
-
-  return (
+  search,
+  filters,
+  actions,
+  chips,
+  activeCount,
+  activeLabel = (count) => `${count} active`,
+  resetLabel = "Reset",
+  clearChipLabel,
+  onReset,
+  onRemoveChip,
+  collapsible = false,
+  defaultExpanded = false,
+  emptyChips,
+  chipLimit,
+  chipOverflowLabel = (hiddenCount) => `+${hiddenCount} more`,
+  children,
+  ...props
+}: FilterBarProps) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded)
+  const visibleChips = chips?.filter((chip) => !chip.hidden) ?? []
+  const renderedChips = chipLimit && chipLimit > 0 ? visibleChips.slice(0, chipLimit) : visibleChips
+  const hiddenChipCount = Math.max(visibleChips.length - renderedChips.length, 0)
+  const resolvedActiveCount = activeCount ?? visibleChips.length
+  const hasFilters = Boolean(filters || children)
+  const hasChips = Boolean(chips)
+  const shouldShowFilters = !collapsible || expanded
+  const shouldShowChipRow = visibleChips.length > 0 || (hasChips && emptyChips)
+
+  return (
     <div
       data-slot="filter-bar"
       className={cn("flex flex-col gap-3 rounded-lg border bg-card p-3", className)}
@@ -51,25 +88,25 @@ function FilterBar({
               size="sm"
               onClick={() => setExpanded((value) => !value)}
             >
-              <SlidersHorizontalIcon data-icon="inline-start" />
-              Filters
-              {activeCount > 0 && (
-                <span className="ml-1 rounded-full bg-background px-1.5 text-xs">
-                  {activeCount}
-                </span>
-              )}
-            </Button>
+              <SlidersHorizontalIcon data-icon="inline-start" />
+              Filters
+              {resolvedActiveCount > 0 && (
+                <span className="ml-1 rounded-full bg-background px-1.5 text-xs">
+                  {resolvedActiveCount}
+                </span>
+              )}
+            </Button>
           )}
         </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
-          {activeCount > 0 && (
-            <span className="text-sm text-muted-foreground">{activeLabel(activeCount)}</span>
-          )}
-          {activeCount > 0 && onReset && (
-            <Button type="button" variant="ghost" size="sm" onClick={onReset}>
-              <XIcon data-icon="inline-start" />
-              {resetLabel}
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {resolvedActiveCount > 0 && (
+            <span className="text-sm text-muted-foreground">{activeLabel(resolvedActiveCount)}</span>
+          )}
+          {resolvedActiveCount > 0 && onReset && (
+            <Button type="button" variant="ghost" size="sm" onClick={onReset}>
+              <XIcon data-icon="inline-start" />
+              {resetLabel}
             </Button>
           )}
           {actions}
@@ -78,12 +115,47 @@ function FilterBar({
 
       {hasFilters && shouldShowFilters && (
         <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
-          {filters}
-          {children}
-        </div>
-      )}
-    </div>
-  )
-}
+          {filters}
+          {children}
+        </div>
+      )}
+
+      {shouldShowChipRow && (
+        <div data-slot="filter-bar-chips" className="flex flex-wrap items-center gap-2">
+          {visibleChips.length > 0 ? (
+            <>
+              {renderedChips.map((chip) => (
+              <Badge key={chip.key} variant={chipVariant[chip.tone ?? "default"]} className={cn("gap-1.5", chip.disabled && "opacity-60")}>
+                <span>{chip.label}</span>
+                {chip.value !== undefined && <span className="text-muted-foreground">{chip.value}</span>}
+                {onRemoveChip && !chip.disabled && (
+                  <button
+                    type="button"
+                    aria-label={typeof clearChipLabel === "string" ? clearChipLabel : "Remove filter"}
+                    className="rounded-full p-0.5 hover:bg-muted"
+                    onClick={(event) => {
+                      stopInteractivePropagation(event)
+                      onRemoveChip(chip.key)
+                    }}
+                    onMouseDown={stopInteractivePropagation}
+                    onDoubleClick={stopInteractivePropagation}
+                  >
+                    <XIcon className="size-3" />
+                  </button>
+                )}
+              </Badge>
+              ))}
+              {hiddenChipCount > 0 ? (
+                <Badge variant="outline">{chipOverflowLabel(hiddenChipCount)}</Badge>
+              ) : null}
+            </>
+          ) : (
+            <span className="text-sm text-muted-foreground">{emptyChips}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export { FilterBar }

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

@@ -1,3 +1,2 @@
-export * from "./filter-chips"
 export * from "./filter-bar"
 export * from "./saved-filter-select"

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

@@ -6,16 +6,19 @@ import { cn } from "@/lib/utils"
 export type FormFieldLayout = "vertical" | "horizontal" | "inline"
 export type FormFieldDescriptionPosition = "top" | "bottom"
 
-export type FormFieldShellProps = React.ComponentProps<"div"> & {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  error?: React.ReactNode
-  required?: boolean
-  htmlFor?: string
-  layout?: FormFieldLayout
-  descriptionPosition?: FormFieldDescriptionPosition
-  labelAction?: React.ReactNode
-  requiredIndicator?: React.ReactNode
+export type FormFieldShellProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  error?: React.ReactNode
+  required?: boolean
+  htmlFor?: string
+  labelId?: string
+  descriptionId?: string
+  errorId?: string
+  layout?: FormFieldLayout
+  descriptionPosition?: FormFieldDescriptionPosition
+  labelAction?: React.ReactNode
+  requiredIndicator?: React.ReactNode
   errorIcon?: React.ReactNode
   showErrorIcon?: boolean
   disabled?: boolean
@@ -29,14 +32,18 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
 
 export type FormFieldShellControlProps = Pick<
   FormFieldShellProps,
-  | "label"
-  | "description"
-  | "required"
-  | "className"
-  | "layout"
-  | "descriptionPosition"
-  | "labelAction"
-  | "requiredIndicator"
+  | "label"
+  | "description"
+  | "required"
+  | "className"
+  | "htmlFor"
+  | "labelId"
+  | "descriptionId"
+  | "errorId"
+  | "layout"
+  | "descriptionPosition"
+  | "labelAction"
+  | "requiredIndicator"
   | "errorIcon"
   | "showErrorIcon"
   | "disabled"
@@ -45,9 +52,32 @@ export type FormFieldShellControlProps = Pick<
   | "labelRowClassName"
   | "descriptionClassName"
   | "errorClassName"
-  | "contentClassName"
->
-
+  | "contentClassName"
+>
+
+export type FormFieldMessageState = {
+  description?: React.ReactNode
+  error?: React.ReactNode
+}
+
+export type FormFieldResolvedIds = {
+  labelId: string
+  descriptionId: string
+  errorId: string
+  describedBy?: string
+}
+
+function resolveFormFieldIds(id: string, state: FormFieldMessageState = {}): FormFieldResolvedIds {
+  const labelId = `${id}-label`
+  const descriptionId = `${id}-description`
+  const errorId = `${id}-error`
+  const describedBy = [state.description ? descriptionId : null, state.error ? errorId : null]
+    .filter(Boolean)
+    .join(" ") || undefined
+
+  return { labelId, descriptionId, errorId, describedBy }
+}
+
 const layoutClassName: Record<FormFieldLayout, string> = {
   vertical: "grid gap-2",
   horizontal: "grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5",
@@ -58,12 +88,15 @@ function FormFieldShell({
   className,
   label,
   description,
-  error,
-  required = false,
-  htmlFor,
-  layout = "vertical",
-  descriptionPosition = "top",
-  labelAction,
+  error,
+  required = false,
+  htmlFor,
+  labelId,
+  descriptionId,
+  errorId,
+  layout = "vertical",
+  descriptionPosition = "top",
+  labelAction,
   requiredIndicator = <span className="ml-1 text-destructive">*</span>,
   errorIcon,
   showErrorIcon = true,
@@ -92,9 +125,10 @@ function FormFieldShell({
       )}
     >
       {label ? (
-        <label
-          data-slot="form-field-label"
-          htmlFor={htmlFor}
+        <label
+          data-slot="form-field-label"
+          htmlFor={htmlFor}
+          id={labelId}
           className={cn(
             "min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground",
             disabled && "cursor-not-allowed opacity-60",
@@ -117,9 +151,10 @@ function FormFieldShell({
     </div>
   ) : null
 
-  const descriptionNode = description ? (
+  const descriptionNode = description ? (
     <p
       data-slot="form-field-description"
+      id={descriptionId}
       className={cn("text-sm leading-6 text-muted-foreground", disabled && "opacity-60", descriptionClassName)}
     >
       {description}
@@ -135,6 +170,9 @@ function FormFieldShell({
   const errorNode = error ? (
     <p
       data-slot="form-field-error"
+      id={errorId}
+      role="alert"
+      aria-live="polite"
       className={cn(
         "flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive",
         errorClassName
@@ -189,6 +227,6 @@ function FormFieldShell({
       )}
     </div>
   )
-}
-
-export { FormFieldShell }
+}
+
+export { FormFieldShell, resolveFormFieldIds }