tembro 4.2.1 → 6.0.0

package/packages/cli/vendor/src/components/charts/progress-circle.tsx

@@ -1,7 +1,82 @@
-import { ProgressRing, type ProgressRingProps } from "@/components/charts/progress-ring"
+import * as React from "react"
 
-export type ProgressCircleProps = ProgressRingProps
+import { cn } from "@/lib/utils"
 
-const ProgressCircle = ProgressRing
+export type ProgressCircleProps = React.ComponentProps<"svg"> & {
+  value?: number
+  max?: number
+  size?: number
+  strokeWidth?: number
+  label?: React.ReactNode
+  description?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger"
+  loading?: boolean
+}
+
+const toneClassName = {
+  default: "stroke-primary",
+  success: "stroke-[color:var(--aui-success,var(--primary))]",
+  warning: "stroke-[color:var(--aui-warning,var(--primary))]",
+  danger: "stroke-destructive",
+}
+
+function ProgressCircle({
+  value,
+  max = 100,
+  size = 120,
+  strokeWidth = 10,
+  label,
+  description,
+  tone = "default",
+  loading = false,
+  className,
+  ...props
+}: ProgressCircleProps) {
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const percentage = typeof value === "number" ? Math.min(Math.max(value / max, 0), 1) : 0
+  const offset = circumference - percentage * circumference
+  const progressLabel = label ?? (typeof value === "number" ? `${Math.round(percentage * 100)}%` : undefined)
+
+  return (
+    <svg
+      data-slot="progress-circle"
+      viewBox={`0 0 ${size} ${size}`}
+      className={cn("h-auto w-full max-w-32", className)}
+      role="img"
+      {...props}
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        strokeWidth={strokeWidth}
+        className="stroke-muted"
+      />
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray={circumference}
+        strokeDashoffset={loading ? circumference * 0.28 : offset}
+        className={cn("origin-center -rotate-90 transition-[stroke-dashoffset]", toneClassName[tone], loading && "animate-pulse")}
+      />
+      {progressLabel ? (
+        <text x="50%" y={description ? "46%" : "52%"} textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-lg font-semibold">
+          {progressLabel}
+        </text>
+      ) : null}
+      {description ? (
+        <text x="50%" y="62%" textAnchor="middle" dominantBaseline="middle" className="fill-muted-foreground text-[10px]">
+          {description}
+        </text>
+      ) : null}
+    </svg>
+  )
+}
 
 export { ProgressCircle }

package/packages/cli/vendor/src/components/data-table/data-table.tsx

@@ -28,7 +28,7 @@ import { DataTablePagination, type DataTablePaginationProps } from "@/components
 import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions"
 import { DataTableToolbar, type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar"
 import { DataState, type DataStateProps } from "@/components/display/data-state"
-import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
+import { StateView, type StateViewProps } from "@/components/feedback/state-view"
 import { Button } from "@/components/ui/button"
 import { Input, type InputSearchProps } from "@/components/ui/input"
 import { useIsMobile } from "@/hooks/use-is-mobile"
@@ -130,7 +130,7 @@ export type DataTableProps<TData, TValue = unknown> = Omit<
   isError?: boolean
   emptyState?: Omit<DataStateProps, "status">
   errorState?: Omit<DataStateProps, "status">
-  loadingState?: LoadingStateProps
+  loadingState?: Omit<StateViewProps, "status">
   loadingVariant?: DataTableLoadingVariant
   toolbar?: React.ReactNode | ((table: TanStackTable<TData>) => React.ReactNode)
   toolbarProps?: DataTableToolbarProps | ((table: TanStackTable<TData>) => DataTableToolbarProps)
@@ -511,7 +511,7 @@ function DataTable<TData, TValue = unknown>({
     ))
 
   const stateContent = shouldRenderSkeleton ? null : isLoading ? (
-    <LoadingState label="Loading data..." {...loadingState} />
+    <StateView status="loading" title="Loading data..." {...loadingState} />
   ) : isError ? (
     <DataState status="error" title="Could not load data" description="Please try again." variant="plain" {...errorState} />
   ) : rows.length === 0 ? (
@@ -657,7 +657,7 @@ function DataTable<TData, TValue = unknown>({
         <div className="grid gap-3">
           {stateContent ??
             (shouldRenderSkeleton ? (
-              <LoadingState label="Loading data..." {...loadingState} />
+              <StateView status="loading" title="Loading data..." {...loadingState} />
             ) : (
               rows.map((row) => (
                 <React.Fragment key={row.id}>

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

@@ -1,4 +1,2 @@
 export * from "./alert"
-export * from "./loading-state"
-export * from "./page-state"
 export * from "./state-view"

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

@@ -69,33 +69,6 @@ function Section({
   )
 }
 
-export type ToolbarProps = React.ComponentProps<"div"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  filters?: React.ReactNode
-  actions?: React.ReactNode
-}
-
-function Toolbar({ title, description, filters, actions, className, children, ...props }: ToolbarProps) {
-  return (
-    <div data-slot="toolbar" className={cn("flex flex-wrap items-center justify-between gap-3", className)} {...props}>
-      {(title || description) && (
-        <div className="grid gap-0.5">
-          {title && <div className="font-medium text-foreground">{title}</div>}
-          {description && <div className="text-sm text-muted-foreground">{description}</div>}
-        </div>
-      )}
-      {children}
-      {(filters || actions) && (
-        <div className="flex flex-wrap items-center gap-2">
-          {filters}
-          {actions}
-        </div>
-      )}
-    </div>
-  )
-}
-
 export type SplitLayoutProps = React.ComponentProps<"div"> & {
   aside: React.ReactNode
   asidePosition?: "start" | "end"
@@ -125,4 +98,4 @@ function SplitLayout({ aside, asidePosition = "end", asideClassName, contentClas
   )
 }
 
-export { Section, SplitLayout, Toolbar }
+export { Section, SplitLayout }

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

@@ -1,9 +1 @@
-export * from './form-builder'
-export * from './resource-page'
-export * from './resource-detail-page'
 export * from "./empty-state"
-export * from "./page-toolbar"
-export * from "./bulk-action-bar"
-export * from "./detail-layout"
-export * from "./settings-page"
-export * from "./data-view"

package/packages/cli/vendor/src/components/patterns/public.ts

@@ -1,9 +1 @@
-export * from "./form-builder"
-export * from "./resource-page"
-export * from "./resource-detail-page"
 export * from "./empty-state"
-export * from "./page-toolbar"
-export * from "./bulk-action-bar"
-export * from "./detail-layout"
-export * from "./settings-page"
-export * from "./data-view"

package/packages/cli/vendor/src/components/ui/hover-card/index.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+
+import { cn } from "@/lib/utils"
+
+export type HoverCardProps = PreviewCardPrimitive.Root.Props
+export type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props
+export type HoverCardContentProps = PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "side" | "sideOffset"
+  >
+export type HoverCardArrowProps = PreviewCardPrimitive.Arrow.Props
+
+function HoverCard({ ...props }: HoverCardProps) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: HoverCardTriggerProps) {
+  if (!("render" in props) && React.isValidElement(props.children)) {
+    const { children, ...rest } = props
+    return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" render={children} {...rest} />
+  }
+
+  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  collisionPadding = 12,
+  side = "bottom",
+  sideOffset = 8,
+  ...props
+}: HoverCardContentProps) {
+  return (
+    <PreviewCardPrimitive.Portal>
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50 outline-none"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 grid max-h-[min(var(--available-height),calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] origin-(--transform-origin) gap-3 overflow-y-auto rounded-[var(--radius-lg)] border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none duration-100 data-[side=bottom]:slide-in-from-top-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}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  )
+}
+
+function HoverCardArrow({ className, ...props }: HoverCardArrowProps) {
+  return (
+    <PreviewCardPrimitive.Arrow
+      data-slot="hover-card-arrow"
+      className={cn("z-50 flex size-3 rotate-45 border border-border bg-popover", className)}
+      {...props}
+    />
+  )
+}
+
+export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger }

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

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type MenubarProps = MenubarPrimitive.Props
+export type MenubarMenuProps = MenuPrimitive.Root.Props
+export type MenubarTriggerProps = MenuPrimitive.Trigger.Props
+export type MenubarContentProps = MenuPrimitive.Popup.Props &
+  Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">
+export type MenubarItemProps = MenuPrimitive.Item.Props & { inset?: boolean; variant?: "default" | "destructive" }
+export type MenubarCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & { inset?: boolean }
+export type MenubarRadioGroupProps = MenuPrimitive.RadioGroup.Props
+export type MenubarRadioItemProps = MenuPrimitive.RadioItem.Props & { inset?: boolean }
+export type MenubarSubProps = MenuPrimitive.SubmenuRoot.Props
+export type MenubarSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }
+export type MenubarSeparatorProps = MenuPrimitive.Separator.Props
+export type MenubarLabelProps = React.ComponentProps<"div"> & { inset?: boolean }
+export type MenubarShortcutProps = React.ComponentProps<"span">
+
+const itemClassName =
+  "relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus-visible:bg-destructive/10 data-[variant=destructive]:hover:bg-destructive/10"
+
+function Menubar({ className, ...props }: MenubarProps) {
+  return (
+    <MenubarPrimitive
+      data-slot="menubar"
+      className={cn("flex h-10 items-center gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1 text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({ ...props }: MenubarMenuProps) {
+  return <MenuPrimitive.Root data-slot="menubar-menu" {...props} />
+}
+
+function MenubarTrigger({ className, ...props }: MenubarTriggerProps) {
+  return (
+    <MenuPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn("inline-flex h-8 items-center justify-center rounded-[var(--radius-md)] px-3 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({ className, align = "start", alignOffset = 0, side = "bottom", sideOffset = 6, ...props }: MenubarContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="isolate z-50 outline-none">
+        <MenuPrimitive.Popup
+          data-slot="menubar-content"
+          className={cn("z-50 min-w-48 origin-(--transform-origin) overflow-hidden rounded-[var(--radius-lg)] border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none duration-100 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}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function MenubarItem({ className, inset, variant = "default", ...props }: MenubarItemProps) {
+  return <MenuPrimitive.Item data-slot="menubar-item" data-inset={inset || undefined} data-variant={variant} className={cn(itemClassName, className)} {...props} />
+}
+
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }: MenubarCheckboxItemProps) {
+  return (
+    <MenuPrimitive.CheckboxItem data-slot="menubar-checkbox-item" data-inset={inset || undefined} className={cn(itemClassName, "pl-8", className)} checked={checked} {...props}>
+      <span className="absolute left-2 inline-flex size-4 items-center justify-center">
+        <MenuPrimitive.CheckboxItemIndicator><CheckIcon className="size-4" /></MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps) {
+  return <MenuPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarRadioItem({ className, children, inset, ...props }: MenubarRadioItemProps) {
+  return (
+    <MenuPrimitive.RadioItem data-slot="menubar-radio-item" data-inset={inset || undefined} className={cn(itemClassName, "pl-8", className)} {...props}>
+      <span className="absolute left-2 inline-flex size-4 items-center justify-center">
+        <MenuPrimitive.RadioItemIndicator><CheckIcon className="size-4" /></MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function MenubarSub({ ...props }: MenubarSubProps) {
+  return <MenuPrimitive.SubmenuRoot data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({ className, children, inset, ...props }: MenubarSubTriggerProps) {
+  return (
+    <MenuPrimitive.SubmenuTrigger data-slot="menubar-sub-trigger" data-inset={inset || undefined} className={cn(itemClassName, className)} {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function MenubarSubContent(props: MenubarContentProps) {
+  return <MenubarContent data-slot="menubar-sub-content" side="right" align="start" alignOffset={-4} sideOffset={0} {...props} />
+}
+
+function MenubarSeparator({ className, ...props }: MenubarSeparatorProps) {
+  return <MenuPrimitive.Separator data-slot="menubar-separator" className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+}
+
+function MenubarLabel({ className, inset, ...props }: MenubarLabelProps) {
+  return <div data-slot="menubar-label" data-inset={inset || undefined} className={cn("px-2.5 py-1.5 text-xs font-semibold text-muted-foreground data-[inset=true]:pl-8", className)} {...props} />
+}
+
+function MenubarShortcut({ className, ...props }: MenubarShortcutProps) {
+  return <span data-slot="menubar-shortcut" className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+}

package/packages/cli/vendor/src/components/ui/navigation-menu/index.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type NavigationMenuProps = NavigationMenuPrimitive.Root.Props
+export type NavigationMenuListProps = NavigationMenuPrimitive.List.Props
+export type NavigationMenuItemProps = NavigationMenuPrimitive.Item.Props
+export type NavigationMenuTriggerProps = NavigationMenuPrimitive.Trigger.Props
+export type NavigationMenuContentProps = NavigationMenuPrimitive.Content.Props
+export type NavigationMenuLinkProps = NavigationMenuPrimitive.Link.Props
+export type NavigationMenuViewportProps = NavigationMenuPrimitive.Viewport.Props
+export type NavigationMenuPositionerProps = NavigationMenuPrimitive.Positioner.Props
+export type NavigationMenuArrowProps = NavigationMenuPrimitive.Arrow.Props
+
+function NavigationMenu({ className, ...props }: NavigationMenuProps) {
+  return <NavigationMenuPrimitive.Root data-slot="navigation-menu" className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)} {...props} />
+}
+
+function NavigationMenuList({ className, ...props }: NavigationMenuListProps) {
+  return <NavigationMenuPrimitive.List data-slot="navigation-menu-list" className={cn("flex flex-1 list-none items-center justify-center gap-1", className)} {...props} />
+}
+
+function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {
+  return <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn("relative", className)} {...props} />
+}
+
+function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn("group inline-flex h-10 items-center justify-center gap-1 rounded-[var(--radius-md)] px-4 py-2 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="size-4 shrink-0 transition-transform duration-200 group-data-[popup-open]:rotate-180" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn("left-0 top-0 w-full p-4 md:absolute md:w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn("block select-none rounded-[var(--radius-md)] p-3 text-sm leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({ className, sideOffset = 8, ...props }: NavigationMenuPositionerProps) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        data-slot="navigation-menu-positioner"
+        sideOffset={sideOffset}
+        className={cn("isolate z-50 flex justify-center", className)}
+        {...props}
+      />
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps) {
+  return (
+    <NavigationMenuPrimitive.Viewport
+      data-slot="navigation-menu-viewport"
+      className={cn("relative h-(--height) w-full min-w-80 origin-(--transform-origin) overflow-hidden rounded-[var(--radius-lg)] border border-border bg-popover text-popover-foreground shadow-lg duration-100 md:w-(--width) 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}
+    />
+  )
+}
+
+function NavigationMenuArrow({ className, ...props }: NavigationMenuArrowProps) {
+  return <NavigationMenuPrimitive.Arrow data-slot="navigation-menu-arrow" className={cn("z-50 flex size-3 rotate-45 border border-border bg-popover", className)} {...props} />
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuArrow,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuPositioner,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+}

package/packages/cli/vendor/src/components/ui/number-field/index.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type NumberFieldProps = NumberFieldPrimitive.Root.Props
+export type NumberFieldGroupProps = NumberFieldPrimitive.Group.Props
+export type NumberFieldInputProps = NumberFieldPrimitive.Input.Props
+export type NumberFieldIncrementProps = NumberFieldPrimitive.Increment.Props
+export type NumberFieldDecrementProps = NumberFieldPrimitive.Decrement.Props
+export type NumberFieldScrubAreaProps = NumberFieldPrimitive.ScrubArea.Props
+export type NumberFieldScrubAreaCursorProps = NumberFieldPrimitive.ScrubAreaCursor.Props
+
+function NumberField({ className, ...props }: NumberFieldProps) {
+  return <NumberFieldPrimitive.Root data-slot="number-field" className={cn("grid gap-2", className)} {...props} />
+}
+
+function NumberFieldGroup({ className, ...props }: NumberFieldGroupProps) {
+  return (
+    <NumberFieldPrimitive.Group
+      data-slot="number-field-group"
+      className={cn(
+        "flex min-h-10 w-full overflow-hidden rounded-[var(--radius-md)] border border-input bg-background text-foreground shadow-xs transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/35 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NumberFieldInput({ className, ...props }: NumberFieldInputProps) {
+  return (
+    <NumberFieldPrimitive.Input
+      data-slot="number-field-input"
+      className={cn("min-w-0 flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps) {
+  return (
+    <NumberFieldPrimitive.Increment
+      data-slot="number-field-increment"
+      className={cn("flex h-5 w-8 items-center justify-center border-l border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40", className)}
+      {...props}
+    >
+      {children ?? <ChevronUpIcon aria-hidden="true" className="size-3.5" />}
+    </NumberFieldPrimitive.Increment>
+  )
+}
+
+function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps) {
+  return (
+    <NumberFieldPrimitive.Decrement
+      data-slot="number-field-decrement"
+      className={cn("flex h-5 w-8 items-center justify-center border-l border-t border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40", className)}
+      {...props}
+    >
+      {children ?? <ChevronDownIcon aria-hidden="true" className="size-3.5" />}
+    </NumberFieldPrimitive.Decrement>
+  )
+}
+
+function NumberFieldStepper({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="number-field-stepper" className={cn("grid shrink-0 grid-rows-2", className)} {...props} />
+}
+
+function NumberFieldScrubArea({ className, ...props }: NumberFieldScrubAreaProps) {
+  return <NumberFieldPrimitive.ScrubArea data-slot="number-field-scrub-area" className={cn("cursor-ew-resize select-none", className)} {...props} />
+}
+
+function NumberFieldScrubAreaCursor({ className, ...props }: NumberFieldScrubAreaCursorProps) {
+  return <NumberFieldPrimitive.ScrubAreaCursor data-slot="number-field-scrub-area-cursor" className={cn("fixed z-50 rounded bg-foreground px-2 py-1 text-xs text-background shadow-lg", className)} {...props} />
+}
+
+export {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+  NumberFieldStepper,
+}

package/packages/cli/vendor/src/components/ui/toggle-group/index.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { Toggle } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+
+import { cn } from "@/lib/utils"
+
+export type ToggleGroupProps<TValue extends string = string> = ToggleGroupPrimitive.Props<TValue> & {
+  variant?: "default" | "outline" | "ghost"
+  size?: "sm" | "md" | "lg"
+}
+export type ToggleGroupItemProps<TValue extends string = string> = Toggle.Props<TValue> & {
+  variant?: ToggleGroupProps<TValue>["variant"]
+  size?: ToggleGroupProps<TValue>["size"]
+}
+
+const sizeClassName = {
+  sm: "h-8 min-w-8 px-2 text-xs",
+  md: "h-9 min-w-9 px-3 text-sm",
+  lg: "h-10 min-w-10 px-3.5 text-sm",
+}
+
+function ToggleGroup<TValue extends string = string>({
+  className,
+  variant = "default",
+  size = "md",
+  orientation = "horizontal",
+  ...props
+}: ToggleGroupProps<TValue>) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      orientation={orientation}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-[var(--radius-lg)]",
+        variant === "default" && "border border-border bg-muted/60 p-1",
+        variant === "outline" && "gap-0 overflow-hidden rounded-[var(--radius-lg)] border border-border",
+        orientation === "vertical" && "flex-col items-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToggleGroupItem<TValue extends string = string>({
+  className,
+  variant = "default",
+  size = "md",
+  ...props
+}: ToggleGroupItemProps<TValue>) {
+  return (
+    <Toggle
+      data-slot="toggle-group-item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none transition-[background-color,color,border-color,box-shadow] disabled:pointer-events-none disabled:opacity-50 data-[pressed]:text-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
+        sizeClassName[size],
+        variant === "default" && "rounded-[calc(var(--radius-md)-1px)] text-muted-foreground hover:bg-background/70 data-[pressed]:bg-background data-[pressed]:shadow-sm",
+        variant === "outline" && "-m-px border border-border text-muted-foreground hover:bg-muted/60 data-[pressed]:bg-muted data-[pressed]:shadow-inner first:rounded-l-[var(--radius-md)] last:rounded-r-[var(--radius-md)]",
+        variant === "ghost" && "rounded-[var(--radius-md)] text-muted-foreground hover:bg-muted/70 data-[pressed]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }