siesa-ui-kit 1.0.6 → 1.0.8

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 (297) hide show
  1. package/README.md +115 -89
  2. package/dist/ButtonTest.d.ts +6 -0
  3. package/dist/ButtonTest.d.ts.map +1 -0
  4. package/dist/components/Alert/Alert.d.ts +23 -0
  5. package/dist/components/Alert/Alert.d.ts.map +1 -0
  6. package/dist/components/Alert/Alert.types.d.ts +46 -0
  7. package/dist/components/Alert/Alert.types.d.ts.map +1 -0
  8. package/dist/components/Avatar/Avatar.d.ts +41 -0
  9. package/dist/components/Avatar/Avatar.d.ts.map +1 -0
  10. package/dist/components/Avatar/Avatar.types.d.ts +46 -0
  11. package/dist/components/Avatar/Avatar.types.d.ts.map +1 -0
  12. package/dist/components/Badge/Badge.d.ts +42 -0
  13. package/dist/components/Badge/Badge.d.ts.map +1 -0
  14. package/dist/components/Badge/Badge.types.d.ts +32 -0
  15. package/dist/components/Badge/Badge.types.d.ts.map +1 -0
  16. package/dist/components/Button/Button.d.ts +84 -0
  17. package/dist/components/Button/Button.d.ts.map +1 -0
  18. package/dist/components/Button/Button.types.d.ts +162 -0
  19. package/dist/components/Button/Button.types.d.ts.map +1 -0
  20. package/dist/components/Button/icons.d.ts +26 -0
  21. package/dist/components/Button/icons.d.ts.map +1 -0
  22. package/dist/components/Button/index.d.ts +4 -0
  23. package/dist/components/Button/index.d.ts.map +1 -0
  24. package/dist/components/Checkbox/Checkbox.d.ts +31 -0
  25. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
  26. package/dist/components/Checkbox/Checkbox.types.d.ts +53 -0
  27. package/dist/components/Checkbox/Checkbox.types.d.ts.map +1 -0
  28. package/dist/components/DescriptionList/DescriptionList.d.ts +38 -0
  29. package/dist/components/DescriptionList/DescriptionList.d.ts.map +1 -0
  30. package/dist/components/DescriptionList/DescriptionList.types.d.ts +27 -0
  31. package/dist/components/DescriptionList/DescriptionList.types.d.ts.map +1 -0
  32. package/dist/components/Divider/Divider.d.ts +33 -0
  33. package/dist/components/Divider/Divider.d.ts.map +1 -0
  34. package/dist/components/Divider/Divider.types.d.ts +22 -0
  35. package/dist/components/Divider/Divider.types.d.ts.map +1 -0
  36. package/dist/components/Dropdown/Dropdown.d.ts +66 -0
  37. package/dist/components/Dropdown/Dropdown.d.ts.map +1 -0
  38. package/dist/components/Dropdown/Dropdown.types.d.ts +124 -0
  39. package/dist/components/Dropdown/Dropdown.types.d.ts.map +1 -0
  40. package/dist/components/Dropdown/icons.d.ts +10 -0
  41. package/dist/components/Dropdown/icons.d.ts.map +1 -0
  42. package/dist/components/Dropdown/index.d.ts +4 -0
  43. package/dist/components/Dropdown/index.d.ts.map +1 -0
  44. package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.d.ts +101 -0
  45. package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.d.ts.map +1 -0
  46. package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts +95 -0
  47. package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts.map +1 -0
  48. package/dist/components/DropdownItemCollapsible/icons.d.ts +19 -0
  49. package/dist/components/DropdownItemCollapsible/icons.d.ts.map +1 -0
  50. package/dist/components/DropdownItemCollapsible/index.d.ts +9 -0
  51. package/dist/components/DropdownItemCollapsible/index.d.ts.map +1 -0
  52. package/dist/components/DropdownItemHeading/DropdownItemHeading.d.ts +75 -0
  53. package/dist/components/DropdownItemHeading/DropdownItemHeading.d.ts.map +1 -0
  54. package/dist/components/DropdownItemHeading/DropdownItemHeading.types.d.ts +85 -0
  55. package/dist/components/DropdownItemHeading/DropdownItemHeading.types.d.ts.map +1 -0
  56. package/dist/components/DropdownItemHeading/icons.d.ts +48 -0
  57. package/dist/components/DropdownItemHeading/icons.d.ts.map +1 -0
  58. package/dist/components/DropdownItemHeading/index.d.ts +4 -0
  59. package/dist/components/DropdownItemHeading/index.d.ts.map +1 -0
  60. package/dist/components/Input/Input.d.ts +40 -0
  61. package/dist/components/Input/Input.d.ts.map +1 -0
  62. package/dist/components/Input/Input.types.d.ts +71 -0
  63. package/dist/components/Input/Input.types.d.ts.map +1 -0
  64. package/dist/components/Input/icons.d.ts +15 -0
  65. package/dist/components/Input/icons.d.ts.map +1 -0
  66. package/dist/components/Input/index.d.ts +3 -0
  67. package/dist/components/Input/index.d.ts.map +1 -0
  68. package/dist/components/LoginView/LoginView.d.ts +36 -0
  69. package/dist/components/LoginView/LoginView.d.ts.map +1 -0
  70. package/dist/components/LoginView/LoginView.types.d.ts +46 -0
  71. package/dist/components/LoginView/LoginView.types.d.ts.map +1 -0
  72. package/dist/components/LoginView/icons.d.ts +18 -0
  73. package/dist/components/LoginView/icons.d.ts.map +1 -0
  74. package/dist/components/LoginView/index.d.ts +4 -0
  75. package/dist/components/LoginView/index.d.ts.map +1 -0
  76. package/dist/components/Navbar/Navbar.d.ts +63 -0
  77. package/dist/components/Navbar/Navbar.d.ts.map +1 -0
  78. package/dist/components/Navbar/Navbar.types.d.ts +194 -0
  79. package/dist/components/Navbar/Navbar.types.d.ts.map +1 -0
  80. package/dist/components/Navbar/icons.d.ts +12 -0
  81. package/dist/components/Navbar/icons.d.ts.map +1 -0
  82. package/dist/components/Navbar/index.d.ts +4 -0
  83. package/dist/components/Navbar/index.d.ts.map +1 -0
  84. package/dist/components/NavigationBar/NavigationBar.d.ts +75 -0
  85. package/dist/components/NavigationBar/NavigationBar.d.ts.map +1 -0
  86. package/dist/components/NavigationBar/NavigationBar.types.d.ts +63 -0
  87. package/dist/components/NavigationBar/NavigationBar.types.d.ts.map +1 -0
  88. package/dist/components/NavigationBar/index.d.ts +3 -0
  89. package/dist/components/NavigationBar/index.d.ts.map +1 -0
  90. package/dist/components/NavigationRail/NavigationRail.d.ts +7 -0
  91. package/dist/components/NavigationRail/NavigationRail.d.ts.map +1 -0
  92. package/dist/components/NavigationRail/NavigationRail.types.d.ts +92 -0
  93. package/dist/components/NavigationRail/NavigationRail.types.d.ts.map +1 -0
  94. package/dist/components/NavigationRail/index.d.ts +3 -0
  95. package/dist/components/NavigationRail/index.d.ts.map +1 -0
  96. package/dist/components/NavigationRailItem/NavigationRailItem.d.ts +90 -0
  97. package/dist/components/NavigationRailItem/NavigationRailItem.d.ts.map +1 -0
  98. package/dist/components/NavigationRailItem/NavigationRailItem.types.d.ts +155 -0
  99. package/dist/components/NavigationRailItem/NavigationRailItem.types.d.ts.map +1 -0
  100. package/dist/components/NavigationRailItem/index.d.ts +3 -0
  101. package/dist/components/NavigationRailItem/index.d.ts.map +1 -0
  102. package/dist/components/NavigationRailPanel/NavigationRailPanel.d.ts +124 -0
  103. package/dist/components/NavigationRailPanel/NavigationRailPanel.d.ts.map +1 -0
  104. package/dist/components/NavigationRailPanel/NavigationRailPanel.types.d.ts +154 -0
  105. package/dist/components/NavigationRailPanel/NavigationRailPanel.types.d.ts.map +1 -0
  106. package/dist/components/NavigationRailPanel/index.d.ts +3 -0
  107. package/dist/components/NavigationRailPanel/index.d.ts.map +1 -0
  108. package/dist/components/NavigationRailTypes/NavigationRailTypes.d.ts +99 -0
  109. package/dist/components/NavigationRailTypes/NavigationRailTypes.d.ts.map +1 -0
  110. package/dist/components/NavigationRailTypes/NavigationRailTypes.types.d.ts +111 -0
  111. package/dist/components/NavigationRailTypes/NavigationRailTypes.types.d.ts.map +1 -0
  112. package/dist/components/NavigationRailTypes/icons.d.ts +58 -0
  113. package/dist/components/NavigationRailTypes/icons.d.ts.map +1 -0
  114. package/dist/components/NavigationRailTypes/index.d.ts +4 -0
  115. package/dist/components/NavigationRailTypes/index.d.ts.map +1 -0
  116. package/dist/components/Notification/Notification.d.ts +52 -0
  117. package/dist/components/Notification/Notification.d.ts.map +1 -0
  118. package/dist/components/Notification/Notification.types.d.ts +138 -0
  119. package/dist/components/Notification/Notification.types.d.ts.map +1 -0
  120. package/dist/components/Notification/index.d.ts +3 -0
  121. package/dist/components/Notification/index.d.ts.map +1 -0
  122. package/dist/components/POSConvention/POSConvention.d.ts +55 -0
  123. package/dist/components/POSConvention/POSConvention.d.ts.map +1 -0
  124. package/dist/components/POSConvention/POSConvention.types.d.ts +37 -0
  125. package/dist/components/POSConvention/POSConvention.types.d.ts.map +1 -0
  126. package/dist/components/POSConvention/icons.d.ts +21 -0
  127. package/dist/components/POSConvention/icons.d.ts.map +1 -0
  128. package/dist/components/POSConvention/index.d.ts +4 -0
  129. package/dist/components/POSConvention/index.d.ts.map +1 -0
  130. package/dist/components/POSLocationButton/POSLocationButton.d.ts +73 -0
  131. package/dist/components/POSLocationButton/POSLocationButton.d.ts.map +1 -0
  132. package/dist/components/POSLocationButton/POSLocationButton.types.d.ts +75 -0
  133. package/dist/components/POSLocationButton/POSLocationButton.types.d.ts.map +1 -0
  134. package/dist/components/POSLocationButton/icons.d.ts +37 -0
  135. package/dist/components/POSLocationButton/icons.d.ts.map +1 -0
  136. package/dist/components/POSLocationButton/index.d.ts +4 -0
  137. package/dist/components/POSLocationButton/index.d.ts.map +1 -0
  138. package/dist/components/POSNumberButton/POSNumberButton.d.ts +61 -0
  139. package/dist/components/POSNumberButton/POSNumberButton.d.ts.map +1 -0
  140. package/dist/components/POSNumberButton/POSNumberButton.types.d.ts +43 -0
  141. package/dist/components/POSNumberButton/POSNumberButton.types.d.ts.map +1 -0
  142. package/dist/components/POSNumberButton/index.d.ts +3 -0
  143. package/dist/components/POSNumberButton/index.d.ts.map +1 -0
  144. package/dist/components/POSProductButton/POSProductButton.d.ts +59 -0
  145. package/dist/components/POSProductButton/POSProductButton.d.ts.map +1 -0
  146. package/dist/components/POSProductButton/POSProductButton.types.d.ts +40 -0
  147. package/dist/components/POSProductButton/POSProductButton.types.d.ts.map +1 -0
  148. package/dist/components/POSProductButton/index.d.ts +3 -0
  149. package/dist/components/POSProductButton/index.d.ts.map +1 -0
  150. package/dist/components/POSProductCard/POSProductCard.d.ts +68 -0
  151. package/dist/components/POSProductCard/POSProductCard.d.ts.map +1 -0
  152. package/dist/components/POSProductCard/POSProductCard.types.d.ts +67 -0
  153. package/dist/components/POSProductCard/POSProductCard.types.d.ts.map +1 -0
  154. package/dist/components/POSProductCard/icons.d.ts +10 -0
  155. package/dist/components/POSProductCard/icons.d.ts.map +1 -0
  156. package/dist/components/POSProductCard/index.d.ts +3 -0
  157. package/dist/components/POSProductCard/index.d.ts.map +1 -0
  158. package/dist/components/POSProductSidebarItems/POSProductSidebarItems.d.ts +57 -0
  159. package/dist/components/POSProductSidebarItems/POSProductSidebarItems.d.ts.map +1 -0
  160. package/dist/components/POSProductSidebarItems/POSProductSidebarItems.types.d.ts +85 -0
  161. package/dist/components/POSProductSidebarItems/POSProductSidebarItems.types.d.ts.map +1 -0
  162. package/dist/components/POSProductSidebarItems/icons.d.ts +9 -0
  163. package/dist/components/POSProductSidebarItems/icons.d.ts.map +1 -0
  164. package/dist/components/POSProductSidebarItems/index.d.ts +4 -0
  165. package/dist/components/POSProductSidebarItems/index.d.ts.map +1 -0
  166. package/dist/components/POSTable/POSTable.d.ts +75 -0
  167. package/dist/components/POSTable/POSTable.d.ts.map +1 -0
  168. package/dist/components/POSTable/POSTable.types.d.ts +71 -0
  169. package/dist/components/POSTable/POSTable.types.d.ts.map +1 -0
  170. package/dist/components/POSTable/index.d.ts +3 -0
  171. package/dist/components/POSTable/index.d.ts.map +1 -0
  172. package/dist/components/Pagination/Pagination.d.ts +29 -0
  173. package/dist/components/Pagination/Pagination.d.ts.map +1 -0
  174. package/dist/components/Pagination/Pagination.types.d.ts +79 -0
  175. package/dist/components/Pagination/Pagination.types.d.ts.map +1 -0
  176. package/dist/components/Pagination/icons.d.ts +18 -0
  177. package/dist/components/Pagination/icons.d.ts.map +1 -0
  178. package/dist/components/Pagination/index.d.ts +4 -0
  179. package/dist/components/Pagination/index.d.ts.map +1 -0
  180. package/dist/components/Quantity/Quantity.d.ts +38 -0
  181. package/dist/components/Quantity/Quantity.d.ts.map +1 -0
  182. package/dist/components/Quantity/Quantity.types.d.ts +59 -0
  183. package/dist/components/Quantity/Quantity.types.d.ts.map +1 -0
  184. package/dist/components/Radio/Radio.d.ts +45 -0
  185. package/dist/components/Radio/Radio.d.ts.map +1 -0
  186. package/dist/components/Radio/Radio.types.d.ts +115 -0
  187. package/dist/components/Radio/Radio.types.d.ts.map +1 -0
  188. package/dist/components/Select/Select.d.ts +37 -0
  189. package/dist/components/Select/Select.d.ts.map +1 -0
  190. package/dist/components/Select/Select.types.d.ts +124 -0
  191. package/dist/components/Select/Select.types.d.ts.map +1 -0
  192. package/dist/components/Select/icons.d.ts +16 -0
  193. package/dist/components/Select/icons.d.ts.map +1 -0
  194. package/dist/components/Select/index.d.ts +4 -0
  195. package/dist/components/Select/index.d.ts.map +1 -0
  196. package/dist/components/SignUpView/SignUpView.d.ts +38 -0
  197. package/dist/components/SignUpView/SignUpView.d.ts.map +1 -0
  198. package/dist/components/SignUpView/SignUpView.types.d.ts +51 -0
  199. package/dist/components/SignUpView/SignUpView.types.d.ts.map +1 -0
  200. package/dist/components/SignUpView/icons.d.ts +18 -0
  201. package/dist/components/SignUpView/icons.d.ts.map +1 -0
  202. package/dist/components/SignUpView/index.d.ts +4 -0
  203. package/dist/components/SignUpView/index.d.ts.map +1 -0
  204. package/dist/components/Switch/Switch.d.ts +46 -0
  205. package/dist/components/Switch/Switch.d.ts.map +1 -0
  206. package/dist/components/Switch/Switch.types.d.ts +58 -0
  207. package/dist/components/Switch/Switch.types.d.ts.map +1 -0
  208. package/dist/components/Table/Table.d.ts +64 -0
  209. package/dist/components/Table/Table.d.ts.map +1 -0
  210. package/dist/components/Table/Table.types.d.ts +173 -0
  211. package/dist/components/Table/Table.types.d.ts.map +1 -0
  212. package/dist/components/Table/index.d.ts +3 -0
  213. package/dist/components/Table/index.d.ts.map +1 -0
  214. package/dist/components/Tabs/Tabs.d.ts +76 -0
  215. package/dist/components/Tabs/Tabs.d.ts.map +1 -0
  216. package/dist/components/Tabs/Tabs.types.d.ts +107 -0
  217. package/dist/components/Tabs/Tabs.types.d.ts.map +1 -0
  218. package/dist/components/Tabs/icons.d.ts +45 -0
  219. package/dist/components/Tabs/icons.d.ts.map +1 -0
  220. package/dist/components/Tabs/index.d.ts +4 -0
  221. package/dist/components/Tabs/index.d.ts.map +1 -0
  222. package/dist/components/Textarea/Textarea.d.ts +38 -0
  223. package/dist/components/Textarea/Textarea.d.ts.map +1 -0
  224. package/dist/components/Textarea/Textarea.types.d.ts +46 -0
  225. package/dist/components/Textarea/Textarea.types.d.ts.map +1 -0
  226. package/dist/context/ThemeContext.d.ts +46 -0
  227. package/dist/context/ThemeContext.d.ts.map +1 -0
  228. package/dist/context/index.d.ts +2 -0
  229. package/dist/context/index.d.ts.map +1 -0
  230. package/dist/index.d.ts +57 -0
  231. package/dist/index.d.ts.map +1 -0
  232. package/dist/siesa-ui-kit.cjs +1273 -0
  233. package/dist/siesa-ui-kit.cjs.map +1 -0
  234. package/dist/siesa-ui-kit.mjs +4510 -0
  235. package/dist/siesa-ui-kit.mjs.map +1 -0
  236. package/dist/style.css +1 -0
  237. package/dist/views/ListView/ListView.d.ts +47 -0
  238. package/dist/views/ListView/ListView.d.ts.map +1 -0
  239. package/dist/views/ListView/ListView.types.d.ts +177 -0
  240. package/dist/views/ListView/ListView.types.d.ts.map +1 -0
  241. package/dist/views/ListView/icons.d.ts +60 -0
  242. package/dist/views/ListView/icons.d.ts.map +1 -0
  243. package/dist/views/ListView/index.d.ts +3 -0
  244. package/dist/views/ListView/index.d.ts.map +1 -0
  245. package/dist/views/LoginView/LoginView.d.ts +36 -0
  246. package/dist/views/LoginView/LoginView.d.ts.map +1 -0
  247. package/dist/views/LoginView/LoginView.types.d.ts +46 -0
  248. package/dist/views/LoginView/LoginView.types.d.ts.map +1 -0
  249. package/dist/views/LoginView/icons.d.ts +18 -0
  250. package/dist/views/LoginView/icons.d.ts.map +1 -0
  251. package/dist/views/LoginView/index.d.ts +4 -0
  252. package/dist/views/LoginView/index.d.ts.map +1 -0
  253. package/dist/views/ProductsView/ProductsView.d.ts +56 -0
  254. package/dist/views/ProductsView/ProductsView.d.ts.map +1 -0
  255. package/dist/views/ProductsView/ProductsView.types.d.ts +184 -0
  256. package/dist/views/ProductsView/ProductsView.types.d.ts.map +1 -0
  257. package/dist/views/ProductsView/icons.d.ts +12 -0
  258. package/dist/views/ProductsView/icons.d.ts.map +1 -0
  259. package/dist/views/ProductsView/index.d.ts +3 -0
  260. package/dist/views/ProductsView/index.d.ts.map +1 -0
  261. package/dist/views/RecoverPasswordView/RecoverPasswordView.d.ts +34 -0
  262. package/dist/views/RecoverPasswordView/RecoverPasswordView.d.ts.map +1 -0
  263. package/dist/views/RecoverPasswordView/RecoverPasswordView.types.d.ts +50 -0
  264. package/dist/views/RecoverPasswordView/RecoverPasswordView.types.d.ts.map +1 -0
  265. package/dist/views/RecoverPasswordView/icons.d.ts +9 -0
  266. package/dist/views/RecoverPasswordView/icons.d.ts.map +1 -0
  267. package/dist/views/RecoverPasswordView/index.d.ts +3 -0
  268. package/dist/views/RecoverPasswordView/index.d.ts.map +1 -0
  269. package/dist/views/SignUpView/SignUpView.d.ts +38 -0
  270. package/dist/views/SignUpView/SignUpView.d.ts.map +1 -0
  271. package/dist/views/SignUpView/SignUpView.types.d.ts +51 -0
  272. package/dist/views/SignUpView/SignUpView.types.d.ts.map +1 -0
  273. package/dist/views/SignUpView/icons.d.ts +18 -0
  274. package/dist/views/SignUpView/icons.d.ts.map +1 -0
  275. package/dist/views/SignUpView/index.d.ts +4 -0
  276. package/dist/views/SignUpView/index.d.ts.map +1 -0
  277. package/dist/views/TableLayoutView/TableLayoutView.d.ts +46 -0
  278. package/dist/views/TableLayoutView/TableLayoutView.d.ts.map +1 -0
  279. package/dist/views/TableLayoutView/TableLayoutView.types.d.ts +170 -0
  280. package/dist/views/TableLayoutView/TableLayoutView.types.d.ts.map +1 -0
  281. package/dist/views/TableLayoutView/icons.d.ts +27 -0
  282. package/dist/views/TableLayoutView/icons.d.ts.map +1 -0
  283. package/dist/views/TableLayoutView/index.d.ts +3 -0
  284. package/dist/views/TableLayoutView/index.d.ts.map +1 -0
  285. package/package.json +93 -92
  286. package/bin/install.cjs +0 -502
  287. package/bin/prepare-publish.cjs +0 -28
  288. package/bin/restore-folders.cjs +0 -28
  289. package/dist/,Business Logo.png +0 -0
  290. package/dist/.Siesa Logo.png +0 -0
  291. package/dist/bg_siesa.png +0 -0
  292. package/dist/index.cjs +0 -1479
  293. package/dist/index.cjs.map +0 -1
  294. package/dist/index.js +0 -1479
  295. package/dist/index.js.map +0 -1
  296. package/dist/siesa_logo_mobile.png +0 -0
  297. package/dist/vite.svg +0 -1
package/dist/index.cjs DELETED
@@ -1,1479 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const react = require("react");
5
- const Button = ({
6
- type = "default",
7
- size = "base",
8
- iconOnly = false,
9
- leftIcon,
10
- rightIcon,
11
- children,
12
- disabled = false,
13
- className = "",
14
- onClick,
15
- htmlType = "button",
16
- fullWidth = false,
17
- ariaLabel,
18
- badge = false,
19
- badgeCount,
20
- badgeColor = "red",
21
- ...rest
22
- }) => {
23
- const sizeClasses = {
24
- xs: iconOnly ? "h-6 w-6 p-1" : "h-6 py-1 px-2 gap-2",
25
- sm: iconOnly ? "h-7 w-7 p-1.5" : "h-7 py-1 px-2 gap-2",
26
- base: iconOnly ? "h-8 w-8 p-2" : "h-8 py-1.5 px-2.5 gap-2",
27
- l: iconOnly ? "h-9 w-9 p-2.5" : "h-9 py-2 px-3 gap-3",
28
- xl: iconOnly ? "h-10 w-10 p-3" : "h-10 py-2 px-4 gap-3"
29
- };
30
- const iconSizeClasses = {
31
- xs: "w-4 h-4",
32
- sm: "w-4 h-4",
33
- base: "w-4 h-4",
34
- l: "w-4 h-4",
35
- xl: "w-4 h-4"
36
- };
37
- const textSizeClasses = {
38
- xs: "text-xs",
39
- // Label Tiny - 12px
40
- sm: "text-sm",
41
- // Label Small - 14px
42
- base: "text-sm",
43
- // Label Small - 14px (default para base)
44
- l: "text-sm",
45
- // Label Small - 14px (corregido según Figma)
46
- xl: "text-sm"
47
- // Label Small - 14px (corregido según Figma)
48
- };
49
- const typeClasses = {
50
- default: `
51
- bg-primary-custom-600
52
- text-primary-inverse-content
53
- border
54
- border-primary-inverse-border
55
- shadow-button-inset
56
- hover:bg-primary-custom-500
57
- active:scale-95
58
- transition-all
59
- duration-150
60
- dark:bg-dark-bg-inverse
61
- dark:text-dark-content-inverse
62
- dark:border-dark-border-inverse
63
- dark:hover:bg-dark-bg-inverse/90
64
- `,
65
- outline: `
66
- bg-transparent
67
- text-primary-custom-600
68
- border
69
- border-primary-custom-300
70
- shadow-sm
71
- hover:bg-primary-custom-100
72
- active:scale-95
73
- transition-all
74
- duration-150
75
- dark:text-dark-content-custom
76
- dark:border-dark-border-custom
77
- dark:hover:bg-dark-bg-custom/20
78
- `,
79
- plain: `
80
- bg-transparent
81
- text-primary-custom-600
82
- border
83
- border-transparent
84
- hover:bg-hover-overlay
85
- active:scale-95
86
- transition-all
87
- duration-150
88
- dark:text-dark-content-custom
89
- dark:hover:bg-hover-overlay-dark
90
- `
91
- };
92
- const baseClasses = `
93
- inline-flex
94
- items-center
95
- justify-center
96
- rounded-md
97
- font-bold
98
- whitespace-nowrap
99
- focus:outline-none
100
- focus:ring-4
101
- focus:ring-primary-custom-400
102
- focus:ring-offset-2
103
- focus:ring-offset-primary-custom-100
104
- dark:focus:ring-dark-border-custom
105
- dark:focus:ring-offset-dark-bg-primary
106
- disabled:opacity-50
107
- disabled:cursor-not-allowed
108
- disabled:pointer-events-none
109
- `;
110
- const widthClass = fullWidth ? "w-full" : "";
111
- const buttonClasses = [
112
- baseClasses,
113
- sizeClasses[size],
114
- typeClasses[type],
115
- widthClass,
116
- className
117
- ].join(" ").replace(/\s+/g, " ").trim();
118
- const renderIcon = (icon) => {
119
- if (!icon) return null;
120
- return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center ${iconSizeClasses[size]}`, children: icon });
121
- };
122
- const renderContent = () => {
123
- if (iconOnly) {
124
- return renderIcon(leftIcon);
125
- }
126
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
127
- leftIcon && renderIcon(leftIcon),
128
- children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: textSizeClasses[size], children }),
129
- rightIcon && renderIcon(rightIcon)
130
- ] });
131
- };
132
- const badgeColorClasses = {
133
- zinc: { bg: "bg-zinc-600", text: "text-white" },
134
- red: { bg: "bg-red-700", text: "text-white" },
135
- orange: { bg: "bg-orange-700", text: "text-white" },
136
- amber: { bg: "bg-amber-700", text: "text-white" },
137
- yellow: { bg: "bg-yellow-700", text: "text-white" },
138
- lime: { bg: "bg-lime-700", text: "text-white" },
139
- green: { bg: "bg-green-700", text: "text-white" },
140
- emerald: { bg: "bg-emerald-700", text: "text-white" },
141
- teal: { bg: "bg-teal-700", text: "text-white" },
142
- cyan: { bg: "bg-cyan-700", text: "text-white" },
143
- sky: { bg: "bg-sky-700", text: "text-white" },
144
- blue: { bg: "bg-blue-700", text: "text-white" },
145
- indigo: { bg: "bg-indigo-700", text: "text-white" },
146
- violet: { bg: "bg-violet-700", text: "text-white" },
147
- purple: { bg: "bg-purple-700", text: "text-white" },
148
- fuchsia: { bg: "bg-fuchsia-700", text: "text-white" },
149
- pink: { bg: "bg-pink-700", text: "text-white" },
150
- rose: { bg: "bg-rose-700", text: "text-white" },
151
- primary: { bg: "bg-primary-custom-600", text: "text-white" },
152
- secondary: { bg: "bg-zinc-600", text: "text-white" },
153
- tertiary: { bg: "bg-zinc-600", text: "text-white" }
154
- };
155
- const badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;
156
- const renderBadge = () => {
157
- if (!badge && badgeCount === void 0) return null;
158
- if (badgeCount !== void 0) {
159
- return /* @__PURE__ */ jsxRuntime.jsx(
160
- "span",
161
- {
162
- className: `
163
- absolute
164
- -top-1
165
- -right-1
166
- flex
167
- items-center
168
- justify-center
169
- min-w-[16px]
170
- h-4
171
- px-1
172
- rounded-full
173
- text-[10px]
174
- font-bold
175
- leading-none
176
- ${badgeColors.bg}
177
- ${badgeColors.text}
178
- pointer-events-none
179
- `.trim().replace(/\s+/g, " "),
180
- "aria-label": `${badgeCount} notificaciones`,
181
- children: badgeCount > 99 ? "99+" : badgeCount
182
- }
183
- );
184
- }
185
- return /* @__PURE__ */ jsxRuntime.jsx(
186
- "span",
187
- {
188
- className: `
189
- absolute
190
- -top-1
191
- -right-1
192
- w-2
193
- h-2
194
- rounded-full
195
- ${badgeColors.bg}
196
- pointer-events-none
197
- `.trim().replace(/\s+/g, " "),
198
- "aria-label": "Notificación"
199
- }
200
- );
201
- };
202
- return /* @__PURE__ */ jsxRuntime.jsxs(
203
- "button",
204
- {
205
- type: htmlType,
206
- className: `${buttonClasses} ${badge || badgeCount !== void 0 ? "relative" : ""}`,
207
- disabled,
208
- onClick,
209
- "aria-label": ariaLabel,
210
- ...rest,
211
- children: [
212
- renderContent(),
213
- renderBadge()
214
- ]
215
- }
216
- );
217
- };
218
- const Input = react.forwardRef(
219
- ({
220
- label,
221
- labelSecondary,
222
- helperText,
223
- error = false,
224
- errorMessage,
225
- leftIcon,
226
- rightIcon,
227
- fullWidth = false,
228
- className = "",
229
- disabled = false,
230
- id,
231
- ...props
232
- }, ref) => {
233
- const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
234
- const baseInputClasses = `
235
- w-full
236
- px-3
237
- py-1.5
238
- text-sm
239
- leading-6
240
- font-normal
241
- text-content-primary
242
- bg-bg-primary
243
- border
244
- border-border-primary
245
- rounded-md
246
- outline-none
247
- transition-all
248
- duration-150
249
- placeholder:text-content-tertiary
250
- dark:bg-dark-bg-primary
251
- dark:border-dark-border-primary
252
- dark:text-dark-content-primary
253
- dark:placeholder:text-dark-content-tertiary
254
- `;
255
- const interactiveClasses = !disabled ? `
256
- hover:border-primary-custom-600
257
- focus:border-primary-custom-600
258
- focus:ring-2
259
- focus:ring-primary-custom-400
260
- focus:ring-offset-2
261
- dark:hover:border-dark-border-custom
262
- dark:focus:border-dark-border-custom
263
- dark:focus:ring-dark-border-custom
264
- dark:focus:ring-offset-dark-bg-primary
265
- ` : `
266
- opacity-50
267
- cursor-not-allowed
268
- bg-bg-secondary
269
- dark:bg-dark-bg-secondary
270
- `;
271
- const errorClasses = error ? `
272
- !border-error-border
273
- focus:!ring-error-border/30
274
- focus:!ring-offset-2
275
- dark:!border-error-border
276
- dark:focus:!ring-error-border/30
277
- dark:focus:!ring-offset-dark-bg-primary
278
- ` : "";
279
- const containerClasses = fullWidth ? "w-full" : "w-[265px]";
280
- const renderIcon = (icon) => {
281
- if (!icon) return null;
282
- const existingClassName = icon.props.className || "";
283
- return react.cloneElement(icon, {
284
- className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`
285
- });
286
- };
287
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-2 ${containerClasses} ${className}`, children: [
288
- label && /* @__PURE__ */ jsxRuntime.jsxs(
289
- "label",
290
- {
291
- htmlFor: inputId,
292
- className: "flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary",
293
- children: [
294
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: label }),
295
- labelSecondary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600", children: labelSecondary })
296
- ]
297
- }
298
- ),
299
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
300
- leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 pointer-events-none", children: renderIcon(leftIcon) }),
301
- /* @__PURE__ */ jsxRuntime.jsx(
302
- "input",
303
- {
304
- ref,
305
- id: inputId,
306
- disabled,
307
- className: `
308
- ${baseInputClasses}
309
- ${interactiveClasses}
310
- ${errorClasses}
311
- ${leftIcon ? "pl-9" : ""}
312
- ${rightIcon ? "pr-9" : ""}
313
- `.trim().replace(/\s+/g, " "),
314
- ...props
315
- }
316
- ),
317
- rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 pointer-events-none", children: renderIcon(rightIcon) })
318
- ] }),
319
- (helperText || errorMessage) && /* @__PURE__ */ jsxRuntime.jsx(
320
- "p",
321
- {
322
- className: `
323
- text-xs
324
- leading-5
325
- ${error ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-dark-content-tertiary"}
326
- `.trim().replace(/\s+/g, " "),
327
- children: error && errorMessage ? errorMessage : helperText
328
- }
329
- )
330
- ] });
331
- }
332
- );
333
- Input.displayName = "Input";
334
- const Textarea = react.forwardRef(
335
- ({
336
- label,
337
- description,
338
- helperText,
339
- error = false,
340
- errorMessage,
341
- fullWidth = false,
342
- resize = "vertical",
343
- className = "",
344
- disabled = false,
345
- id,
346
- rows = 4,
347
- ...props
348
- }, ref) => {
349
- const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
350
- const baseTextareaClasses = `
351
- w-full
352
- px-3
353
- pr-1.5
354
- py-1.5
355
- text-base
356
- leading-6
357
- font-normal
358
- bg-bg-primary
359
- border
360
- border-border-primary
361
- rounded-lg
362
- outline-none
363
- transition-all
364
- duration-150
365
- placeholder:text-content-tertiary
366
- dark:bg-dark-bg-primary
367
- dark:border-dark-border-primary
368
- dark:text-dark-content-primary
369
- dark:placeholder:text-dark-content-tertiary
370
- `;
371
- const interactiveClasses = !disabled ? `
372
- hover:border-zinc-400
373
- focus:border-2
374
- focus:border-primary-custom-600
375
- dark:hover:border-zinc-500
376
- dark:focus:border-2
377
- dark:focus:border-dark-border-custom
378
- ` : `
379
- opacity-50
380
- cursor-not-allowed
381
- bg-bg-secondary
382
- dark:bg-dark-bg-secondary
383
- `;
384
- const errorClasses = error ? `
385
- !border-error-border
386
- focus:!border-2
387
- focus:!border-error-border
388
- dark:!border-error-border
389
- dark:focus:!border-2
390
- dark:focus:!border-error-border
391
- ` : "";
392
- const resizeClasses = resize === "none" ? "resize-none" : resize === "vertical" ? "resize-y" : resize === "horizontal" ? "resize-x" : "resize";
393
- const containerClasses = fullWidth ? "w-full" : "w-[312px]";
394
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-2 ${containerClasses} ${className}`, children: [
395
- (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full", children: [
396
- label && /* @__PURE__ */ jsxRuntime.jsx(
397
- "label",
398
- {
399
- htmlFor: textareaId,
400
- className: "font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary",
401
- children: label
402
- }
403
- ),
404
- description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-5 text-content-secondary dark:text-dark-content-secondary", children: description })
405
- ] }),
406
- /* @__PURE__ */ jsxRuntime.jsx(
407
- "textarea",
408
- {
409
- ref,
410
- id: textareaId,
411
- disabled,
412
- rows,
413
- className: `
414
- ${baseTextareaClasses}
415
- ${interactiveClasses}
416
- ${errorClasses}
417
- ${resizeClasses}
418
- `.trim().replace(/\s+/g, " "),
419
- ...props
420
- }
421
- ),
422
- (helperText || errorMessage) && /* @__PURE__ */ jsxRuntime.jsx(
423
- "p",
424
- {
425
- className: `
426
- text-sm
427
- leading-5
428
- text-content-tertiary
429
- dark:text-dark-content-tertiary
430
- `.trim().replace(/\s+/g, " "),
431
- children: error && errorMessage ? errorMessage : helperText
432
- }
433
- )
434
- ] });
435
- }
436
- );
437
- Textarea.displayName = "Textarea";
438
- const Checkbox = react.forwardRef(
439
- ({
440
- label,
441
- description,
442
- checked = false,
443
- indeterminate = false,
444
- disabled = false,
445
- className = "",
446
- id,
447
- onChange,
448
- ...props
449
- }, ref) => {
450
- const inputRef = react.useRef(null);
451
- const combinedRef = ref || inputRef;
452
- const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
453
- react.useEffect(() => {
454
- if (combinedRef.current) {
455
- combinedRef.current.indeterminate = indeterminate;
456
- }
457
- }, [indeterminate, combinedRef]);
458
- const baseCheckboxClasses = `
459
- w-4
460
- h-4
461
- rounded
462
- border
463
- border-border-primary
464
- bg-bg-primary
465
- transition-all
466
- duration-150
467
- flex
468
- items-center
469
- justify-center
470
- dark:bg-dark-bg-primary
471
- dark:border-dark-border-primary
472
- `;
473
- const interactiveClasses = !disabled ? checked || indeterminate ? `
474
- peer-hover:border-[#50a5f7]
475
- peer-focus:ring-2
476
- peer-focus:ring-primary-custom-400/20
477
- peer-focus:border-primary-custom-600
478
- dark:peer-hover:border-[#50a5f7]
479
- dark:peer-focus:border-dark-border-custom
480
- dark:peer-focus:ring-dark-border-custom/20
481
- ` : `
482
- peer-hover:border-[#b6b6b9]
483
- peer-focus:ring-2
484
- peer-focus:ring-primary-custom-400/20
485
- peer-focus:border-primary-custom-600
486
- dark:peer-hover:border-[#b6b6b9]
487
- dark:peer-focus:border-dark-border-custom
488
- dark:peer-focus:ring-dark-border-custom/20
489
- ` : `
490
- opacity-50
491
- cursor-not-allowed
492
- `;
493
- const checkedClasses = checked || indeterminate ? `
494
- !bg-primary-custom-600
495
- !border-primary-custom-500
496
- shadow-button-inset
497
- dark:!bg-dark-bg-inverse
498
- dark:!border-dark-bg-inverse
499
- ` : "";
500
- const checkboxClasses = [
501
- baseCheckboxClasses,
502
- interactiveClasses,
503
- checkedClasses,
504
- disabled ? "cursor-not-allowed" : "cursor-pointer"
505
- ].join(" ").replace(/\s+/g, " ").trim();
506
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex gap-3 items-start ${className}`, children: [
507
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
508
- /* @__PURE__ */ jsxRuntime.jsx(
509
- "input",
510
- {
511
- ref: combinedRef,
512
- type: "checkbox",
513
- id: checkboxId,
514
- checked,
515
- disabled,
516
- onChange,
517
- className: "peer sr-only",
518
- ...props
519
- }
520
- ),
521
- /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: checkboxId, className: checkboxClasses, children: [
522
- checked && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
523
- "svg",
524
- {
525
- className: "w-3 h-3 text-primary-inverse-content pointer-events-none",
526
- viewBox: "0 0 12 12",
527
- fill: "none",
528
- xmlns: "http://www.w3.org/2000/svg",
529
- children: /* @__PURE__ */ jsxRuntime.jsx(
530
- "path",
531
- {
532
- d: "M10 3L4.5 8.5L2 6",
533
- stroke: "currentColor",
534
- strokeWidth: "2",
535
- strokeLinecap: "round",
536
- strokeLinejoin: "round"
537
- }
538
- )
539
- }
540
- ),
541
- indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
542
- "svg",
543
- {
544
- className: "w-3 h-3 text-primary-inverse-content pointer-events-none",
545
- viewBox: "0 0 12 12",
546
- fill: "none",
547
- xmlns: "http://www.w3.org/2000/svg",
548
- children: /* @__PURE__ */ jsxRuntime.jsx(
549
- "path",
550
- {
551
- d: "M2 6H10",
552
- stroke: "currentColor",
553
- strokeWidth: "2",
554
- strokeLinecap: "round"
555
- }
556
- )
557
- }
558
- )
559
- ] })
560
- ] }),
561
- (label || description) && /* @__PURE__ */ jsxRuntime.jsxs(
562
- "label",
563
- {
564
- htmlFor: checkboxId,
565
- className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
566
- children: [
567
- label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: label }),
568
- description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: description })
569
- ]
570
- }
571
- )
572
- ] });
573
- }
574
- );
575
- Checkbox.displayName = "Checkbox";
576
- const Radio = react.forwardRef(
577
- ({
578
- label,
579
- description,
580
- checked = false,
581
- disabled = false,
582
- className = "",
583
- id,
584
- onChange,
585
- value,
586
- name,
587
- ...props
588
- }, ref) => {
589
- const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
590
- const baseRadioClasses = `
591
- w-4
592
- h-4
593
- rounded-full
594
- border
595
- border-border-primary
596
- bg-bg-primary
597
- transition-all
598
- duration-150
599
- flex
600
- items-center
601
- justify-center
602
- dark:bg-dark-bg-primary
603
- dark:border-dark-border-primary
604
- `;
605
- const interactiveClasses = !disabled ? `
606
- peer-hover:border-primary-custom-600
607
- peer-focus:ring-2
608
- peer-focus:ring-primary-custom-400
609
- peer-focus:border-primary-custom-600
610
- dark:peer-hover:border-dark-border-custom
611
- dark:peer-focus:ring-dark-border-custom
612
- dark:peer-focus:border-dark-border-custom
613
- ` : `
614
- opacity-50
615
- cursor-not-allowed
616
- `;
617
- const checkedClasses = checked ? `
618
- !bg-primary-custom-600
619
- !border-primary-inverse-border
620
- shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
621
- dark:!bg-dark-bg-inverse
622
- dark:!border-dark-bg-inverse
623
- ` : "";
624
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-3 items-start ${className}`, children: [
625
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
626
- /* @__PURE__ */ jsxRuntime.jsx(
627
- "input",
628
- {
629
- ref,
630
- type: "radio",
631
- id: radioId,
632
- checked,
633
- disabled,
634
- onChange,
635
- value,
636
- name,
637
- className: "peer sr-only",
638
- ...props
639
- }
640
- ),
641
- /* @__PURE__ */ jsxRuntime.jsx(
642
- "label",
643
- {
644
- htmlFor: radioId,
645
- className: `
646
- ${baseRadioClasses}
647
- ${interactiveClasses}
648
- ${checkedClasses}
649
- ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
650
- `.trim().replace(/\s+/g, " "),
651
- children: checked && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" })
652
- }
653
- )
654
- ] }),
655
- (label || description) && /* @__PURE__ */ jsxRuntime.jsxs(
656
- "label",
657
- {
658
- htmlFor: radioId,
659
- className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
660
- children: [
661
- label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: label }),
662
- description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: description })
663
- ]
664
- }
665
- )
666
- ] });
667
- }
668
- );
669
- Radio.displayName = "Radio";
670
- const Switch = react.forwardRef(
671
- ({
672
- label,
673
- description,
674
- labelPosition = "leading",
675
- checked = false,
676
- disabled = false,
677
- className = "",
678
- id,
679
- onChange,
680
- ariaLabel,
681
- ...props
682
- }, ref) => {
683
- const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
684
- const baseTrackClasses = `
685
- w-8
686
- h-5
687
- rounded-xl
688
- border
689
- overflow-hidden
690
- relative
691
- transition-all
692
- duration-200
693
- `;
694
- const getTrackStateClasses = () => {
695
- if (disabled) {
696
- return checked ? `
697
- bg-primary-custom-600
698
- border-primary-inverse-border
699
- opacity-50
700
- cursor-not-allowed
701
- dark:bg-primary-custom-600
702
- dark:border-primary-inverse-border
703
- ` : `
704
- bg-[#fafafa]
705
- border-border-primary
706
- opacity-50
707
- cursor-not-allowed
708
- dark:bg-dark-bg-primary
709
- dark:border-dark-border-primary
710
- `;
711
- }
712
- return checked ? `
713
- bg-primary-custom-600
714
- border-primary-inverse-border
715
- cursor-pointer
716
- peer-hover:border-[#307cc5]
717
- peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
718
- dark:bg-primary-custom-600
719
- dark:border-primary-inverse-border
720
- dark:peer-hover:border-[#307cc5]
721
- dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
722
- ` : `
723
- bg-[#fafafa]
724
- border-border-primary
725
- cursor-pointer
726
- peer-hover:border-[#b6b6b9]
727
- peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
728
- dark:bg-dark-bg-primary
729
- dark:border-dark-border-primary
730
- dark:peer-hover:border-[#b6b6b9]
731
- dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
732
- `;
733
- };
734
- const getButtonClasses = () => {
735
- const baseButtonClasses = `
736
- absolute
737
- w-4
738
- h-4
739
- bg-white
740
- rounded-[10px]
741
- border
742
- top-1/2
743
- -translate-y-1/2
744
- transition-all
745
- duration-200
746
- `;
747
- const positionClass = checked ? "left-[13px]" : "left-px";
748
- if (disabled) {
749
- const borderClass2 = checked ? "border-primary-inverse-border dark:border-primary-inverse-border" : "border-border-primary dark:border-dark-border-primary";
750
- return `${baseButtonClasses} ${positionClass} ${borderClass2}`;
751
- }
752
- const borderClass = checked ? `
753
- border-primary-inverse-border
754
- peer-hover:border-[#307cc5]
755
- dark:border-primary-inverse-border
756
- dark:peer-hover:border-[#307cc5]
757
- ` : `
758
- border-border-primary
759
- peer-hover:border-[#b6b6b9]
760
- dark:border-dark-border-primary
761
- dark:peer-hover:border-[#b6b6b9]
762
- `;
763
- return `${baseButtonClasses} ${positionClass} ${borderClass}`;
764
- };
765
- const trackClasses = [
766
- baseTrackClasses,
767
- getTrackStateClasses()
768
- ].join(" ").replace(/\s+/g, " ").trim();
769
- const buttonClasses = getButtonClasses().replace(/\s+/g, " ").trim();
770
- const LabelContent = label || description ? /* @__PURE__ */ jsxRuntime.jsxs(
771
- "label",
772
- {
773
- htmlFor: switchId,
774
- className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
775
- children: [
776
- label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: label }),
777
- description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: description })
778
- ]
779
- }
780
- ) : null;
781
- const SwitchInput = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center shrink-0", children: [
782
- /* @__PURE__ */ jsxRuntime.jsx(
783
- "input",
784
- {
785
- ref,
786
- type: "checkbox",
787
- id: switchId,
788
- checked,
789
- disabled,
790
- onChange,
791
- className: "peer sr-only",
792
- "aria-label": ariaLabel || label,
793
- ...props
794
- }
795
- ),
796
- /* @__PURE__ */ jsxRuntime.jsx(
797
- "label",
798
- {
799
- htmlFor: switchId,
800
- className: trackClasses,
801
- "aria-hidden": "true",
802
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: buttonClasses })
803
- }
804
- )
805
- ] });
806
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex gap-2 items-center w-[344px] ${className}`, children: labelPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
807
- LabelContent,
808
- SwitchInput
809
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
810
- SwitchInput,
811
- LabelContent
812
- ] }) });
813
- }
814
- );
815
- Switch.displayName = "Switch";
816
- const Avatar = react.forwardRef(
817
- ({
818
- size = "10",
819
- type = "circular",
820
- src,
821
- alt = "",
822
- initials,
823
- className = "",
824
- ...props
825
- }, ref) => {
826
- const containerSizeClasses = {
827
- "4": "w-5 h-5",
828
- "6": "w-6 h-6",
829
- "8": "w-8 h-8",
830
- "10": "w-10 h-10"
831
- };
832
- const textSizeClasses = {
833
- "4": "text-xs",
834
- // 12px - Paragraph Tiny
835
- "6": "text-xs",
836
- // 12px - Paragraph Tiny
837
- "8": "text-sm",
838
- // 14px - Paragraph Small
839
- "10": "text-base"
840
- // 16px - Paragraph Base
841
- };
842
- const typeClasses = {
843
- circular: "rounded-full",
844
- rounded: "rounded-md"
845
- };
846
- const baseClasses = `
847
- relative
848
- inline-flex
849
- items-center
850
- justify-center
851
- overflow-hidden
852
- ${containerSizeClasses[size]}
853
- ${typeClasses[type]}
854
- `;
855
- if (src) {
856
- return /* @__PURE__ */ jsxRuntime.jsx(
857
- "div",
858
- {
859
- ref,
860
- className: `${baseClasses} ${className}`.trim().replace(/\s+/g, " "),
861
- children: /* @__PURE__ */ jsxRuntime.jsx(
862
- "img",
863
- {
864
- src,
865
- alt,
866
- className: "w-full h-full object-cover",
867
- ...props
868
- }
869
- )
870
- }
871
- );
872
- }
873
- if (initials) {
874
- return /* @__PURE__ */ jsxRuntime.jsx(
875
- "div",
876
- {
877
- ref,
878
- className: `
879
- ${baseClasses}
880
- ${textSizeClasses[size]}
881
- bg-content-primary
882
- text-white
883
- font-normal
884
- dark:bg-dark-bg-inverse
885
- dark:text-dark-content-inverse
886
- ${className}
887
- `.trim().replace(/\s+/g, " "),
888
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-none", children: initials })
889
- }
890
- );
891
- }
892
- return /* @__PURE__ */ jsxRuntime.jsx(
893
- "div",
894
- {
895
- ref,
896
- className: `
897
- ${baseClasses}
898
- bg-background-secondary
899
- dark:bg-dark-bg-primary
900
- ${className}
901
- `.trim().replace(/\s+/g, " ")
902
- }
903
- );
904
- }
905
- );
906
- Avatar.displayName = "Avatar";
907
- const Divider = react.forwardRef(
908
- ({
909
- type = "default",
910
- className = "",
911
- ...props
912
- }, ref) => {
913
- const typeClasses = {
914
- // Default: Línea más visible para separaciones claras
915
- // Light: border-primary (#e4e4e7)
916
- // Dark: dark-border-primary (#71717a)
917
- default: "bg-border-primary dark:bg-dark-border-primary",
918
- // Soft: Línea más sutil para separaciones suaves
919
- // Light: border-secondary (#f4f4f5 - muy claro)
920
- // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)
921
- soft: "bg-border-secondary dark:bg-gray-700"
922
- };
923
- const baseClasses = "w-full h-px border-0";
924
- const finalClasses = [
925
- baseClasses,
926
- typeClasses[type],
927
- className
928
- ].join(" ").replace(/\s+/g, " ").trim();
929
- return /* @__PURE__ */ jsxRuntime.jsx(
930
- "hr",
931
- {
932
- ref,
933
- className: finalClasses,
934
- ...props
935
- }
936
- );
937
- }
938
- );
939
- Divider.displayName = "Divider";
940
- const DescriptionList = react.forwardRef(
941
- ({
942
- term,
943
- details,
944
- className = "",
945
- ...props
946
- }, ref) => {
947
- const baseClasses = `
948
- flex
949
- flex-wrap
950
- gap-1
951
- items-start
952
- py-2.5
953
- border-b
954
- border-border-secondary
955
- dark:border-gray-700
956
- `;
957
- const columnClasses = "flex-1 min-w-[180px]";
958
- const finalClasses = [baseClasses, className].join(" ").replace(/\s+/g, " ").trim();
959
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: finalClasses, ...props, children: [
960
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: columnClasses, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal", children: term }) }),
961
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: columnClasses, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal", children: details }) })
962
- ] });
963
- }
964
- );
965
- DescriptionList.displayName = "DescriptionList";
966
- const Alert = react.forwardRef(
967
- ({
968
- title,
969
- description,
970
- children,
971
- actions,
972
- onCancel,
973
- onConfirm,
974
- cancelText = "Cancelar",
975
- confirmText = "Confirmar",
976
- className = "",
977
- ...props
978
- }, ref) => {
979
- const actionButtons = actions || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
980
- onCancel && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "plain", size: "base", onClick: onCancel, children: cancelText }),
981
- onConfirm && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "default", size: "base", onClick: onConfirm, children: confirmText })
982
- ] });
983
- return /* @__PURE__ */ jsxRuntime.jsx(
984
- "div",
985
- {
986
- ref,
987
- className: `
988
- w-[512px]
989
- bg-white
990
- dark:bg-dark-bg-primary
991
- border
992
- border-border-primary
993
- dark:border-dark-border-primary
994
- rounded-xl
995
- ${className}
996
- `.trim().replace(/\s+/g, " "),
997
- ...props,
998
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 flex flex-col gap-4", children: [
999
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
1000
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: title }),
1001
- description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary", children: description })
1002
- ] }),
1003
- children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children }),
1004
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 items-center justify-end", children: actionButtons })
1005
- ] })
1006
- }
1007
- );
1008
- }
1009
- );
1010
- Alert.displayName = "Alert";
1011
- const Badge = react.forwardRef(
1012
- ({
1013
- color = "zinc",
1014
- leftIcon,
1015
- label,
1016
- count,
1017
- className = "",
1018
- ...props
1019
- }, ref) => {
1020
- const colorClasses = {
1021
- zinc: {
1022
- bg: "bg-zinc-100",
1023
- text: "text-zinc-600",
1024
- hover: "hover:bg-zinc-200",
1025
- notificationBg: "bg-zinc-600",
1026
- notificationText: "text-zinc-100"
1027
- },
1028
- red: {
1029
- bg: "bg-red-100",
1030
- text: "text-red-700",
1031
- hover: "hover:bg-red-200",
1032
- notificationBg: "bg-red-700",
1033
- notificationText: "text-red-100"
1034
- },
1035
- orange: {
1036
- bg: "bg-orange-100",
1037
- text: "text-orange-700",
1038
- hover: "hover:bg-orange-200",
1039
- notificationBg: "bg-orange-700",
1040
- notificationText: "text-orange-100"
1041
- },
1042
- amber: {
1043
- bg: "bg-amber-100",
1044
- text: "text-amber-700",
1045
- hover: "hover:bg-amber-200",
1046
- notificationBg: "bg-amber-700",
1047
- notificationText: "text-amber-100"
1048
- },
1049
- yellow: {
1050
- bg: "bg-yellow-100",
1051
- text: "text-yellow-700",
1052
- hover: "hover:bg-yellow-200",
1053
- notificationBg: "bg-yellow-700",
1054
- notificationText: "text-yellow-100"
1055
- },
1056
- lime: {
1057
- bg: "bg-lime-100",
1058
- text: "text-lime-700",
1059
- hover: "hover:bg-lime-200",
1060
- notificationBg: "bg-lime-700",
1061
- notificationText: "text-lime-100"
1062
- },
1063
- green: {
1064
- bg: "bg-green-100",
1065
- text: "text-green-700",
1066
- hover: "hover:bg-green-200",
1067
- notificationBg: "bg-green-700",
1068
- notificationText: "text-green-100"
1069
- },
1070
- emerald: {
1071
- bg: "bg-emerald-100",
1072
- text: "text-emerald-700",
1073
- hover: "hover:bg-emerald-200",
1074
- notificationBg: "bg-emerald-700",
1075
- notificationText: "text-emerald-100"
1076
- },
1077
- teal: {
1078
- bg: "bg-teal-100",
1079
- text: "text-teal-700",
1080
- hover: "hover:bg-teal-200",
1081
- notificationBg: "bg-teal-700",
1082
- notificationText: "text-teal-100"
1083
- },
1084
- cyan: {
1085
- bg: "bg-cyan-100",
1086
- text: "text-cyan-700",
1087
- hover: "hover:bg-cyan-200",
1088
- notificationBg: "bg-cyan-700",
1089
- notificationText: "text-cyan-100"
1090
- },
1091
- sky: {
1092
- bg: "bg-sky-100",
1093
- text: "text-sky-700",
1094
- hover: "hover:bg-sky-200",
1095
- notificationBg: "bg-sky-700",
1096
- notificationText: "text-sky-100"
1097
- },
1098
- blue: {
1099
- bg: "bg-blue-100",
1100
- text: "text-blue-700",
1101
- hover: "hover:bg-blue-200",
1102
- notificationBg: "bg-blue-700",
1103
- notificationText: "text-blue-100"
1104
- },
1105
- indigo: {
1106
- bg: "bg-indigo-100",
1107
- text: "text-indigo-700",
1108
- hover: "hover:bg-indigo-200",
1109
- notificationBg: "bg-indigo-700",
1110
- notificationText: "text-indigo-100"
1111
- },
1112
- violet: {
1113
- bg: "bg-violet-100",
1114
- text: "text-violet-700",
1115
- hover: "hover:bg-violet-200",
1116
- notificationBg: "bg-violet-700",
1117
- notificationText: "text-violet-100"
1118
- },
1119
- purple: {
1120
- bg: "bg-purple-100",
1121
- text: "text-purple-700",
1122
- hover: "hover:bg-purple-200",
1123
- notificationBg: "bg-purple-700",
1124
- notificationText: "text-purple-100"
1125
- },
1126
- fuchsia: {
1127
- bg: "bg-fuchsia-100",
1128
- text: "text-fuchsia-700",
1129
- hover: "hover:bg-fuchsia-200",
1130
- notificationBg: "bg-fuchsia-700",
1131
- notificationText: "text-fuchsia-100"
1132
- },
1133
- pink: {
1134
- bg: "bg-pink-100",
1135
- text: "text-pink-700",
1136
- hover: "hover:bg-pink-200",
1137
- notificationBg: "bg-pink-700",
1138
- notificationText: "text-pink-100"
1139
- },
1140
- rose: {
1141
- bg: "bg-rose-100",
1142
- text: "text-rose-700",
1143
- hover: "hover:bg-rose-200",
1144
- notificationBg: "bg-rose-700",
1145
- notificationText: "text-rose-100"
1146
- },
1147
- primary: {
1148
- bg: "bg-primary-custom-100",
1149
- text: "text-primary-custom-600",
1150
- hover: "hover:bg-primary-custom-200",
1151
- notificationBg: "bg-primary-custom-600",
1152
- notificationText: "text-primary-custom-100"
1153
- },
1154
- secondary: {
1155
- bg: "bg-zinc-100",
1156
- text: "text-zinc-600",
1157
- hover: "hover:bg-zinc-200",
1158
- notificationBg: "bg-zinc-600",
1159
- notificationText: "text-zinc-100"
1160
- },
1161
- tertiary: {
1162
- bg: "bg-zinc-100",
1163
- text: "text-zinc-600",
1164
- hover: "hover:bg-zinc-200",
1165
- notificationBg: "bg-zinc-600",
1166
- notificationText: "text-zinc-100"
1167
- }
1168
- };
1169
- const colors = colorClasses[color];
1170
- const renderIcon = (icon) => {
1171
- const existingClassName = icon.props.className || "";
1172
- return react.cloneElement(icon, {
1173
- className: `w-3 h-3 ${existingClassName}`.trim()
1174
- });
1175
- };
1176
- const finalClasses = [
1177
- "inline-flex",
1178
- "items-center",
1179
- "gap-1",
1180
- "px-1.5",
1181
- "py-1",
1182
- "rounded-md",
1183
- "font-sans",
1184
- colors.bg,
1185
- colors.hover,
1186
- "transition-colors",
1187
- "duration-200",
1188
- className
1189
- ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
1190
- return /* @__PURE__ */ jsxRuntime.jsxs(
1191
- "div",
1192
- {
1193
- ref,
1194
- className: finalClasses,
1195
- ...props,
1196
- children: [
1197
- leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center justify-center ${colors.text}`, children: renderIcon(leftIcon) }),
1198
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-sans text-xs leading-4 ${colors.text}`, children: label }),
1199
- count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1200
- "div",
1201
- {
1202
- className: `
1203
- h-3
1204
- flex
1205
- items-center
1206
- justify-center
1207
- px-0.5
1208
- rounded-sm
1209
- min-w-[12px]
1210
- ${colors.notificationBg}
1211
- `.trim().replace(/\s+/g, " "),
1212
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-sans text-xs leading-4 ${colors.notificationText}`, children: count })
1213
- }
1214
- )
1215
- ]
1216
- }
1217
- );
1218
- }
1219
- );
1220
- Badge.displayName = "Badge";
1221
- const Quantity = react.forwardRef(
1222
- ({
1223
- value: controlledValue,
1224
- defaultValue = 0,
1225
- onChange,
1226
- min = 0,
1227
- max,
1228
- label,
1229
- linkText,
1230
- onLinkClick,
1231
- helperText,
1232
- error = false,
1233
- disabled = false,
1234
- className = "",
1235
- ...props
1236
- }, ref) => {
1237
- const [internalValue, setInternalValue] = react.useState(defaultValue);
1238
- const isControlled = controlledValue !== void 0;
1239
- const currentValue = isControlled ? controlledValue : internalValue;
1240
- react.useEffect(() => {
1241
- if (!isControlled) {
1242
- setInternalValue(defaultValue);
1243
- }
1244
- }, [defaultValue, isControlled]);
1245
- const handleValueChange = (newValue) => {
1246
- let clampedValue = newValue;
1247
- if (min !== void 0 && clampedValue < min) {
1248
- clampedValue = min;
1249
- }
1250
- if (max !== void 0 && clampedValue > max) {
1251
- clampedValue = max;
1252
- }
1253
- if (!isControlled) {
1254
- setInternalValue(clampedValue);
1255
- }
1256
- onChange?.(clampedValue);
1257
- };
1258
- const handleDecrement = () => {
1259
- if (disabled) return;
1260
- handleValueChange(currentValue - 1);
1261
- };
1262
- const handleIncrement = () => {
1263
- if (disabled) return;
1264
- handleValueChange(currentValue + 1);
1265
- };
1266
- const isDecrementDisabled = disabled || min !== void 0 && currentValue <= min;
1267
- const isIncrementDisabled = disabled || max !== void 0 && currentValue >= max;
1268
- const MinusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
1269
- "svg",
1270
- {
1271
- width: "16",
1272
- height: "16",
1273
- viewBox: "0 0 16 16",
1274
- fill: "none",
1275
- xmlns: "http://www.w3.org/2000/svg",
1276
- children: /* @__PURE__ */ jsxRuntime.jsx(
1277
- "path",
1278
- {
1279
- d: "M3 8H13",
1280
- stroke: "currentColor",
1281
- strokeWidth: "1.5",
1282
- strokeLinecap: "round",
1283
- strokeLinejoin: "round"
1284
- }
1285
- )
1286
- }
1287
- );
1288
- const PlusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
1289
- "svg",
1290
- {
1291
- width: "16",
1292
- height: "16",
1293
- viewBox: "0 0 16 16",
1294
- fill: "none",
1295
- xmlns: "http://www.w3.org/2000/svg",
1296
- children: /* @__PURE__ */ jsxRuntime.jsx(
1297
- "path",
1298
- {
1299
- d: "M8 3V13M3 8H13",
1300
- stroke: "currentColor",
1301
- strokeWidth: "1.5",
1302
- strokeLinecap: "round",
1303
- strokeLinejoin: "round"
1304
- }
1305
- )
1306
- }
1307
- );
1308
- const borderClass = error ? "border-error-border dark:border-error-border" : "border-border-primary dark:border-dark-border-primary";
1309
- const hoverClass = !disabled && !error ? "hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]" : "";
1310
- const focusClass = !disabled && !error ? "focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]" : "";
1311
- return /* @__PURE__ */ jsxRuntime.jsxs(
1312
- "div",
1313
- {
1314
- ref,
1315
- className: `flex flex-col gap-2 ${className}`.trim(),
1316
- ...props,
1317
- children: [
1318
- label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
1319
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: label }),
1320
- linkText && /* @__PURE__ */ jsxRuntime.jsx(
1321
- "button",
1322
- {
1323
- type: "button",
1324
- onClick: onLinkClick,
1325
- disabled,
1326
- className: `
1327
- text-xs leading-4
1328
- text-primary-custom-600
1329
- hover:underline
1330
- dark:text-primary-custom-600
1331
- ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
1332
- transition-colors
1333
- duration-200
1334
- `.trim().replace(/\s+/g, " "),
1335
- children: linkText
1336
- }
1337
- )
1338
- ] }),
1339
- /* @__PURE__ */ jsxRuntime.jsxs(
1340
- "div",
1341
- {
1342
- className: `
1343
- flex
1344
- items-center
1345
- gap-2
1346
- px-3
1347
- py-1.5
1348
- bg-white
1349
- dark:bg-dark-bg-primary
1350
- border
1351
- ${borderClass}
1352
- ${hoverClass}
1353
- ${focusClass}
1354
- rounded-lg
1355
- transition-colors
1356
- duration-200
1357
- ${disabled ? "opacity-50 cursor-not-allowed" : ""}
1358
- `.trim().replace(/\s+/g, " "),
1359
- children: [
1360
- /* @__PURE__ */ jsxRuntime.jsx(
1361
- "button",
1362
- {
1363
- type: "button",
1364
- onClick: handleDecrement,
1365
- disabled: isDecrementDisabled,
1366
- className: `
1367
- flex
1368
- items-center
1369
- justify-center
1370
- w-4
1371
- h-4
1372
- ${isDecrementDisabled ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
1373
- transition-colors
1374
- duration-200
1375
- `.trim().replace(/\s+/g, " "),
1376
- "aria-label": "Decrementar",
1377
- children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {})
1378
- }
1379
- ),
1380
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
1381
- "span",
1382
- {
1383
- className: `
1384
- text-base leading-6
1385
- ${currentValue === 0 ? "text-content-tertiary dark:text-content-tertiary" : "text-content-primary dark:text-dark-content-primary"}
1386
- `.trim().replace(/\s+/g, " "),
1387
- children: currentValue
1388
- }
1389
- ) }),
1390
- /* @__PURE__ */ jsxRuntime.jsx(
1391
- "button",
1392
- {
1393
- type: "button",
1394
- onClick: handleIncrement,
1395
- disabled: isIncrementDisabled,
1396
- className: `
1397
- flex
1398
- items-center
1399
- justify-center
1400
- w-4
1401
- h-4
1402
- ${isIncrementDisabled ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
1403
- transition-colors
1404
- duration-200
1405
- `.trim().replace(/\s+/g, " "),
1406
- "aria-label": "Incrementar",
1407
- children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {})
1408
- }
1409
- )
1410
- ]
1411
- }
1412
- ),
1413
- helperText && /* @__PURE__ */ jsxRuntime.jsx(
1414
- "p",
1415
- {
1416
- className: `
1417
- text-sm leading-5
1418
- ${error ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-content-tertiary"}
1419
- `.trim().replace(/\s+/g, " "),
1420
- children: helperText
1421
- }
1422
- )
1423
- ]
1424
- }
1425
- );
1426
- }
1427
- );
1428
- Quantity.displayName = "Quantity";
1429
- const ThemeContext = react.createContext(void 0);
1430
- const ThemeProvider = ({
1431
- children,
1432
- defaultTheme = "light"
1433
- }) => {
1434
- const [theme, setThemeState] = react.useState(() => {
1435
- if (typeof window !== "undefined") {
1436
- const savedTheme = localStorage.getItem("siesa-ui-theme");
1437
- return savedTheme || defaultTheme;
1438
- }
1439
- return defaultTheme;
1440
- });
1441
- react.useEffect(() => {
1442
- const root = window.document.documentElement;
1443
- if (theme === "dark") {
1444
- root.classList.add("dark");
1445
- } else {
1446
- root.classList.remove("dark");
1447
- }
1448
- localStorage.setItem("siesa-ui-theme", theme);
1449
- }, [theme]);
1450
- const toggleTheme = () => {
1451
- setThemeState((prev) => prev === "light" ? "dark" : "light");
1452
- };
1453
- const setTheme = (newTheme) => {
1454
- setThemeState(newTheme);
1455
- };
1456
- return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
1457
- };
1458
- const useTheme = () => {
1459
- const context = react.useContext(ThemeContext);
1460
- if (context === void 0) {
1461
- throw new Error("useTheme debe ser usado dentro de un ThemeProvider");
1462
- }
1463
- return context;
1464
- };
1465
- exports.Alert = Alert;
1466
- exports.Avatar = Avatar;
1467
- exports.Badge = Badge;
1468
- exports.Button = Button;
1469
- exports.Checkbox = Checkbox;
1470
- exports.DescriptionList = DescriptionList;
1471
- exports.Divider = Divider;
1472
- exports.Input = Input;
1473
- exports.Quantity = Quantity;
1474
- exports.Radio = Radio;
1475
- exports.Switch = Switch;
1476
- exports.Textarea = Textarea;
1477
- exports.ThemeProvider = ThemeProvider;
1478
- exports.useTheme = useTheme;
1479
- //# sourceMappingURL=index.cjs.map