@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/auth-layout.js

@@ -1,304 +1,153 @@
-import {
-  GiddaaLogo
-} from "./chunk-DMNOXRRW.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/auth-layout.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { GiddaaLogo } from "./logo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth-layout.tsx
 function AuthLayout({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "main",
-    {
-      "data-slot": "auth-layout",
-      className: cn(
-        "grid min-h-svh bg-surface p-gdt-lg text-fg-primary lg:grid-cols-[minmax(0,1fr)_minmax(30rem,1fr)] lg:bg-surface-brand lg:p-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AuthLayoutBrandPanel({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      "data-slot": "auth-layout-brand-panel",
-      className: cn(
-        "relative hidden min-h-svh overflow-hidden bg-surface-brand px-gdt-5xl py-gdt-5xl text-fg-on-brand lg:flex lg:flex-col",
-        "before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_20%_20%,rgb(255_255_255_/_0.12),transparent_24rem),radial-gradient(circle_at_80%_70%,rgb(0_0_0_/_0.14),transparent_28rem)] before:content-['']",
-        "after:absolute after:inset-0 after:opacity-18 after:[background-image:radial-gradient(currentColor_0.7px,transparent_0.7px)] after:[background-size:7px_7px] after:content-['']",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "relative z-10 flex min-h-0 flex-1 flex-col", children })
-    }
-  );
-}
-function AuthLayoutBrandLogo({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-brand-logo",
-      className: cn("mb-gdt-3xl flex items-center text-fg-on-brand", className),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-35" })
-    }
-  );
-}
-function AuthLayoutBrandContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-brand-content",
-      className: cn("max-w-[31rem]", className),
-      ...props
-    }
-  );
-}
-function AuthLayoutBrandTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      "data-slot": "auth-layout-brand-title",
-      className: cn("text-gdt-h1 text-balance", className),
-      ...props
-    }
-  );
-}
-function AuthLayoutBrandDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "auth-layout-brand-description",
-      className: cn("mt-gdt-lg text-gdt-md text-pretty opacity-90", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "auth-layout",
+		className: cn("grid min-h-svh bg-surface p-gdt-lg text-fg-primary lg:grid-cols-[minmax(0,1fr)_minmax(30rem,1fr)] lg:bg-surface-brand lg:p-0", className),
+		...props
+	});
+}
+function AuthLayoutBrandPanel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "auth-layout-brand-panel",
+		className: cn("relative hidden min-h-svh overflow-hidden bg-surface-brand px-gdt-5xl py-gdt-5xl text-fg-on-brand lg:flex lg:flex-col", "before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_20%_20%,rgb(255_255_255_/_0.12),transparent_24rem),radial-gradient(circle_at_80%_70%,rgb(0_0_0_/_0.14),transparent_28rem)] before:content-['']", "after:absolute after:inset-0 after:opacity-18 after:[background-image:radial-gradient(currentColor_0.7px,transparent_0.7px)] after:[background-size:7px_7px] after:content-['']", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative z-10 flex min-h-0 flex-1 flex-col",
+			children
+		})
+	});
+}
+function AuthLayoutBrandLogo({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-brand-logo",
+		className: cn("mb-gdt-3xl flex items-center text-fg-on-brand", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-35" })
+	});
+}
+function AuthLayoutBrandContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-brand-content",
+		className: cn("max-w-[31rem]", className),
+		...props
+	});
+}
+function AuthLayoutBrandTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-slot": "auth-layout-brand-title",
+		className: cn("text-gdt-h1 text-balance", className),
+		...props
+	});
+}
+function AuthLayoutBrandDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "auth-layout-brand-description",
+		className: cn("mt-gdt-lg text-gdt-md text-pretty opacity-90", className),
+		...props
+	});
 }
 function AuthLayoutMedia({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-media",
-      className: cn(
-        "mt-auto grid h-58 grid-cols-3 items-end gap-gdt-lg pt-gdt-5xl",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AuthLayoutMediaItem({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-media-item",
-      className: cn(
-        "min-h-32 overflow-hidden rounded-t-4xl bg-surface-glass-overlay-container-1 shadow-3 odd:h-36 even:h-52",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AuthLayoutMain({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      "data-slot": "auth-layout-main",
-      className: cn(
-        "flex min-h-[calc(100svh-2rem)] items-stretch justify-center bg-canvas lg:min-h-svh lg:rounded-l-[5rem]",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-media",
+		className: cn("mt-auto grid h-58 grid-cols-3 items-end gap-gdt-lg pt-gdt-5xl", className),
+		...props
+	});
+}
+function AuthLayoutMediaItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-media-item",
+		className: cn("min-h-32 overflow-hidden rounded-t-4xl bg-surface-glass-overlay-container-1 shadow-3 odd:h-36 even:h-52", className),
+		...props
+	});
+}
+function AuthLayoutMain({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "auth-layout-main",
+		className: cn("flex min-h-[calc(100svh-2rem)] items-stretch justify-center bg-canvas lg:min-h-svh lg:rounded-l-[5rem]", className),
+		...props
+	});
 }
 function AuthLayoutCard({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-card",
-      className: cn(
-        "flex w-full max-w-[26.5rem] flex-col border border-line-subtle bg-canvas px-gdt-lg py-gdt-2xl sm:px-gdt-2xl lg:max-w-[32rem] lg:border-0 lg:px-0 lg:py-gdt-5xl",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AuthLayoutTopAction({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-top-action",
-      className: cn("mb-gdt-4xl text-gdt-xs text-fg-secondary", className),
-      ...props
-    }
-  );
-}
-function AuthLayoutMobileLogo({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-mobile-logo",
-      className: cn(
-        "mb-gdt-xl flex items-center text-fg-brand lg:hidden",
-        className
-      ),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-30" })
-    }
-  );
-}
-function AuthLayoutHeader({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      "data-slot": "auth-layout-header",
-      className: cn("mb-gdt-xl flex flex-col gap-gdt-sm", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-card",
+		className: cn("flex w-full max-w-[26.5rem] flex-col border border-line-subtle bg-canvas px-gdt-lg py-gdt-2xl sm:px-gdt-2xl lg:max-w-[32rem] lg:border-0 lg:px-0 lg:py-gdt-5xl", className),
+		...props
+	});
+}
+function AuthLayoutTopAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-top-action",
+		className: cn("mb-gdt-4xl text-gdt-xs text-fg-secondary", className),
+		...props
+	});
+}
+function AuthLayoutMobileLogo({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-mobile-logo",
+		className: cn("mb-gdt-xl flex items-center text-fg-brand lg:hidden", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(GiddaaLogo, { className: "h-auto w-30" })
+	});
+}
+function AuthLayoutHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "auth-layout-header",
+		className: cn("mb-gdt-xl flex flex-col gap-gdt-sm", className),
+		...props
+	});
 }
 function AuthLayoutTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "h1",
-    {
-      "data-slot": "auth-layout-title",
-      className: cn("text-gdt-h2 text-fg-primary", className),
-      ...props
-    }
-  );
-}
-function AuthLayoutDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "auth-layout-description",
-      className: cn("text-gdt-sm text-fg-secondary", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("h1", {
+		"data-slot": "auth-layout-title",
+		className: cn("text-gdt-h2 text-fg-primary", className),
+		...props
+	});
+}
+function AuthLayoutDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "auth-layout-description",
+		className: cn("text-gdt-sm text-fg-secondary", className),
+		...props
+	});
 }
 function AuthLayoutForm({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "form",
-    {
-      "data-slot": "auth-layout-form",
-      className: cn("flex flex-col gap-gdt-lg", className),
-      ...props
-    }
-  );
-}
-function AuthLayoutActions({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "auth-layout-actions",
-      className: cn("flex flex-col gap-gdt-md", className),
-      ...props
-    }
-  );
-}
-function AuthLayoutDivider({
-  children = "Or continue with",
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "auth-layout-divider",
-      className: cn(
-        "relative flex items-center py-gdt-sm text-gdt-sm text-fg-secondary",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-line-subtle" }),
-        /* @__PURE__ */ jsx("span", { className: "px-gdt-md", children }),
-        /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-line-subtle" })
-      ]
-    }
-  );
-}
-function AuthLayoutFooter({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "footer",
-    {
-      "data-slot": "auth-layout-footer",
-      className: cn(
-        "mt-auto flex items-center justify-between gap-gdt-lg pt-gdt-5xl text-gdt-subtext text-fg-secondary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-export {
-  AuthLayout,
-  AuthLayoutActions,
-  AuthLayoutBrandContent,
-  AuthLayoutBrandDescription,
-  AuthLayoutBrandLogo,
-  AuthLayoutBrandPanel,
-  AuthLayoutBrandTitle,
-  AuthLayoutCard,
-  AuthLayoutDescription,
-  AuthLayoutDivider,
-  AuthLayoutFooter,
-  AuthLayoutForm,
-  AuthLayoutHeader,
-  AuthLayoutMain,
-  AuthLayoutMedia,
-  AuthLayoutMediaItem,
-  AuthLayoutMobileLogo,
-  AuthLayoutTitle,
-  AuthLayoutTopAction
-};
-//# sourceMappingURL=auth-layout.js.map
+	return /* @__PURE__ */ jsx("form", {
+		"data-slot": "auth-layout-form",
+		className: cn("flex flex-col gap-gdt-lg", className),
+		...props
+	});
+}
+function AuthLayoutActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "auth-layout-actions",
+		className: cn("flex flex-col gap-gdt-md", className),
+		...props
+	});
+}
+function AuthLayoutDivider({ children = "Or continue with", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "auth-layout-divider",
+		className: cn("relative flex items-center py-gdt-sm text-gdt-sm text-fg-secondary", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-line-subtle" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "px-gdt-md",
+				children
+			}),
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-line-subtle" })
+		]
+	});
+}
+function AuthLayoutFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		"data-slot": "auth-layout-footer",
+		className: cn("mt-auto flex items-center justify-between gap-gdt-lg pt-gdt-5xl text-gdt-subtext text-fg-secondary", className),
+		...props
+	});
+}
+//#endregion
+export { AuthLayout, AuthLayoutActions, AuthLayoutBrandContent, AuthLayoutBrandDescription, AuthLayoutBrandLogo, AuthLayoutBrandPanel, AuthLayoutBrandTitle, AuthLayoutCard, AuthLayoutDescription, AuthLayoutDivider, AuthLayoutFooter, AuthLayoutForm, AuthLayoutHeader, AuthLayoutMain, AuthLayoutMedia, AuthLayoutMediaItem, AuthLayoutMobileLogo, AuthLayoutTitle, AuthLayoutTopAction };

package/dist/avatar.d.ts

@@ -1,14 +1,14 @@
-import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
-import * as React from 'react';
-
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import * as React from "react";
+//#region src/avatar.d.ts
 type AvatarSize = "sm" | "md" | "lg";
 declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
-    size?: AvatarSize;
+  size?: AvatarSize;
 }): React.JSX.Element;
 declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): React.JSX.Element;
 declare function AvatarStatus({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-
-export { Avatar, AvatarStatus as AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarStatus };
+//#endregion
+export { Avatar, AvatarStatus as AvatarBadge, AvatarStatus, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/avatar.js

@@ -1,20 +1,50 @@
 "use client";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarImage,
-  AvatarStatus
-} from "./chunk-QKAQZ2GU.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Avatar,
-  AvatarStatus as AvatarBadge,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarImage,
-  AvatarStatus
-};
-//# sourceMappingURL=avatar.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/avatar.tsx
+function Avatar({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex shrink-0 rounded-full select-none bg-surface-brand", size === "sm" && "size-8", size === "md" && "size-10", size === "lg" && "size-14", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full", "bg-surface-brand-subtle text-fg-brand font-semibold", "group-data-[size=sm]/avatar:text-xs", "group-data-[size=md]/avatar:text-sm", "group-data-[size=lg]/avatar:text-base", className),
+		...props
+	});
+}
+function AvatarStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-status",
+		className: cn("absolute right-0 bottom-0 z-10 rounded-full bg-status-success ring-2 ring-canvas", "group-data-[size=sm]/avatar:size-2", "group-data-[size=md]/avatar:size-2.5", "group-data-[size=lg]/avatar:size-3.5", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-3", "*:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-canvas", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("relative flex shrink-0 items-center justify-center rounded-full", "bg-action-tertiary text-fg-secondary text-xs font-semibold", "ring-2 ring-canvas", "size-10", "group-has-data-[size=sm]/avatar-group:size-8", "group-has-data-[size=lg]/avatar-group:size-14", className),
+		...props
+	});
+}
+//#endregion
+export { Avatar, AvatarStatus as AvatarBadge, AvatarStatus, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/badge.d.ts

@@ -1,15 +1,13 @@
-import * as React 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 { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-    variant?: "success" | "info" | "warning" | "accent" | "default" | "danger" | "secondary" | "destructive" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    shape?: "box" | "round" | null | undefined;
-    border?: boolean | null | undefined;
-    iconOnly?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Badge({ className, variant, size, shape, border, iconOnly, render, children, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-
-export { Badge, badgeVariants };
+  variant?: "accent" | "danger" | "default" | "destructive" | "info" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
+  shape?: "box" | "round" | null | undefined;
+  border?: boolean | null | undefined;
+  iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, size, shape, border, iconOnly, render, children, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -1,11 +1,71 @@
-import {
-  Badge,
-  badgeVariants
-} from "./chunk-XG47P6D4.js";
-import "./chunk-HL3ZSYES.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  Badge,
-  badgeVariants
-};
-//# sourceMappingURL=badge.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/badge.tsx
+const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden border font-bold leading-none whitespace-nowrap transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:text-fg-danger [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-current", {
+	variants: {
+		variant: {
+			default: "border-line bg-surface-raised text-fg-secondary",
+			accent: "border-transparent bg-surface-accent text-fg-on-accent",
+			info: "border-status-info/40 bg-surface-info-subtle text-status-info",
+			success: "border-status-success/40 bg-surface-brand-subtle text-status-success",
+			warning: "border-status-warning/40 bg-surface-accent-subtle text-status-warning",
+			danger: "border-line-danger bg-surface-danger-subtle text-status-danger",
+			secondary: "border-status-info/40 bg-surface-info-subtle text-status-info",
+			destructive: "border-line-danger bg-surface-danger-subtle text-status-danger",
+			outline: "border-line bg-transparent text-fg-secondary"
+		},
+		size: {
+			sm: "min-h-7 min-w-7 gap-1 px-2.5 py-1 text-gdt-xs [&>svg]:size-3",
+			md: "min-h-9 min-w-9 gap-1.5 px-3 py-1.5 text-gdt-sm [&>svg]:size-3.5",
+			lg: "min-h-10.5 min-w-10.5 gap-2 px-4 py-2 text-gdt-md [&>svg]:size-4"
+		},
+		shape: {
+			round: "rounded-4xl",
+			box: "rounded-lg"
+		},
+		border: {
+			true: "",
+			false: "border-transparent"
+		},
+		iconOnly: {
+			true: "py-0 px-0",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		shape: "round",
+		border: true
+	}
+});
+function Badge({ className, variant = "default", size, shape = "round", border = true, iconOnly = false, render, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			className: cn(badgeVariants({
+				variant,
+				size: resolvedSize,
+				shape,
+				border,
+				iconOnly
+			}), className),
+			children
+		}, props),
+		render,
+		state: {
+			slot: "badge",
+			variant,
+			size: resolvedSize,
+			shape,
+			border,
+			iconOnly
+		}
+	});
+}
+//#endregion
+export { Badge, badgeVariants };