{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "openlmis-workspace",
  "title": "Workspace",
  "description": "Page frame for an app screen: breadcrumbs, a heading with an icon, title and one-line description, header actions that share the width when the header stacks, a content area, and a bar stuck to the bottom for page-wide actions such as Save.",
  "dependencies": [
    "lucide-react@^1",
    "@base-ui/react@^1"
  ],
  "registryDependencies": [
    "button",
    "utils",
    "https://registry.soldevelo.com/r/openlmis-page-breadcrumbs.json"
  ],
  "files": [
    {
      "path": "registry/blocks/openlmis/workspace/workspace.tsx",
      "content": "import type { ReactNode, Ref } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Page layout. Parts take only `children`, which keeps padding and heading scale equal across pages.\n\ntype WorkspaceProps = {\n  children: ReactNode\n}\n\ntype WorkspaceWidthProps = WorkspaceProps & {\n  /** `narrow` for a page of settings, which reads better as one short column. */\n  width?: \"default\" | \"narrow\"\n}\n\nconst MAX_WIDTH = { default: \"max-w-6xl\", narrow: \"max-w-4xl\" } as const\n\n// The host supplies the height; the content grows above the bottom action bar.\nexport function WorkspaceLayout({\n  children,\n  ref,\n}: WorkspaceProps & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div className=\"flex min-h-full w-full flex-1 flex-col\" ref={ref}>\n      {children}\n    </div>\n  )\n}\n\nexport function Workspace({\n  children,\n  width = \"default\",\n}: WorkspaceWidthProps) {\n  return (\n    <div\n      className={cn(\n        \"@container/main mx-auto flex w-full flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\",\n        MAX_WIDTH[width]\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function WorkspaceHeader({ children }: WorkspaceProps) {\n  return (\n    <div className=\"flex flex-col gap-3 @2xl/main:flex-row @2xl/main:items-start @2xl/main:justify-between\">\n      {children}\n    </div>\n  )\n}\n\n// With an icon, the text leaves room for it beside both lines; without one, it starts at the edge.\nexport function WorkspaceHeading({ children }: WorkspaceProps) {\n  return (\n    <div className=\"relative flex min-w-0 flex-col justify-center gap-1 has-data-[slot=workspace-icon]:min-h-10 has-data-[slot=workspace-icon]:ps-13\">\n      {children}\n    </div>\n  )\n}\n\nexport function WorkspaceIcon({ children }: WorkspaceProps) {\n  return (\n    <div\n      className=\"absolute inset-y-0 start-0 my-auto flex size-10 items-center justify-center rounded-lg border bg-card text-muted-foreground shadow-xs [&_svg]:size-5\"\n      data-slot=\"workspace-icon\"\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function WorkspaceTitle({ children }: WorkspaceProps) {\n  return (\n    <h1 className=\"text-xl leading-none font-semibold tracking-tight\">\n      {children}\n    </h1>\n  )\n}\n\nexport function WorkspaceDescription({ children }: WorkspaceProps) {\n  // One line at most, so every header keeps the same height; longer text is cut with an ellipsis.\n  return (\n    <p className=\"min-w-0 truncate text-sm text-muted-foreground\">{children}</p>\n  )\n}\n\n// Under a stacked header the actions share the full width; beside it they take their own.\nexport function WorkspaceActions({ children }: WorkspaceProps) {\n  return (\n    <div className=\"flex w-full shrink-0 flex-wrap items-center gap-2 *:flex-1 @2xl/main:w-auto @2xl/main:*:flex-none\">\n      {children}\n    </div>\n  )\n}\n\nexport function WorkspaceContent({ children }: WorkspaceProps) {\n  return <div className=\"flex flex-1 flex-col gap-4 lg:gap-6\">{children}</div>\n}\n\n// Place after Workspace inside WorkspaceLayout.\nexport function WorkspaceFooter({\n  children,\n  width = \"default\",\n}: WorkspaceWidthProps) {\n  return (\n    <div\n      className=\"sticky bottom-0 z-10 border-t bg-muted/80 backdrop-blur-sm\"\n      data-slot=\"workspace-footer\"\n    >\n      <div\n        className={cn(\n          \"mx-auto flex w-full items-center justify-end gap-2 px-4 py-3 lg:px-6\",\n          MAX_WIDTH[width]\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "components/blocks/openlmis/workspace.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "destructive": "oklch(0.577 0.245 27.325)",
      "destructive-foreground": "oklch(0.985 0 0)",
      "success": "oklch(0.596 0.145 163.225)",
      "success-foreground": "oklch(0.985 0 0)",
      "warning": "oklch(0.666 0.179 58.318)",
      "warning-foreground": "oklch(0.985 0 0)",
      "info": "oklch(0.55 0.13 237)",
      "info-foreground": "oklch(0.985 0 0)"
    },
    "dark": {
      "destructive": "oklch(0.704 0.191 22.216)",
      "destructive-foreground": "oklch(0.21 0.04 25)",
      "success": "oklch(0.696 0.17 162.48)",
      "success-foreground": "oklch(0.21 0.04 163)",
      "warning": "oklch(0.769 0.188 70.08)",
      "warning-foreground": "oklch(0.22 0.04 60)",
      "info": "oklch(0.7 0.14 237)",
      "info-foreground": "oklch(0.2 0.04 240)"
    }
  },
  "meta": {
    "project": "openlmis",
    "height": "512px"
  },
  "categories": [
    "layout"
  ],
  "type": "registry:block"
}