@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/kpi-card.js

@@ -1,56 +1,16 @@
-// src/components/ui/kpi-card.tsx
+import {
+  Skeleton
+} from "./chunk-XZZAHNVM.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/kpi-card.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { ArrowDown, ArrowUp, ArrowUpRight } from "lucide-react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/skeleton.tsx
-import { jsx } from "react/jsx-runtime";
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-md bg-line", className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/kpi-card.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function KpiCard({
   className,
   loading = false,
@@ -110,7 +70,7 @@ function KpiCardLinkOutIcon({
           "pointer-events-none absolute right-gdt-md top-gdt-md inline-flex size-4 shrink-0 items-center justify-center text-fg-secondary [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
-        children: children ?? /* @__PURE__ */ jsx2(ArrowUpRight, { "aria-hidden": "true" })
+        children: children ?? /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
       },
       props
     ),
@@ -140,7 +100,7 @@ function KpiCardValueSkeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     Skeleton,
     {
       className: cn(
@@ -180,7 +140,7 @@ function KpiCardTrend({
       {
         className: cn(kpiCardTrendVariants({ direction }), className),
         children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          showIcon ? /* @__PURE__ */ jsx2(Icon, { "aria-hidden": "true", className: "size-3 shrink-0" }) : null,
+          showIcon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3 shrink-0" }) : null,
           children
         ] })
       },

package/dist/kpi-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/kpi-card.tsx","../src/lib/cn.ts","../src/components/ui/skeleton.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ArrowDown, ArrowUp, ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Skeleton } from \"./skeleton\";\n\nfunction KpiCard({\n\tclassName,\n\tloading = false,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"article\"> & { loading?: boolean }) {\n\treturn useRender({\n\t\tdefaultTagName: \"article\",\n\t\tprops: mergeProps<\"article\">(\n\t\t\t{\n\t\t\t\t\"aria-busy\": loading || undefined,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"group/kpi-card relative flex w-full min-w-0 flex-col gap-4 rounded-xl p-5 text-fg-primary transition-[background-color,border-color,box-shadow,transform] outline-none border border-line-subtle shadow-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"kpi-card\",\n\t\t\tloading,\n\t\t},\n\t});\n}\n\nfunction KpiCardTitle({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"h3\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"h3\",\n\t\tprops: mergeProps<\"h3\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"min-w-0 pr-gdt-xl text-gdt-sm font-semibold capitalized text-fg-secondary\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardLinkOutIcon({\n\tchildren,\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\t\"aria-hidden\": true,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"pointer-events-none absolute right-gdt-md top-gdt-md inline-flex size-4 shrink-0 items-center justify-center text-fg-secondary [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\tchildren: children ?? <ArrowUpRight aria-hidden=\"true\" />,\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardValue({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"p\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"p\",\n\t\tprops: mergeProps<\"p\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"text-gdt-h3 font-extrabold  text-fg-primary group-aria-busy/kpi-card:hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardValueSkeleton({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof Skeleton>) {\n\treturn (\n\t\t<Skeleton\n\t\t\tclassName={cn(\n\t\t\t\t\"hidden h-8 mt-2 md:mt-3 w-24 rounded-md group-aria-busy/kpi-card:block\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst kpiCardTrendVariants = cva(\n\t\"flex min-w-0 items-center gap-1.5 text-gdt-capitalized\",\n\t{\n\t\tvariants: {\n\t\t\tdirection: {\n\t\t\t\tup: \"text-status-success\",\n\t\t\t\tdown: \"text-status-danger\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tdirection: \"up\",\n\t\t},\n\t},\n);\n\ntype KpiCardTrendProps = useRender.ComponentProps<\"p\"> &\n\tVariantProps<typeof kpiCardTrendVariants> & {\n\t\tshowIcon?: boolean;\n\t};\n\nfunction KpiCardTrend({\n\tchildren,\n\tclassName,\n\tdirection = \"up\",\n\trender,\n\tshowIcon = true,\n\t...props\n}: KpiCardTrendProps) {\n\tconst Icon = direction === \"down\" ? ArrowDown : ArrowUp;\n\n\treturn useRender({\n\t\tdefaultTagName: \"p\",\n\t\tprops: mergeProps<\"p\">(\n\t\t\t{\n\t\t\t\tclassName: cn(kpiCardTrendVariants({ direction }), className),\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{showIcon ? (\n\t\t\t\t\t\t\t<Icon aria-hidden=\"true\" className=\"size-3 shrink-0\" />\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tdirection,\n\t\t\tshowIcon,\n\t\t\tslot: \"kpi-card-trend\",\n\t\t},\n\t});\n}\n\nfunction KpiCardTrendValue({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"text-gdt-sm text-current font-semibold\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardTrendCaption({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"min-w-0 truncate text-gdt-xs text-fg-secondary font-normal\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\n/**\n * Composition examples:\n *\n * <KpiCard>\n *   <KpiCardTitle>Total Revenue</KpiCardTitle>\n *   <KpiCardValue>$1.25M</KpiCardValue>\n *   <KpiCardTrend>\n *     <KpiCardTrendValue>+12.5%</KpiCardTrendValue>\n *     <KpiCardTrendCaption>vs last month</KpiCardTrendCaption>\n *   </KpiCardTrend>\n * </KpiCard>\n *\n * <KpiCard interactive render={<a href=\"/reports\" aria-label=\"View revenue report\" />}>\n *   <KpiCardLinkOutIcon />\n *   <KpiCardTitle>Total Revenue</KpiCardTitle>\n *   <KpiCardValue>$1.25M</KpiCardValue>\n * </KpiCard>\n *\n * <KpiCard loading>\n *   <KpiCardTitle>Total Revenue</KpiCardTitle>\n *   <KpiCardValue>$1.25M</KpiCardValue>\n *   <KpiCardValueSkeleton />\n * </KpiCard>\n */\nexport {\n\tKpiCard,\n\tKpiCardLinkOutIcon,\n\tKpiCardTitle,\n\tKpiCardTrend,\n\tKpiCardTrendCaption,\n\tKpiCardTrendValue,\n\tKpiCardValue,\n\tKpiCardValueSkeleton,\n\tkpiCardTrendVariants,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import { cn } from \"../../lib/cn\";\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"skeleton\"\n\t\t\tclassName={cn(\"animate-pulse rounded-md bg-line\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../src/kpi-card.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ArrowDown, ArrowUp, ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"./lib/cn\";\nimport { Skeleton } from \"./skeleton\";\n\nfunction KpiCard({\n\tclassName,\n\tloading = false,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"article\"> & { loading?: boolean }) {\n\treturn useRender({\n\t\tdefaultTagName: \"article\",\n\t\tprops: mergeProps<\"article\">(\n\t\t\t{\n\t\t\t\t\"aria-busy\": loading || undefined,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"group/kpi-card relative flex w-full min-w-0 flex-col gap-4 rounded-xl p-5 text-fg-primary transition-[background-color,border-color,box-shadow,transform] outline-none border border-line-subtle shadow-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"kpi-card\",\n\t\t\tloading,\n\t\t},\n\t});\n}\n\nfunction KpiCardTitle({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"h3\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"h3\",\n\t\tprops: mergeProps<\"h3\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"min-w-0 pr-gdt-xl text-gdt-sm font-semibold capitalized text-fg-secondary\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardLinkOutIcon({\n\tchildren,\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\t\"aria-hidden\": true,\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"pointer-events-none absolute right-gdt-md top-gdt-md inline-flex size-4 shrink-0 items-center justify-center text-fg-secondary [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\tchildren: children ?? <ArrowUpRight aria-hidden=\"true\" />,\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardValue({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"p\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"p\",\n\t\tprops: mergeProps<\"p\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"text-gdt-h3 font-extrabold  text-fg-primary group-aria-busy/kpi-card:hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardValueSkeleton({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof Skeleton>) {\n\treturn (\n\t\t<Skeleton\n\t\t\tclassName={cn(\n\t\t\t\t\"hidden h-8 mt-2 md:mt-3 w-24 rounded-md group-aria-busy/kpi-card:block\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst kpiCardTrendVariants = cva(\n\t\"flex min-w-0 items-center gap-1.5 text-gdt-capitalized\",\n\t{\n\t\tvariants: {\n\t\t\tdirection: {\n\t\t\t\tup: \"text-status-success\",\n\t\t\t\tdown: \"text-status-danger\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tdirection: \"up\",\n\t\t},\n\t},\n);\n\ntype KpiCardTrendProps = useRender.ComponentProps<\"p\"> &\n\tVariantProps<typeof kpiCardTrendVariants> & {\n\t\tshowIcon?: boolean;\n\t};\n\nfunction KpiCardTrend({\n\tchildren,\n\tclassName,\n\tdirection = \"up\",\n\trender,\n\tshowIcon = true,\n\t...props\n}: KpiCardTrendProps) {\n\tconst Icon = direction === \"down\" ? ArrowDown : ArrowUp;\n\n\treturn useRender({\n\t\tdefaultTagName: \"p\",\n\t\tprops: mergeProps<\"p\">(\n\t\t\t{\n\t\t\t\tclassName: cn(kpiCardTrendVariants({ direction }), className),\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{showIcon ? (\n\t\t\t\t\t\t\t<Icon aria-hidden=\"true\" className=\"size-3 shrink-0\" />\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tdirection,\n\t\t\tshowIcon,\n\t\t\tslot: \"kpi-card-trend\",\n\t\t},\n\t});\n}\n\nfunction KpiCardTrendValue({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"text-gdt-sm text-current font-semibold\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction KpiCardTrendCaption({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"span\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"span\",\n\t\tprops: mergeProps<\"span\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"min-w-0 truncate text-gdt-xs text-fg-secondary font-normal\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\n/**\n * Composition examples:\n *\n * <KpiCard>\n *   <KpiCardTitle>Total Revenue</KpiCardTitle>\n *   <KpiCardValue>$1.25M</KpiCardValue>\n *   <KpiCardTrend>\n *     <KpiCardTrendValue>+12.5%</KpiCardTrendValue>\n *     <KpiCardTrendCaption>vs last month</KpiCardTrendCaption>\n *   </KpiCardTrend>\n * </KpiCard>\n *\n * <KpiCard interactive render={<a href=\"/reports\" aria-label=\"View revenue report\" />}>\n *   <KpiCardLinkOutIcon />\n *   <KpiCardTitle>Total Revenue</KpiCardTitle>\n *   <KpiCardValue>$1.25M</KpiCardValue>\n * </KpiCard>\n *\n * <KpiCard loading>\n *   <KpiCardTitle>Total Revenue</KpiCardTitle>\n *   <KpiCardValue>$1.25M</KpiCardValue>\n *   <KpiCardValueSkeleton />\n * </KpiCard>\n */\nexport {\n\tKpiCard,\n\tKpiCardLinkOutIcon,\n\tKpiCardTitle,\n\tKpiCardTrend,\n\tKpiCardTrendCaption,\n\tKpiCardTrendValue,\n\tKpiCardValue,\n\tKpiCardValueSkeleton,\n\tkpiCardTrendVariants,\n};\n"],"mappings":";;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAA8B;AACvC,SAAS,WAAW,SAAS,oBAAoB;AAiEvB,SA+ErB,UA/EqB,KA+ErB,YA/EqB;AA7D1B,SAAS,QAAQ;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACJ,GAAgE;AAC/D,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,aAAa,WAAW;AAAA,QACxB,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IACD;AAAA,EACD,CAAC;AACF;AAEA,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAmC;AAClC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,mBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAqC;AACpC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,eAAe;AAAA,QACf,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAU,YAAY,oBAAC,gBAAa,eAAY,QAAO;AAAA,MACxD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,qBAAqB;AAAA,EAC7B;AAAA,EACA,GAAG;AACJ,GAA0C;AACzC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,IAAM,uBAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,WAAW;AAAA,QACV,IAAI;AAAA,QACJ,MAAM;AAAA,MACP;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,WAAW;AAAA,IACZ;AAAA,EACD;AACD;AAOA,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACJ,GAAsB;AACrB,QAAM,OAAO,cAAc,SAAS,YAAY;AAEhD,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,qBAAqB,EAAE,UAAU,CAAC,GAAG,SAAS;AAAA,QAC5D,UACC,iCACE;AAAA,qBACA,oBAAC,QAAK,eAAY,QAAO,WAAU,mBAAkB,IAClD;AAAA,UACH;AAAA,WACF;AAAA,MAEF;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAqC;AACpC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAqC;AACpC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,UACV;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;","names":[]}

package/dist/label.js

@@ -1,67 +1,8 @@
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/label.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function Label({
-  className,
-  children,
-  withAsterisk = false,
-  showOptionalText = false,
-  ...props
-}) {
-  const labelClassName = cn(
-    "flex w-fit max-w-full items-center gap-1 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-    className
-  );
-  if (withAsterisk) {
-    return (
-      // biome-ignore lint/a11y/noLabelWithoutControl: association is supplied by callers through htmlFor or nesting patterns.
-      /* @__PURE__ */ jsxs("label", { "data-slot": "label", className: labelClassName, ...props, children: [
-        /* @__PURE__ */ jsx("div", { className: "inline-flex", children }),
-        withAsterisk && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 text-fg-danger", children: "*" }),
-        showOptionalText && /* @__PURE__ */ jsx("span", { className: "text-gdt-xs font-normal italic", children: "(optional)" })
-      ] })
-    );
-  }
-  return (
-    // biome-ignore lint/a11y/noLabelWithoutControl: association is supplied by callers through htmlFor or nesting patterns.
-    /* @__PURE__ */ jsx("label", { "data-slot": "label", className: labelClassName, ...props, children: /* @__PURE__ */ jsxs("div", { children: [
-      children,
-      " ",
-      showOptionalText && /* @__PURE__ */ jsx("span", { className: "text-gdt-xs font-normal italic", children: "(optional)" })
-    ] }) })
-  );
-}
+"use client";
+import {
+  Label
+} from "./chunk-7TBMLFGW.js";
+import "./chunk-Y4TTYVNE.js";
 export {
   Label
 };

package/dist/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/label.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nfunction Label({\n\tclassName,\n\tchildren,\n\twithAsterisk = false,\n\tshowOptionalText = false,\n\t...props\n}: React.ComponentProps<\"label\"> & {\n\twithAsterisk?: boolean;\n\tshowOptionalText?: boolean;\n}) {\n\tconst labelClassName = cn(\n\t\t\"flex w-fit max-w-full items-center gap-1 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\tclassName,\n\t);\n\n\tif (withAsterisk) {\n\t\treturn (\n\t\t\t// biome-ignore lint/a11y/noLabelWithoutControl: association is supplied by callers through htmlFor or nesting patterns.\n\t\t\t<label data-slot=\"label\" className={labelClassName} {...props}>\n\t\t\t\t<div className=\"inline-flex\">{children}</div>\n\t\t\t\t{withAsterisk && (\n\t\t\t\t\t<span className=\"inline-flex shrink-0 text-fg-danger\">*</span>\n\t\t\t\t)}\n\t\t\t\t{showOptionalText && (\n\t\t\t\t\t<span className=\"text-gdt-xs font-normal italic\">(optional)</span>\n\t\t\t\t)}\n\t\t\t</label>\n\t\t);\n\t}\n\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: association is supplied by callers through htmlFor or nesting patterns.\n\t\t<label data-slot=\"label\" className={labelClassName} {...props}>\n\t\t\t<div>\n\t\t\t\t{children}{\" \"}\n\t\t\t\t{showOptionalText && (\n\t\t\t\t\t<span className=\"text-gdt-xs font-normal italic\">(optional)</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</label>\n\t);\n}\n\nexport { Label };\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ACPG,SACC,KADD;AAlBH,SAAS,MAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,GAAG;AACJ,GAGG;AACF,QAAM,iBAAiB;AAAA,IACtB;AAAA,IACA;AAAA,EACD;AAEA,MAAI,cAAc;AACjB;AAAA;AAAA,MAEC,qBAAC,WAAM,aAAU,SAAQ,WAAW,gBAAiB,GAAG,OACvD;AAAA,4BAAC,SAAI,WAAU,eAAe,UAAS;AAAA,QACtC,gBACA,oBAAC,UAAK,WAAU,uCAAsC,eAAC;AAAA,QAEvD,oBACA,oBAAC,UAAK,WAAU,kCAAiC,wBAAU;AAAA,SAE7D;AAAA;AAAA,EAEF;AAEA;AAAA;AAAA,IAEC,oBAAC,WAAM,aAAU,SAAQ,WAAW,gBAAiB,GAAG,OACvD,+BAAC,SACC;AAAA;AAAA,MAAU;AAAA,MACV,oBACA,oBAAC,UAAK,WAAU,kCAAiC,wBAAU;AAAA,OAE7D,GACD;AAAA;AAEF;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/line-chart.js

@@ -1,170 +1,13 @@
-// src/components/ui/chart.tsx
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
+"use client";
+import {
+  cartesianAxisProps
+} from "./chunk-NOFXVRWL.js";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import "./chunk-Y4TTYVNE.js";
 
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/chart.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ChartContext = React.createContext(null);
-var chartCardVariants = cva(
-  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
-  {
-    variants: {
-      size: {
-        sm: "gap-3 p-4",
-        md: "gap-4 p-5",
-        lg: "gap-5 p-6"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
-  variants: {
-    size: {
-      sm: "text-gdt-md",
-      md: "text-gdt-lg",
-      lg: "text-gdt-h5"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
-  variants: {
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipVariants = cva(
-  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
-  {
-    variants: {
-      size: {
-        xs: "gap-0.5 rounded-md p-2",
-        sm: "gap-0.5 rounded-md p-2.5",
-        md: "gap-1 rounded-lg p-3",
-        lg: "gap-1 rounded-xl p-3.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: {
-      xs: "size-1.5",
-      sm: "size-2",
-      md: "size-2.5",
-      lg: "size-2.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
-  variants: {
-    size: {
-      xs: "text-gdt-xs",
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipValueVariants = cva(
-  "font-extrabold text-fg-primary tabular-nums",
-  {
-    variants: {
-      size: {
-        xs: "text-gdt-sm",
-        sm: "text-gdt-md",
-        md: "text-gdt-lg",
-        lg: "text-gdt-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var chartLegendItemVariants = cva(
-  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
-        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
-      },
-      interactive: {
-        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
-        false: ""
-      },
-      inactive: {
-        true: "text-fg-caption-placeholder line-through",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      interactive: false,
-      inactive: false
-    }
-  }
-);
-var chartLegendMarkerSizeVariants = cva("shrink-0", {
-  variants: {
-    marker: {
-      dot: "rounded-full",
-      square: "rounded-[2px]",
-      line: "rounded-full"
-    },
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  compoundVariants: [
-    { marker: ["dot", "square"], size: "sm", className: "size-2" },
-    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
-    { marker: "line", size: "sm", className: "h-[3px] w-3" },
-    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
-  ],
-  defaultVariants: { marker: "dot", size: "md" }
-});
-function cartesianAxisProps(layout) {
-  const tick = { fontSize: layout.tickFontSize };
-  return {
-    xAxis: {
-      tickLine: false,
-      axisLine: false,
-      tickMargin: layout.tickMargin,
-      tick
-    },
-    yAxis: {
-      tickLine: false,
-      axisLine: false,
-      width: layout.yAxisWidth,
-      tick
-    }
-  };
-}
-
-// src/components/ui/line-chart.tsx
+// src/line-chart.tsx
 var LINE_CHART_LAYOUT = {
   sm: {
     height: 64,

package/dist/line-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/chart.tsx","../src/components/ui/size-context.tsx","../src/components/ui/line-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Markers use `--color-surface-brand` as a placeholder. Giddaa has no\n * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each\n * series (its legend marker and tooltip dot) to its own colour once they exist.\n * Until then any series without an explicit colour paints brand-green.\n */\nconst SERIES_COLOR_PLACEHOLDER = \"var(--color-surface-brand)\";\n\n/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */\nexport type ChartValueType = \"number\" | \"percentage\" | \"currency\";\n\nfunction formatChartValue(\n\tvalue: TooltipValueType | undefined,\n\ttype: ChartValueType,\n) {\n\tif (Array.isArray(value)) {\n\t\treturn value.join(\", \");\n\t}\n\n\tif (typeof value !== \"number\") {\n\t\treturn value == null ? \"\" : String(value);\n\t}\n\n\tswitch (type) {\n\t\tcase \"currency\":\n\t\t\treturn `₦${value.toLocaleString(\"en-NG\")}`;\n\t\tcase \"percentage\":\n\t\t\treturn `${value.toLocaleString(\"en-NG\", {\n\t\t\t\tminimumFractionDigits: 1,\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t})}%`;\n\t\tdefault:\n\t\t\treturn value.toLocaleString(\"en-NG\");\n\t}\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n\tstring,\n\t{\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & (\n\t\t| { color?: string; theme?: never }\n\t\t| { color?: never; theme: Record<keyof typeof THEMES, string> }\n\t)\n>;\n\ntype ChartContextProps = {\n\tconfig: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n\tconst context = React.useContext(ChartContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useChart must be used within a <ChartContainer />\");\n\t}\n\n\treturn context;\n}\n\n/**\n * Shared chart frame — the chrome that surrounds the plot of any chart type\n * (bar, line, area, pie). These are presentational, domain-free, and size-aware:\n * a `size` flows through `SizeProvider` so the plot and its labels can scale\n * with the card. Compose them with the plot primitives:\n *\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config}>{/* recharts plot *\\/}</ChartContainer>\n * </ChartCard>\n */\nconst chartCardVariants = cva(\n\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-3 p-4\",\n\t\t\t\tmd: \"gap-4 p-5\",\n\t\t\t\tlg: \"gap-5 p-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartCard({\n\tclassName,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"section\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<section\n\t\t\t\tdata-slot=\"chart-card\"\n\t\t\t\tclassName={cn(chartCardVariants({ size: resolvedSize }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart-header\"\n\t\t\tclassName={cn(\"flex min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartTitleVariants = cva(\"min-w-0 font-bold text-fg-primary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-md\",\n\t\t\tmd: \"text-gdt-lg\",\n\t\t\tlg: \"text-gdt-h5\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartTitle({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"h3\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<h3\n\t\t\tdata-slot=\"chart-title\"\n\t\t\tclassName={cn(chartTitleVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartDescriptionVariants = cva(\"min-w-0 font-normal text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartDescription({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"p\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"chart-description\"\n\t\t\tclassName={cn(\n\t\t\t\tchartDescriptionVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChartContainer({\n\tid,\n\tclassName,\n\tchildren,\n\tconfig,\n\tinitialDimension = INITIAL_DIMENSION,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tconfig: ChartConfig;\n\tchildren: React.ComponentProps<\n\t\ttypeof RechartsPrimitive.ResponsiveContainer\n\t>[\"children\"];\n\tinitialDimension?: {\n\t\twidth: number;\n\t\theight: number;\n\t};\n}) {\n\tconst uniqueId = React.useId();\n\tconst chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<ChartContext.Provider value={{ config }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart\"\n\t\t\t\tdata-chart={chartId}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"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\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartStyle id={chartId} config={config} />\n\t\t\t\t<RechartsPrimitive.ResponsiveContainer\n\t\t\t\t\tinitialDimension={initialDimension}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</RechartsPrimitive.ResponsiveContainer>\n\t\t\t</div>\n\t\t</ChartContext.Provider>\n\t);\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n\tconst colorConfig = Object.entries(config).filter(\n\t\t([, config]) => config.theme ?? config.color,\n\t);\n\n\tif (!colorConfig.length) {\n\t\treturn null;\n\t}\n\n\tconst styleContent = Object.entries(THEMES)\n\t\t.map(\n\t\t\t([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n\t.map(([key, itemConfig]) => {\n\t\tconst color =\n\t\t\titemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n\t\t\titemConfig.color;\n\t\treturn color ? `  --color-${key}: ${color};` : null;\n\t})\n\t.join(\"\\n\")}\n}\n`,\n\t\t)\n\t\t.join(\"\\n\");\n\n\treturn <style>{styleContent}</style>;\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Hover tooltip for a chart data point. It surfaces a single precise value with\n * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed\n * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,\n * 1px border-subtle) so users can read exact figures without leaving the chart.\n *\n * Anatomy: series dot · metric label · hero value · period caption.\n */\nconst chartTooltipVariants = cva(\n\t\"flex flex-col bg-surface-overlay border border-line-subtle shadow-2\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"gap-0.5 rounded-md p-2\",\n\t\t\t\tsm: \"gap-0.5 rounded-md p-2.5\",\n\t\t\t\tmd: \"gap-1 rounded-lg p-3\",\n\t\t\t\tlg: \"gap-1 rounded-xl p-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst chartTooltipDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"size-1.5\",\n\t\t\tsm: \"size-2\",\n\t\t\tmd: \"size-2.5\",\n\t\t\tlg: \"size-2.5\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst chartTooltipLabelVariants = cva(\"font-medium text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-gdt-xs\",\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nconst chartTooltipValueVariants = cva(\n\t\"font-extrabold text-fg-primary tabular-nums\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"text-gdt-sm\",\n\t\t\t\tsm: \"text-gdt-md\",\n\t\t\t\tmd: \"text-gdt-lg\",\n\t\t\t\tlg: \"text-gdt-xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n\thideIndicator = false,\n\tlabel,\n\tlabelFormatter,\n\tformatter,\n\tcolor,\n\tnameKey,\n\tvalueType = \"number\",\n\tsize = \"md\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n\tReact.ComponentProps<\"div\"> & {\n\t\thideIndicator?: boolean;\n\t\tnameKey?: string;\n\t\tvalueType?: ChartValueType;\n\t} & VariantProps<typeof chartTooltipVariants> &\n\tOmit<\n\t\tRechartsPrimitive.DefaultTooltipContentProps<\n\t\t\tTooltipValueType,\n\t\t\tTooltipNameType\n\t\t>,\n\t\t\"accessibilityLayer\"\n\t>) {\n\tconst { config } = useChart();\n\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst [item] = payload.filter((entry) => entry.type !== \"none\");\n\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\tconst dotColor =\n\t\tcolor ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;\n\n\t// Metric label — the short name of the series being read, e.g. \"Total Revenue\".\n\tconst metricLabel = itemConfig?.label ?? item.name;\n\t// Hero value — the precise, formatted figure, the visual focus of the tooltip.\n\tconst heroValue = formatter\n\t\t? formatter(item.value, item.name ?? \"\", item, 0, item.payload)\n\t\t: formatChartValue(item.value, valueType);\n\t// Period caption — the time context for the value, e.g. \"March 2026\".\n\tconst periodCaption = labelFormatter\n\t\t? labelFormatter(label, payload)\n\t\t: ((typeof label === \"string\" ? config[label]?.label : null) ?? label);\n\n\treturn (\n\t\t<div className={cn(chartTooltipVariants({ size }), className)}>\n\t\t\t{metricLabel != null && (\n\t\t\t\t<div className=\"flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0\">\n\t\t\t\t\t{!hideIndicator &&\n\t\t\t\t\t\t(itemConfig?.icon ? (\n\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(chartTooltipDotVariants({ size }))}\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t<span className={cn(chartTooltipLabelVariants({ size }))}>\n\t\t\t\t\t\t{metricLabel}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<p className={cn(chartTooltipValueVariants({ size }))}>{heroValue}</p>\n\t\t\t{periodCaption != null && periodCaption !== \"\" && (\n\t\t\t\t<p className=\"text-gdt-xs text-fg-caption-placeholder\">\n\t\t\t\t\t{periodCaption}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Marker shape that ties a legend item to its series. */\ntype ChartLegendMarker = \"dot\" | \"square\" | \"line\";\n\nconst chartLegendItemVariants = cva(\n\t\"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5\",\n\t\t\t},\n\t\t\tinteractive: {\n\t\t\t\ttrue: \"cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t\tinactive: {\n\t\t\t\ttrue: \"text-fg-caption-placeholder line-through\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tinteractive: false,\n\t\t\tinactive: false,\n\t\t},\n\t},\n);\n\nconst chartLegendMarkerSizeVariants = cva(\"shrink-0\", {\n\tvariants: {\n\t\tmarker: {\n\t\t\tdot: \"rounded-full\",\n\t\t\tsquare: \"rounded-[2px]\",\n\t\t\tline: \"rounded-full\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ marker: [\"dot\", \"square\"], size: \"sm\", className: \"size-2\" },\n\t\t{ marker: [\"dot\", \"square\"], size: \"md\", className: \"size-2.5\" },\n\t\t{ marker: \"line\", size: \"sm\", className: \"h-[3px] w-3\" },\n\t\t{ marker: \"line\", size: \"md\", className: \"h-[3px] w-3.5\" },\n\t],\n\tdefaultVariants: { marker: \"dot\", size: \"md\" },\n});\n\n/**\n * A shared legend for all chart types. Each item pairs a series marker with a\n * label and can be toggled to hide or show its series — the inactive state mutes\n * the marker and strikes through the label. Items compose into horizontal rows\n * or vertical columns, in two sizes, with dot, square, or line markers.\n *\n * Toggling: pass `onToggle` to make items interactive. Inactive items are read\n * from each payload entry's `inactive` flag (recharts sets this when wired) or\n * the controlled `inactiveKeys` set.\n */\nfunction ChartLegendContent({\n\tclassName,\n\thideIcon = false,\n\tpayload,\n\tverticalAlign = \"bottom\",\n\tnameKey,\n\tmarker = \"dot\",\n\tsize = \"md\",\n\torientation = \"horizontal\",\n\tinactiveKeys,\n\tonToggle,\n}: React.ComponentProps<\"div\"> & {\n\thideIcon?: boolean;\n\tnameKey?: string;\n\tmarker?: ChartLegendMarker;\n\tsize?: \"sm\" | \"md\";\n\torientation?: \"horizontal\" | \"vertical\";\n\tinactiveKeys?: Iterable<string>;\n\tonToggle?: (key: string) => void;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n\tconst { config } = useChart();\n\n\tif (!payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst inactiveSet = inactiveKeys ? new Set(inactiveKeys) : undefined;\n\tconst interactive = Boolean(onToggle);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"flex-col items-start gap-0.5\"\n\t\t\t\t\t: \"flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5\",\n\t\t\t\tverticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{payload\n\t\t\t\t.filter((item) => item.type !== \"none\")\n\t\t\t\t.map((item, index) => {\n\t\t\t\t\tconst key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n\t\t\t\t\tconst itemKey = `${item.dataKey ?? item.value ?? index}`;\n\t\t\t\t\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\t\t\t\t\tconst inactive =\n\t\t\t\t\t\t(inactiveSet?.has(key) ?? false) || Boolean(item.inactive);\n\t\t\t\t\tconst markerColor = inactive\n\t\t\t\t\t\t? \"var(--color-fg-caption-placeholder)\"\n\t\t\t\t\t\t: (item.color ?? SERIES_COLOR_PLACEHOLDER);\n\n\t\t\t\t\tconst content = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{itemConfig?.icon && !hideIcon ? (\n\t\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tchartLegendMarkerSizeVariants({ marker, size }),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: markerColor }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{itemConfig?.label ?? item.value}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (interactive) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-pressed={!inactive}\n\t\t\t\t\t\t\t\tonClick={() => onToggle?.(key)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t</div>\n\t);\n}\n\n/** The size-scaled layout numbers a cartesian chart needs to build axis props. */\ntype CartesianAxisLayout = {\n\ttickMargin: number;\n\ttickFontSize: number;\n\tyAxisWidth: number;\n};\n\n/**\n * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick\n * or axis lines, a size-scaled tick font, and a reserved value-axis width) that\n * every bar and line chart would otherwise repeat per axis. Spread the result\n * onto the recharts axis, then add the chart-specific props (`dataKey`,\n * `domain`, `ticks`, a `width`/`type` override, …):\n *\n *   const chart = useBarChartLayout();\n *   <XAxis dataKey=\"month\" {...chart.xAxis} />\n *   <YAxis domain={[0, 120]} {...chart.yAxis} />\n */\nfunction cartesianAxisProps(layout: CartesianAxisLayout) {\n\tconst tick = { fontSize: layout.tickFontSize };\n\treturn {\n\t\txAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\ttickMargin: layout.tickMargin,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\twidth: layout.yAxisWidth,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\nfunction getPayloadConfigFromPayload(\n\tconfig: ChartConfig,\n\tpayload: unknown,\n\tkey: string,\n) {\n\tif (typeof payload !== \"object\" || payload === null) {\n\t\treturn undefined;\n\t}\n\n\tconst payloadPayload =\n\t\t\"payload\" in payload &&\n\t\ttypeof payload.payload === \"object\" &&\n\t\tpayload.payload !== null\n\t\t\t? payload.payload\n\t\t\t: undefined;\n\n\tlet configLabelKey: string = key;\n\n\tif (\n\t\tkey in payload &&\n\t\ttypeof payload[key as keyof typeof payload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payload[key as keyof typeof payload] as string;\n\t} else if (\n\t\tpayloadPayload &&\n\t\tkey in payloadPayload &&\n\t\ttypeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payloadPayload[\n\t\t\tkey as keyof typeof payloadPayload\n\t\t] as string;\n\t}\n\n\treturn configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n\tcartesianAxisProps,\n\tChartCard,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartLegend,\n\tChartLegendContent,\n\tChartStyle,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n};\nexport type { CartesianAxisLayout };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n","\"use client\";\n\nimport { cartesianAxisProps } from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * Line charts are composed from recharts plot primitives directly — recharts\n * identifies `Line`, `Area`, `XAxis`, `YAxis`, and `CartesianGrid` by component\n * identity and cannot be wrapped. This module supplies giddaa-specific defaults\n * that would otherwise be copy-pasted into every line chart: per-size layout\n * numbers. Pair them with the shared frame and overlays from `./chart`.\n *\n * Five sizes (sm → huge) extend the three `ComponentSize` values used elsewhere.\n * xl and huge must be passed explicitly — they cannot be inherited from\n * `SizeProvider` since `ComponentSize` only carries sm/md/lg.\n *\n * Tokens:\n * - Primary series stroke + dots + area fill: `var(--color-surface-brand)`\n * - Comparison series: `var(--color-surface-accent)`\n * - Gridlines: `var(--color-line-subtle)`\n * - Area wash: primary series colour at 15 % opacity (`fillOpacity={0.15}`)\n * - Active-dot ring: `var(--color-surface-raised)` stroke (matches card bg)\n *\n * @example\n * const chart = useLineChartLayout();\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config} {...chart.container}>\n *     <AreaChart data={data} {...chart.chart}>\n *       <CartesianGrid vertical={false} stroke=\"var(--color-line-subtle)\" />\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <ChartLegend verticalAlign=\"top\" content={<ChartLegendContent marker=\"line\" />} />\n *       <ChartTooltip content={<ChartTooltipContent />} />\n *       <Area dataKey=\"revenue\" {...chart.area(\"var(--color-revenue)\")} />\n *     </AreaChart>\n *   </ChartContainer>\n * </ChartCard>\n */\n\n/** Five sizes for line charts — extends ComponentSize with xl and huge. */\ntype LineChartSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"huge\";\n\ntype LineChartLayout = {\n\t/** Plot height in px. Width stays fluid via ResponsiveContainer. */\n\theight: number;\n\t/** Outer margin. Top leaves room above the highest data point. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Line stroke width in px. */\n\tstrokeWidth: number;\n\t/** Radius of the resting data-point dot. */\n\tdotRadius: number;\n\t/** Radius of the active (hover) dot. */\n\tactiveDotRadius: number;\n\t/** Axis tick label font size. */\n\ttickFontSize: number;\n\t/** Reserved width for the value (Y) axis. */\n\tyAxisWidth: number;\n\t/** Space between an axis and its tick labels. */\n\ttickMargin: number;\n};\n\nconst LINE_CHART_LAYOUT: Record<LineChartSize, LineChartLayout> = {\n\tsm: {\n\t\theight: 64,\n\t\tmargin: { top: 6, right: 6, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 2.5,\n\t\tactiveDotRadius: 4,\n\t\ttickFontSize: 9,\n\t\tyAxisWidth: 22,\n\t\ttickMargin: 3,\n\t},\n\tmd: {\n\t\theight: 88,\n\t\tmargin: { top: 8, right: 8, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3,\n\t\tactiveDotRadius: 4.5,\n\t\ttickFontSize: 10,\n\t\tyAxisWidth: 24,\n\t\ttickMargin: 4,\n\t},\n\tlg: {\n\t\theight: 108,\n\t\tmargin: { top: 10, right: 10, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3.5,\n\t\tactiveDotRadius: 5,\n\t\ttickFontSize: 11,\n\t\tyAxisWidth: 26,\n\t\ttickMargin: 5,\n\t},\n\txl: {\n\t\theight: 132,\n\t\tmargin: { top: 12, right: 12, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 4,\n\t\tactiveDotRadius: 5.5,\n\t\ttickFontSize: 11,\n\t\tyAxisWidth: 28,\n\t\ttickMargin: 6,\n\t},\n\thuge: {\n\t\theight: 164,\n\t\tmargin: { top: 14, right: 14, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 4.5,\n\t\tactiveDotRadius: 6,\n\t\ttickFontSize: 12,\n\t\tyAxisWidth: 30,\n\t\ttickMargin: 7,\n\t},\n};\n\n/** Map the 5 line-chart sizes to the 3 ComponentSize values for ChartCard. */\nfunction toComponentSize(size: LineChartSize): ComponentSize {\n\tif (size === \"xl\" || size === \"huge\") return \"lg\";\n\treturn size as ComponentSize;\n}\n\n/**\n * Build the colour-bound props for a `<Line>`/`<Area>` series at a given size:\n * the rounded stroke geometry plus the resting and active dots, all painted in\n * `color`. `area` adds the 15 %-opacity wash beneath the stroke.\n */\nfunction seriesProps(layout: LineChartLayout, color: string) {\n\treturn {\n\t\ttype: \"linear\" as const,\n\t\tstroke: color,\n\t\tstrokeWidth: layout.strokeWidth,\n\t\tstrokeLinejoin: \"round\" as const,\n\t\tstrokeLinecap: \"round\" as const,\n\t\tdot: { r: layout.dotRadius, fill: color, strokeWidth: 0 },\n\t\tactiveDot: {\n\t\t\tr: layout.activeDotRadius,\n\t\t\tfill: color,\n\t\t\tstroke: \"var(--color-surface-raised)\",\n\t\t\tstrokeWidth: 2,\n\t\t},\n\t};\n}\n\n/**\n * Resolve the line-chart layout for an explicit or inherited component size. The\n * returned object groups the giddaa defaults by the recharts component they\n * belong to. `line(color)`/`area(color)` return the full series props for a\n * given colour — spread each onto its element, then pass the data-specific props\n * (`config`, `data`, `dataKey`, …) directly afterwards to add or override:\n *\n *   const chart = useLineChartLayout(size);\n *   <ChartContainer config={config} {...chart.container}>\n *     <AreaChart data={data} {...chart.chart}>\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <Area dataKey=\"revenue\" {...chart.area(\"var(--color-revenue)\")} />\n */\nfunction useLineChartLayout(size?: LineChartSize) {\n\tconst inheritedSize = useComponentSize() as LineChartSize;\n\tconst resolved: LineChartSize = size ?? inheritedSize;\n\tconst layout = LINE_CHART_LAYOUT[resolved] ?? LINE_CHART_LAYOUT.md;\n\tconst axes = cartesianAxisProps(layout);\n\n\treturn {\n\t\tcontainer: {\n\t\t\tclassName: \"aspect-auto w-full\",\n\t\t\tstyle: { height: layout.height },\n\t\t},\n\t\tchart: {\n\t\t\taccessibilityLayer: true,\n\t\t\tmargin: layout.margin,\n\t\t},\n\t\txAxis: axes.xAxis,\n\t\tyAxis: axes.yAxis,\n\t\tline: (color: string) => seriesProps(layout, color),\n\t\tarea: (color: string) => ({\n\t\t\t...seriesProps(layout, color),\n\t\t\tfill: color,\n\t\t\tfillOpacity: 0.15,\n\t\t}),\n\t};\n}\n\nexport { LINE_CHART_LAYOUT, toComponentSize, useLineChartLayout };\nexport type { LineChartLayout, LineChartSize };\n"],"mappings":"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","names":["Fragment","jsx"]}
+{"version":3,"sources":["../src/line-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { cartesianAxisProps } from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * Line charts are composed from recharts plot primitives directly — recharts\n * identifies `Line`, `Area`, `XAxis`, `YAxis`, and `CartesianGrid` by component\n * identity and cannot be wrapped. This module supplies giddaa-specific defaults\n * that would otherwise be copy-pasted into every line chart: per-size layout\n * numbers. Pair them with the shared frame and overlays from `./chart`.\n *\n * Five sizes (sm → huge) extend the three `ComponentSize` values used elsewhere.\n * xl and huge must be passed explicitly — they cannot be inherited from\n * `SizeProvider` since `ComponentSize` only carries sm/md/lg.\n *\n * Tokens:\n * - Primary series stroke + dots + area fill: `var(--color-surface-brand)`\n * - Comparison series: `var(--color-surface-accent)`\n * - Gridlines: `var(--color-line-subtle)`\n * - Area wash: primary series colour at 15 % opacity (`fillOpacity={0.15}`)\n * - Active-dot ring: `var(--color-surface-raised)` stroke (matches card bg)\n *\n * @example\n * const chart = useLineChartLayout();\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config} {...chart.container}>\n *     <AreaChart data={data} {...chart.chart}>\n *       <CartesianGrid vertical={false} stroke=\"var(--color-line-subtle)\" />\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <ChartLegend verticalAlign=\"top\" content={<ChartLegendContent marker=\"line\" />} />\n *       <ChartTooltip content={<ChartTooltipContent />} />\n *       <Area dataKey=\"revenue\" {...chart.area(\"var(--color-revenue)\")} />\n *     </AreaChart>\n *   </ChartContainer>\n * </ChartCard>\n */\n\n/** Five sizes for line charts — extends ComponentSize with xl and huge. */\ntype LineChartSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"huge\";\n\ntype LineChartLayout = {\n\t/** Plot height in px. Width stays fluid via ResponsiveContainer. */\n\theight: number;\n\t/** Outer margin. Top leaves room above the highest data point. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Line stroke width in px. */\n\tstrokeWidth: number;\n\t/** Radius of the resting data-point dot. */\n\tdotRadius: number;\n\t/** Radius of the active (hover) dot. */\n\tactiveDotRadius: number;\n\t/** Axis tick label font size. */\n\ttickFontSize: number;\n\t/** Reserved width for the value (Y) axis. */\n\tyAxisWidth: number;\n\t/** Space between an axis and its tick labels. */\n\ttickMargin: number;\n};\n\nconst LINE_CHART_LAYOUT: Record<LineChartSize, LineChartLayout> = {\n\tsm: {\n\t\theight: 64,\n\t\tmargin: { top: 6, right: 6, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 2.5,\n\t\tactiveDotRadius: 4,\n\t\ttickFontSize: 9,\n\t\tyAxisWidth: 22,\n\t\ttickMargin: 3,\n\t},\n\tmd: {\n\t\theight: 88,\n\t\tmargin: { top: 8, right: 8, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3,\n\t\tactiveDotRadius: 4.5,\n\t\ttickFontSize: 10,\n\t\tyAxisWidth: 24,\n\t\ttickMargin: 4,\n\t},\n\tlg: {\n\t\theight: 108,\n\t\tmargin: { top: 10, right: 10, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3.5,\n\t\tactiveDotRadius: 5,\n\t\ttickFontSize: 11,\n\t\tyAxisWidth: 26,\n\t\ttickMargin: 5,\n\t},\n\txl: {\n\t\theight: 132,\n\t\tmargin: { top: 12, right: 12, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 4,\n\t\tactiveDotRadius: 5.5,\n\t\ttickFontSize: 11,\n\t\tyAxisWidth: 28,\n\t\ttickMargin: 6,\n\t},\n\thuge: {\n\t\theight: 164,\n\t\tmargin: { top: 14, right: 14, bottom: 0, left: 0 },\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 4.5,\n\t\tactiveDotRadius: 6,\n\t\ttickFontSize: 12,\n\t\tyAxisWidth: 30,\n\t\ttickMargin: 7,\n\t},\n};\n\n/** Map the 5 line-chart sizes to the 3 ComponentSize values for ChartCard. */\nfunction toComponentSize(size: LineChartSize): ComponentSize {\n\tif (size === \"xl\" || size === \"huge\") return \"lg\";\n\treturn size as ComponentSize;\n}\n\n/**\n * Build the colour-bound props for a `<Line>`/`<Area>` series at a given size:\n * the rounded stroke geometry plus the resting and active dots, all painted in\n * `color`. `area` adds the 15 %-opacity wash beneath the stroke.\n */\nfunction seriesProps(layout: LineChartLayout, color: string) {\n\treturn {\n\t\ttype: \"linear\" as const,\n\t\tstroke: color,\n\t\tstrokeWidth: layout.strokeWidth,\n\t\tstrokeLinejoin: \"round\" as const,\n\t\tstrokeLinecap: \"round\" as const,\n\t\tdot: { r: layout.dotRadius, fill: color, strokeWidth: 0 },\n\t\tactiveDot: {\n\t\t\tr: layout.activeDotRadius,\n\t\t\tfill: color,\n\t\t\tstroke: \"var(--color-surface-raised)\",\n\t\t\tstrokeWidth: 2,\n\t\t},\n\t};\n}\n\n/**\n * Resolve the line-chart layout for an explicit or inherited component size. The\n * returned object groups the giddaa defaults by the recharts component they\n * belong to. `line(color)`/`area(color)` return the full series props for a\n * given colour — spread each onto its element, then pass the data-specific props\n * (`config`, `data`, `dataKey`, …) directly afterwards to add or override:\n *\n *   const chart = useLineChartLayout(size);\n *   <ChartContainer config={config} {...chart.container}>\n *     <AreaChart data={data} {...chart.chart}>\n *       <XAxis dataKey=\"month\" {...chart.xAxis} />\n *       <YAxis {...chart.yAxis} />\n *       <Area dataKey=\"revenue\" {...chart.area(\"var(--color-revenue)\")} />\n */\nfunction useLineChartLayout(size?: LineChartSize) {\n\tconst inheritedSize = useComponentSize() as LineChartSize;\n\tconst resolved: LineChartSize = size ?? inheritedSize;\n\tconst layout = LINE_CHART_LAYOUT[resolved] ?? LINE_CHART_LAYOUT.md;\n\tconst axes = cartesianAxisProps(layout);\n\n\treturn {\n\t\tcontainer: {\n\t\t\tclassName: \"aspect-auto w-full\",\n\t\t\tstyle: { height: layout.height },\n\t\t},\n\t\tchart: {\n\t\t\taccessibilityLayer: true,\n\t\t\tmargin: layout.margin,\n\t\t},\n\t\txAxis: axes.xAxis,\n\t\tyAxis: axes.yAxis,\n\t\tline: (color: string) => seriesProps(layout, color),\n\t\tarea: (color: string) => ({\n\t\t\t...seriesProps(layout, color),\n\t\t\tfill: color,\n\t\t\tfillOpacity: 0.15,\n\t\t}),\n\t};\n}\n\nexport { LINE_CHART_LAYOUT, toComponentSize, useLineChartLayout };\nexport type { LineChartLayout, LineChartSize };\n"],"mappings":";;;;;;;;;;AAiEA,IAAM,oBAA4D;AAAA,EACjE,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAAA,IAC/C,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAAA,IAC/C,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,EAAE;AAAA,IACjD,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,EAAE;AAAA,IACjD,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,EAAE;AAAA,IACjD,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA,EACb;AACD;AAGA,SAAS,gBAAgB,MAAoC;AAC5D,MAAI,SAAS,QAAQ,SAAS,OAAQ,QAAO;AAC7C,SAAO;AACR;AAOA,SAAS,YAAY,QAAyB,OAAe;AAC5D,SAAO;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa,OAAO;AAAA,IACpB,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,EAAE,GAAG,OAAO,WAAW,MAAM,OAAO,aAAa,EAAE;AAAA,IACxD,WAAW;AAAA,MACV,GAAG,OAAO;AAAA,MACV,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,aAAa;AAAA,IACd;AAAA,EACD;AACD;AAgBA,SAAS,mBAAmB,MAAsB;AACjD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,WAA0B,QAAQ;AACxC,QAAM,SAAS,kBAAkB,QAAQ,KAAK,kBAAkB;AAChE,QAAM,OAAO,mBAAmB,MAAM;AAEtC,SAAO;AAAA,IACN,WAAW;AAAA,MACV,WAAW;AAAA,MACX,OAAO,EAAE,QAAQ,OAAO,OAAO;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACN,oBAAoB;AAAA,MACpB,QAAQ,OAAO;AAAA,IAChB;AAAA,IACA,OAAO,KAAK;AAAA,IACZ,OAAO,KAAK;AAAA,IACZ,MAAM,CAAC,UAAkB,YAAY,QAAQ,KAAK;AAAA,IAClD,MAAM,CAAC,WAAmB;AAAA,MACzB,GAAG,YAAY,QAAQ,KAAK;AAAA,MAC5B,MAAM;AAAA,MACN,aAAa;AAAA,IACd;AAAA,EACD;AACD;","names":[]}