@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/kpi-card.js

@@ -1,203 +1,95 @@
-import {
-  Skeleton
-} from "./chunk-XZZAHNVM.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/kpi-card.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Skeleton } from "./skeleton.js";
+import { ArrowDown, ArrowUp, ArrowUpRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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";
-import { Fragment, jsx, 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
-    }
-  });
+//#region src/kpi-card.tsx
+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 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__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
-      },
-      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__ */ jsx(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 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__ */ jsx(
-    Skeleton,
-    {
-      className: cn(
-        "hidden h-8 mt-2 md:mt-3 w-24 rounded-md group-aria-busy/kpi-card:block",
-        className
-      ),
-      ...props
-    }
-  );
+function KpiCardValueSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(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__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3 shrink-0" }) : null,
-          children
-        ] })
-      },
-      props
-    ),
-    render,
-    state: {
-      direction,
-      showIcon,
-      slot: "kpi-card-trend"
-    }
-  });
+const 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__ */ jsx(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 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
-  });
+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
+//#endregion
+export { KpiCard, KpiCardLinkOutIcon, KpiCardTitle, KpiCardTrend, KpiCardTrendCaption, KpiCardTrendValue, KpiCardValue, KpiCardValueSkeleton, kpiCardTrendVariants };

package/dist/label.d.ts

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

package/dist/label.js

@@ -1,9 +1,41 @@
 "use client";
-import {
-  Label
-} from "./chunk-7TBMLFGW.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Label
-};
-//# sourceMappingURL=label.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/label.tsx
+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 /* @__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 /* @__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)"
+			})
+		] })
+	});
+}
+//#endregion
+export { Label };

package/dist/line-chart.d.ts

@@ -1,6 +1,5 @@
-import { ComponentSize } from './size-context.js';
-import 'react';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+//#region src/line-chart.d.ts
 /**
  * Line charts are composed from recharts plot primitives directly — recharts
  * identifies `Line`, `Area`, `XAxis`, `YAxis`, and `CartesianGrid` by component
@@ -41,27 +40,27 @@ import 'react';
 /** 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;
+  /** 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. */
@@ -81,75 +80,75 @@ declare function toComponentSize(size: LineChartSize): ComponentSize;
  *       <Area dataKey="revenue" {...chart.area("var(--color-revenue)")} />
  */
 declare function useLineChartLayout(size?: LineChartSize): {
-    container: {
-        className: string;
-        style: {
-            height: number;
-        };
+  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;
     };
-    chart: {
-        accessibilityLayer: boolean;
-        margin: {
-            top: number;
-            right: number;
-            bottom: number;
-            left: number;
-        };
+  };
+  yAxis: {
+    readonly tickLine: false;
+    readonly axisLine: false;
+    readonly width: number;
+    readonly tick: {
+      fontSize: number;
     };
-    xAxis: {
-        readonly tickLine: false;
-        readonly axisLine: false;
-        readonly tickMargin: 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;
     };
-    yAxis: {
-        readonly tickLine: false;
-        readonly axisLine: false;
-        readonly width: number;
-        readonly tick: {
-            fontSize: number;
-        };
+    activeDot: {
+      r: number;
+      fill: string;
+      stroke: string;
+      strokeWidth: 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) => {
+    type: "linear";
+    stroke: string;
+    strokeWidth: number;
+    strokeLinejoin: "round";
+    strokeLinecap: "round";
+    dot: {
+      r: number;
+      fill: 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;
-        };
+    activeDot: {
+      r: number;
+      fill: string;
+      stroke: string;
+      strokeWidth: number;
     };
+    fill: string;
+    fillOpacity: number;
+  };
 };
-
-export { LINE_CHART_LAYOUT, type LineChartLayout, type LineChartSize, toComponentSize, useLineChartLayout };
+//#endregion
+export { LINE_CHART_LAYOUT, type LineChartLayout, type LineChartSize, toComponentSize, useLineChartLayout };