@nayhoo/ui 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -3,7 +3,10 @@ import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
3
3
  import { RecipeVariants } from '@vanilla-extract/recipes';
4
4
  import * as AvatarPrimitive from '@radix-ui/react-avatar';
5
5
  import * as react from 'react';
6
+ import react__default from 'react';
7
+ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
6
8
  import * as FormPrimitive from '@radix-ui/react-form';
9
+ import * as MenuPrimitive from '@radix-ui/react-menu';
7
10
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
8
11
  import * as SwitchPrimitive from '@radix-ui/react-switch';
9
12
 
@@ -51,17 +54,58 @@ declare const Avatar: ({ alt, fallback, shape, size, src, status, style, ...prop
51
54
  interactive?: boolean | undefined;
52
55
  } & {
53
56
  alt?: string | undefined;
54
- fallback?: React.ReactNode;
57
+ fallback?: react__default.ReactNode;
55
58
  src?: string | undefined;
56
59
  status?: StatusVariants["variant"];
57
60
  }) => react_jsx_runtime.JSX.Element;
58
61
 
62
+ declare const badgeRecipe: _vanilla_extract_recipes.RuntimeFn<{
63
+ color: {
64
+ primary: {
65
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
66
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ };
68
+ secondary: {
69
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
71
+ };
72
+ error: {
73
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
75
+ };
76
+ };
77
+ size: {
78
+ "1": {
79
+ height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
+ };
84
+ "2": {
85
+ height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
89
+ };
90
+ };
91
+ }>;
92
+ type BadgeVariants = NonNullable<RecipeVariants<typeof badgeRecipe>>;
93
+
59
94
  type ComponentProps<E extends React.ElementType, Variants> = Variants & React.ComponentProps<E> & {
60
95
  asChild?: boolean;
61
96
  };
62
97
 
98
+ declare const defaultElement$f = "span";
99
+ type BadgeProps = ComponentProps<typeof defaultElement$f, BadgeVariants & {
100
+ label: string;
101
+ }>;
102
+ declare const Badge: ({ asChild, color, size, label, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
103
+
104
+ declare const boxRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
105
+ type BoxVariants = NonNullable<RecipeVariants<typeof boxRecipe>>;
106
+
63
107
  declare const defaultElement$e = "div";
64
- type BoxProps$1 = ComponentProps<typeof defaultElement$e, {}>;
108
+ type BoxProps$1 = ComponentProps<typeof defaultElement$e, BoxVariants>;
65
109
  declare const Box: ({ asChild, ...props }: BoxProps$1) => react_jsx_runtime.JSX.Element;
66
110
 
67
111
  declare const buttonRecipe: _vanilla_extract_recipes.RuntimeFn<{
@@ -197,6 +241,17 @@ declare const defaultElement$b = "div";
197
241
  type ContainerProps = ComponentProps<typeof defaultElement$b, ContainerVariants>;
198
242
  declare const Container: ({ asChild, size, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
199
243
 
244
+ declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
245
+ declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
246
+ declare const DropdownMenuContent: ({ ...props }: DropdownMenuPrimitive.DropdownMenuContentProps) => react_jsx_runtime.JSX.Element;
247
+ declare const DropdownMenuItem: ({ ...props }: DropdownMenuPrimitive.DropdownMenuItemProps) => react_jsx_runtime.JSX.Element;
248
+ declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
249
+ declare const DropdownMenuLabel: ({ ...props }: DropdownMenuPrimitive.DropdownMenuLabelProps) => react_jsx_runtime.JSX.Element;
250
+ declare const DropdownMenuSeparator: ({ ...props }: DropdownMenuPrimitive.DropdownMenuSeparatorProps) => react_jsx_runtime.JSX.Element;
251
+ declare const DropdownMenuCheckboxItem: ({ ...props }: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps) => react_jsx_runtime.JSX.Element;
252
+ declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
253
+ declare const DropdownMenuRadioItem: ({ children, ...props }: DropdownMenuPrimitive.DropdownMenuRadioItemProps) => react_jsx_runtime.JSX.Element;
254
+
200
255
  declare const flexRecipe: _vanilla_extract_recipes.RuntimeFn<{
201
256
  align: {
202
257
  start: {
@@ -661,8 +716,23 @@ declare const defaultElement$7 = "a";
661
716
  type LinkProps = ComponentProps<typeof defaultElement$7, LinkVariants>;
662
717
  declare const Link: ({ asChild, color, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
663
718
 
719
+ declare const Menu: ({ ...props }: MenuPrimitive.MenuProps & {
720
+ className?: string;
721
+ }) => react_jsx_runtime.JSX.Element;
722
+ declare const MenuContent: ({ ...props }: MenuPrimitive.MenuContentProps) => react_jsx_runtime.JSX.Element;
723
+ declare const MenuSeparator: ({ ...props }: MenuPrimitive.MenuSeparatorProps) => react_jsx_runtime.JSX.Element;
724
+ declare const MenuItem: ({ ...props }: MenuPrimitive.MenuItemProps) => react_jsx_runtime.JSX.Element;
725
+ declare const MenuRadioItem: ({ ...props }: MenuPrimitive.MenuRadioItemProps) => react_jsx_runtime.JSX.Element;
726
+ declare const MenuCheckboxItem: ({ ...props }: MenuPrimitive.MenuCheckboxItemProps) => react_jsx_runtime.JSX.Element;
727
+ declare const MenuLabel: ({ ...props }: MenuPrimitive.MenuLabelProps) => react_jsx_runtime.JSX.Element;
728
+ declare const MenuRadioGroup: react.ForwardRefExoticComponent<MenuPrimitive.MenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
729
+ declare const MenuGroup: react.ForwardRefExoticComponent<MenuPrimitive.MenuGroupProps & react.RefAttributes<HTMLDivElement>>;
730
+
731
+ declare const panelRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
732
+ type PanelVariants = NonNullable<RecipeVariants<typeof panelRecipe>>;
733
+
664
734
  declare const defaultElement$6 = "div";
665
- type BoxProps = ComponentProps<typeof defaultElement$6, {}>;
735
+ type BoxProps = ComponentProps<typeof defaultElement$6, PanelVariants>;
666
736
  declare const Panel: ({ asChild, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
667
737
 
668
738
  declare const defaultElement$5 = "p";
@@ -841,7 +911,7 @@ declare const textFieldRecipe: _vanilla_extract_recipes.RuntimeFn<{
841
911
  };
842
912
  error: {
843
913
  true: {
844
- boxShadow: `inset 0px 0px 0px 1px var(--${string})` | `inset 0px 0px 0px 1px var(--${string}, ${string})` | `inset 0px 0px 0px 1px var(--${string}, ${number})`;
914
+ boxShadow: `inset 0px 0px 0px 1px ${string}`;
845
915
  };
846
916
  };
847
917
  cursor: {
@@ -885,6 +955,14 @@ declare const sprinkles: ((props: {
885
955
  lg?: "initial" | "none" | "flex" | "block" | undefined;
886
956
  xl?: "initial" | "none" | "flex" | "block" | undefined;
887
957
  } | undefined;
958
+ flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
959
+ initial?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
960
+ xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
961
+ sm?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
962
+ md?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
963
+ lg?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
964
+ xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
965
+ } | undefined;
888
966
  gridTemplateColumns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {
889
967
  initial?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
890
968
  xs?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
@@ -1022,7 +1100,7 @@ declare const sprinkles: ((props: {
1022
1100
  xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
1023
1101
  } | undefined;
1024
1102
  }) => string) & {
1025
- properties: Set<"display" | "gridTemplateColumns" | "gridTemplateRows" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "margin" | "padding" | "marginX" | "marginY" | "paddingX" | "paddingY">;
1103
+ properties: Set<"display" | "flexDirection" | "gridTemplateColumns" | "gridTemplateRows" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "margin" | "padding" | "marginX" | "marginY" | "paddingX" | "paddingY">;
1026
1104
  };
1027
1105
  type Sprinkles = Parameters<typeof sprinkles>[0];
1028
1106
 
@@ -4580,14 +4658,92 @@ declare const theme: {
4580
4658
  };
4581
4659
  };
4582
4660
  semanticColors: {
4583
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4584
- primaryLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4661
+ primary: {
4662
+ primary1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4663
+ primary2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4664
+ primary3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4665
+ primary4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4666
+ primary5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4667
+ primary6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4668
+ primary7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4669
+ primary8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4670
+ primary9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4671
+ primary10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4672
+ primary11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4673
+ primary12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4674
+ };
4675
+ primaryA: {
4676
+ primaryA1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4677
+ primaryA2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4678
+ primaryA3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4679
+ primaryA4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4680
+ primaryA5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4681
+ primaryA6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4682
+ primaryA7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4683
+ primaryA8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4684
+ primaryA9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4685
+ primaryA10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4686
+ primaryA11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4687
+ primaryA12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4688
+ };
4585
4689
  primaryTextContrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4586
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4587
- secondaryLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4690
+ secondary: {
4691
+ secondary1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4692
+ secondary2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4693
+ secondary3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4694
+ secondary4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4695
+ secondary5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4696
+ secondary6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4697
+ secondary7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4698
+ secondary8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4699
+ secondary9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4700
+ secondary10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4701
+ secondary11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4702
+ secondary12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4703
+ };
4704
+ secondaryA: {
4705
+ secondaryA1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4706
+ secondaryA2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4707
+ secondaryA3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4708
+ secondaryA4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4709
+ secondaryA5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4710
+ secondaryA6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4711
+ secondaryA7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4712
+ secondaryA8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4713
+ secondaryA9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4714
+ secondaryA10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4715
+ secondaryA11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4716
+ secondaryA12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4717
+ };
4588
4718
  secondaryTextContrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4589
- error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4590
- errorLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4719
+ error: {
4720
+ error1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4721
+ error2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4722
+ error3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4723
+ error4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4724
+ error5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4725
+ error6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4726
+ error7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4727
+ error8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4728
+ error9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4729
+ error10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4730
+ error11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4731
+ error12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4732
+ };
4733
+ errorA: {
4734
+ errorA1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4735
+ errorA2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4736
+ errorA3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4737
+ errorA4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4738
+ errorA5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4739
+ errorA6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4740
+ errorA7: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4741
+ errorA8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4742
+ errorA9: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4743
+ errorA10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4744
+ errorA11: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4745
+ errorA12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4746
+ };
4591
4747
  errorTextContrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4592
4748
  background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4593
4749
  backgroundTextContrast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -4679,4 +4835,4 @@ declare const lightTheme: string;
4679
4835
 
4680
4836
  declare function mergeClasses(...classes: (string | undefined)[]): string;
4681
4837
 
4682
- export { Avatar, Box, Button, Card, Container, Flex, Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit, Grid, Heading, type HeadingProps, IconButton, Link, Panel, Paragraph, Separator, Skeleton, Spinner, type Sprinkles, Status, Switch, Text, TextField, darkTheme, hide, lightTheme, mergeClasses, pulse, spin, sprinkles, theme };
4838
+ export { Avatar, Badge, Box, Button, Card, Container, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Flex, Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit, Grid, Heading, type HeadingProps, IconButton, Link, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, Panel, Paragraph, Separator, Skeleton, Spinner, type Sprinkles, Status, Switch, Text, TextField, darkTheme, hide, lightTheme, mergeClasses, pulse, spin, sprinkles, theme };