@spies-ui/react 1.0.6 → 1.0.8

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 (5) hide show
  1. package/dist/index.d.mts +28 -20
  2. package/dist/index.d.ts +28 -20
  3. package/dist/index.js +93 -23
  4. package/dist/index.mjs +94 -24
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -17,7 +17,7 @@ declare const Box: _stitches_react_types_styled_component.StyledComponent<"div",
17
17
  black: string;
18
18
  white: string;
19
19
  smokedWhite: string;
20
- richBlack: string;
20
+ night: string;
21
21
  gray100: string;
22
22
  gray200: string;
23
23
  gray300: string;
@@ -231,13 +231,13 @@ interface BoxProps extends ComponentProps<typeof Box> {
231
231
 
232
232
  declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", {
233
233
  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
234
- variant?: "primary" | "success" | "warning" | "danger" | "default" | undefined;
234
+ variant?: "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "primary" | "success" | "warning" | "danger" | "default" | undefined;
235
235
  }, {}, _stitches_react_types_css_util.CSS<{}, {
236
236
  colors: {
237
237
  black: string;
238
238
  white: string;
239
239
  smokedWhite: string;
240
- richBlack: string;
240
+ night: string;
241
241
  gray100: string;
242
242
  gray200: string;
243
243
  gray300: string;
@@ -451,12 +451,13 @@ interface TextProps extends ComponentProps<typeof Text> {
451
451
 
452
452
  declare const Heading: _stitches_react_types_styled_component.StyledComponent<"h2", {
453
453
  size?: "sm" | "md" | "lg" | "2xl" | "4xl" | "5xl" | "6xl" | "3xl" | undefined;
454
+ variant?: "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "primary" | "success" | "warning" | "danger" | "default" | undefined;
454
455
  }, {}, _stitches_react_types_css_util.CSS<{}, {
455
456
  colors: {
456
457
  black: string;
457
458
  white: string;
458
459
  smokedWhite: string;
459
- richBlack: string;
460
+ night: string;
460
461
  gray100: string;
461
462
  gray200: string;
462
463
  gray300: string;
@@ -673,7 +674,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
673
674
  black: string;
674
675
  white: string;
675
676
  smokedWhite: string;
676
- richBlack: string;
677
+ night: string;
677
678
  gray100: string;
678
679
  gray200: string;
679
680
  gray300: string;
@@ -883,6 +884,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
883
884
  }, {}>>;
884
885
 
885
886
  interface AvatarProps extends ComponentProps<typeof AvatarImage> {
887
+ size: 'default' | 'large';
886
888
  }
887
889
  declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
888
890
  declare namespace Avatar {
@@ -898,7 +900,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
898
900
  black: string;
899
901
  white: string;
900
902
  smokedWhite: string;
901
- richBlack: string;
903
+ night: string;
902
904
  gray100: string;
903
905
  gray200: string;
904
906
  gray300: string;
@@ -1115,7 +1117,7 @@ declare const Input: _stitches_react_types_styled_component.StyledComponent<"inp
1115
1117
  black: string;
1116
1118
  white: string;
1117
1119
  smokedWhite: string;
1118
- richBlack: string;
1120
+ night: string;
1119
1121
  gray100: string;
1120
1122
  gray200: string;
1121
1123
  gray300: string;
@@ -1328,6 +1330,8 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
1328
1330
  label?: string;
1329
1331
  prefix?: string;
1330
1332
  error?: string;
1333
+ hint?: string;
1334
+ required?: boolean;
1331
1335
  size?: 'default' | 'small';
1332
1336
  }
1333
1337
  declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
@@ -1339,7 +1343,7 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1339
1343
  black: string;
1340
1344
  white: string;
1341
1345
  smokedWhite: string;
1342
- richBlack: string;
1346
+ night: string;
1343
1347
  gray100: string;
1344
1348
  gray200: string;
1345
1349
  gray300: string;
@@ -1551,6 +1555,8 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1551
1555
  interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
1552
1556
  label?: string;
1553
1557
  error?: string;
1558
+ hint?: string;
1559
+ required?: boolean;
1554
1560
  }
1555
1561
  declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
1556
1562
 
@@ -1561,7 +1567,7 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1561
1567
  black: string;
1562
1568
  white: string;
1563
1569
  smokedWhite: string;
1564
- richBlack: string;
1570
+ night: string;
1565
1571
  gray100: string;
1566
1572
  gray200: string;
1567
1573
  gray300: string;
@@ -1773,8 +1779,10 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1773
1779
  interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
1774
1780
  label?: string;
1775
1781
  error?: string;
1782
+ hint?: string;
1783
+ required?: boolean;
1776
1784
  }
1777
- declare function Checkbox({ label, error, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1785
+ declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1778
1786
  declare namespace Checkbox {
1779
1787
  var displayName: string;
1780
1788
  }
@@ -1801,7 +1809,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
1801
1809
  black: string;
1802
1810
  white: string;
1803
1811
  smokedWhite: string;
1804
- richBlack: string;
1812
+ night: string;
1805
1813
  gray100: string;
1806
1814
  gray200: string;
1807
1815
  gray300: string;
@@ -2024,7 +2032,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
2024
2032
  black: string;
2025
2033
  white: string;
2026
2034
  smokedWhite: string;
2027
- richBlack: string;
2035
+ night: string;
2028
2036
  gray100: string;
2029
2037
  gray200: string;
2030
2038
  gray300: string;
@@ -2239,7 +2247,7 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
2239
2247
  black: string;
2240
2248
  white: string;
2241
2249
  smokedWhite: string;
2242
- richBlack: string;
2250
+ night: string;
2243
2251
  gray100: string;
2244
2252
  gray200: string;
2245
2253
  gray300: string;
@@ -2469,7 +2477,7 @@ declare const globalCss: <Styles extends {
2469
2477
  black: string;
2470
2478
  white: string;
2471
2479
  smokedWhite: string;
2472
- richBlack: string;
2480
+ night: string;
2473
2481
  gray100: string;
2474
2482
  gray200: string;
2475
2483
  gray300: string;
@@ -2682,7 +2690,7 @@ declare const globalCss: <Styles extends {
2682
2690
  black: string;
2683
2691
  white: string;
2684
2692
  smokedWhite: string;
2685
- richBlack: string;
2693
+ night: string;
2686
2694
  gray100: string;
2687
2695
  gray200: string;
2688
2696
  gray300: string;
@@ -2896,7 +2904,7 @@ declare const keyframes: (style: {
2896
2904
  black: string;
2897
2905
  white: string;
2898
2906
  smokedWhite: string;
2899
- richBlack: string;
2907
+ night: string;
2900
2908
  gray100: string;
2901
2909
  gray200: string;
2902
2910
  gray300: string;
@@ -3117,7 +3125,7 @@ declare const theme: string & {
3117
3125
  black: _stitches_react_types_theme.Token<"black", string, "colors", "">;
3118
3126
  white: _stitches_react_types_theme.Token<"white", string, "colors", "">;
3119
3127
  smokedWhite: _stitches_react_types_theme.Token<"smokedWhite", string, "colors", "">;
3120
- richBlack: _stitches_react_types_theme.Token<"richBlack", string, "colors", "">;
3128
+ night: _stitches_react_types_theme.Token<"night", string, "colors", "">;
3121
3129
  gray100: _stitches_react_types_theme.Token<"gray100", string, "colors", "">;
3122
3130
  gray200: _stitches_react_types_theme.Token<"gray200", string, "colors", "">;
3123
3131
  gray300: _stitches_react_types_theme.Token<"gray300", string, "colors", "">;
@@ -3201,7 +3209,7 @@ declare const createTheme: <Argument0 extends string | ({
3201
3209
  black?: string | number | boolean | undefined;
3202
3210
  white?: string | number | boolean | undefined;
3203
3211
  smokedWhite?: string | number | boolean | undefined;
3204
- richBlack?: string | number | boolean | undefined;
3212
+ night?: string | number | boolean | undefined;
3205
3213
  gray100?: string | number | boolean | undefined;
3206
3214
  gray200?: string | number | boolean | undefined;
3207
3215
  gray300?: string | number | boolean | undefined;
@@ -3289,7 +3297,7 @@ declare const createTheme: <Argument0 extends string | ({
3289
3297
  black?: string | number | boolean | undefined;
3290
3298
  white?: string | number | boolean | undefined;
3291
3299
  smokedWhite?: string | number | boolean | undefined;
3292
- richBlack?: string | number | boolean | undefined;
3300
+ night?: string | number | boolean | undefined;
3293
3301
  gray100?: string | number | boolean | undefined;
3294
3302
  gray200?: string | number | boolean | undefined;
3295
3303
  gray300?: string | number | boolean | undefined;
@@ -3384,7 +3392,7 @@ declare const config: {
3384
3392
  black: string;
3385
3393
  white: string;
3386
3394
  smokedWhite: string;
3387
- richBlack: string;
3395
+ night: string;
3388
3396
  gray100: string;
3389
3397
  gray200: string;
3390
3398
  gray300: string;
package/dist/index.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const Box: _stitches_react_types_styled_component.StyledComponent<"div",
17
17
  black: string;
18
18
  white: string;
19
19
  smokedWhite: string;
20
- richBlack: string;
20
+ night: string;
21
21
  gray100: string;
22
22
  gray200: string;
23
23
  gray300: string;
@@ -231,13 +231,13 @@ interface BoxProps extends ComponentProps<typeof Box> {
231
231
 
232
232
  declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", {
233
233
  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
234
- variant?: "primary" | "success" | "warning" | "danger" | "default" | undefined;
234
+ variant?: "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "primary" | "success" | "warning" | "danger" | "default" | undefined;
235
235
  }, {}, _stitches_react_types_css_util.CSS<{}, {
236
236
  colors: {
237
237
  black: string;
238
238
  white: string;
239
239
  smokedWhite: string;
240
- richBlack: string;
240
+ night: string;
241
241
  gray100: string;
242
242
  gray200: string;
243
243
  gray300: string;
@@ -451,12 +451,13 @@ interface TextProps extends ComponentProps<typeof Text> {
451
451
 
452
452
  declare const Heading: _stitches_react_types_styled_component.StyledComponent<"h2", {
453
453
  size?: "sm" | "md" | "lg" | "2xl" | "4xl" | "5xl" | "6xl" | "3xl" | undefined;
454
+ variant?: "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "primary" | "success" | "warning" | "danger" | "default" | undefined;
454
455
  }, {}, _stitches_react_types_css_util.CSS<{}, {
455
456
  colors: {
456
457
  black: string;
457
458
  white: string;
458
459
  smokedWhite: string;
459
- richBlack: string;
460
+ night: string;
460
461
  gray100: string;
461
462
  gray200: string;
462
463
  gray300: string;
@@ -673,7 +674,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
673
674
  black: string;
674
675
  white: string;
675
676
  smokedWhite: string;
676
- richBlack: string;
677
+ night: string;
677
678
  gray100: string;
678
679
  gray200: string;
679
680
  gray300: string;
@@ -883,6 +884,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
883
884
  }, {}>>;
884
885
 
885
886
  interface AvatarProps extends ComponentProps<typeof AvatarImage> {
887
+ size: 'default' | 'large';
886
888
  }
887
889
  declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
888
890
  declare namespace Avatar {
@@ -898,7 +900,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
898
900
  black: string;
899
901
  white: string;
900
902
  smokedWhite: string;
901
- richBlack: string;
903
+ night: string;
902
904
  gray100: string;
903
905
  gray200: string;
904
906
  gray300: string;
@@ -1115,7 +1117,7 @@ declare const Input: _stitches_react_types_styled_component.StyledComponent<"inp
1115
1117
  black: string;
1116
1118
  white: string;
1117
1119
  smokedWhite: string;
1118
- richBlack: string;
1120
+ night: string;
1119
1121
  gray100: string;
1120
1122
  gray200: string;
1121
1123
  gray300: string;
@@ -1328,6 +1330,8 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
1328
1330
  label?: string;
1329
1331
  prefix?: string;
1330
1332
  error?: string;
1333
+ hint?: string;
1334
+ required?: boolean;
1331
1335
  size?: 'default' | 'small';
1332
1336
  }
1333
1337
  declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
@@ -1339,7 +1343,7 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1339
1343
  black: string;
1340
1344
  white: string;
1341
1345
  smokedWhite: string;
1342
- richBlack: string;
1346
+ night: string;
1343
1347
  gray100: string;
1344
1348
  gray200: string;
1345
1349
  gray300: string;
@@ -1551,6 +1555,8 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1551
1555
  interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
1552
1556
  label?: string;
1553
1557
  error?: string;
1558
+ hint?: string;
1559
+ required?: boolean;
1554
1560
  }
1555
1561
  declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
1556
1562
 
@@ -1561,7 +1567,7 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1561
1567
  black: string;
1562
1568
  white: string;
1563
1569
  smokedWhite: string;
1564
- richBlack: string;
1570
+ night: string;
1565
1571
  gray100: string;
1566
1572
  gray200: string;
1567
1573
  gray300: string;
@@ -1773,8 +1779,10 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1773
1779
  interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
1774
1780
  label?: string;
1775
1781
  error?: string;
1782
+ hint?: string;
1783
+ required?: boolean;
1776
1784
  }
1777
- declare function Checkbox({ label, error, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1785
+ declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1778
1786
  declare namespace Checkbox {
1779
1787
  var displayName: string;
1780
1788
  }
@@ -1801,7 +1809,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
1801
1809
  black: string;
1802
1810
  white: string;
1803
1811
  smokedWhite: string;
1804
- richBlack: string;
1812
+ night: string;
1805
1813
  gray100: string;
1806
1814
  gray200: string;
1807
1815
  gray300: string;
@@ -2024,7 +2032,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
2024
2032
  black: string;
2025
2033
  white: string;
2026
2034
  smokedWhite: string;
2027
- richBlack: string;
2035
+ night: string;
2028
2036
  gray100: string;
2029
2037
  gray200: string;
2030
2038
  gray300: string;
@@ -2239,7 +2247,7 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
2239
2247
  black: string;
2240
2248
  white: string;
2241
2249
  smokedWhite: string;
2242
- richBlack: string;
2250
+ night: string;
2243
2251
  gray100: string;
2244
2252
  gray200: string;
2245
2253
  gray300: string;
@@ -2469,7 +2477,7 @@ declare const globalCss: <Styles extends {
2469
2477
  black: string;
2470
2478
  white: string;
2471
2479
  smokedWhite: string;
2472
- richBlack: string;
2480
+ night: string;
2473
2481
  gray100: string;
2474
2482
  gray200: string;
2475
2483
  gray300: string;
@@ -2682,7 +2690,7 @@ declare const globalCss: <Styles extends {
2682
2690
  black: string;
2683
2691
  white: string;
2684
2692
  smokedWhite: string;
2685
- richBlack: string;
2693
+ night: string;
2686
2694
  gray100: string;
2687
2695
  gray200: string;
2688
2696
  gray300: string;
@@ -2896,7 +2904,7 @@ declare const keyframes: (style: {
2896
2904
  black: string;
2897
2905
  white: string;
2898
2906
  smokedWhite: string;
2899
- richBlack: string;
2907
+ night: string;
2900
2908
  gray100: string;
2901
2909
  gray200: string;
2902
2910
  gray300: string;
@@ -3117,7 +3125,7 @@ declare const theme: string & {
3117
3125
  black: _stitches_react_types_theme.Token<"black", string, "colors", "">;
3118
3126
  white: _stitches_react_types_theme.Token<"white", string, "colors", "">;
3119
3127
  smokedWhite: _stitches_react_types_theme.Token<"smokedWhite", string, "colors", "">;
3120
- richBlack: _stitches_react_types_theme.Token<"richBlack", string, "colors", "">;
3128
+ night: _stitches_react_types_theme.Token<"night", string, "colors", "">;
3121
3129
  gray100: _stitches_react_types_theme.Token<"gray100", string, "colors", "">;
3122
3130
  gray200: _stitches_react_types_theme.Token<"gray200", string, "colors", "">;
3123
3131
  gray300: _stitches_react_types_theme.Token<"gray300", string, "colors", "">;
@@ -3201,7 +3209,7 @@ declare const createTheme: <Argument0 extends string | ({
3201
3209
  black?: string | number | boolean | undefined;
3202
3210
  white?: string | number | boolean | undefined;
3203
3211
  smokedWhite?: string | number | boolean | undefined;
3204
- richBlack?: string | number | boolean | undefined;
3212
+ night?: string | number | boolean | undefined;
3205
3213
  gray100?: string | number | boolean | undefined;
3206
3214
  gray200?: string | number | boolean | undefined;
3207
3215
  gray300?: string | number | boolean | undefined;
@@ -3289,7 +3297,7 @@ declare const createTheme: <Argument0 extends string | ({
3289
3297
  black?: string | number | boolean | undefined;
3290
3298
  white?: string | number | boolean | undefined;
3291
3299
  smokedWhite?: string | number | boolean | undefined;
3292
- richBlack?: string | number | boolean | undefined;
3300
+ night?: string | number | boolean | undefined;
3293
3301
  gray100?: string | number | boolean | undefined;
3294
3302
  gray200?: string | number | boolean | undefined;
3295
3303
  gray300?: string | number | boolean | undefined;
@@ -3384,7 +3392,7 @@ declare const config: {
3384
3392
  black: string;
3385
3393
  white: string;
3386
3394
  smokedWhite: string;
3387
- richBlack: string;
3395
+ night: string;
3388
3396
  gray100: string;
3389
3397
  gray200: string;
3390
3398
  gray300: string;
package/dist/index.js CHANGED
@@ -95,7 +95,7 @@ var require_dist = __commonJS({
95
95
  black: "#000000",
96
96
  white: "#ffffff",
97
97
  smokedWhite: "#f5f5f5",
98
- richBlack: "#000014",
98
+ night: "#0A0A0A",
99
99
  gray100: "#e0e0e0",
100
100
  gray200: "#CCCCCC",
101
101
  gray300: "#ADADAD",
@@ -249,6 +249,9 @@ var Box = styled("div", {
249
249
  backgroundColor: "$gray900"
250
250
  }
251
251
  }
252
+ },
253
+ defaultVariants: {
254
+ background: "default"
252
255
  }
253
256
  });
254
257
  Box.displayName = "Box";
@@ -280,7 +283,16 @@ var Text = styled("p", {
280
283
  primary: { color: "$primary" },
281
284
  danger: { color: "$danger" },
282
285
  success: { color: "$success" },
283
- warning: { color: "$warning" }
286
+ warning: { color: "$warning" },
287
+ gray100: { color: "$gray100" },
288
+ gray200: { color: "$gray200" },
289
+ gray300: { color: "$gray300" },
290
+ gray400: { color: "$gray400" },
291
+ gray500: { color: "$gray500" },
292
+ gray600: { color: "$gray600" },
293
+ gray700: { color: "$gray700" },
294
+ gray800: { color: "$gray800" },
295
+ gray900: { color: "$gray900" }
284
296
  }
285
297
  },
286
298
  defaultVariants: {
@@ -295,7 +307,6 @@ var Heading = styled("h2", {
295
307
  fontFamily: "$heading",
296
308
  lineHeight: "$shorter",
297
309
  margin: 0,
298
- color: "$smokedWhite",
299
310
  variants: {
300
311
  size: {
301
312
  sm: { fontSize: "$xl" },
@@ -306,22 +317,52 @@ var Heading = styled("h2", {
306
317
  "4xl": { fontSize: "$6xl" },
307
318
  "5xl": { fontSize: "$7xl" },
308
319
  "6xl": { fontSize: "$8xl" }
320
+ },
321
+ variant: {
322
+ default: { color: "$smokedWhite" },
323
+ primary: { color: "$primary" },
324
+ danger: { color: "$danger" },
325
+ success: { color: "$success" },
326
+ warning: { color: "$warning" },
327
+ gray100: { color: "$gray100" },
328
+ gray200: { color: "$gray200" },
329
+ gray300: { color: "$gray300" },
330
+ gray400: { color: "$gray400" },
331
+ gray500: { color: "$gray500" },
332
+ gray600: { color: "$gray600" },
333
+ gray700: { color: "$gray700" },
334
+ gray800: { color: "$gray800" },
335
+ gray900: { color: "$gray900" }
309
336
  }
310
337
  },
311
338
  defaultVariants: {
312
- size: "md"
339
+ size: "md",
340
+ variant: "smokedWhite"
313
341
  }
314
342
  });
315
343
  Heading.displayName = "Heading";
316
344
 
317
- // src/components/Avatar/styles.tsx
345
+ // src/components/Avatar/styles.ts
318
346
  var Avatar = __toESM(require("@radix-ui/react-avatar"));
319
347
  var AvatarContainer = styled(Avatar.Root, {
320
348
  borderRadius: "$full",
321
349
  display: "inline-block",
322
- width: "$12",
323
- height: "$12",
324
- overflow: "hidden"
350
+ overflow: "hidden",
351
+ variants: {
352
+ size: {
353
+ default: {
354
+ width: "$12",
355
+ height: "$12"
356
+ },
357
+ large: {
358
+ width: "$20",
359
+ height: "$20"
360
+ }
361
+ }
362
+ },
363
+ defaultVariants: {
364
+ size: "default"
365
+ }
325
366
  });
326
367
  var AvatarImage = styled(Avatar.Image, {
327
368
  width: "100%",
@@ -347,7 +388,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
347
388
  var import_phosphor_react = require("phosphor-react");
348
389
  var import_jsx_runtime = require("react/jsx-runtime");
349
390
  function Avatar2(props) {
350
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { children: [
391
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { size: props.size, children: [
351
392
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, __spreadValues({}, props)),
352
393
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.User, {}) })
353
394
  ] });
@@ -501,19 +542,34 @@ var Input = styled("input", {
501
542
  });
502
543
 
503
544
  // src/components/InputBox/styles.ts
504
- var InputContainer = styled("div", {
545
+ var InputContainer = styled("label", {
505
546
  display: "flex",
506
- flexDirection: "column",
507
- gap: "$2"
547
+ flexDirection: "column"
548
+ });
549
+ var TextBox = styled("div", {
550
+ margin: 0,
551
+ paddingTop: "$1"
508
552
  });
509
553
 
510
554
  // src/components/InputBox/index.tsx
511
555
  var import_jsx_runtime2 = require("react/jsx-runtime");
512
- function InputBox({ label, error, children }) {
556
+ function InputBox({
557
+ label,
558
+ error,
559
+ hint,
560
+ required,
561
+ children
562
+ }) {
513
563
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(InputContainer, { children: [
514
- !!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "sm", children: label }),
564
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
565
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", children: label }),
566
+ required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
567
+ ] }),
515
568
  children,
516
- !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "danger", children: error })
569
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TextBox, { children: [
570
+ !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "danger", children: error }),
571
+ !error && hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "gray200", children: hint })
572
+ ] })
517
573
  ] });
518
574
  }
519
575
  InputBox.displayName = "InputBox";
@@ -522,8 +578,8 @@ InputBox.displayName = "InputBox";
522
578
  var import_jsx_runtime3 = require("react/jsx-runtime");
523
579
  var TextInput = (0, import_react2.forwardRef)(
524
580
  (_a, ref) => {
525
- var _b = _a, { label, prefix, error, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "size"]);
526
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
581
+ var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
582
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, hint, required, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
527
583
  !!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Prefix, { children: prefix }),
528
584
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadValues({ ref }, props))
529
585
  ] }) });
@@ -573,19 +629,20 @@ var TextAreaInput = styled("textarea", {
573
629
  // src/components/TextArea/index.tsx
574
630
  var import_jsx_runtime4 = require("react/jsx-runtime");
575
631
  var TextArea = (0, import_react3.forwardRef)((_a, ref) => {
576
- var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
577
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
632
+ var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
633
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, hint, required, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
578
634
  });
579
635
  TextArea.displayName = "TextArea";
580
636
 
581
637
  // src/components/Checkbox/index.tsx
582
638
  var import_phosphor_react2 = require("phosphor-react");
583
639
 
584
- // src/components/Checkbox/styles.tsx
640
+ // src/components/Checkbox/styles.ts
585
641
  var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
586
642
  var CheckboxBox = styled("div", {
587
643
  display: "flex",
588
644
  gap: "$2",
645
+ alignItems: "center",
589
646
  "&:has(button:disabled)": {
590
647
  opacity: 0.5
591
648
  }
@@ -656,10 +713,23 @@ var CheckboxIndicator = styled(Checkbox.Indicator, {
656
713
  // src/components/Checkbox/index.tsx
657
714
  var import_jsx_runtime5 = require("react/jsx-runtime");
658
715
  function Checkbox2(_a) {
659
- var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
660
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
716
+ var _b = _a, {
717
+ label,
718
+ error,
719
+ hint,
720
+ required
721
+ } = _b, props = __objRest(_b, [
722
+ "label",
723
+ "error",
724
+ "hint",
725
+ "required"
726
+ ]);
727
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, hint, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
661
728
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Check, { weight: "bold" }) }) })),
662
- !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", children: label })
729
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
730
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", children: label }),
731
+ required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
732
+ ] })
663
733
  ] }) });
664
734
  }
665
735
  Checkbox2.displayName = "Checkbox";
package/dist/index.mjs CHANGED
@@ -89,7 +89,7 @@ var require_dist = __commonJS({
89
89
  black: "#000000",
90
90
  white: "#ffffff",
91
91
  smokedWhite: "#f5f5f5",
92
- richBlack: "#000014",
92
+ night: "#0A0A0A",
93
93
  gray100: "#e0e0e0",
94
94
  gray200: "#CCCCCC",
95
95
  gray300: "#ADADAD",
@@ -220,6 +220,9 @@ var Box = styled("div", {
220
220
  backgroundColor: "$gray900"
221
221
  }
222
222
  }
223
+ },
224
+ defaultVariants: {
225
+ background: "default"
223
226
  }
224
227
  });
225
228
  Box.displayName = "Box";
@@ -251,7 +254,16 @@ var Text = styled("p", {
251
254
  primary: { color: "$primary" },
252
255
  danger: { color: "$danger" },
253
256
  success: { color: "$success" },
254
- warning: { color: "$warning" }
257
+ warning: { color: "$warning" },
258
+ gray100: { color: "$gray100" },
259
+ gray200: { color: "$gray200" },
260
+ gray300: { color: "$gray300" },
261
+ gray400: { color: "$gray400" },
262
+ gray500: { color: "$gray500" },
263
+ gray600: { color: "$gray600" },
264
+ gray700: { color: "$gray700" },
265
+ gray800: { color: "$gray800" },
266
+ gray900: { color: "$gray900" }
255
267
  }
256
268
  },
257
269
  defaultVariants: {
@@ -266,7 +278,6 @@ var Heading = styled("h2", {
266
278
  fontFamily: "$heading",
267
279
  lineHeight: "$shorter",
268
280
  margin: 0,
269
- color: "$smokedWhite",
270
281
  variants: {
271
282
  size: {
272
283
  sm: { fontSize: "$xl" },
@@ -277,22 +288,52 @@ var Heading = styled("h2", {
277
288
  "4xl": { fontSize: "$6xl" },
278
289
  "5xl": { fontSize: "$7xl" },
279
290
  "6xl": { fontSize: "$8xl" }
291
+ },
292
+ variant: {
293
+ default: { color: "$smokedWhite" },
294
+ primary: { color: "$primary" },
295
+ danger: { color: "$danger" },
296
+ success: { color: "$success" },
297
+ warning: { color: "$warning" },
298
+ gray100: { color: "$gray100" },
299
+ gray200: { color: "$gray200" },
300
+ gray300: { color: "$gray300" },
301
+ gray400: { color: "$gray400" },
302
+ gray500: { color: "$gray500" },
303
+ gray600: { color: "$gray600" },
304
+ gray700: { color: "$gray700" },
305
+ gray800: { color: "$gray800" },
306
+ gray900: { color: "$gray900" }
280
307
  }
281
308
  },
282
309
  defaultVariants: {
283
- size: "md"
310
+ size: "md",
311
+ variant: "smokedWhite"
284
312
  }
285
313
  });
286
314
  Heading.displayName = "Heading";
287
315
 
288
- // src/components/Avatar/styles.tsx
316
+ // src/components/Avatar/styles.ts
289
317
  import * as Avatar from "@radix-ui/react-avatar";
290
318
  var AvatarContainer = styled(Avatar.Root, {
291
319
  borderRadius: "$full",
292
320
  display: "inline-block",
293
- width: "$12",
294
- height: "$12",
295
- overflow: "hidden"
321
+ overflow: "hidden",
322
+ variants: {
323
+ size: {
324
+ default: {
325
+ width: "$12",
326
+ height: "$12"
327
+ },
328
+ large: {
329
+ width: "$20",
330
+ height: "$20"
331
+ }
332
+ }
333
+ },
334
+ defaultVariants: {
335
+ size: "default"
336
+ }
296
337
  });
297
338
  var AvatarImage = styled(Avatar.Image, {
298
339
  width: "100%",
@@ -318,7 +359,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
318
359
  import { User } from "phosphor-react";
319
360
  import { jsx, jsxs } from "react/jsx-runtime";
320
361
  function Avatar2(props) {
321
- return /* @__PURE__ */ jsxs(AvatarContainer, { children: [
362
+ return /* @__PURE__ */ jsxs(AvatarContainer, { size: props.size, children: [
322
363
  /* @__PURE__ */ jsx(AvatarImage, __spreadValues({}, props)),
323
364
  /* @__PURE__ */ jsx(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ jsx(User, {}) })
324
365
  ] });
@@ -472,19 +513,34 @@ var Input = styled("input", {
472
513
  });
473
514
 
474
515
  // src/components/InputBox/styles.ts
475
- var InputContainer = styled("div", {
516
+ var InputContainer = styled("label", {
476
517
  display: "flex",
477
- flexDirection: "column",
478
- gap: "$2"
518
+ flexDirection: "column"
519
+ });
520
+ var TextBox = styled("div", {
521
+ margin: 0,
522
+ paddingTop: "$1"
479
523
  });
480
524
 
481
525
  // src/components/InputBox/index.tsx
482
526
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
483
- function InputBox({ label, error, children }) {
527
+ function InputBox({
528
+ label,
529
+ error,
530
+ hint,
531
+ required,
532
+ children
533
+ }) {
484
534
  return /* @__PURE__ */ jsxs2(InputContainer, { children: [
485
- !!label && /* @__PURE__ */ jsx2(Text, { size: "sm", children: label }),
535
+ /* @__PURE__ */ jsxs2("div", { children: [
536
+ !!label && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", children: label }),
537
+ required && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
538
+ ] }),
486
539
  children,
487
- !!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error })
540
+ /* @__PURE__ */ jsxs2(TextBox, { children: [
541
+ !!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error }),
542
+ !error && hint && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "gray200", children: hint })
543
+ ] })
488
544
  ] });
489
545
  }
490
546
  InputBox.displayName = "InputBox";
@@ -493,8 +549,8 @@ InputBox.displayName = "InputBox";
493
549
  import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
494
550
  var TextInput = forwardRef(
495
551
  (_a, ref) => {
496
- var _b = _a, { label, prefix, error, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "size"]);
497
- return /* @__PURE__ */ jsx3(InputBox, { label, error, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
552
+ var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
553
+ return /* @__PURE__ */ jsx3(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
498
554
  !!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
499
555
  /* @__PURE__ */ jsx3(Input, __spreadValues({ ref }, props))
500
556
  ] }) });
@@ -544,19 +600,20 @@ var TextAreaInput = styled("textarea", {
544
600
  // src/components/TextArea/index.tsx
545
601
  import { jsx as jsx4 } from "react/jsx-runtime";
546
602
  var TextArea = forwardRef2((_a, ref) => {
547
- var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
548
- return /* @__PURE__ */ jsx4(InputBox, { label, error, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
603
+ var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
604
+ return /* @__PURE__ */ jsx4(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
549
605
  });
550
606
  TextArea.displayName = "TextArea";
551
607
 
552
608
  // src/components/Checkbox/index.tsx
553
609
  import { Check } from "phosphor-react";
554
610
 
555
- // src/components/Checkbox/styles.tsx
611
+ // src/components/Checkbox/styles.ts
556
612
  import * as Checkbox from "@radix-ui/react-checkbox";
557
613
  var CheckboxBox = styled("div", {
558
614
  display: "flex",
559
615
  gap: "$2",
616
+ alignItems: "center",
560
617
  "&:has(button:disabled)": {
561
618
  opacity: 0.5
562
619
  }
@@ -625,12 +682,25 @@ var CheckboxIndicator = styled(Checkbox.Indicator, {
625
682
  });
626
683
 
627
684
  // src/components/Checkbox/index.tsx
628
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
685
+ import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
629
686
  function Checkbox2(_a) {
630
- var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
631
- return /* @__PURE__ */ jsx5(InputBox, { error, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
687
+ var _b = _a, {
688
+ label,
689
+ error,
690
+ hint,
691
+ required
692
+ } = _b, props = __objRest(_b, [
693
+ "label",
694
+ "error",
695
+ "hint",
696
+ "required"
697
+ ]);
698
+ return /* @__PURE__ */ jsx5(InputBox, { error, hint, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
632
699
  /* @__PURE__ */ jsx5(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ jsx5(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ jsx5(Check, { weight: "bold" }) }) })),
633
- !!label && /* @__PURE__ */ jsx5(Text, { size: "sm", children: label })
700
+ /* @__PURE__ */ jsxs4(Fragment, { children: [
701
+ !!label && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", children: label }),
702
+ required && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
703
+ ] })
634
704
  ] }) });
635
705
  }
636
706
  Checkbox2.displayName = "Checkbox";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spies-ui/react",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "",
5
5
  "main": "./dist/index.mjs",
6
6
  "module": "./dist/index.js",