@fpkit/acss 0.5.9 → 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 (250) 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 +65 -472
  183. package/libs/index.d.ts +65 -472
  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/badge/badge.tsx +11 -19
  197. package/src/components/breadcrumbs/README.mdx +1 -1
  198. package/src/components/breadcrumbs/breadcrumb.stories.tsx +2 -2
  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/README.md +80 -0
  205. package/src/components/cards/card.stories.tsx +2 -2
  206. package/src/components/details/README.mdx +1 -1
  207. package/src/components/details/details.scss +7 -0
  208. package/src/components/details/details.stories.tsx +2 -2
  209. package/src/components/details/details.tsx +11 -18
  210. package/src/components/dialog/README.mdx +1 -1
  211. package/src/components/dialog/dialog-modal.stories.tsx +2 -2
  212. package/src/components/dialog/dialog-modal.tsx +1 -1
  213. package/src/components/dialog/dialog.stories.tsx +2 -2
  214. package/src/components/dialog/views/README.mdx +1 -1
  215. package/src/components/dialog/views/dialog-header.stories.tsx +2 -2
  216. package/src/components/form/form.stories.tsx +2 -2
  217. package/src/components/form/input.stories.tsx +2 -2
  218. package/src/components/form/select.stories.tsx +2 -2
  219. package/src/components/fp.test.tsx +52 -50
  220. package/src/components/heading/heading.stories.tsx +2 -2
  221. package/src/components/heading/heading.tsx +12 -24
  222. package/src/components/icons/icon.stories.tsx +1 -1
  223. package/src/components/images/figure.stories.tsx +2 -2
  224. package/src/components/images/img.stories.tsx +2 -2
  225. package/src/components/layout/footer.stories.tsx +10 -19
  226. package/src/components/layout/landmarks.stories.tsx +22 -24
  227. package/src/components/layout/main.stories.tsx +21 -25
  228. package/src/components/link/link.stories.tsx +2 -2
  229. package/src/components/list/list.stories.tsx +2 -2
  230. package/src/components/modal.ts +1 -0
  231. package/src/components/nav/nav.stories.tsx +2 -2
  232. package/src/components/popover/popover.stories.tsx +2 -2
  233. package/src/components/progress/progress.stories.tsx +1 -1
  234. package/src/components/tag/tag.stories.tsx +2 -2
  235. package/src/components/text/text.stories.tsx +2 -2
  236. package/src/components/text/text.tsx +50 -49
  237. package/src/components/text-to-speech/TextToSpeech.stories.tsx +1 -1
  238. package/src/decorators/instructions.tsx +2 -1
  239. package/src/index.ts +43 -19
  240. package/src/patterns/page/page-header.stories.tsx +2 -2
  241. package/src/styles/details/details.css +8 -0
  242. package/src/styles/details/details.css.map +1 -1
  243. package/src/styles/index.css +8 -0
  244. package/src/styles/index.css.map +1 -1
  245. package/libs/chunk-PWVRDQ3R.js +0 -8
  246. package/libs/chunk-PWVRDQ3R.js.map +0 -1
  247. package/libs/chunk-SVS4MX3U.cjs +0 -31
  248. package/libs/chunk-SVS4MX3U.cjs.map +0 -1
  249. package/src/components/cards/README.mdx +0 -133
  250. package/src/components/text/README.mdx +0 -98
package/libs/index.d.cts 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.cjs';
2
+ export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.cjs';
3
+ export { default as Field, FieldProps } from './components/form/fields.cjs';
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.cjs';
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.cjs';
9
+ export { default as List, ListItemProps } from './components/list/list.cjs';
10
+ export { Modal, ModalProps } from './components/modal.cjs';
11
+ export { default as Popover, PopoverProps } from './components/popover/popover.cjs';
12
+ export { RenderTable as TBL, TableProps } from './components/tables/table.cjs';
13
+ export { Dialog } from './components/dialog/dialog.cjs';
14
+ export { default as Nav, NavItem, NavItemProps, NavList, NavListProps, NavProps } from './components/nav/nav.cjs';
15
+ export { default as Text, TextProps, Title } from './components/text/text.cjs';
16
+ export { TitleProps } from './components/heading/heading.cjs';
17
+ export { default as Textarea, TextareaProps } from './components/form/textarea.cjs';
18
+ import { C as ComponentProps$1 } from './component-props-a8a2f97e.js';
19
+ export { default as Breadcrumb } from './components/breadcrumbs/breadcrumb.cjs';
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,221 +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
- declare const Input: {
178
- ({ type, name, value, placeholder, id, styles, classes, isDisabled, disabled, readonly, required, ref, onChange, onBlur, onPointerDown, ...props }: InputProps): JSX.Element;
179
- displayName: string;
180
- };
181
-
182
- type LinkProps = {
183
- href?: string;
184
- target?: string;
185
- rel?: string;
186
- children: React__default.ReactNode;
187
- styles?: React__default.CSSProperties;
188
- prefetch?: boolean;
189
- btnStyle?: string;
190
- onPointerDown?: (event: React__default.PointerEvent<HTMLAnchorElement>) => void;
191
- } & React__default.ComponentProps<typeof FP$1> & React__default.ComponentProps<"a">;
192
- declare const Link: {
193
- ({ href, target, rel, children, styles, prefetch, btnStyle, onPointerDown, ...props }: LinkProps): React__default.JSX.Element;
194
- displayName: string;
195
- };
196
-
197
- type ListProps = {
198
- /** Type of list to render (default: 'ul') */
199
- type?: 'ul' | 'ol' | 'dl';
200
- /** variant of list to render (default: 'none') */
201
- variant?: string;
202
- } & React.ComponentProps<typeof FP$1>;
203
- type ListItemProps = {
204
- /** Type of list item to render (default: 'li') */
205
- type?: 'li' | 'dt' | 'dd';
206
- } & React.ComponentProps<typeof FP$1>;
207
- /**
208
- * List component renders a list element with provided props
209
- * @param children - Child elements to render inside the list
210
- * @param classes - CSS classes to apply
211
- * @param type - Type of list element (default: 'ul')
212
- * @param variant - Variant for styling purposes
213
- * @param styles - Inline styles object
214
- * @param role - ARIA role
215
- * @param props - Additional props to pass to underlying element
216
- */
217
- declare const List: {
218
- ({ children, classes, type, variant, styles, role, ...props }: ListProps): React.JSX.Element;
219
- displayName: string;
220
- ListItem: ({ type, id, styles, children, classes, ...props }: ListItemProps) => React.JSX.Element;
221
- };
222
-
223
- interface ModalProps extends ComponentProps$1 {
224
- /**
225
- * The child component/content for open button
226
- */
227
- openChild?: React__default.ReactNode;
228
- /**
229
- * The child component/content for close button
230
- */
231
- closeChild?: React__default.ReactNode;
232
- /**
233
- * The child component/content for modal header
234
- */
235
- modalHeader?: React__default.ReactNode;
236
- /**
237
- * The child component/content for modal footer
238
- */
239
- modalFooter?: React__default.ReactNode;
240
- /**
241
- * The child component/content for modal body
242
- */
243
- children: React__default.ReactNode;
244
- /**
245
- * Open modal on mount when set to true
246
- */
247
- showOpen?: boolean;
248
- }
249
- declare const Modal: {
250
- ({ openChild, closeChild, modalHeader, modalFooter, children, showOpen, ...props }: ModalProps): React__default.JSX.Element;
251
- displayName: string;
252
- };
253
-
254
- type NavListProps = React__default.ComponentProps<typeof List> & {
255
- isBlock?: boolean;
256
- };
257
- type NavItemProps = React__default.ComponentProps<typeof List.ListItem>;
258
- type NavProps = React__default.ComponentProps<typeof FP$1>;
259
- /**
260
- * Renders a NavList component.
261
- * @param {Object} props - The props for the component.
262
- * @param {ReactNode} props.children - The child elements.
263
- * @param {Object} props - Additional props to spread to the List component.
264
- * @returns {JSX.Element} The rendered NavList component.
265
- */
266
- declare const NavList: ({ isBlock, children, ...props }: NavListProps) => React__default.JSX.Element;
267
- /**
268
- * Renders a NavItem component.
269
- * @param {Object} props - The props for the component.
270
- * @param {string} [props.id] - The id for the component.
271
- * @param {Object} [props.styles] - The styles for the component.
272
- * @param {string} [props.classes] - The classes for the component.
273
- * @param {ReactNode} props.children - The child elements.
274
- * @param {boolean} [props.inline=true] - Whether the item should display inline.
275
- * @param {Object} props - Additional props to spread to the ListItem component.
276
- * @returns {JSX.Element} The rendered NavItem component.
277
- */
278
- declare const NavItem: ({ id, styles, classes, children, ...props }: NavItemProps) => React__default.JSX.Element;
279
- /**
280
- * Renders a Nav component.
281
- * @param {Object} props - The props for the component.
282
- * @param {ReactNode} props.children - The child elements.
283
- * @param {Object} props - Additional props to spread to the UI component.
284
- * @returns {JSX.Element} The rendered Nav component.
285
- */
286
- declare const Nav: {
287
- ({ children, ...props }: NavProps): React__default.JSX.Element;
288
- displayName: string;
289
- List: ({ isBlock, children, ...props }: NavListProps) => React__default.JSX.Element;
290
- Item: ({ id, styles, classes, children, ...props }: NavItemProps) => React__default.JSX.Element;
291
- };
292
-
293
- /**
294
- * Interface for props accepted by the Popover component
295
- *
296
- * @property {ReactNode} children - The content to show in the popover
297
- * @property {ReactNode} [content] - Optional alternative content for popover
298
- */
299
- type PopoverProps = {
300
- children: React__default.ReactNode;
301
- popoverTrigger: React__default.ReactNode;
302
- styles?: {};
303
- };
304
- /**
305
- * Popover component to display popover content.
306
- *
307
- * @param props - The props for the component
308
- * @param props.children - The content to show in the popover
309
- * @param props.popoverTrigger - The element that triggers the popover on hover
310
- *
311
- * @returns JSX.Element - The rendered JSX element for the Popover
312
- * @example - <Popover popoverTrigger={<button>Hover here</button>}>Popover content</Popover>
313
- *
314
- * The component uses the usePopover hook to handle popover visibility and positioning.
315
- *
316
- * It renders the triggerElement, and conditionally renders the popover content
317
- * positioned absolutely when visible.
318
- *
319
- * Inline styles handle visuals like background, border, padding, etc.
320
- *
321
- * Transforms and opacity animate the enter/exit transition of the popover.
322
- */
323
- declare const Popover: {
324
- ({ children, popoverTrigger, styles, ...props }: PopoverProps): JSX.Element;
325
- displayName: string;
326
- styles: React__default.CSSProperties;
327
- };
328
-
329
- interface TableProps extends ComponentProps$1 {
330
- tblHead: React__default.ReactNode;
331
- tblBody: React__default.ReactNode;
332
- tblCaption?: React__default.ReactNode;
333
- }
334
- /**
335
- * Render the table placing `caption`, `thead` and `tbody` in the correct order
336
- * caption is optional
337
- */
338
- declare const RenderTable: {
339
- ({ tblBody, tblCaption, tblHead }: TableProps): React__default.JSX.Element;
340
- displayName: string;
341
- };
342
-
343
120
  type TagProps = {
344
121
  /** HTML element to display the badge as span or p */
345
122
  elm?: 'span' | 'p';
346
123
  /** Aria role for the component - conditional */
347
124
  role: 'note' | 'status';
348
- } & React__default.ComponentProps<typeof FP$1>;
125
+ } & React__default.ComponentProps<typeof FP>;
349
126
  declare const Tag: {
350
127
  ({ elm, role, children, styles, ...props }: TagProps): React__default.JSX.Element;
351
128
  displayName: string;
@@ -386,207 +163,23 @@ type DetailsProps = {
386
163
  * The aria-label element for accessibility.
387
164
  */
388
165
  ariaLabel: string;
389
- } & React__default.ComponentProps<"details"> & Partial<React__default.ComponentProps<typeof FP$1>>;
390
- /**
391
- * A React component that renders a details element with a summary and content.
392
- *
393
- * @param summary - The summary text shown for the details.
394
- * @param ariaLabel - The aria-label element for accessibility.
395
- * @param icon - An optional icon to display in the summary.
396
- * @param styles - Optional styles to apply to the details element.
397
- * @param classes - Optional CSS classes to apply to the details element.
398
- * @param name - An optional name for the details element.
399
- * @param open - Whether the details element should be initially open.
400
- * @param onPointerDown - A callback function to be called when the summary is clicked.
401
- * @param onToggle - A callback function to be called when the details element is toggled.
402
- * @param children - The content to be displayed inside the details element.
403
- * @param ref - A ref to the details element.
404
- * @param props - Additional props to be passed to the details element.
405
- * @example
406
- * <Details summary="Details" ariaLabel="Details">
407
- * <p>Details content</p>
408
- * </Details>
166
+ } & React__default.ComponentProps<"details"> & Partial<React__default.ComponentProps<typeof FP>>;
167
+ /**3
168
+ * Details component props interface.
169
+ *
170
+ * @param {React.CSSProperties} [styles] - CSS styles object.
171
+ * @param {string} [classes] - Classnames string.
172
+ * @param {boolean} [open] - Whether the details is open.
173
+ * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onToggle] - onToggle callback.
174
+ * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onPointerDown] - onPointerDown callback.
175
+ * @param {ReactNode} children - The content inside the details.
176
+ * @param {string} [ariaLabel] - aria-label for accessibility.
177
+ * @param {React.Ref<any>} [ref] - Ref object.
178
+ * @param {Object} props - Other props.
409
179
  */
410
180
  declare const Details: {
411
181
  ({ summary, icon, styles, classes, ariaLabel, name, open, onPointerDown, onToggle, children, ref, ...props }: DetailsProps): React__default.JSX.Element;
412
182
  displayName: string;
413
183
  };
414
184
 
415
- type InheritedProps = React__default.ComponentProps<typeof FP$1>;
416
- 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";
417
- type TextProps = {
418
- /**
419
- * Pass a text element
420
- */
421
- elm?: TextElements;
422
- /** Pass a text element or string */
423
- text?: string;
424
- } & InheritedProps;
425
- declare const Text: {
426
- ({ elm, id, text, styles, classes, children, ...props }: TextProps): React__default.JSX.Element;
427
- displayName: string;
428
- };
429
- type TitleProps$1 = {
430
- /**
431
- * HTML headings
432
- */
433
- elm?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
434
- } & InheritedProps;
435
- declare const Title: {
436
- ({ elm, id, children, styles, classes, ...props }: TitleProps$1): React__default.JSX.Element;
437
- displayName: string;
438
- };
439
-
440
- type TextareaProps = React__default.ComponentProps<'textarea'> & React__default.ComponentProps<typeof FP$1>;
441
- /**
442
- * Textarea component.
443
- *
444
- * @param value - The value of the textarea.
445
- * @param rows - The number of rows.
446
- * @param cols - The number of columns.
447
- * @param id - The id of the textarea.
448
- * @param name - The name of the textarea.
449
- * @param required - Whether the textarea is required.
450
- * @param disabled - Whether the textarea is disabled.
451
- * @param readOnly - Whether the textarea is read only.
452
- * @param onBlur - Blur event handler.
453
- * @param onPointerDown - Pointer down event handler.
454
- * @param onChange - Change event handler.
455
- * @param ref - Ref for the textarea.
456
- * @param styles - Styles object for the textarea.
457
- * @param textareaRef - Ref specifically for the textarea element.
458
- * @param props - Other props.
459
- */
460
- declare const Textarea: {
461
- ({ id, classes, value, rows, cols, name, required, disabled, readOnly, onBlur, onPointerDown, onChange, ref, styles, placeholder, ...props }: TextareaProps): React__default.JSX.Element;
462
- displayName: string;
463
- };
464
-
465
- type TitleProps = {
466
- children: React__default.ReactNode;
467
- type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
468
- ui?: string;
469
- } & React__default.ComponentProps<typeof FP$1>;
470
-
471
- type customRoute = {
472
- /** The path or id for routing */
473
- path?: string;
474
- /** The display name */
475
- name: string;
476
- /** The url if linking out */
477
- url?: string;
478
- };
479
- type BreadcrumbProps = {
480
- /** Array of custom route objects */
481
- routes?: customRoute[];
482
- /** Starting route node */
483
- startRoute?: React__default.ReactNode;
484
- startRouteUrl?: string;
485
- /** Spacer node between routes */
486
- spacer?: React__default.ReactNode;
487
- /** String representing current route */
488
- currentRoute?: string;
489
- /** Prefix breadcrumb aria-label - "prefix breadcrumb" */
490
- ariaLabelPrefix?: string;
491
- /** Truncate breadcrumb text after this length */
492
- truncateLength?: number;
493
- /** Link props for breadcrumb links */
494
- linkProps?: React__default.ComponentProps<typeof Link>;
495
- } & React__default.ComponentProps<typeof FP$1>;
496
- /**
497
- * Navigation component for breadcrumbs.
498
- *
499
- * @param props - Props for the navigation component.
500
- * @param props.startRoute - Starting route node. Default 'Home'.
501
- * @param props.currentRoute - String representing current route.
502
- * @param props.spacer - Spacer node between routes. Default '&#47;'.
503
- * @param props.routes - Array of custom route objects.
504
- * @param props.styles - Styles object for the nav.
505
- * @param props.id - Id for the nav.
506
- * @param props.classes - Class names for the nav.
507
- * @param props.children - Child components.
508
- */
509
- declare const Breadcrumb: {
510
- ({ startRoute, startRouteUrl, currentRoute, spacer, routes, styles, id, classes, ariaLabelPrefix, truncateLength, linkProps, ...props }: BreadcrumbProps): React__default.JSX.Element;
511
- displayName: string;
512
- Nav: ({ styles, id, classes, children, ...props }: React__default.ComponentProps<typeof FP$1>) => React__default.JSX.Element;
513
- List: ({ children, ...props }: React__default.ComponentProps<typeof FP$1>) => React__default.JSX.Element;
514
- Items: ({ styles, id, classes, children, ...props }: React__default.ComponentProps<typeof FP$1>) => React__default.JSX.Element;
515
- };
516
-
517
- /**
518
- * Props for the TextToSpeechComponent.
519
- * @interface TextToSpeechComponentProps
520
- */
521
- interface TextToSpeechComponentProps {
522
- /** Initial text to be spoken. Defaults to an empty string. */
523
- initialText?: string;
524
- /** Whether to show the text input field. Defaults to true. */
525
- showTextInput?: boolean;
526
- /** The voice to be used for speech synthesis. */
527
- voice?: SpeechSynthesisVoice | undefined;
528
- /** The pitch of the voice. Defaults to 1. */
529
- pitch?: number;
530
- /** The rate of speech. Defaults to 1. */
531
- rate?: number;
532
- /** The language to be used for speech synthesis. */
533
- language?: string;
534
- /** Player label */
535
- label?: string | React__default.ReactNode;
536
- /** Callback function to be called when speech ends. */
537
- onEnd?: () => void;
538
- }
539
- /**
540
- * A component that converts text to speech using the Web Speech API.
541
- * @param {TextToSpeechComponentProps} props - The props for the component.
542
- * @returns {JSX.Element} The rendered TextToSpeechComponent.
543
- */
544
- declare const TextToSpeech: React__default.FC<TextToSpeechComponentProps>;
545
-
546
- /**
547
- * Defines the props for the Dialog component.
548
- *
549
- * @property {boolean} [showDialog] - Determines whether the dialog should be shown.
550
- * @property {boolean} [isAlertDialog] - Determines whether the dialog should be displayed as an alert dialog.
551
- * @property {() => void} [onClose] - A callback function to be called when the dialog is closed.
552
- * @property {string} dialogTitle - The title of the dialog.
553
- * @property {string} [dialogLabel] - An optional label for the dialog.
554
- * @property {React.ReactNode} children - The content to be displayed inside the dialog.
555
- * @property {() => void | Promise<void>} [onConfirm] - A callback function to be called when the user confirms the dialog.
556
- * @property {string} [confirmLabel] - The label for the confirm button.
557
- * @property {string} [cancelLabel] - The label for the cancel button.
558
- * @property {string} [className] - An optional CSS class name to be applied to the dialog.
559
- * @property {CSSProperties} [styles] - Optional inline styles to be applied to the dialog.
560
- */
561
- type DialogModalProps = React__default.ComponentProps<typeof FP$1> & React__default.ComponentProps<"dialog"> & {
562
- dialogTitle: string;
563
- dialogLabel?: string;
564
- children: React__default.ReactNode;
565
- showDialog?: boolean;
566
- isAlertDialog?: boolean;
567
- onClose?: () => void;
568
- onConfirm?: () => void | Promise<void>;
569
- confirmLabel?: string;
570
- cancelLabel?: string;
571
- className?: string;
572
- hideFooter?: boolean;
573
- styles?: CSSProperties;
574
- };
575
- /**
576
- * Renders a dialog modal component with customizable content and behavior.
577
- *
578
- * @param showDialog - Determines whether the dialog should be shown.
579
- * @param isAlertDialog - Determines whether the dialog should be displayed as an alert dialog.
580
- * @param onClose - A callback function to be called when the dialog is closed.
581
- * @param dialogTitle - The title of the dialog.
582
- * @param dialogLabel - An optional label for the dialog.
583
- * @param children - The content to be displayed inside the dialog.
584
- * @param onConfirm - A callback function to be called when the user confirms the dialog.
585
- * @param confirmLabel - The label for the confirm button.
586
- * @param cancelLabel - The label for the cancel button.
587
- * @param className - An optional CSS class name to be applied to the dialog.
588
- * @param styles - Optional inline styles to be applied to the dialog.
589
- */
590
- declare const Dialog: React__default.FC<DialogModalProps>;
591
-
592
- 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 };