@giddaa-housing/ui 3.0.1 → 3.1.0

package/css/giddaa.css

@@ -268,6 +268,168 @@
 		0 24px 64px rgb(from var(--color-stone-900) r g b / 0.16);
 }
 
+/*
+ * Light theme scope. `@theme` already sets these on the root, so this block
+ * exists to re-declare them on a wrapper — that is what lets a light subtree
+ * live inside `.dark`. It must stay a complete mirror of the `.dark` block
+ * below: any token `.dark` overrides and this block omits keeps its dark value
+ * when the two are nested.
+ */
+.light {
+	--color-canvas: var(--color-stone-0);
+	--color-surface: var(--color-stone-50);
+	--color-surface-raised: var(--color-stone-200);
+	--color-surface-overlay: var(--color-stone-0);
+	--color-surface-brand: var(--color-forest-500);
+	--color-surface-brand-subtle: var(--color-forest-50);
+	--color-surface-accent: var(--color-brass-400);
+	--color-surface-accent-subtle: var(--color-brass-50);
+	--color-surface-danger-subtle: var(--color-clay-50);
+	--color-surface-info-subtle: var(--color-moss-50);
+	--color-surface-glass-button: var(--color-stone-950);
+	--color-surface-glass-overlay-button: var(--color-button-glass-overlay);
+	--color-surface-glass-overlay-container-1: var(
+		--color-container-glass-overlay-1
+	);
+	--color-surface-glass-overlay-container-2: var(
+		--color-container-glass-overlay-2
+	);
+
+	--color-fg-primary: var(--color-stone-900);
+	--color-fg-secondary: var(--color-stone-600);
+	--color-fg-caption-placeholder: var(--color-stone-500);
+	--color-fg-brand: var(--color-forest-600);
+	--color-fg-danger: var(--color-clay-600);
+	--color-fg-info: var(--color-moss-600);
+	--color-fg-accent: var(--color-brass-600);
+	--color-fg-on-brand: var(--color-forest-50);
+	--color-fg-on-accent: var(--color-brass-900);
+
+	--color-line-subtle: var(--color-stone-200);
+	--color-line: var(--color-stone-300);
+	--color-line-strong: var(--color-stone-400);
+	--color-line-focus: var(--color-forest-500);
+	--color-line-danger: var(--color-clay-500);
+
+	--color-action-primary: var(--color-forest-500);
+	--color-action-primary-hover: var(--color-forest-600);
+	--color-action-primary-pressed: var(--color-forest-700);
+	--color-action-secondary: var(--color-forest-500);
+	--color-action-secondary-hover: var(--color-forest-600);
+	--color-action-secondary-pressed: var(--color-forest-700);
+	--color-action-tertiary: var(--color-stone-200);
+	--color-action-tertiary-hover: var(--color-stone-300);
+	--color-action-tertiary-pressed: var(--color-stone-400);
+	--color-action-accent: var(--color-brass-400);
+	--color-action-danger: var(--color-clay-500);
+	--color-action-danger-hover: var(--color-clay-600);
+	--color-action-danger-pressed: var(--color-clay-700);
+	--color-whatsapp-button: #00d158;
+
+	--color-status-success: var(--color-forest-500);
+	--color-status-warning: var(--color-brass-400);
+	--color-status-danger: var(--color-clay-500);
+	--color-status-info: var(--color-moss-500);
+
+	--color-chart-1: var(--color-forest-dark-600);
+	--color-chart-2: var(--color-brass-400);
+	--color-chart-3: var(--color-clay-400);
+
+	--gradient-hero-forest: linear-gradient(
+		45deg,
+		var(--color-forest-700) 50%,
+		var(--color-forest-500) 80%,
+		var(--color-forest-400) 100%
+	);
+	--gradient-hero-forest-moss: linear-gradient(
+		45deg,
+		var(--color-forest-600) 50%,
+		var(--color-moss-500) 100%
+	);
+	--gradient-surface-canvas-lift: linear-gradient(
+		180deg,
+		var(--color-stone-0) 0%,
+		var(--color-stone-50) 100%
+	);
+	--gradient-surface-card-lift: linear-gradient(
+		180deg,
+		var(--color-stone-0) 0%,
+		var(--color-stone-200) 100%
+	);
+	--gradient-surface-brand-tint: linear-gradient(
+		45deg,
+		var(--color-forest-50) 50%,
+		var(--color-stone-50) 100%
+	);
+	--gradient-accent-brass-rise: linear-gradient(
+		45deg,
+		var(--color-brass-400) 50%,
+		var(--color-brass-300) 80%,
+		var(--color-brass-200) 100%
+	);
+	--gradient-accent-forest-to-brass: linear-gradient(
+		45deg,
+		var(--color-forest-700) 50%,
+		var(--color-forest-500) 75%,
+		var(--color-brass-400) 100%
+	);
+	--gradient-accent-emerald-to-brass: var(--gradient-accent-forest-to-brass);
+	--gradient-overlay-photo-bottom: linear-gradient(
+		180deg,
+		rgb(from var(--color-forest-900) r g b / 0) 0%,
+		rgb(from var(--color-forest-900) r g b / 0) 40%,
+		rgb(from var(--color-forest-900) r g b / 0.88) 100%
+	);
+	--gradient-overlay-photo-dual: linear-gradient(
+		180deg,
+		rgb(from var(--color-forest-900) r g b / 0.6) 0%,
+		rgb(from var(--color-forest-900) r g b / 0) 40%,
+		rgb(from var(--color-forest-900) r g b / 0) 60%,
+		rgb(from var(--color-forest-900) r g b / 0.78) 100%
+	);
+
+	--shadow-1: 0 1px 2px rgb(from var(--color-forest-700) r g b / 0.06);
+	--shadow-2:
+		0 4px 8px rgb(from var(--color-forest-700) r g b / 0.1),
+		0 8px 16px rgb(from var(--color-forest-700) r g b / 0.06);
+	--shadow-3:
+		0 8px 16px rgb(from var(--color-forest-700) r g b / 0.14),
+		0 16px 32px rgb(from var(--color-forest-700) r g b / 0.1),
+		0 24px 48px rgb(from var(--color-forest-700) r g b / 0.06);
+	--shadow-4:
+		0 8px 16px rgb(from var(--color-forest-700) r g b / 0.14),
+		0 16px 32px rgb(from var(--color-forest-700) r g b / 0.1),
+		0 24px 48px rgb(from var(--color-forest-700) r g b / 0.06);
+
+	--elevation-e0-bg: var(--color-stone-50);
+	--elevation-e0-border: var(--color-line-subtle);
+	--elevation-e0-shadow: none;
+
+	--elevation-e1-bg: var(--color-stone-0);
+	--elevation-e1-border: var(--color-line-subtle);
+	--elevation-e1-shadow:
+		0 1px 2px rgb(from var(--color-stone-900) r g b / 0.06),
+		0 1px 1px rgb(from var(--color-stone-900) r g b / 0.04);
+
+	--elevation-e2-bg: var(--color-stone-0);
+	--elevation-e2-border: var(--color-line-subtle);
+	--elevation-e2-shadow:
+		0 2px 6px rgb(from var(--color-stone-900) r g b / 0.08),
+		0 8px 24px rgb(from var(--color-stone-900) r g b / 0.06);
+
+	--elevation-e3-bg: var(--color-stone-0);
+	--elevation-e3-border: var(--color-line);
+	--elevation-e3-shadow:
+		0 4px 12px rgb(from var(--color-stone-900) r g b / 0.1),
+		0 16px 40px rgb(from var(--color-stone-900) r g b / 0.1);
+
+	--elevation-e4-bg: var(--color-stone-0);
+	--elevation-e4-border: var(--color-line);
+	--elevation-e4-shadow:
+		0 8px 20px rgb(from var(--color-stone-900) r g b / 0.14),
+		0 24px 64px rgb(from var(--color-stone-900) r g b / 0.16);
+}
+
 .dark {
 	--color-canvas: var(--color-stone-dark-0);
 	--color-surface: var(--color-stone-dark-875);

package/css/preset.css

@@ -4,7 +4,14 @@
 @import "./generated/shared.css";
 @plugin "tailwindcss-animate";
 
-@custom-variant dark (&:where(.dark, .dark *));
+/*
+ * Theme scopes are class-based and symmetric: `.dark` opts a subtree into the
+ * dark tokens, `.light` opts one back into the light tokens (both re-declare
+ * every themed token, so either can nest inside the other). The `:not()` keeps
+ * `dark:` utilities from leaking into a `.light` island inside `.dark`.
+ * Alternating deeper than one level (.dark > .light > .dark) is not supported.
+ */
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
 
 @utility elevation-e0 {
 	border-style: solid;

package/dist/activity-timeline.js

@@ -37,7 +37,7 @@ function ActivityTimelineItem({ className, highlighted = false, highlightOnHover
 function ActivityTimelineRail({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "activity-timeline-rail",
-		className: cn("flex w-10 shrink-0 flex-col items-center gap-1.5", className),
+		className: cn("relative flex w-10 shrink-0 self-stretch flex-col items-center", className),
 		...props
 	});
 }
@@ -45,7 +45,7 @@ function ActivityTimelineAvatar({ className, src, alt = "", initials, children,
 	return /* @__PURE__ */ jsx(Avatar, {
 		"data-slot": "activity-timeline-avatar",
 		size: "md",
-		className: cn("bg-surface-brand", className),
+		className: cn("relative z-1 bg-surface-brand", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [src ? /* @__PURE__ */ jsx(AvatarImage, {
 			src,
@@ -60,7 +60,7 @@ function ActivityTimelineConnector({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		"data-slot": "activity-timeline-connector",
-		className: cn("h-6 w-0.5 shrink-0 rounded-full bg-line-subtle", className),
+		className: cn("absolute top-10 -bottom-6 z-0 w-0.5 rounded-full bg-line-subtle", className),
 		...props
 	});
 }

package/dist/auth-layout.js

@@ -5,14 +5,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function AuthLayout({ className, ...props }) {
 	return /* @__PURE__ */ jsx("main", {
 		"data-slot": "auth-layout",
-		className: cn("grid min-h-svh bg-surface p-gdt-lg text-fg-primary lg:grid-cols-[minmax(0,1fr)_minmax(30rem,1fr)] lg:bg-surface-brand lg:p-0", className),
+		className: cn("grid min-h-svh bg-canvas text-fg-primary lg:grid-cols-[minmax(0,1fr)_minmax(30rem,1fr)] lg:bg-[linear-gradient(180deg,var(--color-surface-brand)_0%,var(--color-moss-600)_100%)]", className),
 		...props
 	});
 }
 function AuthLayoutBrandPanel({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("section", {
 		"data-slot": "auth-layout-brand-panel",
-		className: cn("relative hidden min-h-svh overflow-hidden bg-surface-brand px-gdt-5xl py-gdt-5xl text-fg-on-brand lg:flex lg:flex-col", "before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_20%_20%,rgb(255_255_255_/_0.12),transparent_24rem),radial-gradient(circle_at_80%_70%,rgb(0_0_0_/_0.14),transparent_28rem)] before:content-['']", "after:absolute after:inset-0 after:opacity-18 after:[background-image:radial-gradient(currentColor_0.7px,transparent_0.7px)] after:[background-size:7px_7px] after:content-['']", className),
+		className: cn("relative hidden min-h-svh overflow-hidden bg-[linear-gradient(180deg,var(--color-surface-brand)_0%,var(--color-moss-600)_100%)] px-gdt-3xl py-gdt-5xl text-fg-on-brand lg:flex lg:flex-col", "after:absolute after:inset-0 after:opacity-18 after:[background-image:radial-gradient(currentColor_0.7px,transparent_0.7px)] after:[background-size:7px_7px] after:content-['']", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "relative z-10 flex min-h-0 flex-1 flex-col",
@@ -23,7 +23,7 @@ function AuthLayoutBrandPanel({ className, children, ...props }) {
 function AuthLayoutBrandLogo({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "auth-layout-brand-logo",
-		className: cn("mb-gdt-3xl flex items-center text-fg-on-brand", className),
+		className: cn("mb-[1.125rem] flex items-center text-fg-on-brand", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-35" })
 	});
@@ -38,49 +38,49 @@ function AuthLayoutBrandContent({ className, ...props }) {
 function AuthLayoutBrandTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h2", {
 		"data-slot": "auth-layout-brand-title",
-		className: cn("text-gdt-h1 text-balance", className),
+		className: cn("text-gdt-h1 text-balance xl:text-gdt-display", className),
 		...props
 	});
 }
 function AuthLayoutBrandDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "auth-layout-brand-description",
-		className: cn("mt-gdt-lg text-gdt-md text-pretty opacity-90", className),
+		className: cn("mt-[1.125rem] text-gdt-md text-pretty", className),
 		...props
 	});
 }
 function AuthLayoutMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "auth-layout-media",
-		className: cn("mt-auto grid h-58 grid-cols-3 items-end gap-gdt-lg pt-gdt-5xl", className),
+		className: cn("-mb-gdt-5xl mt-auto grid h-58 grid-cols-3 items-end gap-gdt-lg xl:-mb-[9rem] xl:h-[23.25rem]", className),
 		...props
 	});
 }
 function AuthLayoutMediaItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "auth-layout-media-item",
-		className: cn("min-h-32 overflow-hidden rounded-t-4xl bg-surface-glass-overlay-container-1 shadow-3 odd:h-36 even:h-52", className),
+		className: cn("min-h-32 overflow-hidden rounded-t-3xl bg-surface-glass-overlay-container-1 shadow-3 odd:h-36 even:h-52 xl:odd:h-[17rem] xl:even:h-[23.25rem]", className),
 		...props
 	});
 }
 function AuthLayoutMain({ className, ...props }) {
 	return /* @__PURE__ */ jsx("section", {
 		"data-slot": "auth-layout-main",
-		className: cn("flex min-h-[calc(100svh-2rem)] items-stretch justify-center bg-canvas lg:min-h-svh lg:rounded-l-[5rem]", className),
+		className: cn("flex min-h-svh items-stretch justify-center bg-canvas lg:rounded-l-[5rem]", className),
 		...props
 	});
 }
 function AuthLayoutCard({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "auth-layout-card",
-		className: cn("flex w-full max-w-[26.5rem] flex-col border border-line-subtle bg-canvas px-gdt-lg py-gdt-2xl sm:px-gdt-2xl lg:max-w-[32rem] lg:border-0 lg:px-0 lg:py-gdt-5xl", className),
+		className: cn("flex min-h-svh w-full max-w-none flex-col bg-canvas px-5 py-gdt-xl sm:max-w-[26.5rem] sm:px-gdt-2xl lg:max-w-[35rem] lg:px-gdt-2xl lg:pt-gdt-4xl lg:pb-gdt-3xl xl:px-0", className),
 		...props
 	});
 }
 function AuthLayoutTopAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "auth-layout-top-action",
-		className: cn("mb-gdt-4xl text-gdt-xs text-fg-secondary", className),
+		className: cn("mb-gdt-xl text-gdt-sm text-fg-secondary lg:mb-gdt-6xl", className),
 		...props
 	});
 }
@@ -89,34 +89,34 @@ function AuthLayoutMobileLogo({ children, className, ...props }) {
 		"data-slot": "auth-layout-mobile-logo",
 		className: cn("mb-gdt-xl flex items-center text-fg-brand lg:hidden", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-30" })
+		children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-[8.875rem]" })
 	});
 }
 function AuthLayoutHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("header", {
 		"data-slot": "auth-layout-header",
-		className: cn("mb-gdt-xl flex flex-col gap-gdt-sm", className),
+		className: cn("mb-gdt-xl flex flex-col gap-gdt-sm lg:mb-[1.125rem] lg:gap-[1.125rem]", className),
 		...props
 	});
 }
 function AuthLayoutTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h1", {
 		"data-slot": "auth-layout-title",
-		className: cn("text-gdt-h2 text-fg-primary", className),
+		className: cn("text-gdt-h1 text-fg-primary lg:text-[3rem] lg:leading-[4.25rem] lg:tracking-normal", className),
 		...props
 	});
 }
 function AuthLayoutDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "auth-layout-description",
-		className: cn("text-gdt-sm text-fg-secondary", className),
+		className: cn("text-gdt-md text-fg-secondary", className),
 		...props
 	});
 }
 function AuthLayoutForm({ className, ...props }) {
 	return /* @__PURE__ */ jsx("form", {
 		"data-slot": "auth-layout-form",
-		className: cn("flex flex-col gap-gdt-lg", className),
+		className: cn("flex flex-col gap-gdt-xl lg:gap-[1.125rem]", className),
 		...props
 	});
 }
@@ -130,12 +130,12 @@ function AuthLayoutActions({ className, ...props }) {
 function AuthLayoutDivider({ children = "Or continue with", className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "auth-layout-divider",
-		className: cn("relative flex items-center py-gdt-sm text-gdt-sm text-fg-secondary", className),
+		className: cn("relative flex items-center text-gdt-md font-semibold text-fg-secondary", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-line-subtle" }),
 			/* @__PURE__ */ jsx("span", {
-				className: "px-gdt-md",
+				className: "px-[0.875rem]",
 				children
 			}),
 			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-line-subtle" })
@@ -145,7 +145,7 @@ function AuthLayoutDivider({ children = "Or continue with", className, ...props
 function AuthLayoutFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("footer", {
 		"data-slot": "auth-layout-footer",
-		className: cn("mt-auto flex items-center justify-between gap-gdt-lg pt-gdt-5xl text-gdt-subtext text-fg-secondary", className),
+		className: cn("mt-auto flex items-center justify-between gap-gdt-lg pt-gdt-5xl text-gdt-xs text-fg-secondary", className),
 		...props
 	});
 }

package/dist/bar-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { Bar, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis } from "recharts";

package/dist/bullet-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import * as React from "react";
 //#region src/bullet-chart.d.ts
 /**

package/dist/button-group.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import { Separator } from "./separator.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";

package/dist/carousel.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";

package/dist/chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";

package/dist/combobox.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Virtualizer } from "@tanstack/react-virtual";

package/dist/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import * as React from "react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/dropdown-menu.d.ts

package/dist/footer.d.ts

@@ -1,4 +1,4 @@
-import { InputGroup } from "./input-group.js";
+import { n as InputSize } from "./input-CfoEJ8A6.js";
 import { useRender } from "@base-ui/react/use-render";
 import * as React from "react";
 //#region src/footer.d.ts
@@ -33,7 +33,9 @@ declare function FooterSocialLink({ className, ...props }: React.ComponentProps<
 declare function FooterNewsletter({ className, ...props }: React.ComponentProps<"form">): React.JSX.Element;
 declare function FooterNewsletterTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
 declare function FooterNewsletterDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-declare function FooterNewsletterControl({ className, children, ...props }: React.ComponentProps<typeof InputGroup>): React.JSX.Element;
+declare function FooterNewsletterControl({ className, children, size, ...props }: React.ComponentProps<"div"> & {
+  size?: InputSize;
+}): React.JSX.Element;
 declare function FooterBottom({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterLegalLinks({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 //#endregion