@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/breadcrumb.js

@@ -1,131 +1,69 @@
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/breadcrumb.tsx
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/breadcrumb.tsx
 function Breadcrumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      "data-slot": "breadcrumb",
-      className: cn("min-w-0", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: cn("min-w-0", className),
+		...props
+	});
 }
 function BreadcrumbList({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "ol",
-    {
-      "data-slot": "breadcrumb-list",
-      className: cn(
-        "flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary", className),
+		...props
+	});
 }
 function BreadcrumbItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-item",
-      className: cn("inline-flex min-w-0 items-center gap-2", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex min-w-0 items-center gap-2", className),
+		...props
+	});
 }
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "a",
-    props: mergeProps(
-      {
-        className: cn(
-          "inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "breadcrumb-link"
-    }
-  });
+function BreadcrumbLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", className) }, props),
+		render,
+		state: { slot: "breadcrumb-link" }
+	});
 }
 function BreadcrumbPage({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "breadcrumb-page",
-      "aria-current": "page",
-      className: cn(
-        "inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: cn("inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand", className),
+		...props
+	});
 }
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-separator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn(
-        "inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
-    }
-  );
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
+	});
 }
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      "data-slot": "breadcrumb-ellipsis",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn(
-        "inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
-      ]
-    }
-  );
+function BreadcrumbEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
 }
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator
-};
-//# sourceMappingURL=breadcrumb.js.map
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/bullet-chart.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import * as React from "react";
+//#region src/bullet-chart.d.ts
 /**
  * A bullet chart — a compact linear gauge for KPI-vs-goal reporting where a full
  * bar chart would be excessive. It encodes three things on one horizontal track:
@@ -55,16 +55,16 @@ type BulletChartSize = ComponentSize;
 /** Measure-bar sentiment — `auto` derives it from `value` vs `target`. */
 type BulletChartStatus = "auto" | "success" | "warning";
 type BulletChartLayout = {
-    /** Thickness of the range-band track (the pill) in px. */
-    trackHeight: number;
-    /** Thickness of the centered measure bar in px. */
-    measureHeight: number;
-    /** Height of the target marker in px — taller than the bar, inside the track. */
-    markerHeight: number;
-    /** Target marker thickness in px. */
-    markerWidth: number;
-    /** Axis tick label class. */
-    tickClass: string;
+  /** Thickness of the range-band track (the pill) in px. */
+  trackHeight: number;
+  /** Thickness of the centered measure bar in px. */
+  measureHeight: number;
+  /** Height of the target marker in px — taller than the bar, inside the track. */
+  markerHeight: number;
+  /** Target marker thickness in px. */
+  markerWidth: number;
+  /** Axis tick label class. */
+  tickClass: string;
 };
 declare const BULLET_CHART_LAYOUT: Record<BulletChartSize, BulletChartLayout>;
 /**
@@ -74,25 +74,25 @@ declare const BULLET_CHART_LAYOUT: Record<BulletChartSize, BulletChartLayout>;
  */
 declare const BULLET_RANGE_PALETTE: readonly ["var(--color-stone-200)", "var(--color-stone-300)", "var(--color-stone-400)"];
 type BulletChartProps = Omit<React.ComponentProps<"div">, "children"> & {
-    /** The realized (actualized) value — drives the measure bar length. */
-    value: number;
-    /** The goal to beat — drives the target marker and the auto status colour. */
-    target: number;
-    /** Axis start. Default 0. */
-    min?: number;
-    /** Axis end. Default the largest of `value`, `target`, and the top range. */
-    max?: number;
-    /** Internal thresholds dividing [min, max] into qualitative zones, ascending. */
-    ranges?: number[];
-    /** Axis tick values. Default `[min, midpoint, max]`. Pass `[]` to hide. */
-    ticks?: number[];
-    /** Measure-bar sentiment. Default `auto` (success when `value >= target`). */
-    status?: BulletChartStatus;
-    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
-    size?: BulletChartSize;
-    /** Format the tick labels (and the aria summary). Default grouped integer. */
-    valueFormatter?: (value: number) => string;
+  /** The realized (actualized) value — drives the measure bar length. */
+  value: number;
+  /** The goal to beat — drives the target marker and the auto status colour. */
+  target: number;
+  /** Axis start. Default 0. */
+  min?: number;
+  /** Axis end. Default the largest of `value`, `target`, and the top range. */
+  max?: number;
+  /** Internal thresholds dividing [min, max] into qualitative zones, ascending. */
+  ranges?: number[];
+  /** Axis tick values. Default `[min, midpoint, max]`. Pass `[]` to hide. */
+  ticks?: number[];
+  /** Measure-bar sentiment. Default `auto` (success when `value >= target`). */
+  status?: BulletChartStatus;
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: BulletChartSize;
+  /** Format the tick labels (and the aria summary). Default grouped integer. */
+  valueFormatter?: (value: number) => string;
 };
 declare function BulletChart({ value, target, min, max, ranges, ticks, status, size, valueFormatter, className, ...props }: BulletChartProps): React.JSX.Element;
-
-export { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart, type BulletChartLayout, type BulletChartProps, type BulletChartSize, type BulletChartStatus };
+//#endregion
+export { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart, type BulletChartLayout, type BulletChartProps, type BulletChartSize, type BulletChartStatus };

package/dist/bullet-chart.js

@@ -1,156 +1,129 @@
 "use client";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/bullet-chart.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var BULLET_CHART_LAYOUT = {
-  sm: {
-    trackHeight: 26,
-    measureHeight: 11,
-    markerHeight: 20,
-    markerWidth: 3,
-    tickClass: "text-gdt-xs"
-  },
-  md: {
-    trackHeight: 34,
-    measureHeight: 15,
-    markerHeight: 26,
-    markerWidth: 4,
-    tickClass: "text-gdt-sm"
-  },
-  lg: {
-    trackHeight: 44,
-    measureHeight: 19,
-    markerHeight: 34,
-    markerWidth: 5,
-    tickClass: "text-gdt-sm"
-  }
+//#region src/bullet-chart.tsx
+const BULLET_CHART_LAYOUT = {
+	sm: {
+		trackHeight: 26,
+		measureHeight: 11,
+		markerHeight: 20,
+		markerWidth: 3,
+		tickClass: "text-gdt-xs"
+	},
+	md: {
+		trackHeight: 34,
+		measureHeight: 15,
+		markerHeight: 26,
+		markerWidth: 4,
+		tickClass: "text-gdt-sm"
+	},
+	lg: {
+		trackHeight: 44,
+		measureHeight: 19,
+		markerHeight: 34,
+		markerWidth: 5,
+		tickClass: "text-gdt-sm"
+	}
 };
-var BULLET_RANGE_PALETTE = [
-  "var(--color-stone-200)",
-  "var(--color-stone-300)",
-  "var(--color-stone-400)"
+/**
+* Range-band shades, ordered poor → good. The base track is the lightest shade,
+* so the first (poorest) zone blends into it and each higher zone darkens —
+* giving the gauge its qualitative context without competing with the bar.
+*/
+const BULLET_RANGE_PALETTE = [
+	"var(--color-stone-200)",
+	"var(--color-stone-300)",
+	"var(--color-stone-400)"
 ];
-var STATUS_COLOR = {
-  success: "var(--color-status-success)",
-  warning: "var(--color-status-warning)"
+const STATUS_COLOR = {
+	success: "var(--color-status-success)",
+	warning: "var(--color-status-warning)"
 };
+/** Clamp a value into [min, max] and express it as a 0–100 track percentage. */
 function toPercent(value, min, max) {
-  if (max <= min) return 0;
-  const ratio = (value - min) / (max - min);
-  return Math.min(Math.max(ratio, 0), 1) * 100;
+	if (max <= min) return 0;
+	const ratio = (value - min) / (max - min);
+	return Math.min(Math.max(ratio, 0), 1) * 100;
 }
-function BulletChart({
-  value,
-  target,
-  min = 0,
-  max,
-  ranges,
-  ticks,
-  status = "auto",
-  size,
-  valueFormatter = (v) => v.toLocaleString("en-NG"),
-  className,
-  ...props
-}) {
-  const layout = BULLET_CHART_LAYOUT[useComponentSize(size)];
-  const topRange = ranges?.length ? Math.max(...ranges) : 0;
-  const resolvedMax = max ?? (Math.max(value, target, topRange) || 1);
-  const resolvedTicks = ticks ?? [min, (min + resolvedMax) / 2, resolvedMax];
-  const resolvedStatus = status === "auto" ? value >= target ? "success" : "warning" : status;
-  const measureColor = STATUS_COLOR[resolvedStatus];
-  const thresholds = [
-    min,
-    ...(ranges ?? []).filter((r) => r > min && r < resolvedMax).sort((a, b) => a - b),
-    resolvedMax
-  ];
-  const zones = thresholds.slice(0, -1).map((from, i) => ({
-    from,
-    to: thresholds[i + 1],
-    color: BULLET_RANGE_PALETTE[Math.min(i, BULLET_RANGE_PALETTE.length - 1)]
-  }));
-  const ariaLabel = props["aria-label"] ?? `${valueFormatter(value)} of ${valueFormatter(target)} target \u2014 ${resolvedStatus === "success" ? "on track" : "behind"}`;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...props,
-      role: "img",
-      "aria-label": ariaLabel,
-      className: cn("flex w-full flex-col gap-2", className),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative w-full", style: { height: layout.trackHeight }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-0 overflow-hidden rounded-full",
-              style: { backgroundColor: BULLET_RANGE_PALETTE[0] },
-              children: zones.map((zone) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute inset-y-0",
-                  style: {
-                    left: `${toPercent(zone.from, min, resolvedMax)}%`,
-                    width: `${toPercent(zone.to, min, resolvedMax) - toPercent(zone.from, min, resolvedMax)}%`,
-                    backgroundColor: zone.color
-                  }
-                },
-                zone.from
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute left-0 top-1/2 rounded-full",
-              style: {
-                height: layout.measureHeight,
-                width: `${toPercent(value, min, resolvedMax)}%`,
-                backgroundColor: measureColor,
-                transform: "translateY(-50%)"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute top-1/2 rounded-full bg-fg-primary",
-              style: {
-                height: layout.markerHeight,
-                width: layout.markerWidth,
-                left: `${toPercent(target, min, resolvedMax)}%`,
-                transform: "translate(-50%, -50%)"
-              }
-            }
-          )
-        ] }),
-        resolvedTicks.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative h-4 w-full", children: resolvedTicks.map((tick) => {
-          const pct = toPercent(tick, min, resolvedMax);
-          const transform = pct <= 0 ? "translateX(0)" : pct >= 100 ? "translateX(-100%)" : "translateX(-50%)";
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "absolute top-0 whitespace-nowrap tabular-nums text-fg-caption-placeholder",
-                layout.tickClass
-              ),
-              style: { left: `${pct}%`, transform },
-              children: valueFormatter(tick)
-            },
-            tick
-          );
-        }) })
-      ]
-    }
-  );
+function BulletChart({ value, target, min = 0, max, ranges, ticks, status = "auto", size, valueFormatter = (v) => v.toLocaleString("en-NG"), className, ...props }) {
+	const layout = BULLET_CHART_LAYOUT[useComponentSize(size)];
+	const topRange = ranges?.length ? Math.max(...ranges) : 0;
+	const resolvedMax = max ?? (Math.max(value, target, topRange) || 1);
+	const resolvedTicks = ticks ?? [
+		min,
+		(min + resolvedMax) / 2,
+		resolvedMax
+	];
+	const resolvedStatus = status === "auto" ? value >= target ? "success" : "warning" : status;
+	const measureColor = STATUS_COLOR[resolvedStatus];
+	const thresholds = [
+		min,
+		...(ranges ?? []).filter((r) => r > min && r < resolvedMax).sort((a, b) => a - b),
+		resolvedMax
+	];
+	const zones = thresholds.slice(0, -1).map((from, i) => ({
+		from,
+		to: thresholds[i + 1],
+		color: BULLET_RANGE_PALETTE[Math.min(i, BULLET_RANGE_PALETTE.length - 1)]
+	}));
+	const ariaLabel = props["aria-label"] ?? `${valueFormatter(value)} of ${valueFormatter(target)} target — ${resolvedStatus === "success" ? "on track" : "behind"}`;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		role: "img",
+		"aria-label": ariaLabel,
+		className: cn("flex w-full flex-col gap-2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative w-full",
+			style: { height: layout.trackHeight },
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 overflow-hidden rounded-full",
+					style: { backgroundColor: BULLET_RANGE_PALETTE[0] },
+					children: zones.map((zone) => /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-y-0",
+						style: {
+							left: `${toPercent(zone.from, min, resolvedMax)}%`,
+							width: `${toPercent(zone.to, min, resolvedMax) - toPercent(zone.from, min, resolvedMax)}%`,
+							backgroundColor: zone.color
+						}
+					}, zone.from))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute left-0 top-1/2 rounded-full",
+					style: {
+						height: layout.measureHeight,
+						width: `${toPercent(value, min, resolvedMax)}%`,
+						backgroundColor: measureColor,
+						transform: "translateY(-50%)"
+					}
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-1/2 rounded-full bg-fg-primary",
+					style: {
+						height: layout.markerHeight,
+						width: layout.markerWidth,
+						left: `${toPercent(target, min, resolvedMax)}%`,
+						transform: "translate(-50%, -50%)"
+					}
+				})
+			]
+		}), resolvedTicks.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "relative h-4 w-full",
+			children: resolvedTicks.map((tick) => {
+				const pct = toPercent(tick, min, resolvedMax);
+				const transform = pct <= 0 ? "translateX(0)" : pct >= 100 ? "translateX(-100%)" : "translateX(-50%)";
+				return /* @__PURE__ */ jsx("span", {
+					className: cn("absolute top-0 whitespace-nowrap tabular-nums text-fg-caption-placeholder", layout.tickClass),
+					style: {
+						left: `${pct}%`,
+						transform
+					},
+					children: valueFormatter(tick)
+				}, tick);
+			})
+		})]
+	});
 }
-export {
-  BULLET_CHART_LAYOUT,
-  BULLET_RANGE_PALETTE,
-  BulletChart
-};
-//# sourceMappingURL=bullet-chart.js.map
+//#endregion
+export { BULLET_CHART_LAYOUT, BULLET_RANGE_PALETTE, BulletChart };

package/dist/button-BZIeyUw6.d.ts

@@ -0,0 +1,17 @@
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import { Button } from "@base-ui/react/button";
+//#region src/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "danger" | "ghost" | "glass-overlay" | "link-brand" | "link-neutral" | "primary" | "primary-outline" | "secondary" | "secondary-outline" | "tertiary" | "tertiary-outline" | "whatsapp" | null | undefined;
+  size?: "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button$1({ className, variant, size, isLoading, children, disabled, ...props }: Button.Props & VariantProps<typeof buttonVariants> & {
+  isLoading?: boolean;
+}): import("react").JSX.Element;
+type ButtonLinkProps = useRender.ComponentProps<"a"> & VariantProps<typeof buttonVariants> & {
+  disabled?: boolean;
+};
+declare function ButtonLink({ className, render, variant, size, disabled, onClick, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { ButtonLink as n, buttonVariants as r, Button$1 as t };

package/dist/button-group.d.ts

@@ -1,18 +1,15 @@
-import * as React$1 from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { useRender } from '@base-ui/react/use-render';
-import { VariantProps } from 'class-variance-authority';
-import { Separator } from './separator.js';
-import { ComponentSize } from './size-context.js';
-import '@base-ui/react/separator';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { Separator } from "./separator.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/button-group.d.ts
 declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
-    size?: ComponentSize;
-}): React$1.JSX.Element;
-declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React$1.JSX.Element;
-
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+  size?: ComponentSize;
+}): import("react").JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };