@framed-dev/react 0.1.6 → 0.2.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 (12) hide show
  1. package/README.md +233 -62
  2. package/dist/index.cjs +71919 -57937
  3. package/dist/index.d.cts +483 -25
  4. package/dist/index.d.ts +483 -25
  5. package/dist/index.js +71510 -57979
  6. package/dist/styles/framed.css +6474 -0
  7. package/package.json +62 -8
  8. package/styles.css +525 -0
  9. package/tailwind.config.js +207 -0
  10. package/tailwind.preset.js +86 -0
  11. package/dist/index.cjs.map +0 -1
  12. package/dist/index.js.map +0 -1
package/tailwind.config.js ADDED
@@ -0,0 +1,207 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ export default {
3
+ darkMode: ["class"],
4
+ content: [
5
+ "./index.html",
6
+ "./src/**/*.{js,ts,jsx,tsx}",
7
+ ],
8
+ theme: {
9
+ extend: {
10
+ colors: {
11
+ mirage: {
12
+ '50': '#3a5564',
13
+ '100': '#314954',
14
+ '200': '#273944',
15
+ '300': '#1e2e35',
16
+ '400': '#16232A',
17
+ '500': '#16232A',
18
+ '600': '#0d1419',
19
+ '700': '#080c0f',
20
+ '800': '#030405',
21
+ '900': '#000000',
22
+ DEFAULT: '#16232A'
23
+ },
24
+ 'blaze-orange': {
25
+ '50': '#FFF4ED',
26
+ '100': '#FFE5D1',
27
+ '200': '#FFC89D',
28
+ '300': '#FFA36A',
29
+ '400': '#FF7E36',
30
+ '500': '#FF5B04',
31
+ '600': '#D14800',
32
+ '700': '#9E3600',
33
+ '800': '#6B2400',
34
+ '900': '#381300',
35
+ DEFAULT: '#FF5B04'
36
+ },
37
+ 'deep-sea-green': {
38
+ '50': '#17C8D4',
39
+ '100': '#14B5C0',
40
+ '200': '#118F98',
41
+ '300': '#0D6970',
42
+ '400': '#0A5C61',
43
+ '500': '#075056',
44
+ '600': '#053A3E',
45
+ '700': '#032426',
46
+ '800': '#010E0F',
47
+ '900': '#000000',
48
+ DEFAULT: '#075056'
49
+ },
50
+ 'wild-sand': {
51
+ '50': '#FFFFFF',
52
+ '100': '#FFFFFF',
53
+ '200': '#FFFFFF',
54
+ '300': '#FFFFFF',
55
+ '400': '#F6FBFC',
56
+ '500': '#E4EEF0',
57
+ '600': '#BDD5DB',
58
+ '700': '#96BCC5',
59
+ '800': '#6FA3AF',
60
+ '900': '#4E8894',
61
+ DEFAULT: '#E4EEF0'
62
+ },
63
+ primary: {
64
+ DEFAULT: 'hsl(var(--primary))',
65
+ hover: '#1e2e35',
66
+ light: '#3a5564',
67
+ foreground: 'hsl(var(--primary-foreground))'
68
+ },
69
+ secondary: {
70
+ DEFAULT: 'hsl(var(--secondary))',
71
+ dark: '#053A3E',
72
+ foreground: 'hsl(var(--secondary-foreground))'
73
+ },
74
+ accent: {
75
+ DEFAULT: 'hsl(var(--accent))',
76
+ success: '#10B981',
77
+ warning: '#F59E0B',
78
+ error: '#EF4444',
79
+ foreground: 'hsl(var(--accent-foreground))'
80
+ },
81
+ 'powder-blue': {
82
+ '50': '#f5f7fe',
83
+ '100': '#e8ecfc',
84
+ '200': '#d4ddf9',
85
+ '300': '#b9c7f4',
86
+ '400': '#a7bbec',
87
+ '500': '#8fa3e3',
88
+ '600': '#7688d7',
89
+ '700': '#6574c3',
90
+ '800': '#535f9f',
91
+ '900': '#46517e',
92
+ DEFAULT: '#a7bbec'
93
+ },
94
+ wenge: {
95
+ '50': '#f7f6f6',
96
+ '100': '#e3e1e0',
97
+ '200': '#c8c4c2',
98
+ '300': '#a8a09d',
99
+ '400': '#8d827e',
100
+ '500': '#705d56',
101
+ '600': '#64534d',
102
+ '700': '#544541',
103
+ '800': '#463b38',
104
+ '900': '#3c3330',
105
+ DEFAULT: '#705d56'
106
+ },
107
+ 'van-dyke': {
108
+ '50': '#f6f5f4',
109
+ '100': '#e7e3e0',
110
+ '200': '#d0c7c1',
111
+ '300': '#b5a79d',
112
+ '400': '#9c8a7d',
113
+ '500': '#8b7465',
114
+ '600': '#7f6659',
115
+ '700': '#6a544a',
116
+ '800': '#503b31',
117
+ '900': '#4a3a32',
118
+ DEFAULT: '#503b31'
119
+ },
120
+ 'cool-gray': {
121
+ '50': '#f5f6f9',
122
+ '100': '#e8eaf2',
123
+ '200': '#d4d8e8',
124
+ '300': '#b3bad7',
125
+ '400': '#9097c0',
126
+ '500': '#7a81ab',
127
+ '600': '#676e97',
128
+ '700': '#5a607a',
129
+ '800': '#4c5166',
130
+ '900': '#414556',
131
+ DEFAULT: '#9097c0'
132
+ },
133
+ black: {
134
+ '50': '#f6f6f6',
135
+ '100': '#e7e7e7',
136
+ '200': '#d1d1d1',
137
+ '300': '#b0b0b0',
138
+ '400': '#888888',
139
+ '500': '#6d6d6d',
140
+ '600': '#5d5d5d',
141
+ '700': '#4f4f4f',
142
+ '800': '#454545',
143
+ '900': '#020202',
144
+ DEFAULT: '#020202'
145
+ },
146
+ background: 'hsl(var(--background))',
147
+ foreground: 'hsl(var(--foreground))',
148
+ card: {
149
+ DEFAULT: 'hsl(var(--card))',
150
+ foreground: 'hsl(var(--card-foreground))'
151
+ },
152
+ popover: {
153
+ DEFAULT: 'hsl(var(--popover))',
154
+ foreground: 'hsl(var(--popover-foreground))'
155
+ },
156
+ muted: {
157
+ DEFAULT: 'hsl(var(--muted))',
158
+ foreground: 'hsl(var(--muted-foreground))'
159
+ },
160
+ destructive: {
161
+ DEFAULT: 'hsl(var(--destructive))',
162
+ foreground: 'hsl(var(--destructive-foreground))'
163
+ },
164
+ border: 'hsl(var(--border))',
165
+ input: 'hsl(var(--input))',
166
+ ring: 'hsl(var(--ring))',
167
+ chart: {
168
+ '1': 'hsl(var(--chart-1))',
169
+ '2': 'hsl(var(--chart-2))',
170
+ '3': 'hsl(var(--chart-3))',
171
+ '4': 'hsl(var(--chart-4))',
172
+ '5': 'hsl(var(--chart-5))'
173
+ },
174
+ sidebar: {
175
+ DEFAULT: 'hsl(var(--sidebar-background))',
176
+ foreground: 'hsl(var(--sidebar-foreground))',
177
+ primary: 'hsl(var(--sidebar-primary))',
178
+ 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
179
+ accent: 'hsl(var(--sidebar-accent))',
180
+ 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
181
+ border: 'hsl(var(--sidebar-border))',
182
+ ring: 'hsl(var(--sidebar-ring))'
183
+ }
184
+ },
185
+ fontFamily: {
186
+ sans: [
187
+ 'Open Sans',
188
+ 'sans-serif'
189
+ ]
190
+ },
191
+ maxWidth: {
192
+ '6xl': '72rem',
193
+ '7xl': '80rem',
194
+ '8xl': '88rem'
195
+ },
196
+ screens: {
197
+ '3xl': '1920px'
198
+ },
199
+ borderRadius: {
200
+ lg: 'var(--radius)',
201
+ md: 'calc(var(--radius) - 2px)',
202
+ sm: 'calc(var(--radius) - 4px)'
203
+ }
204
+ }
205
+ },
206
+ plugins: [require("tailwindcss-animate")],
207
+ }
package/tailwind.preset.js ADDED
@@ -0,0 +1,86 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ theme: {
4
+ extend: {
5
+ colors: {
6
+ // Framed brand colors
7
+ 'framed-black': '#020202',
8
+ 'framed-van-dyke': '#503b31',
9
+ 'framed-wenge': '#705d56',
10
+ 'framed-cool-gray': '#9097c0',
11
+ 'framed-powder-blue': '#a7bbec',
12
+
13
+ // Semantic colors
14
+ border: 'hsl(var(--border))',
15
+ input: 'hsl(var(--input))',
16
+ ring: 'hsl(var(--ring))',
17
+ background: 'hsl(var(--background))',
18
+ foreground: 'hsl(var(--foreground))',
19
+ primary: {
20
+ DEFAULT: 'hsl(var(--primary))',
21
+ foreground: 'hsl(var(--primary-foreground))',
22
+ },
23
+ secondary: {
24
+ DEFAULT: 'hsl(var(--secondary))',
25
+ foreground: 'hsl(var(--secondary-foreground))',
26
+ },
27
+ destructive: {
28
+ DEFAULT: 'hsl(var(--destructive))',
29
+ foreground: 'hsl(var(--destructive-foreground))',
30
+ },
31
+ muted: {
32
+ DEFAULT: 'hsl(var(--muted))',
33
+ foreground: 'hsl(var(--muted-foreground))',
34
+ },
35
+ accent: {
36
+ DEFAULT: 'hsl(var(--accent))',
37
+ foreground: 'hsl(var(--accent-foreground))',
38
+ },
39
+ popover: {
40
+ DEFAULT: 'hsl(var(--popover))',
41
+ foreground: 'hsl(var(--popover-foreground))',
42
+ },
43
+ card: {
44
+ DEFAULT: 'hsl(var(--card))',
45
+ foreground: 'hsl(var(--card-foreground))',
46
+ },
47
+ },
48
+ fontFamily: {
49
+ 'framed': ['Inter Tight', 'Inter', 'sans-serif'],
50
+ 'sans': ['Inter', 'sans-serif'],
51
+ },
52
+ borderRadius: {
53
+ lg: 'var(--radius)',
54
+ md: 'calc(var(--radius) - 2px)',
55
+ sm: 'calc(var(--radius) - 4px)',
56
+ },
57
+ keyframes: {
58
+ 'accordion-down': {
59
+ from: { height: '0' },
60
+ to: { height: 'var(--radix-accordion-content-height)' },
61
+ },
62
+ 'accordion-up': {
63
+ from: { height: 'var(--radix-accordion-content-height)' },
64
+ to: { height: '0' },
65
+ },
66
+ 'slide-in-from-right': {
67
+ from: { transform: 'translateX(100%)' },
68
+ to: { transform: 'translateX(0)' },
69
+ },
70
+ 'slide-out-to-right': {
71
+ from: { transform: 'translateX(0)' },
72
+ to: { transform: 'translateX(100%)' },
73
+ },
74
+ },
75
+ animation: {
76
+ 'accordion-down': 'accordion-down 0.2s ease-out',
77
+ 'accordion-up': 'accordion-up 0.2s ease-out',
78
+ 'slide-in-from-right': 'slide-in-from-right 0.3s ease-out',
79
+ 'slide-out-to-right': 'slide-out-to-right 0.3s ease-out',
80
+ },
81
+ },
82
+ },
83
+ plugins: [
84
+ require('tailwindcss-animate'),
85
+ ],
86
+ };