@youngonesworks/ui 0.1.23 → 0.1.24

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 (13) hide show
  1. package/README.md +210 -13
  2. package/dist/index.cjs +154 -0
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +148 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/index.d.ts +9 -0
  8. package/dist/styles/utilities.css +200 -0
  9. package/dist/styles/variables.css +228 -0
  10. package/dist/theme/fonts.d.ts +29 -0
  11. package/dist/theme/index.d.ts +5 -0
  12. package/dist/theme/variables.d.ts +62 -0
  13. package/package.json +15 -5
package/README.md CHANGED
@@ -1,27 +1,33 @@
1
1
  # @youngonesworks/ui
2
2
 
3
- A React component library built with Tailwind CSS v4.
3
+ A comprehensive React component library built with Tailwind CSS v4, featuring modular CSS variables, optimized fonts, and TypeScript support.
4
4
 
5
5
  ## Features
6
6
 
7
- - React components built with TypeScript
8
- - Styled with Tailwind CSS v4
9
- - Fully customizable components
10
- - Tree-shakeable (only import what you need)
11
- - TypeScript support
12
- - Modern build with Rolldown (Rust-based bundler)
7
+ - 🧩 **React components built with TypeScript**
8
+ - 🎨 **Styled with Tailwind CSS v4**
9
+ - 📦 **Modular CSS exports** - Import only what you need
10
+ - 🔤 **Next.js optimized fonts** - Gotham font family with automatic optimization
11
+ - 🎯 **CSS Variables & Utilities** - Exportable design tokens
12
+ - 🌳 **Tree-shakeable** - Only import what you need
13
+ - 📝 **Full TypeScript support** - Type-safe CSS variable helpers
14
+ - ⚡ **Modern build** - Rolldown (Rust-based bundler)
13
15
 
14
16
  ## Installation
15
17
 
16
18
  ```bash
17
19
  # yarn
18
20
  yarn add @youngonesworks/ui
21
+
22
+ # npm
23
+ npm install @youngonesworks/ui
19
24
  ```
20
25
 
21
26
  ### Peer Dependencies
22
27
 
23
- - react: ^18 || ^19
24
- - react-dom: ^18 || ^19
28
+ - **react**: ^18 || ^19
29
+ - **react-dom**: ^18 || ^19
30
+ - **next**: ^14 || ^15 *(for Next.js projects)*
25
31
 
26
32
  ### Tailwind CSS v4 setup
27
33
 
@@ -46,6 +52,8 @@ module.exports = {
46
52
 
47
53
  ## Usage
48
54
 
55
+ ### 🧩 React Components
56
+
49
57
  ```tsx
50
58
  import { Button } from '@youngonesworks/ui';
51
59
 
@@ -60,9 +68,133 @@ function App() {
60
68
  }
61
69
  ```
62
70
 
63
- ### Components
71
+ ### 🎨 CSS Variables & Utilities
72
+
73
+ #### Import CSS Variables
74
+
75
+ ```css
76
+ /* Import in your CSS file */
77
+ @import '@youngonesworks/ui/styles/variables.css';
78
+ @import '@youngonesworks/ui/styles/utilities.css';
79
+
80
+ .my-component {
81
+ color: var(--color-primary); /* #10d1bb */
82
+ font-family: var(--font-family-sans); /* Gotham font */
83
+ font-size: var(--font-lg-size); /* 1.125rem */
84
+ transition: var(--transition-duration-sidebar);
85
+ }
86
+ ```
87
+
88
+ #### TypeScript CSS Variable Helpers
89
+
90
+ ```tsx
91
+ import { getCSSVariable, setCSSVariable, type CSSVariables } from '@youngonesworks/ui/theme';
92
+
93
+ // Get CSS variable values
94
+ const primaryColor = getCSSVariable('--color-primary');
95
+ const fontSize = getCSSVariable('--font-lg-size');
96
+
97
+ // Set CSS variables dynamically
98
+ setCSSVariable('--color-primary', '#ff6b35');
99
+ setCSSVariable('--font-lg-size', '1.25rem');
100
+
101
+ // Type-safe variable names
102
+ const variables: CSSVariables = {
103
+ colors: {
104
+ primary: '#10d1bb',
105
+ secondary: '#6366f1'
106
+ },
107
+ typography: {
108
+ fontLgSize: '1.125rem',
109
+ fontBaseLine: '1.5rem'
110
+ }
111
+ };
112
+ ```
113
+
114
+ ### 🔤 Next.js Fonts
115
+
116
+ #### Setup in Next.js App Router
117
+
118
+ ```tsx
119
+ // app/layout.tsx
120
+ import { gothamFont } from '@youngonesworks/ui/theme/fonts';
121
+ import '@youngonesworks/ui/styles/variables.css';
122
+
123
+ export default function RootLayout({ children }) {
124
+ return (
125
+ <html lang="en" className={gothamFont.variable}>
126
+ <body className={gothamFont.className}>
127
+ {children}
128
+ </body>
129
+ </html>
130
+ );
131
+ }
132
+ ```
133
+
134
+ #### Use Font Utilities
135
+
136
+ ```tsx
137
+ import { FONT_FAMILIES, FONT_CLASS_NAMES, FONT_WEIGHTS } from '@youngonesworks/ui/theme/fonts';
138
+
139
+ function MyComponent() {
140
+ return (
141
+ <div>
142
+ {/* Using CSS class */}
143
+ <h1 className={FONT_CLASS_NAMES.gotham}>Optimized Gotham</h1>
144
+
145
+ {/* Using inline styles */}
146
+ <p style={{
147
+ fontFamily: FONT_FAMILIES.gotham,
148
+ fontWeight: FONT_WEIGHTS.medium
149
+ }}>
150
+ Custom styled text
151
+ </p>
152
+ </div>
153
+ );
154
+ }
155
+ ```
156
+
157
+ ### 📦 Available Exports
64
158
 
65
- #### Button
159
+ ```tsx
160
+ // Components
161
+ import { Button, Card, Input } from '@youngonesworks/ui';
162
+
163
+ // CSS Variables (TypeScript helpers)
164
+ import { getCSSVariable, setCSSVariable } from '@youngonesworks/ui/theme';
165
+
166
+ // Font utilities
167
+ import { gothamFont, FONT_FAMILIES } from '@youngonesworks/ui/theme/fonts';
168
+
169
+ // CSS files (import in CSS/SCSS)
170
+ // @import '@youngonesworks/ui/styles/variables.css';
171
+ // @import '@youngonesworks/ui/styles/utilities.css';
172
+ ```
173
+
174
+ ## 📊 Available CSS Variables
175
+
176
+ ### Colors
177
+ - `--color-primary` - Primary brand color (#10d1bb)
178
+ - `--color-secondary` - Secondary brand color
179
+ - `--color-background` - Background colors
180
+ - `--color-foreground` - Text colors
181
+
182
+ ### Typography
183
+ - `--font-family-sans` - Gotham font stack
184
+ - `--font-xs-size` to `--font-9xl-size` - Font sizes (0.75rem - 8rem)
185
+ - `--font-xs-line` to `--font-9xl-line` - Line heights
186
+
187
+ ### Spacing & Sizing
188
+ - `--spacing-*` - Consistent spacing scale
189
+ - `--sizing-*` - Width/height utilities
190
+
191
+ ### Transitions & Animations
192
+ - `--transition-duration-*` - Duration presets
193
+ - Custom animation utilities (`.animate-spin-slow`, etc.)
194
+
195
+ ## Components
196
+
197
+ ### Button
66
198
 
67
199
  ```tsx
68
200
  <Button
@@ -74,10 +206,75 @@ function App() {
74
206
  </Button>
75
207
  ```
76
208
 
209
+ ## 🚀 Development
210
+
211
+ ### Setup
212
+
213
+ ```bash
214
+ git clone https://github.com/youngonesworks/ui.git
215
+ cd ui
216
+ yarn install
217
+ ```
218
+
219
+ ### Available Scripts
220
+
221
+ ```bash
222
+ # Development
223
+ yarn dev # Start Storybook development server
224
+ yarn watch # Watch and build library
225
+
226
+ # Building
227
+ yarn build # Build library for production
228
+ yarn build-storybook # Build Storybook for deployment
229
+
230
+ # Publishing
231
+ yarn buildAndPublish # Build and publish to npm
232
+
233
+ # Code Quality
234
+ yarn lint # ESLint
235
+ yarn lint:fix # Auto-fix ESLint issues
236
+ yarn format # Prettier formatting
237
+ yarn test # Run Jest tests
238
+ ```
239
+
240
+ ### Project Structure
241
+
242
+ ```
243
+ src/
244
+ ├── components/ # React components
245
+ ├── styles/ # Modular CSS files
246
+ ├── variables.css # CSS custom properties
247
+ ├── utilities.css # Utility classes
248
+ └── fonts.css # Font-face declarations
249
+ ├── theme/ # TypeScript theme utilities
250
+ ├── variables.ts # CSS variable helpers
251
+ ├── fonts.ts # Next.js font configuration
252
+ └── index.ts # Theme exports
253
+ └── index.ts # Main entry point
254
+ ```
255
+
77
256
  ## Contributing
78
257
 
79
- Contributions are welcome! Please follow the conventional commits spec and ensure all tests pass before opening a PR.
258
+ Contributions are welcome! Please follow these guidelines:
259
+
260
+ 1. **Fork the repository** and create a feature branch
261
+ 2. **Follow conventional commits** spec for commit messages
262
+ 3. **Add tests** for new components or utilities
263
+ 4. **Update documentation** including README and Storybook stories
264
+ 5. **Ensure all checks pass** (lint, format, test, build)
265
+ 6. **Submit a PR** with a clear description
266
+
267
+ ### CSS Variables
268
+
269
+ When adding new CSS variables:
270
+ 1. Add them to `src/styles/variables.css`
271
+ 2. Update TypeScript interfaces in `src/theme/variables.ts`
272
+ 3. Document them in this README
80
273
 
81
274
  ## License
82
275
 
83
- MIT
276
+ ISC License - see [LICENSE](LICENSE) file for details.
277
+
278
+ ---
279
+
280
+ **Built with ❤️ by YoungOnes** | [Website](https://youngones.work) | [GitHub](https://github.com/youngonesworks)
package/dist/index.cjs CHANGED
@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
27
27
  const react = __toESM(require("react"));
28
28
  const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
29
29
  const react_dom = __toESM(require("react-dom"));
30
+ const next_font_local = __toESM(require("next/font/local"));
30
31
 
31
32
  //#region src/jsx-runtime-shim.ts
32
33
  const jsx$2 = react.createElement;
@@ -140307,6 +140308,152 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
140307
140308
  })] });
140308
140309
  });
140309
140310
 
140311
+ //#endregion
140312
+ //#region src/theme/variables.ts
140313
+ const CSS_VARIABLE_KEYS = [
140314
+ "--color-primary",
140315
+ "--color-primary-light",
140316
+ "--color-primary-dark",
140317
+ "--color-black",
140318
+ "--color-navy-blue",
140319
+ "--color-white",
140320
+ "--color-accent-blue",
140321
+ "--color-ultra-light-blue",
140322
+ "--color-green",
140323
+ "--color-green-light",
140324
+ "--color-pink",
140325
+ "--color-purple",
140326
+ "--color-orange",
140327
+ "--color-warning",
140328
+ "--color-warning-light",
140329
+ "--color-warning-dark"
140330
+ ];
140331
+ const getCSSVariable = (variable) => {
140332
+ if (typeof window !== "undefined") {
140333
+ return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
140334
+ }
140335
+ return "";
140336
+ };
140337
+ const setCSSVariable = (variable, value) => {
140338
+ if (typeof window !== "undefined") {
140339
+ document.documentElement.style.setProperty(variable, value);
140340
+ }
140341
+ };
140342
+
140343
+ //#endregion
140344
+ //#region src/theme/fonts.ts
140345
+ const gothamFont = (0, next_font_local.default)({
140346
+ src: [
140347
+ {
140348
+ path: "../assets/fonts/woff2/Gotham-Thin_Web.woff2",
140349
+ weight: "100",
140350
+ style: "normal"
140351
+ },
140352
+ {
140353
+ path: "../assets/fonts/woff2/Gotham-ThinItalic_Web.woff2",
140354
+ weight: "100",
140355
+ style: "italic"
140356
+ },
140357
+ {
140358
+ path: "../assets/fonts/woff2/Gotham-XLight_Web.woff2",
140359
+ weight: "200",
140360
+ style: "normal"
140361
+ },
140362
+ {
140363
+ path: "../assets/fonts/woff2/Gotham-XLightItalic_Web.woff2",
140364
+ weight: "200",
140365
+ style: "italic"
140366
+ },
140367
+ {
140368
+ path: "../assets/fonts/woff2/Gotham-Light_Web.woff2",
140369
+ weight: "300",
140370
+ style: "normal"
140371
+ },
140372
+ {
140373
+ path: "../assets/fonts/woff2/Gotham-LightItalic_Web.woff2",
140374
+ weight: "300",
140375
+ style: "italic"
140376
+ },
140377
+ {
140378
+ path: "../assets/fonts/woff2/Gotham-Book_Web.woff2",
140379
+ weight: "400",
140380
+ style: "normal"
140381
+ },
140382
+ {
140383
+ path: "../assets/fonts/woff2/Gotham-BookItalic_Web.woff2",
140384
+ weight: "400",
140385
+ style: "italic"
140386
+ },
140387
+ {
140388
+ path: "../assets/fonts/woff2/Gotham-Medium_Web.woff2",
140389
+ weight: "500",
140390
+ style: "normal"
140391
+ },
140392
+ {
140393
+ path: "../assets/fonts/woff2/Gotham-MediumItalic_Web.woff2",
140394
+ weight: "500",
140395
+ style: "italic"
140396
+ },
140397
+ {
140398
+ path: "../assets/fonts/woff2/Gotham-Bold_Web.woff2",
140399
+ weight: "700",
140400
+ style: "normal"
140401
+ },
140402
+ {
140403
+ path: "../assets/fonts/woff2/Gotham-BoldItalic_Web.woff2",
140404
+ weight: "700",
140405
+ style: "italic"
140406
+ },
140407
+ {
140408
+ path: "../assets/fonts/woff2/Gotham-Black_Web.woff2",
140409
+ weight: "800",
140410
+ style: "normal"
140411
+ },
140412
+ {
140413
+ path: "../assets/fonts/woff2/Gotham-BlackItalic_Web.woff2",
140414
+ weight: "800",
140415
+ style: "italic"
140416
+ },
140417
+ {
140418
+ path: "../assets/fonts/woff2/Gotham-Ultra_Web.woff2",
140419
+ weight: "900",
140420
+ style: "normal"
140421
+ },
140422
+ {
140423
+ path: "../assets/fonts/woff2/Gotham-UltraItalic_Web.woff2",
140424
+ weight: "900",
140425
+ style: "italic"
140426
+ }
140427
+ ],
140428
+ variable: "--font-gotham",
140429
+ display: "swap",
140430
+ preload: true
140431
+ });
140432
+ const FONT_FAMILIES = {
140433
+ gotham: "var(--font-gotham), Gotham, ui-sans-serif, system-ui, sans-serif",
140434
+ sans: "ui-sans-serif, system-ui, sans-serif",
140435
+ serif: "ui-serif, Georgia, serif",
140436
+ mono: "ui-monospace, SFMono-Regular, Consolas, monospace"
140437
+ };
140438
+ const FONT_WEIGHTS = {
140439
+ thin: "100",
140440
+ extraLight: "200",
140441
+ light: "300",
140442
+ normal: "400",
140443
+ medium: "500",
140444
+ semiBold: "600",
140445
+ bold: "700",
140446
+ extraBold: "800",
140447
+ black: "900"
140448
+ };
140449
+ const FONT_CLASS_NAMES = {
140450
+ gotham: gothamFont.className,
140451
+ sans: "font-sans",
140452
+ serif: "font-serif",
140453
+ mono: "font-mono"
140454
+ };
140455
+ var fonts_default = gothamFont;
140456
+
140310
140457
  //#endregion
140311
140458
  exports.AccordionItem = AccordionItem;
140312
140459
  exports.AccordionWrapper = AccordionWrapper;
@@ -140320,8 +140467,12 @@ exports.Badge = Badge;
140320
140467
  exports.BigBadge = BigBadge;
140321
140468
  exports.BreadCrumb = BreadCrumb;
140322
140469
  exports.Button = Button;
140470
+ exports.CSS_VARIABLE_KEYS = CSS_VARIABLE_KEYS;
140323
140471
  exports.Checkbox = Checkbox;
140324
140472
  exports.Divider = Divider;
140473
+ exports.FONT_CLASS_NAMES = FONT_CLASS_NAMES;
140474
+ exports.FONT_FAMILIES = FONT_FAMILIES;
140475
+ exports.FONT_WEIGHTS = FONT_WEIGHTS;
140325
140476
  exports.FavouriteButton = FavouriteButton;
140326
140477
  exports.Filters = Filters;
140327
140478
  exports.GoogleAppButtonIcon = GoogleAppButtonIcon;
@@ -140369,4 +140520,7 @@ exports.UnorderedListItem = UnorderedListItem;
140369
140520
  exports.UnstyledButton = UnstyledButton;
140370
140521
  exports.WysiwygEditor = WysiwygEditor;
140371
140522
  exports.buttonVariants = buttonVariants;
140523
+ exports.getCSSVariable = getCSSVariable;
140524
+ exports.gothamFont = gothamFont;
140525
+ exports.setCSSVariable = setCSSVariable;
140372
140526
  //# sourceMappingURL=index.cjs.map