@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/avatar.js

@@ -1,20 +1,50 @@
 "use client";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarImage,
-  AvatarStatus
-} from "./chunk-QKAQZ2GU.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Avatar,
-  AvatarStatus as AvatarBadge,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarImage,
-  AvatarStatus
-};
-//# sourceMappingURL=avatar.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/avatar.tsx
+function Avatar({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex shrink-0 rounded-full select-none bg-surface-brand", size === "sm" && "size-8", size === "md" && "size-10", size === "lg" && "size-14", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full", "bg-surface-brand-subtle text-fg-brand font-semibold", "group-data-[size=sm]/avatar:text-xs", "group-data-[size=md]/avatar:text-sm", "group-data-[size=lg]/avatar:text-base", className),
+		...props
+	});
+}
+function AvatarStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-status",
+		className: cn("absolute right-0 bottom-0 z-10 rounded-full bg-status-success ring-2 ring-canvas", "group-data-[size=sm]/avatar:size-2", "group-data-[size=md]/avatar:size-2.5", "group-data-[size=lg]/avatar:size-3.5", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-3", "*:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-canvas", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("relative flex shrink-0 items-center justify-center rounded-full", "bg-action-tertiary text-fg-secondary text-xs font-semibold", "ring-2 ring-canvas", "size-10", "group-has-data-[size=sm]/avatar-group:size-8", "group-has-data-[size=lg]/avatar-group:size-14", className),
+		...props
+	});
+}
+//#endregion
+export { Avatar, AvatarStatus as AvatarBadge, AvatarStatus, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/badge.d.ts

@@ -1,15 +1,13 @@
-import * as React from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { useRender } from '@base-ui/react/use-render';
-import { VariantProps } from 'class-variance-authority';
-
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "info" | "warning" | "accent" | "default" | "danger" | "secondary" | "destructive" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    shape?: "box" | "round" | null | undefined;
-    border?: boolean | null | undefined;
-    iconOnly?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Badge({ className, variant, size, shape, border, iconOnly, render, children, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-
-export { Badge, badgeVariants };
+  variant?: "accent" | "danger" | "default" | "destructive" | "info" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
+  shape?: "box" | "round" | null | undefined;
+  border?: boolean | null | undefined;
+  iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, size, shape, border, iconOnly, render, children, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -1,11 +1,71 @@
-import {
-  Badge,
-  badgeVariants
-} from "./chunk-XG47P6D4.js";
-import "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Badge,
-  badgeVariants
-};
-//# sourceMappingURL=badge.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/badge.tsx
+const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden border font-bold leading-none whitespace-nowrap transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:text-fg-danger [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-current", {
+	variants: {
+		variant: {
+			default: "border-line bg-surface-raised text-fg-secondary",
+			accent: "border-transparent bg-surface-accent text-fg-on-accent",
+			info: "border-status-info/40 bg-surface-info-subtle text-status-info",
+			success: "border-status-success/40 bg-surface-brand-subtle text-status-success",
+			warning: "border-status-warning/40 bg-surface-accent-subtle text-status-warning",
+			danger: "border-line-danger bg-surface-danger-subtle text-status-danger",
+			secondary: "border-status-info/40 bg-surface-info-subtle text-status-info",
+			destructive: "border-line-danger bg-surface-danger-subtle text-status-danger",
+			outline: "border-line bg-transparent text-fg-secondary"
+		},
+		size: {
+			sm: "min-h-7 min-w-7 gap-1 px-2.5 py-1 text-gdt-xs [&>svg]:size-3",
+			md: "min-h-9 min-w-9 gap-1.5 px-3 py-1.5 text-gdt-sm [&>svg]:size-3.5",
+			lg: "min-h-10.5 min-w-10.5 gap-2 px-4 py-2 text-gdt-md [&>svg]:size-4"
+		},
+		shape: {
+			round: "rounded-4xl",
+			box: "rounded-lg"
+		},
+		border: {
+			true: "",
+			false: "border-transparent"
+		},
+		iconOnly: {
+			true: "py-0 px-0",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		shape: "round",
+		border: true
+	}
+});
+function Badge({ className, variant = "default", size, shape = "round", border = true, iconOnly = false, render, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			className: cn(badgeVariants({
+				variant,
+				size: resolvedSize,
+				shape,
+				border,
+				iconOnly
+			}), className),
+			children
+		}, props),
+		render,
+		state: {
+			slot: "badge",
+			variant,
+			size: resolvedSize,
+			shape,
+			border,
+			iconOnly
+		}
+	});
+}
+//#endregion
+export { Badge, badgeVariants };

package/dist/bar-chart.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { BarChart as BarChart$1, CartesianGrid, Bar, XAxis, YAxis } from 'recharts';
-import { ChartConfig } from './chart.js';
-import { ComponentSize } from './size-context.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
+import * as React from "react";
+import { Bar, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis } from "recharts";
+//#region src/bar-chart.d.ts
 /**
  * Bar charts are composable wrappers over the recharts cartesian primitives.
  * recharts 3 registers graphical items through context when they render, so the
@@ -42,42 +40,42 @@ import 'class-variance-authority';
 declare const BAR_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
 type BarChartOrientation = "vertical" | "horizontal";
 type BarChartLayout = {
-    /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
-    height: number;
-    /** Outer margin - top leaves room for value labels above the tallest bar. */
-    margin: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    /** Cap on bar thickness so a few categories don't render slab-wide bars. */
-    maxBarSize: number;
-    /** Gap between categories (groups), as a percentage of the band. */
-    barCategoryGap: string;
-    /** Gap between bars within a group (grouped layout). */
-    barGap: number;
-    /** Corner radius for a bar. */
-    barRadius: number;
-    /** Axis tick label font size. */
-    tickFontSize: number;
-    /** Value label (on-bar number) font size. */
-    valueFontSize: number;
-    /** Reserved width for the value axis. */
-    yAxisWidth: number;
-    /** Space between an axis and its tick labels. */
-    tickMargin: number;
+  /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
+  height: number;
+  /** Outer margin - top leaves room for value labels above the tallest bar. */
+  margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  /** Cap on bar thickness so a few categories don't render slab-wide bars. */
+  maxBarSize: number;
+  /** Gap between categories (groups), as a percentage of the band. */
+  barCategoryGap: string;
+  /** Gap between bars within a group (grouped layout). */
+  barGap: number;
+  /** Corner radius for a bar. */
+  barRadius: number;
+  /** Axis tick label font size. */
+  tickFontSize: number;
+  /** Value label (on-bar number) font size. */
+  valueFontSize: number;
+  /** Reserved width for the value axis. */
+  yAxisWidth: number;
+  /** Space between an axis and its tick labels. */
+  tickMargin: number;
 };
 declare const BAR_CHART_LAYOUT: Record<ComponentSize, BarChartLayout>;
 type BarChartProps = Omit<React.ComponentProps<typeof BarChart$1>, "width" | "height"> & {
-    /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
-    config?: ChartConfig;
-    /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
-    size?: ComponentSize;
-    /** Applied to the responsive plot box, e.g. to override its height. */
-    className?: string;
-    /** Visual bar direction. `horizontal` maps to recharts `layout="vertical"`. */
-    orientation?: BarChartOrientation;
+  /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+  config?: ChartConfig;
+  /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+  size?: ComponentSize;
+  /** Applied to the responsive plot box, e.g. to override its height. */
+  className?: string;
+  /** Visual bar direction. `horizontal` maps to recharts `layout="vertical"`. */
+  orientation?: BarChartOrientation;
 };
 /**
  * Plot root - wraps the shared `ChartContainer` (tooltip/legend theming,
@@ -96,8 +94,8 @@ type BarChartGridProps = React.ComponentProps<typeof CartesianGrid>;
  */
 declare function BarChartGrid(props: BarChartGridProps): React.JSX.Element;
 type BarChartXAxisProps = React.ComponentProps<typeof XAxis> & {
-    /** Explicit axis scale; otherwise inherited from the chart's `size`. */
-    size?: ComponentSize;
+  /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
 };
 /**
  * Category/value axis - recharts `XAxis` with no axis/tick lines,
@@ -106,8 +104,8 @@ type BarChartXAxisProps = React.ComponentProps<typeof XAxis> & {
  */
 declare function BarChartXAxis({ size, tick, ...props }: BarChartXAxisProps): React.JSX.Element;
 type BarChartYAxisProps = React.ComponentProps<typeof YAxis> & {
-    /** Explicit axis scale; otherwise inherited from the chart's `size`. */
-    size?: ComponentSize;
+  /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
 };
 /**
  * Value/category axis - recharts `YAxis` with no axis/tick lines,
@@ -116,12 +114,12 @@ type BarChartYAxisProps = React.ComponentProps<typeof YAxis> & {
  */
 declare function BarChartYAxis({ size, tick, ...props }: BarChartYAxisProps): React.JSX.Element;
 type BarChartSeriesProps = React.ComponentProps<typeof Bar> & {
-    /** Series colour for the bar. Defaults to the first categorical chart token. */
-    color?: string;
-    /** Explicit mark scale; otherwise inherited from the chart's `size`. */
-    size?: ComponentSize;
-    /** Override visual direction for radius when the root orientation is absent. */
-    orientation?: BarChartOrientation;
+  /** Series colour for the bar. Defaults to the first categorical chart token. */
+  color?: string;
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
+  /** Override visual direction for radius when the root orientation is absent. */
+  orientation?: BarChartOrientation;
 };
 /**
  * One data series - recharts `Bar` with the giddaa mark spec: a theme-aware
@@ -140,21 +138,21 @@ declare function BarChartSeries({ color, size, orientation, ...props }: BarChart
  * explicit `orientation`.
  */
 type BarValueLabelProps = {
-    /** Bar visual direction - drives where the label is placed. */
-    orientation?: BarChartOrientation;
-    /** Override the on-bar font size (defaults to the size-scaled value). */
-    fontSize?: number;
-    /** Format the raw value before display, e.g. `(v) => String(v)`. */
-    formatter?: (value: React.ReactNode) => React.ReactNode;
-    /** Explicit label scale; otherwise inherited from the chart's `size`. */
-    size?: ComponentSize;
-    className?: string;
-    x?: string | number;
-    y?: string | number;
-    width?: string | number;
-    height?: string | number;
-    value?: React.ReactNode;
+  /** Bar visual direction - drives where the label is placed. */
+  orientation?: BarChartOrientation;
+  /** Override the on-bar font size (defaults to the size-scaled value). */
+  fontSize?: number;
+  /** Format the raw value before display, e.g. `(v) => String(v)`. */
+  formatter?: (value: React.ReactNode) => React.ReactNode;
+  /** Explicit label scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
+  className?: string;
+  x?: string | number;
+  y?: string | number;
+  width?: string | number;
+  height?: string | number;
+  value?: React.ReactNode;
 };
-declare function BarValueLabel({ orientation, fontSize, formatter, size, className, x, y, width, height, value, }: BarValueLabelProps): React.JSX.Element | null;
-
-export { BAR_CHART_LAYOUT, BAR_CHART_PALETTE, BarChart, BarChartGrid, type BarChartGridProps, type BarChartLayout, type BarChartOrientation, type BarChartProps, BarChartSeries, type BarChartSeriesProps, BarChartXAxis, type BarChartXAxisProps, BarChartYAxis, type BarChartYAxisProps, BarValueLabel, type BarValueLabelProps };
+declare function BarValueLabel({ orientation, fontSize, formatter, size, className, x, y, width, height, value }: BarValueLabelProps): React.JSX.Element | null;
+//#endregion
+export { BAR_CHART_LAYOUT, BAR_CHART_PALETTE, BarChart, BarChartGrid, type BarChartGridProps, type BarChartLayout, type BarChartOrientation, type BarChartProps, BarChartSeries, type BarChartSeriesProps, BarChartXAxis, type BarChartXAxisProps, BarChartYAxis, type BarChartYAxisProps, BarValueLabel, type BarValueLabelProps };