@yomologic/react-ui 0.4.1 → 0.5.1

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 (10) hide show
  1. package/dist/base.css +41 -10
  2. package/dist/index.d.mts +17 -5
  3. package/dist/index.d.ts +17 -5
  4. package/dist/index.js +269 -216
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +354 -301
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +162 -52
  9. package/dist/styles.css.map +1 -1
  10. package/package.json +5 -5
package/dist/base.css CHANGED
@@ -11,6 +11,8 @@
11
11
  --color-warning: #d4a574;
12
12
  --color-info: #4d9de0;
13
13
  --color-background: #0f1419;
14
+ --color-surface: #1a2028;
15
+ --color-surface-elevated: #242c36;
14
16
  --color-foreground: #e3e8ed;
15
17
  --color-muted: #1a2028;
16
18
  --color-muted-foreground: #8b9ba8;
@@ -158,6 +160,15 @@
158
160
  --z-index-snackbar: 2000;
159
161
  --z-index-toast: 2100;
160
162
 
163
+ /* Component: Drawer */
164
+ --drawer-font-size: 0.875rem;
165
+ --drawer-item-padding-x: 1rem;
166
+ --drawer-item-padding-y: 0.625rem;
167
+ --drawer-border-radius: 0.5rem;
168
+ --drawer-section-padding-y: 1rem;
169
+ --drawer-title-margin-bottom: 0.5rem;
170
+ --drawer-item-spacing: 0.25rem;
171
+
161
172
  /* Component: Nav */
162
173
  --nav-height: 3.5rem;
163
174
  --nav-gap: 0.5rem;
@@ -188,11 +199,11 @@
188
199
  --checkbox-size-md: 1.5rem;
189
200
  --checkbox-size-lg: 1.75rem;
190
201
  --checkbox-size-xl: 2rem;
191
- --checkbox-label-font-size-xs: 0.75rem;
192
- --checkbox-label-font-size-sm: 0.875rem;
193
- --checkbox-label-font-size-md: 1rem;
194
- --checkbox-label-font-size-lg: 1.125rem;
195
- --checkbox-label-font-size-xl: 1.25rem;
202
+ --checkbox-label-font-size-xs: var(--typography-caption, 0.6875rem);
203
+ --checkbox-label-font-size-sm: var(--typography-small, 0.75rem);
204
+ --checkbox-label-font-size-md: var(--typography-body, 0.875rem);
205
+ --checkbox-label-font-size-lg: var(--typography-h6, 0.875rem);
206
+ --checkbox-label-font-size-xl: var(--typography-h5, 1rem);
196
207
  --checkbox-label-spacing-xs: 0.5rem;
197
208
  --checkbox-label-spacing-sm: 0.625rem;
198
209
  --checkbox-label-spacing-md: 0.75rem;
@@ -212,11 +223,11 @@
212
223
  --radio-size-md: 1.5rem;
213
224
  --radio-size-lg: 1.75rem;
214
225
  --radio-size-xl: 2rem;
215
- --radio-label-font-size-xs: 0.75rem;
216
- --radio-label-font-size-sm: 0.875rem;
217
- --radio-label-font-size-md: 1rem;
218
- --radio-label-font-size-lg: 1.125rem;
219
- --radio-label-font-size-xl: 1.25rem;
226
+ --radio-label-font-size-xs: var(--typography-caption, 0.6875rem);
227
+ --radio-label-font-size-sm: var(--typography-small, 0.75rem);
228
+ --radio-label-font-size-md: var(--typography-body, 0.875rem);
229
+ --radio-label-font-size-lg: var(--typography-h6, 0.875rem);
230
+ --radio-label-font-size-xl: var(--typography-h5, 1rem);
220
231
  --radio-label-spacing-xs: 0.5rem;
221
232
  --radio-label-spacing-sm: 0.625rem;
222
233
  --radio-label-spacing-md: 0.75rem;
@@ -292,3 +303,23 @@
292
303
  /* Component: Rating */
293
304
  --star-size: 1.5rem;
294
305
  }
306
+
307
+ /* Responsive Typography - Desktop Overrides */
308
+ @media (min-width: 1024px) {
309
+ :root {
310
+ /* Update component label sizes to use desktop typography */
311
+ --checkbox-label-font-size-xs: var(--typography-caption, 0.6875rem);
312
+ --checkbox-label-font-size-sm: var(--typography-small-desktop, 0.875rem);
313
+ --checkbox-label-font-size-md: var(--typography-body-desktop, 1rem);
314
+ --checkbox-label-font-size-lg: var(--typography-h6-desktop, 1rem);
315
+ --checkbox-label-font-size-xl: var(--typography-h5-desktop, 1.125rem);
316
+
317
+ --radio-label-font-size-xs: var(--typography-caption, 0.6875rem);
318
+ --radio-label-font-size-sm: var(--typography-small-desktop, 0.875rem);
319
+ --radio-label-font-size-md: var(--typography-body-desktop, 1rem);
320
+ --radio-label-font-size-lg: var(--typography-h6-desktop, 1rem);
321
+ --radio-label-font-size-xl: var(--typography-h5-desktop, 1.125rem);
322
+ }
323
+ }
324
+
325
+
package/dist/index.d.mts CHANGED
@@ -2,14 +2,23 @@ import React, { ReactNode } from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import { ClassValue } from 'clsx';
4
4
 
5
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5
+ type ButtonBaseProps = {
6
6
  variant?: "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error";
7
7
  size?: "xs" | "sm" | "md" | "lg" | "xl";
8
8
  isLoading?: boolean;
9
9
  leftIcon?: React.ReactNode;
10
10
  rightIcon?: React.ReactNode;
11
- }
12
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
11
+ children?: React.ReactNode;
12
+ className?: string;
13
+ };
14
+ type ButtonAsButton = ButtonBaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
15
+ href?: never;
16
+ };
17
+ type ButtonAsLink = ButtonBaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> & {
18
+ href: string;
19
+ };
20
+ type ButtonProps = ButtonAsButton | ButtonAsLink;
21
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
13
22
 
14
23
  interface FormState {
15
24
  values: Record<string, any>;
@@ -67,10 +76,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
67
76
  }
68
77
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
69
78
 
70
- interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
71
- variant?: "default" | "bordered" | "elevated";
79
+ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "variant" | "accentColor"> {
80
+ variant?: "default" | "bordered" | "elevated" | "accent";
72
81
  padding?: "none" | "sm" | "md" | "lg";
73
82
  hoverable?: boolean;
83
+ accentColor?: string;
74
84
  }
75
85
  declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
76
86
  declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -84,10 +94,12 @@ interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
84
94
  component?: "img" | "video" | "div";
85
95
  aspectRatio?: "16/9" | "4/3" | "1/1" | "21/9" | string;
86
96
  alt?: string;
97
+ objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
87
98
  }
88
99
  declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
89
100
  interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
90
101
  disableSpacing?: boolean;
102
+ position?: "left" | "center" | "right";
91
103
  }
92
104
  declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
93
105
  interface CardActionAreaProps extends React.HTMLAttributes<HTMLDivElement> {
package/dist/index.d.ts CHANGED
@@ -2,14 +2,23 @@ import React, { ReactNode } from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import { ClassValue } from 'clsx';
4
4
 
5
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
5
+ type ButtonBaseProps = {
6
6
  variant?: "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error";
7
7
  size?: "xs" | "sm" | "md" | "lg" | "xl";
8
8
  isLoading?: boolean;
9
9
  leftIcon?: React.ReactNode;
10
10
  rightIcon?: React.ReactNode;
11
- }
12
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
11
+ children?: React.ReactNode;
12
+ className?: string;
13
+ };
14
+ type ButtonAsButton = ButtonBaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
15
+ href?: never;
16
+ };
17
+ type ButtonAsLink = ButtonBaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> & {
18
+ href: string;
19
+ };
20
+ type ButtonProps = ButtonAsButton | ButtonAsLink;
21
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
13
22
 
14
23
  interface FormState {
15
24
  values: Record<string, any>;
@@ -67,10 +76,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
67
76
  }
68
77
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
69
78
 
70
- interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
71
- variant?: "default" | "bordered" | "elevated";
79
+ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "variant" | "accentColor"> {
80
+ variant?: "default" | "bordered" | "elevated" | "accent";
72
81
  padding?: "none" | "sm" | "md" | "lg";
73
82
  hoverable?: boolean;
83
+ accentColor?: string;
74
84
  }
75
85
  declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
76
86
  declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -84,10 +94,12 @@ interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
84
94
  component?: "img" | "video" | "div";
85
95
  aspectRatio?: "16/9" | "4/3" | "1/1" | "21/9" | string;
86
96
  alt?: string;
97
+ objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
87
98
  }
88
99
  declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
89
100
  interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
90
101
  disableSpacing?: boolean;
102
+ position?: "left" | "center" | "right";
91
103
  }
92
104
  declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
93
105
  interface CardActionAreaProps extends React.HTMLAttributes<HTMLDivElement> {