@fpkit/acss 0.5.8 → 0.5.12

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 (245) hide show
  1. package/README.md +425 -18
  2. package/libs/chunk-23ANBDCR.js +8 -0
  3. package/libs/chunk-23ANBDCR.js.map +1 -0
  4. package/libs/chunk-5M57K4SW.js +8 -0
  5. package/libs/chunk-5M57K4SW.js.map +1 -0
  6. package/libs/chunk-5ZM4XL44.js +8 -0
  7. package/libs/chunk-5ZM4XL44.js.map +1 -0
  8. package/libs/chunk-6BVXFW7U.cjs +15 -0
  9. package/libs/chunk-6BVXFW7U.cjs.map +1 -0
  10. package/libs/chunk-6TE5QEVE.cjs +13 -0
  11. package/libs/chunk-6TE5QEVE.cjs.map +1 -0
  12. package/libs/chunk-7K76RW2A.cjs +18 -0
  13. package/libs/chunk-7K76RW2A.cjs.map +1 -0
  14. package/libs/chunk-BHRQBJRY.js +8 -0
  15. package/libs/chunk-BHRQBJRY.js.map +1 -0
  16. package/libs/chunk-BIP2NY53.js +8 -0
  17. package/libs/chunk-BIP2NY53.js.map +1 -0
  18. package/libs/chunk-BSPKFLO4.js +8 -0
  19. package/libs/chunk-BSPKFLO4.js.map +1 -0
  20. package/libs/chunk-BV5CLH44.cjs +18 -0
  21. package/libs/chunk-BV5CLH44.cjs.map +1 -0
  22. package/libs/chunk-DKGJHKGW.js +9 -0
  23. package/libs/chunk-DKGJHKGW.js.map +1 -0
  24. package/libs/chunk-DV56L5YX.cjs +18 -0
  25. package/libs/chunk-DV56L5YX.cjs.map +1 -0
  26. package/libs/chunk-E3XP6BEX.cjs +16 -0
  27. package/libs/chunk-E3XP6BEX.cjs.map +1 -0
  28. package/libs/chunk-ECLD37WN.cjs +16 -0
  29. package/libs/chunk-ECLD37WN.cjs.map +1 -0
  30. package/libs/chunk-EQ67LF46.js +9 -0
  31. package/libs/chunk-EQ67LF46.js.map +1 -0
  32. package/libs/chunk-G55UJ53G.cjs +16 -0
  33. package/libs/chunk-G55UJ53G.cjs.map +1 -0
  34. package/libs/chunk-HYBZBN4G.js +8 -0
  35. package/libs/chunk-HYBZBN4G.js.map +1 -0
  36. package/libs/chunk-ICCKQ2GC.cjs +15 -0
  37. package/libs/chunk-ICCKQ2GC.cjs.map +1 -0
  38. package/libs/chunk-IYUN2EW3.cjs +15 -0
  39. package/libs/chunk-IYUN2EW3.cjs.map +1 -0
  40. package/libs/chunk-KKLTUJFB.cjs +31 -0
  41. package/libs/chunk-KKLTUJFB.cjs.map +1 -0
  42. package/libs/chunk-LHVJKDMA.cjs +15 -0
  43. package/libs/chunk-LHVJKDMA.cjs.map +1 -0
  44. package/libs/chunk-LIQJ7ZZR.js +8 -0
  45. package/libs/chunk-LIQJ7ZZR.js.map +1 -0
  46. package/libs/chunk-LL7HTLMS.cjs +15 -0
  47. package/libs/chunk-LL7HTLMS.cjs.map +1 -0
  48. package/libs/chunk-LT5KZ2QW.cjs +22 -0
  49. package/libs/chunk-LT5KZ2QW.cjs.map +1 -0
  50. package/libs/chunk-M5QL5TAE.cjs +14 -0
  51. package/libs/chunk-M5QL5TAE.cjs.map +1 -0
  52. package/libs/chunk-NE6YXTMC.js +7 -0
  53. package/libs/chunk-NE6YXTMC.js.map +1 -0
  54. package/libs/chunk-NHYXGV3L.js +8 -0
  55. package/libs/chunk-NHYXGV3L.js.map +1 -0
  56. package/libs/chunk-O6QZBB6G.js +9 -0
  57. package/libs/chunk-O6QZBB6G.js.map +1 -0
  58. package/libs/chunk-P7TTEYCD.js +7 -0
  59. package/libs/chunk-P7TTEYCD.js.map +1 -0
  60. package/libs/chunk-PPOOBUOS.js +8 -0
  61. package/libs/chunk-PPOOBUOS.js.map +1 -0
  62. package/libs/chunk-QCMV4VQZ.js +8 -0
  63. package/libs/chunk-QCMV4VQZ.js.map +1 -0
  64. package/libs/chunk-QVV34QEH.cjs +32 -0
  65. package/libs/chunk-QVV34QEH.cjs.map +1 -0
  66. package/libs/chunk-S7BABR7Z.cjs +13 -0
  67. package/libs/chunk-S7BABR7Z.cjs.map +1 -0
  68. package/libs/chunk-SXVZSWX6.js +11 -0
  69. package/libs/chunk-SXVZSWX6.js.map +1 -0
  70. package/libs/chunk-X3EVB7VS.cjs +15 -0
  71. package/libs/chunk-X3EVB7VS.cjs.map +1 -0
  72. package/libs/chunk-YWOYVRFT.js +9 -0
  73. package/libs/chunk-YWOYVRFT.js.map +1 -0
  74. package/libs/component-props-a8a2f97e.d.ts +38 -0
  75. package/libs/components/breadcrumbs/breadcrumb.cjs +20 -0
  76. package/libs/components/breadcrumbs/breadcrumb.cjs.map +1 -0
  77. package/libs/components/breadcrumbs/breadcrumb.d.cts +51 -0
  78. package/libs/components/breadcrumbs/breadcrumb.d.ts +51 -0
  79. package/libs/components/breadcrumbs/breadcrumb.js +5 -0
  80. package/libs/components/breadcrumbs/breadcrumb.js.map +1 -0
  81. package/libs/components/button.cjs +19 -0
  82. package/libs/components/button.cjs.map +1 -0
  83. package/libs/components/button.d.cts +16 -0
  84. package/libs/components/button.d.ts +16 -0
  85. package/libs/components/button.js +4 -0
  86. package/libs/components/button.js.map +1 -0
  87. package/libs/components/card.cjs +31 -0
  88. package/libs/components/card.cjs.map +1 -0
  89. package/libs/components/card.d.cts +58 -0
  90. package/libs/components/card.d.ts +58 -0
  91. package/libs/components/card.js +4 -0
  92. package/libs/components/card.js.map +1 -0
  93. package/libs/components/details/details.css +1 -1
  94. package/libs/components/details/details.css.map +1 -1
  95. package/libs/components/details/details.min.css +2 -2
  96. package/libs/components/dialog/dialog.cjs +22 -0
  97. package/libs/components/dialog/dialog.cjs.map +1 -0
  98. package/libs/components/dialog/dialog.d.cts +51 -0
  99. package/libs/components/dialog/dialog.d.ts +51 -0
  100. package/libs/components/dialog/dialog.js +7 -0
  101. package/libs/components/dialog/dialog.js.map +1 -0
  102. package/libs/components/form/fields.cjs +19 -0
  103. package/libs/components/form/fields.cjs.map +1 -0
  104. package/libs/components/form/fields.d.cts +24 -0
  105. package/libs/components/form/fields.d.ts +24 -0
  106. package/libs/components/form/fields.js +4 -0
  107. package/libs/components/form/fields.js.map +1 -0
  108. package/libs/components/form/inputs.cjs +19 -0
  109. package/libs/components/form/inputs.cjs.map +1 -0
  110. package/libs/components/form/inputs.d.cts +2 -0
  111. package/libs/components/form/inputs.d.ts +2 -0
  112. package/libs/components/form/inputs.js +4 -0
  113. package/libs/components/form/inputs.js.map +1 -0
  114. package/libs/components/form/textarea.cjs +19 -0
  115. package/libs/components/form/textarea.cjs.map +1 -0
  116. package/libs/components/form/textarea.d.cts +29 -0
  117. package/libs/components/form/textarea.d.ts +29 -0
  118. package/libs/components/form/textarea.js +4 -0
  119. package/libs/components/form/textarea.js.map +1 -0
  120. package/libs/components/heading/heading.cjs +10 -0
  121. package/libs/components/heading/heading.cjs.map +1 -0
  122. package/libs/components/heading/heading.d.cts +14 -0
  123. package/libs/components/heading/heading.d.ts +14 -0
  124. package/libs/components/heading/heading.js +4 -0
  125. package/libs/components/heading/heading.js.map +1 -0
  126. package/libs/components/icons/icon.cjs +19 -0
  127. package/libs/components/icons/icon.cjs.map +1 -0
  128. package/libs/{icons-31ace3de.d.ts → components/icons/icon.d.cts} +4 -58
  129. package/libs/components/icons/icon.d.ts +301 -0
  130. package/libs/components/icons/icon.js +4 -0
  131. package/libs/components/icons/icon.js.map +1 -0
  132. package/libs/components/link/link.cjs +19 -0
  133. package/libs/components/link/link.cjs.map +1 -0
  134. package/libs/components/link/link.d.cts +19 -0
  135. package/libs/components/link/link.d.ts +19 -0
  136. package/libs/components/link/link.js +4 -0
  137. package/libs/components/link/link.js.map +1 -0
  138. package/libs/components/list/list.cjs +23 -0
  139. package/libs/components/list/list.cjs.map +1 -0
  140. package/libs/components/list/list.d.cts +39 -0
  141. package/libs/components/list/list.d.ts +39 -0
  142. package/libs/components/list/list.js +4 -0
  143. package/libs/components/list/list.js.map +1 -0
  144. package/libs/components/modal.cjs +14 -0
  145. package/libs/components/modal.cjs.map +1 -0
  146. package/libs/components/modal.d.cts +35 -0
  147. package/libs/components/modal.d.ts +35 -0
  148. package/libs/components/modal.js +5 -0
  149. package/libs/components/modal.js.map +1 -0
  150. package/libs/components/nav/nav.cjs +28 -0
  151. package/libs/components/nav/nav.cjs.map +1 -0
  152. package/libs/components/nav/nav.d.cts +44 -0
  153. package/libs/components/nav/nav.d.ts +44 -0
  154. package/libs/components/nav/nav.js +5 -0
  155. package/libs/components/nav/nav.js.map +1 -0
  156. package/libs/components/popover/popover.cjs +23 -0
  157. package/libs/components/popover/popover.cjs.map +1 -0
  158. package/libs/components/popover/popover.d.cts +40 -0
  159. package/libs/components/popover/popover.d.ts +40 -0
  160. package/libs/components/popover/popover.js +4 -0
  161. package/libs/components/popover/popover.js.map +1 -0
  162. package/libs/components/tables/table.cjs +21 -0
  163. package/libs/components/tables/table.cjs.map +1 -0
  164. package/libs/components/tables/table.d.cts +36 -0
  165. package/libs/components/tables/table.d.ts +36 -0
  166. package/libs/components/tables/table.js +4 -0
  167. package/libs/components/tables/table.js.map +1 -0
  168. package/libs/components/text/text.cjs +23 -0
  169. package/libs/components/text/text.cjs.map +1 -0
  170. package/libs/components/text/text.d.cts +30 -0
  171. package/libs/components/text/text.d.ts +30 -0
  172. package/libs/components/text/text.js +4 -0
  173. package/libs/components/text/text.js.map +1 -0
  174. package/libs/icons.cjs +3 -2
  175. package/libs/icons.d.cts +3 -1
  176. package/libs/icons.d.ts +3 -1
  177. package/libs/icons.js +2 -1
  178. package/libs/index.cjs +152 -61
  179. package/libs/index.cjs.map +1 -1
  180. package/libs/index.css +1 -1
  181. package/libs/index.css.map +1 -1
  182. package/libs/index.d.cts +53 -459
  183. package/libs/index.d.ts +53 -459
  184. package/libs/index.js +24 -7
  185. package/libs/index.js.map +1 -1
  186. package/libs/inputs-f3a216db.d.ts +45 -0
  187. package/libs/ui-9a6f9f8d.d.ts +24 -0
  188. package/package.json +87 -2
  189. package/src/components/README.mdx +1 -1
  190. package/src/components/alert/README.mdx +1 -1
  191. package/src/components/alert/alert.stories.tsx +2 -2
  192. package/src/components/alert/elements/README.mdx +1 -1
  193. package/src/components/alert/elements/dismiss-button.stories.tsx +2 -2
  194. package/src/components/badge/badge.mdx +1 -1
  195. package/src/components/badge/badge.stories.tsx +2 -2
  196. package/src/components/breadcrumbs/README.mdx +91 -0
  197. package/src/components/breadcrumbs/breadcrumb.stories.tsx +2 -2
  198. package/src/components/breadcrumbs/breadcrumb.tsx +92 -87
  199. package/src/components/button.ts +2 -0
  200. package/src/components/buttons/README.mdx +1 -1
  201. package/src/components/buttons/button.stories.tsx +2 -2
  202. package/src/components/buttons/button.test.tsx +1 -1
  203. package/src/components/card.ts +2 -0
  204. package/src/components/cards/card.stories.tsx +2 -2
  205. package/src/components/details/README.mdx +1 -1
  206. package/src/components/details/details.scss +7 -0
  207. package/src/components/details/details.stories.tsx +2 -2
  208. package/src/components/dialog/README.mdx +1 -1
  209. package/src/components/dialog/dialog-modal.stories.tsx +2 -2
  210. package/src/components/dialog/dialog-modal.tsx +1 -1
  211. package/src/components/dialog/dialog.stories.tsx +2 -2
  212. package/src/components/dialog/views/README.mdx +1 -1
  213. package/src/components/dialog/views/dialog-header.stories.tsx +2 -2
  214. package/src/components/form/form.stories.tsx +2 -2
  215. package/src/components/form/input.stories.tsx +2 -2
  216. package/src/components/form/inputs.tsx +18 -24
  217. package/src/components/form/select.stories.tsx +2 -2
  218. package/src/components/fp.test.tsx +52 -50
  219. package/src/components/heading/heading.stories.tsx +2 -2
  220. package/src/components/icons/icon.stories.tsx +1 -1
  221. package/src/components/images/figure.stories.tsx +2 -2
  222. package/src/components/images/img.stories.tsx +2 -2
  223. package/src/components/layout/footer.stories.tsx +10 -19
  224. package/src/components/layout/landmarks.stories.tsx +22 -24
  225. package/src/components/layout/main.stories.tsx +21 -25
  226. package/src/components/link/link.stories.tsx +2 -2
  227. package/src/components/list/list.stories.tsx +2 -2
  228. package/src/components/modal.ts +1 -0
  229. package/src/components/nav/nav.stories.tsx +2 -2
  230. package/src/components/popover/popover.stories.tsx +2 -2
  231. package/src/components/progress/progress.stories.tsx +1 -1
  232. package/src/components/tag/tag.stories.tsx +2 -2
  233. package/src/components/text/text.stories.tsx +2 -2
  234. package/src/components/text-to-speech/TextToSpeech.stories.tsx +1 -1
  235. package/src/decorators/instructions.tsx +2 -1
  236. package/src/index.ts +43 -19
  237. package/src/patterns/page/page-header.stories.tsx +2 -2
  238. package/src/styles/details/details.css +8 -0
  239. package/src/styles/details/details.css.map +1 -1
  240. package/src/styles/index.css +8 -0
  241. package/src/styles/index.css.map +1 -1
  242. package/libs/chunk-PWVRDQ3R.js +0 -8
  243. package/libs/chunk-PWVRDQ3R.js.map +0 -1
  244. package/libs/chunk-SVS4MX3U.cjs +0 -31
  245. package/libs/chunk-SVS4MX3U.cjs.map +0 -1
package/libs/index.d.ts CHANGED
@@ -1,73 +1,59 @@
1
- import { F as FP$1, C as ComponentProps$1 } from './icons-31ace3de.js';
2
- export { I as Icon } from './icons-31ace3de.js';
3
- import * as React from 'react';
4
- import React__default, { ReactNode, CSSProperties } from 'react';
5
-
6
- type ButtonProps = Partial<React__default.ComponentProps<typeof FP$1>> & {
7
- /**
8
- * The button type
9
- * Required - 'button' | 'submit' | 'reset'
10
- */
11
- type: 'button' | 'submit' | 'reset';
12
- };
13
- declare const Button: {
14
- ({ type, children, styles, disabled, classes, onPointerDown, onPointerOver, onPointerLeave, onClick, ...props }: ButtonProps): React__default.JSX.Element;
15
- displayName: string;
16
- };
17
-
18
- type CardProps = {
19
- elm?: 'div' | 'aside' | 'section' | 'article';
20
- title?: React__default.ReactNode;
21
- footer?: React__default.ReactNode;
22
- } & React__default.ComponentProps<typeof FP$1>;
23
- declare const Card: {
24
- ({ elm, styles, children, classes, id, ...props }: CardProps): React__default.JSX.Element;
1
+ export { Button, ButtonProps } from './components/button.js';
2
+ export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
3
+ export { default as Field, FieldProps } from './components/form/fields.js';
4
+ export { F as Box, F as FP, I as Input, a as InputProps } from './inputs-f3a216db.js';
5
+ export { default as Icon, IconProps } from './components/icons/icon.js';
6
+ import { F as FP } from './ui-9a6f9f8d.js';
7
+ import React__default, { ReactNode } from 'react';
8
+ export { default as Link, LinkProps, default as To } from './components/link/link.js';
9
+ export { default as List, ListItemProps } from './components/list/list.js';
10
+ export { Modal, ModalProps } from './components/modal.js';
11
+ export { default as Popover, PopoverProps } from './components/popover/popover.js';
12
+ export { RenderTable as TBL, TableProps } from './components/tables/table.js';
13
+ export { Dialog } from './components/dialog/dialog.js';
14
+ export { default as Nav, NavItem, NavItemProps, NavList, NavListProps, NavProps } from './components/nav/nav.js';
15
+ export { default as Text, TextProps, Title } from './components/text/text.js';
16
+ export { TitleProps } from './components/heading/heading.js';
17
+ export { default as Textarea, TextareaProps } from './components/form/textarea.js';
18
+ import { C as ComponentProps$1 } from './component-props-a8a2f97e.js';
19
+ export { default as Breadcrumb } from './components/breadcrumbs/breadcrumb.js';
20
+
21
+ type ImageProps = React__default.ComponentProps<'img'> & React__default.ComponentProps<typeof FP>;
22
+ declare const Img: {
23
+ ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, imgLoaded, imgError, ...props }: ImageProps): React__default.JSX.Element;
25
24
  displayName: string;
26
- Title: {
27
- ({ children, className, styles, as, ...props }: React__default.PropsWithChildren<{
28
- className?: string | undefined;
29
- styles?: React__default.CSSProperties | undefined;
30
- as?: React__default.ElementType<any> | undefined;
31
- }>): React__default.JSX.Element;
32
- displayName: string;
33
- };
34
- Content: {
35
- ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
36
- className?: string | undefined;
37
- styles?: React__default.CSSProperties | undefined;
38
- }>): React__default.JSX.Element;
39
- displayName: string;
40
- };
41
- Footer: {
42
- ({ children, className, styles, ...props }: React__default.PropsWithChildren<{
43
- className?: string | undefined;
44
- styles?: React__default.CSSProperties | undefined;
45
- }>): React__default.JSX.Element;
46
- displayName: string;
47
- };
48
25
  };
49
26
 
50
- type FieldProps = {
51
- /**
52
- * The label content
53
- */
54
- label: React__default.ReactNode;
55
- children: React__default.ReactNode;
56
- } & React__default.ComponentProps<'label'> & Partial<React__default.ComponentProps<typeof FP$1>>;
57
27
  /**
58
- * Field component that renders a label and children wrapped in a div element.
59
- * @param labelFor Defines the for attribute of the label element
60
- * @param styles Custom styles to be applied to the component
61
- * @param label The label content
62
- * @param children The children to be rendered inside the component
63
- * @param props Additional props to be spread to the component
28
+ * Props for the TextToSpeechComponent.
29
+ * @interface TextToSpeechComponentProps
64
30
  */
65
- declare const Field: {
66
- ({ label, labelFor, id, styles, classes, children, ...props }: FieldProps): React__default.JSX.Element;
67
- displayName: string;
68
- };
31
+ interface TextToSpeechComponentProps {
32
+ /** Initial text to be spoken. Defaults to an empty string. */
33
+ initialText?: string;
34
+ /** Whether to show the text input field. Defaults to true. */
35
+ showTextInput?: boolean;
36
+ /** The voice to be used for speech synthesis. */
37
+ voice?: SpeechSynthesisVoice | undefined;
38
+ /** The pitch of the voice. Defaults to 1. */
39
+ pitch?: number;
40
+ /** The rate of speech. Defaults to 1. */
41
+ rate?: number;
42
+ /** The language to be used for speech synthesis. */
43
+ language?: string;
44
+ /** Player label */
45
+ label?: string | React__default.ReactNode;
46
+ /** Callback function to be called when speech ends. */
47
+ onEnd?: () => void;
48
+ }
49
+ /**
50
+ * A component that converts text to speech using the Web Speech API.
51
+ * @param {TextToSpeechComponentProps} props - The props for the component.
52
+ * @returns {JSX.Element} The rendered TextToSpeechComponent.
53
+ */
54
+ declare const TextToSpeech: React__default.FC<TextToSpeechComponentProps>;
69
55
 
70
- type ComponentProps = React__default.ComponentProps<typeof FP$1>;
56
+ type ComponentProps = React__default.ComponentProps<typeof FP>;
71
57
  /**
72
58
  * Renders children elements without any wrapping component.
73
59
  * Can be used as a placeholder when no semantic landmark is needed.
@@ -131,226 +117,12 @@ declare const Section: ({ id, children, styles, classes, ...props }: ComponentPr
131
117
  */
132
118
  declare const Article: ({ id, children, styles, classes, ...props }: ComponentProps) => React__default.JSX.Element;
133
119
 
134
- type ImageProps = React__default.ComponentProps<'img'> & React__default.ComponentProps<typeof FP$1>;
135
- declare const Img: {
136
- ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, imgLoaded, imgError, ...props }: ImageProps): React__default.JSX.Element;
137
- displayName: string;
138
- };
139
-
140
- type PolymorphicRef<C extends React__default.ElementType> = React__default.ComponentPropsWithRef<C>['ref'];
141
- type AsProp<C extends React__default.ElementType> = {
142
- as?: C;
143
- };
144
- type PropsToOmit<C extends React__default.ElementType, P> = keyof (AsProp<C> & P);
145
- type PolymorphicComponentProp<C extends React__default.ElementType, Props = {}> = React__default.PropsWithChildren<Props & AsProp<C>> & Omit<React__default.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
146
- type PolymorphicComponentPropWithRef<C extends React__default.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
147
- ref?: PolymorphicRef<C>;
148
- };
149
- type FPProps<C extends React__default.ElementType> = PolymorphicComponentPropWithRef<C, {
150
- renderStyles?: boolean;
151
- styles?: React__default.CSSProperties;
152
- classes?: string;
153
- }>;
154
- type FPComponent = <C extends React__default.ElementType = 'span'>(props: FPProps<C>) => React__default.ReactElement | any;
155
- /**
156
- * FP component is a polymorphic component that renders an HTML element with optional styles.
157
- * @param {Object} props - Component props
158
- * @param {React.ElementType} props.as - The HTML element to render. Defaults to 'div'.
159
- * @param {boolean} props.renderStyles - Whether to render styles or not. Defaults to true.
160
- * @param {Object} props.styles - The styles to apply to the component.
161
- * @param {Object} props.defaultStyles - The default styles to apply to the component.
162
- * @param {React.ReactNode} props.children - The children to render inside the component.
163
- * @returns {React.ReactElement} - A React component that renders an HTML element with optional styles.
164
- */
165
- declare const FP: FPComponent;
166
-
167
- type InputProps = {
168
- /**
169
- * The type of the input.
170
- */
171
- type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
172
- /**
173
- * Set the element as disabled
174
- */
175
- isDisabled?: boolean;
176
- } & React__default.ComponentProps<typeof FP>;
177
- /**
178
- * Input component that renders an HTML input element.
179
- * @param {InputProps} props - The input component props.
180
- * @returns {JSX.Element} - The input component.
181
- */
182
- declare const Input: {
183
- ({ type, name, value, placeholder, id, styles, classes, isDisabled, disabled, readonly, required, ref, onChange, onBlur, onPointerDown, ...props }: InputProps): JSX.Element;
184
- displayName: string;
185
- };
186
-
187
- type LinkProps = {
188
- href?: string;
189
- target?: string;
190
- rel?: string;
191
- children: React__default.ReactNode;
192
- styles?: React__default.CSSProperties;
193
- prefetch?: boolean;
194
- btnStyle?: string;
195
- onPointerDown?: (event: React__default.PointerEvent<HTMLAnchorElement>) => void;
196
- } & React__default.ComponentProps<typeof FP$1> & React__default.ComponentProps<"a">;
197
- declare const Link: {
198
- ({ href, target, rel, children, styles, prefetch, btnStyle, onPointerDown, ...props }: LinkProps): React__default.JSX.Element;
199
- displayName: string;
200
- };
201
-
202
- type ListProps = {
203
- /** Type of list to render (default: 'ul') */
204
- type?: 'ul' | 'ol' | 'dl';
205
- /** variant of list to render (default: 'none') */
206
- variant?: string;
207
- } & React.ComponentProps<typeof FP$1>;
208
- type ListItemProps = {
209
- /** Type of list item to render (default: 'li') */
210
- type?: 'li' | 'dt' | 'dd';
211
- } & React.ComponentProps<typeof FP$1>;
212
- /**
213
- * List component renders a list element with provided props
214
- * @param children - Child elements to render inside the list
215
- * @param classes - CSS classes to apply
216
- * @param type - Type of list element (default: 'ul')
217
- * @param variant - Variant for styling purposes
218
- * @param styles - Inline styles object
219
- * @param role - ARIA role
220
- * @param props - Additional props to pass to underlying element
221
- */
222
- declare const List: {
223
- ({ children, classes, type, variant, styles, role, ...props }: ListProps): React.JSX.Element;
224
- displayName: string;
225
- ListItem: ({ type, id, styles, children, classes, ...props }: ListItemProps) => React.JSX.Element;
226
- };
227
-
228
- interface ModalProps extends ComponentProps$1 {
229
- /**
230
- * The child component/content for open button
231
- */
232
- openChild?: React__default.ReactNode;
233
- /**
234
- * The child component/content for close button
235
- */
236
- closeChild?: React__default.ReactNode;
237
- /**
238
- * The child component/content for modal header
239
- */
240
- modalHeader?: React__default.ReactNode;
241
- /**
242
- * The child component/content for modal footer
243
- */
244
- modalFooter?: React__default.ReactNode;
245
- /**
246
- * The child component/content for modal body
247
- */
248
- children: React__default.ReactNode;
249
- /**
250
- * Open modal on mount when set to true
251
- */
252
- showOpen?: boolean;
253
- }
254
- declare const Modal: {
255
- ({ openChild, closeChild, modalHeader, modalFooter, children, showOpen, ...props }: ModalProps): React__default.JSX.Element;
256
- displayName: string;
257
- };
258
-
259
- type NavListProps = React__default.ComponentProps<typeof List> & {
260
- isBlock?: boolean;
261
- };
262
- type NavItemProps = React__default.ComponentProps<typeof List.ListItem>;
263
- type NavProps = React__default.ComponentProps<typeof FP$1>;
264
- /**
265
- * Renders a NavList component.
266
- * @param {Object} props - The props for the component.
267
- * @param {ReactNode} props.children - The child elements.
268
- * @param {Object} props - Additional props to spread to the List component.
269
- * @returns {JSX.Element} The rendered NavList component.
270
- */
271
- declare const NavList: ({ isBlock, children, ...props }: NavListProps) => React__default.JSX.Element;
272
- /**
273
- * Renders a NavItem component.
274
- * @param {Object} props - The props for the component.
275
- * @param {string} [props.id] - The id for the component.
276
- * @param {Object} [props.styles] - The styles for the component.
277
- * @param {string} [props.classes] - The classes for the component.
278
- * @param {ReactNode} props.children - The child elements.
279
- * @param {boolean} [props.inline=true] - Whether the item should display inline.
280
- * @param {Object} props - Additional props to spread to the ListItem component.
281
- * @returns {JSX.Element} The rendered NavItem component.
282
- */
283
- declare const NavItem: ({ id, styles, classes, children, ...props }: NavItemProps) => React__default.JSX.Element;
284
- /**
285
- * Renders a Nav component.
286
- * @param {Object} props - The props for the component.
287
- * @param {ReactNode} props.children - The child elements.
288
- * @param {Object} props - Additional props to spread to the UI component.
289
- * @returns {JSX.Element} The rendered Nav component.
290
- */
291
- declare const Nav: {
292
- ({ children, ...props }: NavProps): React__default.JSX.Element;
293
- displayName: string;
294
- List: ({ isBlock, children, ...props }: NavListProps) => React__default.JSX.Element;
295
- Item: ({ id, styles, classes, children, ...props }: NavItemProps) => React__default.JSX.Element;
296
- };
297
-
298
- /**
299
- * Interface for props accepted by the Popover component
300
- *
301
- * @property {ReactNode} children - The content to show in the popover
302
- * @property {ReactNode} [content] - Optional alternative content for popover
303
- */
304
- type PopoverProps = {
305
- children: React__default.ReactNode;
306
- popoverTrigger: React__default.ReactNode;
307
- styles?: {};
308
- };
309
- /**
310
- * Popover component to display popover content.
311
- *
312
- * @param props - The props for the component
313
- * @param props.children - The content to show in the popover
314
- * @param props.popoverTrigger - The element that triggers the popover on hover
315
- *
316
- * @returns JSX.Element - The rendered JSX element for the Popover
317
- * @example - <Popover popoverTrigger={<button>Hover here</button>}>Popover content</Popover>
318
- *
319
- * The component uses the usePopover hook to handle popover visibility and positioning.
320
- *
321
- * It renders the triggerElement, and conditionally renders the popover content
322
- * positioned absolutely when visible.
323
- *
324
- * Inline styles handle visuals like background, border, padding, etc.
325
- *
326
- * Transforms and opacity animate the enter/exit transition of the popover.
327
- */
328
- declare const Popover: {
329
- ({ children, popoverTrigger, styles, ...props }: PopoverProps): JSX.Element;
330
- displayName: string;
331
- styles: React__default.CSSProperties;
332
- };
333
-
334
- interface TableProps extends ComponentProps$1 {
335
- tblHead: React__default.ReactNode;
336
- tblBody: React__default.ReactNode;
337
- tblCaption?: React__default.ReactNode;
338
- }
339
- /**
340
- * Render the table placing `caption`, `thead` and `tbody` in the correct order
341
- * caption is optional
342
- */
343
- declare const RenderTable: {
344
- ({ tblBody, tblCaption, tblHead }: TableProps): React__default.JSX.Element;
345
- displayName: string;
346
- };
347
-
348
120
  type TagProps = {
349
121
  /** HTML element to display the badge as span or p */
350
122
  elm?: 'span' | 'p';
351
123
  /** Aria role for the component - conditional */
352
124
  role: 'note' | 'status';
353
- } & React__default.ComponentProps<typeof FP$1>;
125
+ } & React__default.ComponentProps<typeof FP>;
354
126
  declare const Tag: {
355
127
  ({ elm, role, children, styles, ...props }: TagProps): React__default.JSX.Element;
356
128
  displayName: string;
@@ -391,7 +163,7 @@ type DetailsProps = {
391
163
  * The aria-label element for accessibility.
392
164
  */
393
165
  ariaLabel: string;
394
- } & React__default.ComponentProps<"details"> & Partial<React__default.ComponentProps<typeof FP$1>>;
166
+ } & React__default.ComponentProps<"details"> & Partial<React__default.ComponentProps<typeof FP>>;
395
167
  /**3
396
168
  * Details component props interface.
397
169
  *
@@ -410,182 +182,4 @@ declare const Details: {
410
182
  displayName: string;
411
183
  };
412
184
 
413
- type InheritedProps = React__default.ComponentProps<typeof FP$1>;
414
- type TextElements = 'a' | 'b' | 'blockquote' | 'b' | 'blockquote' | 'cite' | 'code' | 'em' | 'i' | 'em' | 'i' | 'kbd' | 'mark' | 'p' | 's' | 'small' | 'span' | 'span' | 'strong' | 'mark' | 'p' | 's' | 'small' | 'span' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'time' | 'u';
415
- type TextProps = {
416
- /**
417
- * Text element to to use
418
- * Text element to to use
419
- */
420
- elm?: TextElements;
421
- /** Pass a text element or string */
422
- text?: string;
423
- } & InheritedProps;
424
- declare const Text: {
425
- ({ elm, id, text, styles, classes, children, ...props }: TextProps): React__default.JSX.Element;
426
- displayName: string;
427
- };
428
- type TitleProps$1 = {
429
- /**
430
- * HTML headings
431
- */
432
- elm?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
433
- } & InheritedProps;
434
- declare const Title: {
435
- ({ elm, id, children, styles, classes, ...props }: TitleProps$1): React__default.JSX.Element;
436
- displayName: string;
437
- };
438
-
439
- type TextareaProps = React__default.ComponentProps<'textarea'> & React__default.ComponentProps<typeof FP$1>;
440
- /**
441
- * Textarea component.
442
- *
443
- * @param value - The value of the textarea.
444
- * @param rows - The number of rows.
445
- * @param cols - The number of columns.
446
- * @param id - The id of the textarea.
447
- * @param name - The name of the textarea.
448
- * @param required - Whether the textarea is required.
449
- * @param disabled - Whether the textarea is disabled.
450
- * @param readOnly - Whether the textarea is read only.
451
- * @param onBlur - Blur event handler.
452
- * @param onPointerDown - Pointer down event handler.
453
- * @param onChange - Change event handler.
454
- * @param ref - Ref for the textarea.
455
- * @param styles - Styles object for the textarea.
456
- * @param textareaRef - Ref specifically for the textarea element.
457
- * @param props - Other props.
458
- */
459
- declare const Textarea: {
460
- ({ id, classes, value, rows, cols, name, required, disabled, readOnly, onBlur, onPointerDown, onChange, ref, styles, placeholder, ...props }: TextareaProps): React__default.JSX.Element;
461
- displayName: string;
462
- };
463
-
464
- type TitleProps = {
465
- children: React__default.ReactNode;
466
- type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
467
- ui?: string;
468
- } & React__default.ComponentProps<typeof FP$1>;
469
-
470
- type customRoute = {
471
- /** The path or id for routing */
472
- path?: string;
473
- /** The display name */
474
- name: string;
475
- /** The url if linking out */
476
- url?: string;
477
- };
478
- type BreadcrumbProps = {
479
- /** Array of custom route objects */
480
- routes?: customRoute[];
481
- /** Starting route node */
482
- startRoute?: React__default.ReactNode;
483
- startRouteUrl?: string;
484
- /** Spacer node between routes */
485
- spacer?: React__default.ReactNode;
486
- /** String representing current route */
487
- currentRoute?: string;
488
- /** Prefix breadcrumb aria-label - "prefix breadcrumb" */
489
- ariaLabelPrefix?: string;
490
- /** Truncate breadcrumb text after this length */
491
- truncateLength?: number;
492
- /** Link props for breadcrumb links */
493
- linkProps?: React__default.ComponentProps<typeof Link>;
494
- } & React__default.ComponentProps<typeof FP$1>;
495
- /**
496
- * Navigation component for breadcrumbs.
497
- *
498
- * @param props - Props for the navigation component.
499
- * @param props.startRoute - Starting route node. Default 'Home'.
500
- * @param props.currentRoute - String representing current route.
501
- * @param props.spacer - Spacer node between routes. Default '&#47;'.
502
- * @param props.routes - Array of custom route objects.
503
- * @param props.styles - Styles object for the nav.
504
- * @param props.id - Id for the nav.
505
- * @param props.classes - Class names for the nav.
506
- * @param props.children - Child components.
507
- */
508
- declare const Breadcrumb: {
509
- ({ startRoute, startRouteUrl, currentRoute, spacer, routes, styles, id, classes, ariaLabelPrefix, truncateLength, linkProps, ...props }: BreadcrumbProps): React__default.JSX.Element;
510
- displayName: string;
511
- Nav: ({ styles, id, classes, children, ...props }: React__default.ComponentProps<typeof FP$1>) => React__default.JSX.Element;
512
- List: ({ children, ...props }: React__default.ComponentProps<typeof FP$1>) => React__default.JSX.Element;
513
- Items: ({ styles, id, classes, children, ...props }: React__default.ComponentProps<typeof FP$1>) => React__default.JSX.Element;
514
- };
515
-
516
- /**
517
- * Props for the TextToSpeechComponent.
518
- * @interface TextToSpeechComponentProps
519
- */
520
- interface TextToSpeechComponentProps {
521
- /** Initial text to be spoken. Defaults to an empty string. */
522
- initialText?: string;
523
- /** Whether to show the text input field. Defaults to true. */
524
- showTextInput?: boolean;
525
- /** The voice to be used for speech synthesis. */
526
- voice?: SpeechSynthesisVoice | undefined;
527
- /** The pitch of the voice. Defaults to 1. */
528
- pitch?: number;
529
- /** The rate of speech. Defaults to 1. */
530
- rate?: number;
531
- /** The language to be used for speech synthesis. */
532
- language?: string;
533
- /** Player label */
534
- label?: string | React__default.ReactNode;
535
- /** Callback function to be called when speech ends. */
536
- onEnd?: () => void;
537
- }
538
- /**
539
- * A component that converts text to speech using the Web Speech API.
540
- * @param {TextToSpeechComponentProps} props - The props for the component.
541
- * @returns {JSX.Element} The rendered TextToSpeechComponent.
542
- */
543
- declare const TextToSpeech: React__default.FC<TextToSpeechComponentProps>;
544
-
545
- /**
546
- * Defines the props for the Dialog component.
547
- *
548
- * @property {boolean} [showDialog] - Determines whether the dialog should be shown.
549
- * @property {boolean} [isAlertDialog] - Determines whether the dialog should be displayed as an alert dialog.
550
- * @property {() => void} [onClose] - A callback function to be called when the dialog is closed.
551
- * @property {string} dialogTitle - The title of the dialog.
552
- * @property {string} [dialogLabel] - An optional label for the dialog.
553
- * @property {React.ReactNode} children - The content to be displayed inside the dialog.
554
- * @property {() => void | Promise<void>} [onConfirm] - A callback function to be called when the user confirms the dialog.
555
- * @property {string} [confirmLabel] - The label for the confirm button.
556
- * @property {string} [cancelLabel] - The label for the cancel button.
557
- * @property {string} [className] - An optional CSS class name to be applied to the dialog.
558
- * @property {CSSProperties} [styles] - Optional inline styles to be applied to the dialog.
559
- */
560
- type DialogModalProps = React__default.ComponentProps<typeof FP$1> & React__default.ComponentProps<"dialog"> & {
561
- dialogTitle: string;
562
- dialogLabel?: string;
563
- children: React__default.ReactNode;
564
- showDialog?: boolean;
565
- isAlertDialog?: boolean;
566
- onClose?: () => void;
567
- onConfirm?: () => void | Promise<void>;
568
- confirmLabel?: string;
569
- cancelLabel?: string;
570
- className?: string;
571
- hideFooter?: boolean;
572
- styles?: CSSProperties;
573
- };
574
- /**
575
- * Renders a dialog modal component with customizable content and behavior.
576
- *
577
- * @param showDialog - Determines whether the dialog should be shown.
578
- * @param isAlertDialog - Determines whether the dialog should be displayed as an alert dialog.
579
- * @param onClose - A callback function to be called when the dialog is closed.
580
- * @param dialogTitle - The title of the dialog.
581
- * @param dialogLabel - An optional label for the dialog.
582
- * @param children - The content to be displayed inside the dialog.
583
- * @param onConfirm - A callback function to be called when the user confirms the dialog.
584
- * @param confirmLabel - The label for the confirm button.
585
- * @param cancelLabel - The label for the cancel button.
586
- * @param className - An optional CSS class name to be applied to the dialog.
587
- * @param styles - Optional inline styles to be applied to the dialog.
588
- */
589
- declare const Dialog: React__default.FC<DialogModalProps>;
590
-
591
- export { Article, Aside, FP as Box, Breadcrumb, Button, Caption, Card, Details, Dialog, FP, Field, Footer, Header, Img, Input, Landmarks, Link, List, Main, Modal, Nav, NavItem, NavItemProps, NavList, NavListProps, NavProps, Popover, Section, RenderTable as TBL, Table, Tag, TagProps, Tbody, Td, Text, TextProps, TextToSpeech, Textarea, TextareaProps, Thead, Title, TitleProps, Link as To, Tr };
185
+ export { Article, Aside, Caption, ComponentProps$1 as ComponentProps, Details, Footer, Header, ImageProps, Img, Landmarks, Main, Section, Table, Tag, TagProps, Tbody, Td, TextToSpeech, Thead, Tr };
package/libs/index.js CHANGED
@@ -1,11 +1,28 @@
1
- import { b as b$1 } from './chunk-GCGKYLDG.js';
2
- import { a, c } from './chunk-PWVRDQ3R.js';
3
- export { b as Icon } from './chunk-PWVRDQ3R.js';
4
- import * as P from 'react';
5
- import P__default, { useState, useEffect, useRef, useCallback } from 'react';
1
+ export { a as Breadcrumb } from './chunk-DKGJHKGW.js';
2
+ import { b } from './chunk-PPOOBUOS.js';
3
+ export { a as Textarea } from './chunk-PPOOBUOS.js';
4
+ export { a as Field } from './chunk-BIP2NY53.js';
5
+ export { a as Caption, i as TBL, f as Table, c as Tbody, e as Td, b as Thead, d as Tr } from './chunk-5M57K4SW.js';
6
+ export { a as Dialog } from './chunk-SXVZSWX6.js';
7
+ export { c as Nav, b as NavItem, a as NavList } from './chunk-EQ67LF46.js';
8
+ export { b as List } from './chunk-NHYXGV3L.js';
9
+ export { b as Popover } from './chunk-23ANBDCR.js';
10
+ export { a as Text, b as Title } from './chunk-LIQJ7ZZR.js';
11
+ import './chunk-HYBZBN4G.js';
12
+ import './chunk-GCGKYLDG.js';
13
+ import { b as b$1 } from './chunk-O6QZBB6G.js';
14
+ export { a as Icon } from './chunk-O6QZBB6G.js';
15
+ export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-BSPKFLO4.js';
16
+ export { a as Modal } from './chunk-YWOYVRFT.js';
17
+ export { a as Button } from './chunk-QCMV4VQZ.js';
18
+ export { a as Input } from './chunk-BHRQBJRY.js';
19
+ export { a as Box, a as FP } from './chunk-P7TTEYCD.js';
20
+ export { a as Link, b as To } from './chunk-5ZM4XL44.js';
21
+ import { a } from './chunk-NE6YXTMC.js';
22
+ import l, { useState, useEffect } from 'react';
6
23
 
7
- var M=({type:e="button",children:t,styles:r,disabled:o,classes:n,onPointerDown:a$1,onPointerOver:i,onPointerLeave:p,onClick:l,...m})=>{let u=c=>{o||a$1?.(c);};return P__default.createElement(a,{as:"button",type:e,onPointerOver:c=>{o||i?.(c);},onPointerDown:u,onPointerLeave:c=>{o||p?.(c);},onKeyDown:u,style:r,className:n,"aria-disabled":o,onClick:c=>{o||l?.(c);},...m},t)},F=M;M.displayName="Button";var me=({children:e,className:t,styles:r,as:o="h3",...n})=>P__default.createElement(a,{as:o,className:`card-title ${t||""}`,styles:r,...n},e);me.displayName="Title";var ce=({children:e,className:t,styles:r,...o})=>P__default.createElement(a,{as:"article",className:`card-content ${t||""}`,styles:r,...o},e);ce.displayName="Content";var de=({children:e,className:t,styles:r,...o})=>P__default.createElement(a,{as:"div",className:`card-footer ${t||""}`,styles:r,...o},e);de.displayName="Footer";var w=({elm:e="div",styles:t,children:r,classes:o="shadow",id:n,...a$1})=>P__default.createElement(a,{as:e,id:n,styles:t,className:o,"data-card":!0,...a$1},r);w.displayName="Card";w.Title=me;w.Content=ce;w.Footer=de;var fe=({label:e,labelFor:t,id:r,styles:o,classes:n,children:a$1,...i})=>P__default.createElement(a,{as:"div",id:r,styles:o,className:n,"data-style":"fields",...i},P__default.createElement("label",{htmlFor:t},e),a$1);fe.displayName="Field";var E=e=>P__default.createElement(P__default.Fragment,null,e),Ae=({id:e,children:t,headerBackground:r,styles:o,classes:n,...a$1})=>P__default.createElement(a,{as:"header",id:e,styles:o,className:n,...a$1},r,P__default.createElement(a,{as:"section"},t)),ze=({id:e,children:t,styles:r,classes:o,...n})=>P__default.createElement(a,{as:"main",id:e,styles:r,...n,className:o},t),We=({id:e,classes:t,children:r,styles:o={},...n})=>P__default.createElement(a,{as:"footer",id:e,className:t,styles:o,...n},P__default.createElement(a,{as:"section"},r||"Copyright \xA9 2022")),Xe=({id:e,children:t,styles:r={},classes:o,...n})=>P__default.createElement(a,{as:"aside",id:e,styles:r,className:o,...n},P__default.createElement(a,{as:"section"},t)),je=({id:e,children:t,styles:r,classes:o,...n})=>P__default.createElement(a,{as:"section",id:e,styles:r,className:o,...n},t),Je=({id:e,children:t,styles:r,classes:o,...n})=>P__default.createElement(a,{as:"article",id:e,styles:r,className:o,...n},t);E.displayName="Landmarks";E.Header=Ae;E.Main=ze;E.Footer=We;E.Aside=Xe;E.Section=je;E.Article=Je;var ye=({src:e="//",alt:t,width:r=480,height:o,styles:n,loading:a$1="lazy",placeholder:i=`https://via.placeholder.com/${r}?text=PLACEHOLDER`,fetchpriority:p="low",decoding:l="auto",imgLoaded:m,imgError:u,...g})=>P__default.createElement(a,{as:"img",src:e,alt:t,width:r,height:o||"auto",loading:a$1,style:n,onError:c=>{if(u){u?.(c);return}c.currentTarget.src!==i&&(c.currentTarget.src=i);},onLoad:c=>{m?.(c);},fetchPriority:p,decoding:l,...g});ye.displayName="Img";var qe=P__default.forwardRef(({as:e,styles:t,classes:r,children:o,defaultStyles:n,...a},i)=>{let p=e||"div",l={...n,...t};return P__default.createElement(p,{ref:i,style:l,className:r,...a},o)}),b=qe;var he=({type:e="text",name:t,value:r,placeholder:o,id:n,styles:a,classes:i,isDisabled:p,disabled:l,readonly:m,required:u,ref:g,onChange:x,onBlur:T,onPointerDown:c,...h})=>{let I=d=>{x&&!l&&x?.(d);},f=d=>{T&&!l&&T?.(d);},y=d=>{c&&!l&&(d.preventDefault(),c?.(d));};return P__default.createElement(b,{as:"input",id:n,type:e,placeholder:o||`${u?"*":""} ${e} input `,className:i,styles:a,onChange:I,onBlur:f,onKeyDown:y,value:r,name:t,ref:g,"aria-disabled":p,tabIndex:p?-1:void 0,"aria-readonly":m,"aria-required":u,required:u,readOnly:m,...h})};he.displayName="Input";var q=({href:e,target:t,rel:r,children:o,styles:n,prefetch:a$1,btnStyle:i,onPointerDown:p,...l})=>{let m=r;return t==="_blank"&&(m=`noopener noreferrer ${a$1?"prefetch":""}`),P__default.createElement(a,{as:"a",href:e,target:t,styles:n,rel:m,onPointerDown:g=>{p&&p?.(g);},"data-btn":i,prefetch:a$1,...l},o)},A=q;q.displayName="Link";var Ge=({type:e="li",id:t,styles:r,children:o,classes:n,...a$1})=>P.createElement(a,{id:t,as:e,className:n,...a$1,style:r},o),z=({children:e,classes:t,type:r="ul",variant:o,styles:n,role:a$1,...i})=>P.createElement(a,{as:r,"data-variant":o,className:t,style:n,role:a$1,...i},e),_=z;z.displayName="List";z.ListItem=Ge;var W=({id:e,children:t,classes:r,modalRef:o,openOnMount:n,...a$1})=>P__default.createElement(a,{as:"dialog",id:e,classes:r,ref:o,open:n,onClick:p=>{p.currentTarget===p.target&&p.currentTarget.close();},...a$1},t);P__default.memo(W);W.displayName="Dialog";var ge=({openChild:e,closeChild:t,modalHeader:r,modalFooter:o,children:n,showOpen:a=!1,...i})=>{let p=P__default.useRef(null),l=()=>{p.current&&(a?p.current.show():p.current.showModal());},m=()=>{p.current&&p.current.close();};return P__default.createElement(P__default.Fragment,null,P__default.createElement(W,{modalRef:p,openOnMount:a,...i},P__default.createElement("section",null,r,n,o??P__default.createElement("div",null,P__default.createElement(M,{type:"button",pointerDown:()=>{m();}},t||"Close")," "))),!a&&P__default.createElement(M,{type:"button",pointerDown:l},e||"Open Modal"))};ge.displayName="Modal";var Qe=({isBlock:e,children:t,...r})=>P__default.createElement(_,{type:"ul",...r,"data-list":`unstyled ${e?"block":""}`},t),Ze=({id:e,styles:t,classes:r,children:o,...n})=>P__default.createElement(_.ListItem,{type:"li",id:e,classes:r,styles:t,...n},o),Q=({children:e,...t})=>P__default.createElement(a,{as:"nav",...t},e);Q.displayName="Nav";Q.List=Qe;Q.Item=Ze;var et={display:"block",position:"absolute",background:"#000",border:"1px solid #010101",padding:"10px",color:"#fff",transition:"opacity .5s ease-in-out"},Z=({children:e,popoverTrigger:t,styles:r,...o})=>{let n=P__default.useRef(null),a=P__default.useRef(null),{isVisible:i,popoverPosition:p,handlePointerEvent:l,handlePointerLeave:m}=b$1(n,a),u={opacity:i?1:0,top:p.top,left:p.left,zIndex:999};return P__default.createElement(P__default.Fragment,null,P__default.createElement("div",{ref:n,onPointerEnter:l,onPointerLeave:m,...o},t),i&&P__default.createElement("div",{ref:a,style:{...u,...r}},e))};Z.displayName="Popover";Z.styles=et;var ee=({children:e,...t})=>P__default.createElement(b,{as:"caption",...t},e),te=({children:e,...t})=>P__default.createElement(b,{as:"thead",...t},e),X=({children:e,...t})=>P__default.createElement(b,{as:"tbody",...t},e),oe=({children:e,...t})=>P__default.createElement(b,{as:"tr",...t},e),tt=({children:e,...t})=>P__default.createElement(b,{as:"td",...t},e),re=({id:e,dataStyle:t,children:r,...o})=>P__default.createElement(b,{as:"section",id:e,...o,"data-style":"table-wrapper"},P__default.createElement("table",null,r));re.displayName="Table";ee.displayName="Caption";te.displayName="Thead";X.displayName="Tbody";oe.displayName="Tr";tt.displayName="Td";var xe=({tblBody:e,tblCaption:t,tblHead:r})=>P__default.createElement(re,null,t&&P__default.createElement(ee,null,t),P__default.createElement(te,null,P__default.createElement(oe,null,r)),P__default.createElement(X,null,e));xe.displayName="TBL";var st=({elm:e="span",role:t="note",children:r,styles:o,...n})=>P__default.createElement(a,{as:e,role:t,styles:o,...n},r);st.displayName="Tag";var at=({summary:e,icon:t,styles:r,classes:o,ariaLabel:n,name:a$1,open:i,onPointerDown:p,onToggle:l,children:m,ref:u,...g})=>{let x={...r},T=h=>{p&&p?.(h),p&&p?.(h);};return P__default.createElement(a,{as:"details",style:x,className:o,onToggle:h=>{l&&p?.(h);},ref:u,open:i,"aria-label":n||"Details dropdown",name:a$1,...g},P__default.createElement(a,{as:"summary",onPointerDown:T},t,e),P__default.createElement(a,{as:"section"},m))};at.displayName="Details";var Te=({elm:e="p",id:t,text:r,styles:o,classes:n,children:a$1,...i})=>P__default.createElement(a,{as:e,id:t,styles:o,className:n,...i},P__default.createElement(a,{as:e,id:t,styles:o,className:n,...i},a$1||r)),pt=({elm:e="h3",id:t,children:r,styles:o,classes:n,...a})=>P__default.createElement(Te,{as:e,id:t,styles:o,className:n,...a},r);Te.displayName="Text";pt.displayName="Title";var Ie=({id:e,classes:t,value:r,rows:o=5,cols:n=25,name:a$1,required:i,disabled:p,readOnly:l,onBlur:m,onPointerDown:u,onChange:g,ref:x,styles:T,placeholder:c,...h})=>P__default.createElement(a,{as:"textarea",id:e,name:a$1,rows:o,cols:n,styles:T,className:t,"data-style":"textarea",required:i,value:r,"aria-disabled":p,readOnly:l,onChange:d=>{g&&!p&&g?.(d);},onBlur:d=>{m&&!p&&m?.(d);},onPointerDown:d=>{u&&!p&&u?.(d);},ref:x,placeholder:c||`${i?"*":""} Message`,...h}),ve=Ie;Ie.displayName="Textarea";var Se=({type:e="h3",id:t,styles:r,ui:o,children:n,...a$1})=>P__default.createElement(a,{as:e,id:t,styles:r,"data-ui":o,...a$1},n),be=Se;Se.displayName="Heading";var ae=(e,t=15)=>e.length>t?`${e.slice(0,t)}...`:e;var j=({styles:e,id:t,classes:r,children:o,...n})=>P__default.createElement("li",{"data-list":"unstyled inline",...n},o),Ne=({children:e,...t})=>P__default.createElement(a,{as:"ol","data-list":"unstyled inline",...t},e),Re=({styles:e,id:t,classes:r,children:o,...n})=>P__default.createElement(a,{as:"nav",id:t,styles:e,className:r,...n},P__default.createElement(Ne,null,o)),J=({startRoute:e="Home",startRouteUrl:t="/",currentRoute:r,spacer:o=P__default.createElement(P__default.Fragment,null,"/"),routes:n,styles:a,id:i,classes:p,ariaLabelPrefix:l,truncateLength:m=15,linkProps:u,...g})=>{let[x,T]=P__default.useState("");P__default.useEffect(()=>{let y=r||window.location.pathname;y.length&&T(y);},[r]);let c=y=>{let d=n?.find(C=>C.path===y);return {path:d?.path||y,name:d?.name||y,url:d?.url||y}},h=x.split("/").filter(y=>y),I=h.length-1,f=P__default.useId();return x.length?P__default.createElement(Re,{id:i,...g,styles:a,className:p,"aria-label":l},P__default.createElement(j,{key:`${e}-${f}`},P__default.createElement(A,{href:t,...u},e)),P__default.createElement(P__default.Fragment,null,h.length?h.map((y,d)=>{let C=c(y),{name:N,url:we,path:Oe}=C;return d===I?P__default.createElement(P__default.Fragment,null,typeof h[I]=="string"&&h[I].length>3&&h[I]!==h[I-1]&&P__default.createElement(j,{key:`${Oe||d}-${f}`},P__default.createElement("span",{"aria-hidden":"true"},o),P__default.createElement("a",{href:"#","aria-current":"page","aria-label":N.length>m?N:void 0},ae(decodeURIComponent(N),m)))):P__default.createElement(j,{key:`${C?.name}-${f}`},P__default.createElement("span",{"aria-hidden":"true"},o),P__default.createElement("span",null,P__default.createElement(A,{href:we,"aria-label":N.length>m?N:void 0,...u},ae(decodeURIComponent(N),m))))}):null)):P__default.createElement(P__default.Fragment,null)};J.displayName="BreadCrumb";J.Nav=Re;J.List=Ne;J.Items=j;var Ue=e=>{let[t,r]=useState([]),[o,n]=useState(e),[a,i]=useState(!1),[p,l]=useState(!1),[m,u]=useState(null);return useEffect(()=>{let f=()=>{let y=window.speechSynthesis.getVoices();r(y);let d=y.find(C=>C.name==="Google US English");if(d)n(d);else {let C=y.find(N=>N.lang.startsWith("en-"));C&&n(C);}};return f(),window.speechSynthesis.onvoiceschanged=f,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(f,y={},d)=>{let C=new SpeechSynthesisUtterance(f);C.lang=y.lang??"en-US",C.pitch=y.pitch??1,C.rate=y.rate??1,C.voice=o??y.voice??null,C.onend=()=>{i(!1),l(!1),d&&d();},"speechSynthesis"in window?(window.speechSynthesis.speak(C),u(C),i(!0),l(!1)):console.error("Speech synthesis not supported");},pause:()=>{a&&!p&&(window.speechSynthesis.pause(),l(!0));},resume:()=>{a&&p&&(window.speechSynthesis.resume(),l(!1));},cancel:()=>{a&&(window.speechSynthesis.cancel(),i(!1),l(!1));},isSpeaking:a,isPaused:p,availableVoices:t,changeVoice:f=>{n(f);},currentVoice:o,getAvailableLanguages:()=>[...new Set(t.map(f=>f.lang))]}};var ct=({children:e,onClick:t})=>P__default.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),$=P__default.memo(ct),pe=({label:e,isSpeaking:t,isPaused:r,onSpeak:o,onPause:n,onResume:a$1,onCancel:i})=>P__default.createElement(a,{as:"div","data-tts":!0},e&&P__default.createElement("p",null,e),!t&&P__default.createElement($,{"aria-label":"Speak",onClick:o},P__default.createElement(c.PlaySolid,{size:16})),t&&!r&&P__default.createElement($,{"aria-label":"Pause",onClick:n},P__default.createElement(c.PauseSolid,{size:16})),r&&P__default.createElement($,{"aria-label":"Resume",onClick:a$1},P__default.createElement(c.ResumeSolid,{size:16})),P__default.createElement($,{"aria-label":"Stop",onClick:i},P__default.createElement(c.StopSolid,{size:16})));pe.displayName="TextToSpeechControls";pe.TTSButton=$;var Le=pe;var Ee=({initialText:e="",showTextInput:t=!1,voice:r,pitch:o=1,rate:n=1,language:a,label:i,onEnd:p})=>{let{speak:l,pause:m,resume:u,cancel:g,isSpeaking:x,isPaused:T,getAvailableLanguages:c,availableVoices:h}=Ue(),[I,f]=useState(e);console.log(c()),useEffect(()=>{f(e);},[e]);let y=()=>{I.trim()!==""&&l(I,{voice:r,pitch:o,rate:n},C);},d=N=>{f(N.target.value);},C=()=>{p&&p();};return P__default.createElement(P__default.Fragment,null,t&&P__default.createElement(ve,{value:I,onChange:d}),P__default.createElement(Le,{label:i,isSpeaking:x,isPaused:T,onSpeak:y,onPause:m,onResume:u,onCancel:g}))};Ee.displayName="TextToSpeechComponent";var ke=({dialogTitle:e,onClick:t,type:r="h3"})=>P__default.createElement(a,{as:"div",classes:"dialog-header"},P__default.createElement(be,{type:r,className:"dialog-title"},e||"Dialog"),P__default.createElement(F,{type:"button",onClick:()=>{t();},className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},P__default.createElement(c,null,P__default.createElement(c.Remove,{size:16})))),Me=P__default.memo(ke);ke.displayName="DialogHeader";var ft=({onClose:e,onConfirm:t,confirmLabel:r,cancelLabel:o})=>P__default.createElement(a,{as:"section",className:"dialog-footer"},o&&P__default.createElement(F,{type:"button",onClick:e,className:"dialog-button button-secondary","data-btn":"sm"},o),t&&P__default.createElement(F,{type:"button",onClick:t,className:"dialog-button button-primary","data-btn":"sm"},r)),De=ft;var He=(e,t)=>useCallback(o=>{let n=e.current?.getBoundingClientRect();n&&(o.clientY<n.top||o.clientY>n.bottom||o.clientX<n.left||o.clientX>n.right)&&t();},[e,t]);var Fe=({showDialog:e,isAlertDialog:t,onClose:r,dialogTitle:o,dialogLabel:n,children:a$1,onConfirm:i,confirmLabel:p="Confirm",cancelLabel:l="Cancel",className:m="",hideFooter:u,styles:g})=>{let x=useRef(null),[T,c]=P__default.useState(e);useEffect(()=>{c(e);},[e]),useEffect(()=>{let f=x.current;f&&(T?t?f.show():f.showModal():f.close());},[T,t]);let h=()=>{r&&r(),c(!1);},I=He(x,h);return P__default.createElement(a,{as:"dialog",role:t?"alertdialog":"dialog",ref:x,onClose:h,onClick:I,"aria-modal":T?"true":void 0,className:`dialog-modal ${m}`,"aria-label":n,style:g},P__default.createElement(Me,{dialogTitle:o,onClick:h}),P__default.createElement(a,{as:"section",className:`dialog-content ${m}`,onClick:f=>f.stopPropagation()},a$1,!u&&P__default.createElement(De,{onClose:h,onConfirm:i,confirmLabel:p,cancelLabel:l})))};P__default.memo(Fe);
24
+ var F=({src:e="//",alt:o,width:t=480,height:n,styles:s,loading:i="lazy",placeholder:c=`https://via.placeholder.com/${t}?text=PLACEHOLDER`,fetchpriority:a$1="low",decoding:m="auto",imgLoaded:x,imgError:S,...y})=>l.createElement(a,{as:"img",src:e,alt:o,width:t,height:n||"auto",loading:i,style:s,onError:h=>{if(S){S?.(h);return}h.currentTarget.src!==c&&(h.currentTarget.src=c);},onLoad:h=>{x?.(h);},fetchPriority:a$1,decoding:m,...y});F.displayName="Img";var z=e=>{let[o,t]=useState([]),[n,s]=useState(e),[i,c]=useState(!1),[a,m]=useState(!1),[x,S]=useState(null);return useEffect(()=>{let d=()=>{let f=window.speechSynthesis.getVoices();t(f);let g=f.find(p=>p.name==="Google US English");if(g)s(g);else {let p=f.find(E=>E.lang.startsWith("en-"));p&&s(p);}};return d(),window.speechSynthesis.onvoiceschanged=d,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(d,f={},g)=>{let p=new SpeechSynthesisUtterance(d);p.lang=f.lang??"en-US",p.pitch=f.pitch??1,p.rate=f.rate??1,p.voice=n??f.voice??null,p.onend=()=>{c(!1),m(!1),g&&g();},"speechSynthesis"in window?(window.speechSynthesis.speak(p),S(p),c(!0),m(!1)):console.error("Speech synthesis not supported");},pause:()=>{i&&!a&&(window.speechSynthesis.pause(),m(!0));},resume:()=>{i&&a&&(window.speechSynthesis.resume(),m(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),c(!1),m(!1));},isSpeaking:i,isPaused:a,availableVoices:o,changeVoice:d=>{s(d);},currentVoice:n,getAvailableLanguages:()=>[...new Set(o.map(d=>d.lang))]}};var oe=({children:e,onClick:o})=>l.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:o},e),U=l.memo(oe),N=({label:e,isSpeaking:o,isPaused:t,onSpeak:n,onPause:s,onResume:i,onCancel:c})=>l.createElement(a,{as:"div","data-tts":!0},e&&l.createElement("p",null,e),!o&&l.createElement(U,{"aria-label":"Speak",onClick:n},l.createElement(b$1.PlaySolid,{size:16})),o&&!t&&l.createElement(U,{"aria-label":"Pause",onClick:s},l.createElement(b$1.PauseSolid,{size:16})),t&&l.createElement(U,{"aria-label":"Resume",onClick:i},l.createElement(b$1.ResumeSolid,{size:16})),l.createElement(U,{"aria-label":"Stop",onClick:c},l.createElement(b$1.StopSolid,{size:16})));N.displayName="TextToSpeechControls";N.TTSButton=U;var A=N;var H=({initialText:e="",showTextInput:o=!1,voice:t,pitch:n=1,rate:s=1,language:i,label:c,onEnd:a})=>{let{speak:m,pause:x,resume:S,cancel:y,isSpeaking:P,isPaused:I,getAvailableLanguages:h,availableVoices:C}=z(),[k,d]=useState(e);console.log(h()),useEffect(()=>{d(e);},[e]);let f=()=>{k.trim()!==""&&m(k,{voice:t,pitch:n,rate:s},p);},g=E=>{d(E.target.value);},p=()=>{a&&a();};return l.createElement(l.Fragment,null,o&&l.createElement(b,{value:k,onChange:g}),l.createElement(A,{label:c,isSpeaking:P,isPaused:I,onSpeak:f,onPause:x,onResume:S,onCancel:y}))};H.displayName="TextToSpeechComponent";var T=e=>l.createElement(l.Fragment,null,e),ne=({id:e,children:o,headerBackground:t,styles:n,classes:s,...i})=>l.createElement(a,{as:"header",id:e,styles:n,className:s,...i},t,l.createElement(a,{as:"section"},o)),re=({id:e,children:o,styles:t,classes:n,...s})=>l.createElement(a,{as:"main",id:e,styles:t,...s,className:n},o),ae=({id:e,classes:o,children:t,styles:n={},...s})=>l.createElement(a,{as:"footer",id:e,className:o,styles:n,...s},l.createElement(a,{as:"section"},t||"Copyright \xA9 2022")),pe=({id:e,children:o,styles:t={},classes:n,...s})=>l.createElement(a,{as:"aside",id:e,styles:t,className:n,...s},l.createElement(a,{as:"section"},o)),ie=({id:e,children:o,styles:t,classes:n,...s})=>l.createElement(a,{as:"section",id:e,styles:t,className:n,...s},o),ce=({id:e,children:o,styles:t,classes:n,...s})=>l.createElement(a,{as:"article",id:e,styles:t,className:n,...s},o);T.displayName="Landmarks";T.Header=ne;T.Main=re;T.Footer=ae;T.Aside=pe;T.Section=ie;T.Article=ce;var me=({elm:e="span",role:o="note",children:t,styles:n,...s})=>l.createElement(a,{as:e,role:o,styles:n,...s},t);me.displayName="Tag";var de=({summary:e,icon:o,styles:t,classes:n,ariaLabel:s,name:i,open:c,onPointerDown:a$1,onToggle:m,children:x,ref:S,...y})=>{let P={...t},I=C=>{a$1&&a$1?.(C),a$1&&a$1?.(C);};return l.createElement(a,{as:"details",style:P,className:n,onToggle:C=>{m&&a$1?.(C);},ref:S,open:c,"aria-label":s||"Details dropdown",name:i,...y},l.createElement(a,{as:"summary",onPointerDown:I},o,e),l.createElement(a,{as:"section"},x))};de.displayName="Details";
8
25
 
9
- export { Je as Article, Xe as Aside, b as Box, J as Breadcrumb, M as Button, ee as Caption, w as Card, at as Details, Fe as Dialog, b as FP, fe as Field, We as Footer, Ae as Header, ye as Img, he as Input, E as Landmarks, q as Link, z as List, ze as Main, ge as Modal, Q as Nav, Ze as NavItem, Qe as NavList, Z as Popover, je as Section, xe as TBL, re as Table, st as Tag, X as Tbody, tt as Td, Te as Text, Ee as TextToSpeech, Ie as Textarea, te as Thead, pt as Title, A as To, oe as Tr };
26
+ export { ce as Article, pe as Aside, de as Details, ae as Footer, ne as Header, F as Img, T as Landmarks, re as Main, ie as Section, me as Tag, H as TextToSpeech };
10
27
  //# sourceMappingURL=out.js.map
11
28
  //# sourceMappingURL=index.js.map