@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/table.js

@@ -1,170 +1,133 @@
 "use client";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/table.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
-function Table({
-  className,
-  containerClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "table-container",
-      className: cn(
-        "relative w-full overflow-x-auto rounded-xl border border-line bg-surface-overlay",
-        containerClassName
-      ),
-      children: /* @__PURE__ */ jsx(
-        "table",
-        {
-          "data-slot": "table",
-          className: cn("min-w-full caption-bottom", className),
-          ...props
-        }
-      )
-    }
-  );
+//#region src/table.tsx
+function getPinnedDividerClassName(pinnedSide) {
+	if (!pinnedSide) return;
+	return cn("after:pointer-events-none after:absolute after:inset-y-0 after:z-10 after:w-0.5 after:bg-line after:content-['']", pinnedSide === "left" && "after:right-0", pinnedSide === "right" && "after:left-0");
 }
-function TableHeader({
-  className,
-  sticky = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "thead",
-    {
-      "data-slot": "table-header",
-      className: cn(
-        "bg-surface-raised",
-        sticky && "sticky top-0 z-2 shadow-(--elevation-e2-shadow)",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* Outer card wrapper.
+*
+* Tokens: bg-canvas (container fill), border-line-subtle (container border).
+* Pass `containerClassName` to override scroll, sizing, or rounding for
+* individual call-sites (e.g. the data-table's max-height + rounded-[20px]).
+*/
+function Table({ className, containerClassName, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: cn("relative w-full overflow-x-auto rounded-2xl border border-line-subtle bg-canvas", containerClassName),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn("min-w-full caption-bottom", className),
+			...props
+		})
+	});
+}
+/**
+* Header band (thead).
+*
+* Token: bg-surface-raised (header fill).
+* Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.
+*/
+function TableHeader({ className, sticky = false, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("bg-surface-raised", sticky && "sticky top-0 z-2 shadow-(--elevation-e2-shadow)", className),
+		...props
+	});
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "tbody",
-    {
-      "data-slot": "table-body",
-      className: cn("[&_tr:last-child]:border-0", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
 }
+/**
+* Footer band (tfoot).
+*
+* Shares the same raised surface as the header.
+*/
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "tfoot",
-    {
-      "data-slot": "table-footer",
-      className: cn(
-        "border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
 }
+/**
+* Table row (tr).
+*
+* Token: border-line-subtle (row divider). The last body row has no border
+* via the [&_tr:last-child]:border-0 rule on TableBody.
+*/
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "tr",
-    {
-      "data-slot": "table-row",
-      className: cn(
-        "group border-b border-line-subtle transition-colors",
-        "hover:bg-surface has-aria-expanded:bg-surface",
-        "data-[state=selected]:bg-surface-brand-subtle",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("group border-b border-line-subtle bg-canvas transition-[background-color,filter]", "hover:bg-surface active:bg-surface-raised has-aria-expanded:bg-surface", "data-[state=selected]:bg-surface-brand-subtle data-[state=selected]:hover:bg-surface-brand-subtle data-[state=selected]:hover:brightness-95 data-[state=selected]:active:brightness-90", className),
+		...props
+	});
 }
-function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "th",
-    {
-      "data-slot": "table-head",
-      className: cn(
-        "h-11 px-5 py-3.5 text-left align-middle bg-surface-raised",
-        "text-gdt-capitalized font-bold uppercase tracking-wide text-fg-secondary",
-        "whitespace-nowrap has-[[role=checkbox]]:pr-0",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* Header cell (th).
+*
+* Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly
+* cover scrolling content), text-fg-secondary, text-gdt-sm semibold for the
+* table header style in Figma.
+*/
+function TableHead({ className, pinnedSide, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("relative h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "whitespace-nowrap has-[[role=checkbox]]:pr-0", getPinnedDividerClassName(pinnedSide), className),
+		...props
+	});
 }
-function TableCell({
-  className,
-  pinned = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "td",
-    {
-      "data-slot": "table-cell",
-      className: cn(
-        "px-5 py-3.5 align-middle text-gdt-sm text-fg-primary",
-        "whitespace-nowrap",
-        pinned && "bg-surface-raised group-hover:bg-surface group-data-[state=selected]:bg-surface-brand-subtle",
-        className
-      ),
-      ...props
-    }
-  );
+/**
+* Standard body cell (td).
+*
+* Token: text-fg-primary (body cell text), text-gdt-sm.
+* Pass `pinned` when the column is sticky. Pinned cells get an opaque
+* bg-canvas cover so scrolling content doesn't bleed through. Pass
+* `pinnedSide` to draw the 2px sticky-column divider from the Figma spec.
+* Non-pinned cells are left transparent so the parent row's surface shows through.
+*/
+function TableCell({ className, pinned = false, pinnedSide, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("relative h-14 px-6 py-4 align-middle text-gdt-sm text-fg-primary", "whitespace-nowrap", pinned && "bg-canvas transition-[background-color,filter] group-hover:bg-surface group-active:bg-surface-raised group-data-[state=selected]:bg-surface-brand-subtle group-data-[state=selected]:group-hover:bg-surface-brand-subtle group-data-[state=selected]:group-hover:brightness-95 group-data-[state=selected]:group-active:brightness-90", getPinnedDividerClassName(pinnedSide), className),
+		...props
+	});
 }
+/**
+* Formatted cell title, for use within a TableCell
+*/
 function TableCellTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "table-cell-title",
-      className: cn("text-gdt-sm font-semibold", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "table-cell-title",
+		className: cn("text-gdt-sm font-semibold", className),
+		...props
+	});
 }
-function TableCellCaption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "table-cell-caption",
-      className: cn("text-gdt-xs text-fg-secondary", className),
-      ...props
-    }
-  );
+/**
+* Formatted cell caption, for use within a TableCell. Usually for auxiliary info below the title, uses the secondary text token and smaller size.
+*/
+function TableCellCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "table-cell-caption",
+		className: cn("text-gdt-xs text-fg-secondary", className),
+		...props
+	});
 }
-function TableCaption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "caption",
-    {
-      "data-slot": "table-caption",
-      className: cn("mt-4 text-gdt-sm text-fg-secondary", className),
-      ...props
-    }
-  );
+/**
+* Caption — rendered below the table, uses secondary text token.
+*/
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-gdt-sm text-fg-secondary", className),
+		...props
+	});
 }
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableCellCaption,
-  TableCellTitle,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow
-};
-//# sourceMappingURL=table.js.map
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableCellCaption, TableCellTitle, TableFooter, TableHead, TableHeader, TableRow };

package/dist/tabs.d.ts

@@ -1,18 +1,36 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ComponentPropsWithoutRef } from "react";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/tabs.d.ts
 type TabsListVariant = "default" | "line" | "secondary" | "underline";
-declare function Tabs({ className, orientation, ...props }: Tabs$1.Root.Props): React.JSX.Element;
+declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Props & {
+  size?: ComponentSize;
+}): import("react").JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "secondary" | "underline" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  variant?: "secondary" | "underline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, children, ...props }: Tabs$1.List.Props & {
-    variant?: TabsListVariant;
-}): React.JSX.Element;
-declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): React.JSX.Element;
-declare function TabsCount({ className, ...props }: ComponentPropsWithoutRef<"span">): React.JSX.Element;
-declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): React.JSX.Element;
-
-export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants };
+  variant?: TabsListVariant;
+}): import("react").JSX.Element;
+/**
+ * Trigger styling, exported so recipes (e.g. an overflow "More" button that
+ * isn't a real tab) can render the same look. Reads `variant` off the parent
+ * `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
+ * sync wherever it lives inside a `Tabs` tree.
+ */
+declare const tabsTriggerClassName: string;
+declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): import("react").JSX.Element;
+type TabsCountProps = ComponentPropsWithoutRef<"span"> & {
+  /** Raw value to render. Takes precedence over `children` when provided. */
+  count?: number;
+  /** Shorten large values, e.g. `2200` → `2.2K`, `2_000_000` → `2M`. */
+  abbreviate?: boolean;
+  /** Cap the display, e.g. `max={99}` renders `100` as `99+`. */
+  max?: number;
+  /** Render a pulsing placeholder while the count is being fetched. */
+  loading?: boolean;
+};
+declare function TabsCount({ className, count, abbreviate, max, loading, children, ...props }: TabsCountProps): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): import("react").JSX.Element;
+//#endregion
+export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };

package/dist/tabs.js

@@ -1,19 +1,111 @@
 "use client";
-import {
-  Tabs,
-  TabsContent,
-  TabsCount,
-  TabsList,
-  TabsTrigger,
-  tabsListVariants
-} from "./chunk-EFSOSSIC.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Tabs,
-  TabsContent,
-  TabsCount,
-  TabsList,
-  TabsTrigger,
-  tabsListVariants
-};
-//# sourceMappingURL=tabs.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/tabs.tsx
+/**
+* Keep friendly aliases in the public API, but collapse to the two concrete
+* looks the design system ships: `underline` (Primary) and `secondary` (Pill).
+*/
+function resolveTabsListVariant(variant) {
+	return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
+}
+function Tabs({ className, orientation = "horizontal", size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		"data-size": resolvedSize,
+		className: cn("group/tabs flex gap-3 data-[orientation=horizontal]:flex-col", className),
+		...props
+	});
+}
+const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary", "group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle"), {
+	variants: { variant: {
+		underline: "rounded-none bg-transparent p-0",
+		secondary: "rounded-4xl bg-transparent p-0"
+	} },
+	defaultVariants: { variant: "underline" }
+});
+function TabsList({ className, variant = "underline", children, ...props }) {
+	const resolvedVariant = resolveTabsListVariant(variant);
+	return /* @__PURE__ */ jsxs(Tabs$1.List, {
+		"data-slot": "tabs-list",
+		"data-variant": resolvedVariant,
+		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0") })]
+	});
+}
+/**
+* Trigger styling, exported so recipes (e.g. an overflow "More" button that
+* isn't a real tab) can render the same look. Reads `variant` off the parent
+* `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
+* sync wherever it lives inside a `Tabs` tree.
+*/
+const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs:text-gdt-xs group-data-[size=sm]/tabs:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs:text-gdt-sm group-data-[size=md]/tabs:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs:text-gdt-md group-data-[size=lg]/tabs:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs:px-3 group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs:py-1", "group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs:px-3.5 group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs:py-1.5", "group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs:px-4 group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs:px-3 group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs:py-1", "group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs:px-3.5 group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs:px-4 group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs:py-2", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
+function TabsTrigger({ className, nativeButton = true, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		"data-slot": "tabs-trigger",
+		nativeButton,
+		className: cn(tabsTriggerClassName, className),
+		...props
+	});
+}
+/**
+* Compact a raw number into a short chip label — 2200 → "2.2K", 2_000_000 →
+* "2M". Keeps one decimal place and trims a trailing `.0`.
+*/
+function abbreviateCount(value) {
+	const abs = Math.abs(value);
+	if (abs < 1e3) return String(value);
+	const unit = [
+		{
+			value: 1e9,
+			suffix: "B"
+		},
+		{
+			value: 1e6,
+			suffix: "M"
+		},
+		{
+			value: 1e3,
+			suffix: "K"
+		}
+	].find((candidate) => abs >= candidate.value);
+	if (!unit) return String(value);
+	return `${Math.round(value / unit.value * 10) / 10}${unit.suffix}`;
+}
+function formatTabsCount(value, { abbreviate, max }) {
+	if (max !== void 0 && value > max) return `${abbreviate ? abbreviateCount(max) : max}+`;
+	return abbreviate ? abbreviateCount(value) : String(value);
+}
+function TabsCount({ className, count, abbreviate, max, loading, children, ...props }) {
+	const content = loading ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "invisible",
+		children: "00"
+	}) : count !== void 0 ? formatTabsCount(count, {
+		abbreviate,
+		max
+	}) : children;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tabs-count",
+		"data-loading": loading || void 0,
+		"aria-busy": loading || void 0,
+		className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs:h-4 group-data-[size=sm]/tabs:min-w-4 group-data-[size=sm]/tabs:px-1 group-data-[size=sm]/tabs:text-[10px]", "group-data-[size=md]/tabs:h-5 group-data-[size=md]/tabs:min-w-5 group-data-[size=md]/tabs:px-1 group-data-[size=md]/tabs:text-[11px]", "group-data-[size=lg]/tabs:h-5 group-data-[size=lg]/tabs:min-w-5 group-data-[size=lg]/tabs:px-1.5 group-data-[size=lg]/tabs:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse", className),
+		...props,
+		children: content
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("flex-1 text-sm outline-none", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants, tabsTriggerClassName };

package/dist/tag.d.ts

@@ -1,26 +1,24 @@
-import * as React from 'react';
-import { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
+//#region src/tag.d.ts
 declare const tagVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    border?: boolean | null | undefined;
-    clickable?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+  border?: boolean | null | undefined;
+  clickable?: boolean | null | undefined;
+  disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TagProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type"> {
-    label: string;
-    leadingIcon?: ReactNode;
-    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
-    closeButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type">;
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    size?: ComponentSize;
-    shape?: "full" | "box";
-    border?: boolean;
-    clickable?: boolean;
-    disabled?: boolean;
+  label: string;
+  leadingIcon?: ReactNode;
+  onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+  closeButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick" | "type">;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  size?: ComponentSize;
+  shape?: "full" | "box";
+  border?: boolean;
+  clickable?: boolean;
+  disabled?: boolean;
 }
-declare function Tag({ label, leadingIcon, onClose, closeButtonProps, onClick, size, shape, border, clickable, disabled, className, ...props }: TagProps): React.JSX.Element;
-
-export { Tag, type TagProps, tagVariants };
+declare function Tag({ label, leadingIcon, onClose, closeButtonProps, onClick, size, shape, border, clickable, disabled, className, ...props }: TagProps): import("react").JSX.Element;
+//#endregion
+export { Tag, type TagProps, tagVariants };