tembro 4.2.1 → 6.0.0

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

@@ -1,29 +0,0 @@
-import * as React from "react"
-
-import { StateView, type StateViewProps, type StateViewStatus } from "./state-view"
-import { cn } from "@/lib/utils"
-
-export type PageStateTone = Extract<StateViewStatus, "empty" | "loading" | "error" | "success" | "info">
-export type PageStateProps = Omit<StateViewProps, "status" | "size" | "variant" | "tone" | "actions" | "slot"> & {
-  tone?: PageStateTone
-  action?: React.ReactNode
-  extra?: React.ReactNode
-  compact?: boolean
-}
-
-/** @deprecated Use StateView. */
-function PageState({ tone = "empty", action, extra, compact = false, className, ...props }: PageStateProps) {
-  return <StateView status={tone} size={compact ? "compact" : "page"} actions={<>{action}{extra}</>} slot="page-state" className={className} {...props} />
-}
-
-export type InlineStateProps = Omit<PageStateProps, "compact"> & {
-  retryLabel?: React.ReactNode
-  onRetry?: () => void
-}
-
-/** @deprecated Use StateView with variant="inline". */
-function InlineState({ tone = "empty", action, className, ...props }: InlineStateProps) {
-  return <StateView variant="inline" size="compact" actions={action} slot="inline-state" className={cn("min-h-0", className)} {...props} status={tone} />
-}
-
-export { InlineState, PageState }

package/packages/cli/vendor/src/components/layout/page-container.tsx

@@ -1,30 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type PageContainerSize = "default" | "sm" | "md" | "lg" | "xl" | "full"
-
-export type PageContainerProps = React.ComponentProps<"div"> & {
-  size?: PageContainerSize
-}
-
-const sizeClassName: Record<PageContainerSize, string> = {
-  sm: "max-w-3xl",
-  md: "max-w-5xl",
-  lg: "max-w-6xl",
-  xl: "max-w-7xl",
-  default: "max-w-7xl",
-  full: "max-w-none",
-}
-
-function PageContainer({ className, size = "default", ...props }: PageContainerProps) {
-  return (
-    <div
-      data-slot="page-container"
-      className={cn("mx-auto flex w-full flex-col gap-4", sizeClassName[size], className)}
-      {...props}
-    />
-  )
-}
-
-export { PageContainer }

package/packages/cli/vendor/src/components/layout/page-header.tsx

@@ -1,104 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const pageHeaderVariants = cva("flex flex-col border transition-[background-color,border-color,box-shadow]", {
-  variants: {
-    variant: {
-      default: "border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/5",
-      elevated: "border-border/70 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_45px_rgba(15,23,42,0.08)] ring-1 ring-foreground/5",
-      outline: "border-border bg-transparent shadow-none",
-      ghost: "border-transparent bg-transparent shadow-none",
-      soft: "border-transparent bg-muted/45 shadow-none",
-    },
-    size: {
-      sm: "gap-3 rounded-[var(--radius-2xl)] p-4",
-      default: "gap-4 rounded-[var(--radius-3xl)] p-5",
-      lg: "gap-5 rounded-[calc(var(--radius-3xl)*1.1)] p-6",
-    },
-    tone: {
-      neutral: "",
-      info: "border-blue-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.03_235)_28%),var(--card))]",
-      success: "border-emerald-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.04_155)_30%),var(--card))]",
-      warning: "border-amber-500/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.05_85)_30%),var(--card))]",
-      danger: "border-destructive/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),var(--destructive)_8%),var(--card))]",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-    tone: "neutral",
-  },
-})
-
-export type PageHeaderProps = React.ComponentProps<"div"> &
-  VariantProps<typeof pageHeaderVariants> & {
-    title?: React.ReactNode
-    description?: React.ReactNode
-    eyebrow?: React.ReactNode
-    breadcrumbs?: React.ReactNode
-    actions?: React.ReactNode
-    meta?: React.ReactNode
-    leading?: React.ReactNode
-    footer?: React.ReactNode
-    sticky?: boolean
-    titleClassName?: string
-    descriptionClassName?: string
-    actionsClassName?: string
-  }
-
-function PageHeader({
-  className,
-  variant,
-  size,
-  tone,
-  title,
-  description,
-  eyebrow,
-  breadcrumbs,
-  actions,
-  meta,
-  leading,
-  footer,
-  sticky = false,
-  titleClassName,
-  descriptionClassName,
-  actionsClassName,
-  children,
-  ...props
-}: PageHeaderProps) {
-  return (
-    <div
-      data-slot="page-header"
-      data-sticky={sticky || undefined}
-      className={cn(
-        pageHeaderVariants({ variant, size, tone }),
-        sticky && "sticky top-0 z-30 bg-background/92 backdrop-blur supports-[backdrop-filter]:bg-background/78",
-        className
-      )}
-      {...props}
-    >
-      {breadcrumbs && <div className="text-sm text-muted-foreground/95">{breadcrumbs}</div>}
-
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex min-w-0 gap-4">
-          {leading ? <div className="shrink-0">{leading}</div> : null}
-          <div className="min-w-0 space-y-2">
-            {eyebrow && <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</div>}
-            {title && <h1 className={cn("truncate text-3xl font-semibold tracking-[-0.03em] text-foreground", size === "sm" && "text-2xl", size === "lg" && "text-4xl", titleClassName)}>{title}</h1>}
-            {description && <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p>}
-            {meta && <div className="pt-1 text-sm text-muted-foreground">{meta}</div>}
-          </div>
-        </div>
-
-        {actions && <div className={cn("flex shrink-0 flex-wrap items-center gap-2.5", actionsClassName)}>{actions}</div>}
-      </div>
-
-      {children}
-      {footer && <div data-slot="page-header-footer" className="border-t border-border/70 pt-4">{footer}</div>}
-    </div>
-  )
-}
-
-export { PageHeader, pageHeaderVariants }

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

@@ -1,56 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type SectionHeaderProps = React.ComponentProps<"div"> & {
-  eyebrow?: React.ReactNode
-  title?: React.ReactNode
-  description?: React.ReactNode
-  actions?: React.ReactNode
-  meta?: React.ReactNode
-  align?: "start" | "center"
-  size?: "sm" | "default" | "lg"
-  titleClassName?: string
-  descriptionClassName?: string
-}
-
-const titleSizeClassName = {
-  sm: "text-xl",
-  default: "text-2xl",
-  lg: "text-3xl",
-}
-
-function SectionHeader({
-  className,
-  eyebrow,
-  title,
-  description,
-  actions,
-  meta,
-  align = "start",
-  size = "default",
-  titleClassName,
-  descriptionClassName,
-  children,
-  ...props
-}: SectionHeaderProps) {
-  return (
-    <div
-      data-slot="section-header"
-      data-align={align}
-      className={cn("flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", align === "center" && "text-center sm:flex-col sm:items-center", className)}
-      {...props}
-    >
-      <div className={cn("min-w-0 space-y-2", align === "center" && "mx-auto max-w-2xl")}> 
-        {eyebrow ? <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</p> : null}
-        {title ? <h2 className={cn("font-semibold tracking-[-0.03em] text-foreground", titleSizeClassName[size], titleClassName)}>{title}</h2> : null}
-        {description ? <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p> : null}
-        {meta ? <div className="text-sm text-muted-foreground">{meta}</div> : null}
-        {children}
-      </div>
-      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2.5">{actions}</div> : null}
-    </div>
-  )
-}
-
-export { SectionHeader }

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

@@ -1,377 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Badge } from "@/components/ui/badge"
-import { Tooltip } from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
-import { ControllableDetails } from "./controllable-details"
-
-export type SidebarNavItem = {
-  key: string
-  label: React.ReactNode
-  icon?: React.ReactNode
-  badge?: React.ReactNode
-  href?: string
-  items?: SidebarNavItem[]
-  active?: boolean
-  current?: React.AriaAttributes["aria-current"]
-  disabled?: boolean
-  hidden?: boolean
-  sectionLabel?: React.ReactNode
-  defaultExpanded?: boolean
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-  tooltip?: React.ReactNode
-  onSelect?: () => void
-}
-
-export type SidebarNavProps = React.ComponentProps<"nav"> & {
-  items: SidebarNavItem[]
-  collapsed?: boolean
-  scrollable?: boolean
-  tooltipOnCollapsed?: boolean
-  showSectionLabels?: boolean
-  itemSize?: "sm" | "md" | "lg"
-  activeIndicator?: "none" | "bar" | "pill"
-  itemClassName?: string
-  activeItemClassName?: string
-  renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode
-  renderLink?: (props: React.ComponentProps<"a"> & { item: SidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
-}
-
-function hasVisibleChildren(item: SidebarNavItem) {
-  return item.items?.some((child) => !child.hidden) ?? false
-}
-
-function isActiveItem(item: SidebarNavItem): boolean {
-  if (item.active) return true
-  return item.items?.some((child) => isActiveItem(child)) ?? false
-}
-
-function SidebarLeaf({
-  item,
-  collapsed,
-  depth,
-  itemSize,
-  activeIndicator,
-  itemClassName,
-  activeItemClassName,
-  renderLink,
-}: {
-  item: SidebarNavItem
-  collapsed: boolean
-  depth: number
-  itemSize: NonNullable<SidebarNavProps["itemSize"]>
-  activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
-  itemClassName?: string
-  activeItemClassName?: string
-  renderLink?: SidebarNavProps["renderLink"]
-}) {
-  const currentValue: React.AriaAttributes["aria-current"] = item.current ?? (item.active ? "page" : undefined)
-  const content = (
-    <>
-      {item.icon && <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>}
-      {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
-      {!collapsed && item.badge && (
-        <Badge variant="secondary" className="ml-auto h-5 shrink-0 px-1.5">
-          {item.badge}
-        </Badge>
-      )}
-    </>
-  )
-
-  const commonClassName = cn(
-    "group flex items-center gap-2 border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-    collapsed && "justify-center px-0",
-    depth > 0 && !collapsed && "pl-3",
-    itemClassName,
-    item.active && activeItemClassName
-  )
-
-  const wrapCollapsed = (node: React.ReactNode) =>
-    collapsed ? (
-      <Tooltip content={item.tooltip ?? item.label} side="right">
-        <span className="block">{node}</span>
-      </Tooltip>
-    ) : (
-      node
-    )
-
-  const internal = item.href && item.href.startsWith("/")
-
-  if (internal) {
-    if (renderLink) {
-      return wrapCollapsed(
-        renderLink({
-          item,
-          href: item.href,
-          "data-slot": "sidebar-nav-item",
-          "data-depth": String(depth),
-          "data-active": item.active || undefined,
-          "data-disabled": item.disabled || undefined,
-          "data-size": itemSize,
-          "data-active-indicator": activeIndicator,
-          "aria-current": currentValue,
-          className: commonClassName,
-          onClick: (event) => {
-            if (item.disabled) {
-              event.preventDefault()
-              return
-            }
-            item.onSelect?.()
-          },
-          children: content,
-        })
-      )
-    }
-
-    return wrapCollapsed(
-      <a
-        href={item.href}
-        data-slot="sidebar-nav-item"
-        data-depth={depth}
-        data-active={item.active || undefined}
-        data-disabled={item.disabled || undefined}
-        data-size={itemSize}
-        data-active-indicator={activeIndicator}
-        aria-current={currentValue}
-        className={commonClassName}
-        onClick={(event) => {
-          if (item.disabled) {
-            event.preventDefault()
-            return
-          }
-          item.onSelect?.()
-        }}
-      >
-        {content}
-      </a>
-    )
-  }
-
-  if (item.href) {
-    return wrapCollapsed(
-      <button
-        type="button"
-        data-slot="sidebar-nav-item"
-        data-depth={depth}
-        data-active={item.active || undefined}
-        data-disabled={item.disabled || undefined}
-        data-size={itemSize}
-        data-active-indicator={activeIndicator}
-        aria-current={currentValue}
-        className={cn("w-full text-left", commonClassName)}
-        onClick={() => {
-          if (item.disabled) return
-          const href = item.href
-          if (!href) return
-          item.onSelect?.()
-          if (href.startsWith("http")) {
-            window.open(href, "_blank", "noopener,noreferrer")
-            return
-          }
-          window.location.assign(href)
-        }}
-      >
-        {content}
-      </button>
-    )
-  }
-
-  return wrapCollapsed(
-    <button
-      type="button"
-      data-slot="sidebar-nav-item"
-      data-depth={depth}
-      data-active={item.active || undefined}
-      data-disabled={item.disabled || undefined}
-      data-size={itemSize}
-      data-active-indicator={activeIndicator}
-      aria-current={currentValue}
-      disabled={item.disabled}
-      className={cn("w-full text-left", commonClassName)}
-      onClick={item.onSelect}
-    >
-      {content}
-    </button>
-  )
-}
-
-function SidebarTree({
-  items,
-  collapsed,
-  depth,
-  showSectionLabels,
-  itemSize,
-  activeIndicator,
-  itemClassName,
-  activeItemClassName,
-  renderItem,
-  renderLink,
-}: {
-  items: SidebarNavItem[]
-  collapsed: boolean
-  depth: number
-  showSectionLabels: boolean
-  itemSize: NonNullable<SidebarNavProps["itemSize"]>
-  activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
-  itemClassName?: string
-  activeItemClassName?: string
-  renderItem?: SidebarNavProps["renderItem"]
-  renderLink?: SidebarNavProps["renderLink"]
-}) {
-  return items.map((item) => {
-    if (item.hidden) return null
-
-    const showSectionLabel = showSectionLabels && !collapsed && depth === 0 && item.sectionLabel
-    const hasChildren = hasVisibleChildren(item)
-
-    if (!hasChildren) {
-      const element = (
-        <SidebarLeaf
-          item={item}
-          collapsed={collapsed}
-          depth={depth}
-          itemSize={itemSize}
-          activeIndicator={activeIndicator}
-          itemClassName={itemClassName}
-          activeItemClassName={activeItemClassName}
-          renderLink={renderLink}
-        />
-      )
-
-      return (
-        <React.Fragment key={item.key}>
-          {showSectionLabel ? (
-            <div
-              data-slot="sidebar-nav-group-label"
-              className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
-            >
-              {item.sectionLabel}
-            </div>
-          ) : null}
-          {renderItem ? renderItem(item, element) : element}
-        </React.Fragment>
-      )
-    }
-
-    const isExpanded = item.defaultExpanded ?? isActiveItem(item)
-    const trigger = (
-      <summary
-        data-slot="sidebar-nav-group-trigger"
-        className={cn(
-          "flex min-h-9 list-none items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)]",
-          collapsed ? "justify-center px-0" : "px-2"
-        )}
-      >
-        {item.icon ? (
-          collapsed ? (
-            <Tooltip content={item.tooltip ?? item.label} side="right">
-              <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
-            </Tooltip>
-          ) : (
-            <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
-          )
-        ) : null}
-        {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
-        {!collapsed && item.badge ? (
-          <Badge variant="secondary" className="h-5 shrink-0 px-1.5">
-            {item.badge}
-          </Badge>
-        ) : null}
-        {!collapsed && (
-          <span
-            data-slot="sidebar-nav-group-chevron"
-            className="ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90"
-          >
-            ›
-          </span>
-        )}
-      </summary>
-    )
-
-    const groupElement = (
-      <div data-slot="sidebar-nav-group" data-depth={depth}>
-        {showSectionLabel ? (
-          <div
-            data-slot="sidebar-nav-group-label"
-            className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
-          >
-            {item.sectionLabel}
-          </div>
-        ) : null}
-        <ControllableDetails
-          data-slot="sidebar-nav-group-details"
-          open={item.expanded}
-          defaultOpen={isExpanded}
-          className="group/sidebar-nav-details"
-          onOpenChange={item.onExpandedChange}
-        >
-          {trigger}
-          <div
-            data-slot="sidebar-nav-group-content"
-            className={cn("mt-1 grid gap-1", !collapsed && "ml-3 border-l border-border/55 pl-2")}
-          >
-            <SidebarTree
-              items={item.items ?? []}
-              collapsed={collapsed}
-              depth={depth + 1}
-              showSectionLabels={showSectionLabels}
-              itemSize={itemSize}
-              activeIndicator={activeIndicator}
-              itemClassName={itemClassName}
-              activeItemClassName={activeItemClassName}
-              renderItem={renderItem}
-              renderLink={renderLink}
-            />
-          </div>
-        </ControllableDetails>
-      </div>
-    )
-
-    return renderItem ? <React.Fragment key={item.key}>{renderItem(item, groupElement)}</React.Fragment> : <React.Fragment key={item.key}>{groupElement}</React.Fragment>
-  })
-}
-
-function SidebarNav({
-  className,
-  items,
-  collapsed = false,
-  scrollable = true,
-  showSectionLabels = true,
-  itemSize = "md",
-  activeIndicator = "bar",
-  itemClassName,
-  activeItemClassName,
-  renderItem,
-  renderLink,
-  ...props
-}: SidebarNavProps) {
-  const visibleItems = items.filter((item) => !item.hidden)
-
-  return (
-    <nav
-      aria-label="Primary navigation"
-      data-slot="sidebar-nav"
-      data-collapsed={collapsed || undefined}
-      className={cn("grid min-h-0 gap-1", scrollable ? "overflow-y-auto overscroll-contain" : null, className)}
-      {...props}
-    >
-      <SidebarTree
-        items={visibleItems}
-        collapsed={collapsed}
-        depth={0}
-        showSectionLabels={showSectionLabels}
-        itemSize={itemSize}
-        activeIndicator={activeIndicator}
-        itemClassName={itemClassName}
-        activeItemClassName={activeItemClassName}
-        renderItem={renderItem}
-        renderLink={renderLink}
-      />
-    </nav>
-  )
-}
-
-export { SidebarNav }

package/packages/cli/vendor/src/components/layout/sticky-footer-bar.tsx

@@ -1,23 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type StickyFooterBarProps = React.ComponentProps<"div"> & {
-  start?: React.ReactNode
-  end?: React.ReactNode
-}
-
-function StickyFooterBar({ start, end, className, children, ...props }: StickyFooterBarProps) {
-  return (
-    <div
-      data-slot="sticky-footer-bar"
-      className={cn("sticky bottom-0 z-30 flex flex-wrap items-center justify-between gap-3 border-t bg-background px-4 py-3 shadow-lg", className)}
-      {...props}
-    >
-      <div className="min-w-0 flex-1">{start ?? children}</div>
-      {end && <div className="flex shrink-0 items-center gap-2">{end}</div>}
-    </div>
-  )
-}
-
-export { StickyFooterBar }

package/packages/cli/vendor/src/components/patterns/bulk-action-bar.tsx

@@ -1,53 +0,0 @@
-import * as React from "react"
-import { XIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-export type BulkActionBarProps = React.ComponentProps<"div"> & {
-  selectedCount: number
-  selectedLabel?: (count: number) => React.ReactNode
-  actions?: React.ReactNode
-  clearLabel?: React.ReactNode
-  onClear?: () => void
-}
-
-function BulkActionBar({
-  className,
-  selectedCount,
-  selectedLabel = (count) => `${count} selected`,
-  actions,
-  clearLabel = "Clear",
-  onClear,
-  children,
-  ...props
-}: BulkActionBarProps) {
-  if (selectedCount <= 0) return null
-
-  return (
-    <div
-      data-slot="bulk-action-bar"
-      className={cn(
-        "flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between",
-        className
-      )}
-      {...props}
-    >
-      <div data-slot="bulk-action-bar-count" className="text-sm font-medium">
-        {selectedLabel(selectedCount)}
-      </div>
-      <div data-slot="bulk-action-bar-actions" className="flex flex-wrap items-center gap-2">
-        {children}
-        {actions}
-        {onClear && (
-          <Button type="button" variant="ghost" size="sm" onClick={onClear}>
-            <XIcon data-icon="inline-start" />
-            {clearLabel}
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export { BulkActionBar }