{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "opentui/welcome-screen",
  "title": "Welcome Screen",
  "description": "Two-panel welcome dashboard with titled border, logo, greeting, and sections",
  "dependencies": [
    "@opentui/react"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/opentui/use-theme.json"
  ],
  "files": [
    {
      "path": "registry/opentui/ui/welcome-screen.tsx",
      "content": "/* @jsxImportSource @opentui/react */\nimport React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/hooks/use-theme\";\nimport type { BorderStyle } from \"@/components/ui/types\";\n\nexport interface WelcomeScreenProps {\n  appName: string;\n  appNameColor?: string;\n  version?: string;\n  borderColor?: string;\n  borderStyle?: BorderStyle;\n  leftWidth?: number;\n  children: ReactNode;\n}\n\nexport interface WelcomeScreenGreetingProps {\n  children: ReactNode;\n  bold?: boolean;\n  align?: \"left\" | \"center\";\n  color?: string;\n}\n\nexport interface WelcomeScreenLogoProps {\n  children: ReactNode;\n  align?: \"left\" | \"center\";\n}\n\nexport interface WelcomeScreenMetaProps {\n  items: string[];\n  separator?: string;\n  align?: \"left\" | \"center\";\n  dim?: boolean;\n  color?: string;\n  stack?: boolean;\n}\n\nexport interface WelcomeScreenSectionProps {\n  title: string;\n  titleColor?: string;\n  titleBold?: boolean;\n  children: ReactNode;\n}\n\nconst WelcomeScreenLeft = ({ children }: { children: ReactNode }) => children;\nWelcomeScreenLeft.displayName = \"WelcomeScreen.Left\";\n\nconst WelcomeScreenRight = ({ children }: { children: ReactNode }) => children;\nWelcomeScreenRight.displayName = \"WelcomeScreen.Right\";\n\nconst WelcomeScreenGreeting = ({\n  children,\n  bold: boldText = true,\n  color,\n}: WelcomeScreenGreetingProps) => (\n  <box paddingBottom={1}>\n    <text fg={color}>{boldText ? <b>{children}</b> : children}</text>\n  </box>\n);\n\nconst WelcomeScreenLogo = ({\n  children,\n  align = \"left\",\n}: WelcomeScreenLogoProps) => (\n  <box\n    flexDirection=\"column\"\n    alignItems={align === \"center\" ? \"center\" : \"flex-start\"}\n    paddingTop={1}\n    paddingBottom={1}\n  >\n    {typeof children === \"string\"\n      ? children.split(\"\\n\").map((line, i) => <text key={i}>{line}</text>)\n      : children}\n  </box>\n);\n\nconst WelcomeScreenMeta = ({\n  items,\n  separator = \" · \",\n  align = \"center\",\n  dim = false,\n  color,\n  stack = false,\n}: WelcomeScreenMetaProps) => {\n  if (stack) {\n    return (\n      <box\n        flexDirection=\"column\"\n        alignItems={align === \"center\" ? \"center\" : \"flex-start\"}\n        paddingTop={1}\n      >\n        {items.map((item, i) => (\n          <text key={i} fg={dim ? \"#666\" : color}>\n            {item}\n          </text>\n        ))}\n      </box>\n    );\n  }\n\n  return (\n    <box\n      flexDirection=\"row\"\n      flexWrap=\"wrap\"\n      justifyContent={align === \"center\" ? \"center\" : \"flex-start\"}\n      paddingTop={1}\n    >\n      {items.map((item, i) => (\n        <text\n          key={i}\n          fg={dim ? \"#666\" : color}\n        >{`${item}${i < items.length - 1 ? separator : \"\"}`}</text>\n      ))}\n    </box>\n  );\n};\n\nconst WelcomeScreenSection = ({\n  title,\n  titleColor,\n  titleBold = true,\n  children,\n}: WelcomeScreenSectionProps) => {\n  const theme = useTheme();\n  return (\n    <box flexDirection=\"column\" paddingBottom={1}>\n      <text fg={titleColor ?? theme.colors.primary}>\n        {titleBold ? <b>{title}</b> : title}\n      </text>\n      <text>{children}</text>\n    </box>\n  );\n};\n\nconst WelcomeScreenRoot = ({\n  appName,\n  appNameColor,\n  version,\n  borderColor,\n  borderStyle = \"single\",\n  leftWidth = 26,\n  children,\n}: WelcomeScreenProps) => {\n  const theme = useTheme();\n  const resolvedBorderColor = borderColor ?? theme.colors.border;\n  const resolvedAppNameColor = appNameColor ?? theme.colors.primary;\n\n  const childArray = React.Children.toArray(children);\n  const leftChildren = childArray.filter(\n    (c) =>\n      React.isValidElement(c) &&\n      (\n        c.type as {\n          displayName?: string;\n        }\n      ).displayName === \"WelcomeScreen.Left\"\n  );\n  const rightChildren = childArray.filter(\n    (c) =>\n      React.isValidElement(c) &&\n      (\n        c.type as {\n          displayName?: string;\n        }\n      ).displayName === \"WelcomeScreen.Right\"\n  );\n\n  const leftContent = leftChildren.flatMap((c) =>\n    React.isValidElement(c)\n      ? React.Children.toArray(\n          (\n            c.props as {\n              children?: React.ReactNode;\n            }\n          ).children\n        )\n      : []\n  );\n  const rightContent = rightChildren.flatMap((c) =>\n    React.isValidElement(c)\n      ? React.Children.toArray(\n          (\n            c.props as {\n              children?: React.ReactNode;\n            }\n          ).children\n        )\n      : []\n  );\n\n  const titleStr = version ? `${appName} ${version}` : appName;\n\n  return (\n    <box flexDirection=\"column\">\n      <box flexDirection=\"row\">\n        <text fg={resolvedBorderColor}>{\"── \"}</text>\n        <text fg={resolvedAppNameColor}>\n          <b>{titleStr}</b>\n        </text>\n        <text fg={resolvedBorderColor}>{\" ─\"}</text>\n      </box>\n      <box\n        borderStyle={borderStyle}\n        borderColor={resolvedBorderColor}\n        borderTop={false}\n        flexDirection=\"row\"\n      >\n        <box\n          width={leftWidth}\n          flexDirection=\"column\"\n          paddingLeft={1}\n          paddingRight={1}\n          paddingTop={1}\n          paddingBottom={1}\n        >\n          {...leftContent}\n        </box>\n        <box width={1} flexDirection=\"column\" alignItems=\"center\">\n          <text fg={resolvedBorderColor}>│</text>\n        </box>\n        <box\n          flexGrow={1}\n          flexDirection=\"column\"\n          paddingLeft={1}\n          paddingRight={1}\n          paddingTop={1}\n          paddingBottom={1}\n        >\n          {...rightContent}\n        </box>\n      </box>\n    </box>\n  );\n};\n\nexport const WelcomeScreen = Object.assign(WelcomeScreenRoot, {\n  Greeting: WelcomeScreenGreeting,\n  Left: WelcomeScreenLeft,\n  Logo: WelcomeScreenLogo,\n  Meta: WelcomeScreenMeta,\n  Right: WelcomeScreenRight,\n  Section: WelcomeScreenSection,\n});\n",
      "type": "registry:ui",
      "target": "components/ui/welcome-screen.tsx"
    }
  ],
  "categories": [
    "templates"
  ],
  "type": "registry:ui"
}