@diyet24/design-system 0.1.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 (15) hide show
  1. package/README.md +592 -0
  2. package/dist/index.cjs +32288 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +1068 -0
  5. package/dist/index.d.ts +1068 -0
  6. package/dist/index.js +32042 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/styles.css +890 -0
  9. package/dist/tailwind/index.cjs +301 -0
  10. package/dist/tailwind/index.cjs.map +1 -0
  11. package/dist/tailwind/index.d.cts +583 -0
  12. package/dist/tailwind/index.d.ts +583 -0
  13. package/dist/tailwind/index.js +287 -0
  14. package/dist/tailwind/index.js.map +1 -0
  15. package/package.json +145 -0
package/dist/tailwind/index.js ADDED
@@ -0,0 +1,287 @@
1
+ // src/tailwind/index.ts
2
+ var colors = {
3
+ // Brand Colors - using CSS variables from styles/index.css
4
+ primary: {
5
+ DEFAULT: "var(--color-primary)",
6
+ foreground: "var(--primary-foreground)",
7
+ 100: "var(--color-primary-100)",
8
+ 200: "var(--color-primary-200)",
9
+ 300: "var(--color-primary-300)",
10
+ 400: "var(--color-primary-400)",
11
+ 500: "var(--color-primary-500)",
12
+ 600: "var(--color-primary-600)",
13
+ 700: "var(--color-primary-700)",
14
+ 800: "var(--color-primary-800)",
15
+ 900: "var(--color-primary-900)"
16
+ },
17
+ secondary: {
18
+ DEFAULT: "var(--color-secondary)",
19
+ foreground: "var(--secondary-foreground)",
20
+ 100: "var(--color-secondary-100)",
21
+ 200: "var(--color-secondary-200)",
22
+ 300: "var(--color-secondary-300)",
23
+ 400: "var(--color-secondary-400)",
24
+ 500: "var(--color-secondary-500)",
25
+ 600: "var(--color-secondary-600)",
26
+ 700: "var(--color-secondary-700)",
27
+ 800: "var(--color-secondary-800)",
28
+ 900: "var(--color-secondary-900)"
29
+ },
30
+ success: {
31
+ DEFAULT: "var(--color-success)",
32
+ 100: "var(--color-success-100)",
33
+ 200: "var(--color-success-200)",
34
+ 300: "var(--color-success-300)",
35
+ 400: "var(--color-success-400)",
36
+ 500: "var(--color-success-500)",
37
+ 600: "var(--color-success-600)",
38
+ 700: "var(--color-success-700)",
39
+ 800: "var(--color-success-800)",
40
+ 900: "var(--color-success-900)"
41
+ },
42
+ warning: {
43
+ DEFAULT: "var(--color-warning)",
44
+ 100: "var(--color-warning-100)",
45
+ 200: "var(--color-warning-200)",
46
+ 300: "var(--color-warning-300)",
47
+ 400: "var(--color-warning-400)",
48
+ 500: "var(--color-warning-500)",
49
+ 600: "var(--color-warning-600)",
50
+ 700: "var(--color-warning-700)",
51
+ 800: "var(--color-warning-800)",
52
+ 900: "var(--color-warning-900)"
53
+ },
54
+ danger: {
55
+ DEFAULT: "var(--color-danger)",
56
+ 100: "var(--color-danger-100)",
57
+ 200: "var(--color-danger-200)",
58
+ 300: "var(--color-danger-300)",
59
+ 400: "var(--color-danger-400)",
60
+ 500: "var(--color-danger-500)",
61
+ 600: "var(--color-danger-600)",
62
+ 700: "var(--color-danger-700)",
63
+ 800: "var(--color-danger-800)",
64
+ 900: "var(--color-danger-900)"
65
+ },
66
+ info: {
67
+ DEFAULT: "var(--color-info)",
68
+ 100: "var(--color-info-100)",
69
+ 200: "var(--color-info-200)",
70
+ 300: "var(--color-info-300)",
71
+ 400: "var(--color-info-400)",
72
+ 500: "var(--color-info-500)",
73
+ 600: "var(--color-info-600)",
74
+ 700: "var(--color-info-700)",
75
+ 800: "var(--color-info-800)",
76
+ 900: "var(--color-info-900)"
77
+ },
78
+ main: {
79
+ DEFAULT: "var(--color-main)",
80
+ foreground: "var(--main-foreground)",
81
+ 100: "var(--color-main-100)",
82
+ 200: "var(--color-main-200)",
83
+ 300: "var(--color-main-300)",
84
+ 400: "var(--color-main-400)",
85
+ 500: "var(--color-main-500)",
86
+ 600: "var(--color-main-600)",
87
+ 700: "var(--color-main-700)",
88
+ 800: "var(--color-main-800)",
89
+ 900: "var(--color-main-900)"
90
+ },
91
+ // Semantic aliases - shadcn/ui compatibility
92
+ background: "var(--color-background)",
93
+ foreground: "var(--color-foreground)",
94
+ card: {
95
+ DEFAULT: "var(--color-card)",
96
+ foreground: "var(--color-card-foreground)"
97
+ },
98
+ popover: {
99
+ DEFAULT: "var(--color-popover)",
100
+ foreground: "var(--color-popover-foreground)"
101
+ },
102
+ muted: {
103
+ DEFAULT: "var(--color-muted)",
104
+ foreground: "var(--color-muted-foreground)"
105
+ },
106
+ accent: {
107
+ DEFAULT: "var(--color-accent)",
108
+ foreground: "var(--color-accent-foreground)"
109
+ },
110
+ destructive: {
111
+ DEFAULT: "var(--color-destructive)",
112
+ foreground: "var(--color-destructive-foreground)"
113
+ },
114
+ border: "var(--color-border)",
115
+ input: "var(--color-input)",
116
+ ring: "var(--color-ring)",
117
+ // Chart colors
118
+ chart: {
119
+ 1: "var(--color-chart-1)",
120
+ 2: "var(--color-chart-2)",
121
+ 3: "var(--color-chart-3)",
122
+ 4: "var(--color-chart-4)",
123
+ 5: "var(--color-chart-5)"
124
+ },
125
+ // Sidebar colors
126
+ sidebar: {
127
+ DEFAULT: "var(--color-sidebar)",
128
+ foreground: "var(--color-sidebar-foreground)",
129
+ primary: "var(--color-sidebar-primary)",
130
+ "primary-foreground": "var(--color-sidebar-primary-foreground)",
131
+ accent: "var(--color-sidebar-accent)",
132
+ "accent-foreground": "var(--color-sidebar-accent-foreground)",
133
+ border: "var(--color-sidebar-border)",
134
+ ring: "var(--color-sidebar-ring)"
135
+ }
136
+ };
137
+ var fontFamily = {
138
+ sans: [
139
+ "Inter",
140
+ "ui-sans-serif",
141
+ "system-ui",
142
+ "sans-serif",
143
+ "Apple Color Emoji",
144
+ "Segoe UI Emoji",
145
+ "Segoe UI Symbol",
146
+ "Noto Color Emoji"
147
+ ],
148
+ mono: [
149
+ "JetBrains Mono",
150
+ "ui-monospace",
151
+ "SFMono-Regular",
152
+ "Menlo",
153
+ "Monaco",
154
+ "Consolas",
155
+ "Liberation Mono",
156
+ "Courier New",
157
+ "monospace"
158
+ ],
159
+ heading: [
160
+ "Inter",
161
+ "ui-sans-serif",
162
+ "system-ui",
163
+ "sans-serif"
164
+ ]
165
+ };
166
+ var fontSize = {
167
+ xs: ["0.75rem", { lineHeight: "1rem" }],
168
+ sm: ["0.875rem", { lineHeight: "1.25rem" }],
169
+ base: ["1rem", { lineHeight: "1.5rem" }],
170
+ lg: ["1.125rem", { lineHeight: "1.75rem" }],
171
+ xl: ["1.25rem", { lineHeight: "1.75rem" }],
172
+ "2xl": ["1.5rem", { lineHeight: "2rem" }],
173
+ "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
174
+ "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
175
+ "5xl": ["3rem", { lineHeight: "1" }],
176
+ "6xl": ["3.75rem", { lineHeight: "1" }]
177
+ };
178
+ var borderRadius = {
179
+ none: "0",
180
+ sm: "0.125rem",
181
+ DEFAULT: "0.25rem",
182
+ md: "0.375rem",
183
+ lg: "0.5rem",
184
+ xl: "0.75rem",
185
+ "2xl": "1rem",
186
+ "3xl": "1.5rem",
187
+ full: "9999px"
188
+ };
189
+ var boxShadow = {
190
+ xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
191
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
192
+ DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
193
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
194
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
195
+ xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
196
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
197
+ inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
198
+ none: "none",
199
+ // Brand color shadows
200
+ "primary-sm": "var(--shadow-sm-primary)",
201
+ "primary-md": "var(--shadow-md-primary)",
202
+ "primary-lg": "var(--shadow-lg-primary)",
203
+ "secondary-sm": "var(--shadow-sm-secondary)",
204
+ "secondary-md": "var(--shadow-md-secondary)",
205
+ "secondary-lg": "var(--shadow-lg-secondary)",
206
+ "success-sm": "var(--shadow-sm-success)",
207
+ "success-md": "var(--shadow-md-success)",
208
+ "success-lg": "var(--shadow-lg-success)",
209
+ "warning-sm": "var(--shadow-sm-warning)",
210
+ "warning-md": "var(--shadow-md-warning)",
211
+ "warning-lg": "var(--shadow-lg-warning)",
212
+ "danger-sm": "var(--shadow-sm-danger)",
213
+ "danger-md": "var(--shadow-md-danger)",
214
+ "danger-lg": "var(--shadow-lg-danger)",
215
+ "info-sm": "var(--shadow-sm-info)",
216
+ "info-md": "var(--shadow-md-info)",
217
+ "info-lg": "var(--shadow-lg-info)",
218
+ "main-sm": "var(--shadow-sm-main)",
219
+ "main-md": "var(--shadow-md-main)",
220
+ "main-lg": "var(--shadow-lg-main)"
221
+ };
222
+ var zIndex = {
223
+ dropdown: "1000",
224
+ sticky: "1020",
225
+ fixed: "1030",
226
+ "modal-backdrop": "1040",
227
+ modal: "1050",
228
+ popover: "1060",
229
+ tooltip: "1070"
230
+ };
231
+ var screens = {
232
+ xs: "20rem",
233
+ sm: "40rem",
234
+ md: "48rem",
235
+ lg: "64rem",
236
+ xl: "80rem",
237
+ "2xl": "96rem"
238
+ };
239
+ var keyframes = {
240
+ // Accordion animations
241
+ "accordion-down": {
242
+ from: { height: "0", opacity: "0" },
243
+ to: { height: "var(--radix-accordion-content-height)", opacity: "1" }
244
+ },
245
+ "accordion-up": {
246
+ from: { height: "var(--radix-accordion-content-height)", opacity: "1" },
247
+ to: { height: "0", opacity: "0" }
248
+ },
249
+ // Collapsible animations
250
+ "collapsible-down": {
251
+ from: { height: "0", opacity: "0" },
252
+ to: { height: "var(--radix-collapsible-content-height)", opacity: "1" }
253
+ },
254
+ "collapsible-up": {
255
+ from: { height: "var(--radix-collapsible-content-height)", opacity: "1" },
256
+ to: { height: "0", opacity: "0" }
257
+ }
258
+ };
259
+ var animation = {
260
+ "accordion-down": "accordion-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
261
+ "accordion-up": "accordion-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
262
+ "collapsible-down": "collapsible-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
263
+ "collapsible-up": "collapsible-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
264
+ // Dropdown, Select, Popover animations
265
+ "in": "fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)",
266
+ "out": "fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1)"
267
+ };
268
+ var themePreset = {
269
+ theme: {
270
+ extend: {
271
+ colors,
272
+ fontFamily,
273
+ fontSize,
274
+ borderRadius,
275
+ boxShadow,
276
+ zIndex,
277
+ screens,
278
+ keyframes,
279
+ animation
280
+ }
281
+ }
282
+ };
283
+ var tailwind_default = themePreset;
284
+
285
+ export { animation, borderRadius, boxShadow, colors, tailwind_default as default, fontFamily, fontSize, keyframes, screens, themePreset, zIndex };
286
+ //# sourceMappingURL=index.js.map
287
+ //# sourceMappingURL=index.js.map
package/dist/tailwind/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/tailwind/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Diyet24 Design System - Tailwind CSS Theme Configuration\n * \n * This module exports the design system theme values for use in\n * consuming applications' Tailwind configurations.\n * \n * These colors reference CSS variables defined in styles/index.css\n */\n\nexport const colors = {\n // Brand Colors - using CSS variables from styles/index.css\n primary: {\n DEFAULT: 'var(--color-primary)',\n foreground: 'var(--primary-foreground)',\n 100: 'var(--color-primary-100)',\n 200: 'var(--color-primary-200)',\n 300: 'var(--color-primary-300)',\n 400: 'var(--color-primary-400)',\n 500: 'var(--color-primary-500)',\n 600: 'var(--color-primary-600)',\n 700: 'var(--color-primary-700)',\n 800: 'var(--color-primary-800)',\n 900: 'var(--color-primary-900)',\n },\n secondary: {\n DEFAULT: 'var(--color-secondary)',\n foreground: 'var(--secondary-foreground)',\n 100: 'var(--color-secondary-100)',\n 200: 'var(--color-secondary-200)',\n 300: 'var(--color-secondary-300)',\n 400: 'var(--color-secondary-400)',\n 500: 'var(--color-secondary-500)',\n 600: 'var(--color-secondary-600)',\n 700: 'var(--color-secondary-700)',\n 800: 'var(--color-secondary-800)',\n 900: 'var(--color-secondary-900)',\n },\n success: {\n DEFAULT: 'var(--color-success)',\n 100: 'var(--color-success-100)',\n 200: 'var(--color-success-200)',\n 300: 'var(--color-success-300)',\n 400: 'var(--color-success-400)',\n 500: 'var(--color-success-500)',\n 600: 'var(--color-success-600)',\n 700: 'var(--color-success-700)',\n 800: 'var(--color-success-800)',\n 900: 'var(--color-success-900)',\n },\n warning: {\n DEFAULT: 'var(--color-warning)',\n 100: 'var(--color-warning-100)',\n 200: 'var(--color-warning-200)',\n 300: 'var(--color-warning-300)',\n 400: 'var(--color-warning-400)',\n 500: 'var(--color-warning-500)',\n 600: 'var(--color-warning-600)',\n 700: 'var(--color-warning-700)',\n 800: 'var(--color-warning-800)',\n 900: 'var(--color-warning-900)',\n },\n danger: {\n DEFAULT: 'var(--color-danger)',\n 100: 'var(--color-danger-100)',\n 200: 'var(--color-danger-200)',\n 300: 'var(--color-danger-300)',\n 400: 'var(--color-danger-400)',\n 500: 'var(--color-danger-500)',\n 600: 'var(--color-danger-600)',\n 700: 'var(--color-danger-700)',\n 800: 'var(--color-danger-800)',\n 900: 'var(--color-danger-900)',\n },\n info: {\n DEFAULT: 'var(--color-info)',\n 100: 'var(--color-info-100)',\n 200: 'var(--color-info-200)',\n 300: 'var(--color-info-300)',\n 400: 'var(--color-info-400)',\n 500: 'var(--color-info-500)',\n 600: 'var(--color-info-600)',\n 700: 'var(--color-info-700)',\n 800: 'var(--color-info-800)',\n 900: 'var(--color-info-900)',\n },\n main: {\n DEFAULT: 'var(--color-main)',\n foreground: 'var(--main-foreground)',\n 100: 'var(--color-main-100)',\n 200: 'var(--color-main-200)',\n 300: 'var(--color-main-300)',\n 400: 'var(--color-main-400)',\n 500: 'var(--color-main-500)',\n 600: 'var(--color-main-600)',\n 700: 'var(--color-main-700)',\n 800: 'var(--color-main-800)',\n 900: 'var(--color-main-900)',\n },\n // Semantic aliases - shadcn/ui compatibility\n background: 'var(--color-background)',\n foreground: 'var(--color-foreground)',\n card: {\n DEFAULT: 'var(--color-card)',\n foreground: 'var(--color-card-foreground)',\n },\n popover: {\n DEFAULT: 'var(--color-popover)',\n foreground: 'var(--color-popover-foreground)',\n },\n muted: {\n DEFAULT: 'var(--color-muted)',\n foreground: 'var(--color-muted-foreground)',\n },\n accent: {\n DEFAULT: 'var(--color-accent)',\n foreground: 'var(--color-accent-foreground)',\n },\n destructive: {\n DEFAULT: 'var(--color-destructive)',\n foreground: 'var(--color-destructive-foreground)',\n },\n border: 'var(--color-border)',\n input: 'var(--color-input)',\n ring: 'var(--color-ring)',\n // Chart colors\n chart: {\n 1: 'var(--color-chart-1)',\n 2: 'var(--color-chart-2)',\n 3: 'var(--color-chart-3)',\n 4: 'var(--color-chart-4)',\n 5: 'var(--color-chart-5)',\n },\n // Sidebar colors\n sidebar: {\n DEFAULT: 'var(--color-sidebar)',\n foreground: 'var(--color-sidebar-foreground)',\n primary: 'var(--color-sidebar-primary)',\n 'primary-foreground': 'var(--color-sidebar-primary-foreground)',\n accent: 'var(--color-sidebar-accent)',\n 'accent-foreground': 'var(--color-sidebar-accent-foreground)',\n border: 'var(--color-sidebar-border)',\n ring: 'var(--color-sidebar-ring)',\n },\n} as const;\n\nexport const fontFamily = {\n sans: [\n 'Inter',\n 'ui-sans-serif',\n 'system-ui',\n 'sans-serif',\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol',\n 'Noto Color Emoji',\n ],\n mono: [\n 'JetBrains Mono',\n 'ui-monospace',\n 'SFMono-Regular',\n 'Menlo',\n 'Monaco',\n 'Consolas',\n 'Liberation Mono',\n 'Courier New',\n 'monospace',\n ],\n heading: [\n 'Inter',\n 'ui-sans-serif',\n 'system-ui',\n 'sans-serif',\n ],\n} as const;\n\nexport const fontSize = {\n xs: ['0.75rem', { lineHeight: '1rem' }],\n sm: ['0.875rem', { lineHeight: '1.25rem' }],\n base: ['1rem', { lineHeight: '1.5rem' }],\n lg: ['1.125rem', { lineHeight: '1.75rem' }],\n xl: ['1.25rem', { lineHeight: '1.75rem' }],\n '2xl': ['1.5rem', { lineHeight: '2rem' }],\n '3xl': ['1.875rem', { lineHeight: '2.25rem' }],\n '4xl': ['2.25rem', { lineHeight: '2.5rem' }],\n '5xl': ['3rem', { lineHeight: '1' }],\n '6xl': ['3.75rem', { lineHeight: '1' }],\n} as const;\n\nexport const borderRadius = {\n none: '0',\n sm: '0.125rem',\n DEFAULT: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n xl: '0.75rem',\n '2xl': '1rem',\n '3xl': '1.5rem',\n full: '9999px',\n} as const;\n\nexport const boxShadow = {\n xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n none: 'none',\n // Brand color shadows\n 'primary-sm': 'var(--shadow-sm-primary)',\n 'primary-md': 'var(--shadow-md-primary)',\n 'primary-lg': 'var(--shadow-lg-primary)',\n 'secondary-sm': 'var(--shadow-sm-secondary)',\n 'secondary-md': 'var(--shadow-md-secondary)',\n 'secondary-lg': 'var(--shadow-lg-secondary)',\n 'success-sm': 'var(--shadow-sm-success)',\n 'success-md': 'var(--shadow-md-success)',\n 'success-lg': 'var(--shadow-lg-success)',\n 'warning-sm': 'var(--shadow-sm-warning)',\n 'warning-md': 'var(--shadow-md-warning)',\n 'warning-lg': 'var(--shadow-lg-warning)',\n 'danger-sm': 'var(--shadow-sm-danger)',\n 'danger-md': 'var(--shadow-md-danger)',\n 'danger-lg': 'var(--shadow-lg-danger)',\n 'info-sm': 'var(--shadow-sm-info)',\n 'info-md': 'var(--shadow-md-info)',\n 'info-lg': 'var(--shadow-lg-info)',\n 'main-sm': 'var(--shadow-sm-main)',\n 'main-md': 'var(--shadow-md-main)',\n 'main-lg': 'var(--shadow-lg-main)',\n} as const;\n\nexport const zIndex = {\n dropdown: '1000',\n sticky: '1020',\n fixed: '1030',\n 'modal-backdrop': '1040',\n modal: '1050',\n popover: '1060',\n tooltip: '1070',\n} as const;\n\nexport const screens = {\n xs: '20rem',\n sm: '40rem',\n md: '48rem',\n lg: '64rem',\n xl: '80rem',\n '2xl': '96rem',\n} as const;\n\nexport const keyframes = {\n // Accordion animations\n 'accordion-down': {\n from: { height: '0', opacity: '0' },\n to: { height: 'var(--radix-accordion-content-height)', opacity: '1' },\n },\n 'accordion-up': {\n from: { height: 'var(--radix-accordion-content-height)', opacity: '1' },\n to: { height: '0', opacity: '0' },\n },\n // Collapsible animations\n 'collapsible-down': {\n from: { height: '0', opacity: '0' },\n to: { height: 'var(--radix-collapsible-content-height)', opacity: '1' },\n },\n 'collapsible-up': {\n from: { height: 'var(--radix-collapsible-content-height)', opacity: '1' },\n to: { height: '0', opacity: '0' },\n },\n} as const;\n\nexport const animation = {\n 'accordion-down': 'accordion-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n 'accordion-up': 'accordion-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n 'collapsible-down': 'collapsible-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n 'collapsible-up': 'collapsible-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)', // Dropdown, Select, Popover animations\n 'in': 'fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',\n 'out': 'fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1)',} as const;\n\n/**\n * Complete theme preset for Tailwind CSS\n * Use this in your tailwind.config.js:\n * \n * import { themePreset } from '@diyet24/design-system/tailwind';\n * \n * export default {\n * presets: [themePreset],\n * // ... your other config\n * }\n */\nexport const themePreset = {\n theme: {\n extend: {\n colors,\n fontFamily,\n fontSize,\n borderRadius,\n boxShadow,\n zIndex,\n screens,\n keyframes,\n animation,\n },\n },\n};\n\nexport default themePreset;\n"]}
package/package.json ADDED
@@ -0,0 +1,145 @@
1
+ {
2
+ "name": "@diyet24/design-system",
3
+ "version": "0.1.0",
4
+ "description": "Diyet24 Design System - React components with Tailwind CSS",
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.cjs"
17
+ },
18
+ "./tailwind": {
19
+ "types": "./dist/tailwind/index.d.ts",
20
+ "import": "./dist/tailwind/index.js",
21
+ "require": "./dist/tailwind/index.cjs"
22
+ },
23
+ "./styles.css": "./dist/styles.css",
24
+ "./styles": "./dist/styles.css"
25
+ },
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "scripts": {
30
+ "dev": "storybook dev -p 6006",
31
+ "build": "tsup && cp ./src/styles/index.css ./dist/styles.css",
32
+ "build:storybook": "storybook build",
33
+ "lint": "eslint . --ext .ts,.tsx",
34
+ "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
35
+ "typecheck": "tsc --noEmit",
36
+ "prepublishOnly": "npm run build"
37
+ },
38
+ "peerDependencies": {
39
+ "react": "^18.0.0 || ^19.0.0",
40
+ "react-dom": "^18.0.0 || ^19.0.0"
41
+ },
42
+ "devDependencies": {
43
+ "@hookform/resolvers": "^3.10.0",
44
+ "@radix-ui/react-accordion": "^1.2.1",
45
+ "@radix-ui/react-alert-dialog": "^1.1.2",
46
+ "@radix-ui/react-aspect-ratio": "^1.1.0",
47
+ "@radix-ui/react-avatar": "^1.1.1",
48
+ "@radix-ui/react-checkbox": "^1.1.2",
49
+ "@radix-ui/react-collapsible": "^1.1.1",
50
+ "@radix-ui/react-context-menu": "^2.2.2",
51
+ "@radix-ui/react-dialog": "^1.1.2",
52
+ "@radix-ui/react-dropdown-menu": "^2.1.2",
53
+ "@radix-ui/react-hover-card": "^1.1.2",
54
+ "@radix-ui/react-label": "^2.1.0",
55
+ "@radix-ui/react-menubar": "^1.1.2",
56
+ "@radix-ui/react-navigation-menu": "^1.2.1",
57
+ "@radix-ui/react-popover": "^1.1.2",
58
+ "@radix-ui/react-progress": "^1.1.0",
59
+ "@radix-ui/react-radio-group": "^1.2.1",
60
+ "@radix-ui/react-scroll-area": "^1.2.0",
61
+ "@radix-ui/react-select": "^2.1.2",
62
+ "@radix-ui/react-separator": "^1.1.0",
63
+ "@radix-ui/react-slider": "^1.2.1",
64
+ "@radix-ui/react-slot": "^1.1.0",
65
+ "@radix-ui/react-switch": "^1.1.1",
66
+ "@radix-ui/react-tabs": "^1.1.1",
67
+ "@radix-ui/react-toggle": "^1.1.0",
68
+ "@radix-ui/react-toggle-group": "^1.1.0",
69
+ "@radix-ui/react-tooltip": "^1.1.3",
70
+ "@storybook/addon-a11y": "^10.1.10",
71
+ "@storybook/addon-docs": "^10.1.10",
72
+ "@storybook/addon-links": "^10.1.10",
73
+ "@storybook/addon-themes": "^10.1.10",
74
+ "@storybook/addon-vitest": "^10.1.10",
75
+ "@storybook/react": "^10.1.10",
76
+ "@storybook/react-vite": "^10.1.10",
77
+ "@tailwindcss/postcss": "^4.0.0",
78
+ "@tailwindcss/vite": "^4.0.0",
79
+ "@tanstack/react-table": "^8.20.5",
80
+ "@types/node": "^25.0.3",
81
+ "@types/react": "^18.3.0",
82
+ "@types/react-dom": "^18.3.0",
83
+ "@typescript-eslint/eslint-plugin": "^8.0.0",
84
+ "@typescript-eslint/parser": "^8.0.0",
85
+ "@vitejs/plugin-react": "^4.3.0",
86
+ "autoprefixer": "^10.4.20",
87
+ "class-variance-authority": "^0.7.0",
88
+ "clsx": "^2.1.1",
89
+ "cmdk": "^1.0.0",
90
+ "date-fns": "^3.6.0",
91
+ "embla-carousel-react": "^8.3.0",
92
+ "eslint": "^9.0.0",
93
+ "eslint-plugin-react": "^7.35.0",
94
+ "eslint-plugin-react-hooks": "^5.0.0",
95
+ "input-otp": "^1.2.4",
96
+ "lucide-react": "^0.460.0",
97
+ "next-themes": "^0.4.4",
98
+ "nuqs": "^2.2.3",
99
+ "prettier": "^3.3.0",
100
+ "react": "^18.3.1",
101
+ "react-day-picker": "^8.10.1",
102
+ "react-dom": "^18.3.1",
103
+ "react-hook-form": "^7.54.0",
104
+ "react-resizable-panels": "^2.1.7",
105
+ "recharts": "^2.13.3",
106
+ "sonner": "^1.7.3",
107
+ "storybook": "^10.1.10",
108
+ "tailwind-merge": "^2.5.0",
109
+ "tailwindcss": "^4.0.0",
110
+ "tsup": "^8.3.0",
111
+ "typescript": "^5.6.0",
112
+ "vaul": "^1.1.1",
113
+ "vite": "^6.0.0",
114
+ "zod": "^3.24.1",
115
+ "vitest": "^4.0.16",
116
+ "playwright": "^1.57.0",
117
+ "@vitest/browser-playwright": "^4.0.16",
118
+ "@vitest/coverage-v8": "^4.0.16"
119
+ },
120
+ "keywords": [
121
+ "design-system",
122
+ "react",
123
+ "nextjs",
124
+ "next.js",
125
+ "app-router",
126
+ "server-components",
127
+ "rsc",
128
+ "tailwindcss",
129
+ "components",
130
+ "ui",
131
+ "shadcn",
132
+ "radix-ui",
133
+ "typescript",
134
+ "diyet24"
135
+ ],
136
+ "author": "Diyet24",
137
+ "license": "MIT",
138
+ "repository": {
139
+ "type": "git",
140
+ "url": "https://github.com/diyet24/design-system"
141
+ },
142
+ "publishConfig": {
143
+ "access": "public"
144
+ }
145
+ }