ui8kit 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui8kit",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "UI8Kit components registry for buildy-ui cli",
   "main": "index.js",
   "files": [

package/r/utility/blocks/hero-section.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://buildy.tw/schema/registry-item.json",
+  "name": "hero-section",
+  "type": "registry:block",
+  "description": "A hero section component for landing pages",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    {
+      "path": "utility/blocks/hero-section.js",
+      "content": "/**\r\n * A hero section component for landing pages\r\n */\r\nexport function HeroSection({ title, subtitle, children, className = \"\" }) {\r\n  return `\r\n    <section class=\"relative py-20 px-4 text-center ${className}\">\r\n      <div class=\"max-w-4xl mx-auto\">\r\n        ${title ? `<h1 class=\"text-4xl md:text-6xl font-bold mb-6\">${title}</h1>` : ''}\r\n        ${subtitle ? `<p class=\"text-xl text-muted-foreground mb-8\">${subtitle}</p>` : ''}\r\n        ${children || ''}\r\n      </div>\r\n    </section>\r\n  `\r\n}\r\n\r\nexport function HeroActions({ children, className = \"\" }) {\r\n  return `\r\n    <div class=\"flex flex-col sm:flex-row gap-4 justify-center ${className}\">\r\n      ${children || ''}\r\n    </div>\r\n  `\r\n} ",
+      "target": "blocks"
+    }
+  ]
+}

package/r/{components → utility/components}/article.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "article",
   "type": "registry:component",
+  "description": "Helper function for determining styles that the parser will be able to process",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/article.tsx",
+      "path": "utility/components/article.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype ElementType = \"article\" | \"div\" | \"li\" | \"section\";\n\n// Helper function for determining styles that the parser will be able to process\nfunction ArticleBase({\n  className,\n  ...props\n}: React.ComponentProps<\"article\">) {\n  return (\n    <article\n      data-slot=\"article\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-md border shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n// Main component with polymorphism support\ntype BaseProps<T extends ElementType = \"article\"> = {\n  as?: T;\n  className?: string;\n  children: React.ReactNode;\n} & React.ComponentPropsWithoutRef<T>;\n\nfunction Article<T extends ElementType = \"article\">({\n  as,\n  className,\n  children,\n  ...props\n}: BaseProps<T>) {\n  const Component = as || \"article\";\n\n  if (Component === \"article\") {\n    return (\n      <ArticleBase className={className} {...props}>\n        {children}\n      </ArticleBase>\n    );\n  }\n\n  return React.createElement(\n    Component,\n    {\n      \"data-slot\": \"article\",\n      className: cn(\"article\", className),\n      ...props\n    },\n    children\n  );\n}\n\nfunction ArticleHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      data-slot=\"article-header\"\n      className={cn(\n        \"flex flex-col gap-2 px-6 mt-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"article-title\"\n      className={cn(\n        \"text-2xl font-bold mb-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleMeta({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"article-meta\"\n      className={cn(\n        \"flex flex-wrap items-center gap-3 text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleTime({\n  className,\n  ...props\n}: React.ComponentProps<\"time\">) {\n  return (\n    <time\n      data-slot=\"article-time\"\n      className={cn(\n        \"text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleAuthor({\n  className,\n  ...props\n}: React.ComponentProps<\"address\">) {\n  return (\n    <address\n      data-slot=\"article-author\"\n      className={cn(\n        \"text-sm not-italic\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleFigure({\n  className,\n  ...props\n}: React.ComponentProps<\"figure\">) {\n  return (\n    <figure\n      data-slot=\"article-figure\"\n      className={cn(\n        \"overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleImage({\n  className,\n  ...props\n}: React.ComponentProps<\"img\">) {\n  return (\n    <img\n      data-slot=\"article-image\"\n      className={cn(\n        \"aspect-video w-full object-cover rounded-t-md\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleFigcaption({\n  className,\n  ...props\n}: React.ComponentProps<\"figcaption\">) {\n  return (\n    <figcaption\n      data-slot=\"article-figcaption\"\n      className={cn(\n        \"mt-2 text-center text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"article-content\"\n      className={cn(\n        \"max-w-none px-6 py-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleBlockquote({\n  className,\n  ...props\n}: React.ComponentProps<\"blockquote\">) {\n  return (\n    <blockquote\n      data-slot=\"article-blockquote\"\n      className={cn(\n        \"border-l-4 border-muted pl-4 italic\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"footer\">) {\n  return (\n    <footer\n      data-slot=\"article-footer\"\n      className={cn(\n        \"flex items-center justify-between px-6 py-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleTags({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"article-tags\"\n      className={cn(\n        \"flex flex-wrap gap-2\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleTag({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"article-tag\"\n      className={cn(\n        \"inline-flex items-center rounded-full border bg-muted px-2.5 py-0.5 text-xs font-semibold\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ArticleActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"article-actions\"\n      className={cn(\n        \"flex items-center gap-2\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nArticle.displayName = \"Article\"\n\nexport {\n  Article,\n  ArticleHeader,\n  ArticleTitle,\n  ArticleMeta,\n  ArticleTime,\n  ArticleAuthor,\n  ArticleFigure,\n  ArticleImage,\n  ArticleFigcaption,\n  ArticleContent,\n  ArticleBlockquote,\n  ArticleFooter,\n  ArticleTags,\n  ArticleTag,\n  ArticleActions\n};\n",
       "target": "components"
     }

package/r/{components → utility/components}/aside.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "aside",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/aside.tsx",
+      "path": "utility/components/aside.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Aside({ className, ...props }: React.ComponentProps<\"aside\">) {\n  return (\n    <aside\n      data-slot=\"aside\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nAside.displayName = \"Aside\"\n\nexport { Aside }",
       "target": "components"
     }

package/r/{components → utility/components}/footer.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "footer",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/footer.tsx",
+      "path": "utility/components/footer.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Footer({ className, ...props }: React.ComponentProps<\"footer\">) {\n  return (\n    <footer\n      data-slot=\"footer\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nFooter.displayName = \"Footer\"\n\nexport { Footer }",
       "target": "components"
     }

package/r/{components → utility/components}/header.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "header",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/header.tsx",
+      "path": "utility/components/header.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Header({ className, ...props }: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      data-slot=\"header\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nHeader.displayName = \"Header\"\n\nexport { Header }",
       "target": "components"
     }

package/r/{components → utility/components}/main.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "main",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/main.tsx",
+      "path": "utility/components/main.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Main({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"main\"\n      className={cn(\"flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nMain.displayName = \"Main\"\n\nexport { Main }",
       "target": "components"
     }

package/r/{components → utility/components}/markup.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "markup",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/markup.tsx",
+      "path": "utility/components/markup.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction H1({ className, ...props }: React.ComponentProps<\"h1\">) {\n  return (\n    <h1\n      data-slot=\"h1\"\n      className={cn(\"text-3xl font-bold mb-4\", className)}\n      {...props}\n    />\n  )\n}\n\nH1.displayName = \"H1\"\n\nfunction H2({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"h2\"\n      className={cn(\"text-2xl font-bold mb-4\", className)}\n      {...props}\n    />\n  )\n}\n\nH2.displayName = \"H2\"\n\nfunction H3({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"h3\"\n      className={cn(\"text-xl font-bold\", className)}\n      {...props}\n    />\n  )\n}\n\nH3.displayName = \"H3\"\n\nfunction H4({ className, ...props }: React.ComponentProps<\"h4\">) {\n  return (\n    <h4\n      data-slot=\"h4\"\n      className={cn(\"text-xl font-bold\", className)}\n      {...props}\n    />\n  )\n}\n\nH4.displayName = \"H4\"\n\nfunction H5({ className, ...props }: React.ComponentProps<\"h5\">) {\n  return (\n    <h5\n      data-slot=\"h5\"\n      className={cn(\"text-lg font-bold\", className)}\n      {...props}\n    />\n  )\n}\n\nH5.displayName = \"H5\"\n\nfunction H6({ className, ...props }: React.ComponentProps<\"h6\">) {\n  return (\n    <h6\n      data-slot=\"h6\"\n      className={cn(\"text-base font-bold\", className)}\n      {...props}\n    />\n  )\n}\n\nH6.displayName = \"H6\"\n\nfunction P({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"p\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nP.displayName = \"P\"\n\nfunction Figure({ className, ...props }: React.ComponentProps<\"figure\">) {\n  return (\n    <figure\n      data-slot=\"figure\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nFigure.displayName = \"Figure\"\n\nfunction Figcaption({ className, ...props }: React.ComponentProps<\"figcaption\">) {\n  return (\n    <figcaption\n      data-slot=\"figcaption\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nFigcaption.displayName = \"Figcaption\"\n\nfunction Blockquote({ className, ...props }: React.ComponentProps<\"blockquote\">) {\n  return (\n    <blockquote\n      data-slot=\"blockquote\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nBlockquote.displayName = \"Blockquote\"\n\nfunction Time({ className, ...props }: React.ComponentProps<\"time\">) {\n  return (\n    <time\n      data-slot=\"time\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nTime.displayName = \"Time\"\n\nfunction Address({ className, ...props }: React.ComponentProps<\"address\">) {\n  return (\n    <address\n      data-slot=\"address\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nAddress.displayName = \"Address\"\n\nfunction Ul({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"ul\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nUl.displayName = \"Ul\"\n\nfunction Ol({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"ol\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nOl.displayName = \"Ol\"\n\nfunction Li({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"li\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nLi.displayName = \"Li\"\n\nexport { H1, H2, H3, H4, H5, H6, P, Figure, Figcaption, Blockquote, Time, Address, Ul, Ol, Li }\n",
       "target": "components"
     }

package/r/{components → utility/components}/media.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "media",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/media.tsx",
+      "path": "utility/components/media.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Img({ className, ...props }: React.ComponentProps<\"img\">) {\n  return (\n    <img\n      data-slot=\"img\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nImg.displayName = \"Img\"\n\nfunction Video({ className, ...props }: React.ComponentProps<\"video\">) {\n  return (\n    <video\n      data-slot=\"video\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nVideo.displayName = \"Video\"\n\nfunction Audio({ className, ...props }: React.ComponentProps<\"audio\">) {\n  return (\n    <audio\n      data-slot=\"audio\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nAudio.displayName = \"Audio\"\n\nfunction Picture({ className, ...props }: React.ComponentProps<\"picture\">) {\n  return (\n    <picture\n      data-slot=\"picture\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nPicture.displayName = \"Picture\"\n\nfunction Source({ className, ...props }: React.ComponentProps<\"source\">) {\n  return (\n    <source\n      data-slot=\"source\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nSource.displayName = \"Source\"\n\nfunction Iframe({ className, ...props }: React.ComponentProps<\"iframe\">) {\n  return (\n    <iframe\n      data-slot=\"iframe\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nIframe.displayName = \"Iframe\"\n\nfunction Map({ className, ...props }: React.ComponentProps<\"map\">) {\n  return (\n    <map\n      data-slot=\"map\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nMap.displayName = \"Map\"\n\nfunction Area({ className, ...props }: React.ComponentProps<\"area\">) {\n  return (\n    <area\n      data-slot=\"area\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nArea.displayName = \"Area\"\n\nfunction Object({ className, ...props }: React.ComponentProps<\"object\">) {\n  return (\n    <object\n      data-slot=\"object\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nObject.displayName = \"Object\"\n\nfunction Svg({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      data-slot=\"svg\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nSvg.displayName = \"Svg\"\n\nfunction Canvas({ className, ...props }: React.ComponentProps<\"canvas\">) {\n  return (\n    <canvas\n      data-slot=\"canvas\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nCanvas.displayName = \"Canvas\"\n\nexport { Img, Video, Audio, Picture, Source, Iframe, Map, Area, Object, Svg, Canvas }",
       "target": "components"
     }

package/r/{components → utility/components}/nav.json

@@ -2,15 +2,16 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "nav",
   "type": "registry:component",
-  "description": "CSS-only Navigation component with responsive design\n\nNo external JavaScript dependencies or runtime requirements.\nWorks with server-side rendering (SSR) and static site generation (SSG).\n\nRequired Tailwind CSS:\n```css",
+  "description": "CSS-only Navigation component with responsive design\n * \n * No external JavaScript dependencies or runtime requirements.\n * Works with server-side rendering (SSR) and static site generation (SSG).\n * \n * Required Tailwind CSS:\n * ```css\n * @layer components {\n *  \n *   .peer:checked ~[data - slot=\"nav-mobile\"] {\n * @apply opacity - 100 visible translate - y - 0;\n *   }\n * \n *   \n *   .group: target[data - slot= \"nav-dropdown-content\"] {\n * @apply opacity - 100 visible scale - 100;\n *   }\n * \n *  \n * details[data - slot=\"nav-mobile-dropdown\"][open] summary {\n * @apply bg - accent text - accent - foreground;\n *   }\n * }\n * ```\n * \n * Key features:\n * - Pure CSS dropdowns using :target selector\n * - Checkbox-based mobile menu\n * - Auto-closing mobile menu when clicking outside\n * - Accessible keyboard navigation\n * \n * Usage example:\n * \n  * <NavLayout>\n    *   <NavBar>\n      *     <h2>Logo</h2>\n      *\n      *   \n      *     <Nav>\n        *       <NavList>\n          *         <NavItem>\n            *           <NavLink href=\"/\" active>Home</NavLink>\n            *         </NavItem>\n          *         <NavItem>\n            *           <NavDropdown id=\"products-dropdown\" title=\"Products\">\n              *             <NavDropdownItem href=\"/products/web\">Web</NavDropdownItem>\n              *             <NavDropdownItem href=\"/products/mobile\">Mobile</NavDropdownItem>\n              *           </NavDropdown>\n            *         </NavItem>\n          *       </NavList>\n        *     </Nav>\n      *\n      *    \n      *     <NavTrigger />\n      *   </NavBar>\n    *\n    *  \n    *   <NavMobile>\n      *     <NavMobileList>\n        *       <NavMobileItem>\n          *         <NavMobileLink href=\"/\" active>Home</NavMobileLink>\n          *       </NavMobileItem>\n        *       <NavMobileItem>\n          *         <NavMobileDropdown title=\"Products\">\n            *           <NavMobileDropdownItem href=\"/products/web\">Web</NavMobileDropdownItem>\n            *           <NavMobileDropdownItem href=\"/products/mobile\">Mobile</NavMobileDropdownItem>\n            *         </NavMobileDropdown>\n          *       </NavMobileItem>\n        *     </NavMobileList>\n      *   </NavMobile>\n    * </NavLayout>\n  * ```",
   "dependencies": [
     "react",
+    "@/lib/utils",
     "lucide-react"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/nav.tsx",
+      "path": "utility/components/nav.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Menu, X, ChevronDown } from \"lucide-react\"\n\n/**\n * CSS-only Navigation component with responsive design\n * \n * No external JavaScript dependencies or runtime requirements.\n * Works with server-side rendering (SSR) and static site generation (SSG).\n * \n * Required Tailwind CSS:\n * ```css\n * @layer components {\n *  \n *   .peer:checked ~[data - slot=\"nav-mobile\"] {\n * @apply opacity - 100 visible translate - y - 0;\n *   }\n * \n *   \n *   .group: target[data - slot= \"nav-dropdown-content\"] {\n * @apply opacity - 100 visible scale - 100;\n *   }\n * \n *  \n * details[data - slot=\"nav-mobile-dropdown\"][open] summary {\n * @apply bg - accent text - accent - foreground;\n *   }\n * }\n * ```\n * \n * Key features:\n * - Pure CSS dropdowns using :target selector\n * - Checkbox-based mobile menu\n * - Auto-closing mobile menu when clicking outside\n * - Accessible keyboard navigation\n * \n * Usage example:\n * \n  * <NavLayout>\n    *   <NavBar>\n      *     <h2>Logo</h2>\n      *\n      *   \n      *     <Nav>\n        *       <NavList>\n          *         <NavItem>\n            *           <NavLink href=\"/\" active>Home</NavLink>\n            *         </NavItem>\n          *         <NavItem>\n            *           <NavDropdown id=\"products-dropdown\" title=\"Products\">\n              *             <NavDropdownItem href=\"/products/web\">Web</NavDropdownItem>\n              *             <NavDropdownItem href=\"/products/mobile\">Mobile</NavDropdownItem>\n              *           </NavDropdown>\n            *         </NavItem>\n          *       </NavList>\n        *     </Nav>\n      *\n      *    \n      *     <NavTrigger />\n      *   </NavBar>\n    *\n    *  \n    *   <NavMobile>\n      *     <NavMobileList>\n        *       <NavMobileItem>\n          *         <NavMobileLink href=\"/\" active>Home</NavMobileLink>\n          *       </NavMobileItem>\n        *       <NavMobileItem>\n          *         <NavMobileDropdown title=\"Products\">\n            *           <NavMobileDropdownItem href=\"/products/web\">Web</NavMobileDropdownItem>\n            *           <NavMobileDropdownItem href=\"/products/mobile\">Mobile</NavMobileDropdownItem>\n            *         </NavMobileDropdown>\n          *       </NavMobileItem>\n        *     </NavMobileList>\n      *   </NavMobile>\n    * </NavLayout>\n  * ```\n */\n\n// Main navigation container\nfunction Nav({ className, children, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      data-slot=\"nav\"\n      className={cn(\"hidden lg:flex items-center space-x-1\", className)}\n      {...props}\n    >\n      {children}\n    </nav>\n  )\n}\n\n// Layout for nav with checkbox for mobile menu\nfunction NavLayout({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"nav-layout\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {/* Hidden checkbox for mobile menu toggle */}\n      <input\n        type=\"checkbox\"\n        id=\"nav-toggle\"\n        className=\"peer sr-only\"\n        aria-hidden=\"true\"\n      />\n      {children}\n    </div>\n  )\n}\n\n// Navigation bar wrapper\nfunction NavBar({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"nav-bar\"\n      className={cn(\"sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\", className)}\n      {...props}\n    >\n      <div className=\"container flex h-16 items-center justify-between px-4\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\n// Navigation list\nfunction NavList({ className, children, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"nav-list\"\n      className={cn(\"flex items-center space-x-1\", className)}\n      {...props}\n    >\n      {children}\n    </ul>\n  )\n}\n\n// Navigation item\nfunction NavItem({ className, children, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"nav-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n}\n\n// Navigation link\nfunction NavLink({\n  className,\n  children,\n  active,\n  ...props\n}: React.ComponentProps<\"a\"> & { active?: boolean }) {\n  return (\n    <a\n      data-slot=\"nav-link\"\n      data-active={active ? \"true\" : undefined}\n      className={cn(\"inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground\", className)}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n// Dropdown navigation (CSS-only using details/summary)\nfunction NavDropdown({\n  className,\n  children,\n  title,\n  id,\n  ...props\n}: React.ComponentProps<\"details\"> & { title: string; id: string }) {\n  return (\n    <details\n      id={id}\n      data-slot=\"nav-dropdown\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <summary\n        className={cn(\"inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer list-none [&::-webkit-details-marker]:hidden [&[open]]:bg-accent [&[open]]:text-accent-foreground\")}\n      >\n        {title}\n        <ChevronDown className={cn(\"ml-1 h-4 w-4 transition-transform duration-200 details-open:rotate-180\")} />\n      </summary>\n\n      {/* Dropdown content */}\n      <div\n        data-slot=\"nav-dropdown-content\"\n        className={cn(\"absolute top-full left-0 mt-1 w-48 rounded-md bg-popover border border-border shadow-lg z-50 origin-top-left\")}\n      >\n        <div className=\"py-1\">\n          {children}\n        </div>\n      </div>\n    </details>\n  )\n}\n\n// Dropdown item\nfunction NavDropdownItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"a\">) {\n  return (\n    <a\n      data-slot=\"nav-dropdown-item\"\n      className={cn(\"block px-4 py-2 text-sm text-popover-foreground transition-colors hover:bg-accent hover:text-accent-foreground\", className)}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n// Mobile menu trigger\nfunction NavTrigger({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      htmlFor=\"nav-toggle\"\n      data-slot=\"nav-trigger\"\n      className={cn(\"lg:hidden inline-flex items-center justify-center p-2 rounded-md text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring cursor-pointer\", className)}\n      aria-label=\"Toggle navigation menu\"\n      {...props}\n    >\n      <Menu className=\"h-5 w-5\" />\n    </label>\n  )\n}\n\n// Mobile navigation overlay\nfunction NavMobile({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"nav-mobile\"\n      className={cn(\"fixed inset-0 z-50 lg:hidden opacity-0 invisible -translate-y-full transition-all duration-300 ease-out peer-checked:opacity-100 peer-checked:visible peer-checked:translate-y-0\", className)}\n      {...props}\n    >\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\" />\n\n      {/* Mobile menu panel */}\n      <div className=\"relative bg-background border-b border-border shadow-lg\">\n        {/* Close button */}\n        <div className=\"flex items-center justify-between p-4 border-b border-border\">\n          <span className=\"text-lg font-semibold\">Menu</span>\n          <label\n            htmlFor=\"nav-toggle\"\n            className=\"p-2 rounded-md hover:bg-accent cursor-pointer\"\n            aria-label=\"Close menu\"\n          >\n            <X className=\"h-5 w-5\" />\n          </label>\n        </div>\n\n        {/* Mobile menu content */}\n        <div className=\"p-4\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// Mobile navigation list\nfunction NavMobileList({ className, children, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"nav-mobile-list\"\n      className={cn(\"space-y-1\", className)}\n      {...props}\n    >\n      {children}\n    </ul>\n  )\n}\n\n// Mobile navigation item\nfunction NavMobileItem({ className, children, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"nav-mobile-item\"\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n    </li>\n  )\n}\n\n// Mobile navigation link\nfunction NavMobileLink({\n  className,\n  children,\n  active,\n  href,\n  ...props\n}: React.ComponentProps<\"a\"> & { active?: boolean }) {\n  return (\n    <a\n      href={href}\n      data-slot=\"nav-mobile-link\"\n      data-active={active ? \"true\" : undefined}\n      className={cn(\n        \"flex items-center w-full px-3 py-3 text-base font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground\",\n        className\n\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n// Mobile dropdown item\nfunction NavMobileDropdownItem({\n  className,\n  children,\n  href,\n  ...props\n}: React.ComponentProps<\"a\">) {\n  return (\n    <a\n      href={href}\n      data-slot=\"nav-mobile-dropdown-item\"\n      className={cn(\n        \"block px-3 py-2 text-sm rounded-md transition-colors hover:bg-accent hover:text-accent-foreground\",\n        className\n\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n// Mobile dropdown (CSS-only with details/summary)\nfunction NavMobileDropdown({\n  className,\n  children,\n  title,\n  ...props\n}: React.ComponentProps<\"details\"> & { title: string }) {\n  return (\n    <details\n      data-slot=\"nav-mobile-dropdown\"\n      className={cn(\"\", className)}\n      {...props}\n    >\n      <summary\n        className={cn(\"flex items-center justify-between w-full px-3 py-3 text-base font-medium rounded-md hover:bg-accent hover:text-accent-foreground cursor-pointer list-none [&::-webkit-details-marker]:hidden [&[open]]:bg-accent [&[open]]:text-accent-foreground\")}\n      >\n        {title}\n        <ChevronDown className={cn(\"h-4 w-4 transition-transform duration-200 group-open:rotate-180\")} />\n      </summary>\n      <div className=\"mt-1 ml-4 space-y-1\">\n        {children}\n      </div>\n    </details>\n  )\n}\n\n// Navigation group for organizing links\nfunction NavGroup({\n  className,\n  children,\n  title,\n  ...props\n}: React.ComponentProps<\"div\"> & { title?: string }) {\n  return (\n    <div\n      data-slot=\"nav-group\"\n      className={cn(\"py-2\", className)}\n      {...props}\n    >\n      {title && (\n        <h4 className=\"mb-2 px-3 text-sm font-semibold tracking-tight text-muted-foreground\">\n          {title}\n        </h4>\n      )}\n      <div className=\"space-y-1\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\n// Navigation group buttons (e.g. for theme toggle)\nfunction NavGroupButtons({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"nav-group-buttons\"\n      className={cn(\"flex items-center space-x-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport {\n  Nav,\n  NavBar,\n  NavList,\n  NavItem,\n  NavLink,\n  NavDropdown,\n  NavDropdownItem,\n  NavTrigger,\n  NavMobile,\n  NavMobileList,\n  NavMobileItem,\n  NavMobileLink,\n  NavMobileDropdownItem,\n  NavMobileDropdown,\n  NavGroup,\n  NavGroupButtons,\n  NavLayout,\n}",
       "target": "components"
     }

package/r/utility/components/navbar.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://buildy.tw/schema/registry-item.json",
+  "name": "navbar",
+  "type": "registry:component",
+  "description": "A responsive navigation bar component with logo and menu items",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    {
+      "path": "utility/components/navbar.js",
+      "content": "/**\r\n * A responsive navigation bar component with logo and menu items\r\n */\r\nexport function Navbar({ logo, menuItems = [], className = \"\" }) {\r\n  const menuHtml = menuItems.map(item => `\r\n    <a href=\"${item.href}\" class=\"text-foreground hover:text-primary transition-colors\">\r\n      ${item.label}\r\n    </a>\r\n  `).join('')\r\n\r\n  return `\r\n    <nav class=\"sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 ${className}\">\r\n      <div class=\"container flex h-14 items-center\">\r\n        <div class=\"mr-4 flex\">\r\n          <a class=\"mr-6 flex items-center space-x-2\" href=\"/\">\r\n            <span class=\"font-bold text-xl\">${logo || 'Logo'}</span>\r\n          </a>\r\n          <nav class=\"hidden md:flex items-center space-x-6 text-sm font-medium\">\r\n            ${menuHtml}\r\n          </nav>\r\n        </div>\r\n        <div class=\"flex flex-1 items-center justify-between space-x-2 md:justify-end\">\r\n          <div class=\"w-full flex-1 md:w-auto md:flex-none\">\r\n            <!-- Search or other content -->\r\n          </div>\r\n          <nav class=\"flex items-center\">\r\n            <button class=\"md:hidden p-2\">\r\n              <span class=\"sr-only\">Toggle menu</span>\r\n              <svg class=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"></path>\r\n              </svg>\r\n            </button>\r\n          </nav>\r\n        </div>\r\n      </div>\r\n    </nav>\r\n  `\r\n}\r\n\r\nexport function NavbarItem({ href, label, active = false }) {\r\n  return `\r\n    <a href=\"${href}\" class=\"text-sm font-medium transition-colors hover:text-primary ${active ? 'text-primary' : 'text-muted-foreground'}\">\r\n      ${label}\r\n    </a>\r\n  `\r\n} ",
+      "target": "components"
+    }
+  ]
+}

package/r/{components → utility/components}/section.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "section",
   "type": "registry:component",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/section.tsx",
+      "path": "utility/components/section.tsx",
       "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Section({ className, ...props }: React.ComponentProps<\"section\">) {\n  // TODO: py-6 md:py-12 lg:py-24\n  return (\n    <section\n      data-slot=\"section\"\n      className={cn(\"w-full py-6 md:py-12 lg:py-18\", className)}\n      {...props}\n    />\n  )\n}\n\nSection.displayName = \"Section\"\n\nfunction Container({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"container\"\n      className={cn(\"container mx-auto px-4 md:px-6 lg:px-8\", className)}\n      {...props}\n    />\n  )\n}\n\nContainer.displayName = \"Container\"\n\nfunction FullWidth({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"full-width\"\n      className={cn(\"w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nFullWidth.displayName = \"FullWidth\"\n\nfunction SectionHeader({ className, ...props }: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      data-slot=\"section-header\"\n      className={cn(\"w-full py-6 md:py-12 lg:py-18\", className)}\n      {...props}\n    />\n  )\n}\n\nSectionHeader.displayName = \"SectionHeader\"\n\nfunction SectionTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"section-title\"\n      className={cn(\"text-3xl font-bold mb-4\", className)}\n      {...props}\n    />\n  )\n}\n\nSectionTitle.displayName = \"SectionTitle\"\n\nfunction SectionDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-description\"\n      className={cn(\"text-secondary-foreground mb-4\", className)}\n      {...props}\n    />\n  )\n}\n\nSectionDescription.displayName = \"SectionDescription\"\n\nfunction SectionFooter({ className, ...props }: React.ComponentProps<\"footer\">) {\n  return (\n    <footer\n      data-slot=\"section-footer\"\n      className={cn(\"py-8\", className)}\n      {...props}\n    />\n  )\n}\n\nSectionFooter.displayName = \"SectionFooter\"\n\nfunction SectionContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-content\"\n      className={cn(\"w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nSectionContent.displayName = \"SectionContent\"\n\nfunction Row({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"row\"\n      className={cn(\"flex flex-wrap -mx-4\", className)}\n      {...props}\n    />\n  )\n}\n\nRow.displayName = \"Row\"\n\nfunction Col({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"col\"\n      className={cn(\"w-full px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nCol.displayName = \"Col\"\n\nfunction Grid({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grid\"\n      className={cn(\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\", className)}\n      {...props}\n    />\n  )\n}\n\nGrid.displayName = \"Grid\"\n\nexport { Section, Container, FullWidth, Row, Col, Grid, SectionContent, SectionHeader, SectionTitle, SectionDescription, SectionFooter }",
       "target": "components"
     }

package/r/{components → utility/components}/sheet.json

@@ -2,15 +2,16 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "sheet",
   "type": "registry:component",
-  "description": "CSS-only Sheet component for SSR/SSG compatibility\n\nUsage example:\n```tsx\n<Sheet>\n  <SheetTrigger href=\"#my-sheet\">Open Sheet</SheetTrigger>\n  <SheetContent id=\"my-sheet\">\n    <SheetHeader>\n      <SheetTitle>Sheet Title</SheetTitle>\n      <SheetDescription>Description text</SheetDescription>\n    </SheetHeader>\n    <div className=\"p-6\">Content here</div>\n    <SheetFooter>\n      <SheetClose>Close</SheetClose>\n    </SheetFooter>\n  </SheetContent>\n</Sheet>\n```",
+  "description": "CSS-only Sheet component for SSR/SSG compatibility\n * \n * Usage example:\n * ```tsx\n * <Sheet>\n *   <SheetTrigger href=\"#my-sheet\">Open Sheet</SheetTrigger>\n *   <SheetContent id=\"my-sheet\">\n *     <SheetHeader>\n *       <SheetTitle>Sheet Title</SheetTitle>\n *       <SheetDescription>Description text</SheetDescription>\n *     </SheetHeader>\n *     <div className=\"p-6\">Content here</div>\n *     <SheetFooter>\n *       <SheetClose>Close</SheetClose>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```",
   "dependencies": [
     "react",
-    "lucide-react"
+    "lucide-react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/components/sheet.tsx",
+      "path": "utility/components/sheet.tsx",
       "content": "import * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * CSS-only Sheet component for SSR/SSG compatibility\n * \n * Usage example:\n * ```tsx\n * <Sheet>\n *   <SheetTrigger href=\"#my-sheet\">Open Sheet</SheetTrigger>\n *   <SheetContent id=\"my-sheet\">\n *     <SheetHeader>\n *       <SheetTitle>Sheet Title</SheetTitle>\n *       <SheetDescription>Description text</SheetDescription>\n *     </SheetHeader>\n *     <div className=\"p-6\">Content here</div>\n *     <SheetFooter>\n *       <SheetClose>Close</SheetClose>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\n\n// Layout for sheet with checkbox\ninterface SheetLayoutProps {\n  children: React.ReactNode\n  className?: string\n  trigger?: React.ReactNode\n}\n\nfunction SheetLayout({ trigger, children, className }: SheetLayoutProps) {\n  return (\n    <div className={cn(\"relative\", className)}>\n      <input type=\"checkbox\" id=\"sheet-toggle\" className=\"peer sr-only\" aria-hidden=\"true\" />\n      {trigger}\n      {children}\n    </div>\n  )\n}\n\n// Props interfaces\ninterface SheetTriggerProps {\n  children: React.ReactNode\n  className?: string\n}\n\ninterface SheetContentProps {\n  children: React.ReactNode\n  className?: string\n}\n\n// Trigger component - uses peer checkbox\nfunction SheetTrigger({ children, className, ...props }: SheetTriggerProps) {\n  return (\n    <label htmlFor=\"sheet-toggle\" data-slot=\"sheet-trigger\" className={cn(\"inline-flex md:hidden items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 p-2 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground cursor-pointer\", className)} {...props}>\n      {children}\n    </label>\n  )\n}\n\n// Content component - pure CSS off-canvas\n// To change the side from which the panel slides in:\n// For LEFT: use 'inset-y-0 left-0 border-r transform -translate-x-full peer-checked:translate-x-0'\n// For RIGHT: use 'inset-y-0 right-0 border-l transform translate-x-full peer-checked:translate-x-0'\nfunction SheetContent({ children, className, ...props }: SheetContentProps) {\n  // Example usage (choose one line):\n  // LEFT PANEL:  className={cn(\"fixed inset-y-0 left-0 z-50 w-full max-w-sm bg-background shadow-lg border-r transform -translate-x-full transition-transform duration-300 ease-out peer-checked:translate-x-0 flex flex-col overflow-hidden\", className)}\n  // RIGHT PANEL: className={cn(\"fixed inset-y-0 right-0 z-50 w-full max-w-sm bg-background shadow-lg border-l transform translate-x-full transition-transform duration-300 ease-out peer-checked:translate-x-0 flex flex-col overflow-hidden\", className)}\n  return (\n    <div data-slot=\"sheet-content\" role=\"dialog\" aria-modal=\"true\" className={cn(\"fixed inset-y-0 left-0 z-50 w-full max-w-sm bg-background shadow-lg border-r transform -translate-x-full transition-transform duration-300 ease-out peer-checked:translate-x-0 flex flex-col overflow-hidden\", className)} {...props}>\n      {/* Close button */}\n      <div className=\"absolute top-4 right-4 z-10\">\n        <label htmlFor=\"sheet-toggle\" className={cn(\"rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 inline-flex h-6 w-6 items-center justify-center bg-background/80 backdrop-blur-sm cursor-pointer\")}>\n          <XIcon className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Close</span>\n        </label>\n      </div>\n      {children}\n    </div>\n  )\n}\n\n// Overlay component\nfunction SheetOverlay({ className, ...props }: { className?: string }) {\n  return (\n    <label\n      htmlFor=\"sheet-toggle\"\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-40 bg-black/50 backdrop-blur-sm opacity-0 invisible transition-all duration-300 ease-out peer-checked:opacity-100 peer-checked:visible peer-checked:pointer-events-auto transform-gpu cursor-pointer\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// Header component\ninterface SheetHeaderProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SheetHeader({ children, className, ...props }: SheetHeaderProps) {\n  return (\n    <div data-slot=\"sheet-header\" className={cn(\"flex flex-col space-y-2 p-6\", className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\n// Body component for main content\ninterface SheetBodyProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SheetBody({ children, className, ...props }: SheetBodyProps) {\n  return (\n    <div data-slot=\"sheet-body\" className={cn(\"flex-1 overflow-y-auto p-6\", className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\n// Footer component\ninterface SheetFooterProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SheetFooter({ children, className, ...props }: SheetFooterProps) {\n  return (\n    <div data-slot=\"sheet-footer\" className={cn(\"mt-auto flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6\", className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\n// Title component\ninterface SheetTitleProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SheetTitle({ children, className, ...props }: SheetTitleProps) {\n  return (\n    <h2 data-slot=\"sheet-title\" className={cn(\"text-lg font-semibold text-foreground\", className)} {...props}>\n      {children}\n    </h2>\n  )\n}\n\n// Description component\ninterface SheetDescriptionProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SheetDescription({ children, className, ...props }: SheetDescriptionProps) {\n  return (\n    <p data-slot=\"sheet-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props}>\n      {children}\n    </p>\n  )\n}\n\n// Close component - simple link to close\ninterface SheetCloseProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction SheetClose({ children, className, ...props }: SheetCloseProps) {\n  return (\n    <label htmlFor=\"sheet-toggle\" data-slot=\"sheet-close\" className={cn(\"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer\", className)} {...props}>\n      {children}\n    </label>\n  )\n}\n\nexport {\n  SheetLayout,\n  SheetTrigger,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  SheetClose,\n  SheetBody,\n  SheetOverlay,\n}",
       "target": "components"
     }

package/r/utility/index.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://buildy.tw/schema/registry.json",
+  "components": [
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "link",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "description": "A flexible card component for displaying content"
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "description": "A customizable button component with multiple variants and sizes"
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "avatar",
+      "type": "registry:ui",
+      "description": "Avatar context for image loading status"
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "description": ""
+    },
+    {
+      "name": "hero-section",
+      "type": "registry:block",
+      "description": ""
+    },
+    {
+      "name": "hero-section",
+      "type": "registry:block",
+      "description": "A hero section component for landing pages"
+    },
+    {
+      "name": "sheet",
+      "type": "registry:component",
+      "description": "CSS-only Sheet component for SSR/SSG compatibility\n * \n * Usage example:\n * ```tsx\n * <Sheet>\n *   <SheetTrigger href=\"#my-sheet\">Open Sheet</SheetTrigger>\n *   <SheetContent id=\"my-sheet\">\n *     <SheetHeader>\n *       <SheetTitle>Sheet Title</SheetTitle>\n *       <SheetDescription>Description text</SheetDescription>\n *     </SheetHeader>\n *     <div className=\"p-6\">Content here</div>\n *     <SheetFooter>\n *       <SheetClose>Close</SheetClose>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```"
+    },
+    {
+      "name": "section",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "navbar",
+      "type": "registry:component",
+      "description": "A responsive navigation bar component with logo and menu items"
+    },
+    {
+      "name": "nav",
+      "type": "registry:component",
+      "description": "CSS-only Navigation component with responsive design\n * \n * No external JavaScript dependencies or runtime requirements.\n * Works with server-side rendering (SSR) and static site generation (SSG).\n * \n * Required Tailwind CSS:\n * ```css\n * @layer components {\n *  \n *   .peer:checked ~[data - slot=\"nav-mobile\"] {\n * @apply opacity - 100 visible translate - y - 0;\n *   }\n * \n *   \n *   .group: target[data - slot= \"nav-dropdown-content\"] {\n * @apply opacity - 100 visible scale - 100;\n *   }\n * \n *  \n * details[data - slot=\"nav-mobile-dropdown\"][open] summary {\n * @apply bg - accent text - accent - foreground;\n *   }\n * }\n * ```\n * \n * Key features:\n * - Pure CSS dropdowns using :target selector\n * - Checkbox-based mobile menu\n * - Auto-closing mobile menu when clicking outside\n * - Accessible keyboard navigation\n * \n * Usage example:\n * \n  * <NavLayout>\n    *   <NavBar>\n      *     <h2>Logo</h2>\n      *\n      *   \n      *     <Nav>\n        *       <NavList>\n          *         <NavItem>\n            *           <NavLink href=\"/\" active>Home</NavLink>\n            *         </NavItem>\n          *         <NavItem>\n            *           <NavDropdown id=\"products-dropdown\" title=\"Products\">\n              *             <NavDropdownItem href=\"/products/web\">Web</NavDropdownItem>\n              *             <NavDropdownItem href=\"/products/mobile\">Mobile</NavDropdownItem>\n              *           </NavDropdown>\n            *         </NavItem>\n          *       </NavList>\n        *     </Nav>\n      *\n      *    \n      *     <NavTrigger />\n      *   </NavBar>\n    *\n    *  \n    *   <NavMobile>\n      *     <NavMobileList>\n        *       <NavMobileItem>\n          *         <NavMobileLink href=\"/\" active>Home</NavMobileLink>\n          *       </NavMobileItem>\n        *       <NavMobileItem>\n          *         <NavMobileDropdown title=\"Products\">\n            *           <NavMobileDropdownItem href=\"/products/web\">Web</NavMobileDropdownItem>\n            *           <NavMobileDropdownItem href=\"/products/mobile\">Mobile</NavMobileDropdownItem>\n            *         </NavMobileDropdown>\n          *       </NavMobileItem>\n        *     </NavMobileList>\n      *   </NavMobile>\n    * </NavLayout>\n  * ```"
+    },
+    {
+      "name": "media",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "markup",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "main",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "header",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "footer",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "aside",
+      "type": "registry:component",
+      "description": ""
+    },
+    {
+      "name": "article",
+      "type": "registry:component",
+      "description": "Helper function for determining styles that the parser will be able to process"
+    },
+    {
+      "name": "landing-page",
+      "type": "registry:template",
+      "description": "A complete landing page template with hero, features, and footer sections"
+    },
+    {
+      "name": "utils",
+      "type": "registry:lib",
+      "description": ""
+    }
+  ],
+  "categories": [
+    "ui",
+    "components",
+    "blocks",
+    "lib",
+    "templates"
+  ],
+  "version": "1.0.0",
+  "lastUpdated": "2025-06-01T01:24:13.020Z",
+  "registry": "utility"
+}

package/r/{lib → utility/lib}/utils.json

@@ -2,6 +2,7 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "utils",
   "type": "registry:lib",
+  "description": "",
   "dependencies": [
     "clsx",
     "tailwind-merge"
@@ -9,7 +10,7 @@
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/lib/utils.ts",
+      "path": "lib/utils.ts",
       "content": "import { type ClassValue, clsx } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs))\r\n} ",
       "target": "lib"
     }

package/r/utility/templates/landing-page.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://buildy.tw/schema/registry-item.json",
+  "name": "landing-page",
+  "type": "registry:template",
+  "description": "A complete landing page template with hero, features, and footer sections",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    {
+      "path": "utility/templates/landing-page.js",
+      "content": "/**\r\n * A complete landing page template with hero, features, and footer sections\r\n */\r\nexport function LandingPageTemplate({ \r\n  heroTitle, \r\n  heroSubtitle, \r\n  features = [], \r\n  className = \"\" \r\n}) {\r\n  const featuresHtml = features.map(feature => `\r\n    <div class=\"p-6 border rounded-lg\">\r\n      <h3 class=\"text-xl font-semibold mb-2\">${feature.title}</h3>\r\n      <p class=\"text-muted-foreground\">${feature.description}</p>\r\n    </div>\r\n  `).join('')\r\n\r\n  return `\r\n    <div class=\"min-h-screen ${className}\">\r\n      <!-- Hero Section -->\r\n      <section class=\"relative py-20 px-4 text-center bg-gradient-to-b from-background to-muted\">\r\n        <div class=\"max-w-4xl mx-auto\">\r\n          <h1 class=\"text-4xl md:text-6xl font-bold mb-6\">${heroTitle}</h1>\r\n          <p class=\"text-xl text-muted-foreground mb-8\">${heroSubtitle}</p>\r\n          <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\r\n            <button class=\"px-6 py-3 bg-primary text-primary-foreground rounded-md font-medium\">\r\n              Get Started\r\n            </button>\r\n            <button class=\"px-6 py-3 border border-input rounded-md font-medium\">\r\n              Learn More\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Features Section -->\r\n      <section class=\"py-20 px-4\">\r\n        <div class=\"max-w-6xl mx-auto\">\r\n          <h2 class=\"text-3xl font-bold text-center mb-12\">Features</h2>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n            ${featuresHtml}\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n      <!-- Footer -->\r\n      <footer class=\"py-12 px-4 border-t\">\r\n        <div class=\"max-w-6xl mx-auto text-center\">\r\n          <p class=\"text-muted-foreground\">© 2024 Your Company. All rights reserved.</p>\r\n        </div>\r\n      </footer>\r\n    </div>\r\n  `\r\n} ",
+      "target": "templates"
+    }
+  ]
+}

package/r/{ui → utility/ui}/alert.json

@@ -2,14 +2,16 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "alert",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
     "react",
-    "class-variance-authority"
+    "class-variance-authority",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/alert.tsx",
+      "path": "utility/ui/alert.tsx",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/avatar.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "avatar",
   "type": "registry:ui",
+  "description": "Avatar context for image loading status",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/avatar.tsx",
+      "path": "utility/ui/avatar.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n// Avatar context for image loading status\nconst AvatarContext = React.createContext<{\n  imageStatus: \"idle\" | \"loading\" | \"loaded\" | \"error\"\n  setImageStatus: (status: \"idle\" | \"loading\" | \"loaded\" | \"error\") => void\n} | null>(null)\n\nfunction Avatar({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  // Manage image loading status in context\n  const [imageStatus, setImageStatus] = React.useState<\"idle\" | \"loading\" | \"loaded\" | \"error\">(\"idle\")\n  return (\n    <AvatarContext.Provider value={{ imageStatus, setImageStatus }}>\n      <span\n        data-slot=\"avatar\"\n        className={cn(\n          \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n          className\n        )}\n        {...props}\n      />\n    </AvatarContext.Provider>\n  )\n}\n\ninterface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> { }\n\nfunction AvatarImage({ className, src, ...props }: AvatarImageProps) {\n  const ctx = React.useContext(AvatarContext)\n  const [status, setStatus] = React.useState<\"idle\" | \"loading\" | \"loaded\" | \"error\">(\"idle\")\n\n  React.useEffect(() => {\n    if (!src) {\n      setStatus(\"error\")\n      ctx?.setImageStatus(\"error\")\n      return\n    }\n    setStatus(\"loading\")\n    ctx?.setImageStatus(\"loading\")\n    const img = new window.Image()\n    img.src = src\n    img.onload = () => {\n      setStatus(\"loaded\")\n      ctx?.setImageStatus(\"loaded\")\n    }\n    img.onerror = () => {\n      setStatus(\"error\")\n      ctx?.setImageStatus(\"error\")\n    }\n    // Clean up\n    return () => {\n      img.onload = null\n      img.onerror = null\n    }\n  }, [src])\n\n  if (status !== \"loaded\") return null\n  return (\n    <img\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      src={src}\n      {...props}\n    />\n  )\n}\n\ninterface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {\n  delayMs?: number\n}\n\nfunction AvatarFallback({ className, delayMs, ...props }: AvatarFallbackProps) {\n  const ctx = React.useContext(AvatarContext)\n  const [canRender, setCanRender] = React.useState(delayMs === undefined)\n\n  React.useEffect(() => {\n    if (delayMs !== undefined) {\n      const timer = setTimeout(() => setCanRender(true), delayMs)\n      return () => clearTimeout(timer)\n    }\n  }, [delayMs])\n\n  if (!canRender) return null\n  if (ctx?.imageStatus === \"loaded\") return null\n  return (\n    <span\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted flex size-full items-center justify-center rounded-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/badge.json

@@ -2,15 +2,17 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "badge",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
     "react",
     "@radix-ui/react-slot",
-    "class-variance-authority"
+    "class-variance-authority",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/badge.tsx",
+      "path": "utility/ui/badge.tsx",
       "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/breadcrumb.json

@@ -2,15 +2,17 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "breadcrumb",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
     "react",
     "@radix-ui/react-slot",
-    "lucide-react"
+    "lucide-react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/breadcrumb.tsx",
+      "path": "utility/ui/breadcrumb.tsx",
       "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}",
       "target": "ui"
     }

package/r/utility/ui/button.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://buildy.tw/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "description": "A customizable button component with multiple variants and sizes",
+  "dependencies": [
+    "react"
+  ],
+  "devDependencies": [],
+  "files": [
+    {
+      "path": "utility/ui/button.tsx",
+      "content": "/**\n * A customizable button component with multiple variants and sizes\n */\nimport React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\"\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = \"default\", size = \"default\", asChild = false, ...props }, ref) => {\n    const Comp = asChild ? \"span\" : \"button\"\n    \n    return (\n      <Comp\n        className={cn(\n          \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n          {\n            \"bg-primary text-primary-foreground hover:bg-primary/90\": variant === \"default\",\n            \"bg-destructive text-destructive-foreground hover:bg-destructive/90\": variant === \"destructive\",\n            \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\": variant === \"outline\",\n            \"bg-secondary text-secondary-foreground hover:bg-secondary/80\": variant === \"secondary\",\n            \"hover:bg-accent hover:text-accent-foreground\": variant === \"ghost\",\n            \"text-primary underline-offset-4 hover:underline\": variant === \"link\",\n          },\n          {\n            \"h-10 px-4 py-2\": size === \"default\",\n            \"h-9 rounded-md px-3\": size === \"sm\",\n            \"h-11 rounded-md px-8\": size === \"lg\",\n            \"h-10 w-10\": size === \"icon\",\n          },\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nexport { Button, type ButtonProps }",
+      "target": "ui"
+    }
+  ]
+}

package/r/utility/ui/card.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://buildy.tw/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "description": "A flexible card component for displaying content",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    {
+      "path": "utility/ui/card.tsx",
+      "content": "/**\n * A flexible card component for displaying content\n */\nimport { cn } from \"../../lib/utils\"\n\nexport function Card({ className, ...props }) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function CardHeader({ className, ...props }) {\n  return (\n    <div className={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...props} />\n  )\n}\n\nexport function CardTitle({ className, ...props }) {\n  return (\n    <h3\n      className={cn(\n        \"text-2xl font-semibold leading-none tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function CardDescription({ className, ...props }) {\n  return (\n    <p className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n  )\n}\n\nexport function CardContent({ className, ...props }) {\n  return <div className={cn(\"p-6 pt-0\", className)} {...props} />\n}\n\nexport function CardFooter({ className, ...props }) {\n  return (\n    <div className={cn(\"flex items-center p-6 pt-0\", className)} {...props} />\n  )\n}\n",
+      "target": "ui"
+    }
+  ]
+}

package/r/{ui → utility/ui}/input.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "input",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/input.tsx",
+      "path": "utility/ui/input.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/label.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "label",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/label.tsx",
+      "path": "utility/ui/label.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/link.json

@@ -2,14 +2,16 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "link",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
     "react",
-    "class-variance-authority"
+    "class-variance-authority",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/link.tsx",
+      "path": "utility/ui/link.tsx",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst linkVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Link({\n  className,\n  variant = \"link\",\n  size,\n  href,\n  type,\n  ...props\n}: React.ComponentProps<\"a\"> &\n  VariantProps<typeof linkVariants>) {\n  return (\n    <a\n      data-slot=\"link-button\"\n      className={cn(linkVariants({ variant, size, className }))}\n      href={href}\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nLink.displayName = \"Link\"\n\nfunction LinkButton({\n  className,\n  variant,\n  size,\n  href,\n  type,\n  ...props\n}: React.ComponentProps<\"a\"> &\n  VariantProps<typeof linkVariants>) {\n  return (\n    <a\n      data-slot=\"button\"\n      className={cn(linkVariants({ variant, size, className }))}\n      href={href}\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nLinkButton.displayName = \"LinkButton\"\n\nfunction A({\n  href,\n  ...props\n}: React.ComponentProps<\"a\">) {\n  return (\n    <a\n      data-slot=\"a\"\n      href={href}\n      {...props}\n    />\n  )\n}\n\nA.displayName = \"A\"\n\nexport { Link, LinkButton, A, linkVariants }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/skeleton.json

@@ -2,11 +2,14 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "skeleton",
   "type": "registry:ui",
-  "dependencies": [],
+  "description": "",
+  "dependencies": [
+    "@/lib/utils"
+  ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/skeleton.tsx",
+      "path": "utility/ui/skeleton.tsx",
       "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-accent animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }",
       "target": "ui"
     }

package/r/{ui → utility/ui}/table.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "table",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/table.tsx",
+      "path": "utility/ui/table.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}",
       "target": "ui"
     }

package/r/{ui → utility/ui}/textarea.json

@@ -2,13 +2,15 @@
   "$schema": "https://buildy.tw/schema/registry-item.json",
   "name": "textarea",
   "type": "registry:ui",
+  "description": "",
   "dependencies": [
-    "react"
+    "react",
+    "@/lib/utils"
   ],
   "devDependencies": [],
   "files": [
     {
-      "path": "packages/ui/src/ui/textarea.tsx",
+      "path": "utility/ui/textarea.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }",
       "target": "ui"
     }

package/r/blocks/hero-section.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "https://buildy.tw/schema/registry-item.json",
-  "name": "hero-section",
-  "type": "registry:block",
-  "dependencies": [
-    "react"
-  ],
-  "devDependencies": [],
-  "files": [
-    {
-      "path": "packages/ui/src/blocks/hero-section.tsx",
-      "content": "import React from \"react\"\r\nimport { cn } from \"../lib/utils\"\r\n\r\ninterface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {\r\n  title?: string\r\n  subtitle?: string\r\n  ctaText?: string\r\n  onCtaClick?: () => void\r\n}\r\n\r\nexport function HeroSection({\r\n  className,\r\n  title = \"Welcome to Buildy\",\r\n  subtitle = \"Build beautiful UI components for your Vite React projects\",\r\n  ctaText = \"Get Started\",\r\n  onCtaClick,\r\n  ...props\r\n}: HeroSectionProps) {\r\n  return (\r\n    <section\r\n      className={cn(\r\n        \"flex min-h-[500px] flex-col items-center justify-center space-y-6 text-center px-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className=\"space-y-4\">\r\n        <h1 className=\"text-4xl font-bold tracking-tight sm:text-6xl\">\r\n          {title}\r\n        </h1>\r\n        <p className=\"mx-auto max-w-[600px] text-lg text-muted-foreground sm:text-xl\">\r\n          {subtitle}\r\n        </p>\r\n      </div>\r\n      \r\n      {onCtaClick && (\r\n        <button\r\n          onClick={onCtaClick}\r\n          className=\"inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\r\n        >\r\n          {ctaText}\r\n        </button>\r\n      )}\r\n    </section>\r\n  )\r\n} ",
-      "target": "blocks"
-    }
-  ]
-}

package/r/index.json

@@ -1,111 +0,0 @@
-{
-  "$schema": "https://buildy.tw/schema/registry.json",
-  "components": [
-    {
-      "name": "textarea",
-      "type": "registry:ui"
-    },
-    {
-      "name": "table",
-      "type": "registry:ui"
-    },
-    {
-      "name": "skeleton",
-      "type": "registry:ui"
-    },
-    {
-      "name": "link",
-      "type": "registry:ui"
-    },
-    {
-      "name": "label",
-      "type": "registry:ui"
-    },
-    {
-      "name": "input",
-      "type": "registry:ui"
-    },
-    {
-      "name": "card",
-      "type": "registry:ui"
-    },
-    {
-      "name": "button",
-      "type": "registry:ui"
-    },
-    {
-      "name": "breadcrumb",
-      "type": "registry:ui"
-    },
-    {
-      "name": "badge",
-      "type": "registry:ui"
-    },
-    {
-      "name": "avatar",
-      "type": "registry:ui"
-    },
-    {
-      "name": "alert",
-      "type": "registry:ui"
-    },
-    {
-      "name": "utils",
-      "type": "registry:lib"
-    },
-    {
-      "name": "hero-section",
-      "type": "registry:block"
-    },
-    {
-      "name": "sheet",
-      "type": "registry:component",
-      "description": "CSS-only Sheet component for SSR/SSG compatibility\n\nUsage example:\n```tsx\n<Sheet>\n  <SheetTrigger href=\"#my-sheet\">Open Sheet</SheetTrigger>\n  <SheetContent id=\"my-sheet\">\n    <SheetHeader>\n      <SheetTitle>Sheet Title</SheetTitle>\n      <SheetDescription>Description text</SheetDescription>\n    </SheetHeader>\n    <div className=\"p-6\">Content here</div>\n    <SheetFooter>\n      <SheetClose>Close</SheetClose>\n    </SheetFooter>\n  </SheetContent>\n</Sheet>\n```"
-    },
-    {
-      "name": "section",
-      "type": "registry:component"
-    },
-    {
-      "name": "nav",
-      "type": "registry:component",
-      "description": "CSS-only Navigation component with responsive design\n\nNo external JavaScript dependencies or runtime requirements.\nWorks with server-side rendering (SSR) and static site generation (SSG).\n\nRequired Tailwind CSS:\n```css"
-    },
-    {
-      "name": "media",
-      "type": "registry:component"
-    },
-    {
-      "name": "markup",
-      "type": "registry:component"
-    },
-    {
-      "name": "main",
-      "type": "registry:component"
-    },
-    {
-      "name": "header",
-      "type": "registry:component"
-    },
-    {
-      "name": "footer",
-      "type": "registry:component"
-    },
-    {
-      "name": "aside",
-      "type": "registry:component"
-    },
-    {
-      "name": "article",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "ui",
-    "components",
-    "blocks",
-    "lib"
-  ],
-  "version": "1.0.0",
-  "lastUpdated": "2025-05-30T23:19:04.044Z"
-}

package/r/ui/button.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://buildy.tw/schema/registry-item.json",
-  "name": "button",
-  "type": "registry:ui",
-  "dependencies": [
-    "react",
-    "@radix-ui/react-slot",
-    "class-variance-authority"
-  ],
-  "devDependencies": [],
-  "files": [
-    {
-      "path": "packages/ui/src/ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }",
-      "target": "ui"
-    }
-  ]
-}

package/r/ui/card.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "https://buildy.tw/schema/registry-item.json",
-  "name": "card",
-  "type": "registry:ui",
-  "dependencies": [
-    "react"
-  ],
-  "devDependencies": [],
-  "files": [
-    {
-      "path": "packages/ui/src/ui/card.tsx",
-      "content": "import * as React from \"react\"\nimport { cn } from \"@/lib/utils\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-md border shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid-rows-[auto_auto] grid auto-rows-min items-start gap-1.5 mt-4 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-bold text-xl mb-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm mb-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardMeta({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"article-meta\"\n      className={cn(\n        \"flex flex-wrap items-center gap-3 text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFigure({\n  className,\n  ...props\n}: React.ComponentProps<\"figure\">) {\n  return (\n    <figure\n      data-slot=\"article-figure\"\n      className={cn(\n        \"overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardImage({\n  className,\n  ...props\n}: React.ComponentProps<\"img\">) {\n  return (\n    <img\n      data-slot=\"article-image\"\n      className={cn(\n        \"aspect-video w-full object-cover rounded-t-md\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardFigcaption({\n  className,\n  ...props\n}: React.ComponentProps<\"figcaption\">) {\n  return (\n    <figcaption\n      data-slot=\"article-figcaption\"\n      className={cn(\n        \"mt-2 text-center text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 py-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardMeta,\n  CardFigure,\n  CardImage,\n  CardFigcaption,\n  CardContent,\n}\n",
-      "target": "ui"
-    }
-  ]
-}