@giddaa-housing/ui 1.1.0 → 2.0.0

package/dist/switch.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.tsx
-const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
+const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
 	sm: "h-5 w-8 [--switch-spinner-size:0.625rem] [--switch-thumb-size:14px] [--switch-track-width:2rem]",
 	md: "h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem]",
 	lg: "h-7 w-12 [--switch-spinner-size:0.875rem] [--switch-thumb-size:22px] [--switch-track-width:3rem]"

package/dist/table.js

@@ -2,6 +2,10 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/table.tsx
+function getPinnedDividerClassName(pinnedSide) {
+	if (!pinnedSide) return;
+	return cn("after:pointer-events-none after:absolute after:inset-y-0 after:z-10 after:w-0.5 after:bg-line after:content-['']", pinnedSide === "left" && "after:right-0", pinnedSide === "right" && "after:left-0");
+}
 /**
 * Outer card wrapper.
 *
@@ -75,7 +79,7 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, pinnedSide, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "whitespace-nowrap has-[[role=checkbox]]:pr-0", pinnedSide === "left" && "border-r-2 border-line", pinnedSide === "right" && "border-l-2 border-line", className),
+		className: cn("relative h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "whitespace-nowrap has-[[role=checkbox]]:pr-0", getPinnedDividerClassName(pinnedSide), className),
 		...props
 	});
 }
@@ -91,7 +95,7 @@ function TableHead({ className, pinnedSide, ...props }) {
 function TableCell({ className, pinned = false, pinnedSide, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("h-14 px-6 py-4 align-middle text-gdt-sm text-fg-primary", "whitespace-nowrap", pinned && "bg-canvas transition-[background-color,filter] group-hover:bg-surface group-active:bg-surface-raised group-data-[state=selected]:bg-surface-brand-subtle group-data-[state=selected]:group-hover:bg-surface-brand-subtle group-data-[state=selected]:group-hover:brightness-95 group-data-[state=selected]:group-active:brightness-90", pinnedSide === "left" && "border-r-2 border-line", pinnedSide === "right" && "border-l-2 border-line", className),
+		className: cn("relative h-14 px-6 py-4 align-middle text-gdt-sm text-fg-primary", "whitespace-nowrap", pinned && "bg-canvas transition-[background-color,filter] group-hover:bg-surface group-active:bg-surface-raised group-data-[state=selected]:bg-surface-brand-subtle group-data-[state=selected]:group-hover:bg-surface-brand-subtle group-data-[state=selected]:group-hover:brightness-95 group-data-[state=selected]:group-active:brightness-90", getPinnedDividerClassName(pinnedSide), className),
 		...props
 	});
 }

package/dist/tabs.d.ts

@@ -4,23 +4,39 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.d.ts
 type TabsListVariant = "default" | "line" | "secondary" | "underline";
 declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Props & {
+  /**
+   * @deprecated Pass `size` to `TabsList` instead — the root is
+   * orchestration-only and doesn't render the triggers it used to size.
+   * Forwarded through context for now; removed in the next major.
+   */
   size?: ComponentSize;
 }): import("react").JSX.Element;
 declare const tabsListVariants: (props?: ({
   variant?: "secondary" | "underline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, children, ...props }: Tabs$1.List.Props & {
+declare function TabsList({ className, variant, size, children, ...props }: Tabs$1.List.Props & {
   variant?: TabsListVariant;
+  size?: ComponentSize;
 }): import("react").JSX.Element;
 /**
  * Trigger styling, exported so recipes (e.g. an overflow "More" button that
- * isn't a real tab) can render the same look. Reads `variant` off the parent
- * `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
- * sync wherever it lives inside a `Tabs` tree.
+ * isn't a real tab) can render the same look. Reads both `variant` and `size`
+ * off the parent `group/tabs-list`, so it stays in sync wherever it lives
+ * inside a `Tabs` tree.
  */
 declare const tabsTriggerClassName: string;
 declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): import("react").JSX.Element;
-declare function TabsCount({ className, ...props }: ComponentPropsWithoutRef<"span">): import("react").JSX.Element;
+type TabsCountProps = ComponentPropsWithoutRef<"span"> & {
+  /** Raw value to render. Takes precedence over `children` when provided. */
+  count?: number;
+  /** Shorten large values, e.g. `2200` → `2.2K`, `2_000_000` → `2M`. */
+  abbreviate?: boolean;
+  /** Cap the display, e.g. `max={99}` renders `100` as `99+`. */
+  max?: number;
+  /** Render a pulsing placeholder while the count is being fetched. */
+  loading?: boolean;
+};
+declare function TabsCount({ className, count, abbreviate, max, loading, children, ...props }: TabsCountProps): import("react").JSX.Element;
 declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): import("react").JSX.Element;
 //#endregion
 export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };

package/dist/tabs.js

@@ -1,6 +1,6 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
@@ -13,14 +13,16 @@ function resolveTabsListVariant(variant) {
 	return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
 }
 function Tabs({ className, orientation = "horizontal", size, ...props }) {
-	const resolvedSize = useComponentSize(size);
-	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+	const root = /* @__PURE__ */ jsx(Tabs$1.Root, {
 		"data-slot": "tabs",
 		"data-orientation": orientation,
-		"data-size": resolvedSize,
 		className: cn("group/tabs flex gap-3 data-[orientation=horizontal]:flex-col", className),
 		...props
 	});
+	return size ? /* @__PURE__ */ jsx(SizeProvider, {
+		size,
+		children: root
+	}) : root;
 }
 const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary", "group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle"), {
 	variants: { variant: {
@@ -29,11 +31,13 @@ const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shri
 	} },
 	defaultVariants: { variant: "underline" }
 });
-function TabsList({ className, variant = "underline", children, ...props }) {
+function TabsList({ className, variant = "underline", size, children, ...props }) {
 	const resolvedVariant = resolveTabsListVariant(variant);
+	const resolvedSize = useComponentSize(size);
 	return /* @__PURE__ */ jsxs(Tabs$1.List, {
 		"data-slot": "tabs-list",
 		"data-variant": resolvedVariant,
+		"data-size": resolvedSize,
 		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0") })]
@@ -41,11 +45,11 @@ function TabsList({ className, variant = "underline", children, ...props }) {
 }
 /**
 * Trigger styling, exported so recipes (e.g. an overflow "More" button that
-* isn't a real tab) can render the same look. Reads `variant` off the parent
-* `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
-* sync wherever it lives inside a `Tabs` tree.
+* isn't a real tab) can render the same look. Reads both `variant` and `size`
+* off the parent `group/tabs-list`, so it stays in sync wherever it lives
+* inside a `Tabs` tree.
 */
-const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs:px-3 group-data-[size=sm]/tabs:py-2 group-data-[size=sm]/tabs:text-gdt-xs group-data-[size=sm]/tabs:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs:px-4 group-data-[size=md]/tabs:py-2.5 group-data-[size=md]/tabs:text-gdt-sm group-data-[size=md]/tabs:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs:px-5 group-data-[size=lg]/tabs:py-3 group-data-[size=lg]/tabs:text-gdt-md group-data-[size=lg]/tabs:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
+const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs-list:text-gdt-xs group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs-list:text-gdt-sm group-data-[size=md]/tabs-list:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs-list:text-gdt-md group-data-[size=lg]/tabs-list:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:py-2", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
 function TabsTrigger({ className, nativeButton = true, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
 		"data-slot": "tabs-trigger",
@@ -54,11 +58,50 @@ function TabsTrigger({ className, nativeButton = true, ...props }) {
 		...props
 	});
 }
-function TabsCount({ className, ...props }) {
+/**
+* Compact a raw number into a short chip label — 2200 → "2.2K", 2_000_000 →
+* "2M". Keeps one decimal place and trims a trailing `.0`.
+*/
+function abbreviateCount(value) {
+	const abs = Math.abs(value);
+	if (abs < 1e3) return String(value);
+	const unit = [
+		{
+			value: 1e9,
+			suffix: "B"
+		},
+		{
+			value: 1e6,
+			suffix: "M"
+		},
+		{
+			value: 1e3,
+			suffix: "K"
+		}
+	].find((candidate) => abs >= candidate.value);
+	if (!unit) return String(value);
+	return `${Math.round(value / unit.value * 10) / 10}${unit.suffix}`;
+}
+function formatTabsCount(value, { abbreviate, max }) {
+	if (max !== void 0 && value > max) return `${abbreviate ? abbreviateCount(max) : max}+`;
+	return abbreviate ? abbreviateCount(value) : String(value);
+}
+function TabsCount({ className, count, abbreviate, max, loading, children, ...props }) {
+	const content = loading ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "invisible",
+		children: "00"
+	}) : count !== void 0 ? formatTabsCount(count, {
+		abbreviate,
+		max
+	}) : children;
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "tabs-count",
-		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs:h-4 group-data-[size=sm]/tabs:min-w-4 group-data-[size=sm]/tabs:px-1 group-data-[size=sm]/tabs:text-[10px]", "group-data-[size=md]/tabs:h-5 group-data-[size=md]/tabs:min-w-5 group-data-[size=md]/tabs:px-1 group-data-[size=md]/tabs:text-[11px]", "group-data-[size=lg]/tabs:h-5 group-data-[size=lg]/tabs:min-w-5 group-data-[size=lg]/tabs:px-1.5 group-data-[size=lg]/tabs:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", className),
-		...props
+		"data-loading": loading || void 0,
+		"aria-busy": loading || void 0,
+		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs-list:h-4 group-data-[size=sm]/tabs-list:min-w-4 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-[10px]", "group-data-[size=md]/tabs-list:h-5 group-data-[size=md]/tabs-list:min-w-5 group-data-[size=md]/tabs-list:px-1 group-data-[size=md]/tabs-list:text-[11px]", "group-data-[size=lg]/tabs-list:h-5 group-data-[size=lg]/tabs-list:min-w-5 group-data-[size=lg]/tabs-list:px-1.5 group-data-[size=lg]/tabs-list:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse", className),
+		...props,
+		children: content
 	});
 }
 function TabsContent({ className, ...props }) {

package/dist/textarea.js

@@ -3,7 +3,7 @@ import { useComponentSize } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/textarea.tsx
-const textareaVariants = cva("flex field-sizing-content w-full min-w-0 resize-y rounded-xl border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none", {
+const textareaVariants = cva("flex field-sizing-content w-full min-w-0 resize-y rounded-xl border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
 	variants: { size: {
 		sm: "min-h-22 px-3 py-2 text-gdt-xs",
 		md: "min-h-26 px-3.5 py-2.5 text-gdt-sm",

package/dist/tree-map.d.ts

@@ -63,26 +63,26 @@ type TreeMapDatum = {
   children?: TreeMapDatum[];
 };
 /**
- * Tile palette, ordered by share: forest → brass → moss → clay → stone. Each
- * entry pairs a tile `fill` with the `text` colour that reads on it (a tonal
- * tint of the same scale). Giddaa has no `chart-1`…`chart-N` tokens yet, so these
- * map to the brand scales; assign by order, or override per datum with `fill`.
+ * Tile palette, ordered by share. A tile's area already encodes magnitude and
+ * every tile is directly labelled, so the fill carries category *identity* — the
+ * three validated categorical `chart-1`…`chart-3` tokens, then a neutral "Other"
+ * bucket for the fourth+ category (the brand has three validated categorical
+ * slots; see `styles/giddaa.css`). Each entry pairs a `fill` with the `text`
+ * colour that reads on it in both themes. Assign by order, or override per datum
+ * with `fill`.
  */
 declare const TREE_MAP_PALETTE: readonly [{
-  readonly fill: "var(--color-forest-700)";
-  readonly text: "var(--color-forest-100)";
+  readonly fill: "var(--color-chart-1)";
+  readonly text: "var(--color-forest-50)";
 }, {
-  readonly fill: "var(--color-brass-500)";
+  readonly fill: "var(--color-chart-2)";
   readonly text: "var(--color-brass-900)";
 }, {
-  readonly fill: "var(--color-moss-600)";
-  readonly text: "var(--color-moss-100)";
+  readonly fill: "var(--color-chart-3)";
+  readonly text: "var(--color-clay-900)";
 }, {
-  readonly fill: "var(--color-clay-500)";
-  readonly text: "var(--color-clay-50)";
-}, {
-  readonly fill: "var(--color-stone-500)";
-  readonly text: "var(--color-stone-50)";
+  readonly fill: "var(--color-action-tertiary)";
+  readonly text: "var(--color-fg-primary)";
 }];
 type TreeMapLayout = {
   /** Plot box height in px. Width stays fluid via the ResponsiveContainer. */

package/dist/tree-map.js

@@ -7,31 +7,30 @@ import { cva } from "class-variance-authority";
 import { Treemap } from "recharts";
 //#region src/tree-map.tsx
 /**
-* Tile palette, ordered by share: forest → brass → moss → clay → stone. Each
-* entry pairs a tile `fill` with the `text` colour that reads on it (a tonal
-* tint of the same scale). Giddaa has no `chart-1`…`chart-N` tokens yet, so these
-* map to the brand scales; assign by order, or override per datum with `fill`.
+* Tile palette, ordered by share. A tile's area already encodes magnitude and
+* every tile is directly labelled, so the fill carries category *identity* — the
+* three validated categorical `chart-1`…`chart-3` tokens, then a neutral "Other"
+* bucket for the fourth+ category (the brand has three validated categorical
+* slots; see `styles/giddaa.css`). Each entry pairs a `fill` with the `text`
+* colour that reads on it in both themes. Assign by order, or override per datum
+* with `fill`.
 */
 const TREE_MAP_PALETTE = [
 	{
-		fill: "var(--color-forest-700)",
-		text: "var(--color-forest-100)"
+		fill: "var(--color-chart-1)",
+		text: "var(--color-forest-50)"
 	},
 	{
-		fill: "var(--color-brass-500)",
+		fill: "var(--color-chart-2)",
 		text: "var(--color-brass-900)"
 	},
 	{
-		fill: "var(--color-moss-600)",
-		text: "var(--color-moss-100)"
+		fill: "var(--color-chart-3)",
+		text: "var(--color-clay-900)"
 	},
 	{
-		fill: "var(--color-clay-500)",
-		text: "var(--color-clay-50)"
-	},
-	{
-		fill: "var(--color-stone-500)",
-		text: "var(--color-stone-50)"
+		fill: "var(--color-action-tertiary)",
+		text: "var(--color-fg-primary)"
 	}
 ];
 const TREE_MAP_LAYOUT = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -137,6 +137,10 @@
       "types": "./dist/filter.d.ts",
       "import": "./dist/filter.js"
     },
+    "./file-upload": {
+      "types": "./dist/file-upload.d.ts",
+      "import": "./dist/file-upload.js"
+    },
     "./footer": {
       "types": "./dist/footer.d.ts",
       "import": "./dist/footer.js"
@@ -165,6 +169,10 @@
       "types": "./dist/input-group.d.ts",
       "import": "./dist/input-group.js"
     },
+    "./input-otp": {
+      "types": "./dist/input-otp.d.ts",
+      "import": "./dist/input-otp.js"
+    },
     "./input-size-context": {
       "types": "./dist/input-size-context.d.ts",
       "import": "./dist/input-size-context.js"
@@ -185,6 +193,10 @@
       "types": "./dist/line-chart.d.ts",
       "import": "./dist/line-chart.js"
     },
+    "./list-item": {
+      "types": "./dist/list-item.d.ts",
+      "import": "./dist/list-item.js"
+    },
     "./match": {
       "types": "./dist/match.d.ts",
       "import": "./dist/match.js"
@@ -249,6 +261,10 @@
       "types": "./dist/property-listing-card.d.ts",
       "import": "./dist/property-listing-card.js"
     },
+    "./purchase-option-card": {
+      "types": "./dist/purchase-option-card.d.ts",
+      "import": "./dist/purchase-option-card.js"
+    },
     "./radar-chart": {
       "types": "./dist/radar-chart.d.ts",
       "import": "./dist/radar-chart.js"