ui8kit 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/README.md +7 -38
  2. package/package.json +3 -2
  3. package/r/{semantic/index.json → index.json} +8 -3
  4. package/r/ui/button.json +19 -0
  5. package/r/ui/card.json +17 -0
  6. package/r/{utility/ui → ui}/input.json +1 -1
  7. package/r/schema/registry-item.json +0 -68
  8. package/r/schema/registry.json +0 -93
  9. package/r/schema.json +0 -60
  10. package/r/semantic/components/article.json +0 -17
  11. package/r/semantic/components/aside.json +0 -17
  12. package/r/semantic/components/footer.json +0 -17
  13. package/r/semantic/components/header.json +0 -17
  14. package/r/semantic/components/main.json +0 -17
  15. package/r/semantic/components/markup.json +0 -17
  16. package/r/semantic/components/media.json +0 -17
  17. package/r/semantic/components/nav.json +0 -18
  18. package/r/semantic/components/section.json +0 -17
  19. package/r/semantic/components/sheet.json +0 -18
  20. package/r/semantic/ui/alert.json +0 -18
  21. package/r/semantic/ui/avatar.json +0 -17
  22. package/r/semantic/ui/badge.json +0 -18
  23. package/r/semantic/ui/breadcrumb.json +0 -19
  24. package/r/semantic/ui/button.json +0 -18
  25. package/r/semantic/ui/card.json +0 -17
  26. package/r/semantic/ui/input.json +0 -17
  27. package/r/semantic/ui/label.json +0 -17
  28. package/r/semantic/ui/link.json +0 -18
  29. package/r/semantic/ui/skeleton.json +0 -15
  30. package/r/semantic/ui/table.json +0 -17
  31. package/r/semantic/ui/textarea.json +0 -17
  32. package/r/utility/blocks/hero-section.json +0 -15
  33. package/r/utility/index.json +0 -150
  34. package/r/utility/lib/utils.json +0 -18
  35. package/r/utility/templates/landing-page.json +0 -15
  36. package/r/utility/ui/button.json +0 -17
  37. package/r/utility/ui/card.json +0 -15
  38. /package/css/{dist → src}/semantic/alert.css +0 -0
  39. /package/css/{dist → src}/semantic/article.css +0 -0
  40. /package/css/{dist → src}/semantic/avatar.css +0 -0
  41. /package/css/{dist → src}/semantic/badge.css +0 -0
  42. /package/css/{dist → src}/semantic/breadcrumb.css +0 -0
  43. /package/css/{dist → src}/semantic/button.css +0 -0
  44. /package/css/{dist → src}/semantic/card.css +0 -0
  45. /package/css/{dist → src}/semantic/index.css +0 -0
  46. /package/css/{dist → src}/semantic/input.css +0 -0
  47. /package/css/{dist → src}/semantic/label.css +0 -0
  48. /package/css/{dist → src}/semantic/link.css +0 -0
  49. /package/css/{dist → src}/semantic/main.css +0 -0
  50. /package/css/{dist → src}/semantic/markup.css +0 -0
  51. /package/css/{dist → src}/semantic/nav.css +0 -0
  52. /package/css/{dist → src}/semantic/pagination.css +0 -0
  53. /package/css/{dist → src}/semantic/section.css +0 -0
  54. /package/css/{dist → src}/semantic/sheet.css +0 -0
  55. /package/css/{dist → src}/semantic/skeleton.css +0 -0
  56. /package/css/{dist → src}/semantic/table.css +0 -0
  57. /package/css/{dist → src}/semantic/textarea.css +0 -0
  58. /package/r/{utility/components → components}/article.json +0 -0
  59. /package/r/{utility/components → components}/aside.json +0 -0
  60. /package/r/{utility/components → components}/footer.json +0 -0
  61. /package/r/{utility/components → components}/header.json +0 -0
  62. /package/r/{utility/components → components}/main.json +0 -0
  63. /package/r/{utility/components → components}/markup.json +0 -0
  64. /package/r/{utility/components → components}/media.json +0 -0
  65. /package/r/{utility/components → components}/nav.json +0 -0
  66. /package/r/{utility/components → components}/navbar.json +0 -0
  67. /package/r/{utility/components → components}/section.json +0 -0
  68. /package/r/{utility/components → components}/sheet.json +0 -0
  69. /package/r/{semantic/lib → lib}/utils.json +0 -0
  70. /package/r/{utility/ui → ui}/alert.json +0 -0
  71. /package/r/{utility/ui → ui}/avatar.json +0 -0
  72. /package/r/{utility/ui → ui}/badge.json +0 -0
  73. /package/r/{utility/ui → ui}/breadcrumb.json +0 -0
  74. /package/r/{utility/ui → ui}/label.json +0 -0
  75. /package/r/{utility/ui → ui}/link.json +0 -0
  76. /package/r/{utility/ui → ui}/skeleton.json +0 -0
  77. /package/r/{utility/ui → ui}/table.json +0 -0
  78. /package/r/{utility/ui → ui}/textarea.json +0 -0
package/README.md CHANGED
@@ -121,44 +121,18 @@ module.exports = {
121
121
 
122
122
  **Note**: CDN links with `@import` URLs will remain as external references and won't be processed by Tailwind's build system.
123
123
 
124
- ### CDN Integration (only DEV Mode)
124
+ ### CDN Integration
125
125
 
126
126
  For projects that prefer CDN over CLI installation:
127
127
 
128
- #### Full Semantic Stylesheet
128
+ #### Compiled Semantic Stylesheet
129
129
  ```html
130
- <!-- Tailwind 4 CDN for DEV MODE -->
131
- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
132
- <!-- OR Tailwind 3 CDN for DEV MODE -->
133
- <script src="https://cdn.tailwindcss.com"></script>
134
-
135
- <!-- Load complete semantic components -->
136
- <link rel="stylesheet" href="https://unpkg.com/ui8kit@1.0.1/css/dist/semantic/index.css">
130
+ <!-- Load compiled semantic components -->
131
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/styles.css">
137
132
  <!-- OR -->
138
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/index.css">
139
- ```
140
-
141
- #### Individual Component Stylesheets
142
- ```html
143
- <!-- Load only specific components you need -->
144
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/button.css">
145
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/card.css">
146
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/input.css">
147
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/alert.css">
133
+ <link rel="stylesheet" href="https://unpkg.com/ui8kit@latest/css/dist/styles.css">
148
134
  ```
149
135
 
150
- #### Available Individual Components
151
- - `button.css` - Enhanced button styles
152
- - `card.css` - Card component layouts
153
- - `input.css` - Form input styling
154
- - `alert.css` - Alert and notification styles
155
- - `badge.css` - Badge and label components
156
- - `avatar.css` - User avatar components
157
- - `table.css` - Data table styling
158
- - `pagination.css` - Navigation pagination
159
- - `breadcrumb.css` - Navigation breadcrumbs
160
- - `skeleton.css` - Loading skeleton states
161
-
162
136
  ### Usage Examples
163
137
 
164
138
  #### With CLI Installation
@@ -181,13 +155,8 @@ function App() {
181
155
  <!DOCTYPE html>
182
156
  <html>
183
157
  <head>
184
- <!-- Tailwind 4 CDN for DEV MODE -->
185
- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
186
- <!-- OR Tailwind 3 CDN for DEV MODE -->
187
- <script src="https://cdn.tailwindcss.com"></script>
188
-
189
- <!-- Load semantic styles -->
190
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/index.css">
158
+ <!-- Load compiled semantic styles -->
159
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/styles.css">
191
160
  </head>
192
161
  <body>
193
162
  <!-- Use semantic classes directly -->
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "ui8kit",
3
- "version": "1.0.3",
4
- "description": "UI8Kit components registry for buildy-ui cli",
3
+ "version": "1.0.5",
4
+ "description": "UI8Kit components registry for buildy-ui CLI - published from npm to CDN",
5
5
  "main": "index.js",
6
6
  "files": [
7
7
  "*.css",
8
8
  "**/*.css",
9
9
  "semantic/",
10
10
  "dist/",
11
+ "src/",
11
12
  "r/",
12
13
  "index.json"
13
14
  ],
@@ -39,7 +39,7 @@
39
39
  {
40
40
  "name": "button",
41
41
  "type": "registry:ui",
42
- "description": "Simple arrays of button variant keys for semantic classes"
42
+ "description": ""
43
43
  },
44
44
  {
45
45
  "name": "breadcrumb",
@@ -49,7 +49,7 @@
49
49
  {
50
50
  "name": "badge",
51
51
  "type": "registry:ui",
52
- "description": "Simple array of badge variant keys for semantic classes"
52
+ "description": ""
53
53
  },
54
54
  {
55
55
  "name": "avatar",
@@ -71,6 +71,11 @@
71
71
  "type": "registry:component",
72
72
  "description": ""
73
73
  },
74
+ {
75
+ "name": "navbar",
76
+ "type": "registry:component",
77
+ "description": "A responsive navigation bar component with logo and menu items"
78
+ },
74
79
  {
75
80
  "name": "nav",
76
81
  "type": "registry:component",
@@ -125,6 +130,6 @@
125
130
  "templates"
126
131
  ],
127
132
  "version": "1.0.0",
128
- "lastUpdated": "2025-06-02T13:09:29.921Z",
133
+ "lastUpdated": "2025-06-11T09:34:40.175Z",
129
134
  "registry": "utility"
130
135
  }
@@ -0,0 +1,19 @@
1
+ {
2
+ "$schema": "https://buildy.tw/schema/registry-item.json",
3
+ "name": "button",
4
+ "type": "registry:ui",
5
+ "description": "",
6
+ "dependencies": [
7
+ "react",
8
+ "@radix-ui/react-slot",
9
+ "class-variance-authority"
10
+ ],
11
+ "devDependencies": [],
12
+ "files": [
13
+ {
14
+ "path": "utility/ui/button.tsx",
15
+ "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 }",
16
+ "target": "ui"
17
+ }
18
+ ]
19
+ }
package/r/ui/card.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "$schema": "https://buildy.tw/schema/registry-item.json",
3
+ "name": "card",
4
+ "type": "registry:ui",
5
+ "description": "",
6
+ "dependencies": [
7
+ "react"
8
+ ],
9
+ "devDependencies": [],
10
+ "files": [
11
+ {
12
+ "path": "utility/ui/card.tsx",
13
+ "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=\"card-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=\"card-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=\"card-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=\"card-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",
14
+ "target": "ui"
15
+ }
16
+ ]
17
+ }
@@ -10,7 +10,7 @@
10
10
  "files": [
11
11
  {
12
12
  "path": "utility/ui/input.tsx",
13
- "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 }",
13
+ "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 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 className\n )}\n {...props}\n />\n )\n}\n\nexport { Input }",
14
14
  "target": "ui"
15
15
  }
16
16
  ]
@@ -1,68 +0,0 @@
1
- {
2
- "$schema": "http://json-schema.org/draft-07/schema#",
3
- "title": "Buildy Registry Item",
4
- "description": "Schema for individual registry items in the UI8Kit component system",
5
- "type": "object",
6
- "properties": {
7
- "$schema": {
8
- "type": "string"
9
- },
10
- "name": {
11
- "type": "string"
12
- },
13
- "type": {
14
- "type": "string",
15
- "enum": [
16
- "registry:lib",
17
- "registry:block",
18
- "registry:component",
19
- "registry:ui",
20
- "registry:template"
21
- ]
22
- },
23
- "description": {
24
- "type": "string"
25
- },
26
- "dependencies": {
27
- "type": "array",
28
- "items": {
29
- "type": "string"
30
- },
31
- "default": []
32
- },
33
- "devDependencies": {
34
- "type": "array",
35
- "items": {
36
- "type": "string"
37
- },
38
- "default": []
39
- },
40
- "files": {
41
- "type": "array",
42
- "items": {
43
- "type": "object",
44
- "properties": {
45
- "path": {
46
- "type": "string"
47
- },
48
- "content": {
49
- "type": "string"
50
- },
51
- "target": {
52
- "type": "string"
53
- }
54
- },
55
- "required": [
56
- "path"
57
- ],
58
- "additionalProperties": false
59
- }
60
- }
61
- },
62
- "required": [
63
- "name",
64
- "type",
65
- "files"
66
- ],
67
- "additionalProperties": false
68
- }
@@ -1,93 +0,0 @@
1
- {
2
- "$schema": "http://json-schema.org/draft-07/schema#",
3
- "title": "Buildy Registry",
4
- "description": "Registry schema for UI8Kit component system",
5
- "type": "object",
6
- "properties": {
7
- "$schema": {
8
- "type": "string",
9
- "description": "JSON Schema URL"
10
- },
11
- "name": {
12
- "type": "string",
13
- "description": "Registry name"
14
- },
15
- "homepage": {
16
- "type": "string",
17
- "description": "Registry homepage URL"
18
- },
19
- "registry": {
20
- "type": "string",
21
- "enum": [
22
- "utility",
23
- "semantic",
24
- "theme"
25
- ],
26
- "description": "Registry type in UI8Kit architecture"
27
- },
28
- "version": {
29
- "type": "string",
30
- "description": "Registry version"
31
- },
32
- "lastUpdated": {
33
- "type": "string",
34
- "format": "date-time",
35
- "description": "Last update timestamp"
36
- },
37
- "categories": {
38
- "type": "array",
39
- "items": {
40
- "type": "string",
41
- "enum": [
42
- "ui",
43
- "components",
44
- "blocks",
45
- "lib",
46
- "templates"
47
- ]
48
- },
49
- "description": "Available component categories"
50
- },
51
- "components": {
52
- "type": "array",
53
- "items": {
54
- "type": "object",
55
- "properties": {
56
- "name": {
57
- "type": "string"
58
- },
59
- "type": {
60
- "type": "string",
61
- "enum": [
62
- "registry:lib",
63
- "registry:block",
64
- "registry:component",
65
- "registry:ui",
66
- "registry:template"
67
- ]
68
- },
69
- "description": {
70
- "type": "string"
71
- }
72
- },
73
- "required": [
74
- "name",
75
- "type"
76
- ],
77
- "additionalProperties": false
78
- },
79
- "description": "Component metadata for quick lookup"
80
- },
81
- "items": {
82
- "type": "array",
83
- "items": {
84
- "$ref": "https://buildy.tw/schema/registry-item.json"
85
- },
86
- "description": "Full component definitions"
87
- }
88
- },
89
- "required": [
90
- "items"
91
- ],
92
- "additionalProperties": false
93
- }
package/r/schema.json DELETED
@@ -1,60 +0,0 @@
1
- {
2
- "$schema": "http://json-schema.org/draft-07/schema#",
3
- "title": "Buildy Configuration",
4
- "description": "Configuration file for buildy CLI (UI8Kit structure)",
5
- "type": "object",
6
- "properties": {
7
- "$schema": {
8
- "type": "string",
9
- "description": "JSON Schema URL"
10
- },
11
- "framework": {
12
- "type": "string",
13
- "enum": [
14
- "vite-react"
15
- ],
16
- "description": "Target framework"
17
- },
18
- "typescript": {
19
- "type": "boolean",
20
- "default": true,
21
- "description": "Whether the project uses TypeScript"
22
- },
23
- "aliases": {
24
- "type": "object",
25
- "additionalProperties": {
26
- "type": "string"
27
- },
28
- "default": {
29
- "@": "./src",
30
- "@/components": "./utility/components",
31
- "@/ui": "./utility/ui",
32
- "@/blocks": "./utility/blocks",
33
- "@/lib": "./lib",
34
- "@/utility": "./utility",
35
- "@/semantic": "./semantic",
36
- "@/theme": "./theme"
37
- },
38
- "description": "Path aliases for imports in UI8Kit structure"
39
- },
40
- "registry": {
41
- "type": "string",
42
- "default": "@ui8kit",
43
- "description": "Default component registry"
44
- },
45
- "componentsDir": {
46
- "type": "string",
47
- "default": "./utility/ui",
48
- "description": "Directory where utility components will be installed"
49
- },
50
- "libDir": {
51
- "type": "string",
52
- "default": "./lib",
53
- "description": "Directory for utility libraries"
54
- }
55
- },
56
- "required": [
57
- "framework"
58
- ],
59
- "additionalProperties": false
60
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "article",
4
- "type": "registry:component",
5
- "description": "Helper function for determining styles that the parser will be able to process",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/article.tsx",
13
- "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\n className={cn(\"article\",\n\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\n className={cn(\"article-header\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleTitle({\n className,\n ...props\n}: React.ComponentProps<\"h3\">) {\n return (\n <h3\n\n className={cn(\"article-title\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleMeta({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"article-meta\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleTime({\n className,\n ...props\n}: React.ComponentProps<\"time\">) {\n return (\n <time\n\n className={cn(\"article-time\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleAuthor({\n className,\n ...props\n}: React.ComponentProps<\"address\">) {\n return (\n <address\n\n className={cn(\"article-author\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleFigure({\n className,\n ...props\n}: React.ComponentProps<\"figure\">) {\n return (\n <figure\n\n className={cn(\"article-figure\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleImage({\n className,\n ...props\n}: React.ComponentProps<\"img\">) {\n return (\n <img\n\n className={cn(\"article-image\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleFigcaption({\n className,\n ...props\n}: React.ComponentProps<\"figcaption\">) {\n return (\n <figcaption\n\n className={cn(\"article-figcaption\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleContent({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"article-content\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleBlockquote({\n className,\n ...props\n}: React.ComponentProps<\"blockquote\">) {\n return (\n <blockquote\n\n className={cn(\"article-blockquote\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleFooter({\n className,\n ...props\n}: React.ComponentProps<\"footer\">) {\n return (\n <footer\n\n className={cn(\"article-footer\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleTags({\n className,\n ...props\n}: React.ComponentProps<\"ul\">) {\n return (\n <ul\n\n className={cn(\"article-tags\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleTag({\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n\n className={cn(\"article-tag\",\n\n className\n )}\n {...props} />);\n\n\n}\n\nfunction ArticleActions({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"article-actions\",\n\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 };",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "aside",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/aside.tsx",
13
- "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 }",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "footer",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/footer.tsx",
13
- "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 }",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "header",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/header.tsx",
13
- "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 }",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "main",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/main.tsx",
13
- "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Main({ className, ...props }: React.ComponentProps<\"main\">) {\n return (\n <main\n\n className={cn(\"main\", className)}\n {...props} />);\n\n\n}\n\nMain.displayName = \"Main\";\n\nexport { Main };",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "markup",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/markup.tsx",
13
- "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction H1({ className, ...props }: React.ComponentProps<\"h1\">) {\n return (\n <h1\n\n className={cn(\"h1\", className)}\n {...props} />);\n\n\n}\n\nH1.displayName = \"H1\";\n\nfunction H2({ className, ...props }: React.ComponentProps<\"h2\">) {\n return (\n <h2\n\n className={cn(\"h2\", className)}\n {...props} />);\n\n\n}\n\nH2.displayName = \"H2\";\n\nfunction H3({ className, ...props }: React.ComponentProps<\"h3\">) {\n return (\n <h3\n\n className={cn(\"h3\", className)}\n {...props} />);\n\n\n}\n\nH3.displayName = \"H3\";\n\nfunction H4({ className, ...props }: React.ComponentProps<\"h4\">) {\n return (\n <h4\n\n className={cn(\"h4\", className)}\n {...props} />);\n\n\n}\n\nH4.displayName = \"H4\";\n\nfunction H5({ className, ...props }: React.ComponentProps<\"h5\">) {\n return (\n <h5\n\n className={cn(\"h5\", className)}\n {...props} />);\n\n\n}\n\nH5.displayName = \"H5\";\n\nfunction H6({ className, ...props }: React.ComponentProps<\"h6\">) {\n return (\n <h6\n\n className={cn(\"h6\", className)}\n {...props} />);\n\n\n}\n\nH6.displayName = \"H6\";\n\nfunction P({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n <p\n\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\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\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\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\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\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\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\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\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 };",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "media",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/media.tsx",
13
- "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 }",
14
- "target": "components"
15
- }
16
- ]
17
- }
@@ -1,18 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "nav",
4
- "type": "registry:component",
5
- "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 * ```",
6
- "dependencies": [
7
- "react",
8
- "lucide-react"
9
- ],
10
- "devDependencies": [],
11
- "files": [
12
- {
13
- "path": "semantic/components/nav.tsx",
14
- "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\n className={cn(\"nav\", 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\n className={cn(\"nav-layout\", 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\n className={cn(\"nav-bar\", 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\n className={cn(\"nav-list\", 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\n className={cn(\"nav-item\", 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\n data-active={active ? \"true\" : undefined}\n className={cn(\"nav-link\", 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\n className={cn(\"nav-dropdown\", 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\n className={cn(\"nav-dropdown-content\")}>\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\n className={cn(\"nav-dropdown-item\", 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\n className={cn(\"nav-trigger\", 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\n className={cn(\"nav-mobile\", 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\n className={cn(\"nav-mobile-list\", 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\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\n data-active={active ? \"true\" : undefined}\n className={cn(\"nav-mobile-link\",\n\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\n className={cn(\"nav-mobile-dropdown-item\",\n\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\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\n className={cn(\"nav-group\", 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\n className={cn(\"nav-group-buttons\", 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 };",
15
- "target": "components"
16
- }
17
- ]
18
- }
@@ -1,17 +0,0 @@
1
- {
2
- "$schema": "https://buildy.tw/schema/registry-item.json",
3
- "name": "section",
4
- "type": "registry:component",
5
- "description": "",
6
- "dependencies": [
7
- "react"
8
- ],
9
- "devDependencies": [],
10
- "files": [
11
- {
12
- "path": "semantic/components/section.tsx",
13
- "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\n className={cn(\"section\", className)}\n {...props} />);\n\n\n}\n\nSection.displayName = \"Section\";\n\nfunction Container({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"container\", className)}\n {...props} />);\n\n\n}\n\nContainer.displayName = \"Container\";\n\nfunction FullWidth({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"full-width\", className)}\n {...props} />);\n\n\n}\n\nFullWidth.displayName = \"FullWidth\";\n\nfunction SectionHeader({ className, ...props }: React.ComponentProps<\"header\">) {\n return (\n <header\n\n className={cn(\"section-header\", className)}\n {...props} />);\n\n\n}\n\nSectionHeader.displayName = \"SectionHeader\";\n\nfunction SectionTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n return (\n <h2\n\n className={cn(\"section-title\", className)}\n {...props} />);\n\n\n}\n\nSectionTitle.displayName = \"SectionTitle\";\n\nfunction SectionDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"section-description\", className)}\n {...props} />);\n\n\n}\n\nSectionDescription.displayName = \"SectionDescription\";\n\nfunction SectionFooter({ className, ...props }: React.ComponentProps<\"footer\">) {\n return (\n <footer\n\n className={cn(\"section-footer\", className)}\n {...props} />);\n\n\n}\n\nSectionFooter.displayName = \"SectionFooter\";\n\nfunction SectionContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"section-content\", className)}\n {...props} />);\n\n\n}\n\nSectionContent.displayName = \"SectionContent\";\n\nfunction Row({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"row\", className)}\n {...props} />);\n\n\n}\n\nRow.displayName = \"Row\";\n\nfunction Col({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"col\", className)}\n {...props} />);\n\n\n}\n\nCol.displayName = \"Col\";\n\nfunction Grid({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n\n className={cn(\"grid\", className)}\n {...props} />);\n\n\n}\n\nGrid.displayName = \"Grid\";\n\nexport { Section, Container, FullWidth, Row, Col, Grid, SectionContent, SectionHeader, SectionTitle, SectionDescription, SectionFooter };",
14
- "target": "components"
15
- }
16
- ]
17
- }