@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/popover.js

@@ -1,169 +1,73 @@
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-
-// src/components/ui/popover.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider } from "./size-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/popover.tsx
 function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		"data-slot": "popover",
+		...props
+	});
 }
 function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
 }
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  showArrow = true,
-  size = "md",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
-    PopoverPrimitive.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs(
-        PopoverPrimitive.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx2(SizeProvider, { size, children }),
-            showArrow ? /* @__PURE__ */ jsx2(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
-          ]
-        }
-      )
-    }
-  ) });
+function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Popover$1.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(SizeProvider, {
+				size,
+				children
+			}), showArrow ? /* @__PURE__ */ jsx(Popover$1.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null]
+		})
+	}) });
 }
-function PopoverHeader({
-  className,
-  border,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "popover-header",
-      className: cn(
-        "flex flex-col gap-0.5 px-4",
-        border && "border-b border-line-subtle pb-3",
-        className
-      ),
-      ...props
-    }
-  );
+function PopoverHeader({ className, border, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-0.5 px-4", border && "border-b border-line-subtle pb-3", className),
+		...props
+	});
 }
 function PopoverBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "popover-body",
-      className: cn("px-4 py-2", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-body",
+		className: cn("px-4 py-2", className),
+		...props
+	});
 }
 function PopoverFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "popover-footer",
-      className: cn(
-        "flex flex-row items-center gap-2 px-4 border-t border-line-subtle pt-3",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-footer",
+		className: cn("flex flex-row items-center gap-2 px-4 border-t border-line-subtle pt-3", className),
+		...props
+	});
 }
 function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    PopoverPrimitive.Title,
-    {
-      "data-slot": "popover-title",
-      className: cn("text-gdt-sm font-semibold text-fg-primary", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		"data-slot": "popover-title",
+		className: cn("text-gdt-sm font-semibold text-fg-primary", className),
+		...props
+	});
 }
-function PopoverDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    PopoverPrimitive.Description,
-    {
-      "data-slot": "popover-description",
-      className: cn("text-gdt-xs font-normal text-fg-secondary", className),
-      ...props
-    }
-  );
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-gdt-xs font-normal text-fg-secondary", className),
+		...props
+	});
 }
-export {
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverDescription,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger
-};
-//# sourceMappingURL=popover.js.map
+//#endregion
+export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/price-tag.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/price-tag.d.ts
+declare const priceTagVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xs" | "xxs" | null | undefined;
+  hasMonthlyPayment?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type PriceTagSize = NonNullable<VariantProps<typeof priceTagVariants>["size"]>;
+type PriceTagCurrencyOption = {
+  code: string;
+  amount: string;
+  shortAmount?: string;
+  monthlyPayment?: string;
+  monthlyPaymentLabel?: string;
+};
+type PriceTagFormat = "full" | "shortened";
+type PriceTagProps = Omit<React.ComponentProps<"button">, "children"> & {
+  amount: string;
+  shortAmount?: string;
+  format?: PriceTagFormat;
+  size?: PriceTagSize;
+  monthlyPayment?: string;
+  monthlyPaymentLabel?: string;
+  currencies?: PriceTagCurrencyOption[];
+  selectedCurrency?: string;
+  onCurrencyChange?: (currency: PriceTagCurrencyOption) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  popoverClassName?: string;
+};
+declare function PriceTag({ amount, shortAmount, format, size, monthlyPayment, monthlyPaymentLabel, currencies, selectedCurrency, onCurrencyChange, open, defaultOpen, onOpenChange, className, popoverClassName, type, ...props }: PriceTagProps): React.JSX.Element;
+//#endregion
+export { PriceTag, type PriceTagCurrencyOption, type PriceTagFormat, type PriceTagProps, type PriceTagSize, priceTagVariants };

package/dist/price-tag.js

@@ -0,0 +1,118 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Check, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Popover } from "@base-ui/react/popover";
+//#region src/price-tag.tsx
+const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-center justify-center rounded-4xl bg-surface-brand font-bold leading-none whitespace-nowrap text-fg-on-brand shadow-none transition-[background-color,box-shadow] outline-none data-[interactive=true]:cursor-pointer data-[interactive=true]:hover:bg-action-primary-hover data-[interactive=true]:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[interactive=true]:active:bg-action-primary-pressed", {
+	variants: {
+		size: {
+			xxs: "min-h-7 gap-1 px-2.5 py-0.75 text-gdt-subtext [&>svg]:size-3",
+			xs: "min-h-7.5 gap-1 px-3 py-1 text-gdt-xs [&>svg]:size-3.5",
+			sm: "min-h-9 gap-1.5 px-4 py-1.5 text-gdt-sm [&>svg]:size-3.5",
+			md: "min-h-10.5 gap-1.5 px-5 py-2 text-gdt-md [&>svg]:size-4",
+			lg: "min-h-13 gap-2 px-7 py-3 text-gdt-lg [&>svg]:size-4.5"
+		},
+		hasMonthlyPayment: {
+			true: "items-start",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		hasMonthlyPayment: false
+	}
+});
+function getDisplayAmount({ amount, shortAmount, format }) {
+	return format === "shortened" && shortAmount ? shortAmount : amount;
+}
+function PriceTag({ amount, shortAmount, format = "full", size = "md", monthlyPayment, monthlyPaymentLabel = "Low as", currencies, selectedCurrency, onCurrencyChange, open, defaultOpen, onOpenChange, className, popoverClassName, type = "button", ...props }) {
+	const hasDropdown = Boolean(currencies?.length);
+	const displayMonthlyPayment = (size === "md" || size === "lg") && monthlyPayment ? `${monthlyPaymentLabel} ${monthlyPayment} monthly` : void 0;
+	const pill = /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("span", { children: getDisplayAmount({
+			amount,
+			shortAmount,
+			format
+		}) }), displayMonthlyPayment ? /* @__PURE__ */ jsx("span", {
+			className: cn("hidden text-gdt-subtext font-medium leading-none opacity-90", {
+				"inline-block": size === "md",
+				"inline-block text-gdt-xs": size === "lg"
+			}),
+			children: displayMonthlyPayment
+		}) : null]
+	});
+	if (!hasDropdown) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "price-tag",
+		className: cn(priceTagVariants({
+			size,
+			hasMonthlyPayment: Boolean(displayMonthlyPayment)
+		}), className),
+		children: pill
+	});
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+			"data-slot": "price-tag",
+			"data-interactive": "true",
+			type,
+			className: cn(priceTagVariants({
+				size,
+				hasMonthlyPayment: Boolean(displayMonthlyPayment)
+			}), className),
+			...props,
+			children: [pill, /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": "true",
+				className: "transition-transform group-data-popup-open/price-tag:rotate-180"
+			})]
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			sideOffset: 10,
+			align: "start",
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				"data-slot": "price-tag-popover",
+				className: cn("z-50 flex w-[17.25rem] max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-xl border border-line-subtle bg-surface-overlay p-2 text-fg-primary shadow-3 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", popoverClassName),
+				children: currencies?.map((currency) => {
+					const active = currency.code === selectedCurrency;
+					const optionAmount = getDisplayAmount({
+						amount: currency.amount,
+						shortAmount: currency.shortAmount,
+						format
+					});
+					const optionMonthlyPayment = currency.monthlyPayment ? `${currency.monthlyPaymentLabel ?? "As low as"} ${currency.monthlyPayment} per month` : void 0;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-active": active ? "true" : void 0,
+						className: "flex min-h-14 w-full items-center gap-3 rounded-lg px-3 text-start outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[active=true]:bg-surface-brand-subtle",
+						onClick: () => onCurrencyChange?.(currency),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-10 text-gdt-sm font-semibold text-fg-brand",
+								children: currency.code
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "ml-auto flex min-w-0 flex-col items-end",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-gdt-sm font-bold text-fg-primary",
+									children: optionAmount
+								}), optionMonthlyPayment ? /* @__PURE__ */ jsx("span", {
+									className: "text-gdt-xs text-fg-secondary",
+									children: optionMonthlyPayment
+								}) : null]
+							}),
+							active ? /* @__PURE__ */ jsx(Check, {
+								"aria-hidden": "true",
+								className: "size-4 shrink-0 text-fg-brand"
+							}) : null
+						]
+					}, currency.code);
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { PriceTag, priceTagVariants };

package/dist/progress.d.ts

@@ -1,21 +1,23 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { Progress as Progress$1 } from '@base-ui/react/progress';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/progress.d.ts
 declare const progressVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const circularProgressVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ProgressProps = Progress$1.Root.Props & VariantProps<typeof progressVariants> & {
-    disabled?: boolean;
+  disabled?: boolean;
 };
 type ProgressSize = NonNullable<VariantProps<typeof progressVariants>["size"]>;
-type CircularProgressProps = Omit<React.ComponentProps<"div">, "children"> & VariantProps<typeof circularProgressVariants> & {
-    value: number;
-    labelOverlay?: boolean;
+type CircularProgressProps = React.ComponentProps<"div"> & VariantProps<typeof circularProgressVariants> & {
+  value: number;
+  labelOverlay?: boolean;
+  pixelSize?: number;
+  strokeWidth?: number;
+  strokeLinecap?: "round" | "butt" | "square";
 };
 declare function Progress({ className, children, value, size, disabled, ...props }: ProgressProps): React.JSX.Element;
 declare function ProgressTrack({ className, ...props }: Progress$1.Track.Props): React.JSX.Element;
@@ -23,6 +25,6 @@ declare function ProgressIndicator({ className, ...props }: Progress$1.Indicator
 declare function ProgressLabel({ className, ...props }: Progress$1.Label.Props): React.JSX.Element;
 declare function ProgressValue({ className, ...props }: Progress$1.Value.Props): React.JSX.Element;
 declare function ProgressCaption({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-declare function CircularProgress({ className, style, value, size, labelOverlay, ...props }: CircularProgressProps): React.JSX.Element;
-
-export { CircularProgress, type CircularProgressProps, Progress, ProgressCaption, ProgressIndicator, ProgressLabel, type ProgressProps, type ProgressSize, ProgressTrack, ProgressValue, circularProgressVariants, progressVariants };
+declare function CircularProgress({ className, style, value, size, children, labelOverlay, pixelSize, strokeWidth, strokeLinecap, ...props }: CircularProgressProps): React.JSX.Element;
+//#endregion
+export { CircularProgress, type CircularProgressProps, Progress, ProgressCaption, ProgressIndicator, ProgressLabel, type ProgressProps, type ProgressSize, ProgressTrack, ProgressValue, circularProgressVariants, progressVariants };