@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/gallery-indicator.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/gallery-indicator.d.ts
+type GalleryIndicatorSize = "sm" | "md" | "lg";
+declare const galleryIndicatorVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type GalleryIndicatorProps = React.ComponentProps<"span"> & VariantProps<typeof galleryIndicatorVariants> & {
+  photoCount?: number;
+  currentPhoto?: number;
+  totalPhotos?: number;
+  label?: string;
+};
+declare function GalleryIndicatorIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function GalleryIndicator({ className, size, photoCount, currentPhoto, totalPhotos, label, children, ...props }: GalleryIndicatorProps): React.JSX.Element;
+//#endregion
+export { GalleryIndicator, GalleryIndicatorIcon, type GalleryIndicatorProps, type GalleryIndicatorSize, galleryIndicatorVariants };

package/dist/gallery-indicator.js

@@ -0,0 +1,75 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/gallery-indicator.tsx
+const galleryIndicatorVariants = cva("inline-flex w-fit shrink-0 items-center justify-center rounded-[100px] bg-black/40 px-3 font-bold leading-none whitespace-nowrap text-white shadow-[0px_0px_4px_0px_rgba(0,0,0,0.1)] backdrop-blur-[15px] sm:px-4", {
+	variants: { size: {
+		sm: "h-[35px] gap-2 text-gdt-xs sm:gap-4 [&>svg]:size-5",
+		md: "h-10 gap-2 text-gdt-sm sm:gap-4 [&>svg]:size-5",
+		lg: "h-10 gap-2 text-gdt-lg sm:h-[50px] sm:gap-4 [&>svg]:size-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+function GalleryIndicatorIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M5.75 17.5 3.63 7.62a2 2 0 0 1 1.53-2.37l9.66-2.07a2 2 0 0 1 2.37 1.53l.27 1.29",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "14.5",
+				height: "12.5",
+				x: "7",
+				y: "7.5",
+				stroke: "currentColor",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m8.75 17 3.31-3.31a1.25 1.25 0 0 1 1.77 0L17.25 17",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m15.5 15.25.81-.81a1.25 1.25 0 0 1 1.77 0L20.5 16.86",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "17.25",
+				cy: "11.25",
+				r: "1.25",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function GalleryIndicator({ className, size = "md", photoCount = 35, currentPhoto, totalPhotos = photoCount, label, children, ...props }) {
+	const resolvedLabel = children ?? label ?? (currentPhoto === void 0 ? `View All ${photoCount} Photos` : `${currentPhoto}/${totalPhotos}`);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "gallery-indicator",
+		"data-size": size,
+		className: cn(galleryIndicatorVariants({ size }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx(GalleryIndicatorIcon, { className: "shrink-0 text-white" }), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: resolvedLabel
+		})]
+	});
+}
+//#endregion
+export { GalleryIndicator, GalleryIndicatorIcon, galleryIndicatorVariants };

package/dist/heatmap-chart.d.ts

@@ -0,0 +1,95 @@
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartCard } from "./chart.js";
+import * as React from "react";
+//#region src/heatmap-chart.d.ts
+/**
+ * A heatmap — a row × column grid encoding magnitude as fill intensity.
+ * Reach for one to compare a measure across two categorical dimensions at a
+ * glance (listing inquiries by neighbourhood and month, traffic by day and
+ * hour, repayment rate by branch and quarter).
+ *
+ * Unlike the other charts in this folder it is not built on recharts
+ * (recharts has no heatmap/matrix primitive); it is a CSS grid of cells, a
+ * hover/focus tooltip per cell, and an optional sequential-scale legend. It
+ * stays size-aware via the shared `SizeProvider` and reuses `ChartCard`.
+ *
+ * Color encodes magnitude, so cells are `--color-surface-brand` at a
+ * magnitude-scaled opacity (8/22/44/70/100%) rather than a distinct hue per
+ * bucket — the brand token already flips per theme, so the ramp stays
+ * correct in both without a separate token set. Never the categorical
+ * `chart-1`…`3` tokens, which encode identity, not amount.
+ *
+ * @example
+ * <HeatmapChart
+ *   data={[
+ *     { row: "Lekki", column: "Jan", value: 42 },
+ *     { row: "Lekki", column: "Feb", value: 58 },
+ *     { row: "Yaba", column: "Jan", value: 21 },
+ *     { row: "Yaba", column: "Feb", value: 30 },
+ *   ]}
+ *   title="Listing inquiries"
+ *   description="By neighbourhood · Jan–Feb 2026"
+ * />
+ */
+/** Heatmap sizes line up with the three shared `ComponentSize` values. */
+type HeatmapChartSize = ComponentSize;
+type HeatmapChartCellDatum = {
+  /** Row category label. */
+  row: string;
+  /** Column category label. */
+  column: string;
+  /** Magnitude driving the cell's fill. Omit the datum entirely for "no data". */
+  value: number;
+};
+/**
+ * Sequential fill ramp — `--color-surface-brand` (already theme-aware) at five
+ * magnitude-scaled opacity stops: 8%, 22%, 44%, 70%, 100%. Index 0 is the
+ * lowest magnitude bucket, index 4 the highest — assign by bucket order,
+ * never by an arbitrary opacity pick. Relative color syntax (`rgb(from … / a)`)
+ * keeps each stop a true alpha over whatever surface it sits on, matching the
+ * shadow/gradient tokens in `styles/giddaa.css`.
+ */
+declare const HEATMAP_CHART_PALETTE: readonly ["rgb(from var(--color-surface-brand) r g b / 0.08)", "rgb(from var(--color-surface-brand) r g b / 0.22)", "rgb(from var(--color-surface-brand) r g b / 0.44)", "rgb(from var(--color-surface-brand) r g b / 0.7)", "rgb(from var(--color-surface-brand) r g b / 1)"];
+type HeatmapChartLayout = {
+  /** Width/height of a single (square) cell in px. */
+  cellSize: number;
+  /** Gap between cells in px. */
+  gap: number;
+  /** Reserved width for row labels in px. */
+  rowLabelWidth: number;
+  /** Reserved height for the column header row in px. */
+  columnLabelHeight: number;
+  /** Row/column label font size in px. */
+  labelFontSize: number;
+  /** In-cell value label font size in px. */
+  valueFontSize: number;
+  /** Width of a single legend ramp swatch in px. */
+  legendSwatchSize: number;
+};
+declare const HEATMAP_CHART_LAYOUT: Record<HeatmapChartSize, HeatmapChartLayout>;
+type HeatmapChartProps = Omit<React.ComponentProps<typeof ChartCard>, "size" | "children"> & {
+  /** Cells — one entry per row/column pair that has a value. */
+  data: HeatmapChartCellDatum[];
+  /** Row order, top to bottom. Defaults to first-seen order in `data`. */
+  rows?: string[];
+  /** Column order, left to right. Defaults to first-seen order in `data`. */
+  columns?: string[];
+  /** Fixed `[min, max]` for the color scale. Defaults to the data's range. */
+  domain?: [number, number];
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: HeatmapChartSize;
+  /** Chart heading. Omit to hide the title. */
+  title?: React.ReactNode;
+  /** Supporting metadata (period, source). Omit to hide the description. */
+  description?: React.ReactNode;
+  /** Show the sequential-scale legend under the grid. Default true. */
+  legend?: boolean;
+  /** Print the formatted value inside every cell. Default false — the
+   * hover/focus tooltip carries exact figures without crowding the grid. */
+  showValues?: boolean;
+  /** Format a cell value for the tooltip, legend, and in-cell label. */
+  valueFormatter?: (value: number) => string;
+};
+declare function HeatmapChart({ data, rows: rowsProp, columns: columnsProp, domain: domainProp, size, title, description, legend, showValues, valueFormatter, className, ...props }: HeatmapChartProps): React.JSX.Element;
+//#endregion
+export { HEATMAP_CHART_LAYOUT, HEATMAP_CHART_PALETTE, HeatmapChart, type HeatmapChartCellDatum, type HeatmapChartLayout, type HeatmapChartProps, type HeatmapChartSize };

package/dist/heatmap-chart.js

@@ -0,0 +1,197 @@
+"use client";
+import { useComponentSize } from "./size-context.js";
+import { ChartCard, ChartDescription, ChartHeader, ChartTitle } from "./chart.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+//#region src/heatmap-chart.tsx
+/**
+* Sequential fill ramp — `--color-surface-brand` (already theme-aware) at five
+* magnitude-scaled opacity stops: 8%, 22%, 44%, 70%, 100%. Index 0 is the
+* lowest magnitude bucket, index 4 the highest — assign by bucket order,
+* never by an arbitrary opacity pick. Relative color syntax (`rgb(from … / a)`)
+* keeps each stop a true alpha over whatever surface it sits on, matching the
+* shadow/gradient tokens in `styles/giddaa.css`.
+*/
+const HEATMAP_CHART_PALETTE = [
+	"rgb(from var(--color-surface-brand) r g b / 0.08)",
+	"rgb(from var(--color-surface-brand) r g b / 0.22)",
+	"rgb(from var(--color-surface-brand) r g b / 0.44)",
+	"rgb(from var(--color-surface-brand) r g b / 0.7)",
+	"rgb(from var(--color-surface-brand) r g b / 1)"
+];
+const HEATMAP_CHART_LAYOUT = {
+	sm: {
+		cellSize: 20,
+		gap: 3,
+		rowLabelWidth: 64,
+		columnLabelHeight: 20,
+		labelFontSize: 10,
+		valueFontSize: 9,
+		legendSwatchSize: 14
+	},
+	md: {
+		cellSize: 26,
+		gap: 3,
+		rowLabelWidth: 80,
+		columnLabelHeight: 22,
+		labelFontSize: 11,
+		valueFontSize: 10,
+		legendSwatchSize: 16
+	},
+	lg: {
+		cellSize: 32,
+		gap: 4,
+		rowLabelWidth: 96,
+		columnLabelHeight: 24,
+		labelFontSize: 12,
+		valueFontSize: 11,
+		legendSwatchSize: 18
+	}
+};
+/** Joins a row/column pair into a stable lookup key. */
+function cellKey(row, column) {
+	return `${row}␟${column}`;
+}
+/** Buckets a value into one of the five palette steps (1 = lowest, 5 = highest). */
+function heatmapStep(value, domain) {
+	const [min, max] = domain;
+	if (max <= min) return HEATMAP_CHART_PALETTE.length;
+	const ratio = (value - min) / (max - min);
+	const step = Math.ceil(ratio * HEATMAP_CHART_PALETTE.length);
+	return Math.min(HEATMAP_CHART_PALETTE.length, Math.max(1, step));
+}
+function HeatmapChart({ data, rows: rowsProp, columns: columnsProp, domain: domainProp, size, title, description, legend = true, showValues = false, valueFormatter = (value) => value.toLocaleString("en-NG"), className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = HEATMAP_CHART_LAYOUT[resolvedSize];
+	const rows = rowsProp ?? Array.from(new Set(data.map((d) => d.row)));
+	const columns = columnsProp ?? Array.from(new Set(data.map((d) => d.column)));
+	const valuesByKey = new Map(data.map((datum) => [cellKey(datum.row, datum.column), datum.value]));
+	const values = data.map((datum) => datum.value);
+	const domain = domainProp ?? [values.length ? Math.min(...values) : 0, values.length ? Math.max(...values) : 1];
+	return /* @__PURE__ */ jsxs(ChartCard, {
+		size: resolvedSize,
+		className,
+		...props,
+		children: [(title != null || description != null) && /* @__PURE__ */ jsxs(ChartHeader, { children: [title != null && /* @__PURE__ */ jsx(ChartTitle, { children: title }), description != null && /* @__PURE__ */ jsx(ChartDescription, { children: description })] }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "inline-grid",
+					style: {
+						gridTemplateColumns: `${layout.rowLabelWidth}px repeat(${columns.length}, ${layout.cellSize}px)`,
+						gap: layout.gap
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+						columns.map((column) => /* @__PURE__ */ jsx("span", {
+							className: "flex items-end justify-center truncate px-0.5 pb-1 text-fg-secondary",
+							style: {
+								fontSize: layout.labelFontSize,
+								height: layout.columnLabelHeight
+							},
+							title: column,
+							children: column
+						}, column)),
+						rows.map((row) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "flex items-center truncate pr-2 text-fg-secondary",
+							style: {
+								fontSize: layout.labelFontSize,
+								height: layout.cellSize
+							},
+							title: row,
+							children: row
+						}), columns.map((column) => /* @__PURE__ */ jsx(HeatmapChartCell, {
+							row,
+							column,
+							value: valuesByKey.get(cellKey(row, column)),
+							domain,
+							layout,
+							showValue: showValues,
+							valueFormatter
+						}, column))] }, row))
+					]
+				})
+			}), legend && /* @__PURE__ */ jsx(HeatmapChartLegend, {
+				domain,
+				layout,
+				valueFormatter
+			})]
+		})]
+	});
+}
+/**
+* One grid cell. Missing data (no matching datum for this row/column) renders
+* a dashed placeholder and is skipped from tab order — there is nothing to
+* announce or hover. A valued cell is a focusable, hoverable swatch: the
+* `aria-label` carries the row/column/value so screen readers get the exact
+* figure without relying on the visual tooltip, which mirrors it for sighted
+* hover/keyboard-focus use.
+*/
+function HeatmapChartCell({ row, column, value, domain, layout, showValue, valueFormatter }) {
+	if (value == null) return /* @__PURE__ */ jsx("span", {
+		className: "rounded-[4px] border border-line-subtle border-dashed",
+		style: {
+			width: layout.cellSize,
+			height: layout.cellSize
+		},
+		title: `${row} · ${column}: no data`
+	});
+	const step = heatmapStep(value, domain);
+	const color = HEATMAP_CHART_PALETTE[step - 1];
+	const formatted = valueFormatter(value);
+	const label = `${row} · ${column}: ${formatted}`;
+	const textColor = step >= 4 ? "var(--color-fg-on-brand)" : "var(--color-fg-primary)";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "group/cell relative flex items-center justify-center rounded-[4px] outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+		style: {
+			width: layout.cellSize,
+			height: layout.cellSize,
+			backgroundColor: color
+		},
+		"aria-label": label,
+		children: [showValue && /* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none tabular-nums",
+			style: {
+				fontSize: layout.valueFontSize,
+				color: textColor
+			},
+			children: formatted
+		}), /* @__PURE__ */ jsx("span", {
+			role: "tooltip",
+			className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-line-subtle bg-surface-overlay px-2 py-1 text-fg-primary text-gdt-xs opacity-0 shadow-2 transition-opacity group-hover/cell:opacity-100 group-focus-visible/cell:opacity-100",
+			children: label
+		})]
+	});
+}
+/** Sequential-scale legend — the opacity ramp bounded by the domain's min/max. */
+function HeatmapChartLegend({ domain, layout, valueFormatter }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 text-fg-caption-placeholder",
+		style: { fontSize: layout.labelFontSize },
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: valueFormatter(domain[0])
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex overflow-hidden rounded-[3px]",
+				children: HEATMAP_CHART_PALETTE.map((color) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					style: {
+						backgroundColor: color,
+						width: layout.legendSwatchSize,
+						height: layout.legendSwatchSize / 2
+					}
+				}, color))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: valueFormatter(domain[1])
+			})
+		]
+	});
+}
+//#endregion
+export { HEATMAP_CHART_LAYOUT, HEATMAP_CHART_PALETTE, HeatmapChart };

package/dist/infotip.d.ts

@@ -0,0 +1,10 @@
+import { Popover } from "@base-ui/react/popover";
+//#region src/infotip.d.ts
+declare function Infotip({ ...props }: Popover.Root.Props): import("react").JSX.Element;
+declare function InfotipTrigger({ ...props }: Popover.Trigger.Props): import("react").JSX.Element;
+type InfotipContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & Pick<Popover.Portal.Props, "container"> & {
+  showArrow?: boolean;
+};
+declare function InfotipContent({ className, container, side, sideOffset, align, alignOffset, showArrow, children, ...props }: InfotipContentProps): import("react").JSX.Element;
+//#endregion
+export { Infotip, InfotipContent, InfotipTrigger };

package/dist/infotip.js

@@ -0,0 +1,40 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/infotip.tsx
+function Infotip({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "infotip",
+		...props
+	});
+}
+function InfotipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		nativeButton: false,
+		"data-slot": "infotip-trigger",
+		openOnHover: true,
+		delay: 100,
+		...props
+	});
+}
+function InfotipContent({ className, container, side = "top", sideOffset = 6, align = "center", alignOffset = 0, showArrow = true, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsxs(Popover.Popup, {
+				"data-slot": "infotip-content",
+				className: cn("z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm 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", className),
+				...props,
+				children: [children, showArrow ? /* @__PURE__ */ jsx(Popover.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]
+			})
+		})
+	});
+}
+//#endregion
+export { Infotip, InfotipContent, InfotipTrigger };

package/dist/input-CfoEJ8A6.d.ts

@@ -0,0 +1,12 @@
+import { t as InputComponentSize } from "./input-size-context-C-SFx9sx.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/input.d.ts
+declare const inputVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputProps = Omit<React.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>;
+type InputSize = InputComponentSize;
+declare function Input({ className, size, type, ...props }: InputProps): React.JSX.Element;
+//#endregion
+export { InputSize as n, inputVariants as r, Input as t };

package/dist/input-group.d.ts

@@ -1,31 +1,28 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { Button } from './button.js';
-import { InputSize } from './input.js';
-import { TextareaSize } from './textarea.js';
-import '@base-ui/react/button';
-import './input-size-context.js';
-
+import { t as Button } from "./button-BZIeyUw6.js";
+import { n as InputSize } from "./input-CfoEJ8A6.js";
+import { n as TextareaSize } from "./textarea-IS_D8pXf.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/input-group.d.ts
 declare function InputGroup({ className, size, ...props }: React.ComponentProps<"div"> & {
-    size?: InputSize;
+  size?: InputSize;
 }): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
-    type?: "button" | "submit" | "reset";
+  type?: "button" | "submit" | "reset";
 }): React.JSX.Element;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function InputGroupInput({ className, size, ...props }: Omit<React.ComponentProps<"input">, "size"> & {
-    size?: InputSize;
+  size?: InputSize;
 }): React.JSX.Element;
 declare function InputGroupTextarea({ className, size, ...props }: Omit<React.ComponentProps<"textarea">, "size"> & {
-    size?: TextareaSize;
+  size?: TextareaSize;
 }): React.JSX.Element;
-
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };