@pithyjs/ui-kit 0.1.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (417) hide show
  1. package/LICENSE +21 -0
  2. package/dist/animation/animate-in.d.ts +35 -0
  3. package/dist/animation/animate-in.d.ts.map +1 -0
  4. package/dist/animation/animate-in.js +71 -0
  5. package/dist/animation/animate-in.js.map +1 -0
  6. package/dist/atoms/actions/_icon-control.scss +53 -0
  7. package/dist/atoms/actions/button/Button.d.ts +93 -0
  8. package/dist/atoms/actions/button/Button.d.ts.map +1 -0
  9. package/dist/atoms/actions/button/Button.js +332 -0
  10. package/dist/atoms/actions/button/Button.js.map +1 -0
  11. package/dist/atoms/actions/button/button.scss +342 -0
  12. package/dist/atoms/actions/icon-button/IconButton.d.ts +47 -0
  13. package/dist/atoms/actions/icon-button/IconButton.d.ts.map +1 -0
  14. package/dist/atoms/actions/icon-button/IconButton.js +81 -0
  15. package/dist/atoms/actions/icon-button/IconButton.js.map +1 -0
  16. package/dist/atoms/actions/icon-button/icon-button.scss +20 -0
  17. package/dist/atoms/actions/icon-group/IconGroup.d.ts +60 -0
  18. package/dist/atoms/actions/icon-group/IconGroup.d.ts.map +1 -0
  19. package/dist/atoms/actions/icon-group/IconGroup.js +191 -0
  20. package/dist/atoms/actions/icon-group/IconGroup.js.map +1 -0
  21. package/dist/atoms/actions/icon-group/icon-group.scss +36 -0
  22. package/dist/atoms/actions/segmented-control/SegmentedControl.d.ts +49 -0
  23. package/dist/atoms/actions/segmented-control/SegmentedControl.d.ts.map +1 -0
  24. package/dist/atoms/actions/segmented-control/SegmentedControl.js +107 -0
  25. package/dist/atoms/actions/segmented-control/SegmentedControl.js.map +1 -0
  26. package/dist/atoms/actions/segmented-control/segmented-control.scss +90 -0
  27. package/dist/atoms/content/_mixins.scss +79 -0
  28. package/dist/atoms/content/action-tile/ActionTile.d.ts +27 -0
  29. package/dist/atoms/content/action-tile/ActionTile.d.ts.map +1 -0
  30. package/dist/atoms/content/action-tile/ActionTile.js +98 -0
  31. package/dist/atoms/content/action-tile/ActionTile.js.map +1 -0
  32. package/dist/atoms/content/action-tile/action-tile.scss +150 -0
  33. package/dist/atoms/content/badge/Badge.d.ts +57 -0
  34. package/dist/atoms/content/badge/Badge.d.ts.map +1 -0
  35. package/dist/atoms/content/badge/Badge.js +177 -0
  36. package/dist/atoms/content/badge/Badge.js.map +1 -0
  37. package/dist/atoms/content/badge/badge.scss +198 -0
  38. package/dist/atoms/content/heading/Heading.d.ts +53 -0
  39. package/dist/atoms/content/heading/Heading.d.ts.map +1 -0
  40. package/dist/atoms/content/heading/Heading.js +142 -0
  41. package/dist/atoms/content/heading/Heading.js.map +1 -0
  42. package/dist/atoms/content/heading/heading.scss +43 -0
  43. package/dist/atoms/content/icon/Icon.d.ts +68 -0
  44. package/dist/atoms/content/icon/Icon.d.ts.map +1 -0
  45. package/dist/atoms/content/icon/Icon.js +137 -0
  46. package/dist/atoms/content/icon/Icon.js.map +1 -0
  47. package/dist/atoms/content/icon/icon.scss +66 -0
  48. package/dist/atoms/content/icon/resolveIconSvg.d.ts +21 -0
  49. package/dist/atoms/content/icon/resolveIconSvg.d.ts.map +1 -0
  50. package/dist/atoms/content/icon/resolveIconSvg.js +73 -0
  51. package/dist/atoms/content/icon/resolveIconSvg.js.map +1 -0
  52. package/dist/atoms/content/image/Image.d.ts +81 -0
  53. package/dist/atoms/content/image/Image.d.ts.map +1 -0
  54. package/dist/atoms/content/image/Image.js +293 -0
  55. package/dist/atoms/content/image/Image.js.map +1 -0
  56. package/dist/atoms/content/image/image.scss +77 -0
  57. package/dist/atoms/content/text/Text.d.ts +58 -0
  58. package/dist/atoms/content/text/Text.d.ts.map +1 -0
  59. package/dist/atoms/content/text/Text.js +158 -0
  60. package/dist/atoms/content/text/Text.js.map +1 -0
  61. package/dist/atoms/content/text/text.scss +98 -0
  62. package/dist/atoms/content/tile/Tile.d.ts +66 -0
  63. package/dist/atoms/content/tile/Tile.d.ts.map +1 -0
  64. package/dist/atoms/content/tile/Tile.js +125 -0
  65. package/dist/atoms/content/tile/Tile.js.map +1 -0
  66. package/dist/atoms/content/tile/tile.scss +122 -0
  67. package/dist/atoms/feedback/tooltip/Tooltip.d.ts +44 -0
  68. package/dist/atoms/feedback/tooltip/Tooltip.d.ts.map +1 -0
  69. package/dist/atoms/feedback/tooltip/Tooltip.js +121 -0
  70. package/dist/atoms/feedback/tooltip/Tooltip.js.map +1 -0
  71. package/dist/atoms/feedback/tooltip/tooltip.scss +96 -0
  72. package/dist/atoms/forms/checkbox/Checkbox.d.ts +49 -0
  73. package/dist/atoms/forms/checkbox/Checkbox.d.ts.map +1 -0
  74. package/dist/atoms/forms/checkbox/Checkbox.js +269 -0
  75. package/dist/atoms/forms/checkbox/Checkbox.js.map +1 -0
  76. package/dist/atoms/forms/checkbox/CheckboxGroup.d.ts +50 -0
  77. package/dist/atoms/forms/checkbox/CheckboxGroup.d.ts.map +1 -0
  78. package/dist/atoms/forms/checkbox/CheckboxGroup.js +132 -0
  79. package/dist/atoms/forms/checkbox/CheckboxGroup.js.map +1 -0
  80. package/dist/atoms/forms/checkbox/checkbox.scss +506 -0
  81. package/dist/atoms/forms/file-picker/FilePicker.d.ts +23 -0
  82. package/dist/atoms/forms/file-picker/FilePicker.d.ts.map +1 -0
  83. package/dist/atoms/forms/file-picker/FilePicker.js +103 -0
  84. package/dist/atoms/forms/file-picker/FilePicker.js.map +1 -0
  85. package/dist/atoms/forms/file-picker/file-picker.scss +84 -0
  86. package/dist/atoms/forms/form-field/FormField.d.ts +39 -0
  87. package/dist/atoms/forms/form-field/FormField.d.ts.map +1 -0
  88. package/dist/atoms/forms/form-field/FormField.js +139 -0
  89. package/dist/atoms/forms/form-field/FormField.js.map +1 -0
  90. package/dist/atoms/forms/form-field/form-field.scss +46 -0
  91. package/dist/atoms/forms/input/Input.d.ts +81 -0
  92. package/dist/atoms/forms/input/Input.d.ts.map +1 -0
  93. package/dist/atoms/forms/input/Input.js +417 -0
  94. package/dist/atoms/forms/input/Input.js.map +1 -0
  95. package/dist/atoms/forms/input/input.scss +547 -0
  96. package/dist/atoms/forms/radio/Radio.d.ts +54 -0
  97. package/dist/atoms/forms/radio/Radio.d.ts.map +1 -0
  98. package/dist/atoms/forms/radio/Radio.js +278 -0
  99. package/dist/atoms/forms/radio/Radio.js.map +1 -0
  100. package/dist/atoms/forms/radio/RadioGroup.d.ts +54 -0
  101. package/dist/atoms/forms/radio/RadioGroup.d.ts.map +1 -0
  102. package/dist/atoms/forms/radio/RadioGroup.js +137 -0
  103. package/dist/atoms/forms/radio/RadioGroup.js.map +1 -0
  104. package/dist/atoms/forms/radio/radio.scss +459 -0
  105. package/dist/atoms/forms/select/Select.d.ts +57 -0
  106. package/dist/atoms/forms/select/Select.d.ts.map +1 -0
  107. package/dist/atoms/forms/select/Select.js +457 -0
  108. package/dist/atoms/forms/select/Select.js.map +1 -0
  109. package/dist/atoms/forms/select/select-dropdown.d.ts +49 -0
  110. package/dist/atoms/forms/select/select-dropdown.d.ts.map +1 -0
  111. package/dist/atoms/forms/select/select-dropdown.js +305 -0
  112. package/dist/atoms/forms/select/select-dropdown.js.map +1 -0
  113. package/dist/atoms/forms/select/select-keyboard.d.ts +14 -0
  114. package/dist/atoms/forms/select/select-keyboard.d.ts.map +1 -0
  115. package/dist/atoms/forms/select/select-keyboard.js +182 -0
  116. package/dist/atoms/forms/select/select-keyboard.js.map +1 -0
  117. package/dist/atoms/forms/select/select.scss +630 -0
  118. package/dist/atoms/forms/textarea/Textarea.d.ts +69 -0
  119. package/dist/atoms/forms/textarea/Textarea.d.ts.map +1 -0
  120. package/dist/atoms/forms/textarea/Textarea.js +394 -0
  121. package/dist/atoms/forms/textarea/Textarea.js.map +1 -0
  122. package/dist/atoms/forms/textarea/textarea.scss +486 -0
  123. package/dist/atoms/forms/toggle/Toggle.d.ts +47 -0
  124. package/dist/atoms/forms/toggle/Toggle.d.ts.map +1 -0
  125. package/dist/atoms/forms/toggle/Toggle.js +243 -0
  126. package/dist/atoms/forms/toggle/Toggle.js.map +1 -0
  127. package/dist/atoms/forms/toggle/toggle.scss +561 -0
  128. package/dist/compiler.d.ts +7 -0
  129. package/dist/compiler.d.ts.map +1 -0
  130. package/dist/compiler.js +18 -0
  131. package/dist/compiler.js.map +1 -0
  132. package/dist/icons/index.d.ts +14 -0
  133. package/dist/icons/index.d.ts.map +1 -0
  134. package/dist/icons/index.js +14 -0
  135. package/dist/icons/index.js.map +1 -0
  136. package/dist/icons/registry.d.ts +65 -0
  137. package/dist/icons/registry.d.ts.map +1 -0
  138. package/dist/icons/registry.js +126 -0
  139. package/dist/icons/registry.js.map +1 -0
  140. package/dist/index.d.ts +55 -0
  141. package/dist/index.d.ts.map +1 -0
  142. package/dist/index.js +64 -0
  143. package/dist/index.js.map +1 -0
  144. package/dist/layout/Grid.d.ts +78 -0
  145. package/dist/layout/Grid.d.ts.map +1 -0
  146. package/dist/layout/Grid.js +272 -0
  147. package/dist/layout/Grid.js.map +1 -0
  148. package/dist/layout/GridItem.d.ts +52 -0
  149. package/dist/layout/GridItem.d.ts.map +1 -0
  150. package/dist/layout/GridItem.js +99 -0
  151. package/dist/layout/GridItem.js.map +1 -0
  152. package/dist/layout/PageSection.d.ts +43 -0
  153. package/dist/layout/PageSection.d.ts.map +1 -0
  154. package/dist/layout/PageSection.js +75 -0
  155. package/dist/layout/PageSection.js.map +1 -0
  156. package/dist/layout/SmartContainer.d.ts +66 -0
  157. package/dist/layout/SmartContainer.d.ts.map +1 -0
  158. package/dist/layout/SmartContainer.js +194 -0
  159. package/dist/layout/SmartContainer.js.map +1 -0
  160. package/dist/layout/Stack.d.ts +65 -0
  161. package/dist/layout/Stack.d.ts.map +1 -0
  162. package/dist/layout/Stack.js +114 -0
  163. package/dist/layout/Stack.js.map +1 -0
  164. package/dist/organisms/content/Card.d.ts +93 -0
  165. package/dist/organisms/content/Card.d.ts.map +1 -0
  166. package/dist/organisms/content/Card.js +353 -0
  167. package/dist/organisms/content/Card.js.map +1 -0
  168. package/dist/organisms/content/_card-horizontal.scss +88 -0
  169. package/dist/organisms/content/_card-link.scss +49 -0
  170. package/dist/organisms/content/_card-overlay.scss +91 -0
  171. package/dist/organisms/content/_card-root.scss +99 -0
  172. package/dist/organisms/content/_card-slots.scss +143 -0
  173. package/dist/organisms/content/_card-states.scss +166 -0
  174. package/dist/organisms/content/_card-tokens.scss +22 -0
  175. package/dist/organisms/content/_card-variants.scss +31 -0
  176. package/dist/organisms/content/card.scss +15 -0
  177. package/dist/organisms/feedback/Modal.d.ts +39 -0
  178. package/dist/organisms/feedback/Modal.d.ts.map +1 -0
  179. package/dist/organisms/feedback/Modal.js +120 -0
  180. package/dist/organisms/feedback/Modal.js.map +1 -0
  181. package/dist/organisms/feedback/Popover.d.ts +30 -0
  182. package/dist/organisms/feedback/Popover.d.ts.map +1 -0
  183. package/dist/organisms/feedback/Popover.js +151 -0
  184. package/dist/organisms/feedback/Popover.js.map +1 -0
  185. package/dist/organisms/feedback/modal.scss +66 -0
  186. package/dist/organisms/feedback/popover.scss +27 -0
  187. package/dist/organisms/forms/DynamicForm.d.ts +118 -0
  188. package/dist/organisms/forms/DynamicForm.d.ts.map +1 -0
  189. package/dist/organisms/forms/DynamicForm.js +546 -0
  190. package/dist/organisms/forms/DynamicForm.js.map +1 -0
  191. package/dist/organisms/forms/Form.d.ts +62 -0
  192. package/dist/organisms/forms/Form.d.ts.map +1 -0
  193. package/dist/organisms/forms/Form.js +131 -0
  194. package/dist/organisms/forms/Form.js.map +1 -0
  195. package/dist/organisms/forms/dynamic-form.scss +91 -0
  196. package/dist/organisms/forms/form-helpers.d.ts +21 -0
  197. package/dist/organisms/forms/form-helpers.d.ts.map +1 -0
  198. package/dist/organisms/forms/form-helpers.js +57 -0
  199. package/dist/organisms/forms/form-helpers.js.map +1 -0
  200. package/dist/organisms/forms/form-state.d.ts +66 -0
  201. package/dist/organisms/forms/form-state.d.ts.map +1 -0
  202. package/dist/organisms/forms/form-state.js +156 -0
  203. package/dist/organisms/forms/form-state.js.map +1 -0
  204. package/dist/organisms/forms/form.scss +23 -0
  205. package/dist/organisms/forms/validation.d.ts +32 -0
  206. package/dist/organisms/forms/validation.d.ts.map +1 -0
  207. package/dist/organisms/forms/validation.js +118 -0
  208. package/dist/organisms/forms/validation.js.map +1 -0
  209. package/dist/organisms/navigation/Navbar.d.ts +66 -0
  210. package/dist/organisms/navigation/Navbar.d.ts.map +1 -0
  211. package/dist/organisms/navigation/Navbar.js +881 -0
  212. package/dist/organisms/navigation/Navbar.js.map +1 -0
  213. package/dist/organisms/navigation/_navbar-announcement.scss +62 -0
  214. package/dist/organisms/navigation/_navbar-brand.scss +69 -0
  215. package/dist/organisms/navigation/_navbar-container.scss +37 -0
  216. package/dist/organisms/navigation/_navbar-desktop.scss +116 -0
  217. package/dist/organisms/navigation/_navbar-drawer.scss +97 -0
  218. package/dist/organisms/navigation/_navbar-links.scss +143 -0
  219. package/dist/organisms/navigation/_navbar-menu.scss +193 -0
  220. package/dist/organisms/navigation/_navbar-root.scss +107 -0
  221. package/dist/organisms/navigation/_navbar-search.scss +83 -0
  222. package/dist/organisms/navigation/_navbar-toggle.scss +91 -0
  223. package/dist/organisms/navigation/_navbar-tokens.scss +15 -0
  224. package/dist/organisms/navigation/navbar.scss +17 -0
  225. package/dist/registry/categories.d.ts +6 -0
  226. package/dist/registry/categories.d.ts.map +1 -0
  227. package/dist/registry/categories.js +13 -0
  228. package/dist/registry/categories.js.map +1 -0
  229. package/dist/registry/components.d.ts +5 -0
  230. package/dist/registry/components.d.ts.map +1 -0
  231. package/dist/registry/components.js +95 -0
  232. package/dist/registry/components.js.map +1 -0
  233. package/dist/registry/index.d.ts +59 -0
  234. package/dist/registry/index.d.ts.map +1 -0
  235. package/dist/registry/index.js +79 -0
  236. package/dist/registry/index.js.map +1 -0
  237. package/dist/registry/levels.d.ts +6 -0
  238. package/dist/registry/levels.d.ts.map +1 -0
  239. package/dist/registry/levels.js +9 -0
  240. package/dist/registry/levels.js.map +1 -0
  241. package/dist/registry/registry-meta-types.d.ts +67 -0
  242. package/dist/registry/registry-meta-types.d.ts.map +1 -0
  243. package/dist/registry/registry-meta-types.js +6 -0
  244. package/dist/registry/registry-meta-types.js.map +1 -0
  245. package/dist/registry/registry-meta.d.ts +5 -0
  246. package/dist/registry/registry-meta.d.ts.map +1 -0
  247. package/dist/registry/registry-meta.js +731 -0
  248. package/dist/registry/registry-meta.js.map +1 -0
  249. package/dist/registry/renderer.d.ts +69 -0
  250. package/dist/registry/renderer.d.ts.map +1 -0
  251. package/dist/registry/renderer.js +311 -0
  252. package/dist/registry/renderer.js.map +1 -0
  253. package/dist/sections/_section-base.scss +204 -0
  254. package/dist/sections/contact/ContactSection.d.ts +55 -0
  255. package/dist/sections/contact/ContactSection.d.ts.map +1 -0
  256. package/dist/sections/contact/ContactSection.js +142 -0
  257. package/dist/sections/contact/ContactSection.js.map +1 -0
  258. package/dist/sections/contact/contact-section.scss +142 -0
  259. package/dist/sections/cta/CTASection.d.ts +52 -0
  260. package/dist/sections/cta/CTASection.d.ts.map +1 -0
  261. package/dist/sections/cta/CTASection.js +130 -0
  262. package/dist/sections/cta/CTASection.js.map +1 -0
  263. package/dist/sections/cta/cta-section.scss +131 -0
  264. package/dist/sections/entrance.d.ts +29 -0
  265. package/dist/sections/entrance.d.ts.map +1 -0
  266. package/dist/sections/entrance.js +69 -0
  267. package/dist/sections/entrance.js.map +1 -0
  268. package/dist/sections/features/FeaturesSection.d.ts +54 -0
  269. package/dist/sections/features/FeaturesSection.d.ts.map +1 -0
  270. package/dist/sections/features/FeaturesSection.js +139 -0
  271. package/dist/sections/features/FeaturesSection.js.map +1 -0
  272. package/dist/sections/features/features-section.scss +140 -0
  273. package/dist/sections/footer/FooterSection.d.ts +53 -0
  274. package/dist/sections/footer/FooterSection.d.ts.map +1 -0
  275. package/dist/sections/footer/FooterSection.js +147 -0
  276. package/dist/sections/footer/FooterSection.js.map +1 -0
  277. package/dist/sections/footer/footer-section.scss +131 -0
  278. package/dist/sections/hero/HeroSection.d.ts +66 -0
  279. package/dist/sections/hero/HeroSection.d.ts.map +1 -0
  280. package/dist/sections/hero/HeroSection.js +156 -0
  281. package/dist/sections/hero/HeroSection.js.map +1 -0
  282. package/dist/sections/hero/hero-section.scss +211 -0
  283. package/dist/shared/_form-animations.scss +283 -0
  284. package/dist/shared/_media-fit.scss +63 -0
  285. package/dist/shared/_mixins.scss +69 -0
  286. package/dist/shared/_tokens.scss +116 -0
  287. package/dist/shared/badge.d.ts +15 -0
  288. package/dist/shared/badge.d.ts.map +1 -0
  289. package/dist/shared/badge.js +15 -0
  290. package/dist/shared/badge.js.map +1 -0
  291. package/dist/shared/button.d.ts +22 -0
  292. package/dist/shared/button.d.ts.map +1 -0
  293. package/dist/shared/button.js +22 -0
  294. package/dist/shared/button.js.map +1 -0
  295. package/dist/shared/card.d.ts +21 -0
  296. package/dist/shared/card.d.ts.map +1 -0
  297. package/dist/shared/card.js +38 -0
  298. package/dist/shared/card.js.map +1 -0
  299. package/dist/shared/checkbox.d.ts +10 -0
  300. package/dist/shared/checkbox.d.ts.map +1 -0
  301. package/dist/shared/checkbox.js +28 -0
  302. package/dist/shared/checkbox.js.map +1 -0
  303. package/dist/shared/clickable.d.ts +34 -0
  304. package/dist/shared/clickable.d.ts.map +1 -0
  305. package/dist/shared/clickable.js +54 -0
  306. package/dist/shared/clickable.js.map +1 -0
  307. package/dist/shared/common.d.ts +31 -0
  308. package/dist/shared/common.d.ts.map +1 -0
  309. package/dist/shared/common.js +92 -0
  310. package/dist/shared/common.js.map +1 -0
  311. package/dist/shared/entrance-config.d.ts +46 -0
  312. package/dist/shared/entrance-config.d.ts.map +1 -0
  313. package/dist/shared/entrance-config.js +54 -0
  314. package/dist/shared/entrance-config.js.map +1 -0
  315. package/dist/shared/focusable.d.ts +8 -0
  316. package/dist/shared/focusable.d.ts.map +1 -0
  317. package/dist/shared/focusable.js +17 -0
  318. package/dist/shared/focusable.js.map +1 -0
  319. package/dist/shared/form-elements.d.ts +57 -0
  320. package/dist/shared/form-elements.d.ts.map +1 -0
  321. package/dist/shared/form-elements.js +95 -0
  322. package/dist/shared/form-elements.js.map +1 -0
  323. package/dist/shared/form-state.d.ts +52 -0
  324. package/dist/shared/form-state.d.ts.map +1 -0
  325. package/dist/shared/form-state.js +151 -0
  326. package/dist/shared/form-state.js.map +1 -0
  327. package/dist/shared/grid.d.ts +21 -0
  328. package/dist/shared/grid.d.ts.map +1 -0
  329. package/dist/shared/grid.js +187 -0
  330. package/dist/shared/grid.js.map +1 -0
  331. package/dist/shared/icon-slot.d.ts +22 -0
  332. package/dist/shared/icon-slot.d.ts.map +1 -0
  333. package/dist/shared/icon-slot.js +38 -0
  334. package/dist/shared/icon-slot.js.map +1 -0
  335. package/dist/shared/icon.d.ts +17 -0
  336. package/dist/shared/icon.d.ts.map +1 -0
  337. package/dist/shared/icon.js +18 -0
  338. package/dist/shared/icon.js.map +1 -0
  339. package/dist/shared/icons.d.ts +19 -0
  340. package/dist/shared/icons.d.ts.map +1 -0
  341. package/dist/shared/icons.js +22 -0
  342. package/dist/shared/icons.js.map +1 -0
  343. package/dist/shared/image.d.ts +35 -0
  344. package/dist/shared/image.d.ts.map +1 -0
  345. package/dist/shared/image.js +46 -0
  346. package/dist/shared/image.js.map +1 -0
  347. package/dist/shared/input.d.ts +12 -0
  348. package/dist/shared/input.d.ts.map +1 -0
  349. package/dist/shared/input.js +29 -0
  350. package/dist/shared/input.js.map +1 -0
  351. package/dist/shared/radio.d.ts +10 -0
  352. package/dist/shared/radio.d.ts.map +1 -0
  353. package/dist/shared/radio.js +29 -0
  354. package/dist/shared/radio.js.map +1 -0
  355. package/dist/shared/reconcile-list.d.ts +37 -0
  356. package/dist/shared/reconcile-list.d.ts.map +1 -0
  357. package/dist/shared/reconcile-list.js +95 -0
  358. package/dist/shared/reconcile-list.js.map +1 -0
  359. package/dist/shared/section.d.ts +23 -0
  360. package/dist/shared/section.d.ts.map +1 -0
  361. package/dist/shared/section.js +65 -0
  362. package/dist/shared/section.js.map +1 -0
  363. package/dist/shared/segmented.d.ts +17 -0
  364. package/dist/shared/segmented.d.ts.map +1 -0
  365. package/dist/shared/segmented.js +53 -0
  366. package/dist/shared/segmented.js.map +1 -0
  367. package/dist/shared/select.d.ts +18 -0
  368. package/dist/shared/select.d.ts.map +1 -0
  369. package/dist/shared/select.js +14 -0
  370. package/dist/shared/select.js.map +1 -0
  371. package/dist/shared/slots.d.ts +11 -0
  372. package/dist/shared/slots.d.ts.map +1 -0
  373. package/dist/shared/slots.js +33 -0
  374. package/dist/shared/slots.js.map +1 -0
  375. package/dist/shared/smart-container.d.ts +19 -0
  376. package/dist/shared/smart-container.d.ts.map +1 -0
  377. package/dist/shared/smart-container.js +29 -0
  378. package/dist/shared/smart-container.js.map +1 -0
  379. package/dist/shared/text.d.ts +29 -0
  380. package/dist/shared/text.d.ts.map +1 -0
  381. package/dist/shared/text.js +72 -0
  382. package/dist/shared/text.js.map +1 -0
  383. package/dist/shared/textarea.d.ts +6 -0
  384. package/dist/shared/textarea.d.ts.map +1 -0
  385. package/dist/shared/textarea.js +18 -0
  386. package/dist/shared/textarea.js.map +1 -0
  387. package/dist/shared/toggle.d.ts +6 -0
  388. package/dist/shared/toggle.d.ts.map +1 -0
  389. package/dist/shared/toggle.js +19 -0
  390. package/dist/shared/toggle.js.map +1 -0
  391. package/dist/shared/types.d.ts +41 -0
  392. package/dist/shared/types.d.ts.map +1 -0
  393. package/dist/shared/types.js +20 -0
  394. package/dist/shared/types.js.map +1 -0
  395. package/dist/structural/ErrorBoundary.d.ts +18 -0
  396. package/dist/structural/ErrorBoundary.d.ts.map +1 -0
  397. package/dist/structural/ErrorBoundary.js +119 -0
  398. package/dist/structural/ErrorBoundary.js.map +1 -0
  399. package/dist/structural/For.d.ts +37 -0
  400. package/dist/structural/For.d.ts.map +1 -0
  401. package/dist/structural/For.js +129 -0
  402. package/dist/structural/For.js.map +1 -0
  403. package/dist/structural/Lazy.d.ts +43 -0
  404. package/dist/structural/Lazy.d.ts.map +1 -0
  405. package/dist/structural/Lazy.js +47 -0
  406. package/dist/structural/Lazy.js.map +1 -0
  407. package/dist/structural/NavLink.d.ts +45 -0
  408. package/dist/structural/NavLink.d.ts.map +1 -0
  409. package/dist/structural/NavLink.js +37 -0
  410. package/dist/structural/NavLink.js.map +1 -0
  411. package/dist/structural/Show.d.ts +35 -0
  412. package/dist/structural/Show.d.ts.map +1 -0
  413. package/dist/structural/Show.js +34 -0
  414. package/dist/structural/Show.js.map +1 -0
  415. package/dist/structural/nav-link.scss +54 -0
  416. package/dist/styles/index.scss +58 -0
  417. package/package.json +64 -0
package/dist/atoms/forms/select/select.scss ADDED
@@ -0,0 +1,630 @@
1
+ /// Select component styles — custom dropdown
2
+ /// Trigger button pattern with listbox dropdown, search filter,
3
+ /// error shake, success state, and polished keyboard navigation.
4
+ ///
5
+ /// Uses stable border-width to prevent layout shift on hover/focus.
6
+ /// State changes only modify border-color; focus emphasis via box-shadow ring().
7
+ ///
8
+ /// @group atoms/forms
9
+
10
+ @use 'sass:map';
11
+ @use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
12
+ @use '@pithyjs/design-system/borders/styles/tokens' as borders;
13
+ @use '../../../shared/tokens' as shared;
14
+ @use '../../../shared/form-animations' as form-anim;
15
+
16
+ $dropdown-max-block: calc(var(--space-xl) * 4);
17
+
18
+ // ============================================
19
+ // Base wrapper
20
+ // ============================================
21
+
22
+ .ui-select {
23
+ display: inline-flex;
24
+ position: relative;
25
+ inline-size: 100%;
26
+
27
+ // Spinner inherits error/success color
28
+ @include form-anim.form-spinner-adaptive(
29
+ '.ui-select-loading .ui-select-trigger'
30
+ );
31
+ }
32
+
33
+ // ============================================
34
+ // Trigger button — fully reset, looks like Input
35
+ // ============================================
36
+
37
+ .ui-select-trigger {
38
+ appearance: none;
39
+ border: borders.border(control);
40
+ background-color: var(--color-surface);
41
+ outline: none;
42
+ margin: 0;
43
+ font: inherit;
44
+ color: inherit;
45
+ cursor: pointer;
46
+ display: inline-flex;
47
+ align-items: center;
48
+ gap: var(--space-xs);
49
+ inline-size: 100%;
50
+ text-align: start;
51
+ border-radius: inherit;
52
+ user-select: none;
53
+
54
+ @include a11y.motion-safe {
55
+ transition:
56
+ var(--motion-transition-border),
57
+ box-shadow var(--motion-duration-normal) var(--motion-easing-entrance),
58
+ var(--motion-transition-color),
59
+ var(--motion-transition-background);
60
+ }
61
+ }
62
+
63
+ // ============================================
64
+ // Value display + placeholder
65
+ // ============================================
66
+
67
+ .ui-select-value {
68
+ flex: 1;
69
+ min-inline-size: 0;
70
+ min-block-size: 1lh;
71
+ overflow: hidden;
72
+ text-overflow: ellipsis;
73
+ white-space: nowrap;
74
+ }
75
+
76
+ .ui-select-placeholder {
77
+ color: var(--color-text-muted);
78
+ opacity: shared.$placeholder-opacity;
79
+ }
80
+
81
+ // ============================================
82
+ // Required indicator — asterisk on placeholder when no value selected
83
+ // ============================================
84
+
85
+ .ui-select[data-required]:not([data-filled]) .ui-select-placeholder::after {
86
+ content: ' *';
87
+ color: var(--color-danger);
88
+ font-weight: var(--font-weight-medium);
89
+ }
90
+
91
+ // ============================================
92
+ // Sizes — font one step below control size
93
+ // ============================================
94
+
95
+ @each $size in shared.$control-sizes {
96
+ // Dropdown is portaled to <body>, so it can't inherit --_select-option-font-size
97
+ // from .ui-select — it carries its own data-size mirror.
98
+ .ui-select[data-size='#{$size}'],
99
+ .ui-select-dropdown[data-size='#{$size}'] {
100
+ --_select-option-font-size: #{map.get(shared.$control-font-sizes, $size)};
101
+ }
102
+
103
+ .ui-select[data-size='#{$size}'] {
104
+ --_form-btn-size: #{map.get(shared.$control-btn-sizes, $size)};
105
+
106
+ .ui-select-trigger {
107
+ font-size: map.get(shared.$control-font-sizes, $size);
108
+ padding: var(--control-padding-y-#{$size})
109
+ var(--control-padding-x-#{$size});
110
+ min-block-size: var(--control-min-height-#{$size});
111
+ --_select-icon-size: #{map.get(shared.$control-icon-sizes, $size)};
112
+ }
113
+ }
114
+ }
115
+
116
+ // ============================================
117
+ // Focus — trigger focus ring
118
+ // ============================================
119
+
120
+ .ui-select:not([data-readonly]) .ui-select-trigger:focus-visible {
121
+ border-color: var(--color-focus-ring);
122
+ --ring-offset: 0px;
123
+ box-shadow:
124
+ borders.ring(),
125
+ 0 0 var(--shadow-base-blur) var(--ring-width)
126
+ color-mix(
127
+ in oklch,
128
+ var(--ring-color) calc(var(--state-selected-opacity) * 100%),
129
+ transparent
130
+ );
131
+ background-color: var(--color-surface-bright);
132
+ }
133
+
134
+ // ============================================
135
+ // Hover (not disabled, not readonly, not open)
136
+ // ============================================
137
+
138
+ .ui-select:hover:not([data-disabled]):not([data-readonly]):not([data-open])
139
+ .ui-select-trigger:not(:focus-visible) {
140
+ background-color: var(--color-surface-bright);
141
+ }
142
+
143
+ .ui-select:hover:not([data-disabled]):not([data-readonly]):not([data-open]):not(
144
+ [data-error]
145
+ ):not([data-success])
146
+ .ui-select-trigger:not(:focus-visible) {
147
+ border-color: var(--color-primary);
148
+ }
149
+
150
+ // ============================================
151
+ // Open state — keep focus ring while dropdown is visible
152
+ // ============================================
153
+
154
+ .ui-select[data-open] .ui-select-trigger {
155
+ border-color: var(--color-focus-ring);
156
+ --ring-offset: 0px;
157
+ box-shadow:
158
+ borders.ring(),
159
+ 0 0 var(--shadow-base-blur) var(--ring-width)
160
+ color-mix(
161
+ in oklch,
162
+ var(--ring-color) calc(var(--state-selected-opacity) * 100%),
163
+ transparent
164
+ );
165
+ background-color: var(--color-surface-bright);
166
+ }
167
+
168
+ // ============================================
169
+ // Chevron
170
+ // ============================================
171
+
172
+ .ui-select-chevron {
173
+ display: inline-flex;
174
+ align-items: center;
175
+ justify-content: center;
176
+ flex-shrink: 0;
177
+ inline-size: var(--_select-icon-size);
178
+ block-size: var(--_select-icon-size);
179
+ color: var(--color-text-muted);
180
+ line-height: 1;
181
+
182
+ @include a11y.motion-safe {
183
+ transition:
184
+ transform var(--motion-duration-fast) var(--motion-easing-standard),
185
+ var(--motion-transition-color);
186
+ }
187
+ }
188
+
189
+ .ui-select:hover:not([data-disabled]):not([data-readonly]) .ui-select-chevron {
190
+ color: var(--color-text);
191
+ }
192
+
193
+ .ui-select[data-open] .ui-select-chevron {
194
+ color: var(--color-text);
195
+ transform: rotate(180deg);
196
+ }
197
+
198
+ // ============================================
199
+ // Dropdown exit keyframes — distinct names so browsers always replay
200
+ // (reusing the entrance keyframe name with reverse/direction won't replay)
201
+ // ============================================
202
+
203
+ @keyframes _select-exit-down {
204
+ to {
205
+ opacity: 0;
206
+ transform: translateY(var(--motion-distance-medium));
207
+ }
208
+ }
209
+
210
+ @keyframes _select-exit-up {
211
+ to {
212
+ opacity: 0;
213
+ transform: translateY(calc(-1 * var(--motion-distance-medium)));
214
+ }
215
+ }
216
+
217
+ // ============================================
218
+ // Dropdown container — uses design system slide-up entrance
219
+ // ============================================
220
+
221
+ .ui-select-dropdown {
222
+ // Props live on the dropdown so they survive body-portaling.
223
+ --_select-dropdown-z: var(--z-dropdown);
224
+ --_select-dropdown-max-block: #{$dropdown-max-block};
225
+ --_select-scrollbar-size: #{shared.$scrollbar-thumb-size};
226
+ --_scroll-bg: var(--color-surface);
227
+
228
+ // positionDropdown() feeds trigger geometry as px custom props; gap math
229
+ // stays here so fluid --space-xs resolves natively.
230
+ position: fixed;
231
+ inline-size: var(--_select-trigger-inline-size);
232
+ inset-inline-start: var(--_select-trigger-inline-start);
233
+ inset-inline-end: auto;
234
+ inset-block-start: calc(var(--_select-trigger-bottom) + var(--space-xs));
235
+ inset-block-end: auto;
236
+ z-index: var(--_select-dropdown-z);
237
+ background-color: var(--color-surface);
238
+ border: borders.border(card);
239
+ border-radius: var(--radius-md);
240
+ box-shadow: var(--shadow-lg);
241
+ overflow: hidden;
242
+
243
+ @include a11y.motion-safe {
244
+ animation: var(--motion-animation-slide-up) var(--motion-duration-fast)
245
+ var(--motion-easing-entrance);
246
+ }
247
+
248
+ &.ui-select-dropdown-closing {
249
+ @include a11y.motion-safe {
250
+ animation: _select-exit-down var(--motion-duration-normal)
251
+ var(--motion-easing-exit) forwards;
252
+ }
253
+ }
254
+
255
+ &[data-placement='top'] {
256
+ inset-block-start: auto;
257
+ inset-block-end: calc(var(--_select-trigger-from-bottom) + var(--space-xs));
258
+
259
+ @include a11y.motion-safe {
260
+ animation: var(--motion-animation-slide-down) var(--motion-duration-fast)
261
+ var(--motion-easing-entrance);
262
+ }
263
+
264
+ &.ui-select-dropdown-closing {
265
+ @include a11y.motion-safe {
266
+ animation: _select-exit-up var(--motion-duration-normal)
267
+ var(--motion-easing-exit) forwards;
268
+ }
269
+ }
270
+ }
271
+ }
272
+
273
+ // ============================================
274
+ // Search input
275
+ // ============================================
276
+
277
+ .ui-select-search {
278
+ padding: var(--space-xs);
279
+ border-block-end: var(--border-width-hairline) solid var(--color-border);
280
+ }
281
+
282
+ .ui-select-search-input {
283
+ appearance: none;
284
+ border: borders.border(control);
285
+ background-color: var(--color-surface);
286
+ outline: none;
287
+ margin: 0;
288
+ font: inherit;
289
+ color: inherit;
290
+ inline-size: 100%;
291
+ padding: var(--space-xs) var(--space-sm);
292
+ font-size: var(--_select-option-font-size);
293
+ border-radius: var(--radius-sm);
294
+
295
+ @include a11y.motion-safe {
296
+ transition:
297
+ var(--motion-transition-border), var(--motion-transition-shadow);
298
+ }
299
+
300
+ &::placeholder {
301
+ color: var(--color-text-muted);
302
+ opacity: shared.$placeholder-opacity;
303
+
304
+ @include a11y.motion-safe {
305
+ transition: var(--motion-transition-opacity);
306
+ }
307
+ }
308
+
309
+ &::selection {
310
+ background-color: color-mix(
311
+ in oklch,
312
+ var(--color-primary) calc(var(--state-selected-opacity) * 100%),
313
+ transparent
314
+ );
315
+ color: inherit;
316
+ }
317
+
318
+ &:focus {
319
+ border-color: var(--ring-color, var(--color-focus-ring));
320
+ --ring-offset: 0px;
321
+ box-shadow: borders.ring();
322
+
323
+ &::placeholder {
324
+ opacity: 0;
325
+ }
326
+ }
327
+ }
328
+
329
+ // ============================================
330
+ // Listbox
331
+ // ============================================
332
+
333
+ .ui-select-listbox {
334
+ list-style: none;
335
+ margin: 0;
336
+ padding: var(--space-xs) 0;
337
+ max-block-size: var(--_select-dropdown-max-block);
338
+ overflow-y: auto;
339
+ overscroll-behavior: contain;
340
+
341
+ // Scroll overflow shadows (top + bottom fade indicators)
342
+ @include form-anim.scroll-shadows;
343
+
344
+ // Thin scrollbar for long lists
345
+ scrollbar-width: thin;
346
+ scrollbar-color: var(--color-border) transparent;
347
+
348
+ &::-webkit-scrollbar {
349
+ inline-size: var(--_select-scrollbar-size);
350
+ }
351
+
352
+ &::-webkit-scrollbar-track {
353
+ background: transparent;
354
+ }
355
+
356
+ &::-webkit-scrollbar-thumb {
357
+ background-color: var(--color-border);
358
+ border-radius: var(--radius-sm);
359
+ }
360
+ }
361
+
362
+ // ============================================
363
+ // Option
364
+ // ============================================
365
+
366
+ .ui-select-option {
367
+ display: flex;
368
+ align-items: center;
369
+ gap: var(--space-xs);
370
+ padding: var(--space-sm) var(--space-md);
371
+ margin-inline: var(--space-xs);
372
+ border-radius: var(--radius-sm);
373
+ cursor: pointer;
374
+ font-size: var(--_select-option-font-size);
375
+ color: var(--color-text);
376
+ line-height: var(--leading-normal);
377
+
378
+ @include a11y.motion-safe {
379
+ transition:
380
+ var(--motion-transition-background), var(--motion-transition-color);
381
+ }
382
+
383
+ &:hover:not(.ui-select-option-disabled) {
384
+ @include a11y.state-background(hover, var(--color-primary));
385
+ }
386
+
387
+ &:active:not(.ui-select-option-disabled) {
388
+ @include a11y.state-background(pressed, var(--color-primary));
389
+ }
390
+
391
+ &.ui-select-option-active {
392
+ @include a11y.state-background(hover, var(--color-primary));
393
+ outline: var(--border-width-hairline) solid var(--color-primary);
394
+ outline-offset: calc(-1 * var(--border-width-hairline));
395
+ }
396
+
397
+ &.ui-select-option-selected {
398
+ color: var(--color-primary);
399
+ font-weight: var(--font-weight-medium);
400
+ background-color: color-mix(
401
+ in oklch,
402
+ var(--color-primary) calc(var(--state-selected-opacity) * 100%),
403
+ transparent
404
+ );
405
+ }
406
+
407
+ &.ui-select-option-disabled {
408
+ opacity: var(--state-disabled-opacity);
409
+ cursor: not-allowed;
410
+ }
411
+ }
412
+
413
+ .ui-select-option-label {
414
+ flex: 1;
415
+ min-inline-size: 0;
416
+ overflow: hidden;
417
+ text-overflow: ellipsis;
418
+ white-space: nowrap;
419
+
420
+ mark {
421
+ background: none;
422
+ color: var(--color-primary);
423
+ font-weight: var(--font-weight-semibold);
424
+ }
425
+ }
426
+
427
+ .ui-select-option-check {
428
+ display: inline-flex;
429
+ align-items: center;
430
+ justify-content: center;
431
+ flex-shrink: 0;
432
+ inline-size: var(--icon-size-sm);
433
+ block-size: var(--icon-size-sm);
434
+ color: var(--color-primary);
435
+
436
+ @include a11y.motion-safe {
437
+ animation: var(--motion-animation-fade-scale-in) var(--motion-duration-fast)
438
+ var(--motion-easing-entrance);
439
+ }
440
+ }
441
+
442
+ // ============================================
443
+ // Empty state
444
+ // ============================================
445
+
446
+ .ui-select-empty {
447
+ padding: var(--space-md);
448
+ text-align: center;
449
+ color: var(--color-text-muted);
450
+ font-size: var(--_select-option-font-size);
451
+ }
452
+
453
+ // ============================================
454
+ // Clear button
455
+ // ============================================
456
+
457
+ .ui-select-clear {
458
+ @include form-anim.form-inline-button(var(--color-text));
459
+ }
460
+
461
+ // ============================================
462
+ // State Icons (success / error)
463
+ // ============================================
464
+
465
+ .ui-select-state-icon {
466
+ display: inline-flex;
467
+ align-items: center;
468
+ justify-content: center;
469
+ flex-shrink: 0;
470
+ inline-size: var(--_select-icon-size);
471
+ block-size: var(--_select-icon-size);
472
+ line-height: 1;
473
+
474
+ @include a11y.motion-safe {
475
+ transition: var(--motion-transition-color);
476
+ }
477
+ }
478
+
479
+ .ui-select-state-icon-success {
480
+ color: var(--color-success);
481
+ }
482
+
483
+ .ui-select-state-icon-error {
484
+ color: var(--color-danger);
485
+ }
486
+
487
+ @include a11y.motion-safe {
488
+ .ui-select-state-icon-pop {
489
+ animation: var(--motion-animation-fade-scale-in)
490
+ var(--motion-duration-normal) var(--motion-easing-entrance);
491
+ }
492
+ }
493
+
494
+ // ============================================
495
+ // Success state
496
+ // ============================================
497
+
498
+ .ui-select[data-success] {
499
+ .ui-select-trigger {
500
+ border-color: var(--color-success);
501
+ }
502
+
503
+ &:focus-within {
504
+ --ring-color: var(--color-success);
505
+ }
506
+ }
507
+
508
+ // ============================================
509
+ // Error state (after success — source order wins)
510
+ // ============================================
511
+
512
+ .ui-select[data-error] {
513
+ .ui-select-trigger {
514
+ border-color: var(--color-danger);
515
+ }
516
+
517
+ &:focus-within {
518
+ --ring-color: var(--color-danger);
519
+ }
520
+ }
521
+
522
+ // ============================================
523
+ // Error shake animation (shared keyframe)
524
+ // ============================================
525
+
526
+ @include form-anim.form-shake('.ui-select-shake');
527
+
528
+ // ============================================
529
+ // Wrapper (when helper/error text present)
530
+ // ============================================
531
+
532
+ .ui-select-wrapper {
533
+ inline-size: 100%;
534
+
535
+ > .ui-select {
536
+ inline-size: 100%;
537
+ }
538
+ }
539
+
540
+ // Helper + error text use shared .ui-form-helper / .ui-form-error classes
541
+ // from _form-animations.scss — no component-specific overrides needed.
542
+
543
+ // ============================================
544
+ // Disabled state
545
+ // ============================================
546
+
547
+ .ui-select[data-disabled] {
548
+ opacity: var(--state-disabled-opacity);
549
+ cursor: not-allowed;
550
+
551
+ .ui-select-trigger {
552
+ cursor: not-allowed;
553
+ }
554
+ }
555
+
556
+ // ============================================
557
+ // Readonly state
558
+ // ============================================
559
+
560
+ .ui-select[data-readonly] .ui-select-trigger {
561
+ background-color: var(--color-surface-variant);
562
+ cursor: default;
563
+ }
564
+
565
+ // ============================================
566
+ // Loading Spinner
567
+ // ============================================
568
+
569
+ .ui-select.ui-select-loading .ui-select-trigger::after {
570
+ content: '';
571
+ flex-shrink: 0;
572
+ inline-size: var(--_select-icon-size);
573
+ block-size: var(--_select-icon-size);
574
+ border: var(--border-width-thin) solid var(--color-text-muted);
575
+ border-inline-end-color: transparent;
576
+ border-radius: 50%;
577
+
578
+ @include a11y.motion-safe {
579
+ animation: var(--motion-animation-spin) var(--motion-duration-deliberate)
580
+ linear infinite;
581
+ }
582
+
583
+ @include a11y.motion-reduced {
584
+ border-inline-end-color: var(--color-text-muted);
585
+ opacity: shared.$spinner-reduced-opacity;
586
+ }
587
+ }
588
+
589
+ // ============================================
590
+ // High Contrast / Forced Colors
591
+ // ============================================
592
+
593
+ @include a11y.forced-colors {
594
+ .ui-select-trigger {
595
+ border: var(--border-width-hairline) solid ButtonText;
596
+ }
597
+
598
+ .ui-select[data-disabled] .ui-select-trigger {
599
+ border-color: GrayText;
600
+ color: GrayText;
601
+ }
602
+
603
+ .ui-select:not([data-readonly]) .ui-select-trigger:focus-visible {
604
+ @include a11y.focus-outline(Highlight);
605
+ }
606
+
607
+ .ui-select-dropdown {
608
+ border: var(--border-width-hairline) solid ButtonText;
609
+ }
610
+
611
+ .ui-select-search-input {
612
+ border: var(--border-width-hairline) solid ButtonText;
613
+
614
+ &:focus {
615
+ @include a11y.focus-outline(Highlight);
616
+ }
617
+ }
618
+
619
+ .ui-select-option.ui-select-option-active {
620
+ outline: var(--border-width-thin) solid Highlight;
621
+ }
622
+
623
+ .ui-select-option.ui-select-option-selected {
624
+ color: Highlight;
625
+ }
626
+
627
+ .ui-select-clear {
628
+ border: var(--border-width-hairline) solid ButtonText;
629
+ }
630
+ }
package/dist/atoms/forms/textarea/Textarea.d.ts ADDED
@@ -0,0 +1,69 @@
1
+ /** @codex
2
+ {
3
+ "id": "pithy.ui-kit.textarea",
4
+ "title": "<Textarea> Form Atom",
5
+ "category": "feature"
6
+ }
7
+ */
8
+ import { type FormControlBaseProps } from '../../../shared/types';
9
+ /** @codexApi {"parent":"pithy.ui-kit.textarea","name":"TextareaProps","stability":"stable","signature":"interface TextareaProps extends FormControlBaseProps"} */
10
+ export interface TextareaProps extends FormControlBaseProps {
11
+ /** Textarea name attribute */
12
+ name?: string;
13
+ /** Textarea value — static string or signal accessor for controlled textarea */
14
+ value?: string | (() => string);
15
+ /** Placeholder text */
16
+ placeholder?: string;
17
+ /** Enable floating label — label starts centered inside the textarea, floats to top-inside on focus/fill (default: false) */
18
+ floatingLabel?: boolean;
19
+ /** Autocomplete hint */
20
+ autocomplete?: string;
21
+ /** Maximum character length — also shows character counter */
22
+ maxLength?: number;
23
+ /** Initial visible rows (default: 3). Ignored when autoResize is true and field-sizing is supported. */
24
+ rows?: number;
25
+ /** Enable auto-resize — uses CSS field-sizing: content with JS fallback (default: true) */
26
+ autoResize?: boolean;
27
+ /** Maximum block-size for auto-resize (CSS value, e.g. "200px", "15rem"). No limit when omitted. */
28
+ maxBlockSize?: string;
29
+ /** Minimum block-size (CSS value, e.g. "80px", "5rem"). Falls back to rows-based height when omitted. */
30
+ minBlockSize?: string;
31
+ /** Show clear button when textarea has value (default: false) */
32
+ clearable?: boolean;
33
+ /** Fires on every keystroke with current value */
34
+ onInput?: (value: string, e: InputEvent) => void;
35
+ /** Fires on commit (blur) with current value */
36
+ onChange?: (value: string, e: Event) => void;
37
+ /** Fires when textarea loses focus */
38
+ onBlur?: (e: FocusEvent) => void;
39
+ /** Fires when textarea gains focus */
40
+ onFocus?: (e: FocusEvent) => void;
41
+ }
42
+ /**
43
+ * Accessible textarea atom with polished micro-interactions.
44
+ *
45
+ * Renders a wrapper `<div>` with an inner `<textarea>`. Supports floating label,
46
+ * auto-resize (CSS field-sizing with JS fallback), success/error states with
47
+ * shake animation, character counter, clear button, loading spinner, and
48
+ * helper/error text.
49
+ *
50
+ * This is a pure visual atom — no validation logic. Error/success states are
51
+ * driven externally via props.
52
+ *
53
+ * @param props - Textarea configuration
54
+ * @returns `{ el, destroy }` — mounted element and cleanup function
55
+ *
56
+ * @example
57
+ * ```html
58
+ * <Textarea label="'Bio'" placeholder="'Tell us about yourself'" />
59
+ * <Textarea label="'Message'" maxLength="500" floatingLabel="true" />
60
+ * <Textarea label="'Notes'" autoResize="false" rows="6" />
61
+ * <Textarea label="'Comment'" clearable="true" />
62
+ * ```
63
+ */
64
+ /** @codexApi {"parent":"pithy.ui-kit.textarea","name":"Textarea","stability":"stable","signature":"(props: TextareaProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
65
+ export declare function Textarea({ id: externalId, name, value, placeholder, disabled, readonly: readonlyProp, required, error, errorMessage, helperText, success, size: rawSize, label, floatingLabel, autocomplete, maxLength, rows, autoResize, maxBlockSize, minBlockSize, clearable, loading, onInput, onChange, onBlur, onFocus, }: TextareaProps): {
66
+ el: HTMLElement | DocumentFragment;
67
+ destroy: () => void;
68
+ };
69
+ //# sourceMappingURL=Textarea.d.ts.map
package/dist/atoms/forms/textarea/Textarea.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/atoms/forms/textarea/Textarea.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAGF,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAC;AAe/B,kKAAkK;AAClK,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAChC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6HAA6H;IAC7H,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oGAAoG;IACpG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7C,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,8LAA8L;AAC9L,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EAAE,UAAU,EACd,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,YAAoB,EAC9B,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,UAAU,EACV,OAAe,EACf,IAAI,EAAE,OAAc,EACpB,KAAK,EACL,aAAqB,EACrB,YAAY,EACZ,SAAS,EACT,IAAQ,EACR,UAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,SAAiB,EACjB,OAAe,EACf,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,aAAa,GAAG;IAAE,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA6b7E"}