@fuf-stack/pixels 1.10.2 → 1.11.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.
Files changed (77) hide show
  1. package/dist/Alert/Alert.cjs +18 -6
  2. package/dist/Alert/Alert.cjs.map +1 -1
  3. package/dist/Alert/Alert.d.cts +12 -0
  4. package/dist/Alert/Alert.d.cts.map +1 -1
  5. package/dist/Alert/Alert.d.ts +12 -0
  6. package/dist/Alert/Alert.d.ts.map +1 -1
  7. package/dist/Alert/Alert.js +18 -6
  8. package/dist/Alert/Alert.js.map +1 -1
  9. package/dist/Avatar/Avatar.d.cts +6 -6
  10. package/dist/Avatar/Avatar.d.ts +6 -6
  11. package/dist/Breadcrumb/Breadcrumb.d.cts +3 -3
  12. package/dist/Breadcrumb/Breadcrumb.d.ts +3 -3
  13. package/dist/Drawer/Drawer.d.cts +6 -6
  14. package/dist/Drawer/Drawer.d.ts +6 -6
  15. package/dist/Menu/Menu.d.cts +3 -3
  16. package/dist/Menu/Menu.d.ts +3 -3
  17. package/dist/Modal/Modal.cjs +1 -1
  18. package/dist/Modal/Modal.cjs.map +1 -1
  19. package/dist/Modal/Modal.d.cts +5 -1
  20. package/dist/Modal/Modal.d.cts.map +1 -1
  21. package/dist/Modal/Modal.d.ts +5 -1
  22. package/dist/Modal/Modal.d.ts.map +1 -1
  23. package/dist/Modal/Modal.js +2 -2
  24. package/dist/Modal/Modal.js.map +1 -1
  25. package/dist/Modal/ModalHost.cjs +40 -0
  26. package/dist/Modal/ModalHost.cjs.map +1 -0
  27. package/dist/Modal/ModalHost.d.cts +16 -0
  28. package/dist/Modal/ModalHost.d.cts.map +1 -0
  29. package/dist/Modal/ModalHost.d.ts +16 -0
  30. package/dist/Modal/ModalHost.d.ts.map +1 -0
  31. package/dist/Modal/ModalHost.js +39 -0
  32. package/dist/Modal/ModalHost.js.map +1 -0
  33. package/dist/Modal/index.cjs +4 -0
  34. package/dist/Modal/index.cjs.map +1 -1
  35. package/dist/Modal/index.d.cts +3 -1
  36. package/dist/Modal/index.d.ts +3 -1
  37. package/dist/Modal/index.js +3 -1
  38. package/dist/Modal/index.js.map +1 -1
  39. package/dist/Modal/modalStore.cjs +80 -0
  40. package/dist/Modal/modalStore.cjs.map +1 -0
  41. package/dist/Modal/modalStore.d.cts +31 -0
  42. package/dist/Modal/modalStore.d.cts.map +1 -0
  43. package/dist/Modal/modalStore.d.ts +31 -0
  44. package/dist/Modal/modalStore.d.ts.map +1 -0
  45. package/dist/Modal/modalStore.js +78 -0
  46. package/dist/Modal/modalStore.js.map +1 -0
  47. package/dist/Popover/Popover.d.cts +3 -3
  48. package/dist/Popover/Popover.d.ts +3 -3
  49. package/dist/SearchInput/SearchInput.d.cts +3 -3
  50. package/dist/SearchInput/SearchInput.d.ts +3 -3
  51. package/dist/Toast/Toaster.cjs +10 -2
  52. package/dist/Toast/Toaster.cjs.map +1 -1
  53. package/dist/Toast/Toaster.d.cts +5 -2
  54. package/dist/Toast/Toaster.d.cts.map +1 -1
  55. package/dist/Toast/Toaster.d.ts +5 -2
  56. package/dist/Toast/Toaster.d.ts.map +1 -1
  57. package/dist/Toast/Toaster.js +10 -2
  58. package/dist/Toast/Toaster.js.map +1 -1
  59. package/dist/Toast/index.cjs +3 -3
  60. package/dist/Toast/index.cjs.map +1 -1
  61. package/dist/Toast/index.d.cts +1 -1
  62. package/dist/Toast/index.d.ts +1 -1
  63. package/dist/Toast/index.js +1 -1
  64. package/dist/Toast/index.js.map +1 -1
  65. package/dist/Toast/{Toast.cjs → toast.cjs} +2 -2
  66. package/dist/Toast/{Toast.cjs.map → toast.cjs.map} +1 -1
  67. package/dist/Toast/{Toast.d.cts → toast.d.cts} +2 -2
  68. package/dist/Toast/{Toast.d.cts.map → toast.d.cts.map} +1 -1
  69. package/dist/Toast/{Toast.d.ts → toast.d.ts} +2 -2
  70. package/dist/Toast/{Toast.d.ts.map → toast.d.ts.map} +1 -1
  71. package/dist/Toast/{Toast.js → toast.js} +2 -2
  72. package/dist/Toast/{Toast.js.map → toast.js.map} +1 -1
  73. package/dist/index.cjs +6 -2
  74. package/dist/index.d.cts +4 -2
  75. package/dist/index.d.ts +4 -2
  76. package/dist/index.js +4 -2
  77. package/package.json +2 -2
@@ -9,7 +9,7 @@ const alertVariants = (0, _fuf_stack_pixel_utils.tv)({
9
9
  base: "min-w-72",
10
10
  title: "",
11
11
  description: "",
12
- mainWrapper: "gap-1.5",
12
+ mainWrapper: "items-stretch gap-1.5",
13
13
  closeButton: "",
14
14
  iconWrapper: "",
15
15
  alertIcon: ""
@@ -17,19 +17,31 @@ const alertVariants = (0, _fuf_stack_pixel_utils.tv)({
17
17
  variants: {
18
18
  hasTitleAndChildren: { true: { iconWrapper: "self-start" } },
19
19
  variant: {
20
- danger: { base: "bg-danger-50 dark:bg-danger-50" },
21
- default: { base: "bg-default-100 dark:bg-default-50" },
20
+ danger: {
21
+ base: "bg-danger-50 dark:bg-danger-50",
22
+ description: "text-foreground"
23
+ },
24
+ default: {
25
+ base: "bg-default-100 dark:bg-default-50",
26
+ description: "text-foreground"
27
+ },
22
28
  info: {
23
29
  alertIcon: "fill-current",
24
30
  base: "border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50",
25
31
  closeButton: "text-info-500 data-[hover]:bg-info-200",
26
- description: "text-inherit",
32
+ description: "text-foreground",
27
33
  iconWrapper: "border-info-100 bg-info-50 dark:bg-info-100",
28
34
  mainWrapper: "text-inherit",
29
35
  title: "text-inherit"
30
36
  },
31
- success: { base: "bg-success-50 dark:bg-success-50" },
32
- warning: { base: "bg-warning-50 dark:bg-warning-50" }
37
+ success: {
38
+ base: "bg-success-50 dark:bg-success-50",
39
+ description: "text-foreground"
40
+ },
41
+ warning: {
42
+ base: "bg-warning-50 dark:bg-warning-50",
43
+ description: "text-foreground"
44
+ }
33
45
  }
34
46
  }
35
47
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.cjs","names":["HeroAlert","heroAlertVariants"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: 'min-w-72',\n title: '',\n description: '',\n mainWrapper: 'gap-1.5',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // if HeroUI Alert title and description are set the icon is placed on top (looks better)\n hasTitleAndChildren: {\n true: {\n iconWrapper: 'self-start',\n },\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n variant: {\n danger: {\n base: 'bg-danger-50 dark:bg-danger-50',\n },\n default: {\n base: 'bg-default-100 dark:bg-default-50',\n },\n info: {\n alertIcon: 'fill-current',\n base: 'border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n description: 'text-inherit',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n },\n success: {\n base: 'bg-success-50 dark:bg-success-50',\n },\n warning: {\n base: 'bg-warning-50 dark:bg-warning-50',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\n// hasTitleAndChildren is omitted because its used for automatic icon position\nexport interface AlertProps extends Omit<VariantProps, 'hasTitleAndChildren'> {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n closable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n endContent = undefined,\n icon = undefined,\n closable = false,\n onClose = undefined,\n testId = undefined,\n title = undefined,\n variant = 'info',\n}: AlertProps) => {\n const hasTitleAndChildren = !!children && !!title;\n const variants = alertVariants({\n hasTitleAndChildren,\n variant,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // map variant to HeroUI color prop (only for variants that exist in HeroUI)\n const heroColor = Object.keys(heroAlertVariants.variants.color).includes(\n variant,\n )\n ? (variant as HeroAlertProps['color'])\n : undefined;\n\n return (\n <HeroAlert\n classNames={classNames}\n color={heroColor}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={variant === 'default'}\n icon={icon}\n // map closable to isClosable, because of we do not want \"is\" as prefix\n isClosable={closable}\n onClose={onClose}\n title={(title ?? children) as string}\n variant=\"faded\"\n />\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;AASA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;EACP,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EAER,qBAAqB,EACnB,MAAM,EACJ,aAAa,aACf,EACF;EAEA,SAAS;GACP,QAAQ,EACN,MAAM,iCACR;GACA,SAAS,EACP,MAAM,oCACR;GACA,MAAM;IACJ,WAAW;IACX,MAAM;IACN,aAAa;IACb,aAAa;IACb,aAAa;IACb,aAAa;IACb,OAAO;GACT;GACA,SAAS,EACP,MAAM,mCACR;GACA,SAAS,EACP,MAAM,mCACR;EACF;CACF;AACF,CAAC;;;;AA8BD,MAAM,SAAS,EACb,WAAW,KAAA,GACX,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,OAAO,KAAA,GACP,WAAW,OACX,UAAU,KAAA,GACV,SAAS,KAAA,GACT,QAAQ,KAAA,GACR,UAAU,aACM;CAehB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,aAAA,GAAA,uBAAA,sBAfa,cAAc;GAC7B,qBAF0B,CAAC,CAAC,YAAY,CAAC,CAAC;GAG1C;EACF,CAC+C,GAAG,WAAW,MAWpC;EACrB,OATc,OAAO,KAAKC,cAAAA,MAAkB,SAAS,KAAK,EAAE,SAC9D,OACF,IACK,UACD,KAAA;EAMA,eAAa;EACb,aAAa,QAAQ,WAAW,KAAA;EACpB;EACZ,UAAU,YAAY;EAChB;EAEN,YAAY;EACH;EACT,OAAQ,SAAS;EACjB,SAAQ;CACT,CAAA;AAEL"}
1
+ {"version":3,"file":"Alert.cjs","names":["HeroAlert","heroAlertVariants"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: 'min-w-72',\n title: '',\n description: '',\n mainWrapper: 'items-stretch gap-1.5',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // if HeroUI Alert title and description are set the icon is placed on top (looks better)\n hasTitleAndChildren: {\n true: {\n iconWrapper: 'self-start',\n },\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n variant: {\n danger: {\n base: 'bg-danger-50 dark:bg-danger-50',\n description: 'text-foreground',\n },\n default: {\n base: 'bg-default-100 dark:bg-default-50',\n description: 'text-foreground',\n },\n info: {\n alertIcon: 'fill-current',\n base: 'border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n description: 'text-foreground',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n },\n success: {\n base: 'bg-success-50 dark:bg-success-50',\n description: 'text-foreground',\n },\n warning: {\n base: 'bg-warning-50 dark:bg-warning-50',\n description: 'text-foreground',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\n// hasTitleAndChildren is omitted because its used for automatic icon position\nexport interface AlertProps extends Omit<VariantProps, 'hasTitleAndChildren'> {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n closable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n endContent = undefined,\n icon = undefined,\n closable = false,\n onClose = undefined,\n testId = undefined,\n title = undefined,\n variant = 'info',\n}: AlertProps) => {\n const hasTitleAndChildren = !!children && !!title;\n const variants = alertVariants({\n hasTitleAndChildren,\n variant,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // map variant to HeroUI color prop (only for variants that exist in HeroUI)\n const heroColor = Object.keys(heroAlertVariants.variants.color).includes(\n variant,\n )\n ? (variant as HeroAlertProps['color'])\n : undefined;\n\n return (\n <HeroAlert\n classNames={classNames}\n color={heroColor}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={variant === 'default'}\n icon={icon}\n // map closable to isClosable, because of we do not want \"is\" as prefix\n isClosable={closable}\n onClose={onClose}\n title={(title ?? children) as string}\n variant=\"faded\"\n />\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;AASA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;EACP,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EAER,qBAAqB,EACnB,MAAM,EACJ,aAAa,aACf,EACF;EAEA,SAAS;GACP,QAAQ;IACN,MAAM;IACN,aAAa;GACf;GACA,SAAS;IACP,MAAM;IACN,aAAa;GACf;GACA,MAAM;IACJ,WAAW;IACX,MAAM;IACN,aAAa;IACb,aAAa;IACb,aAAa;IACb,aAAa;IACb,OAAO;GACT;GACA,SAAS;IACP,MAAM;IACN,aAAa;GACf;GACA,SAAS;IACP,MAAM;IACN,aAAa;GACf;EACF;CACF;AACF,CAAC;;;;AA8BD,MAAM,SAAS,EACb,WAAW,KAAA,GACX,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,OAAO,KAAA,GACP,WAAW,OACX,UAAU,KAAA,GACV,SAAS,KAAA,GACT,QAAQ,KAAA,GACR,UAAU,aACM;CAehB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,aAAA,GAAA,uBAAA,sBAfa,cAAc;GAC7B,qBAF0B,CAAC,CAAC,YAAY,CAAC,CAAC;GAG1C;EACF,CAC+C,GAAG,WAAW,MAWpC;EACrB,OATc,OAAO,KAAKC,cAAAA,MAAkB,SAAS,KAAK,EAAE,SAC9D,OACF,IACK,UACD,KAAA;EAMA,eAAa;EACb,aAAa,QAAQ,WAAW,KAAA;EACpB;EACZ,UAAU,YAAY;EAChB;EAEN,YAAY;EACH;EACT,OAAQ,SAAS;EACjB,SAAQ;CACT,CAAA;AAEL"}
@@ -11,9 +11,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
11
11
  variant: {
12
12
  danger: {
13
13
  base: string;
14
+ description: string;
14
15
  };
15
16
  default: {
16
17
  base: string;
18
+ description: string;
17
19
  };
18
20
  info: {
19
21
  alertIcon: string;
@@ -26,9 +28,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
26
28
  };
27
29
  success: {
28
30
  base: string;
31
+ description: string;
29
32
  };
30
33
  warning: {
31
34
  base: string;
35
+ description: string;
32
36
  };
33
37
  };
34
38
  }, {
@@ -48,9 +52,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
48
52
  variant: {
49
53
  danger: {
50
54
  base: string;
55
+ description: string;
51
56
  };
52
57
  default: {
53
58
  base: string;
59
+ description: string;
54
60
  };
55
61
  info: {
56
62
  alertIcon: string;
@@ -63,9 +69,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
63
69
  };
64
70
  success: {
65
71
  base: string;
72
+ description: string;
66
73
  };
67
74
  warning: {
68
75
  base: string;
76
+ description: string;
69
77
  };
70
78
  };
71
79
  }, {
@@ -85,9 +93,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
85
93
  variant: {
86
94
  danger: {
87
95
  base: string;
96
+ description: string;
88
97
  };
89
98
  default: {
90
99
  base: string;
100
+ description: string;
91
101
  };
92
102
  info: {
93
103
  alertIcon: string;
@@ -100,9 +110,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
100
110
  };
101
111
  success: {
102
112
  base: string;
113
+ description: string;
103
114
  };
104
115
  warning: {
105
116
  base: string;
117
+ description: string;
106
118
  };
107
119
  };
108
120
  }, {
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.cts","names":[],"sources":["../../src/Alert/Alert.tsx"],"mappings":";;;;cASa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4Cd,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAGnB,UAAA,SAAmB,IAAA,CAAK,YAAA;EAAA;EAEvC,QAAA,GAAW,SAAA;EAAA;EAEX,SAAA,GAAY,SAAA;EAAA;EAEZ,UAAA,GAAa,SAAA;EAAA;EAEb,IAAA,GAAO,SAAA;EAAA;EAEP,QAAA;EAEA;EAAA,OAAA;EAIA;EAFA,MAAA;EAIA;EAFA,KAAA,GAAQ,SAAA;EAEc;EAAtB,OAAA,GAAU,YAAA;AAAA;;;;cAMN,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,KAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Alert.d.cts","names":[],"sources":["../../src/Alert/Alert.tsx"],"mappings":";;;;cASa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDd,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAGnB,UAAA,SAAmB,IAAA,CAAK,YAAA;EAAA;EAEvC,QAAA,GAAW,SAAA;EAAA;EAEX,SAAA,GAAY,SAAA;EAAA;EAEZ,UAAA,GAAa,SAAA;EAAA;EAEb,IAAA,GAAO,SAAA;EAAA;EAEP,QAAA;EAEA;EAAA,OAAA;EAIA;EAFA,MAAA;EAIA;EAFA,KAAA,GAAQ,SAAA;EAEc;EAAtB,OAAA,GAAU,YAAA;AAAA;;;;cAMN,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,KAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}
@@ -11,9 +11,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
11
11
  variant: {
12
12
  danger: {
13
13
  base: string;
14
+ description: string;
14
15
  };
15
16
  default: {
16
17
  base: string;
18
+ description: string;
17
19
  };
18
20
  info: {
19
21
  alertIcon: string;
@@ -26,9 +28,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
26
28
  };
27
29
  success: {
28
30
  base: string;
31
+ description: string;
29
32
  };
30
33
  warning: {
31
34
  base: string;
35
+ description: string;
32
36
  };
33
37
  };
34
38
  }, {
@@ -48,9 +52,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
48
52
  variant: {
49
53
  danger: {
50
54
  base: string;
55
+ description: string;
51
56
  };
52
57
  default: {
53
58
  base: string;
59
+ description: string;
54
60
  };
55
61
  info: {
56
62
  alertIcon: string;
@@ -63,9 +69,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
63
69
  };
64
70
  success: {
65
71
  base: string;
72
+ description: string;
66
73
  };
67
74
  warning: {
68
75
  base: string;
76
+ description: string;
69
77
  };
70
78
  };
71
79
  }, {
@@ -85,9 +93,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
85
93
  variant: {
86
94
  danger: {
87
95
  base: string;
96
+ description: string;
88
97
  };
89
98
  default: {
90
99
  base: string;
100
+ description: string;
91
101
  };
92
102
  info: {
93
103
  alertIcon: string;
@@ -100,9 +110,11 @@ declare const alertVariants: import("tailwind-variants").TVReturnType<{
100
110
  };
101
111
  success: {
102
112
  base: string;
113
+ description: string;
103
114
  };
104
115
  warning: {
105
116
  base: string;
117
+ description: string;
106
118
  };
107
119
  };
108
120
  }, {
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","names":[],"sources":["../../src/Alert/Alert.tsx"],"mappings":";;;;cASa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4Cd,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAGnB,UAAA,SAAmB,IAAA,CAAK,YAAA;EAAA;EAEvC,QAAA,GAAW,SAAA;EAAA;EAEX,SAAA,GAAY,SAAA;EAAA;EAEZ,UAAA,GAAa,SAAA;EAAA;EAEb,IAAA,GAAO,SAAA;EAAA;EAEP,QAAA;EAEA;EAAA,OAAA;EAIA;EAFA,MAAA;EAIA;EAFA,KAAA,GAAQ,SAAA;EAEc;EAAtB,OAAA,GAAU,YAAA;AAAA;;;;cAMN,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,KAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Alert.d.ts","names":[],"sources":["../../src/Alert/Alert.tsx"],"mappings":";;;;cASa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDd,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAGnB,UAAA,SAAmB,IAAA,CAAK,YAAA;EAAA;EAEvC,QAAA,GAAW,SAAA;EAAA;EAEX,SAAA,GAAY,SAAA;EAAA;EAEZ,UAAA,GAAa,SAAA;EAAA;EAEb,IAAA,GAAO,SAAA;EAAA;EAEP,QAAA;EAEA;EAAA,OAAA;EAIA;EAFA,MAAA;EAIA;EAFA,KAAA,GAAQ,SAAA;EAEc;EAAtB,OAAA,GAAU,YAAA;AAAA;;;;cAMN,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,KAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}
@@ -8,7 +8,7 @@ const alertVariants = tv({
8
8
  base: "min-w-72",
9
9
  title: "",
10
10
  description: "",
11
- mainWrapper: "gap-1.5",
11
+ mainWrapper: "items-stretch gap-1.5",
12
12
  closeButton: "",
13
13
  iconWrapper: "",
14
14
  alertIcon: ""
@@ -16,19 +16,31 @@ const alertVariants = tv({
16
16
  variants: {
17
17
  hasTitleAndChildren: { true: { iconWrapper: "self-start" } },
18
18
  variant: {
19
- danger: { base: "bg-danger-50 dark:bg-danger-50" },
20
- default: { base: "bg-default-100 dark:bg-default-50" },
19
+ danger: {
20
+ base: "bg-danger-50 dark:bg-danger-50",
21
+ description: "text-foreground"
22
+ },
23
+ default: {
24
+ base: "bg-default-100 dark:bg-default-50",
25
+ description: "text-foreground"
26
+ },
21
27
  info: {
22
28
  alertIcon: "fill-current",
23
29
  base: "border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50",
24
30
  closeButton: "text-info-500 data-[hover]:bg-info-200",
25
- description: "text-inherit",
31
+ description: "text-foreground",
26
32
  iconWrapper: "border-info-100 bg-info-50 dark:bg-info-100",
27
33
  mainWrapper: "text-inherit",
28
34
  title: "text-inherit"
29
35
  },
30
- success: { base: "bg-success-50 dark:bg-success-50" },
31
- warning: { base: "bg-warning-50 dark:bg-warning-50" }
36
+ success: {
37
+ base: "bg-success-50 dark:bg-success-50",
38
+ description: "text-foreground"
39
+ },
40
+ warning: {
41
+ base: "bg-warning-50 dark:bg-warning-50",
42
+ description: "text-foreground"
43
+ }
32
44
  }
33
45
  }
34
46
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","names":["Alert","HeroAlert","heroAlertVariants"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: 'min-w-72',\n title: '',\n description: '',\n mainWrapper: 'gap-1.5',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // if HeroUI Alert title and description are set the icon is placed on top (looks better)\n hasTitleAndChildren: {\n true: {\n iconWrapper: 'self-start',\n },\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n variant: {\n danger: {\n base: 'bg-danger-50 dark:bg-danger-50',\n },\n default: {\n base: 'bg-default-100 dark:bg-default-50',\n },\n info: {\n alertIcon: 'fill-current',\n base: 'border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n description: 'text-inherit',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n },\n success: {\n base: 'bg-success-50 dark:bg-success-50',\n },\n warning: {\n base: 'bg-warning-50 dark:bg-warning-50',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\n// hasTitleAndChildren is omitted because its used for automatic icon position\nexport interface AlertProps extends Omit<VariantProps, 'hasTitleAndChildren'> {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n closable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n endContent = undefined,\n icon = undefined,\n closable = false,\n onClose = undefined,\n testId = undefined,\n title = undefined,\n variant = 'info',\n}: AlertProps) => {\n const hasTitleAndChildren = !!children && !!title;\n const variants = alertVariants({\n hasTitleAndChildren,\n variant,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // map variant to HeroUI color prop (only for variants that exist in HeroUI)\n const heroColor = Object.keys(heroAlertVariants.variants.color).includes(\n variant,\n )\n ? (variant as HeroAlertProps['color'])\n : undefined;\n\n return (\n <HeroAlert\n classNames={classNames}\n color={heroColor}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={variant === 'default'}\n icon={icon}\n // map closable to isClosable, because of we do not want \"is\" as prefix\n isClosable={closable}\n onClose={onClose}\n title={(title ?? children) as string}\n variant=\"faded\"\n />\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;EACP,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EAER,qBAAqB,EACnB,MAAM,EACJ,aAAa,aACf,EACF;EAEA,SAAS;GACP,QAAQ,EACN,MAAM,iCACR;GACA,SAAS,EACP,MAAM,oCACR;GACA,MAAM;IACJ,WAAW;IACX,MAAM;IACN,aAAa;IACb,aAAa;IACb,aAAa;IACb,aAAa;IACb,OAAO;GACT;GACA,SAAS,EACP,MAAM,mCACR;GACA,SAAS,EACP,MAAM,mCACR;EACF;CACF;AACF,CAAC;;;;AA8BD,MAAMA,WAAS,EACb,WAAW,KAAA,GACX,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,OAAO,KAAA,GACP,WAAW,OACX,UAAU,KAAA,GACV,SAAS,KAAA,GACT,QAAQ,KAAA,GACR,UAAU,aACM;CAehB,OACE,oBAACC,OAAD;EACE,YAXe,qBAJF,cAAc;GAC7B,qBAF0B,CAAC,CAAC,YAAY,CAAC,CAAC;GAG1C;EACF,CAC+C,GAAG,WAAW,MAWpC;EACrB,OATc,OAAO,KAAKC,MAAkB,SAAS,KAAK,EAAE,SAC9D,OACF,IACK,UACD,KAAA;EAMA,eAAa;EACb,aAAa,QAAQ,WAAW,KAAA;EACpB;EACZ,UAAU,YAAY;EAChB;EAEN,YAAY;EACH;EACT,OAAQ,SAAS;EACjB,SAAQ;CACT,CAAA;AAEL"}
1
+ {"version":3,"file":"Alert.js","names":["Alert","HeroAlert","heroAlertVariants"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: 'min-w-72',\n title: '',\n description: '',\n mainWrapper: 'items-stretch gap-1.5',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // if HeroUI Alert title and description are set the icon is placed on top (looks better)\n hasTitleAndChildren: {\n true: {\n iconWrapper: 'self-start',\n },\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n variant: {\n danger: {\n base: 'bg-danger-50 dark:bg-danger-50',\n description: 'text-foreground',\n },\n default: {\n base: 'bg-default-100 dark:bg-default-50',\n description: 'text-foreground',\n },\n info: {\n alertIcon: 'fill-current',\n base: 'border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100 dark:bg-info-50',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n description: 'text-foreground',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n },\n success: {\n base: 'bg-success-50 dark:bg-success-50',\n description: 'text-foreground',\n },\n warning: {\n base: 'bg-warning-50 dark:bg-warning-50',\n description: 'text-foreground',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\n// hasTitleAndChildren is omitted because its used for automatic icon position\nexport interface AlertProps extends Omit<VariantProps, 'hasTitleAndChildren'> {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n closable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n endContent = undefined,\n icon = undefined,\n closable = false,\n onClose = undefined,\n testId = undefined,\n title = undefined,\n variant = 'info',\n}: AlertProps) => {\n const hasTitleAndChildren = !!children && !!title;\n const variants = alertVariants({\n hasTitleAndChildren,\n variant,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // map variant to HeroUI color prop (only for variants that exist in HeroUI)\n const heroColor = Object.keys(heroAlertVariants.variants.color).includes(\n variant,\n )\n ? (variant as HeroAlertProps['color'])\n : undefined;\n\n return (\n <HeroAlert\n classNames={classNames}\n color={heroColor}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={variant === 'default'}\n icon={icon}\n // map closable to isClosable, because of we do not want \"is\" as prefix\n isClosable={closable}\n onClose={onClose}\n title={(title ?? children) as string}\n variant=\"faded\"\n />\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;EACP,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,WAAW;CACb;CACA,UAAU;EAER,qBAAqB,EACnB,MAAM,EACJ,aAAa,aACf,EACF;EAEA,SAAS;GACP,QAAQ;IACN,MAAM;IACN,aAAa;GACf;GACA,SAAS;IACP,MAAM;IACN,aAAa;GACf;GACA,MAAM;IACJ,WAAW;IACX,MAAM;IACN,aAAa;IACb,aAAa;IACb,aAAa;IACb,aAAa;IACb,OAAO;GACT;GACA,SAAS;IACP,MAAM;IACN,aAAa;GACf;GACA,SAAS;IACP,MAAM;IACN,aAAa;GACf;EACF;CACF;AACF,CAAC;;;;AA8BD,MAAMA,WAAS,EACb,WAAW,KAAA,GACX,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,OAAO,KAAA,GACP,WAAW,OACX,UAAU,KAAA,GACV,SAAS,KAAA,GACT,QAAQ,KAAA,GACR,UAAU,aACM;CAehB,OACE,oBAACC,OAAD;EACE,YAXe,qBAJF,cAAc;GAC7B,qBAF0B,CAAC,CAAC,YAAY,CAAC,CAAC;GAG1C;EACF,CAC+C,GAAG,WAAW,MAWpC;EACrB,OATc,OAAO,KAAKC,MAAkB,SAAS,KAAK,EAAE,SAC9D,OACF,IACK,UACD,KAAA;EAMA,eAAa;EACb,aAAa,QAAQ,WAAW,KAAA;EACpB;EACZ,UAAU,YAAY;EAChB;EAEN,YAAY;EACH;EACT,OAAQ,SAAS;EACjB,SAAQ;CACT,CAAA;AAEL"}
@@ -6,9 +6,9 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
6
6
  [key: string]: {
7
7
  [key: string]: import("tailwind-merge").ClassNameValue | {
8
8
  base?: import("tailwind-merge").ClassNameValue;
9
- img?: import("tailwind-merge").ClassNameValue;
10
- name?: import("tailwind-merge").ClassNameValue;
11
9
  icon?: import("tailwind-merge").ClassNameValue;
10
+ name?: import("tailwind-merge").ClassNameValue;
11
+ img?: import("tailwind-merge").ClassNameValue;
12
12
  fallback?: import("tailwind-merge").ClassNameValue;
13
13
  };
14
14
  };
@@ -16,9 +16,9 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
16
16
  [x: string]: {
17
17
  [x: string]: import("tailwind-merge").ClassNameValue | {
18
18
  base?: import("tailwind-merge").ClassNameValue;
19
- img?: import("tailwind-merge").ClassNameValue;
20
- name?: import("tailwind-merge").ClassNameValue;
21
19
  icon?: import("tailwind-merge").ClassNameValue;
20
+ name?: import("tailwind-merge").ClassNameValue;
21
+ img?: import("tailwind-merge").ClassNameValue;
22
22
  fallback?: import("tailwind-merge").ClassNameValue;
23
23
  };
24
24
  };
@@ -32,9 +32,9 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
32
32
  [key: string]: {
33
33
  [key: string]: import("tailwind-merge").ClassNameValue | {
34
34
  base?: import("tailwind-merge").ClassNameValue;
35
- img?: import("tailwind-merge").ClassNameValue;
36
- name?: import("tailwind-merge").ClassNameValue;
37
35
  icon?: import("tailwind-merge").ClassNameValue;
36
+ name?: import("tailwind-merge").ClassNameValue;
37
+ img?: import("tailwind-merge").ClassNameValue;
38
38
  fallback?: import("tailwind-merge").ClassNameValue;
39
39
  };
40
40
  };
@@ -6,9 +6,9 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
6
6
  [key: string]: {
7
7
  [key: string]: import("tailwind-merge").ClassNameValue | {
8
8
  base?: import("tailwind-merge").ClassNameValue;
9
- img?: import("tailwind-merge").ClassNameValue;
10
- name?: import("tailwind-merge").ClassNameValue;
11
9
  icon?: import("tailwind-merge").ClassNameValue;
10
+ name?: import("tailwind-merge").ClassNameValue;
11
+ img?: import("tailwind-merge").ClassNameValue;
12
12
  fallback?: import("tailwind-merge").ClassNameValue;
13
13
  };
14
14
  };
@@ -16,9 +16,9 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
16
16
  [x: string]: {
17
17
  [x: string]: import("tailwind-merge").ClassNameValue | {
18
18
  base?: import("tailwind-merge").ClassNameValue;
19
- img?: import("tailwind-merge").ClassNameValue;
20
- name?: import("tailwind-merge").ClassNameValue;
21
19
  icon?: import("tailwind-merge").ClassNameValue;
20
+ name?: import("tailwind-merge").ClassNameValue;
21
+ img?: import("tailwind-merge").ClassNameValue;
22
22
  fallback?: import("tailwind-merge").ClassNameValue;
23
23
  };
24
24
  };
@@ -32,9 +32,9 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
32
32
  [key: string]: {
33
33
  [key: string]: import("tailwind-merge").ClassNameValue | {
34
34
  base?: import("tailwind-merge").ClassNameValue;
35
- img?: import("tailwind-merge").ClassNameValue;
36
- name?: import("tailwind-merge").ClassNameValue;
37
35
  icon?: import("tailwind-merge").ClassNameValue;
36
+ name?: import("tailwind-merge").ClassNameValue;
37
+ img?: import("tailwind-merge").ClassNameValue;
38
38
  fallback?: import("tailwind-merge").ClassNameValue;
39
39
  };
40
40
  };
@@ -5,10 +5,10 @@ import { ReactNode } from "react";
5
5
  declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
6
6
  [key: string]: {
7
7
  [key: string]: import("tailwind-merge").ClassNameValue | {
8
- item?: import("tailwind-merge").ClassNameValue;
9
8
  nav?: import("tailwind-merge").ClassNameValue;
10
9
  list?: import("tailwind-merge").ClassNameValue;
11
10
  separator?: import("tailwind-merge").ClassNameValue;
11
+ item?: import("tailwind-merge").ClassNameValue;
12
12
  ellipsis?: import("tailwind-merge").ClassNameValue;
13
13
  itemBase?: import("tailwind-merge").ClassNameValue;
14
14
  };
@@ -16,10 +16,10 @@ declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
16
16
  } | {
17
17
  [x: string]: {
18
18
  [x: string]: import("tailwind-merge").ClassNameValue | {
19
- item?: import("tailwind-merge").ClassNameValue;
20
19
  nav?: import("tailwind-merge").ClassNameValue;
21
20
  list?: import("tailwind-merge").ClassNameValue;
22
21
  separator?: import("tailwind-merge").ClassNameValue;
22
+ item?: import("tailwind-merge").ClassNameValue;
23
23
  ellipsis?: import("tailwind-merge").ClassNameValue;
24
24
  itemBase?: import("tailwind-merge").ClassNameValue;
25
25
  };
@@ -34,10 +34,10 @@ declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
34
34
  }, undefined, {
35
35
  [key: string]: {
36
36
  [key: string]: import("tailwind-merge").ClassNameValue | {
37
- item?: import("tailwind-merge").ClassNameValue;
38
37
  nav?: import("tailwind-merge").ClassNameValue;
39
38
  list?: import("tailwind-merge").ClassNameValue;
40
39
  separator?: import("tailwind-merge").ClassNameValue;
40
+ item?: import("tailwind-merge").ClassNameValue;
41
41
  ellipsis?: import("tailwind-merge").ClassNameValue;
42
42
  itemBase?: import("tailwind-merge").ClassNameValue;
43
43
  };
@@ -5,10 +5,10 @@ import { ReactNode } from "react";
5
5
  declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
6
6
  [key: string]: {
7
7
  [key: string]: import("tailwind-merge").ClassNameValue | {
8
- item?: import("tailwind-merge").ClassNameValue;
9
8
  nav?: import("tailwind-merge").ClassNameValue;
10
9
  list?: import("tailwind-merge").ClassNameValue;
11
10
  separator?: import("tailwind-merge").ClassNameValue;
11
+ item?: import("tailwind-merge").ClassNameValue;
12
12
  ellipsis?: import("tailwind-merge").ClassNameValue;
13
13
  itemBase?: import("tailwind-merge").ClassNameValue;
14
14
  };
@@ -16,10 +16,10 @@ declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
16
16
  } | {
17
17
  [x: string]: {
18
18
  [x: string]: import("tailwind-merge").ClassNameValue | {
19
- item?: import("tailwind-merge").ClassNameValue;
20
19
  nav?: import("tailwind-merge").ClassNameValue;
21
20
  list?: import("tailwind-merge").ClassNameValue;
22
21
  separator?: import("tailwind-merge").ClassNameValue;
22
+ item?: import("tailwind-merge").ClassNameValue;
23
23
  ellipsis?: import("tailwind-merge").ClassNameValue;
24
24
  itemBase?: import("tailwind-merge").ClassNameValue;
25
25
  };
@@ -34,10 +34,10 @@ declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
34
34
  }, undefined, {
35
35
  [key: string]: {
36
36
  [key: string]: import("tailwind-merge").ClassNameValue | {
37
- item?: import("tailwind-merge").ClassNameValue;
38
37
  nav?: import("tailwind-merge").ClassNameValue;
39
38
  list?: import("tailwind-merge").ClassNameValue;
40
39
  separator?: import("tailwind-merge").ClassNameValue;
40
+ item?: import("tailwind-merge").ClassNameValue;
41
41
  ellipsis?: import("tailwind-merge").ClassNameValue;
42
42
  itemBase?: import("tailwind-merge").ClassNameValue;
43
43
  };
@@ -7,24 +7,24 @@ declare const drawerVariants: import("tailwind-variants").TVReturnType<{
7
7
  [key: string]: {
8
8
  [key: string]: import("tailwind-merge").ClassNameValue | {
9
9
  base?: import("tailwind-merge").ClassNameValue;
10
- backdrop?: import("tailwind-merge").ClassNameValue;
11
10
  body?: import("tailwind-merge").ClassNameValue;
12
11
  footer?: import("tailwind-merge").ClassNameValue;
13
12
  header?: import("tailwind-merge").ClassNameValue;
14
- closeButton?: import("tailwind-merge").ClassNameValue;
15
13
  wrapper?: import("tailwind-merge").ClassNameValue;
14
+ backdrop?: import("tailwind-merge").ClassNameValue;
15
+ closeButton?: import("tailwind-merge").ClassNameValue;
16
16
  };
17
17
  };
18
18
  } | {
19
19
  [x: string]: {
20
20
  [x: string]: import("tailwind-merge").ClassNameValue | {
21
21
  base?: import("tailwind-merge").ClassNameValue;
22
- backdrop?: import("tailwind-merge").ClassNameValue;
23
22
  body?: import("tailwind-merge").ClassNameValue;
24
23
  footer?: import("tailwind-merge").ClassNameValue;
25
24
  header?: import("tailwind-merge").ClassNameValue;
26
- closeButton?: import("tailwind-merge").ClassNameValue;
27
25
  wrapper?: import("tailwind-merge").ClassNameValue;
26
+ backdrop?: import("tailwind-merge").ClassNameValue;
27
+ closeButton?: import("tailwind-merge").ClassNameValue;
28
28
  };
29
29
  };
30
30
  } | {}, {
@@ -39,12 +39,12 @@ declare const drawerVariants: import("tailwind-variants").TVReturnType<{
39
39
  [key: string]: {
40
40
  [key: string]: import("tailwind-merge").ClassNameValue | {
41
41
  base?: import("tailwind-merge").ClassNameValue;
42
- backdrop?: import("tailwind-merge").ClassNameValue;
43
42
  body?: import("tailwind-merge").ClassNameValue;
44
43
  footer?: import("tailwind-merge").ClassNameValue;
45
44
  header?: import("tailwind-merge").ClassNameValue;
46
- closeButton?: import("tailwind-merge").ClassNameValue;
47
45
  wrapper?: import("tailwind-merge").ClassNameValue;
46
+ backdrop?: import("tailwind-merge").ClassNameValue;
47
+ closeButton?: import("tailwind-merge").ClassNameValue;
48
48
  };
49
49
  };
50
50
  } | {}, {
@@ -7,24 +7,24 @@ declare const drawerVariants: import("tailwind-variants").TVReturnType<{
7
7
  [key: string]: {
8
8
  [key: string]: import("tailwind-merge").ClassNameValue | {
9
9
  base?: import("tailwind-merge").ClassNameValue;
10
- backdrop?: import("tailwind-merge").ClassNameValue;
11
10
  body?: import("tailwind-merge").ClassNameValue;
12
11
  footer?: import("tailwind-merge").ClassNameValue;
13
12
  header?: import("tailwind-merge").ClassNameValue;
14
- closeButton?: import("tailwind-merge").ClassNameValue;
15
13
  wrapper?: import("tailwind-merge").ClassNameValue;
14
+ backdrop?: import("tailwind-merge").ClassNameValue;
15
+ closeButton?: import("tailwind-merge").ClassNameValue;
16
16
  };
17
17
  };
18
18
  } | {
19
19
  [x: string]: {
20
20
  [x: string]: import("tailwind-merge").ClassNameValue | {
21
21
  base?: import("tailwind-merge").ClassNameValue;
22
- backdrop?: import("tailwind-merge").ClassNameValue;
23
22
  body?: import("tailwind-merge").ClassNameValue;
24
23
  footer?: import("tailwind-merge").ClassNameValue;
25
24
  header?: import("tailwind-merge").ClassNameValue;
26
- closeButton?: import("tailwind-merge").ClassNameValue;
27
25
  wrapper?: import("tailwind-merge").ClassNameValue;
26
+ backdrop?: import("tailwind-merge").ClassNameValue;
27
+ closeButton?: import("tailwind-merge").ClassNameValue;
28
28
  };
29
29
  };
30
30
  } | {}, {
@@ -39,12 +39,12 @@ declare const drawerVariants: import("tailwind-variants").TVReturnType<{
39
39
  [key: string]: {
40
40
  [key: string]: import("tailwind-merge").ClassNameValue | {
41
41
  base?: import("tailwind-merge").ClassNameValue;
42
- backdrop?: import("tailwind-merge").ClassNameValue;
43
42
  body?: import("tailwind-merge").ClassNameValue;
44
43
  footer?: import("tailwind-merge").ClassNameValue;
45
44
  header?: import("tailwind-merge").ClassNameValue;
46
- closeButton?: import("tailwind-merge").ClassNameValue;
47
45
  wrapper?: import("tailwind-merge").ClassNameValue;
46
+ backdrop?: import("tailwind-merge").ClassNameValue;
47
+ closeButton?: import("tailwind-merge").ClassNameValue;
48
48
  };
49
49
  };
50
50
  } | {}, {
@@ -39,15 +39,15 @@ interface MenuSection {
39
39
  declare const menuVariants: import("tailwind-variants").TVReturnType<{
40
40
  [key: string]: {
41
41
  [key: string]: import("tailwind-merge").ClassNameValue | {
42
- item?: import("tailwind-merge").ClassNameValue;
43
42
  trigger?: import("tailwind-merge").ClassNameValue;
43
+ item?: import("tailwind-merge").ClassNameValue;
44
44
  };
45
45
  };
46
46
  } | {
47
47
  [x: string]: {
48
48
  [x: string]: import("tailwind-merge").ClassNameValue | {
49
- item?: import("tailwind-merge").ClassNameValue;
50
49
  trigger?: import("tailwind-merge").ClassNameValue;
50
+ item?: import("tailwind-merge").ClassNameValue;
51
51
  };
52
52
  };
53
53
  } | {}, {
@@ -56,8 +56,8 @@ declare const menuVariants: import("tailwind-variants").TVReturnType<{
56
56
  }, undefined, {
57
57
  [key: string]: {
58
58
  [key: string]: import("tailwind-merge").ClassNameValue | {
59
- item?: import("tailwind-merge").ClassNameValue;
60
59
  trigger?: import("tailwind-merge").ClassNameValue;
60
+ item?: import("tailwind-merge").ClassNameValue;
61
61
  };
62
62
  };
63
63
  } | {}, {
@@ -39,15 +39,15 @@ interface MenuSection {
39
39
  declare const menuVariants: import("tailwind-variants").TVReturnType<{
40
40
  [key: string]: {
41
41
  [key: string]: import("tailwind-merge").ClassNameValue | {
42
- item?: import("tailwind-merge").ClassNameValue;
43
42
  trigger?: import("tailwind-merge").ClassNameValue;
43
+ item?: import("tailwind-merge").ClassNameValue;
44
44
  };
45
45
  };
46
46
  } | {
47
47
  [x: string]: {
48
48
  [x: string]: import("tailwind-merge").ClassNameValue | {
49
- item?: import("tailwind-merge").ClassNameValue;
50
49
  trigger?: import("tailwind-merge").ClassNameValue;
50
+ item?: import("tailwind-merge").ClassNameValue;
51
51
  };
52
52
  };
53
53
  } | {}, {
@@ -56,8 +56,8 @@ declare const menuVariants: import("tailwind-variants").TVReturnType<{
56
56
  }, undefined, {
57
57
  [key: string]: {
58
58
  [key: string]: import("tailwind-merge").ClassNameValue | {
59
- item?: import("tailwind-merge").ClassNameValue;
60
59
  trigger?: import("tailwind-merge").ClassNameValue;
60
+ item?: import("tailwind-merge").ClassNameValue;
61
61
  };
62
62
  };
63
63
  } | {}, {
@@ -24,7 +24,7 @@ const modalVariants = (0, _fuf_stack_pixel_utils.tv)({
24
24
  /**
25
25
  * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)
26
26
  */
27
- const Modal = ({ children = null, className = void 0, disableAnimation = false, footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
27
+ const Modal = ({ children = null, className = void 0, disableAnimation = (0, _fuf_stack_pixel_utils.isTestEnvironment)(), footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
28
28
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.Modal, {
29
29
  backdrop: "opaque",
30
30
  classNames: (0, _fuf_stack_pixel_utils.variantsToClassNames)(modalVariants({ size }), className, "base"),
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.cjs","names":["HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n Modal as HeroModal,\n ModalBody as HeroModalBody,\n ModalContent as HeroModalContent,\n ModalFooter as HeroModalFooter,\n ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n slots: {\n backdrop: '',\n base: '',\n body: 'py-4',\n closeButton: '',\n footer: 'border-t border-t-divider',\n header: 'border-b border-b-divider',\n wrapper: '',\n },\n variants: {\n size: {\n sm: { base: 'max-w-sm' },\n md: { base: 'max-w-md' },\n lg: { base: 'max-w-lg' },\n xl: { base: 'max-w-5xl' },\n full: { base: 'h-[80dvh] max-w-full' },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n /** modal body content */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Disable animations completely */\n disableAnimation?: boolean;\n /** modal footer */\n footer?: ReactNode;\n /** modal header */\n header?: ReactNode;\n /** open state (controlled) */\n isOpen: boolean;\n /** close event handler */\n onClose: () => void;\n /** The container element in which the overlay portal will be placed */\n portalContainer?: HeroModalProps['portalContainer'];\n /** modal size */\n size?: VariantProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n children = null,\n className = undefined,\n disableAnimation = false,\n footer = undefined,\n header = undefined,\n isOpen,\n onClose,\n portalContainer = undefined,\n size = 'md',\n testId = undefined,\n}: ModalProps) => {\n // classNames from slots\n const variants = modalVariants({ size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroModal\n backdrop=\"opaque\"\n classNames={classNames}\n data-testid={testId}\n disableAnimation={disableAnimation}\n isOpen={isOpen}\n onClose={onClose}\n placement=\"center\"\n portalContainer={portalContainer}\n scrollBehavior=\"inside\"\n >\n <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n {() => {\n return (\n <>\n {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n </>\n );\n }}\n </HeroModalContent>\n </HeroModal>\n );\n};\n\nexport default Modal;\n"],"mappings":";;;;;AAeA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AA+BD,MAAM,SAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,mBAAmB,OACnB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,UAAS;EACT,aAAA,GAAA,uBAAA,sBANa,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}
1
+ {"version":3,"file":"Modal.cjs","names":["HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n Modal as HeroModal,\n ModalBody as HeroModalBody,\n ModalContent as HeroModalContent,\n ModalFooter as HeroModalFooter,\n ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport {\n isTestEnvironment,\n tv,\n variantsToClassNames,\n} from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n slots: {\n backdrop: '',\n base: '',\n body: 'py-4',\n closeButton: '',\n footer: 'border-t border-t-divider',\n header: 'border-b border-b-divider',\n wrapper: '',\n },\n variants: {\n size: {\n sm: { base: 'max-w-sm' },\n md: { base: 'max-w-md' },\n lg: { base: 'max-w-lg' },\n xl: { base: 'max-w-5xl' },\n full: { base: 'h-[80dvh] max-w-full' },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n /** modal body content */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /**\n * Disable animations completely. Defaults to `true` in test environments so\n * snapshots are deterministic (the open/close opacity tween otherwise\n * captures a random mid-animation frame).\n */\n disableAnimation?: boolean;\n /** modal footer */\n footer?: ReactNode;\n /** modal header */\n header?: ReactNode;\n /** open state (controlled) */\n isOpen: boolean;\n /** close event handler */\n onClose: () => void;\n /** The container element in which the overlay portal will be placed */\n portalContainer?: HeroModalProps['portalContainer'];\n /** modal size */\n size?: VariantProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n children = null,\n className = undefined,\n disableAnimation = isTestEnvironment(),\n footer = undefined,\n header = undefined,\n isOpen,\n onClose,\n portalContainer = undefined,\n size = 'md',\n testId = undefined,\n}: ModalProps) => {\n // classNames from slots\n const variants = modalVariants({ size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroModal\n backdrop=\"opaque\"\n classNames={classNames}\n data-testid={testId}\n disableAnimation={disableAnimation}\n isOpen={isOpen}\n onClose={onClose}\n placement=\"center\"\n portalContainer={portalContainer}\n scrollBehavior=\"inside\"\n >\n <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n {() => {\n return (\n <>\n {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n </>\n );\n }}\n </HeroModalContent>\n </HeroModal>\n );\n};\n\nexport default Modal;\n"],"mappings":";;;;;AAmBA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AAmCD,MAAM,SAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,oBAAA,GAAA,uBAAA,mBAAqC,GACrC,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,UAAS;EACT,aAAA,GAAA,uBAAA,sBANa,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}
@@ -89,7 +89,11 @@ interface ModalProps$1 extends VariantProps {
89
89
  children?: ReactNode;
90
90
  /** CSS class name */
91
91
  className?: ClassName;
92
- /** Disable animations completely */
92
+ /**
93
+ * Disable animations completely. Defaults to `true` in test environments so
94
+ * snapshots are deterministic (the open/close opacity tween otherwise
95
+ * captures a random mid-animation frame).
96
+ */
93
97
  disableAnimation?: boolean;
94
98
  /** modal footer */
95
99
  footer?: ReactNode;