@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/cta.js

@@ -1,358 +1,192 @@
-import {
-  Button,
-  ButtonLink
-} from "./chunk-B4H6RNDH.js";
-import "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/cta.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button, ButtonLink } from "./button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ctaVariants = cva(
-  "group/cta relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl text-fg-primary transition-[background-color,border-color,box-shadow] py-10 px-5 md:px-10 xl:py-16 xl:px-16 md:gap-10 gap-6",
-  {
-    variants: {
-      variant: { default: "bg-surface", subtle: "bg-surface-brand-subtle" }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
+//#region src/cta.tsx
+/**
+* CTA is a composable marketing panel: a text column (title, description,
+* checklist) paired with an optional grid of feature cards and an action
+* row. Compose only the pieces you need — every part is a standalone
+* primitive, not a fixed layout.
+*
+* @example
+* <CTA variant="subtle">
+*   <CTAContent>
+*     <CTATag>Your Next Step</CTATag>
+*     <CTATitle>Own your first home sooner</CTATitle>
+*     <CTADescription>
+*       Shari'ah-compliant financing built around how you actually get paid.
+*     </CTADescription>
+*     <CTAList>
+*       <CTAListItem>No interest, ever</CTAListItem>
+*       <CTAListItem>Approval in 48 hours</CTAListItem>
+*     </CTAList>
+*   </CTAContent>
+*   <CTACard variant="brand">
+*     <CTACardIcon variant="surface"><ShieldCheck /></CTACardIcon>
+*     <CTACardTitle>Backed by NAICOM</CTACardTitle>
+*     <CTACardDescription>Every plan is insured end to end.</CTACardDescription>
+*     <CTAButton>Get started</CTAButton>
+*   </CTACard>
+* </CTA>
+*/
+const ctaVariants = cva("group/cta relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl text-fg-primary transition-[background-color,border-color,box-shadow] py-10 px-5 md:px-10 xl:py-16 xl:px-16 md:gap-10 gap-6", {
+	variants: { variant: {
+		default: "bg-surface",
+		subtle: "bg-surface-brand-subtle"
+	} },
+	defaultVariants: { variant: "default" }
+});
 function CTA({ className, render, variant = "default", ...props }) {
-  return useRender({
-    defaultTagName: "section",
-    props: mergeProps(
-      {
-        className: cn(ctaVariants({ variant }), className)
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta"
-    }
-  });
+	return useRender({
+		defaultTagName: "section",
+		props: mergeProps({ className: cn(ctaVariants({ variant }), className) }, props),
+		render,
+		state: { slot: "cta" }
+	});
 }
-function CTAContent({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps(
-      {
-        className: cn("flex min-w-0 flex-1 flex-col gap-2.5", className)
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-content"
-    }
-  });
+function CTAContent({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 flex-1 flex-col gap-2.5", className) }, props),
+		render,
+		state: { slot: "cta-content" }
+	});
 }
-function CTATag({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps(
-      {
-        className: cn(
-          "text-fg-brand text-gdt-capitalized uppercase font-semibold",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-title"
-    }
-  });
+function CTATag({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn("text-fg-brand text-gdt-capitalized uppercase font-semibold", className) }, props),
+		render,
+		state: { slot: "cta-title" }
+	});
 }
-function CTATitle({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "h2",
-    props: mergeProps(
-      {
-        className: cn(
-          "text-fg-primary text-gdt-h3 lg:text-gdt-h2 font-extrabold",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-title"
-    }
-  });
+function CTATitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h2",
+		props: mergeProps({ className: cn("text-fg-primary text-gdt-h3 lg:text-gdt-h2 font-extrabold", className) }, props),
+		render,
+		state: { slot: "cta-title" }
+	});
 }
-function CTADescription({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "p",
-    props: mergeProps(
-      {
-        className: cn(
-          "text-fg-secondary text-gdt-sm md:text-gdt-md",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-description"
-    }
-  });
+function CTADescription({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-fg-secondary text-gdt-sm md:text-gdt-md", className) }, props),
+		render,
+		state: { slot: "cta-description" }
+	});
 }
-function CTAList({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "ul",
-    props: mergeProps(
-      {
-        className: cn("flex min-w-0 pt-8 flex-col gap-2.5", className)
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-list"
-    }
-  });
+function CTAList({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "ul",
+		props: mergeProps({ className: cn("flex min-w-0 pt-8 flex-col gap-2.5", className) }, props),
+		render,
+		state: { slot: "cta-list" }
+	});
 }
-var CircleCheck = (props) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 22,
-    height: 22,
-    fill: "none",
-    viewBox: "0 0 22 22",
-    "aria-hidden": "true",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("rect", { width: 22, height: 22, fill: "var(--color-surface-brand)", rx: 11 }),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          stroke: "var(--color-fg-on-brand)",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "m7.36 11.26 2.6 2.6 4.68-5.72"
-        }
-      )
-    ]
-  }
-);
-function CTAListItem({
-  children,
-  className,
-  icon,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "li",
-    props: mergeProps(
-      {
-        className: cn(
-          "flex min-w-0 items-start gap-2 text-gdt-sm text-fg-primary",
-          "group-data-[tone=brand]/cta:text-fg-on-brand",
-          className
-        ),
-        children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "inline-flex shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0"
-              ),
-              children: /* @__PURE__ */ jsx(CircleCheck, {})
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
-        ] })
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-list-item"
-    }
-  });
+const CircleCheck = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 22,
+	height: 22,
+	fill: "none",
+	viewBox: "0 0 22 22",
+	"aria-hidden": "true",
+	...props,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: 22,
+		height: 22,
+		fill: "var(--color-surface-brand)",
+		rx: 11
+	}), /* @__PURE__ */ jsx("path", {
+		stroke: "var(--color-fg-on-brand)",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "m7.36 11.26 2.6 2.6 4.68-5.72"
+	})]
+});
+function CTAListItem({ children, className, icon, render, ...props }) {
+	return useRender({
+		defaultTagName: "li",
+		props: mergeProps({
+			className: cn("flex min-w-0 items-start gap-2 text-gdt-sm text-fg-primary", "group-data-[tone=brand]/cta:text-fg-on-brand", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("inline-flex shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0"),
+				children: /* @__PURE__ */ jsx(CircleCheck, {})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children
+			})] })
+		}, props),
+		render,
+		state: { slot: "cta-list-item" }
+	});
 }
-function CTACard({
-  className,
-  render,
-  variant = "default",
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps(
-      {
-        className: cn(
-          "group/cta-card min-w-0 flex flex-col gap-3.5  py-6.5 px-6 rounded-2xl text",
-          { "bg-canvas border shadow-1": variant === "default" },
-          { "bg-surface-brand shadow-2": variant === "brand" }
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-card",
-      variant
-    }
-  });
+function CTACard({ className, render, variant = "default", ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("group/cta-card min-w-0 flex flex-col gap-3.5  py-6.5 px-6 rounded-2xl text", { "bg-canvas border shadow-1": variant === "default" }, { "bg-surface-brand shadow-2": variant === "brand" }) }, props),
+		render,
+		state: {
+			slot: "cta-card",
+			variant
+		}
+	});
 }
-function CTACardIcon({
-  className,
-  render,
-  variant = "subtle-brand",
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps(
-      {
-        "aria-hidden": true,
-        className: cn(
-          "flex size-13.5 shrink-0 items-center justify-center rounded-full [&_svg:not([class*='size-'])]:size-6",
-          {
-            "bg-surface-brand-subtle text-action-primary": variant === "subtle-brand",
-            "bg-surface-accent-subtle text-fg-info": variant === "subtle-accent",
-            "bg-surface-overlay text-fg-brand": variant === "surface"
-          },
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-card-icon"
-    }
-  });
+function CTACardIcon({ className, render, variant = "subtle-brand", ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			"aria-hidden": true,
+			className: cn("flex size-13.5 shrink-0 items-center justify-center rounded-full [&_svg:not([class*='size-'])]:size-6", {
+				"bg-surface-brand-subtle text-action-primary": variant === "subtle-brand",
+				"bg-surface-accent-subtle text-fg-info": variant === "subtle-accent",
+				"bg-surface-overlay text-fg-brand": variant === "surface"
+			}, className)
+		}, props),
+		render,
+		state: { slot: "cta-card-icon" }
+	});
 }
-function CTACardTitle({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "h3",
-    props: mergeProps(
-      {
-        className: cn(
-          "text-gdt-md font-bold text-fg-primary group-data-[variant=brand]/cta-card:text-fg-on-brand",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-card-title"
-    }
-  });
+function CTACardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h3",
+		props: mergeProps({ className: cn("text-gdt-md font-bold text-fg-primary group-data-[variant=brand]/cta-card:text-fg-on-brand", className) }, props),
+		render,
+		state: { slot: "cta-card-title" }
+	});
 }
-function CTACardDescription({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "p",
-    props: mergeProps(
-      {
-        className: cn(
-          "text-gdt-sm text-fg-secondary flex-1 group-data-[variant=brand]/cta-card:text-fg-on-brand",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "cta-card-description"
-    }
-  });
+function CTACardDescription({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-gdt-sm text-fg-secondary flex-1 group-data-[variant=brand]/cta-card:text-fg-on-brand", className) }, props),
+		render,
+		state: { slot: "cta-card-description" }
+	});
 }
-function CTAButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      "data-slot": "cta-button",
-      className: cn(
-        "relative",
-        "group-data-[variant=brand]/cta-card:bg-canvas group-data-[variant=brand]/cta-card:text-fg-brand",
-        "group-data-[variant=brand]/cta-card:hover:bg-surface group-data-[variant=brand]/cta-card:active:bg-surface-raised",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* CTAButton wraps `Button` with defaults tuned for a CTA's action row: it
+* stays legible on every `tone`, so a `tone="brand"` panel automatically
+* gets a canvas-colored button instead of an invisible brand-on-brand one.
+* Every `Button` prop (variant, size, isLoading, render, …) still works.
+*/
+function CTAButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "cta-button",
+		className: cn("relative", "group-data-[variant=brand]/cta-card:bg-canvas group-data-[variant=brand]/cta-card:text-fg-brand", "group-data-[variant=brand]/cta-card:hover:bg-surface group-data-[variant=brand]/cta-card:active:bg-surface-raised", className),
+		...props
+	});
 }
-function CTAButtonLink({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ButtonLink,
-    {
-      "data-slot": "cta-button",
-      className: cn(
-        "relative",
-        "group-data-[variant=brand]/cta-card:bg-canvas group-data-[variant=brand]/cta-card:text-fg-brand",
-        "group-data-[variant=brand]/cta-card:hover:bg-surface group-data-[variant=brand]/cta-card:active:bg-surface-raised",
-        className
-      ),
-      ...props
-    }
-  );
+function CTAButtonLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ButtonLink, {
+		"data-slot": "cta-button",
+		className: cn("relative", "group-data-[variant=brand]/cta-card:bg-canvas group-data-[variant=brand]/cta-card:text-fg-brand", "group-data-[variant=brand]/cta-card:hover:bg-surface group-data-[variant=brand]/cta-card:active:bg-surface-raised", className),
+		...props
+	});
 }
-export {
-  CTA,
-  CTAButton,
-  CTAButtonLink,
-  CTACard,
-  CTACardDescription,
-  CTACardIcon,
-  CTACardTitle,
-  CTAContent,
-  CTADescription,
-  CTAList,
-  CTAListItem,
-  CTATag,
-  CTATitle,
-  ctaVariants
-};
-//# sourceMappingURL=cta.js.map
+//#endregion
+export { CTA, CTAButton, CTAButtonLink, CTACard, CTACardDescription, CTACardIcon, CTACardTitle, CTAContent, CTADescription, CTAList, CTAListItem, CTATag, CTATitle, ctaVariants };

package/dist/currency-selector.d.ts

@@ -1,42 +1,41 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/currency-selector.d.ts
 type CurrencyFlagStripe = {
-    color: string;
-    size?: number;
+  color: string;
+  size?: number;
 };
 type CurrencySelectorOption = {
-    code: string;
-    label: string;
-    countryCode?: string;
-    flag?: readonly CurrencyFlagStripe[];
+  code: string;
+  label: string;
+  countryCode?: string;
+  flag?: readonly CurrencyFlagStripe[];
 };
 type CurrencySelectorSize = NonNullable<VariantProps<typeof currencySelectorTriggerVariants>["size"]>;
 type CurrencySelectorProps = Omit<React.ComponentProps<"button">, "children" | "defaultValue" | "onChange" | "value"> & {
-    options: readonly CurrencySelectorOption[];
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string, option: CurrencySelectorOption) => void;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    size?: CurrencySelectorSize;
-    withBackground?: boolean;
-    showFlag?: boolean;
-    showOptionFlags?: boolean;
-    contentClassName?: string;
-    placeholder?: string;
+  options: readonly CurrencySelectorOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, option: CurrencySelectorOption) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  size?: CurrencySelectorSize;
+  withBackground?: boolean;
+  showFlag?: boolean;
+  showOptionFlags?: boolean;
+  contentClassName?: string;
+  placeholder?: string;
 };
 declare const currencySelectorTriggerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    withBackground?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function CurrencyFlag({ flag, label, className, }: {
-    flag?: readonly CurrencyFlagStripe[];
-    label?: string;
-    className?: string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+  withBackground?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CurrencyFlag({ flag, label, className }: {
+  flag?: readonly CurrencyFlagStripe[];
+  label?: string;
+  className?: string;
 }): React.JSX.Element;
 declare function CurrencySelector({ options, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, size, withBackground, showFlag, showOptionFlags, contentClassName, className, placeholder, type, ...props }: CurrencySelectorProps): React.JSX.Element;
-
-export { CurrencyFlag, type CurrencyFlagStripe, CurrencySelector, type CurrencySelectorOption, type CurrencySelectorProps, type CurrencySelectorSize, currencySelectorTriggerVariants };
+//#endregion
+export { CurrencyFlag, type CurrencyFlagStripe, CurrencySelector, type CurrencySelectorOption, type CurrencySelectorProps, type CurrencySelectorSize, currencySelectorTriggerVariants };