tembro 2.0.3 → 2.0.5

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

@@ -13,6 +13,7 @@ export type DialogOverlayProps = DialogPrimitive.Backdrop.Props
 export type DialogPopupProps = DialogPrimitive.Popup.Props & {
   showCloseButton?: boolean
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "full"
+  surface?: "default" | "plain"
 }
 export type DialogHeaderProps = React.ComponentProps<"div">
 export type DialogFooterProps = React.ComponentProps<"div"> & {
@@ -58,6 +59,7 @@ function DialogContent({
   children,
   showCloseButton = true,
   size = "md",
+  surface = "default",
   ...props
 }: DialogPopupProps) {
   return (
@@ -66,8 +68,10 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         data-size={size}
+        data-surface={surface}
+        role="dialog"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 rounded-[var(--radius-3xl)] border p-6 text-sm text-popover-foreground backdrop-blur duration-100 outline-none data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-[size=full]:grid-rows-[auto_1fr] 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",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-hidden rounded-[var(--radius-3xl)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-6 text-sm text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_24px_70px_rgba(15,23,42,0.22))] backdrop-blur duration-100 outline-none data-[surface=plain]:overflow-visible data-[surface=plain]:border-transparent data-[surface=plain]:bg-transparent data-[surface=plain]:p-0 data-[surface=plain]:shadow-none data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-[size=full]:grid-rows-[auto_minmax(0,1fr)] 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}
@@ -77,11 +81,11 @@ function DialogContent({
           <DialogPrimitive.Close
             data-slot="dialog-close"
             render={
-        <Button
-          variant="ghost"
-          className="absolute top-3 right-3 rounded-full border border-transparent hover:border-border/50 hover:bg-muted/50"
-          size="icon-sm"
-        />
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3 rounded-full border border-transparent hover:border-border/50 hover:bg-muted/50"
+                size="icon-sm"
+              />
             }
           >
             <XIcon />
@@ -110,10 +114,10 @@ function DialogFooter({
   ...props
 }: DialogFooterProps) {
   return (
-        <div
+    <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-[var(--radius-3xl)] border-t p-5 sm:flex-row sm:justify-end",
+        "-mx-6 -mb-6 flex flex-col-reverse gap-2 border-t border-border/70 bg-muted/20 p-5 sm:flex-row sm:justify-end",
         className
       )}
       {...props}

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

@@ -17,6 +17,7 @@ export type DropdownMenuLabelProps = React.ComponentProps<"div"> & { inset?: boo
 export type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
   inset?: boolean
   variant?: "default" | "destructive"
+  closeOnSelect?: boolean
 }
 export type DropdownMenuSubmenuProps = MenuPrimitive.SubmenuRoot.Props
 export type DropdownMenuSubmenuTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {
@@ -25,13 +26,19 @@ export type DropdownMenuSubmenuTriggerProps = MenuPrimitive.SubmenuTrigger.Props
 export type DropdownMenuSubmenuContentProps = React.ComponentProps<typeof DropdownMenuContent>
 export type DropdownMenuCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & {
   inset?: boolean
+  closeOnSelect?: boolean
 }
 export type DropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props
 export type DropdownMenuRadioItemProps = MenuPrimitive.RadioItem.Props & {
   inset?: boolean
+  closeOnSelect?: boolean
 }
 export type DropdownMenuSeparatorProps = MenuPrimitive.Separator.Props
 export type DropdownMenuShortcutProps = React.ComponentProps<"span">
+export type DropdownMenuItemDescriptionProps = React.ComponentProps<"span">
+
+const menuItemClassName =
+  "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm text-popover-foreground outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:border-[color:color-mix(in_oklch,var(--destructive),transparent_70%)] data-[variant=destructive]:data-[highlighted]:bg-[color:color-mix(in_oklch,var(--destructive),transparent_90%)] data-[variant=destructive]:data-[highlighted]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -42,6 +49,11 @@ function DropdownMenuPortal({ ...props }: DropdownMenuPortalProps) {
 }
 
 function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
+  if (!("render" in props) && React.isValidElement(props.children)) {
+    const { children, ...rest } = props
+    return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" render={children} {...rest} />
+  }
+
   return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 }
 
@@ -64,7 +76,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-2 text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-2 text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -98,21 +110,30 @@ function DropdownMenuItem({
   className,
   inset,
   variant = "default",
+  closeOnSelect = true,
+  onSelect,
   ...props
 }: DropdownMenuItemProps) {
-  return (
-    <MenuPrimitive.Item
+  return (
+    <MenuPrimitive.Item
       data-slot="dropdown-menu-item"
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item data-inset:pl-8",
+        menuItemClassName,
         className
       )}
+      onSelect={(event) => {
+        if (!closeOnSelect) {
+          event.preventDefault()
+        }
+        onSelect?.(event)
+      }}
       {...props}
-    />
-  )
-}
+    />
+  )
+}
 
 function DropdownMenuSub({ ...props }: DropdownMenuSubmenuProps) {
   return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
@@ -129,13 +150,14 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item data-inset:pl-8",
+        menuItemClassName,
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <ChevronRightIcon className="ml-auto text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground" />
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -166,19 +188,28 @@ function DropdownMenuCheckboxItem({
   children,
   checked,
   inset,
+  closeOnSelect = true,
+  onSelect,
   ...props
 }: DropdownMenuCheckboxItemProps) {
-  return (
-    <MenuPrimitive.CheckboxItem
+  return (
+    <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium",
+        menuItemClassName,
         className
       )}
-      checked={checked}
-      {...props}
-    >
+      checked={checked}
+      onSelect={(event) => {
+        if (!closeOnSelect) {
+          event.preventDefault()
+        }
+        onSelect?.(event)
+      }}
+      {...props}
+    >
       <span
         className="pointer-events-none absolute right-2 flex items-center justify-center"
         data-slot="dropdown-menu-checkbox-item-indicator"
@@ -206,18 +237,27 @@ function DropdownMenuRadioItem({
   className,
   children,
   inset,
+  closeOnSelect = true,
+  onSelect,
   ...props
 }: DropdownMenuRadioItemProps) {
-  return (
-    <MenuPrimitive.RadioItem
+  return (
+    <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item pr-9 data-inset:pl-8 data-[checked]:bg-muted/70 data-[checked]:font-medium",
+        menuItemClassName,
         className
       )}
-      {...props}
-    >
+      onSelect={(event) => {
+        if (!closeOnSelect) {
+          event.preventDefault()
+        }
+        onSelect?.(event)
+      }}
+      {...props}
+    >
       <span
         className="pointer-events-none absolute right-2 flex items-center justify-center"
         data-slot="dropdown-menu-radio-item-indicator"
@@ -252,14 +292,27 @@ function DropdownMenuShortcut({
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "ml-auto text-[11px] tracking-[0.14em] text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+      className={cn(
+        "ml-auto rounded bg-muted/70 px-1.5 py-0.5 text-[11px] font-medium tracking-[0.08em] text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground",
         className
       )}
       {...props}
     />
-  )
-}
+  )
+}
+
+function DropdownMenuItemDescription({
+  className,
+  ...props
+}: DropdownMenuItemDescriptionProps) {
+  return (
+    <span
+      data-slot="dropdown-menu-item-description"
+      className={cn("block text-xs leading-5 text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-foreground/70", className)}
+      {...props}
+    />
+  )
+}
 
 export {
   DropdownMenu,
@@ -271,10 +324,11 @@ export {
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuItemDescription,
+  DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
 }

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

@@ -30,28 +30,17 @@ export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "command-bar", registryName: "command-bar", surface: "standalone" },
   { slug: "quantity-stepper", registryName: "quantity-stepper", surface: "standalone" },
   { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
-  { slug: "repeater-field", registryName: "repeater-field", surface: "standalone" },
-  { slug: "empty-search-state", registryName: "empty-search-state", surface: "standalone" },
   { slug: "avatar", registryName: "avatar", surface: "standalone" },
   { slug: "code-block", registryName: "code-block", surface: "standalone" },
   { slug: "data-state", registryName: "data-state", surface: "standalone" },
-  { slug: "descriptions", registryName: "descriptions", surface: "standalone" },
-  { slug: "keyboard-shortcut", registryName: "keyboard-shortcut", surface: "standalone" },
-  { slug: "key-value-card", registryName: "key-value-card", surface: "standalone" },
   { slug: "kanban", registryName: "kanban", surface: "standalone" },
   { slug: "list", registryName: "list", surface: "standalone" },
   { slug: "property-grid", registryName: "property-grid", surface: "standalone" },
   { slug: "statistic", registryName: "statistic", surface: "standalone" },
-  { slug: "tag-list", registryName: "tag-list", surface: "standalone" },
   { slug: "tree-view", registryName: "tree-view", surface: "standalone" },
-  { slug: "skeleton-table", registryName: "skeleton-table", surface: "standalone" },
-  { slug: "skeleton-form", registryName: "skeleton-form", surface: "standalone" },
   { slug: "copy-button", registryName: "copy-button", surface: "standalone" },
-  { slug: "copy-field", registryName: "copy-field", surface: "standalone" },
   { slug: "section", registryName: "section", surface: "standalone" },
-  { slug: "stack", registryName: "stack", surface: "standalone" },
   { slug: "sticky-footer-bar", registryName: "sticky-footer-bar", surface: "standalone" },
-  { slug: "affix", registryName: "affix", surface: "standalone" },
   { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "standalone" },
   { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "standalone" },
   { slug: "menubar", registryName: "menubar", surface: "standalone" },
@@ -61,14 +50,9 @@ export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "tour", registryName: "tour", surface: "standalone" },
   { slug: "qr-code", registryName: "qr-code", surface: "standalone" },
   { slug: "tag", registryName: "tag", surface: "standalone" },
-  { slug: "aspect-ratio", registryName: "aspect-ratio", surface: "standalone" },
   { slug: "carousel", registryName: "carousel", surface: "standalone" },
-  { slug: "float-button", registryName: "float-button", surface: "standalone" },
   { slug: "typography", registryName: "typography", surface: "standalone" },
-  { slug: "watermark", registryName: "watermark", surface: "standalone" },
-  { slug: "cascader", registryName: "cascader", surface: "standalone" },
   { slug: "json-input", registryName: "json-input", surface: "standalone" },
-  { slug: "mention-input", registryName: "mention-input", surface: "standalone" },
   { slug: "time-picker", registryName: "time-picker", surface: "standalone" },
 ] as const
 

package/packages/cli/vendor/src/showcase/component-api-schema.ts

@@ -133,8 +133,8 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { name: "loadingVariant", type: "'skeleton' | 'state'", defaultValue: "'skeleton'", description: "Choose between skeleton rows or a dedicated loading state block." },
       { name: "loadingState", type: "LoadingStateProps", defaultValue: "-", description: "Customizes the loading state when `loadingVariant=\"state\"`." },
       { name: "isError", type: "boolean", defaultValue: "false", description: "Switches the grid into an error fallback state." },
-      { name: "emptyState", type: "EmptyStateProps", defaultValue: "-", description: "Fallback when there are no rows." },
-      { name: "errorState", type: "EmptyStateProps", defaultValue: "-", description: "Fallback when the data request fails." },
+      { name: "emptyState", type: "Omit<DataStateProps, \"status\">", defaultValue: "-", description: "Fallback when there are no rows." },
+      { name: "errorState", type: "Omit<DataStateProps, \"status\">", defaultValue: "-", description: "Fallback when the data request fails." },
       { name: "skeletonRows", type: "number", defaultValue: "6", description: "How many skeleton rows to render during loading." },
       { name: "cellFallback", type: "ReactNode", defaultValue: "\"-\"", description: "Value rendered when a cell returns empty content." },
     ],

package/packages/cli/vendor/src/showcase/create-demo.tsx

@@ -63,7 +63,7 @@ function createCodeSnippet(definition: ShowcaseDemoDefinition) {
 }
 
 const exactCodeSnippets: Record<string, string> = {
-  "search-input": `import { SearchInput } from "@/components/search-input"
+  "search-input": `import { SearchInput } from "tembro"
 
 export function Demo() {
   return (
@@ -76,23 +76,22 @@ export function Demo() {
     />
   )
 }`,
-  "password-input": `import { PasswordInput } from "@/components/password-input"
+  "password-input": `import { PasswordInput } from "tembro"
 
 export function Demo() {
   return <PasswordInput placeholder="Enter secure token" autoComplete="current-password" />
 }`,
-  "clearable-input": `import { ClearableInput } from "@/components/clearable-input"
-
-export function Demo() {
-  return <ClearableInput defaultValue="Azamat UI" placeholder="Search customer" />
-}`,
-  "tag-input": `import { TagInput } from "@/components/tag-input"
+  "clearable-input": `import { Input } from "tembro"
+
+export function Demo() {
+  return <Input defaultValue="Azamat UI" placeholder="Search customer" clearable />
+}`,
+  "tag-input": `import { TagInput } from "tembro"
 
 export function Demo() {
   return <TagInput defaultValue={["dashboard", "billing"]} placeholder="Add tag" />
 }`,
-  "action-menu": `import { ActionMenu } from "@/components/action-menu"
-import { Button } from "@/components/button"
+  "action-menu": `import { ActionMenu, Button } from "tembro"
 
 export function Demo() {
   return (
@@ -107,7 +106,7 @@ export function Demo() {
     />
   )
 }`,
-  "button-group": `import { ButtonGroup } from "@/components/button-group"
+  "button-group": `import { ButtonGroup } from "tembro"
 
 export function Demo() {
   return (
@@ -120,7 +119,7 @@ export function Demo() {
     />
   )
 }`,
-  "quick-action-grid": `import { QuickActionGrid } from "@/components/quick-action-grid"
+  "quick-action-grid": `import { QuickActionGrid } from "tembro"
 
 export function Demo() {
   return (
@@ -134,22 +133,23 @@ export function Demo() {
     />
   )
 }`,
-  "filter-bar": `import { FilterBar } from "@/components/filter-bar"
-import { SearchInput } from "@/components/search-input"
-import { Button } from "@/components/button"
+  "filter-bar": `import { Button, FilterBar, SearchInput } from "tembro"
 
 export function Demo() {
   return (
-    <FilterBar
-      search={<SearchInput value="" placeholder="Search rows..." readOnly />}
-      activeCount={2}
-      filters={<Button variant="outline">Status</Button>}
-      actions={<Button>Export</Button>}
-      onReset={() => undefined}
-    />
-  )
-}`,
-  "description-list": `import { DescriptionList } from "@/components/description-list"
+    <FilterBar
+      search={<SearchInput value="" placeholder="Search rows..." readOnly />}
+      chips={[
+        { key: "status", label: "Status", value: "Active", tone: "success" },
+        { key: "owner", label: "Owner", value: "Azamat" },
+      ]}
+      filters={<Button variant="outline">Status</Button>}
+      actions={<Button>Export</Button>}
+      onReset={() => undefined}
+    />
+  )
+}`,
+  "description-list": `import { DescriptionList } from "tembro"
 
 export function Demo() {
   return (
@@ -163,22 +163,7 @@ export function Demo() {
     />
   )
 }`,
-  "entity-card": `import { EntityCard } from "@/components/entity-card"
-import { Badge } from "@/components/badge"
-import { Button } from "@/components/button"
-
-export function Demo() {
-  return (
-    <EntityCard
-      title="Azamat Workspace"
-      description="Admin console and live dashboard route."
-      status={<Badge variant="secondary">Live</Badge>}
-      meta="Updated 8 min ago"
-      actions={<Button size="sm" variant="outline">Open</Button>}
-    />
-  )
-}`,
-  "stat-card": `import { StatCard } from "@/components/stat-card"
+  "stat-card": `import { StatCard } from "tembro"
 
 export function Demo() {
   return (
@@ -191,12 +176,12 @@ export function Demo() {
     />
   )
 }`,
-  "pagination": `import { Pagination } from "@/components/pagination"
+  "pagination": `import { Pagination } from "tembro"
 
 export function Demo() {
   return <Pagination page={3} pageCount={9} onPageChange={(page) => console.log(page)} />
 }`,
-  "dialog-actions": `import { DialogActionButton, DialogActions } from "@/components/dialog-actions"
+  "dialog-actions": `import { DialogActionButton, DialogActions } from "tembro"
 
 export function Demo() {
   return (
@@ -207,12 +192,12 @@ export function Demo() {
     </DialogActions>
   )
 }`,
-  "file-dropzone": `import { FileDropzone } from "@/components/file-dropzone"
+  "file-dropzone": `import { FileDropzone } from "tembro"
 
 export function Demo() {
   return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
 }`,
-  "stepper": `import { Stepper } from "@/components/stepper"
+  "stepper": `import { Stepper } from "tembro"
 
 export function Demo() {
   return (
@@ -231,7 +216,7 @@ export function Demo() {
 
 function createKindSnippet(definition: ShowcaseDemoDefinition) {
   const importName = definition.importName ?? definition.component
-  const importPath = `@/components/${definition.slug}`
+  const importPath = "tembro"
 
   if (definition.kind === "data-table") {
     return `import { ${importName} } from "${importPath}"