tembro 5.0.0 → 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/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 }

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

@@ -0,0 +1,67 @@
+"use client"
+
+import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar"
+
+import { cn } from "@/lib/utils"
+
+export type ToolbarProps = ToolbarPrimitive.Root.Props
+export type ToolbarGroupProps = ToolbarPrimitive.Group.Props
+export type ToolbarButtonProps = ToolbarPrimitive.Button.Props
+export type ToolbarLinkProps = ToolbarPrimitive.Link.Props
+export type ToolbarInputProps = ToolbarPrimitive.Input.Props
+export type ToolbarSeparatorProps = ToolbarPrimitive.Separator.Props
+
+function Toolbar({ className, orientation = "horizontal", ...props }: ToolbarProps) {
+  return (
+    <ToolbarPrimitive.Root
+      data-slot="toolbar"
+      orientation={orientation}
+      className={cn(
+        "flex min-w-0 items-center gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1 text-card-foreground shadow-xs",
+        orientation === "vertical" && "w-max flex-col items-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToolbarGroup({ className, ...props }: ToolbarGroupProps) {
+  return <ToolbarPrimitive.Group data-slot="toolbar-group" className={cn("flex min-w-0 items-center gap-1", className)} {...props} />
+}
+
+function ToolbarButton({ className, ...props }: ToolbarButtonProps) {
+  return (
+    <ToolbarPrimitive.Button
+      data-slot="toolbar-button"
+      className={cn("inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-muted data-[pressed]:text-foreground [&_svg]:size-4 [&_svg]:shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ToolbarLink({ className, ...props }: ToolbarLinkProps) {
+  return (
+    <ToolbarPrimitive.Link
+      data-slot="toolbar-link"
+      className={cn("inline-flex h-8 items-center justify-center gap-1.5 rounded-[var(--radius-md)] px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", className)}
+      {...props}
+    />
+  )
+}
+
+function ToolbarInput({ className, ...props }: ToolbarInputProps) {
+  return (
+    <ToolbarPrimitive.Input
+      data-slot="toolbar-input"
+      className={cn("h-8 min-w-32 rounded-[var(--radius-md)] border border-input bg-background px-2.5 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring", className)}
+      {...props}
+    />
+  )
+}
+
+function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps) {
+  return <ToolbarPrimitive.Separator data-slot="toolbar-separator" className={cn("mx-1 h-5 w-px bg-border data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full", className)} {...props} />
+}
+
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator }

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

@@ -24,9 +24,12 @@ export * from './components/ui/segmented-control'
 export * from './components/ui/spinner'
 export * from './components/ui/tooltip'
 export * from './components/ui/kbd'
-export * from './components/ui/radio-group'
-export * from './components/ui/scroll-box'
-export * from './components/ui/right-click-menu'
+export * from './components/ui/radio-group'
+export * from './components/ui/scroll-box'
+export * from './components/ui/right-click-menu'
+export * from './components/ui/number-field'
+export * from './components/ui/toggle-group'
+export * from './components/ui/toolbar'
 
 // Reusable groups
 export * from './components/actions/public'

package/packages/cli/vendor/src/public-component-surface.ts

@@ -16,6 +16,9 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "checkbox", registryName: "checkbox", surface: "documented" },
   { slug: "switch", registryName: "switch", surface: "documented" },
   { slug: "radio-group", registryName: "radio-group", surface: "documented" },
+  { slug: "number-field", registryName: "number-field", surface: "documented" },
+  { slug: "toggle-group", registryName: "toggle-group", surface: "documented" },
+  { slug: "toolbar", registryName: "toolbar", surface: "documented" },
   { slug: "overlay", registryName: "dialog", surface: "documented" },
   { slug: "dropdown-menu", registryName: "dropdown-menu", surface: "documented" },
   { slug: "popover", registryName: "popover", surface: "documented" },

package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts

@@ -52,6 +52,8 @@ export const registryGroups: RegistryGroup[] = [
       component("kbd", "stable", "src/components/ui/kbd"),
       component("scroll-box", "stable", "src/components/ui/scroll-box"),
       component("right-click-menu", "stable", "src/components/ui/right-click-menu"),
+      component("toggle-group", "preview", "src/components/ui/toggle-group"),
+      component("toolbar", "preview", "src/components/ui/toolbar"),
       component("collapse", "preview", "src/components/ui/collapse"),
       component("command", "preview", "src/components/ui/command"),
       component("divider", "preview", "src/components/ui/divider"),
@@ -80,6 +82,7 @@ export const registryGroups: RegistryGroup[] = [
       component("inline-editable", "preview", "src/components/inputs/inline-editable.tsx"),
       component("json-input", "preview", "src/components/inputs/json-input.tsx"),
       component("time-picker", "preview", "src/components/inputs/time-picker.tsx"),
+      component("number-field", "preview", "src/components/ui/number-field"),
     ],
   },
   {
@@ -139,8 +142,7 @@ export const registryGroups: RegistryGroup[] = [
   {
     name: "feedback",
     components: [
-      component("loading-state", "stable", "src/components/feedback/loading-state.tsx"),
-      component("page-state", "preview", "src/components/feedback/page-state.tsx"),
+      component("state-view", "stable", "src/components/feedback/state-view.tsx"),
       component("alert", "preview", "src/components/feedback/alert.tsx"),
     ],
   },

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@5.0.0 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@6.0.0 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@5.0.0" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@6.0.0" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@5.0.0",
+          label: "tembro@6.0.0",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"

package/packages/cli/vendor/templates/showcase/src/showcase/sections/ComponentLivePreview.tsx

@@ -19,7 +19,7 @@ import { StatusLegend } from "@/components/display/status-legend"
 import { Tag, TagGroup } from "@/components/display/tag"
 import { Timeline } from "@/components/display/timeline"
 import { Alert } from "@/components/feedback/alert"
-import { LoadingState } from "@/components/feedback/loading-state"
+import { StateView } from "@/components/feedback/state-view"
 import { Pagination } from "@/components/navigation/pagination"
 import { EmptyState } from "@/components/patterns/empty-state"
 import { Badge } from "@/components/ui/badge"
@@ -283,7 +283,7 @@ function DirectComponentSurface({ group, component }: ComponentLivePreviewProps)
   if (group.name === "form") return <FormsSection />
   if (group.name === "display") return <DisplayPreview />
   if (group.name === "calendar" || group.name === "navigation") return group.name === "navigation" ? <Pagination page={2} pageCount={8} onPageChange={() => undefined} /> : <CalendarSection />
-  if (group.name === "feedback") return component.name === "alert" ? <Alert tone="success" title="Alert component" description="Rendered from feedback/alert." /> : <LoadingState label="LoadingState" description="Rendered from feedback/loading-state." />
+  if (group.name === "feedback") return component.name === "alert" ? <Alert tone="success" title="Alert component" description="Rendered from feedback/alert." /> : <StateView status="loading" title="StateView" description="Rendered from feedback/state-view." />
   if (group.name === "patterns") return <EmptyState title="EmptyState component" description="Rendered from patterns/empty-state." primaryAction={{ label: "Create item" }} secondaryAction={{ label: "Reset" }} />
   if (group.name === "wizard") return <WizardSection />
   if (group.name === "overlay") return <OverlaySection />

package/packages/cli/vendor/templates/showcase/src/showcase/sections/FormsSection.tsx

@@ -1,5 +1,5 @@
 import { ProgressCard } from "@/components/display/progress"
-import { LoadingState } from "@/components/feedback/loading-state"
+import { StateView } from "@/components/feedback/state-view"
 import { Rating } from "@/components/inputs/rating"
 import { RangeSlider, Slider } from "@/components/inputs/slider"
 import { Badge } from "@/components/ui/badge"
@@ -20,7 +20,7 @@ export function FormsSection() {
         </CardContent>
       </Card>
       <ProgressCard title="Form completeness" description="input, select, switch, textarea" value={86} tone="success" footer={<Badge label="forms" status="success" />} />
-      <LoadingState label="Loading state" description="Spinner/skeleton/progress state component." />
+      <StateView status="loading" title="Loading state" description="Spinner/skeleton/progress state component." />
     </div>
   )
 }

package/packages/cli/vendor/templates/styles/globals.css

@@ -1876,17 +1876,17 @@
   [data-slot="statistic-change"][data-trend="up"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }
   [data-slot="statistic-change"][data-trend="down"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
 
-  [data-slot="page-state"] {
+  [data-slot="state-view"] {
     border-color: var(--aui-card-border, var(--border));
     border-radius: var(--aui-radius-panel);
     background: var(--card);
     box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
-  [data-slot="page-state-icon"] { color: var(--muted-foreground); background: var(--aui-surface-muted); }
-  [data-slot="page-state"][data-tone="error"] [data-slot="page-state-icon"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
-  [data-slot="page-state"][data-tone="success"] [data-slot="page-state-icon"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }
-  [data-slot="page-state"][data-tone="info"] [data-slot="page-state-icon"] { color: var(--aui-info-fg); background: var(--aui-info-bg); }
+  [data-slot="state-view-icon"] { color: var(--muted-foreground); background: var(--aui-surface-muted); }
+  [data-slot="state-view"][data-tone="danger"] [data-slot="state-view-icon"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
+  [data-slot="state-view"][data-tone="success"] [data-slot="state-view-icon"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }
+  [data-slot="state-view"][data-tone="info"] [data-slot="state-view-icon"] { color: var(--aui-info-fg); background: var(--aui-info-bg); }
 
   [data-slot="file-upload-dropzone"],
   [data-slot="file-upload-item"] {