@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

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 (184) hide show
  1. package/AI_GUIDE.md +6518 -0
  2. package/llms.txt +6518 -0
  3. package/package.json +1098 -4
  4. package/src/core/index.ts +2 -0
  5. package/src/core/tailwind-preset.cjs +62 -0
  6. package/src/core/tailwind-preset.ts +85 -0
  7. package/src/core/theme/tokens.css +663 -0
  8. package/src/core/types.ts +836 -0
  9. package/src/index.ts +17 -0
  10. package/src/tailwind-preset.cjs +62 -0
  11. package/src/tailwind-preset.ts +85 -0
  12. package/src/types.ts +1 -0
  13. package/src/web/accordion/AI_GUIDE.md +149 -0
  14. package/src/web/accordion/accordion.css +1 -0
  15. package/src/web/accordion/accordion.tsx +430 -0
  16. package/src/web/accordion/index.ts +3 -0
  17. package/src/web/accordion/manifest.json +351 -0
  18. package/src/web/alert/AI_GUIDE.md +139 -0
  19. package/src/web/alert/alert.css +1 -0
  20. package/src/web/alert/alert.tsx +318 -0
  21. package/src/web/alert/index.ts +3 -0
  22. package/src/web/alert/manifest.json +240 -0
  23. package/src/web/avatar/AI_GUIDE.md +118 -0
  24. package/src/web/avatar/avatar.css +1 -0
  25. package/src/web/avatar/avatar.tsx +233 -0
  26. package/src/web/avatar/index.ts +3 -0
  27. package/src/web/avatar/manifest.json +195 -0
  28. package/src/web/badge/AI_GUIDE.md +94 -0
  29. package/src/web/badge/badge.css +1 -0
  30. package/src/web/badge/badge.tsx +140 -0
  31. package/src/web/badge/index.ts +2 -0
  32. package/src/web/badge/manifest.json +141 -0
  33. package/src/web/banner/AI_GUIDE.md +130 -0
  34. package/src/web/banner/banner.css +1 -0
  35. package/src/web/banner/banner.tsx +334 -0
  36. package/src/web/banner/index.ts +3 -0
  37. package/src/web/banner/manifest.json +240 -0
  38. package/src/web/breadcrumb/AI_GUIDE.md +120 -0
  39. package/src/web/breadcrumb/breadcrumb.css +1 -0
  40. package/src/web/breadcrumb/breadcrumb.tsx +306 -0
  41. package/src/web/breadcrumb/index.ts +3 -0
  42. package/src/web/breadcrumb/manifest.json +225 -0
  43. package/src/web/button/AI_GUIDE.md +121 -0
  44. package/src/web/button/button.css +1 -0
  45. package/src/web/button/button.tsx +287 -0
  46. package/src/web/button/index.ts +2 -0
  47. package/src/web/button/manifest.json +177 -0
  48. package/src/web/calendar/AI_GUIDE.md +151 -0
  49. package/src/web/calendar/calendar.css +1 -0
  50. package/src/web/calendar/calendar.tsx +1611 -0
  51. package/src/web/calendar/index.ts +3 -0
  52. package/src/web/calendar/manifest.json +470 -0
  53. package/src/web/card/AI_GUIDE.md +133 -0
  54. package/src/web/card/card.css +1 -0
  55. package/src/web/card/card.tsx +408 -0
  56. package/src/web/card/index.ts +4 -0
  57. package/src/web/card/manifest.json +357 -0
  58. package/src/web/checkbox/AI_GUIDE.md +146 -0
  59. package/src/web/checkbox/checkbox.css +1 -0
  60. package/src/web/checkbox/checkbox.tsx +307 -0
  61. package/src/web/checkbox/index.ts +2 -0
  62. package/src/web/checkbox/manifest.json +294 -0
  63. package/src/web/chip/AI_GUIDE.md +186 -0
  64. package/src/web/chip/chip.css +1 -0
  65. package/src/web/chip/chip.tsx +230 -0
  66. package/src/web/chip/index.ts +2 -0
  67. package/src/web/chip/manifest.json +186 -0
  68. package/src/web/dropdown/AI_GUIDE.md +167 -0
  69. package/src/web/dropdown/dropdown.css +1 -0
  70. package/src/web/dropdown/dropdown.tsx +1274 -0
  71. package/src/web/dropdown/index.ts +3 -0
  72. package/src/web/dropdown/manifest.json +576 -0
  73. package/src/web/flex/AI_GUIDE.md +113 -0
  74. package/src/web/flex/flex-item.tsx +97 -0
  75. package/src/web/flex/flex.css +1 -0
  76. package/src/web/flex/flex.tsx +108 -0
  77. package/src/web/flex/index.ts +5 -0
  78. package/src/web/flex/manifest.json +162 -0
  79. package/src/web/form/index.ts +7 -0
  80. package/src/web/grid/AI_GUIDE.md +112 -0
  81. package/src/web/grid/grid-item.tsx +112 -0
  82. package/src/web/grid/grid.css +1 -0
  83. package/src/web/grid/grid.tsx +99 -0
  84. package/src/web/grid/index.ts +5 -0
  85. package/src/web/grid/manifest.json +153 -0
  86. package/src/web/index.ts +86 -0
  87. package/src/web/input/AI_GUIDE.md +159 -0
  88. package/src/web/input/index.ts +3 -0
  89. package/src/web/input/input.css +1 -0
  90. package/src/web/input/input.tsx +537 -0
  91. package/src/web/input/manifest.json +465 -0
  92. package/src/web/input-number/AI_GUIDE.md +164 -0
  93. package/src/web/input-number/index.ts +3 -0
  94. package/src/web/input-number/input-number.css +1 -0
  95. package/src/web/input-number/input-number.tsx +1193 -0
  96. package/src/web/input-number/manifest.json +575 -0
  97. package/src/web/modal/AI_GUIDE.md +171 -0
  98. package/src/web/modal/index.ts +3 -0
  99. package/src/web/modal/manifest.json +375 -0
  100. package/src/web/modal/modal.css +1 -0
  101. package/src/web/modal/modal.tsx +571 -0
  102. package/src/web/pagination/AI_GUIDE.md +148 -0
  103. package/src/web/pagination/index.ts +21 -0
  104. package/src/web/pagination/manifest.json +432 -0
  105. package/src/web/pagination/pagination-content.tsx +45 -0
  106. package/src/web/pagination/pagination-ellipsis.tsx +54 -0
  107. package/src/web/pagination/pagination-first.tsx +155 -0
  108. package/src/web/pagination/pagination-item.tsx +45 -0
  109. package/src/web/pagination/pagination-last.tsx +155 -0
  110. package/src/web/pagination/pagination-link.tsx +121 -0
  111. package/src/web/pagination/pagination-next.tsx +158 -0
  112. package/src/web/pagination/pagination-previous.tsx +158 -0
  113. package/src/web/pagination/pagination.css +1 -0
  114. package/src/web/pagination/pagination.tsx +687 -0
  115. package/src/web/popover/AI_GUIDE.md +163 -0
  116. package/src/web/popover/index.ts +3 -0
  117. package/src/web/popover/manifest.json +396 -0
  118. package/src/web/popover/popover.css +1 -0
  119. package/src/web/popover/popover.tsx +702 -0
  120. package/src/web/radio/AI_GUIDE.md +155 -0
  121. package/src/web/radio/index.ts +2 -0
  122. package/src/web/radio/manifest.json +294 -0
  123. package/src/web/radio/radio.css +1 -0
  124. package/src/web/radio/radio.tsx +290 -0
  125. package/src/web/selectbox/AI_GUIDE.md +216 -0
  126. package/src/web/selectbox/index.ts +3 -0
  127. package/src/web/selectbox/manifest.json +477 -0
  128. package/src/web/selectbox/selectbox.css +1 -0
  129. package/src/web/selectbox/selectbox.tsx +1048 -0
  130. package/src/web/sonner/AI_GUIDE.md +98 -0
  131. package/src/web/sonner/index.ts +114 -0
  132. package/src/web/sonner/manifest.json +132 -0
  133. package/src/web/sonner/sonner.css +1 -0
  134. package/src/web/sonner/sonner.tsx +177 -0
  135. package/src/web/table/AI_GUIDE.md +145 -0
  136. package/src/web/table/index.ts +35 -0
  137. package/src/web/table/manifest.json +168 -0
  138. package/src/web/table/table-body.tsx +45 -0
  139. package/src/web/table/table-caption.tsx +45 -0
  140. package/src/web/table/table-cell.tsx +74 -0
  141. package/src/web/table/table-empty.tsx +108 -0
  142. package/src/web/table/table-footer.tsx +45 -0
  143. package/src/web/table/table-head.tsx +80 -0
  144. package/src/web/table/table-header.tsx +45 -0
  145. package/src/web/table/table-row.tsx +69 -0
  146. package/src/web/table/table.css +1 -0
  147. package/src/web/table/table.tsx +305 -0
  148. package/src/web/tabs/AI_GUIDE.md +150 -0
  149. package/src/web/tabs/index.ts +3 -0
  150. package/src/web/tabs/manifest.json +315 -0
  151. package/src/web/tabs/tabs.css +1 -0
  152. package/src/web/tabs/tabs.tsx +332 -0
  153. package/src/web/text/AI_GUIDE.md +129 -0
  154. package/src/web/text/index.ts +3 -0
  155. package/src/web/text/manifest.json +195 -0
  156. package/src/web/text/text.css +1 -0
  157. package/src/web/text/text.tsx +689 -0
  158. package/src/web/textarea/AI_GUIDE.md +141 -0
  159. package/src/web/textarea/index.ts +3 -0
  160. package/src/web/textarea/manifest.json +438 -0
  161. package/src/web/textarea/textarea.css +1 -0
  162. package/src/web/textarea/textarea.tsx +467 -0
  163. package/src/web/tooltip/AI_GUIDE.md +110 -0
  164. package/src/web/tooltip/index.ts +3 -0
  165. package/src/web/tooltip/manifest.json +222 -0
  166. package/src/web/tooltip/tooltip.css +1 -0
  167. package/src/web/tooltip/tooltip.tsx +423 -0
  168. package/src/webview/bottomsheet/AI_GUIDE.md +141 -0
  169. package/src/webview/bottomsheet/bottomsheet.css +1 -0
  170. package/src/webview/bottomsheet/bottomsheet.tsx +603 -0
  171. package/src/webview/bottomsheet/index.ts +4 -0
  172. package/src/webview/bottomsheet/manifest.json +377 -0
  173. package/src/webview/button/AI_GUIDE.md +79 -0
  174. package/src/webview/button/button-ios.css +1 -0
  175. package/src/webview/button/button-ios.tsx +138 -0
  176. package/src/webview/button/button-material.css +1 -0
  177. package/src/webview/button/button-material.tsx +138 -0
  178. package/src/webview/button/index.ts +7 -0
  179. package/src/webview/button/manifest.json +148 -0
  180. package/src/webview/index.ts +7 -0
  181. package/tailwind-preset.cjs +62 -0
  182. package/tailwind-preset.js +62 -0
  183. package/ttdk-manifest.json +10188 -0
  184. package/README.md +0 -3
package/src/core/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./types";
2
+ export * from "./tailwind-preset";
package/src/core/tailwind-preset.cjs ADDED
@@ -0,0 +1,62 @@
1
+ /**
2
+ * TTDK Design System — Official Tailwind CSS Preset (CommonJS)
3
+ */
4
+ module.exports = {
5
+ theme: {
6
+ extend: {
7
+ spacing: {
8
+ "0": "var(--ttdk-spacing-0, 0px)",
9
+ "2": "var(--ttdk-spacing-2, 2px)",
10
+ "4": "var(--ttdk-spacing-4, 4px)",
11
+ "6": "var(--ttdk-spacing-6, 6px)",
12
+ "8": "var(--ttdk-spacing-8, 8px)",
13
+ "12": "var(--ttdk-spacing-12, 12px)",
14
+ "16": "var(--ttdk-spacing-16, 16px)",
15
+ "20": "var(--ttdk-spacing-20, 20px)",
16
+ "24": "var(--ttdk-spacing-24, 24px)",
17
+ "32": "var(--ttdk-spacing-32, 32px)",
18
+ "48": "var(--ttdk-spacing-48, 48px)",
19
+ "64": "var(--ttdk-spacing-64, 64px)",
20
+ "96": "var(--ttdk-spacing-96, 96px)",
21
+ },
22
+ boxShadow: {
23
+ "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
24
+ "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
25
+ "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
26
+ "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
27
+ "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
28
+ "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
29
+ "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
30
+ },
31
+ maxWidth: {
32
+ "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
33
+ "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
34
+ },
35
+ colors: {
36
+ ttdk: {
37
+ primary: {
38
+ DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
39
+ hover: "var(--ttdk-brand-strong, #128f8a)",
40
+ subtle: "var(--ttdk-brand-subtle, #b8edea)",
41
+ },
42
+ accent: {
43
+ DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
44
+ hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
45
+ },
46
+ surface: {
47
+ DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
48
+ subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
49
+ dark: "var(--ttdk-color-neutral-black, #141313)",
50
+ },
51
+ border: {
52
+ DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
53
+ dark: "var(--ttdk-stroke-subtle, #313336)",
54
+ },
55
+ },
56
+ },
57
+ fontFamily: {
58
+ sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
59
+ },
60
+ },
61
+ },
62
+ };
package/src/core/tailwind-preset.ts ADDED
@@ -0,0 +1,85 @@
1
+ /**
2
+ * TTDK Design System — Official Tailwind CSS Preset
3
+ *
4
+ * Maps all design tokens (colors, spacing scale, shadows, breakpoints)
5
+ * to standard Tailwind CSS theme configuration.
6
+ *
7
+ * Usage in tailwind.config.js / tailwind.config.ts:
8
+ * ```js
9
+ * module.exports = {
10
+ * presets: [require('@ttdk-design-system/library-vue/tailwind-preset')],
11
+ * content: ['./src/**\/*.{vue,js,ts,jsx,tsx}']
12
+ * }
13
+ * ```
14
+ */
15
+
16
+ export const ttdkTailwindPreset = {
17
+ theme: {
18
+ extend: {
19
+ // 1. Spacing Scale TTDK (0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 96)
20
+ spacing: {
21
+ "0": "var(--ttdk-spacing-0, 0px)",
22
+ "2": "var(--ttdk-spacing-2, 2px)",
23
+ "4": "var(--ttdk-spacing-4, 4px)",
24
+ "6": "var(--ttdk-spacing-6, 6px)",
25
+ "8": "var(--ttdk-spacing-8, 8px)",
26
+ "12": "var(--ttdk-spacing-12, 12px)",
27
+ "16": "var(--ttdk-spacing-16, 16px)",
28
+ "20": "var(--ttdk-spacing-20, 20px)",
29
+ "24": "var(--ttdk-spacing-24, 24px)",
30
+ "32": "var(--ttdk-spacing-32, 32px)",
31
+ "48": "var(--ttdk-spacing-48, 48px)",
32
+ "64": "var(--ttdk-spacing-64, 64px)",
33
+ "96": "var(--ttdk-spacing-96, 96px)",
34
+ },
35
+
36
+ // 2. Shadows & Elevation TTDK
37
+ boxShadow: {
38
+ "ttdk-sm": "var(--ttdk-shadow-sm, 0px 1px 10px 0px rgba(0, 0, 0, 0.08))",
39
+ "ttdk-md": "var(--ttdk-shadow-md, 0px 1px 15px 0px rgba(0, 0, 0, 0.1))",
40
+ "ttdk-lg": "var(--ttdk-shadow-lg, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
41
+ "ttdk-top": "var(--ttdk-shadow-top, 0px 4px 12px 0px rgba(48, 49, 53, 0.2))",
42
+ "ttdk-bottom": "var(--ttdk-shadow-bottom, 0px 4px 16px 0px rgba(0, 0, 0, 0.08))",
43
+ "ttdk-right": "var(--ttdk-shadow-right, 4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
44
+ "ttdk-left": "var(--ttdk-shadow-left, -4px 0px 16px 0px rgba(0, 0, 0, 0.08))",
45
+ },
46
+
47
+ // 3. Responsive Container Widths
48
+ maxWidth: {
49
+ "ttdk-mobile": "var(--ttdk-grid-mobile-container, 328px)",
50
+ "ttdk-desktop": "var(--ttdk-grid-desktop-container, 1128px)",
51
+ },
52
+
53
+ // 4. Semantic & Brand Colors
54
+ colors: {
55
+ ttdk: {
56
+ primary: {
57
+ DEFAULT: "var(--ttdk-brand-default, #16b3ac)",
58
+ hover: "var(--ttdk-brand-strong, #128f8a)",
59
+ subtle: "var(--ttdk-brand-subtle, #b8edea)",
60
+ },
61
+ accent: {
62
+ DEFAULT: "var(--ttdk-color-brand-blue-500, #3899fe)",
63
+ hover: "var(--ttdk-color-brand-blue-600, #1e81e8)",
64
+ },
65
+ surface: {
66
+ DEFAULT: "var(--ttdk-bg-base-primary, #ffffff)",
67
+ subtle: "var(--ttdk-bg-secondary-disabled, #f1f2f3)",
68
+ dark: "var(--ttdk-color-neutral-black, #141313)",
69
+ },
70
+ border: {
71
+ DEFAULT: "var(--ttdk-stroke-subtle, #e4e5e7)",
72
+ dark: "var(--ttdk-stroke-subtle, #313336)",
73
+ },
74
+ },
75
+ },
76
+
77
+ // 5. Typography
78
+ fontFamily: {
79
+ sans: ["Manrope", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"],
80
+ },
81
+ },
82
+ },
83
+ };
84
+
85
+ export default ttdkTailwindPreset;