@spies-ui/react 1.0.6 → 1.0.7

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 +27 -20
  2. package/dist/index.d.ts +27 -20
  3. package/dist/index.js +75 -18
  4. package/dist/index.mjs +76 -19
  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;
@@ -898,7 +899,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
898
899
  black: string;
899
900
  white: string;
900
901
  smokedWhite: string;
901
- richBlack: string;
902
+ night: string;
902
903
  gray100: string;
903
904
  gray200: string;
904
905
  gray300: string;
@@ -1115,7 +1116,7 @@ declare const Input: _stitches_react_types_styled_component.StyledComponent<"inp
1115
1116
  black: string;
1116
1117
  white: string;
1117
1118
  smokedWhite: string;
1118
- richBlack: string;
1119
+ night: string;
1119
1120
  gray100: string;
1120
1121
  gray200: string;
1121
1122
  gray300: string;
@@ -1328,6 +1329,8 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
1328
1329
  label?: string;
1329
1330
  prefix?: string;
1330
1331
  error?: string;
1332
+ hint?: string;
1333
+ required?: boolean;
1331
1334
  size?: 'default' | 'small';
1332
1335
  }
1333
1336
  declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
@@ -1339,7 +1342,7 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1339
1342
  black: string;
1340
1343
  white: string;
1341
1344
  smokedWhite: string;
1342
- richBlack: string;
1345
+ night: string;
1343
1346
  gray100: string;
1344
1347
  gray200: string;
1345
1348
  gray300: string;
@@ -1551,6 +1554,8 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1551
1554
  interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
1552
1555
  label?: string;
1553
1556
  error?: string;
1557
+ hint?: string;
1558
+ required?: boolean;
1554
1559
  }
1555
1560
  declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
1556
1561
 
@@ -1561,7 +1566,7 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1561
1566
  black: string;
1562
1567
  white: string;
1563
1568
  smokedWhite: string;
1564
- richBlack: string;
1569
+ night: string;
1565
1570
  gray100: string;
1566
1571
  gray200: string;
1567
1572
  gray300: string;
@@ -1773,8 +1778,10 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1773
1778
  interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
1774
1779
  label?: string;
1775
1780
  error?: string;
1781
+ hint?: string;
1782
+ required?: boolean;
1776
1783
  }
1777
- declare function Checkbox({ label, error, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1784
+ declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1778
1785
  declare namespace Checkbox {
1779
1786
  var displayName: string;
1780
1787
  }
@@ -1801,7 +1808,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
1801
1808
  black: string;
1802
1809
  white: string;
1803
1810
  smokedWhite: string;
1804
- richBlack: string;
1811
+ night: string;
1805
1812
  gray100: string;
1806
1813
  gray200: string;
1807
1814
  gray300: string;
@@ -2024,7 +2031,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
2024
2031
  black: string;
2025
2032
  white: string;
2026
2033
  smokedWhite: string;
2027
- richBlack: string;
2034
+ night: string;
2028
2035
  gray100: string;
2029
2036
  gray200: string;
2030
2037
  gray300: string;
@@ -2239,7 +2246,7 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
2239
2246
  black: string;
2240
2247
  white: string;
2241
2248
  smokedWhite: string;
2242
- richBlack: string;
2249
+ night: string;
2243
2250
  gray100: string;
2244
2251
  gray200: string;
2245
2252
  gray300: string;
@@ -2469,7 +2476,7 @@ declare const globalCss: <Styles extends {
2469
2476
  black: string;
2470
2477
  white: string;
2471
2478
  smokedWhite: string;
2472
- richBlack: string;
2479
+ night: string;
2473
2480
  gray100: string;
2474
2481
  gray200: string;
2475
2482
  gray300: string;
@@ -2682,7 +2689,7 @@ declare const globalCss: <Styles extends {
2682
2689
  black: string;
2683
2690
  white: string;
2684
2691
  smokedWhite: string;
2685
- richBlack: string;
2692
+ night: string;
2686
2693
  gray100: string;
2687
2694
  gray200: string;
2688
2695
  gray300: string;
@@ -2896,7 +2903,7 @@ declare const keyframes: (style: {
2896
2903
  black: string;
2897
2904
  white: string;
2898
2905
  smokedWhite: string;
2899
- richBlack: string;
2906
+ night: string;
2900
2907
  gray100: string;
2901
2908
  gray200: string;
2902
2909
  gray300: string;
@@ -3117,7 +3124,7 @@ declare const theme: string & {
3117
3124
  black: _stitches_react_types_theme.Token<"black", string, "colors", "">;
3118
3125
  white: _stitches_react_types_theme.Token<"white", string, "colors", "">;
3119
3126
  smokedWhite: _stitches_react_types_theme.Token<"smokedWhite", string, "colors", "">;
3120
- richBlack: _stitches_react_types_theme.Token<"richBlack", string, "colors", "">;
3127
+ night: _stitches_react_types_theme.Token<"night", string, "colors", "">;
3121
3128
  gray100: _stitches_react_types_theme.Token<"gray100", string, "colors", "">;
3122
3129
  gray200: _stitches_react_types_theme.Token<"gray200", string, "colors", "">;
3123
3130
  gray300: _stitches_react_types_theme.Token<"gray300", string, "colors", "">;
@@ -3201,7 +3208,7 @@ declare const createTheme: <Argument0 extends string | ({
3201
3208
  black?: string | number | boolean | undefined;
3202
3209
  white?: string | number | boolean | undefined;
3203
3210
  smokedWhite?: string | number | boolean | undefined;
3204
- richBlack?: string | number | boolean | undefined;
3211
+ night?: string | number | boolean | undefined;
3205
3212
  gray100?: string | number | boolean | undefined;
3206
3213
  gray200?: string | number | boolean | undefined;
3207
3214
  gray300?: string | number | boolean | undefined;
@@ -3289,7 +3296,7 @@ declare const createTheme: <Argument0 extends string | ({
3289
3296
  black?: string | number | boolean | undefined;
3290
3297
  white?: string | number | boolean | undefined;
3291
3298
  smokedWhite?: string | number | boolean | undefined;
3292
- richBlack?: string | number | boolean | undefined;
3299
+ night?: string | number | boolean | undefined;
3293
3300
  gray100?: string | number | boolean | undefined;
3294
3301
  gray200?: string | number | boolean | undefined;
3295
3302
  gray300?: string | number | boolean | undefined;
@@ -3384,7 +3391,7 @@ declare const config: {
3384
3391
  black: string;
3385
3392
  white: string;
3386
3393
  smokedWhite: string;
3387
- richBlack: string;
3394
+ night: string;
3388
3395
  gray100: string;
3389
3396
  gray200: string;
3390
3397
  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;
@@ -898,7 +899,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
898
899
  black: string;
899
900
  white: string;
900
901
  smokedWhite: string;
901
- richBlack: string;
902
+ night: string;
902
903
  gray100: string;
903
904
  gray200: string;
904
905
  gray300: string;
@@ -1115,7 +1116,7 @@ declare const Input: _stitches_react_types_styled_component.StyledComponent<"inp
1115
1116
  black: string;
1116
1117
  white: string;
1117
1118
  smokedWhite: string;
1118
- richBlack: string;
1119
+ night: string;
1119
1120
  gray100: string;
1120
1121
  gray200: string;
1121
1122
  gray300: string;
@@ -1328,6 +1329,8 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
1328
1329
  label?: string;
1329
1330
  prefix?: string;
1330
1331
  error?: string;
1332
+ hint?: string;
1333
+ required?: boolean;
1331
1334
  size?: 'default' | 'small';
1332
1335
  }
1333
1336
  declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
@@ -1339,7 +1342,7 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1339
1342
  black: string;
1340
1343
  white: string;
1341
1344
  smokedWhite: string;
1342
- richBlack: string;
1345
+ night: string;
1343
1346
  gray100: string;
1344
1347
  gray200: string;
1345
1348
  gray300: string;
@@ -1551,6 +1554,8 @@ declare const TextAreaInput: _stitches_react_types_styled_component.StyledCompon
1551
1554
  interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
1552
1555
  label?: string;
1553
1556
  error?: string;
1557
+ hint?: string;
1558
+ required?: boolean;
1554
1559
  }
1555
1560
  declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
1556
1561
 
@@ -1561,7 +1566,7 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1561
1566
  black: string;
1562
1567
  white: string;
1563
1568
  smokedWhite: string;
1564
- richBlack: string;
1569
+ night: string;
1565
1570
  gray100: string;
1566
1571
  gray200: string;
1567
1572
  gray300: string;
@@ -1773,8 +1778,10 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
1773
1778
  interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
1774
1779
  label?: string;
1775
1780
  error?: string;
1781
+ hint?: string;
1782
+ required?: boolean;
1776
1783
  }
1777
- declare function Checkbox({ label, error, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1784
+ declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
1778
1785
  declare namespace Checkbox {
1779
1786
  var displayName: string;
1780
1787
  }
@@ -1801,7 +1808,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
1801
1808
  black: string;
1802
1809
  white: string;
1803
1810
  smokedWhite: string;
1804
- richBlack: string;
1811
+ night: string;
1805
1812
  gray100: string;
1806
1813
  gray200: string;
1807
1814
  gray300: string;
@@ -2024,7 +2031,7 @@ declare const styled: <Type extends _stitches_react_types_util.Function | keyof
2024
2031
  black: string;
2025
2032
  white: string;
2026
2033
  smokedWhite: string;
2027
- richBlack: string;
2034
+ night: string;
2028
2035
  gray100: string;
2029
2036
  gray200: string;
2030
2037
  gray300: string;
@@ -2239,7 +2246,7 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
2239
2246
  black: string;
2240
2247
  white: string;
2241
2248
  smokedWhite: string;
2242
- richBlack: string;
2249
+ night: string;
2243
2250
  gray100: string;
2244
2251
  gray200: string;
2245
2252
  gray300: string;
@@ -2469,7 +2476,7 @@ declare const globalCss: <Styles extends {
2469
2476
  black: string;
2470
2477
  white: string;
2471
2478
  smokedWhite: string;
2472
- richBlack: string;
2479
+ night: string;
2473
2480
  gray100: string;
2474
2481
  gray200: string;
2475
2482
  gray300: string;
@@ -2682,7 +2689,7 @@ declare const globalCss: <Styles extends {
2682
2689
  black: string;
2683
2690
  white: string;
2684
2691
  smokedWhite: string;
2685
- richBlack: string;
2692
+ night: string;
2686
2693
  gray100: string;
2687
2694
  gray200: string;
2688
2695
  gray300: string;
@@ -2896,7 +2903,7 @@ declare const keyframes: (style: {
2896
2903
  black: string;
2897
2904
  white: string;
2898
2905
  smokedWhite: string;
2899
- richBlack: string;
2906
+ night: string;
2900
2907
  gray100: string;
2901
2908
  gray200: string;
2902
2909
  gray300: string;
@@ -3117,7 +3124,7 @@ declare const theme: string & {
3117
3124
  black: _stitches_react_types_theme.Token<"black", string, "colors", "">;
3118
3125
  white: _stitches_react_types_theme.Token<"white", string, "colors", "">;
3119
3126
  smokedWhite: _stitches_react_types_theme.Token<"smokedWhite", string, "colors", "">;
3120
- richBlack: _stitches_react_types_theme.Token<"richBlack", string, "colors", "">;
3127
+ night: _stitches_react_types_theme.Token<"night", string, "colors", "">;
3121
3128
  gray100: _stitches_react_types_theme.Token<"gray100", string, "colors", "">;
3122
3129
  gray200: _stitches_react_types_theme.Token<"gray200", string, "colors", "">;
3123
3130
  gray300: _stitches_react_types_theme.Token<"gray300", string, "colors", "">;
@@ -3201,7 +3208,7 @@ declare const createTheme: <Argument0 extends string | ({
3201
3208
  black?: string | number | boolean | undefined;
3202
3209
  white?: string | number | boolean | undefined;
3203
3210
  smokedWhite?: string | number | boolean | undefined;
3204
- richBlack?: string | number | boolean | undefined;
3211
+ night?: string | number | boolean | undefined;
3205
3212
  gray100?: string | number | boolean | undefined;
3206
3213
  gray200?: string | number | boolean | undefined;
3207
3214
  gray300?: string | number | boolean | undefined;
@@ -3289,7 +3296,7 @@ declare const createTheme: <Argument0 extends string | ({
3289
3296
  black?: string | number | boolean | undefined;
3290
3297
  white?: string | number | boolean | undefined;
3291
3298
  smokedWhite?: string | number | boolean | undefined;
3292
- richBlack?: string | number | boolean | undefined;
3299
+ night?: string | number | boolean | undefined;
3293
3300
  gray100?: string | number | boolean | undefined;
3294
3301
  gray200?: string | number | boolean | undefined;
3295
3302
  gray300?: string | number | boolean | undefined;
@@ -3384,7 +3391,7 @@ declare const config: {
3384
3391
  black: string;
3385
3392
  white: string;
3386
3393
  smokedWhite: string;
3387
- richBlack: string;
3394
+ night: string;
3388
3395
  gray100: string;
3389
3396
  gray200: string;
3390
3397
  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,10 +317,27 @@ 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";
@@ -501,19 +529,34 @@ var Input = styled("input", {
501
529
  });
502
530
 
503
531
  // src/components/InputBox/styles.ts
504
- var InputContainer = styled("div", {
532
+ var InputContainer = styled("label", {
505
533
  display: "flex",
506
- flexDirection: "column",
507
- gap: "$2"
534
+ flexDirection: "column"
535
+ });
536
+ var TextBox = styled("div", {
537
+ margin: 0,
538
+ paddingTop: "$1"
508
539
  });
509
540
 
510
541
  // src/components/InputBox/index.tsx
511
542
  var import_jsx_runtime2 = require("react/jsx-runtime");
512
- function InputBox({ label, error, children }) {
543
+ function InputBox({
544
+ label,
545
+ error,
546
+ hint,
547
+ required,
548
+ children
549
+ }) {
513
550
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(InputContainer, { children: [
514
- !!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "sm", children: label }),
551
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
552
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", children: label }),
553
+ required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
554
+ ] }),
515
555
  children,
516
- !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "danger", children: error })
556
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TextBox, { children: [
557
+ !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "danger", children: error }),
558
+ !error && hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "gray200", children: hint })
559
+ ] })
517
560
  ] });
518
561
  }
519
562
  InputBox.displayName = "InputBox";
@@ -522,8 +565,8 @@ InputBox.displayName = "InputBox";
522
565
  var import_jsx_runtime3 = require("react/jsx-runtime");
523
566
  var TextInput = (0, import_react2.forwardRef)(
524
567
  (_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: [
568
+ var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
569
+ 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
570
  !!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Prefix, { children: prefix }),
528
571
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadValues({ ref }, props))
529
572
  ] }) });
@@ -573,19 +616,20 @@ var TextAreaInput = styled("textarea", {
573
616
  // src/components/TextArea/index.tsx
574
617
  var import_jsx_runtime4 = require("react/jsx-runtime");
575
618
  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 })) });
619
+ var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
620
+ 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
621
  });
579
622
  TextArea.displayName = "TextArea";
580
623
 
581
624
  // src/components/Checkbox/index.tsx
582
625
  var import_phosphor_react2 = require("phosphor-react");
583
626
 
584
- // src/components/Checkbox/styles.tsx
627
+ // src/components/Checkbox/styles.ts
585
628
  var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
586
629
  var CheckboxBox = styled("div", {
587
630
  display: "flex",
588
631
  gap: "$2",
632
+ alignItems: "center",
589
633
  "&:has(button:disabled)": {
590
634
  opacity: 0.5
591
635
  }
@@ -656,10 +700,23 @@ var CheckboxIndicator = styled(Checkbox.Indicator, {
656
700
  // src/components/Checkbox/index.tsx
657
701
  var import_jsx_runtime5 = require("react/jsx-runtime");
658
702
  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: [
703
+ var _b = _a, {
704
+ label,
705
+ error,
706
+ hint,
707
+ required
708
+ } = _b, props = __objRest(_b, [
709
+ "label",
710
+ "error",
711
+ "hint",
712
+ "required"
713
+ ]);
714
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, hint, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
661
715
  /* @__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 })
716
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
717
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", children: label }),
718
+ required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
719
+ ] })
663
720
  ] }) });
664
721
  }
665
722
  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,10 +288,27 @@ 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";
@@ -472,19 +500,34 @@ var Input = styled("input", {
472
500
  });
473
501
 
474
502
  // src/components/InputBox/styles.ts
475
- var InputContainer = styled("div", {
503
+ var InputContainer = styled("label", {
476
504
  display: "flex",
477
- flexDirection: "column",
478
- gap: "$2"
505
+ flexDirection: "column"
506
+ });
507
+ var TextBox = styled("div", {
508
+ margin: 0,
509
+ paddingTop: "$1"
479
510
  });
480
511
 
481
512
  // src/components/InputBox/index.tsx
482
513
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
483
- function InputBox({ label, error, children }) {
514
+ function InputBox({
515
+ label,
516
+ error,
517
+ hint,
518
+ required,
519
+ children
520
+ }) {
484
521
  return /* @__PURE__ */ jsxs2(InputContainer, { children: [
485
- !!label && /* @__PURE__ */ jsx2(Text, { size: "sm", children: label }),
522
+ /* @__PURE__ */ jsxs2("div", { children: [
523
+ !!label && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", children: label }),
524
+ required && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
525
+ ] }),
486
526
  children,
487
- !!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error })
527
+ /* @__PURE__ */ jsxs2(TextBox, { children: [
528
+ !!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error }),
529
+ !error && hint && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "gray200", children: hint })
530
+ ] })
488
531
  ] });
489
532
  }
490
533
  InputBox.displayName = "InputBox";
@@ -493,8 +536,8 @@ InputBox.displayName = "InputBox";
493
536
  import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
494
537
  var TextInput = forwardRef(
495
538
  (_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: [
539
+ var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
540
+ return /* @__PURE__ */ jsx3(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
498
541
  !!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
499
542
  /* @__PURE__ */ jsx3(Input, __spreadValues({ ref }, props))
500
543
  ] }) });
@@ -544,19 +587,20 @@ var TextAreaInput = styled("textarea", {
544
587
  // src/components/TextArea/index.tsx
545
588
  import { jsx as jsx4 } from "react/jsx-runtime";
546
589
  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 })) });
590
+ var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
591
+ return /* @__PURE__ */ jsx4(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
549
592
  });
550
593
  TextArea.displayName = "TextArea";
551
594
 
552
595
  // src/components/Checkbox/index.tsx
553
596
  import { Check } from "phosphor-react";
554
597
 
555
- // src/components/Checkbox/styles.tsx
598
+ // src/components/Checkbox/styles.ts
556
599
  import * as Checkbox from "@radix-ui/react-checkbox";
557
600
  var CheckboxBox = styled("div", {
558
601
  display: "flex",
559
602
  gap: "$2",
603
+ alignItems: "center",
560
604
  "&:has(button:disabled)": {
561
605
  opacity: 0.5
562
606
  }
@@ -625,12 +669,25 @@ var CheckboxIndicator = styled(Checkbox.Indicator, {
625
669
  });
626
670
 
627
671
  // src/components/Checkbox/index.tsx
628
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
672
+ import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
629
673
  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: [
674
+ var _b = _a, {
675
+ label,
676
+ error,
677
+ hint,
678
+ required
679
+ } = _b, props = __objRest(_b, [
680
+ "label",
681
+ "error",
682
+ "hint",
683
+ "required"
684
+ ]);
685
+ return /* @__PURE__ */ jsx5(InputBox, { error, hint, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
632
686
  /* @__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 })
687
+ /* @__PURE__ */ jsxs4(Fragment, { children: [
688
+ !!label && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", children: label }),
689
+ required && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
690
+ ] })
634
691
  ] }) });
635
692
  }
636
693
  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.7",
4
4
  "description": "",
5
5
  "main": "./dist/index.mjs",
6
6
  "module": "./dist/index.js",