@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/size-context-D4mYvcg8.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/size-context.d.ts
+type ComponentSize = "sm" | "md" | "lg";
+declare function SizeProvider({ children, size }: {
+  children: ReactNode;
+  size?: ComponentSize | null;
+}): import("react").JSX.Element;
+declare function useComponentSize(size?: ComponentSize | null, fallback?: ComponentSize): ComponentSize;
+//#endregion
+export { SizeProvider as n, useComponentSize as r, ComponentSize as t };

package/dist/size-context.d.ts

@@ -1,11 +1,2 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-
-type ComponentSize = "sm" | "md" | "lg";
-declare function SizeProvider({ children, size, }: {
-    children: ReactNode;
-    size?: ComponentSize | null;
-}): React.JSX.Element;
-declare function useComponentSize(size?: ComponentSize | null, fallback?: ComponentSize): ComponentSize;
-
-export { type ComponentSize, SizeProvider, useComponentSize };
+import { n as SizeProvider, r as useComponentSize, t as ComponentSize } from "./size-context-D4mYvcg8.js";
+export { type ComponentSize, SizeProvider, useComponentSize };

package/dist/size-context.js

@@ -1,10 +1,18 @@
 "use client";
-import {
-  SizeProvider,
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-export {
-  SizeProvider,
-  useComponentSize
-};
-//# sourceMappingURL=size-context.js.map
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/size-context.tsx
+const SizeContext = createContext(void 0);
+function SizeProvider({ children, size }) {
+	if (!size) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(SizeContext.Provider, {
+		value: size,
+		children
+	});
+}
+function useComponentSize(size, fallback = "md") {
+	const inheritedSize = useContext(SizeContext);
+	return size ?? inheritedSize ?? fallback;
+}
+//#endregion
+export { SizeProvider, useComponentSize };

package/dist/skeleton.d.ts

@@ -1,5 +1,4 @@
-import * as React$1 from 'react';
-
-declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
-
-export { Skeleton };
+//#region src/skeleton.d.ts
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+export { Skeleton };

package/dist/skeleton.js

@@ -1,8 +1,12 @@
-import {
-  Skeleton
-} from "./chunk-XZZAHNVM.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Skeleton
-};
-//# sourceMappingURL=skeleton.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("animate-pulse rounded-md bg-line", className),
+		...props
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/slider.d.ts

@@ -1,11 +1,10 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { Slider as Slider$1 } from '@base-ui/react/slider';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+//#region src/slider.d.ts
 declare const sliderVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SliderRootValue = number | readonly number[];
 type SliderSize = NonNullable<VariantProps<typeof sliderVariants>["size"]>;
 type SliderProps<Value extends SliderRootValue = SliderRootValue> = Slider$1.Root.Props<Value> & VariantProps<typeof sliderVariants>;
@@ -24,5 +23,5 @@ declare function SliderThumb({ className, ...props }: SliderThumbProps): React.J
 declare function SliderLabel({ className, ...props }: SliderLabelProps): React.JSX.Element;
 declare function SliderValue({ className, ...props }: SliderValueProps): React.JSX.Element;
 declare function SliderCaption({ className, ...props }: SliderCaptionProps): React.JSX.Element;
-
-export { Slider, SliderCaption, SliderControl, SliderIndicator, SliderLabel, type SliderSize, SliderThumb, SliderTrack, SliderValue, sliderVariants };
+//#endregion
+export { Slider, SliderCaption, SliderControl, SliderIndicator, SliderLabel, type SliderSize, SliderThumb, SliderTrack, SliderValue, sliderVariants };

package/dist/slider.js

@@ -1,152 +1,81 @@
 "use client";
-import {
-  SizeProvider,
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/slider.tsx
-import { Slider as SliderPrimitive } from "@base-ui/react/slider";
-import { cva } from "class-variance-authority";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
-var sliderVariants = cva(
-  "group/slider grid w-full gap-2 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60",
-  {
-    variants: {
-      size: {
-        sm: "[--slider-thumb-size:1rem] [--slider-track-size:0.25rem]",
-        md: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.375rem]",
-        lg: "[--slider-thumb-size:1.5rem] [--slider-track-size:0.5rem]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function Slider({
-  className,
-  children,
-  size,
-  disabled = false,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(
-    SliderPrimitive.Root,
-    {
-      disabled,
-      "data-disabled": disabled,
-      "data-size": resolvedSize,
-      "data-slot": "slider",
-      className: cn(sliderVariants({ size: resolvedSize }), className),
-      ...props,
-      children
-    }
-  ) });
+import { cva } from "class-variance-authority";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+//#region src/slider.tsx
+const sliderVariants = cva("group/slider grid w-full gap-2 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60", {
+	variants: { size: {
+		sm: "[--slider-thumb-size:1rem] [--slider-track-size:0.25rem]",
+		md: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.375rem]",
+		lg: "[--slider-thumb-size:1.5rem] [--slider-track-size:0.5rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+function Slider({ className, children, size, disabled = false, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(Slider$1.Root, {
+			disabled,
+			"data-disabled": disabled,
+			"data-size": resolvedSize,
+			"data-slot": "slider",
+			className: cn(sliderVariants({ size: resolvedSize }), className),
+			...props,
+			children
+		})
+	});
 }
 function SliderControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SliderPrimitive.Control,
-    {
-      "data-slot": "slider-control",
-      className: cn(
-        "relative flex touch-none items-center select-none data-[orientation=horizontal]:h-(--slider-thumb-size) data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-56 data-[orientation=vertical]:w-(--slider-thumb-size) data-[orientation=vertical]:justify-center",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Slider$1.Control, {
+		"data-slot": "slider-control",
+		className: cn("relative flex touch-none items-center select-none data-[orientation=horizontal]:h-(--slider-thumb-size) data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-56 data-[orientation=vertical]:w-(--slider-thumb-size) data-[orientation=vertical]:justify-center", className),
+		...props
+	});
 }
 function SliderTrack({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SliderPrimitive.Track,
-    {
-      "data-slot": "slider-track",
-      className: cn(
-        "relative rounded-full bg-line select-none group-data-[disabled=true]/slider:bg-line-subtle data-[orientation=horizontal]:h-(--slider-track-size) data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-(--slider-track-size)",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Slider$1.Track, {
+		"data-slot": "slider-track",
+		className: cn("relative rounded-full bg-line select-none group-data-[disabled=true]/slider:bg-line-subtle data-[orientation=horizontal]:h-(--slider-track-size) data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-(--slider-track-size)", className),
+		...props
+	});
 }
 function SliderIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SliderPrimitive.Indicator,
-    {
-      "data-slot": "slider-indicator",
-      className: cn(
-        "rounded-full bg-surface-brand transition-[height,left,width,bottom,background-color] duration-200 ease-out select-none group-data-[disabled=true]/slider:bg-line-strong data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
+		"data-slot": "slider-indicator",
+		className: cn("rounded-full bg-surface-brand transition-[height,left,width,bottom,background-color] duration-200 ease-out select-none group-data-[disabled=true]/slider:bg-line-strong data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", className),
+		...props
+	});
 }
 function SliderThumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SliderPrimitive.Thumb,
-    {
-      "data-slot": "slider-thumb",
-      className: cn(
-        "relative box-border size-(--slider-thumb-size) rounded-full border-2 border-surface-brand bg-canvas shadow-[var(--shadow-1)] outline-none transition-[border-color,background-color,box-shadow,transform] duration-200 ease-out select-none after:absolute after:-inset-2 has-[:focus-visible]:shadow-[0_0_0_2px_var(--color-line-focus),var(--shadow-1)] data-[dragging]:scale-105 data-[disabled]:border-line-strong data-[disabled]:bg-surface data-[disabled]:shadow-none",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
+		"data-slot": "slider-thumb",
+		className: cn("relative box-border size-(--slider-thumb-size) rounded-full border-2 border-surface-brand bg-canvas shadow-[var(--shadow-1)] outline-none transition-[border-color,background-color,box-shadow,transform] duration-200 ease-out select-none after:absolute after:-inset-2 has-[:focus-visible]:shadow-[0_0_0_2px_var(--color-line-focus),var(--shadow-1)] data-[dragging]:scale-105 data-[disabled]:border-line-strong data-[disabled]:bg-surface data-[disabled]:shadow-none", className),
+		...props
+	});
 }
 function SliderLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SliderPrimitive.Label,
-    {
-      "data-slot": "slider-label",
-      className: cn(
-        "text-fg-primary font-semibold leading-snug group-data-[disabled=true]/slider:text-fg-caption-placeholder group-data-[size=sm]/slider:text-gdt-xs group-data-[size=md]/slider:text-gdt-sm group-data-[size=lg]/slider:text-gdt-md",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Slider$1.Label, {
+		"data-slot": "slider-label",
+		className: cn("text-fg-primary font-semibold leading-snug group-data-[disabled=true]/slider:text-fg-caption-placeholder group-data-[size=sm]/slider:text-gdt-xs group-data-[size=md]/slider:text-gdt-sm group-data-[size=lg]/slider:text-gdt-md", className),
+		...props
+	});
 }
 function SliderValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SliderPrimitive.Value,
-    {
-      "data-slot": "slider-value",
-      className: cn(
-        "text-fg-primary font-semibold tabular-nums leading-snug group-data-[disabled=true]/slider:text-fg-caption-placeholder group-data-[size=sm]/slider:text-gdt-subtext group-data-[size=md]/slider:text-gdt-xs group-data-[size=lg]/slider:text-gdt-sm",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Slider$1.Value, {
+		"data-slot": "slider-value",
+		className: cn("text-fg-primary font-semibold tabular-nums leading-snug group-data-[disabled=true]/slider:text-fg-caption-placeholder group-data-[size=sm]/slider:text-gdt-subtext group-data-[size=md]/slider:text-gdt-xs group-data-[size=lg]/slider:text-gdt-sm", className),
+		...props
+	});
 }
 function SliderCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "slider-caption",
-      className: cn(
-        "text-fg-secondary leading-snug group-data-[disabled=true]/slider:text-fg-caption-placeholder group-data-[size=sm]/slider:text-gdt-subtext group-data-[size=md]/slider:text-gdt-xs group-data-[size=lg]/slider:text-gdt-sm",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "slider-caption",
+		className: cn("text-fg-secondary leading-snug group-data-[disabled=true]/slider:text-fg-caption-placeholder group-data-[size=sm]/slider:text-gdt-subtext group-data-[size=md]/slider:text-gdt-xs group-data-[size=lg]/slider:text-gdt-sm", className),
+		...props
+	});
 }
-export {
-  Slider,
-  SliderCaption,
-  SliderControl,
-  SliderIndicator,
-  SliderLabel,
-  SliderThumb,
-  SliderTrack,
-  SliderValue,
-  sliderVariants
-};
-//# sourceMappingURL=slider.js.map
+//#endregion
+export { Slider, SliderCaption, SliderControl, SliderIndicator, SliderLabel, SliderThumb, SliderTrack, SliderValue, sliderVariants };

package/dist/sparkline.d.ts

@@ -1,15 +1,14 @@
-import * as React from 'react';
-import { ChartContainer, ChartValueType } from './chart.js';
-import { ComponentSize } from './size-context.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'recharts';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartContainer, ChartValueType } from "./chart.js";
+import * as React from "react";
+//#region src/sparkline.d.ts
 /**
- * Small inline trend lines for KPI cards and dense tables — no axes, no
- * gridlines. Composed from recharts plot primitives (`Line`/`Area`/`Bar`) so it
- * shares one charting engine with `line-chart`/`bar-chart` and gets hover
- * tooltips for free via the shared `ChartTooltip`/`ChartTooltipContent`.
+ * Small inline trend marks for KPI cards and dense tables — no axes, no
+ * gridlines. Three render styles ship as separate components sharing one engine:
+ * `SparklineLine`, `SparklineArea`, and `SparklineBar`. All are composed from
+ * recharts plot primitives so they share the charting engine with
+ * `line-chart`/`bar-chart` and get hover tooltips for free via the shared
+ * `ChartTooltip`/`ChartTooltipContent`.
  *
  * Sizing follows the same convention as the other charts: `size` sets the height
  * (plus stroke/dot scale) and the width is parent-driven — the component is
@@ -17,8 +16,8 @@ import 'recharts';
  * recommended container sizes) or let it fill a KPI card.
  *
  * Sentiment colour is driven by the data direction — `status-success` for an
- * upward series, `status-danger` for downward, `text-secondary` for flat — and
- * can be overridden with `trend`. The area fill reuses the line colour at 14 %.
+ * upward series, `status-danger` for downward, `fg-secondary` for flat — and can
+ * be overridden with `trend`. The area fill reuses the line colour at 14%.
  *
  * Tokens:
  * - Stroke / fill — up: `var(--color-status-success)`, down:
@@ -29,66 +28,77 @@ import 'recharts';
  *
  * @example
  * // KPI card trend — colour follows the metric's sentiment automatically
- * <Sparkline data={[40, 44, 42, 55, 58, 62, 70]} type="area" />
+ * <SparklineArea data={[40, 44, 42, 55, 58, 62, 70]} />
  *
  * @example
  * // Interactive — hover tooltip with currency formatting and month captions
- * <Sparkline data={values} tooltip label="Revenue" valueType="currency" labels={months} />
+ * <SparklineLine data={values} tooltip label="Revenue" valueType="currency" labels={months} />
  *
  * @example
  * // Dense table cell — fixed-width wrapper, bar render, no marker
  * <span className="inline-block w-[72px]">
- *   <Sparkline data={values} type="bar" size="sm" showMarker={false} />
+ *   <SparklineBar data={values} size="sm" showMarker={false} />
  * </span>
  */
 /** Sparkline sizes line up with the three shared `ComponentSize` values. */
 type SparklineSize = ComponentSize;
-/** Render style for the series. */
-type SparklineType = "line" | "bar" | "area";
 /** Sentiment of the series — drives the stroke/fill colour. */
 type SparklineTrend = "up" | "down" | "flat";
 type SparklineLayout = {
-    /** Recommended container width in px (width is parent-driven). */
-    width: number;
-    /** Plot height in px. */
-    height: number;
-    /** Line/area stroke width in px. */
-    strokeWidth: number;
-    /** Radius of the end-point dot. */
-    dotRadius: number;
-    /** Outer margin — keeps the stroke, peaks, and end dot from clipping. */
-    margin: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    /** Corner radius for bars. */
-    barRadius: number;
-    /** Cap on bar thickness so stretched sparklines keep thin bars. */
-    maxBarSize: number;
+  /** Recommended container width in px (width is parent-driven). */
+  width: number;
+  /** Plot height in px. */
+  height: number;
+  /** Line/area stroke width in px. */
+  strokeWidth: number;
+  /** Radius of the end-point dot. */
+  dotRadius: number;
+  /** Outer margin — keeps the stroke, peaks, and end dot from clipping. */
+  margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  /** Corner radius for bars. */
+  barRadius: number;
+  /** Cap on bar thickness so stretched sparklines keep thin bars. */
+  maxBarSize: number;
 };
 declare const SPARKLINE_LAYOUT: Record<SparklineSize, SparklineLayout>;
+/** Shared props for all three sparkline render styles. */
 type SparklineProps = Omit<React.ComponentProps<typeof ChartContainer>, "config" | "children"> & {
-    /** The series to plot. Needs at least two points to draw a trend. */
-    data: number[];
-    /** Render style. Defaults to `line`. */
-    type?: SparklineType;
-    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
-    size?: SparklineSize;
-    /** Override the auto-detected sentiment colour. */
-    trend?: SparklineTrend;
-    /** Show the filled marker on the latest value. Default true. */
-    showMarker?: boolean;
-    /** Enable the hover tooltip. Default false. */
-    tooltip?: boolean;
-    /** Series name shown in the tooltip, e.g. "Revenue". */
-    label?: string;
-    /** Per-point captions for the tooltip (e.g. months). Indexed by data point. */
-    labels?: string[];
-    /** Value formatting for the tooltip. Defaults to `number`. */
-    valueType?: ChartValueType;
+  /** The series to plot. Needs at least two points to draw a trend. */
+  data: number[];
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: SparklineSize;
+  /** Override the auto-detected sentiment colour. */
+  trend?: SparklineTrend;
+  /** Show the filled marker on the latest value. Default true. */
+  showMarker?: boolean;
+  /** Enable the hover tooltip. Default false. */
+  tooltip?: boolean;
+  /** Series name shown in the tooltip, e.g. "Revenue". */
+  label?: string;
+  /** Per-point captions for the tooltip (e.g. months). Indexed by data point. */
+  labels?: string[];
+  /** Value formatting for the tooltip. Defaults to `number`. */
+  valueType?: ChartValueType;
 };
-declare function Sparkline({ data, type, size, trend, showMarker, tooltip, label, labels, valueType, className, style, ...props }: SparklineProps): React.JSX.Element;
-
-export { SPARKLINE_LAYOUT, Sparkline, type SparklineProps, type SparklineSize, type SparklineTrend, type SparklineType };
+/**
+ * Inline line sparkline — a bare trend stroke with an optional end-point dot and
+ * hover tooltip. Sentiment colour is auto-detected from the series direction.
+ */
+declare function SparklineLine({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }: SparklineProps): React.JSX.Element;
+/**
+ * Inline area sparkline — the same trend stroke as `SparklineLine` with a 14%
+ * wash beneath it, for KPI cards where the filled shape reads at a glance.
+ */
+declare function SparklineArea({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }: SparklineProps): React.JSX.Element;
+/**
+ * Inline bar sparkline — one thin bar per point, for discrete series (counts,
+ * per-period totals). The end-point marker rides the latest bar.
+ */
+declare function SparklineBar({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }: SparklineProps): React.JSX.Element;
+//#endregion
+export { SPARKLINE_LAYOUT, SparklineArea, SparklineBar, SparklineLine, type SparklineProps, type SparklineSize, type SparklineTrend };