@giddaa-housing/ui 0.1.0

package/dist/item.js

@@ -0,0 +1,93 @@
+// src/components/ui/item.tsx
+import { mergeProps, useRender } from "@base-ui/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/item.tsx
+function Item({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn("flex flex-col gap-1", className)
+      },
+      props
+    ),
+    render
+  });
+}
+function ItemLabel({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn("text-gdt-sm  text-fg-secondary", className)
+      },
+      props
+    ),
+    render
+  });
+}
+function ItemValue({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(
+          "text-gdt-sm font-semibold text-fg-primary [a]:text-fg-brand [&_a]:text-fg-brand",
+          className
+        )
+      },
+      props
+    ),
+    render
+  });
+}
+export {
+  Item,
+  ItemLabel,
+  ItemValue
+};
+//# sourceMappingURL=item.js.map

package/dist/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/item.tsx","../src/lib/cn.ts"],"sourcesContent":["import { mergeProps, useRender } from \"@base-ui/react\";\nimport { cn } from \"../../lib/cn\";\n\nfunction Item({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"flex flex-col gap-1\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction ItemLabel({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\"text-gdt-sm  text-fg-secondary\", className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t});\n}\n\nfunction ItemValue({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"div\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps<\"div\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"text-gdt-sm font-semibold text-fg-primary [a]:text-fg-brand [&_a]:text-fg-brand\",\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\nexport { Item, ItemLabel, ItemValue };\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"],"mappings":";AAAA,SAAS,YAAY,iBAAiB;;;ACAtC,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;;;AD5BA,SAAS,KAAK;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC/C;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,UAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,MAC1D;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD,CAAC;AACF;AAEA,SAAS,UAAU;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoC;AACnC,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/kpi-card.d.ts

@@ -0,0 +1,24 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Skeleton } from './skeleton.js';
+
+declare function KpiCard({ className, loading, render, ...props }: useRender.ComponentProps<"article"> & {
+    loading?: boolean;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function KpiCardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function KpiCardLinkOutIcon({ children, className, render, ...props }: useRender.ComponentProps<"span">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function KpiCardValue({ className, render, ...props }: useRender.ComponentProps<"p">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function KpiCardValueSkeleton({ className, ...props }: React.ComponentProps<typeof Skeleton>): React$1.JSX.Element;
+declare const kpiCardTrendVariants: (props?: ({
+    direction?: "up" | "down" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type KpiCardTrendProps = useRender.ComponentProps<"p"> & VariantProps<typeof kpiCardTrendVariants> & {
+    showIcon?: boolean;
+};
+declare function KpiCardTrend({ children, className, direction, render, showIcon, ...props }: KpiCardTrendProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function KpiCardTrendValue({ className, render, ...props }: useRender.ComponentProps<"span">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function KpiCardTrendCaption({ className, render, ...props }: useRender.ComponentProps<"span">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+
+export { KpiCard, KpiCardLinkOutIcon, KpiCardTitle, KpiCardTrend, KpiCardTrendCaption, KpiCardTrendValue, KpiCardValue, KpiCardValueSkeleton, kpiCardTrendVariants };

package/dist/kpi-card.js

@@ -0,0 +1,243 @@
+// src/components/ui/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";
+function KpiCard({
+  className,
+  loading = false,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "article",
+    props: mergeProps(
+      {
+        "aria-busy": loading || void 0,
+        className: cn(
+          "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",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "kpi-card",
+      loading
+    }
+  });
+}
+function KpiCardTitle({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "h3",
+    props: mergeProps(
+      {
+        className: cn(
+          "min-w-0 pr-gdt-xl text-gdt-sm font-semibold capitalized text-fg-secondary",
+          className
+        )
+      },
+      props
+    ),
+    render
+  });
+}
+function KpiCardLinkOutIcon({
+  children,
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        "aria-hidden": true,
+        className: cn(
+          "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" })
+      },
+      props
+    ),
+    render
+  });
+}
+function KpiCardValue({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "p",
+    props: mergeProps(
+      {
+        className: cn(
+          "text-gdt-h3 font-extrabold  text-fg-primary group-aria-busy/kpi-card:hidden",
+          className
+        )
+      },
+      props
+    ),
+    render
+  });
+}
+function KpiCardValueSkeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    Skeleton,
+    {
+      className: cn(
+        "hidden h-8 mt-2 md:mt-3 w-24 rounded-md group-aria-busy/kpi-card:block",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var kpiCardTrendVariants = cva(
+  "flex min-w-0 items-center gap-1.5 text-gdt-capitalized",
+  {
+    variants: {
+      direction: {
+        up: "text-status-success",
+        down: "text-status-danger"
+      }
+    },
+    defaultVariants: {
+      direction: "up"
+    }
+  }
+);
+function KpiCardTrend({
+  children,
+  className,
+  direction = "up",
+  render,
+  showIcon = true,
+  ...props
+}) {
+  const Icon = direction === "down" ? ArrowDown : ArrowUp;
+  return useRender({
+    defaultTagName: "p",
+    props: mergeProps(
+      {
+        className: cn(kpiCardTrendVariants({ direction }), className),
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          showIcon ? /* @__PURE__ */ jsx2(Icon, { "aria-hidden": "true", className: "size-3 shrink-0" }) : null,
+          children
+        ] })
+      },
+      props
+    ),
+    render,
+    state: {
+      direction,
+      showIcon,
+      slot: "kpi-card-trend"
+    }
+  });
+}
+function KpiCardTrendValue({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn("text-gdt-sm text-current font-semibold", className)
+      },
+      props
+    ),
+    render
+  });
+}
+function KpiCardTrendCaption({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(
+          "min-w-0 truncate text-gdt-xs text-fg-secondary font-normal",
+          className
+        )
+      },
+      props
+    ),
+    render
+  });
+}
+export {
+  KpiCard,
+  KpiCardLinkOutIcon,
+  KpiCardTitle,
+  KpiCardTrend,
+  KpiCardTrendCaption,
+  KpiCardTrendValue,
+  KpiCardValue,
+  KpiCardValueSkeleton,
+  kpiCardTrendVariants
+};
+//# sourceMappingURL=kpi-card.js.map

package/dist/kpi-card.js.map

@@ -0,0 +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"]}

package/dist/label.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+declare function Label({ className, children, withAsterisk, showOptionalText, ...props }: React.ComponentProps<"label"> & {
+    withAsterisk?: boolean;
+    showOptionalText?: boolean;
+}): React.JSX.Element;
+
+export { Label };

package/dist/label.js

@@ -0,0 +1,68 @@
+// 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)" })
+    ] }) })
+  );
+}
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/label.js.map

@@ -0,0 +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":[]}

package/dist/line-chart.d.ts

@@ -0,0 +1,155 @@
+import { ComponentSize } from './size-context.js';
+import 'react';
+
+/**
+ * Line charts are composed from recharts plot primitives directly — recharts
+ * identifies `Line`, `Area`, `XAxis`, `YAxis`, and `CartesianGrid` by component
+ * identity and cannot be wrapped. This module supplies giddaa-specific defaults
+ * that would otherwise be copy-pasted into every line chart: per-size layout
+ * numbers. Pair them with the shared frame and overlays from `./chart`.
+ *
+ * Five sizes (sm → huge) extend the three `ComponentSize` values used elsewhere.
+ * xl and huge must be passed explicitly — they cannot be inherited from
+ * `SizeProvider` since `ComponentSize` only carries sm/md/lg.
+ *
+ * Tokens:
+ * - Primary series stroke + dots + area fill: `var(--color-surface-brand)`
+ * - Comparison series: `var(--color-surface-accent)`
+ * - Gridlines: `var(--color-line-subtle)`
+ * - Area wash: primary series colour at 15 % opacity (`fillOpacity={0.15}`)
+ * - Active-dot ring: `var(--color-surface-raised)` stroke (matches card bg)
+ *
+ * @example
+ * const chart = useLineChartLayout();
+ * <ChartCard size="md">
+ *   <ChartHeader>
+ *     <ChartTitle>Revenue Overview</ChartTitle>
+ *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
+ *   </ChartHeader>
+ *   <ChartContainer config={config} {...chart.container}>
+ *     <AreaChart data={data} {...chart.chart}>
+ *       <CartesianGrid vertical={false} stroke="var(--color-line-subtle)" />
+ *       <XAxis dataKey="month" {...chart.xAxis} />
+ *       <YAxis {...chart.yAxis} />
+ *       <ChartLegend verticalAlign="top" content={<ChartLegendContent marker="line" />} />
+ *       <ChartTooltip content={<ChartTooltipContent />} />
+ *       <Area dataKey="revenue" {...chart.area("var(--color-revenue)")} />
+ *     </AreaChart>
+ *   </ChartContainer>
+ * </ChartCard>
+ */
+/** Five sizes for line charts — extends ComponentSize with xl and huge. */
+type LineChartSize = "sm" | "md" | "lg" | "xl" | "huge";
+type LineChartLayout = {
+    /** Plot height in px. Width stays fluid via ResponsiveContainer. */
+    height: number;
+    /** Outer margin. Top leaves room above the highest data point. */
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Line stroke width in px. */
+    strokeWidth: number;
+    /** Radius of the resting data-point dot. */
+    dotRadius: number;
+    /** Radius of the active (hover) dot. */
+    activeDotRadius: number;
+    /** Axis tick label font size. */
+    tickFontSize: number;
+    /** Reserved width for the value (Y) axis. */
+    yAxisWidth: number;
+    /** Space between an axis and its tick labels. */
+    tickMargin: number;
+};
+declare const LINE_CHART_LAYOUT: Record<LineChartSize, LineChartLayout>;
+/** Map the 5 line-chart sizes to the 3 ComponentSize values for ChartCard. */
+declare function toComponentSize(size: LineChartSize): ComponentSize;
+/**
+ * Resolve the line-chart layout for an explicit or inherited component size. The
+ * returned object groups the giddaa defaults by the recharts component they
+ * belong to. `line(color)`/`area(color)` return the full series props for a
+ * given colour — spread each onto its element, then pass the data-specific props
+ * (`config`, `data`, `dataKey`, …) directly afterwards to add or override:
+ *
+ *   const chart = useLineChartLayout(size);
+ *   <ChartContainer config={config} {...chart.container}>
+ *     <AreaChart data={data} {...chart.chart}>
+ *       <XAxis dataKey="month" {...chart.xAxis} />
+ *       <YAxis {...chart.yAxis} />
+ *       <Area dataKey="revenue" {...chart.area("var(--color-revenue)")} />
+ */
+declare function useLineChartLayout(size?: LineChartSize): {
+    container: {
+        className: string;
+        style: {
+            height: number;
+        };
+    };
+    chart: {
+        accessibilityLayer: boolean;
+        margin: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    xAxis: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly tickMargin: number;
+        readonly tick: {
+            fontSize: number;
+        };
+    };
+    yAxis: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly width: number;
+        readonly tick: {
+            fontSize: number;
+        };
+    };
+    line: (color: string) => {
+        type: "linear";
+        stroke: string;
+        strokeWidth: number;
+        strokeLinejoin: "round";
+        strokeLinecap: "round";
+        dot: {
+            r: number;
+            fill: string;
+            strokeWidth: number;
+        };
+        activeDot: {
+            r: number;
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+        };
+    };
+    area: (color: string) => {
+        fill: string;
+        fillOpacity: number;
+        type: "linear";
+        stroke: string;
+        strokeWidth: number;
+        strokeLinejoin: "round";
+        strokeLinecap: "round";
+        dot: {
+            r: number;
+            fill: string;
+            strokeWidth: number;
+        };
+        activeDot: {
+            r: number;
+            fill: string;
+            stroke: string;
+            strokeWidth: number;
+        };
+    };
+};
+
+export { LINE_CHART_LAYOUT, type LineChartLayout, type LineChartSize, toComponentSize, useLineChartLayout };