tembro 3.1.16 → 4.0.0

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

@@ -0,0 +1,157 @@
+import * as React from "react"
+import {
+  AlertTriangleIcon,
+  CheckCircle2Icon,
+  InfoIcon,
+  Loader2Icon,
+  SearchXIcon,
+  XIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type StateViewStatus = "idle" | "loading" | "empty" | "error" | "success" | "info"
+export type StateViewTone = "default" | "muted" | "success" | "warning" | "danger" | "info"
+export type StateViewVariant = "card" | "plain" | "inline"
+export type StateViewSize = "compact" | "default" | "page"
+
+export type StateViewProps = Omit<React.ComponentProps<"div">, "title"> & {
+  status?: StateViewStatus
+  tone?: StateViewTone
+  variant?: StateViewVariant
+  size?: StateViewSize
+  align?: "start" | "center"
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  actions?: React.ReactNode
+  footer?: React.ReactNode
+  query?: React.ReactNode
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+  clearLabel?: React.ReactNode
+  onClear?: () => void
+  loadingVariant?: "spinner" | "skeleton" | "progress"
+  progress?: number
+  slot?: string
+}
+
+const defaults: Record<StateViewStatus, { title: string; description: string; icon: React.ReactNode }> = {
+  idle: { title: "Ready", description: "No action has started yet.", icon: <CheckCircle2Icon /> },
+  loading: { title: "Loading", description: "Please wait while data is being prepared.", icon: <Loader2Icon className="animate-spin" /> },
+  empty: { title: "No data", description: "There is nothing to show yet.", icon: <SearchXIcon /> },
+  error: { title: "Something went wrong", description: "Try again or check the request.", icon: <AlertTriangleIcon /> },
+  success: { title: "Ready", description: "Data loaded successfully.", icon: <CheckCircle2Icon /> },
+  info: { title: "Information", description: "Review the information below.", icon: <InfoIcon /> },
+}
+
+const toneClassName: Record<StateViewTone, string> = {
+  default: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  success: "text-[color:var(--aui-success,var(--primary))]",
+  warning: "text-[color:var(--aui-warning,var(--primary))]",
+  danger: "text-destructive",
+  info: "text-[color:var(--aui-info,var(--primary))]",
+}
+
+function StateView({
+  status = "empty",
+  tone,
+  variant = "card",
+  size = "default",
+  align = "center",
+  title,
+  description,
+  icon,
+  badge,
+  actions,
+  footer,
+  query,
+  retryLabel = "Retry",
+  onRetry,
+  clearLabel = "Clear",
+  onClear,
+  loadingVariant = "spinner",
+  progress,
+  slot = "state-view",
+  className,
+  children,
+  ...props
+}: StateViewProps) {
+  const content = defaults[status]
+  const resolvedTone = tone ?? (status === "error" ? "danger" : status === "success" ? "success" : status === "info" ? "info" : "default")
+  const compact = size === "compact" || variant === "inline"
+  const page = size === "page"
+  const skeleton = status === "loading" && loadingVariant === "skeleton"
+  const resolvedProgress = typeof progress === "number" ? Math.min(Math.max(progress, 0), 100) : undefined
+
+  return (
+    <div
+      data-slot={slot}
+      data-status={status}
+      data-tone={resolvedTone}
+      data-variant={variant}
+      data-size={size}
+      role={status === "error" ? "alert" : "status"}
+      aria-live={status === "error" ? "assertive" : "polite"}
+      aria-busy={status === "loading" || undefined}
+      className={cn(
+        "flex min-w-0 flex-col justify-center",
+        align === "center" ? "items-center text-center" : "items-start text-left",
+        variant === "card" && "rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-shadow-xs))]",
+        variant === "inline" && "rounded-[var(--radius-md)] border border-border/70 bg-muted/20",
+        compact ? "gap-2 p-4" : page ? "min-h-72 gap-4 p-10" : "min-h-52 gap-3 p-8",
+        className
+      )}
+      {...props}
+    >
+      {skeleton ? (
+        <div data-slot="state-view-skeleton" className="grid w-full max-w-sm gap-3" aria-hidden="true">
+          <div className="h-4 w-2/5 animate-pulse rounded bg-muted" />
+          <div className="h-20 w-full animate-pulse rounded-[var(--radius-lg)] bg-muted/70" />
+        </div>
+      ) : (
+        <div
+          data-slot="state-view-icon"
+          className={cn(
+            "flex shrink-0 items-center justify-center rounded-full border border-border/70 bg-muted/45 [&_svg]:size-5",
+            toneClassName[resolvedTone],
+            compact ? "size-9" : "size-12"
+          )}
+        >
+          {icon ?? content.icon}
+        </div>
+      )}
+
+      <div data-slot="state-view-content" className="grid max-w-md gap-1">
+        <div className={cn("flex flex-wrap items-center gap-2", align === "center" && "justify-center")}>
+          {(title ?? content.title) ? <div data-slot="state-view-title" className={cn("font-semibold tracking-tight text-foreground", compact ? "text-sm" : "text-base")}>{title ?? content.title}</div> : null}
+          {badge}
+        </div>
+        {(description ?? content.description) ? <p data-slot="state-view-description" className="text-sm leading-6 text-muted-foreground">{description ?? content.description}</p> : null}
+      </div>
+
+      {query ? <div data-slot="state-view-query" className="max-w-full rounded-md border border-border/70 bg-muted/45 px-2.5 py-1 text-sm text-muted-foreground">{query}</div> : null}
+      {children ? <div data-slot="state-view-body" className="w-full">{children}</div> : null}
+
+      {status === "loading" && loadingVariant === "progress" && resolvedProgress !== undefined ? (
+        <div data-slot="state-view-progress" className="h-2 w-full max-w-xs overflow-hidden rounded-full bg-muted/80" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={resolvedProgress}>
+          <div className="h-full rounded-full bg-primary transition-[width]" style={{ width: `${resolvedProgress}%` }} />
+        </div>
+      ) : null}
+
+      {(actions || onRetry || onClear) ? (
+        <div data-slot="state-view-actions" className={cn("flex flex-wrap gap-2", align === "center" && "justify-center")}>
+          {onRetry ? <Button type="button" size="sm" variant={status === "error" ? "default" : "outline"} onClick={onRetry}>{retryLabel}</Button> : null}
+          {onClear ? <Button type="button" size="sm" variant="ghost" onClick={onClear}><XIcon data-icon="inline-start" />{clearLabel}</Button> : null}
+          {actions}
+        </div>
+      ) : null}
+      {footer ? <div data-slot="state-view-footer" className="w-full">{footer}</div> : null}
+    </div>
+  )
+}
+
+export { StateView }

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

@@ -1,4 +1,6 @@
-export * from "./app-header"
-export * from "./app-sidebar"
+export * from "./workspace-header"
+export * from "./sidebar"
 export * from "./breadcrumbs"
 export * from "./section"
+export * from "./sidebar-context"
+export * from "./workspace-layout"

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

@@ -1,3 +1,6 @@
-export * from "./app-sidebar"
+export * from "./sidebar"
+export * from "./workspace-header"
 export * from "./breadcrumbs"
 export * from "./section"
+export * from "./sidebar-context"
+export * from "./workspace-layout"

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

@@ -2,19 +2,61 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type SectionProps = React.ComponentProps<"section"> & {
+export type SectionProps = React.ComponentProps<"section"> & {
   title?: React.ReactNode
   description?: React.ReactNode
   actions?: React.ReactNode
-  padded?: boolean
-  bordered?: boolean
-}
-
-function Section({ title, description, actions, padded = true, bordered = false, className, children, ...props }: SectionProps) {
-  return (
-    <section data-slot="section" className={cn("grid gap-4", bordered && "rounded-lg border bg-card", padded && bordered && "p-4", className)} {...props}>
-      {(title || description || actions) && (
-        <div data-slot="section-header" className="flex flex-wrap items-start justify-between gap-3">
+  padded?: boolean
+  bordered?: boolean
+  variant?: "plain" | "panel"
+  density?: "compact" | "default" | "comfortable"
+  headerClassName?: string
+  bodyClassName?: string
+}
+
+const sectionDensityClassName = {
+  compact: "gap-2",
+  default: "gap-4",
+  comfortable: "gap-6",
+}
+
+const sectionPaddingClassName = {
+  compact: "p-3",
+  default: "p-4",
+  comfortable: "p-6",
+}
+
+function Section({
+  title,
+  description,
+  actions,
+  padded = true,
+  bordered = false,
+  variant = bordered ? "panel" : "plain",
+  density = "default",
+  headerClassName,
+  bodyClassName,
+  className,
+  children,
+  ...props
+}: SectionProps) {
+  const panel = variant === "panel"
+  return (
+    <section
+      data-slot="section"
+      data-variant={variant}
+      data-density={density}
+      className={cn(
+        "grid min-w-0",
+        sectionDensityClassName[density],
+        panel && "rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-shadow-xs))]",
+        padded && panel && sectionPaddingClassName[density],
+        className
+      )}
+      {...props}
+    >
+      {(title || description || actions) && (
+        <div data-slot="section-header" className={cn("flex flex-wrap items-start justify-between gap-3", headerClassName)}>
           <div className="grid gap-1">
             {title && <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>}
             {description && <p className="text-sm text-muted-foreground">{description}</p>}
@@ -22,7 +64,7 @@ function Section({ title, description, actions, padded = true, bordered = false,
           {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
         </div>
       )}
-      <div data-slot="section-content">{children}</div>
+      <div data-slot="section-content" className={bodyClassName}>{children}</div>
     </section>
   )
 }
@@ -54,19 +96,29 @@ function Toolbar({ title, description, filters, actions, className, children, ..
   )
 }
 
-export type SplitLayoutProps = React.ComponentProps<"div"> & {
+export type SplitLayoutProps = React.ComponentProps<"div"> & {
   aside: React.ReactNode
   asidePosition?: "start" | "end"
   asideClassName?: string
-  contentClassName?: string
-}
-
-function SplitLayout({ aside, asidePosition = "end", asideClassName, contentClassName, className, children, ...props }: SplitLayoutProps) {
+  contentClassName?: string
+  asideWidth?: React.CSSProperties["width"]
+}
+
+function SplitLayout({ aside, asidePosition = "end", asideClassName, contentClassName, asideWidth = "20rem", className, children, style, ...props }: SplitLayoutProps) {
   const asideNode = <aside data-slot="split-layout-aside" className={cn("min-w-0", asideClassName)}>{aside}</aside>
   const contentNode = <main data-slot="split-layout-content" className={cn("min-w-0", contentClassName)}>{children}</main>
 
   return (
-    <div data-slot="split-layout" className={cn("grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]", asidePosition === "start" && "lg:grid-cols-[320px_minmax(0,1fr)]", className)} {...props}>
+    <div
+      data-slot="split-layout"
+      className={cn(
+        "grid gap-4 lg:grid-cols-[minmax(0,1fr)_var(--split-aside-width)]",
+        asidePosition === "start" && "lg:grid-cols-[var(--split-aside-width)_minmax(0,1fr)]",
+        className
+      )}
+      style={{ "--split-aside-width": asideWidth, ...style } as React.CSSProperties}
+      {...props}
+    >
       {asidePosition === "start" ? asideNode : contentNode}
       {asidePosition === "start" ? contentNode : asideNode}
     </div>

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

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { MenuIcon, PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { useIsMobile } from "@/hooks/use-is-mobile"
+
+export type SidebarContextValue = {
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
+  toggleCollapsed: () => void
+  mobileOpen: boolean
+  setMobileOpen: (open: boolean) => void
+  toggleMobile: () => void
+}
+
+export type SidebarProviderProps = React.ComponentProps<"div"> & {
+  collapsed?: boolean
+  defaultCollapsed?: boolean
+  onCollapsedChange?: (collapsed: boolean) => void
+  mobileOpen?: boolean
+  defaultMobileOpen?: boolean
+  onMobileOpenChange?: (open: boolean) => void
+}
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null)
+
+function SidebarProvider({
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  mobileOpen: mobileOpenProp,
+  defaultMobileOpen = false,
+  onMobileOpenChange,
+  children,
+  className,
+  ...props
+}: SidebarProviderProps) {
+  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed)
+  const [internalMobileOpen, setInternalMobileOpen] = React.useState(defaultMobileOpen)
+  const collapsed = collapsedProp ?? internalCollapsed
+  const mobileOpen = mobileOpenProp ?? internalMobileOpen
+
+  const setCollapsed = React.useCallback((next: boolean) => {
+    if (collapsedProp === undefined) setInternalCollapsed(next)
+    onCollapsedChange?.(next)
+  }, [collapsedProp, onCollapsedChange])
+
+  const setMobileOpen = React.useCallback((next: boolean) => {
+    if (mobileOpenProp === undefined) setInternalMobileOpen(next)
+    onMobileOpenChange?.(next)
+  }, [mobileOpenProp, onMobileOpenChange])
+
+  const value = React.useMemo<SidebarContextValue>(() => ({
+    collapsed,
+    setCollapsed,
+    toggleCollapsed: () => setCollapsed(!collapsed),
+    mobileOpen,
+    setMobileOpen,
+    toggleMobile: () => setMobileOpen(!mobileOpen),
+  }), [collapsed, mobileOpen, setCollapsed, setMobileOpen])
+
+  return (
+    <SidebarContext.Provider value={value}>
+      <div data-slot="sidebar-provider" className={className ?? "contents"} {...props}>{children}</div>
+    </SidebarContext.Provider>
+  )
+}
+
+function useSidebar(optional?: false): SidebarContextValue
+function useSidebar(optional: true): SidebarContextValue | null
+function useSidebar(optional = false) {
+  const context = React.useContext(SidebarContext)
+  if (!context && !optional) {
+    throw new Error("useSidebar must be used within SidebarProvider")
+  }
+  return context
+}
+
+export type SidebarTriggerProps = Omit<ButtonProps, "onClick"> & {
+  breakpoint?: number
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+function SidebarTrigger({ breakpoint = 1024, onClick, children, ...props }: SidebarTriggerProps) {
+  const sidebar = useSidebar()
+  const mobile = useIsMobile(breakpoint)
+  const label = mobile
+    ? sidebar.mobileOpen ? "Close navigation" : "Open navigation"
+    : sidebar.collapsed ? "Expand navigation" : "Collapse navigation"
+  const icon = mobile
+    ? <MenuIcon aria-hidden="true" />
+    : sidebar.collapsed
+      ? <PanelLeftOpenIcon aria-hidden="true" />
+      : <PanelLeftCloseIcon aria-hidden="true" />
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      aria-expanded={mobile ? sidebar.mobileOpen : !sidebar.collapsed}
+      data-slot="sidebar-trigger"
+      onClick={(event) => {
+        if (mobile) sidebar.toggleMobile()
+        else sidebar.toggleCollapsed()
+        onClick?.(event)
+      }}
+      {...props}
+    >
+      {children ?? icon}
+    </Button>
+  )
+}
+
+export { SidebarProvider, SidebarTrigger, useSidebar }