@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/popover.js

@@ -1,24 +1,73 @@
 "use client";
-import {
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverDescription,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger
-} from "./chunk-JVLUBAPB.js";
-import "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverDescription,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger
-};
-//# sourceMappingURL=popover.js.map
+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__ */ jsx(Popover$1.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...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__ */ 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__ */ 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__ */ jsx("div", {
+		"data-slot": "popover-body",
+		className: cn("px-4 py-2", className),
+		...props
+	});
+}
+function PopoverFooter({ 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__ */ 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__ */ jsx(Popover$1.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-gdt-xs font-normal text-fg-secondary", className),
+		...props
+	});
+}
+//#endregion
+export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/price-tag.d.ts

@@ -1,35 +1,34 @@
-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/price-tag.d.ts
 declare const priceTagVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | "xxs" | null | undefined;
-    hasMonthlyPayment?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  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;
+  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;
+  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;
-
-export { PriceTag, type PriceTagCurrencyOption, type PriceTagFormat, type PriceTagProps, type PriceTagSize, priceTagVariants };
+//#endregion
+export { PriceTag, type PriceTagCurrencyOption, type PriceTagFormat, type PriceTagProps, type PriceTagSize, priceTagVariants };

package/dist/price-tag.js

@@ -1,178 +1,118 @@
 "use client";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/price-tag.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { cva } from "class-variance-authority";
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { Check, ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var 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;
+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 canShowMonthlyPayment = size === "md" || size === "lg";
-  const displayMonthlyPayment = canShowMonthlyPayment && monthlyPayment ? `${monthlyPaymentLabel} ${monthlyPayment} monthly` : void 0;
-  const displayAmount = getDisplayAmount({ amount, shortAmount, format });
-  const pill = /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-1", children: [
-    /* @__PURE__ */ jsx("span", { children: displayAmount }),
-    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(
-    PopoverPrimitive.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange,
-      children: [
-        /* @__PURE__ */ jsxs(
-          PopoverPrimitive.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(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Positioner, { sideOffset: 10, align: "start", children: /* @__PURE__ */ jsx(
-          PopoverPrimitive.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
-              );
-            })
-          }
-        ) }) })
-      ]
-    }
-  );
+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);
+				})
+			})
+		}) })]
+	});
 }
-export {
-  PriceTag,
-  priceTagVariants
-};
-//# sourceMappingURL=price-tag.js.map
+//#endregion
+export { PriceTag, priceTagVariants };

package/dist/progress.d.ts

@@ -1,24 +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 = React.ComponentProps<"div"> & VariantProps<typeof circularProgressVariants> & {
-    value: number;
-    labelOverlay?: boolean;
-    pixelSize?: number;
-    strokeWidth?: number;
-    strokeLinecap?: "round" | "butt" | "square";
+  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;
@@ -27,5 +26,5 @@ declare function ProgressLabel({ className, ...props }: Progress$1.Label.Props):
 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, children, labelOverlay, pixelSize, strokeWidth, strokeLinecap, ...props }: CircularProgressProps): React.JSX.Element;
-
-export { CircularProgress, type CircularProgressProps, Progress, ProgressCaption, ProgressIndicator, ProgressLabel, type ProgressProps, type ProgressSize, ProgressTrack, ProgressValue, circularProgressVariants, progressVariants };
+//#endregion
+export { CircularProgress, type CircularProgressProps, Progress, ProgressCaption, ProgressIndicator, ProgressLabel, type ProgressProps, type ProgressSize, ProgressTrack, ProgressValue, circularProgressVariants, progressVariants };