@giddaa-housing/ui 1.0.0 → 1.1.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 (326) hide show
  1. package/css/generated/shared.css +1 -1
  2. package/dist/accordion.d.ts +9 -10
  3. package/dist/accordion.js +41 -87
  4. package/dist/activity-timeline.d.ts +12 -16
  5. package/dist/activity-timeline.js +83 -198
  6. package/dist/alert.d.ts +8 -9
  7. package/dist/alert.js +53 -111
  8. package/dist/auth-layout.d.ts +4 -4
  9. package/dist/auth-layout.js +143 -294
  10. package/dist/avatar.d.ts +6 -6
  11. package/dist/avatar.js +49 -19
  12. package/dist/badge.d.ts +12 -14
  13. package/dist/badge.js +71 -11
  14. package/dist/bar-chart.d.ts +65 -67
  15. package/dist/bar-chart.js +232 -207
  16. package/dist/breadcrumb.d.ts +5 -5
  17. package/dist/breadcrumb.js +56 -118
  18. package/dist/bullet-chart.d.ts +33 -33
  19. package/dist/bullet-chart.js +121 -148
  20. package/dist/button-BZIeyUw6.d.ts +17 -0
  21. package/dist/button-group.d.ts +13 -16
  22. package/dist/button-group.js +39 -88
  23. package/dist/button.d.ts +2 -19
  24. package/dist/button.js +94 -13
  25. package/dist/calendar.d.ts +6 -6
  26. package/dist/calendar.js +138 -17
  27. package/dist/card.d.ts +14 -16
  28. package/dist/card.js +59 -145
  29. package/dist/carousel.d.ts +34 -35
  30. package/dist/carousel.js +335 -20
  31. package/dist/chart.d.ts +58 -59
  32. package/dist/chart.js +376 -28
  33. package/dist/checkbox.d.ts +10 -12
  34. package/dist/checkbox.js +82 -47
  35. package/dist/cn-BI_4DMBf.js +23 -0
  36. package/dist/collapsible.d.ts +7 -8
  37. package/dist/collapsible.js +22 -47
  38. package/dist/combobox.d.ts +10 -10
  39. package/dist/combobox.js +236 -44
  40. package/dist/cta.d.ts +12 -14
  41. package/dist/cta.js +175 -341
  42. package/dist/currency-selector.d.ts +31 -32
  43. package/dist/currency-selector.js +106 -184
  44. package/dist/data-table.d.ts +164 -0
  45. package/dist/data-table.js +673 -0
  46. package/dist/date-picker.d.ts +22 -23
  47. package/dist/date-picker.js +119 -192
  48. package/dist/details-card.d.ts +7 -7
  49. package/dist/details-card.js +104 -253
  50. package/dist/dialog.d.ts +13 -14
  51. package/dist/dialog.js +116 -209
  52. package/dist/dropdown-menu.d.ts +13 -13
  53. package/dist/dropdown-menu.js +180 -37
  54. package/dist/dropzone.d.ts +55 -55
  55. package/dist/dropzone.js +327 -439
  56. package/dist/editorial-card.d.ts +23 -25
  57. package/dist/editorial-card.js +129 -296
  58. package/dist/empty-state.d.ts +8 -9
  59. package/dist/empty-state.js +48 -105
  60. package/dist/field.d.ts +23 -25
  61. package/dist/field.js +110 -221
  62. package/dist/filter.d.ts +118 -0
  63. package/dist/filter.js +775 -0
  64. package/dist/footer.d.ts +8 -15
  65. package/dist/footer.js +197 -400
  66. package/dist/funnel-chart.d.ts +38 -41
  67. package/dist/funnel-chart.js +167 -189
  68. package/dist/gallery-indicator.d.ts +11 -12
  69. package/dist/gallery-indicator.js +75 -12
  70. package/dist/heatmap-chart.d.ts +47 -50
  71. package/dist/heatmap-chart.js +186 -237
  72. package/dist/infotip.d.ts +8 -9
  73. package/dist/infotip.js +33 -59
  74. package/dist/input-CfoEJ8A6.d.ts +12 -0
  75. package/dist/input-group.d.ts +16 -20
  76. package/dist/input-group.js +99 -23
  77. package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
  78. package/dist/input-size-context.d.ts +2 -11
  79. package/dist/input-size-context.js +17 -9
  80. package/dist/input.d.ts +2 -13
  81. package/dist/input.js +27 -11
  82. package/dist/item.d.ts +7 -8
  83. package/dist/item.js +22 -59
  84. package/dist/kpi-card.d.ts +18 -20
  85. package/dist/kpi-card.js +84 -192
  86. package/dist/label.d.ts +6 -6
  87. package/dist/label.js +40 -8
  88. package/dist/line-chart.d.ts +88 -89
  89. package/dist/line-chart.js +142 -104
  90. package/dist/logo.d.ts +4 -4
  91. package/dist/logo.js +92 -9
  92. package/dist/map-indicator.d.ts +7 -7
  93. package/dist/map-indicator.js +80 -106
  94. package/dist/match.d.ts +10 -11
  95. package/dist/match.js +62 -107
  96. package/dist/media-gallery-hero.d.ts +40 -42
  97. package/dist/media-gallery-hero.js +182 -343
  98. package/dist/media-player.d.ts +17 -17
  99. package/dist/media-player.js +873 -1348
  100. package/dist/multi-step-form.d.ts +56 -0
  101. package/dist/multi-step-form.js +342 -0
  102. package/dist/number-input.d.ts +34 -34
  103. package/dist/number-input.js +61 -117
  104. package/dist/page-header.d.ts +10 -11
  105. package/dist/page-header.js +34 -79
  106. package/dist/pagination.d.ts +17 -21
  107. package/dist/pagination.js +132 -207
  108. package/dist/password-input.d.ts +5 -13
  109. package/dist/password-input.js +31 -55
  110. package/dist/phone-input.d.ts +19 -20
  111. package/dist/phone-input.js +226 -344
  112. package/dist/photo-gallery.d.ts +19 -19
  113. package/dist/photo-gallery.js +313 -449
  114. package/dist/picker-lzgmsNfG.js +32 -0
  115. package/dist/pie-chart.d.ts +60 -60
  116. package/dist/pie-chart.js +140 -148
  117. package/dist/popover.d.ts +9 -9
  118. package/dist/popover.js +72 -23
  119. package/dist/price-tag.d.ts +26 -27
  120. package/dist/price-tag.js +113 -173
  121. package/dist/progress.d.ts +16 -17
  122. package/dist/progress.js +169 -24
  123. package/dist/property-listing-card.d.ts +14 -17
  124. package/dist/property-listing-card.js +102 -220
  125. package/dist/radar-chart.d.ts +29 -31
  126. package/dist/radar-chart.js +162 -137
  127. package/dist/radio-group.d.ts +11 -13
  128. package/dist/radio-group.js +46 -60
  129. package/dist/review-block.d.ts +14 -16
  130. package/dist/review-block.js +154 -10
  131. package/dist/rich-text-editor.d.ts +30 -14
  132. package/dist/rich-text-editor.js +592 -716
  133. package/dist/scatter-chart.d.ts +45 -47
  134. package/dist/scatter-chart.js +236 -240
  135. package/dist/search-input.d.ts +8 -16
  136. package/dist/search-input.js +57 -109
  137. package/dist/select.d.ts +8 -8
  138. package/dist/select.js +144 -27
  139. package/dist/separator.d.ts +8 -9
  140. package/dist/separator.js +32 -8
  141. package/dist/sheet.d.ts +11 -11
  142. package/dist/sheet.js +103 -24
  143. package/dist/sidebar.d.ts +32 -37
  144. package/dist/sidebar.js +364 -634
  145. package/dist/size-context-D4mYvcg8.d.ts +10 -0
  146. package/dist/size-context.d.ts +2 -11
  147. package/dist/size-context.js +17 -9
  148. package/dist/skeleton.d.ts +4 -5
  149. package/dist/skeleton.js +12 -8
  150. package/dist/slider.d.ts +8 -9
  151. package/dist/slider.js +64 -135
  152. package/dist/sparkline.d.ts +43 -46
  153. package/dist/sparkline.js +221 -251
  154. package/dist/stepper.d.ts +23 -24
  155. package/dist/stepper.js +149 -246
  156. package/dist/styles.css +510 -108
  157. package/dist/switch.d.ts +10 -12
  158. package/dist/switch.js +48 -70
  159. package/dist/table-card.d.ts +35 -0
  160. package/dist/table-card.js +125 -0
  161. package/dist/table.d.ts +18 -14
  162. package/dist/table.js +113 -154
  163. package/dist/tabs.d.ts +23 -15
  164. package/dist/tabs.js +71 -18
  165. package/dist/tag.d.ts +21 -23
  166. package/dist/tag.js +103 -159
  167. package/dist/testimonial-block.d.ts +18 -19
  168. package/dist/testimonial-block.js +189 -358
  169. package/dist/textarea-IS_D8pXf.d.ts +11 -0
  170. package/dist/textarea.d.ts +2 -12
  171. package/dist/textarea.js +24 -11
  172. package/dist/time-picker.d.ts +11 -11
  173. package/dist/time-picker.js +245 -302
  174. package/dist/toast.d.ts +16 -18
  175. package/dist/toast.js +154 -205
  176. package/dist/tooltip.d.ts +8 -9
  177. package/dist/tooltip.js +37 -12
  178. package/dist/tree-map.d.ts +54 -57
  179. package/dist/tree-map.js +227 -269
  180. package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
  181. package/dist/waterfall-chart.d.ts +94 -97
  182. package/dist/waterfall-chart.js +455 -552
  183. package/package.json +28 -9
  184. package/dist/accordion.js.map +0 -1
  185. package/dist/activity-timeline.js.map +0 -1
  186. package/dist/alert.js.map +0 -1
  187. package/dist/auth-layout.js.map +0 -1
  188. package/dist/avatar.js.map +0 -1
  189. package/dist/badge.js.map +0 -1
  190. package/dist/bar-chart.js.map +0 -1
  191. package/dist/breadcrumb.js.map +0 -1
  192. package/dist/bullet-chart.js.map +0 -1
  193. package/dist/button-group.js.map +0 -1
  194. package/dist/button.js.map +0 -1
  195. package/dist/calendar.js.map +0 -1
  196. package/dist/card.js.map +0 -1
  197. package/dist/carousel.js.map +0 -1
  198. package/dist/chart.js.map +0 -1
  199. package/dist/checkbox.js.map +0 -1
  200. package/dist/chunk-322YCNVL.js +0 -278
  201. package/dist/chunk-322YCNVL.js.map +0 -1
  202. package/dist/chunk-3ACQVT7A.js +0 -25
  203. package/dist/chunk-3ACQVT7A.js.map +0 -1
  204. package/dist/chunk-3T65TLJX.js +0 -334
  205. package/dist/chunk-3T65TLJX.js.map +0 -1
  206. package/dist/chunk-6ZSGQHH2.js +0 -192
  207. package/dist/chunk-6ZSGQHH2.js.map +0 -1
  208. package/dist/chunk-7TBMLFGW.js +0 -41
  209. package/dist/chunk-7TBMLFGW.js.map +0 -1
  210. package/dist/chunk-B4H6RNDH.js +0 -135
  211. package/dist/chunk-B4H6RNDH.js.map +0 -1
  212. package/dist/chunk-BUXCGZ6X.js +0 -219
  213. package/dist/chunk-BUXCGZ6X.js.map +0 -1
  214. package/dist/chunk-CHII2QHH.js +0 -58
  215. package/dist/chunk-CHII2QHH.js.map +0 -1
  216. package/dist/chunk-DMNOXRRW.js +0 -147
  217. package/dist/chunk-DMNOXRRW.js.map +0 -1
  218. package/dist/chunk-EFSOSSIC.js +0 -130
  219. package/dist/chunk-EFSOSSIC.js.map +0 -1
  220. package/dist/chunk-FZDSVMKY.js +0 -363
  221. package/dist/chunk-FZDSVMKY.js.map +0 -1
  222. package/dist/chunk-GJOFIJS3.js +0 -246
  223. package/dist/chunk-GJOFIJS3.js.map +0 -1
  224. package/dist/chunk-HL3ZSYES.js +0 -23
  225. package/dist/chunk-HL3ZSYES.js.map +0 -1
  226. package/dist/chunk-JVLUBAPB.js +0 -129
  227. package/dist/chunk-JVLUBAPB.js.map +0 -1
  228. package/dist/chunk-KDPYSOYZ.js +0 -64
  229. package/dist/chunk-KDPYSOYZ.js.map +0 -1
  230. package/dist/chunk-KSMDANKI.js +0 -43
  231. package/dist/chunk-KSMDANKI.js.map +0 -1
  232. package/dist/chunk-MEKCCOP5.js +0 -46
  233. package/dist/chunk-MEKCCOP5.js.map +0 -1
  234. package/dist/chunk-NOFXVRWL.js +0 -451
  235. package/dist/chunk-NOFXVRWL.js.map +0 -1
  236. package/dist/chunk-PC5MHNVA.js +0 -171
  237. package/dist/chunk-PC5MHNVA.js.map +0 -1
  238. package/dist/chunk-QKAQZ2GU.js +0 -122
  239. package/dist/chunk-QKAQZ2GU.js.map +0 -1
  240. package/dist/chunk-QZHSHSVV.js +0 -26
  241. package/dist/chunk-QZHSHSVV.js.map +0 -1
  242. package/dist/chunk-RBMK26XD.js +0 -19
  243. package/dist/chunk-RBMK26XD.js.map +0 -1
  244. package/dist/chunk-SFNJGF6M.js +0 -262
  245. package/dist/chunk-SFNJGF6M.js.map +0 -1
  246. package/dist/chunk-UJJNLGTM.js +0 -112
  247. package/dist/chunk-UJJNLGTM.js.map +0 -1
  248. package/dist/chunk-VGR4ZWJ3.js +0 -418
  249. package/dist/chunk-VGR4ZWJ3.js.map +0 -1
  250. package/dist/chunk-XG47P6D4.js +0 -99
  251. package/dist/chunk-XG47P6D4.js.map +0 -1
  252. package/dist/chunk-XZZAHNVM.js +0 -21
  253. package/dist/chunk-XZZAHNVM.js.map +0 -1
  254. package/dist/chunk-Y4TTYVNE.js +0 -36
  255. package/dist/chunk-Y4TTYVNE.js.map +0 -1
  256. package/dist/chunk-YDWIHW6Q.js +0 -69
  257. package/dist/chunk-YDWIHW6Q.js.map +0 -1
  258. package/dist/collapsible.js.map +0 -1
  259. package/dist/combobox.js.map +0 -1
  260. package/dist/cta.js.map +0 -1
  261. package/dist/currency-selector.js.map +0 -1
  262. package/dist/date-picker.js.map +0 -1
  263. package/dist/details-card.js.map +0 -1
  264. package/dist/dialog.js.map +0 -1
  265. package/dist/dropdown-menu.js.map +0 -1
  266. package/dist/dropzone.js.map +0 -1
  267. package/dist/editorial-card.js.map +0 -1
  268. package/dist/empty-state.js.map +0 -1
  269. package/dist/field.js.map +0 -1
  270. package/dist/footer.js.map +0 -1
  271. package/dist/funnel-chart.js.map +0 -1
  272. package/dist/gallery-indicator.js.map +0 -1
  273. package/dist/heatmap-chart.js.map +0 -1
  274. package/dist/infotip.js.map +0 -1
  275. package/dist/input-group.js.map +0 -1
  276. package/dist/input-size-context.js.map +0 -1
  277. package/dist/input.js.map +0 -1
  278. package/dist/item.js.map +0 -1
  279. package/dist/kpi-card.js.map +0 -1
  280. package/dist/label.js.map +0 -1
  281. package/dist/line-chart.js.map +0 -1
  282. package/dist/logo.js.map +0 -1
  283. package/dist/map-indicator.js.map +0 -1
  284. package/dist/match.js.map +0 -1
  285. package/dist/media-gallery-hero.js.map +0 -1
  286. package/dist/media-player.js.map +0 -1
  287. package/dist/number-input.js.map +0 -1
  288. package/dist/page-header.js.map +0 -1
  289. package/dist/pagination.js.map +0 -1
  290. package/dist/password-input.js.map +0 -1
  291. package/dist/phone-input.js.map +0 -1
  292. package/dist/photo-gallery.js.map +0 -1
  293. package/dist/pie-chart.js.map +0 -1
  294. package/dist/popover.js.map +0 -1
  295. package/dist/price-tag.js.map +0 -1
  296. package/dist/progress.js.map +0 -1
  297. package/dist/property-listing-card.js.map +0 -1
  298. package/dist/radar-chart.js.map +0 -1
  299. package/dist/radio-group.js.map +0 -1
  300. package/dist/review-block.js.map +0 -1
  301. package/dist/rich-text-editor.js.map +0 -1
  302. package/dist/scatter-chart.js.map +0 -1
  303. package/dist/search-input.js.map +0 -1
  304. package/dist/select.js.map +0 -1
  305. package/dist/separator.js.map +0 -1
  306. package/dist/sheet.js.map +0 -1
  307. package/dist/sidebar.js.map +0 -1
  308. package/dist/size-context.js.map +0 -1
  309. package/dist/skeleton.js.map +0 -1
  310. package/dist/slider.js.map +0 -1
  311. package/dist/sparkline.js.map +0 -1
  312. package/dist/stepper.js.map +0 -1
  313. package/dist/switch.js.map +0 -1
  314. package/dist/tab-list.d.ts +0 -38
  315. package/dist/tab-list.js +0 -123
  316. package/dist/tab-list.js.map +0 -1
  317. package/dist/table.js.map +0 -1
  318. package/dist/tabs.js.map +0 -1
  319. package/dist/tag.js.map +0 -1
  320. package/dist/testimonial-block.js.map +0 -1
  321. package/dist/textarea.js.map +0 -1
  322. package/dist/time-picker.js.map +0 -1
  323. package/dist/toast.js.map +0 -1
  324. package/dist/tooltip.js.map +0 -1
  325. package/dist/tree-map.js.map +0 -1
  326. package/dist/waterfall-chart.js.map +0 -1
package/dist/chart.d.ts CHANGED
@@ -1,48 +1,47 @@
1
- import * as class_variance_authority_types from 'class-variance-authority/types';
2
- import { VariantProps } from 'class-variance-authority';
3
- import * as React from 'react';
4
- import * as RechartsPrimitive from 'recharts';
5
- import { TooltipValueType } from 'recharts';
6
- import { ComponentSize } from './size-context.js';
7
-
1
+ import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
2
+ import { VariantProps } from "class-variance-authority";
3
+ import * as React from "react";
4
+ import * as RechartsPrimitive from "recharts";
5
+ import { TooltipValueType } from "recharts";
6
+ //#region src/chart.d.ts
8
7
  /** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */
9
8
  type ChartValueType = "number" | "percentage" | "currency";
10
9
  declare const THEMES: {
11
- readonly light: "";
12
- readonly dark: ".dark";
10
+ readonly light: "";
11
+ readonly dark: ".dark";
13
12
  };
14
13
  type TooltipNameType = number | string;
15
14
  type ChartConfig = Record<string, {
16
- label?: React.ReactNode;
17
- icon?: React.ComponentType;
15
+ label?: React.ReactNode;
16
+ icon?: React.ComponentType;
18
17
  } & ({
19
- color?: string;
20
- theme?: never;
18
+ color?: string;
19
+ theme?: never;
21
20
  } | {
22
- color?: never;
23
- theme: Record<keyof typeof THEMES, string>;
21
+ color?: never;
22
+ theme: Record<keyof typeof THEMES, string>;
24
23
  })>;
25
24
  declare function ChartCard({ className, size, children, ...props }: React.ComponentProps<"section"> & {
26
- size?: ComponentSize;
25
+ size?: ComponentSize;
27
26
  }): React.JSX.Element;
28
27
  declare function ChartHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
29
28
  declare function ChartTitle({ className, size, ...props }: React.ComponentProps<"h3"> & {
30
- size?: ComponentSize;
29
+ size?: ComponentSize;
31
30
  }): React.JSX.Element;
32
31
  declare function ChartDescription({ className, size, ...props }: React.ComponentProps<"p"> & {
33
- size?: ComponentSize;
32
+ size?: ComponentSize;
34
33
  }): React.JSX.Element;
35
34
  declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
36
- config: ChartConfig;
37
- children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
38
- initialDimension?: {
39
- width: number;
40
- height: number;
41
- };
35
+ config: ChartConfig;
36
+ children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
37
+ initialDimension?: {
38
+ width: number;
39
+ height: number;
40
+ };
42
41
  }): React.JSX.Element;
43
42
  declare const ChartStyle: ({ id, config }: {
44
- id: string;
45
- config: ChartConfig;
43
+ id: string;
44
+ config: ChartConfig;
46
45
  }) => React.JSX.Element | null;
47
46
  declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
48
47
  /**
@@ -54,12 +53,12 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
54
53
  * Anatomy: series dot · metric label · hero value · period caption.
55
54
  */
56
55
  declare const chartTooltipVariants: (props?: ({
57
- size?: "sm" | "md" | "lg" | "xs" | null | undefined;
58
- } & class_variance_authority_types.ClassProp) | undefined) => string;
59
- declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
60
- hideIndicator?: boolean;
61
- nameKey?: string;
62
- valueType?: ChartValueType;
56
+ size?: "lg" | "md" | "sm" | "xs" | null | undefined;
57
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
58
+ declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
59
+ hideIndicator?: boolean;
60
+ nameKey?: string;
61
+ valueType?: ChartValueType;
63
62
  } & VariantProps<typeof chartTooltipVariants> & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
64
63
  declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
65
64
  /** Marker shape that ties a legend item to its series. */
@@ -74,20 +73,20 @@ type ChartLegendMarker = "dot" | "square" | "line";
74
73
  * from each payload entry's `inactive` flag (recharts sets this when wired) or
75
74
  * the controlled `inactiveKeys` set.
76
75
  */
77
- declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle, }: React.ComponentProps<"div"> & {
78
- hideIcon?: boolean;
79
- nameKey?: string;
80
- marker?: ChartLegendMarker;
81
- size?: "sm" | "md";
82
- orientation?: "horizontal" | "vertical";
83
- inactiveKeys?: Iterable<string>;
84
- onToggle?: (key: string) => void;
76
+ declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle }: React.ComponentProps<"div"> & {
77
+ hideIcon?: boolean;
78
+ nameKey?: string;
79
+ marker?: ChartLegendMarker;
80
+ size?: "sm" | "md";
81
+ orientation?: "horizontal" | "vertical";
82
+ inactiveKeys?: Iterable<string>;
83
+ onToggle?: (key: string) => void;
85
84
  } & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
86
85
  /** The size-scaled layout numbers a cartesian chart needs to build axis props. */
87
86
  type CartesianAxisLayout = {
88
- tickMargin: number;
89
- tickFontSize: number;
90
- yAxisWidth: number;
87
+ tickMargin: number;
88
+ tickFontSize: number;
89
+ yAxisWidth: number;
91
90
  };
92
91
  /**
93
92
  * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
@@ -101,22 +100,22 @@ type CartesianAxisLayout = {
101
100
  * <YAxis domain={[0, 120]} {...chart.yAxis} />
102
101
  */
103
102
  declare function cartesianAxisProps(layout: CartesianAxisLayout): {
104
- readonly xAxis: {
105
- readonly tickLine: false;
106
- readonly axisLine: false;
107
- readonly tickMargin: number;
108
- readonly tick: {
109
- fontSize: number;
110
- };
103
+ readonly xAxis: {
104
+ readonly tickLine: false;
105
+ readonly axisLine: false;
106
+ readonly tickMargin: number;
107
+ readonly tick: {
108
+ fontSize: number;
111
109
  };
112
- readonly yAxis: {
113
- readonly tickLine: false;
114
- readonly axisLine: false;
115
- readonly width: number;
116
- readonly tick: {
117
- fontSize: number;
118
- };
110
+ };
111
+ readonly yAxis: {
112
+ readonly tickLine: false;
113
+ readonly axisLine: false;
114
+ readonly width: number;
115
+ readonly tick: {
116
+ fontSize: number;
119
117
  };
118
+ };
120
119
  };
121
-
122
- export { type CartesianAxisLayout, ChartCard, type ChartConfig, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, type ChartValueType, cartesianAxisProps };
120
+ //#endregion
121
+ export { type CartesianAxisLayout, ChartCard, ChartConfig, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, ChartValueType, cartesianAxisProps };
package/dist/chart.js CHANGED
@@ -1,30 +1,378 @@
1
1
  "use client";
2
- import {
3
- ChartCard,
4
- ChartContainer,
5
- ChartDescription,
6
- ChartHeader,
7
- ChartLegend,
8
- ChartLegendContent,
9
- ChartStyle,
10
- ChartTitle,
11
- ChartTooltip,
12
- ChartTooltipContent,
13
- cartesianAxisProps
14
- } from "./chunk-NOFXVRWL.js";
15
- import "./chunk-HL3ZSYES.js";
16
- import "./chunk-Y4TTYVNE.js";
17
- export {
18
- ChartCard,
19
- ChartContainer,
20
- ChartDescription,
21
- ChartHeader,
22
- ChartLegend,
23
- ChartLegendContent,
24
- ChartStyle,
25
- ChartTitle,
26
- ChartTooltip,
27
- ChartTooltipContent,
28
- cartesianAxisProps
2
+ import { t as cn } from "./cn-BI_4DMBf.js";
3
+ import { SizeProvider, useComponentSize } from "./size-context.js";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ import { cva } from "class-variance-authority";
6
+ import * as React from "react";
7
+ import * as RechartsPrimitive from "recharts";
8
+ //#region src/chart.tsx
9
+ /**
10
+ * Markers use `--color-surface-brand` as a placeholder. Giddaa has no
11
+ * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each
12
+ * series (its legend marker and tooltip dot) to its own colour once they exist.
13
+ * Until then any series without an explicit colour paints brand-green.
14
+ */
15
+ const SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
16
+ function formatChartValue(value, type) {
17
+ if (Array.isArray(value)) return value.join(", ");
18
+ if (typeof value !== "number") return value == null ? "" : String(value);
19
+ switch (type) {
20
+ case "currency": return `₦${value.toLocaleString("en-NG")}`;
21
+ case "percentage": return `${value.toLocaleString("en-NG", {
22
+ minimumFractionDigits: 1,
23
+ maximumFractionDigits: 1
24
+ })}%`;
25
+ default: return value.toLocaleString("en-NG");
26
+ }
27
+ }
28
+ const THEMES = {
29
+ light: "",
30
+ dark: ".dark"
29
31
  };
30
- //# sourceMappingURL=chart.js.map
32
+ const INITIAL_DIMENSION = {
33
+ width: 320,
34
+ height: 200
35
+ };
36
+ const ChartContext = React.createContext(null);
37
+ function useChart() {
38
+ const context = React.useContext(ChartContext);
39
+ if (!context) throw new Error("useChart must be used within a <ChartContainer />");
40
+ return context;
41
+ }
42
+ /**
43
+ * Shared chart frame — the chrome that surrounds the plot of any chart type
44
+ * (bar, line, area, pie). These are presentational, domain-free, and size-aware:
45
+ * a `size` flows through `SizeProvider` so the plot and its labels can scale
46
+ * with the card. Compose them with the plot primitives:
47
+ *
48
+ * <ChartCard size="md">
49
+ * <ChartHeader>
50
+ * <ChartTitle>Revenue Overview</ChartTitle>
51
+ * <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
52
+ * </ChartHeader>
53
+ * <ChartContainer config={config}>{/* recharts plot *\/}</ChartContainer>
54
+ * </ChartCard>
55
+ */
56
+ const chartCardVariants = cva("flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1", {
57
+ variants: { size: {
58
+ sm: "gap-3 p-4",
59
+ md: "gap-4 p-5",
60
+ lg: "gap-5 p-6"
61
+ } },
62
+ defaultVariants: { size: "md" }
63
+ });
64
+ function ChartCard({ className, size, children, ...props }) {
65
+ const resolvedSize = useComponentSize(size);
66
+ return /* @__PURE__ */ jsx(SizeProvider, {
67
+ size: resolvedSize,
68
+ children: /* @__PURE__ */ jsx("section", {
69
+ "data-slot": "chart-card",
70
+ className: cn(chartCardVariants({ size: resolvedSize }), className),
71
+ ...props,
72
+ children
73
+ })
74
+ });
75
+ }
76
+ function ChartHeader({ className, ...props }) {
77
+ return /* @__PURE__ */ jsx("div", {
78
+ "data-slot": "chart-header",
79
+ className: cn("flex min-w-0 flex-col gap-1", className),
80
+ ...props
81
+ });
82
+ }
83
+ const chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
84
+ variants: { size: {
85
+ sm: "text-gdt-md",
86
+ md: "text-gdt-lg",
87
+ lg: "text-gdt-h5"
88
+ } },
89
+ defaultVariants: { size: "md" }
90
+ });
91
+ function ChartTitle({ className, size, ...props }) {
92
+ const resolvedSize = useComponentSize(size);
93
+ return /* @__PURE__ */ jsx("h3", {
94
+ "data-slot": "chart-title",
95
+ className: cn(chartTitleVariants({ size: resolvedSize }), className),
96
+ ...props
97
+ });
98
+ }
99
+ const chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
100
+ variants: { size: {
101
+ sm: "text-gdt-xs",
102
+ md: "text-gdt-sm",
103
+ lg: "text-gdt-sm"
104
+ } },
105
+ defaultVariants: { size: "md" }
106
+ });
107
+ function ChartDescription({ className, size, ...props }) {
108
+ const resolvedSize = useComponentSize(size);
109
+ return /* @__PURE__ */ jsx("p", {
110
+ "data-slot": "chart-description",
111
+ className: cn(chartDescriptionVariants({ size: resolvedSize }), className),
112
+ ...props
113
+ });
114
+ }
115
+ function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
116
+ const uniqueId = React.useId();
117
+ const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
118
+ return /* @__PURE__ */ jsx(ChartContext.Provider, {
119
+ value: { config },
120
+ children: /* @__PURE__ */ jsxs("div", {
121
+ "data-slot": "chart",
122
+ "data-chart": chartId,
123
+ className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
124
+ ...props,
125
+ children: [/* @__PURE__ */ jsx(ChartStyle, {
126
+ id: chartId,
127
+ config
128
+ }), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
129
+ initialDimension,
130
+ children
131
+ })]
132
+ })
133
+ });
134
+ }
135
+ const ChartStyle = ({ id, config }) => {
136
+ const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
137
+ if (!colorConfig.length) return null;
138
+ return /* @__PURE__ */ jsx("style", { children: Object.entries(THEMES).map(([theme, prefix]) => `
139
+ ${prefix} [data-chart=${id}] {
140
+ ${colorConfig.map(([key, itemConfig]) => {
141
+ const color = itemConfig.theme?.[theme] ?? itemConfig.color;
142
+ return color ? ` --color-${key}: ${color};` : null;
143
+ }).join("\n")}
144
+ }
145
+ `).join("\n") });
146
+ };
147
+ const ChartTooltip = RechartsPrimitive.Tooltip;
148
+ /**
149
+ * Hover tooltip for a chart data point. It surfaces a single precise value with
150
+ * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed
151
+ * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,
152
+ * 1px border-subtle) so users can read exact figures without leaving the chart.
153
+ *
154
+ * Anatomy: series dot · metric label · hero value · period caption.
155
+ */
156
+ const chartTooltipVariants = cva("flex flex-col bg-surface-overlay border border-line-subtle shadow-2", {
157
+ variants: { size: {
158
+ xs: "gap-0.5 rounded-md p-2",
159
+ sm: "gap-0.5 rounded-md p-2.5",
160
+ md: "gap-1 rounded-lg p-3",
161
+ lg: "gap-1 rounded-xl p-3.5"
162
+ } },
163
+ defaultVariants: { size: "md" }
164
+ });
165
+ const chartTooltipDotVariants = cva("shrink-0 rounded-full", {
166
+ variants: { size: {
167
+ xs: "size-1.5",
168
+ sm: "size-2",
169
+ md: "size-2.5",
170
+ lg: "size-2.5"
171
+ } },
172
+ defaultVariants: { size: "md" }
173
+ });
174
+ const chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
175
+ variants: { size: {
176
+ xs: "text-gdt-xs",
177
+ sm: "text-gdt-xs",
178
+ md: "text-gdt-sm",
179
+ lg: "text-gdt-sm"
180
+ } },
181
+ defaultVariants: { size: "md" }
182
+ });
183
+ const chartTooltipValueVariants = cva("font-extrabold text-fg-primary tabular-nums", {
184
+ variants: { size: {
185
+ xs: "text-gdt-sm",
186
+ sm: "text-gdt-md",
187
+ md: "text-gdt-lg",
188
+ lg: "text-gdt-xl"
189
+ } },
190
+ defaultVariants: { size: "md" }
191
+ });
192
+ function ChartTooltipContent({ active, payload, className, hideIndicator = false, label, labelFormatter, formatter, color, nameKey, valueType = "number", size = "md" }) {
193
+ const { config } = useChart();
194
+ if (!active || !payload?.length) return null;
195
+ const [item] = payload.filter((entry) => entry.type !== "none");
196
+ if (!item) return null;
197
+ const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
198
+ const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
199
+ const metricLabel = itemConfig?.label ?? item.name;
200
+ const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
201
+ const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
202
+ return /* @__PURE__ */ jsxs("div", {
203
+ className: cn(chartTooltipVariants({ size }), className),
204
+ children: [
205
+ metricLabel != null && /* @__PURE__ */ jsxs("div", {
206
+ className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0",
207
+ children: [!hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
208
+ "aria-hidden": "true",
209
+ className: cn(chartTooltipDotVariants({ size })),
210
+ style: { backgroundColor: dotColor }
211
+ })), /* @__PURE__ */ jsx("span", {
212
+ className: cn(chartTooltipLabelVariants({ size })),
213
+ children: metricLabel
214
+ })]
215
+ }),
216
+ /* @__PURE__ */ jsx("p", {
217
+ className: cn(chartTooltipValueVariants({ size })),
218
+ children: heroValue
219
+ }),
220
+ periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx("p", {
221
+ className: "text-gdt-xs text-fg-caption-placeholder",
222
+ children: periodCaption
223
+ })
224
+ ]
225
+ });
226
+ }
227
+ const ChartLegend = RechartsPrimitive.Legend;
228
+ const chartLegendItemVariants = cva("group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0", {
229
+ variants: {
230
+ size: {
231
+ sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
232
+ md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
233
+ },
234
+ interactive: {
235
+ true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
236
+ false: ""
237
+ },
238
+ inactive: {
239
+ true: "text-fg-caption-placeholder line-through",
240
+ false: ""
241
+ }
242
+ },
243
+ defaultVariants: {
244
+ size: "md",
245
+ interactive: false,
246
+ inactive: false
247
+ }
248
+ });
249
+ const chartLegendMarkerSizeVariants = cva("shrink-0", {
250
+ variants: {
251
+ marker: {
252
+ dot: "rounded-full",
253
+ square: "rounded-[2px]",
254
+ line: "rounded-full"
255
+ },
256
+ size: {
257
+ sm: "",
258
+ md: ""
259
+ }
260
+ },
261
+ compoundVariants: [
262
+ {
263
+ marker: ["dot", "square"],
264
+ size: "sm",
265
+ className: "size-2"
266
+ },
267
+ {
268
+ marker: ["dot", "square"],
269
+ size: "md",
270
+ className: "size-2.5"
271
+ },
272
+ {
273
+ marker: "line",
274
+ size: "sm",
275
+ className: "h-[3px] w-3"
276
+ },
277
+ {
278
+ marker: "line",
279
+ size: "md",
280
+ className: "h-[3px] w-3.5"
281
+ }
282
+ ],
283
+ defaultVariants: {
284
+ marker: "dot",
285
+ size: "md"
286
+ }
287
+ });
288
+ /**
289
+ * A shared legend for all chart types. Each item pairs a series marker with a
290
+ * label and can be toggled to hide or show its series — the inactive state mutes
291
+ * the marker and strikes through the label. Items compose into horizontal rows
292
+ * or vertical columns, in two sizes, with dot, square, or line markers.
293
+ *
294
+ * Toggling: pass `onToggle` to make items interactive. Inactive items are read
295
+ * from each payload entry's `inactive` flag (recharts sets this when wired) or
296
+ * the controlled `inactiveKeys` set.
297
+ */
298
+ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, marker = "dot", size = "md", orientation = "horizontal", inactiveKeys, onToggle }) {
299
+ const { config } = useChart();
300
+ if (!payload?.length) return null;
301
+ const inactiveSet = inactiveKeys ? new Set(inactiveKeys) : void 0;
302
+ const interactive = Boolean(onToggle);
303
+ return /* @__PURE__ */ jsx("div", {
304
+ className: cn("flex", orientation === "vertical" ? "flex-col items-start gap-0.5" : "flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5", verticalAlign === "top" ? "pb-3" : "pt-3", className),
305
+ children: payload.filter((item) => item.type !== "none").map((item, index) => {
306
+ const key = `${nameKey ?? item.dataKey ?? "value"}`;
307
+ const itemKey = `${item.dataKey ?? item.value ?? index}`;
308
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
309
+ const inactive = (inactiveSet?.has(key) ?? false) || Boolean(item.inactive);
310
+ const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_PLACEHOLDER;
311
+ const content = /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
312
+ "aria-hidden": "true",
313
+ className: cn(chartLegendMarkerSizeVariants({
314
+ marker,
315
+ size
316
+ })),
317
+ style: { backgroundColor: markerColor }
318
+ }), itemConfig?.label ?? item.value] });
319
+ if (interactive) return /* @__PURE__ */ jsx("button", {
320
+ type: "button",
321
+ "aria-pressed": !inactive,
322
+ onClick: () => onToggle?.(key),
323
+ className: cn(chartLegendItemVariants({
324
+ size,
325
+ interactive,
326
+ inactive
327
+ })),
328
+ children: content
329
+ }, itemKey);
330
+ return /* @__PURE__ */ jsx("div", {
331
+ className: cn(chartLegendItemVariants({
332
+ size,
333
+ interactive,
334
+ inactive
335
+ })),
336
+ children: content
337
+ }, itemKey);
338
+ })
339
+ });
340
+ }
341
+ /**
342
+ * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
343
+ * or axis lines, a size-scaled tick font, and a reserved value-axis width) that
344
+ * every bar and line chart would otherwise repeat per axis. Spread the result
345
+ * onto the recharts axis, then add the chart-specific props (`dataKey`,
346
+ * `domain`, `ticks`, a `width`/`type` override, …):
347
+ *
348
+ * const chart = useBarChartLayout();
349
+ * <XAxis dataKey="month" {...chart.xAxis} />
350
+ * <YAxis domain={[0, 120]} {...chart.yAxis} />
351
+ */
352
+ function cartesianAxisProps(layout) {
353
+ const tick = { fontSize: layout.tickFontSize };
354
+ return {
355
+ xAxis: {
356
+ tickLine: false,
357
+ axisLine: false,
358
+ tickMargin: layout.tickMargin,
359
+ tick
360
+ },
361
+ yAxis: {
362
+ tickLine: false,
363
+ axisLine: false,
364
+ width: layout.yAxisWidth,
365
+ tick
366
+ }
367
+ };
368
+ }
369
+ function getPayloadConfigFromPayload(config, payload, key) {
370
+ if (typeof payload !== "object" || payload === null) return;
371
+ const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
372
+ let configLabelKey = key;
373
+ if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
374
+ else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
375
+ return configLabelKey in config ? config[configLabelKey] : config[key];
376
+ }
377
+ //#endregion
378
+ export { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, cartesianAxisProps };
@@ -1,15 +1,13 @@
1
- import * as React from 'react';
2
- import * as class_variance_authority_types from 'class-variance-authority/types';
3
- import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
4
- export { CheckboxGroup } from '@base-ui/react/checkbox-group';
5
- import { VariantProps } from 'class-variance-authority';
6
-
1
+ import { VariantProps } from "class-variance-authority";
2
+ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
3
+ import { CheckboxGroup } from "@base-ui/react/checkbox-group";
4
+ //#region src/checkbox.d.ts
7
5
  declare const checkboxVariants: (props?: ({
8
- size?: "sm" | "md" | "lg" | null | undefined;
9
- } & class_variance_authority_types.ClassProp) | undefined) => string;
6
+ size?: "lg" | "md" | "sm" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
10
8
  type CheckboxSize = NonNullable<VariantProps<typeof checkboxVariants>["size"]>;
11
9
  type CheckboxProps = Checkbox$1.Root.Props & {
12
- size?: CheckboxSize;
10
+ size?: CheckboxSize;
13
11
  };
14
12
  /**
15
13
  * Compose with the shared field primitives for label and helper text.
@@ -68,6 +66,6 @@ type CheckboxProps = Checkbox$1.Root.Props & {
68
66
  * </FieldSet>
69
67
  * ```
70
68
  */
71
- declare function Checkbox({ className, size, ...props }: CheckboxProps): React.JSX.Element;
72
-
73
- export { Checkbox, checkboxVariants };
69
+ declare function Checkbox({ className, size, ...props }: CheckboxProps): import("react").JSX.Element;
70
+ //#endregion
71
+ export { Checkbox, CheckboxGroup, checkboxVariants };