@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/carousel.js

@@ -1,22 +1,337 @@
 "use client";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselIndicator,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  useCarousel
-} from "./chunk-FZDSVMKY.js";
-import "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Carousel,
-  CarouselContent,
-  CarouselIndicator,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  useCarousel
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/carousel.tsx
+/**
+* Shared glassmorphic treatment for every overlay surface in the carousel
+* (navigation arrows + indicator). Dark glass at 35% over a 16px backdrop
+* blur with a near-invisible 18% light border that lifts the chrome off the
+* imagery. Always dark, in both themes — see `--color-surface-glass-overlay-button`.
+*/
+const glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
+const carouselVariants = cva("relative overflow-hidden rounded-2xl bg-surface-brand-subtle", {
+	variants: { imageSize: {
+		sm: "w-[320px] max-w-full aspect-[320/220]",
+		md: "w-[520px] max-w-full aspect-[520/340]",
+		lg: "w-[800px] max-w-full aspect-[800/500]",
+		full: "w-full"
+	} },
+	defaultVariants: { imageSize: "md" }
+});
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, size, imageSize, className, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const [scrollSnaps, setScrollSnaps] = React.useState([]);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+		setSelectedIndex(api.selectedScrollSnap());
+	}, []);
+	const onReInit = React.useCallback((api) => {
+		if (!api) return;
+		setScrollSnaps(api.scrollSnapList());
+		onSelect(api);
+	}, [onSelect]);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const scrollTo = React.useCallback((index) => {
+		api?.scrollTo(index);
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (event.key === prevKey) {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === nextKey) {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [
+		orientation,
+		scrollPrev,
+		scrollNext
+	]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onReInit(api);
+		api.on("reInit", onReInit);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("reInit", onReInit);
+			api?.off("select", onSelect);
+		};
+	}, [
+		api,
+		onReInit,
+		onSelect
+	]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			orientation,
+			size: resolvedSize,
+			scrollPrev,
+			scrollNext,
+			scrollTo,
+			canScrollPrev,
+			canScrollNext,
+			selectedIndex,
+			scrollSnaps
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: cn(carouselVariants({ imageSize }), className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+}
+function CarouselContent({ className, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "h-full overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex h-full", orientation === "horizontal" ? "" : "flex-col", className),
+			...props
+		})
+	});
+}
+function CarouselItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+		...props
+	});
+}
+const arrowVariants = cva(cn("absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none", glassChrome, "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"), {
+	variants: {
+		size: {
+			sm: "size-8 [&_svg]:size-4",
+			md: "size-10 [&_svg]:size-[18px]",
+			lg: "size-12 [&_svg]:size-5"
+		},
+		side: {
+			prev: "",
+			next: ""
+		}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			side: "prev",
+			className: "left-3"
+		},
+		{
+			size: "sm",
+			side: "next",
+			className: "right-3"
+		},
+		{
+			size: "md",
+			side: "prev",
+			className: "left-4"
+		},
+		{
+			size: "md",
+			side: "next",
+			className: "right-4"
+		},
+		{
+			size: "lg",
+			side: "prev",
+			className: "left-5"
+		},
+		{
+			size: "lg",
+			side: "next",
+			className: "right-5"
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		side: "prev"
+	}
+});
+function CarouselPrevious({ className, ...props }) {
+	const { size, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "carousel-previous",
+		className: cn(arrowVariants({
+			size,
+			side: "prev"
+		}), className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+function CarouselNext({ className, ...props }) {
+	const { size, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "carousel-next",
+		className: cn(arrowVariants({
+			size,
+			side: "next"
+		}), className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+/**
+* Past this many items the indicator switches from "show every dot" to the
+* Airbnb-style windowed mode: at most `MANY_WINDOW` dots, the active one kept
+* near the centre, and dots at a clipped edge faded down to imply more beyond.
+*/
+const MANY_THRESHOLD = 5;
+const MANY_WINDOW = 5;
+/**
+* Returns the dots to render plus the window start, so the determinate and
+* windowed ("many") cases share one render path. The dot strip is always the
+* full list; `start` drives the translate that slides it under the viewport.
+*/
+function getIndicatorWindow(count, selected) {
+	if (count < MANY_THRESHOLD) return {
+		dots: Array.from({ length: count }, (_, index) => ({
+			index,
+			faded: false
+		})),
+		start: 0,
+		visible: count
+	};
+	const start = Math.max(0, Math.min(selected - Math.floor(MANY_WINDOW / 2), count - MANY_WINDOW));
+	const end = start + MANY_WINDOW - 1;
+	const overflowLeft = start > 0;
+	const overflowRight = end < count - 1;
+	return {
+		dots: Array.from({ length: count }, (_, index) => ({
+			index,
+			faded: overflowLeft && index === start || overflowRight && index === end
+		})),
+		start,
+		visible: MANY_WINDOW
+	};
+}
+/** Dot diameter, gap, and pill padding per size — in px to keep them crisp. */
+const INDICATOR_SIZES = {
+	sm: {
+		dot: 5,
+		gap: 4,
+		padX: 8,
+		padY: 4
+	},
+	md: {
+		dot: 7,
+		gap: 5,
+		padX: 10,
+		padY: 5
+	},
+	lg: {
+		dot: 9,
+		gap: 6,
+		padX: 12,
+		padY: 6
+	}
 };
-//# sourceMappingURL=carousel.js.map
+/** Distance of the indicator from the bottom edge, per size (12/18/24px). */
+const INDICATOR_OFFSET = {
+	sm: "bottom-3",
+	md: "bottom-[18px]",
+	lg: "bottom-6"
+};
+function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, onSelect, ...props }) {
+	const ctx = React.useContext(CarouselContext);
+	const inheritedSize = useComponentSize(sizeProp);
+	const size = sizeProp ?? ctx?.size ?? inheritedSize;
+	const count = countProp ?? ctx?.scrollSnaps.length ?? 0;
+	const selected = selectedProp ?? ctx?.selectedIndex ?? 0;
+	const handleSelect = onSelect ?? ctx?.scrollTo;
+	if (count <= 1) return null;
+	const { dot, gap, padX, padY } = INDICATOR_SIZES[size];
+	const { dots, start, visible } = getIndicatorWindow(count, selected);
+	const step = dot + gap;
+	const viewportWidth = visible * step - gap;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "carousel-indicator",
+		className: cn("absolute left-1/2 z-10 flex -translate-x-1/2 items-center justify-center rounded-full", INDICATOR_OFFSET[size], glassChrome, className),
+		style: { padding: `${padY}px ${padX}px` },
+		role: "tablist",
+		"aria-label": "Slide indicators",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden",
+			style: { width: viewportWidth },
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex items-center transition-transform duration-300 ease-out",
+				style: {
+					gap,
+					transform: `translateX(${-start * step}px)`
+				},
+				children: dots.map(({ index, faded }) => {
+					const isActive = index === selected;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": isActive,
+						"aria-label": `Go to slide ${index + 1}`,
+						onClick: () => handleSelect?.(index),
+						className: cn("shrink-0 rounded-full bg-fg-on-brand transition-[transform,opacity] duration-300 ease-out", handleSelect ? "cursor-pointer" : "cursor-default"),
+						style: {
+							width: dot,
+							height: dot,
+							opacity: faded ? .3 : isActive ? 1 : .55,
+							transform: faded ? "scale(0.6)" : "scale(1)"
+						}
+					}, index);
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/chart.d.ts

@@ -1,48 +1,74 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import * as RechartsPrimitive from 'recharts';
-import { TooltipValueType } from 'recharts';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { TooltipValueType } from "recharts";
+//#region src/chart.d.ts
 /** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */
 type ChartValueType = "number" | "percentage" | "currency";
 declare const THEMES: {
-    readonly light: "";
-    readonly dark: ".dark";
+  readonly light: "";
+  readonly dark: ".dark";
 };
 type TooltipNameType = number | string;
 type ChartConfig = Record<string, {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
+  label?: React.ReactNode;
+  icon?: React.ComponentType;
 } & ({
-    color?: string;
-    theme?: never;
+  color?: string;
+  theme?: never;
 } | {
-    color?: never;
-    theme: Record<keyof typeof THEMES, string>;
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
 })>;
 declare function ChartCard({ className, size, children, ...props }: React.ComponentProps<"section"> & {
-    size?: ComponentSize;
+  size?: ComponentSize;
 }): React.JSX.Element;
 declare function ChartHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ChartTitle({ className, size, ...props }: React.ComponentProps<"h3"> & {
-    size?: ComponentSize;
+  size?: ComponentSize;
 }): React.JSX.Element;
 declare function ChartDescription({ className, size, ...props }: React.ComponentProps<"p"> & {
-    size?: ComponentSize;
+  size?: ComponentSize;
 }): React.JSX.Element;
+type ChartMetricLayout = "stacked" | "inline";
+declare function ChartMetric({ className, layout, size, ...props }: React.ComponentProps<"div"> & {
+  layout?: ChartMetricLayout;
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartValue({ className, size, ...props }: React.ComponentProps<"p"> & {
+  size?: ComponentSize;
+}): React.JSX.Element;
+type ChartTrendDirection = "up" | "down";
+type ChartTrendOrientation = "horizontal" | "vertical";
+declare function ChartTrend({ className, direction, orientation, size, ...props }: React.ComponentProps<"p"> & {
+  direction?: ChartTrendDirection;
+  orientation?: ChartTrendOrientation;
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartTrendChip({ children, className, direction: directionProp, showIcon, size: sizeProp, ...props }: React.ComponentProps<"span"> & {
+  direction?: ChartTrendDirection;
+  showIcon?: boolean;
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartTrendValue({ className, size: sizeProp, ...props }: React.ComponentProps<"span"> & {
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartTrendCaption({ className, size: sizeProp, ...props }: React.ComponentProps<"span"> & {
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-    initialDimension?: {
-        width: number;
-        height: number;
-    };
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
 }): React.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
-    id: string;
-    config: ChartConfig;
+  id: string;
+  config: ChartConfig;
 }) => React.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 /**
@@ -54,12 +80,12 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
  * Anatomy: series dot · metric label · hero value · period caption.
  */
 declare const chartTooltipVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
-    hideIndicator?: boolean;
-    nameKey?: string;
-    valueType?: ChartValueType;
+  size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ChartTooltipContent({ active, payload, className, hideIndicator, label, labelFormatter, formatter, color, nameKey, valueType, size }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+  hideIndicator?: boolean;
+  nameKey?: string;
+  valueType?: ChartValueType;
 } & VariantProps<typeof chartTooltipVariants> & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 /** Marker shape that ties a legend item to its series. */
@@ -74,49 +100,50 @@ type ChartLegendMarker = "dot" | "square" | "line";
  * from each payload entry's `inactive` flag (recharts sets this when wired) or
  * the controlled `inactiveKeys` set.
  */
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle, }: React.ComponentProps<"div"> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-    marker?: ChartLegendMarker;
-    size?: "sm" | "md";
-    orientation?: "horizontal" | "vertical";
-    inactiveKeys?: Iterable<string>;
-    onToggle?: (key: string) => void;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, marker, size, orientation, inactiveKeys, onToggle }: React.ComponentProps<"div"> & {
+  hideIcon?: boolean;
+  nameKey?: string;
+  marker?: ChartLegendMarker;
+  size?: "sm" | "md";
+  orientation?: "horizontal" | "vertical";
+  inactiveKeys?: Iterable<string>;
+  onToggle?: (key: string) => void;
 } & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
 /** The size-scaled layout numbers a cartesian chart needs to build axis props. */
 type CartesianAxisLayout = {
-    tickMargin: number;
-    tickFontSize: number;
-    yAxisWidth: number;
+  tickMargin: number;
+  tickFontSize: number;
+  yAxisWidth: number;
 };
 /**
  * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick
  * or axis lines, a size-scaled tick font, and a reserved value-axis width) that
  * every bar and line chart would otherwise repeat per axis. Spread the result
  * onto the recharts axis, then add the chart-specific props (`dataKey`,
- * `domain`, `ticks`, a `width`/`type` override, …):
+ * `domain`, `ticks`, a `width`/`type` override, …). Chart modules build their
+ * per-size axis wrappers (`BarChartXAxis`, `LineChartXAxis`, …) on top of this:
  *
- *   const chart = useBarChartLayout();
- *   <XAxis dataKey="month" {...chart.xAxis} />
- *   <YAxis domain={[0, 120]} {...chart.yAxis} />
+ *   const axes = cartesianAxisProps({ tickMargin: 8, tickFontSize: 11, yAxisWidth: 32 });
+ *   <XAxis dataKey="month" {...axes.xAxis} />
+ *   <YAxis domain={[0, 120]} {...axes.yAxis} />
  */
 declare function cartesianAxisProps(layout: CartesianAxisLayout): {
-    readonly xAxis: {
-        readonly tickLine: false;
-        readonly axisLine: false;
-        readonly tickMargin: number;
-        readonly tick: {
-            fontSize: number;
-        };
+  readonly xAxis: {
+    readonly tickLine: false;
+    readonly axisLine: false;
+    readonly tickMargin: number;
+    readonly tick: {
+      fontSize: number;
     };
-    readonly yAxis: {
-        readonly tickLine: false;
-        readonly axisLine: false;
-        readonly width: number;
-        readonly tick: {
-            fontSize: number;
-        };
+  };
+  readonly yAxis: {
+    readonly tickLine: false;
+    readonly axisLine: false;
+    readonly width: number;
+    readonly tick: {
+      fontSize: number;
     };
+  };
 };
-
-export { type CartesianAxisLayout, ChartCard, type ChartConfig, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, type ChartValueType, cartesianAxisProps };
+//#endregion
+export { type CartesianAxisLayout, ChartCard, ChartConfig, ChartContainer, ChartDescription, ChartFooter, ChartHeader, ChartLegend, ChartLegendContent, ChartMetric, type ChartMetricLayout, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, ChartTrend, ChartTrendCaption, ChartTrendChip, type ChartTrendDirection, type ChartTrendOrientation, ChartTrendValue, ChartValue, ChartValueType, cartesianAxisProps };