@alneas/appkit-react 0.2.0 → 0.3.0

package/dist/ui/components/ui/avatar.d.cts

@@ -1,3 +1,4 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from 'react';
 /**
  * Coordinates avatar image/fallback rendering and size styling.
@@ -14,12 +15,18 @@ import * as React from 'react';
  * }
  * ```
  */
-declare const Avatar: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarRootProps & {
+declare function Avatar({ ref, className, size, ...props }: React.PropsWithoutRef<AvatarPrimitive.Root.Props & {
     /**
      * Visual size preset; defaults to default unless the owning component states otherwise.
      */
-    size?: "default" | "sm" | "lg";
-}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
+    size?: 'default' | 'sm' | 'lg';
+}> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string | undefined;
+}
 /**
  * Renders the avatar image using Base UI loading behavior.
  * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
@@ -35,7 +42,10 @@ declare const Avatar: React.ForwardRefExoticComponent<Omit<import('@base-ui/reac
  * }
  * ```
  */
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare function AvatarImage({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>): React.JSX.Element;
+declare namespace AvatarImage {
+    var displayName: string | undefined;
+}
 /**
  * Renders replacement avatar content when the image is unavailable.
  * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
@@ -51,7 +61,10 @@ declare const AvatarImage: React.ForwardRefExoticComponent<Omit<import('@base-ui
  * }
  * ```
  */
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare function AvatarFallback({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace AvatarFallback {
+    var displayName: string | undefined;
+}
 /**
  * Positions a status indicator over the lower-right corner of an avatar.
  * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.

package/dist/ui/components/ui/avatar.d.ts

@@ -1,3 +1,4 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import * as React from 'react';
 /**
  * Coordinates avatar image/fallback rendering and size styling.
@@ -14,12 +15,18 @@ import * as React from 'react';
  * }
  * ```
  */
-declare const Avatar: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarRootProps & {
+declare function Avatar({ ref, className, size, ...props }: React.PropsWithoutRef<AvatarPrimitive.Root.Props & {
     /**
      * Visual size preset; defaults to default unless the owning component states otherwise.
      */
-    size?: "default" | "sm" | "lg";
-}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
+    size?: 'default' | 'sm' | 'lg';
+}> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string | undefined;
+}
 /**
  * Renders the avatar image using Base UI loading behavior.
  * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
@@ -35,7 +42,10 @@ declare const Avatar: React.ForwardRefExoticComponent<Omit<import('@base-ui/reac
  * }
  * ```
  */
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare function AvatarImage({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>): React.JSX.Element;
+declare namespace AvatarImage {
+    var displayName: string | undefined;
+}
 /**
  * Renders replacement avatar content when the image is unavailable.
  * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
@@ -51,7 +61,10 @@ declare const AvatarImage: React.ForwardRefExoticComponent<Omit<import('@base-ui
  * }
  * ```
  */
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare function AvatarFallback({ ref, className, ...props }: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace AvatarFallback {
+    var displayName: string | undefined;
+}
 /**
  * Positions a status indicator over the lower-right corner of an avatar.
  * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.

package/dist/ui/components/ui/avatar.js

@@ -2,46 +2,52 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
-import { Avatar as r } from "@base-ui/react/avatar";
+import "react";
+import { Avatar as n } from "@base-ui/react/avatar";
 //#region src/ui/components/ui/avatar.tsx
-var i = n.forwardRef(({ className: n, size: i = "default", ...a }, o) => /* @__PURE__ */ t(r.Root, {
-	ref: o,
-	"data-slot": "avatar",
-	"data-size": i,
-	className: e("size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten", n),
-	...a
-}));
-i.displayName = r.Root.displayName;
-var a = n.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ t(r.Image, {
-	ref: a,
-	"data-slot": "avatar-image",
-	className: e("rounded-full aspect-square size-full object-cover", n),
-	...i
-}));
-a.displayName = r.Image.displayName;
-var o = n.forwardRef(({ className: n, ...i }, a) => /* @__PURE__ */ t(r.Fallback, {
-	ref: a,
-	"data-slot": "avatar-fallback",
-	className: e("bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", n),
-	...i
-}));
-o.displayName = r.Fallback.displayName;
-function s({ className: n, ...r }) {
+function r({ ref: r, className: i, size: a = "default", ...o }) {
+	return /* @__PURE__ */ t(n.Root, {
+		ref: r,
+		"data-slot": "avatar",
+		"data-size": a,
+		className: e("size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten", i),
+		...o
+	});
+}
+r.displayName = n.Root.displayName;
+function i({ ref: r, className: i, ...a }) {
+	return /* @__PURE__ */ t(n.Image, {
+		ref: r,
+		"data-slot": "avatar-image",
+		className: e("rounded-full aspect-square size-full object-cover", i),
+		...a
+	});
+}
+i.displayName = n.Image.displayName;
+function a({ ref: r, className: i, ...a }) {
+	return /* @__PURE__ */ t(n.Fallback, {
+		ref: r,
+		"data-slot": "avatar-fallback",
+		className: e("bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", i),
+		...a
+	});
+}
+a.displayName = n.Fallback.displayName;
+function o({ className: n, ...r }) {
 	return /* @__PURE__ */ t("span", {
 		"data-slot": "avatar-badge",
 		className: e("bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", n),
 		...r
 	});
 }
-function c({ className: n, ...r }) {
+function s({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "avatar-group",
 		className: e("*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", n),
 		...r
 	});
 }
-function l({ className: n, ...r }) {
+function c({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "avatar-group-count",
 		className: e("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", n),
@@ -49,6 +55,6 @@ function l({ className: n, ...r }) {
 	});
 }
 //#endregion
-export { i as Avatar, s as AvatarBadge, o as AvatarFallback, c as AvatarGroup, l as AvatarGroupCount, a as AvatarImage };
+export { r as Avatar, o as AvatarBadge, a as AvatarFallback, s as AvatarGroup, c as AvatarGroupCount, i as AvatarImage };
 
 //# sourceMappingURL=avatar.js.map

package/dist/ui/components/ui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["React","AvatarPrimitive","React$1","Avatar$1","Avatar","props","size","cn","className","AvatarImage","AvatarFallback","AvatarBadge","AvatarGroup","AvatarGroupCount"],"sources":["../../../../src/ui/components/ui/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates avatar image/fallback rendering and size styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered Avatar composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nconst Avatar = React.forwardRef<\n  HTMLSpanElement,\n  AvatarPrimitive.Root.Props & { /**\n * Visual size preset; defaults to default unless the owning component states otherwise.\n */\n  /**\n   * Visual size preset; defaults to default unless the owning component states otherwise.\n   */\n  size?: 'default' | 'sm' | 'lg' }\n>(({ className, size = 'default', ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    data-slot='avatar'\n    data-size={size}\n    className={cn(\n      'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',\n      className,\n    )}\n    {...props}\n  />\n));\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\n/**\n * Renders the avatar image using Base UI loading behavior.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarImage composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nconst AvatarImage = React.forwardRef<HTMLImageElement, AvatarPrimitive.Image.Props>(\n  ({ className, ...props }, ref) => (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot='avatar-image'\n      className={cn('rounded-full aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  ),\n);\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\n/**\n * Renders replacement avatar content when the image is unavailable.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarFallback composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nconst AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarPrimitive.Fallback.Props>(\n  ({ className, ...props }, ref) => (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot='avatar-fallback'\n      className={cn(\n        'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\n/**\n * Positions a status indicator over the lower-right corner of an avatar.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarBadge composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='avatar-badge'\n      className={cn(\n        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Overlaps adjacent avatars with matching background rings.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='avatar-group'\n      className={cn(\n        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles caller-provided overflow text after a group of avatars.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarGroupCount composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='avatar-group-count'\n      className={cn(\n        'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };\n"],"mappings":";;;;;;;AAsBA,IAAMI,IAASJ,EAAM,YASlB,EAAE,cAAW,UAAO,WAAW,GAAGK,KAAS,MAC5C,kBAACJ,EAAgB,MAAjB;CACO;CACL,aAAU;CACV,aAAWK;CACX,WAAWC,EACT,yPACAC,CACF;CACA,GAAIH;AACL,CAAA,CACF;AACD,EAAO,cAAcJ,EAAgB,KAAK;AAiB1C,IAAMQ,IAAcT,EAAM,YACvB,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAgB,OAAjB;CACO;CACL,aAAU;CACV,WAAWM,EAAG,qDAAqDC,CAAS;CAC5E,GAAIH;AACL,CAAA,CAEL;AACA,EAAY,cAAcJ,EAAgB,MAAM;AAiBhD,IAAMS,IAAiBV,EAAM,YAC1B,EAAE,cAAW,GAAGK,KAAS,MACxB,kBAACJ,EAAgB,UAAjB;CACO;CACL,aAAU;CACV,WAAWM,EACT,sIACAC,CACF;CACA,GAAIH;AACL,CAAA,CAEL;AACA,EAAe,cAAcJ,EAAgB,SAAS;AAiBtD,SAASU,EAAY,EAAE,cAAW,GAAGN,KAAuC;CAC1E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAWE,EACT,4KACA,iFACA,6FACA,iFACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASO,EAAY,EAAE,cAAW,GAAGP,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,uGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASQ,EAAiB,EAAE,cAAW,GAAGR,KAAsC;CAC9E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,4VACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL"}
+{"version":3,"file":"avatar.js","names":["AvatarPrimitive","Avatar$1","Avatar","props","size","cn","className","AvatarImage","AvatarFallback","AvatarBadge","AvatarGroup","AvatarGroupCount"],"sources":["../../../../src/ui/components/ui/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates avatar image/fallback rendering and size styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered Avatar composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction Avatar({\n  ref,\n  className,\n  size = 'default',\n  ...props\n}: React.PropsWithoutRef<\n  AvatarPrimitive.Root.Props & {\n    /**\n     * Visual size preset; defaults to default unless the owning component states otherwise.\n     */\n    /**\n     * Visual size preset; defaults to default unless the owning component states otherwise.\n     */\n    size?: 'default' | 'sm' | 'lg';\n  }\n> &\n  React.RefAttributes<HTMLSpanElement>) {\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot='avatar'\n      data-size={size}\n      className={cn(\n        'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\n/**\n * Renders the avatar image using Base UI loading behavior.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarImage composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarImage({\n  ref,\n  className,\n  ...props\n}: React.PropsWithoutRef<AvatarPrimitive.Image.Props> & React.RefAttributes<HTMLImageElement>) {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot='avatar-image'\n      className={cn('rounded-full aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n}\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\n/**\n * Renders replacement avatar content when the image is unavailable.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarFallback composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarFallback({\n  ref,\n  className,\n  ...props\n}: React.PropsWithoutRef<AvatarPrimitive.Fallback.Props> & React.RefAttributes<HTMLSpanElement>) {\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot='avatar-fallback'\n      className={cn(\n        'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\n/**\n * Positions a status indicator over the lower-right corner of an avatar.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarBadge composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='avatar-badge'\n      className={cn(\n        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Overlaps adjacent avatars with matching background rings.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='avatar-group'\n      className={cn(\n        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles caller-provided overflow text after a group of avatars.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AvatarGroupCount composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place Image/Fallback/Badge inside Avatar. size defaults to default (size-8), with sm size-6 and lg size-10. AvatarGroupCount renders supplied children and does not calculate overflow or hide avatars. Supply meaningful image alt text.\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AvatarGroup><Avatar><AvatarImage src=\"/avatar.png\" alt=\"Ada\" /><AvatarFallback>AD</AvatarFallback><AvatarBadge aria-label=\"Online\" /></Avatar><AvatarGroupCount>+2</AvatarGroupCount></AvatarGroup>);\n * }\n * ```\n */\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='avatar-group-count'\n      className={cn(\n        'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };\n"],"mappings":";;;;;;;AAsBA,SAASE,EAAO,EACd,QACA,cACA,UAAO,WACP,GAAGC,KAYmC;CACtC,OACE,kBAACH,EAAgB,MAAjB;EACO;EACL,aAAU;EACV,aAAWI;EACX,WAAWC,EACT,yPACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AACA,EAAO,cAAcH,EAAgB,KAAK;AAiB1C,SAASO,EAAY,EACnB,QACA,cACA,GAAGJ,KAC0F;CAC7F,OACE,kBAACH,EAAgB,OAAjB;EACO;EACL,aAAU;EACV,WAAWK,EAAG,qDAAqDC,CAAS;EAC5E,GAAIH;CACL,CAAA;AAEL;AACA,EAAY,cAAcH,EAAgB,MAAM;AAiBhD,SAASQ,EAAe,EACtB,QACA,cACA,GAAGL,KAC4F;CAC/F,OACE,kBAACH,EAAgB,UAAjB;EACO;EACL,aAAU;EACV,WAAWK,EACT,sIACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AACA,EAAe,cAAcH,EAAgB,SAAS;AAiBtD,SAASS,EAAY,EAAE,cAAW,GAAGN,KAAuC;CAC1E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAWE,EACT,4KACA,iFACA,6FACA,iFACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASO,EAAY,EAAE,cAAW,GAAGP,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,uGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASQ,EAAiB,EAAE,cAAW,GAAGR,KAAsC;CAC9E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,4VACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL"}

package/dist/ui/components/ui/button-components.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./button-variants.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("@base-ui/react/button");var s=i.forwardRef(({className:e,variant:i,size:s,testId:c,loading:l,disabled:u,children:d,...f},p)=>(0,r.jsxs)(o.Button,{ref:p,"data-slot":`button`,"data-testid":c,"data-loading":l||void 0,"data-destructive":i===`destructive`||void 0,"aria-busy":l||void 0,disabled:u||l,className:typeof e==`function`?r=>t.cn(n.buttonVariants({variant:i,size:s}),e(r)):t.cn(n.buttonVariants({variant:i,size:s,className:e})),...f,children:[l&&(0,r.jsx)(a.Loader2,{className:`mr-2 h-4 w-4 animate-spin`,"aria-hidden":`true`}),d]}));s.displayName=`Button`,exports.Button=s;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./button-variants.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("@base-ui/react/button");function s({ref:e,className:i,variant:s,size:c,testId:l,loading:u,disabled:d,children:f,...p}){return(0,r.jsxs)(o.Button,{ref:e,"data-slot":`button`,"data-testid":l,"data-loading":u||void 0,"data-destructive":s===`destructive`||void 0,"aria-busy":u||void 0,disabled:d||u,className:typeof i==`function`?e=>t.cn(n.buttonVariants({variant:s,size:c}),i(e)):t.cn(n.buttonVariants({variant:s,size:c,className:i})),...p,children:[u&&(0,r.jsx)(a.Loader2,{className:`mr-2 h-4 w-4 animate-spin`,"aria-hidden":`true`}),f]})}s.displayName=`Button`,exports.Button=s;
 //# sourceMappingURL=button-components.cjs.map

package/dist/ui/components/ui/button-components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-components.cjs","names":["React","ButtonPrimitive","cn","buttonVariants","Loader2","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_variants","react_jsx_runtime","react","lucide_react","_base_ui_react_button","Button","props","testId","loading","variant","disabled","className","state","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Base UI button props plus Appkit loading/test selectors and CVA variants.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Button\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n}\n\n/**\n * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Button composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Button loading={false} testId=\"save-draft\" onClick={() => console.log(\"Save requested\")}>Save draft</Button>);\n * }\n * ```\n */\nconst Button = React.forwardRef<HTMLElement, ButtonProps>(\n  ({ className, variant, size, testId, loading, disabled, children, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        data-destructive={variant === 'destructive' || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(buttonVariants({ variant, size }), className(state)) : cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading && (\n          <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n        )}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":"A,uVAwCA,IAAMY,EAASZ,EAAM,YAClB,CAAE,YAAW,UAAS,OAAM,SAAQ,UAAS,WAAU,WAAU,GAAGa,GAAS,KAI1E,EAAAL,EAAA,KAAA,CAACP,EAAAA,OAAD,CACO,MACL,YAAU,SACV,cAAaa,EACb,eAAcC,GAAW,IAAA,GACzB,mBAAkBC,IAAY,eAAiB,IAAA,GAC/C,YAAWD,GAAW,IAAA,GACtB,SAVeE,GAAYF,EAW3B,UAAW,OAAOG,GAAc,WAAa,GAAShB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,MAAK,CAAC,EAAGe,EAAUC,CAAK,CAAC,EAAIjB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAC/J,GAAIU,EATN,SAAA,CAWGE,IACC,EAAAP,EAAA,IAAA,CAACJ,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAEpEgB,CACc,C,EAGvB,EACA,EAAO,YAAc,S"}
+{"version":3,"file":"button-components.cjs","names":["ButtonPrimitive","cn","buttonVariants","Loader2","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_variants","react_jsx_runtime","react","lucide_react","_base_ui_react_button","Button","props","testId","loading","variant","disabled","className","state","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Base UI button props plus Appkit loading/test selectors and CVA variants.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Button\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n}\n\n/**\n * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Button composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Button loading={false} testId=\"save-draft\" onClick={() => console.log(\"Save requested\")}>Save draft</Button>);\n * }\n * ```\n */\nfunction Button({\n  ref,\n  className,\n  variant,\n  size,\n  testId,\n  loading,\n  disabled,\n  children,\n  ...props\n}: React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLElement>) {\n  const isDisabled = disabled || loading;\n\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='button'\n      data-testid={testId}\n      data-loading={loading || undefined}\n      data-destructive={variant === 'destructive' || undefined}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      className={\n        typeof className === 'function'\n          ? (state) => cn(buttonVariants({ variant, size }), className(state))\n          : cn(buttonVariants({ variant, size, className }))\n      }\n      {...props}\n    >\n      {loading && <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />}\n      {children}\n    </ButtonPrimitive>\n  );\n}\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":"A,uVAwCA,SAASW,EAAO,CACd,MACA,YACA,UACA,OACA,SACA,UACA,WACA,WACA,GAAGC,GACqE,CAGxE,OACE,EAAAL,EAAA,KAAA,CAACP,EAAAA,OAAD,CACO,MACL,YAAU,SACV,cAAaa,EACb,eAAcC,GAAW,IAAA,GACzB,mBAAkBC,IAAY,eAAiB,IAAA,GAC/C,YAAWD,GAAW,IAAA,GACtB,SAVeE,GAAYF,EAW3B,UACE,OAAOG,GAAc,WAChB,GAAUhB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,MAAK,CAAC,EAAGe,EAAUC,CAAK,CAAC,EACjEjB,EAAAA,GAAGC,EAAAA,eAAe,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAErD,GAAIU,EAbN,SAAA,CAeGE,IAAW,EAAAP,EAAA,IAAA,CAACJ,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAC9EgB,CACc,C,EAErB,CACA,EAAO,YAAc,S"}

package/dist/ui/components/ui/button-components.d.cts

@@ -32,5 +32,8 @@ export interface ButtonProps extends ButtonPrimitive.Props, VariantProps<typeof
  * }
  * ```
  */
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function Button({ ref, className, variant, size, testId, loading, disabled, children, ...props }: React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
 export { Button };

package/dist/ui/components/ui/button-components.d.ts

@@ -32,5 +32,8 @@ export interface ButtonProps extends ButtonPrimitive.Props, VariantProps<typeof
  * }
  * ```
  */
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function Button({ ref, className, variant, size, testId, loading, disabled, children, ...props }: React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
 export { Button };

package/dist/ui/components/ui/button-components.js

@@ -2,34 +2,36 @@
 import { cn as e } from "../../lib/utils.js";
 import { buttonVariants as t } from "./button-variants.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import * as i from "react";
-import { Loader2 as a } from "lucide-react";
-import { Button as o } from "@base-ui/react/button";
+import "react";
+import { Loader2 as i } from "lucide-react";
+import { Button as a } from "@base-ui/react/button";
 //#region src/ui/components/ui/button-components.tsx
-var s = i.forwardRef(({ className: i, variant: s, size: c, testId: l, loading: u, disabled: d, children: f, ...p }, m) => /* @__PURE__ */ r(o, {
-	ref: m,
-	"data-slot": "button",
-	"data-testid": l,
-	"data-loading": u || void 0,
-	"data-destructive": s === "destructive" || void 0,
-	"aria-busy": u || void 0,
-	disabled: d || u,
-	className: typeof i == "function" ? (n) => e(t({
-		variant: s,
-		size: c
-	}), i(n)) : e(t({
-		variant: s,
-		size: c,
-		className: i
-	})),
-	...p,
-	children: [u && /* @__PURE__ */ n(a, {
-		className: "mr-2 h-4 w-4 animate-spin",
-		"aria-hidden": "true"
-	}), f]
-}));
-s.displayName = "Button";
+function o({ ref: o, className: s, variant: c, size: l, testId: u, loading: d, disabled: f, children: p, ...m }) {
+	return /* @__PURE__ */ r(a, {
+		ref: o,
+		"data-slot": "button",
+		"data-testid": u,
+		"data-loading": d || void 0,
+		"data-destructive": c === "destructive" || void 0,
+		"aria-busy": d || void 0,
+		disabled: f || d,
+		className: typeof s == "function" ? (n) => e(t({
+			variant: c,
+			size: l
+		}), s(n)) : e(t({
+			variant: c,
+			size: l,
+			className: s
+		})),
+		...m,
+		children: [d && /* @__PURE__ */ n(i, {
+			className: "mr-2 h-4 w-4 animate-spin",
+			"aria-hidden": "true"
+		}), p]
+	});
+}
+o.displayName = "Button";
 //#endregion
-export { s as Button };
+export { o as Button };
 
 //# sourceMappingURL=button-components.js.map

package/dist/ui/components/ui/button-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-components.js","names":["React","ButtonPrimitive","React$1","Button$1","Button","props","testId","loading","variant","disabled","className","cn","buttonVariants","state","Loader2","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Base UI button props plus Appkit loading/test selectors and CVA variants.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Button\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n}\n\n/**\n * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Button composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Button loading={false} testId=\"save-draft\" onClick={() => console.log(\"Save requested\")}>Save draft</Button>);\n * }\n * ```\n */\nconst Button = React.forwardRef<HTMLElement, ButtonProps>(\n  ({ className, variant, size, testId, loading, disabled, children, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        data-destructive={variant === 'destructive' || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(buttonVariants({ variant, size }), className(state)) : cn(buttonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading && (\n          <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n        )}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":";;;;;;;;AAwCA,IAAMI,IAASJ,EAAM,YAClB,EAAE,cAAW,YAAS,SAAM,WAAQ,YAAS,aAAU,aAAU,GAAGK,KAAS,MAI1E,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,eAAaK;CACb,gBAAcC,KAAW,KAAA;CACzB,oBAAkBC,MAAY,iBAAiB,KAAA;CAC/C,aAAWD,KAAW,KAAA;CACtB,UAVeE,KAAYF;CAW3B,WAAW,OAAOG,KAAc,cAAa,MAASC,EAAGC,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGF,EAAUG,CAAK,CAAC,IAAIF,EAAGC,EAAe;EAAE;EAAS;EAAM;CAAU,CAAC,CAAC;CAC/J,GAAIP;CATN,UAAA,CAWGE,KACC,kBAACO,GAAD;EAAS,WAAU;EAA4B,eAAY;CAAQ,CAAA,GAEpEC,CACc;A,EAGvB;AACA,EAAO,cAAc"}
+{"version":3,"file":"button-components.js","names":["ButtonPrimitive","Button$1","Button","props","testId","loading","variant","disabled","className","cn","buttonVariants","state","Loader2","children"],"sources":["../../../../src/ui/components/ui/button-components.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from './button-variants';\n\n/**\n * Base UI button props plus Appkit loading/test selectors and CVA variants.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Button\n */\nexport interface ButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n}\n\n/**\n * Renders a Base UI button with Appkit variants, a stable test ID and an optional loading spinner.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Button composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. loading disables the button through disabled || loading and adds aria-busy/data-loading; omission means no spinner. The wrapper does not start or complete asynchronous work. variant and size use buttonVariants defaults (default). Base UI render composition is supported; there is no asChild prop. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Button } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Button loading={false} testId=\"save-draft\" onClick={() => console.log(\"Save requested\")}>Save draft</Button>);\n * }\n * ```\n */\nfunction Button({\n  ref,\n  className,\n  variant,\n  size,\n  testId,\n  loading,\n  disabled,\n  children,\n  ...props\n}: React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLElement>) {\n  const isDisabled = disabled || loading;\n\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='button'\n      data-testid={testId}\n      data-loading={loading || undefined}\n      data-destructive={variant === 'destructive' || undefined}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      className={\n        typeof className === 'function'\n          ? (state) => cn(buttonVariants({ variant, size }), className(state))\n          : cn(buttonVariants({ variant, size, className }))\n      }\n      {...props}\n    >\n      {loading && <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />}\n      {children}\n    </ButtonPrimitive>\n  );\n}\nButton.displayName = 'Button';\n\nexport { Button };\n"],"mappings":";;;;;;;;AAwCA,SAASE,EAAO,EACd,QACA,cACA,YACA,SACA,WACA,YACA,aACA,aACA,GAAGC,KACqE;CAGxE,OACE,kBAACH,GAAD;EACO;EACL,aAAU;EACV,eAAaI;EACb,gBAAcC,KAAW,KAAA;EACzB,oBAAkBC,MAAY,iBAAiB,KAAA;EAC/C,aAAWD,KAAW,KAAA;EACtB,UAVeE,KAAYF;EAW3B,WACE,OAAOG,KAAc,cAChB,MAAUC,EAAGC,EAAe;GAAE;GAAS;EAAK,CAAC,GAAGF,EAAUG,CAAK,CAAC,IACjEF,EAAGC,EAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAErD,GAAIP;EAbN,UAAA,CAeGE,KAAW,kBAACO,GAAD;GAAS,WAAU;GAA4B,eAAY;EAAQ,CAAA,GAC9EC,CACc;;AAErB;AACA,EAAO,cAAc"}

package/dist/ui/components/ui/card.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=r.forwardRef(({className:e,size:r=`default`,...i},a)=>(0,n.jsx)(`div`,{ref:a,"data-slot":`card`,"data-size":r,className:t.cn(`ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col`,e),...i}));i.displayName=`Card`;var a=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`div`,{ref:i,"data-slot":`card-header`,className:t.cn(`gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,e),...r}));a.displayName=`CardHeader`;var o=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`div`,{ref:i,"data-slot":`card-title`,className:t.cn(`text-base leading-snug font-medium group-data-[size=sm]/card:text-sm`,e),...r}));o.displayName=`CardTitle`;var s=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`div`,{ref:i,"data-slot":`card-description`,className:t.cn(`text-muted-foreground text-sm`,e),...r}));s.displayName=`CardDescription`;var c=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`div`,{ref:i,"data-slot":`card-action`,className:t.cn(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,e),...r}));c.displayName=`CardAction`;var l=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`div`,{ref:i,"data-slot":`card-content`,className:t.cn(`px-4 group-data-[size=sm]/card:px-3`,e),...r}));l.displayName=`CardContent`;var u=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`div`,{ref:i,"data-slot":`card-footer`,className:t.cn(`bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center`,e),...r}));u.displayName=`CardFooter`,exports.Card=i,exports.CardAction=c,exports.CardContent=l,exports.CardDescription=s,exports.CardFooter=u,exports.CardHeader=a,exports.CardTitle=o;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);function i({ref:e,className:r,size:i=`default`,...a}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card`,"data-size":i,className:t.cn(`ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col`,r),...a})}i.displayName=`Card`;function a({ref:e,className:r,...i}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card-header`,className:t.cn(`gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,r),...i})}a.displayName=`CardHeader`;function o({ref:e,className:r,...i}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card-title`,className:t.cn(`text-base leading-snug font-medium group-data-[size=sm]/card:text-sm`,r),...i})}o.displayName=`CardTitle`;function s({ref:e,className:r,...i}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card-description`,className:t.cn(`text-muted-foreground text-sm`,r),...i})}s.displayName=`CardDescription`;function c({ref:e,className:r,...i}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card-action`,className:t.cn(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,r),...i})}c.displayName=`CardAction`;function l({ref:e,className:r,...i}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card-content`,className:t.cn(`px-4 group-data-[size=sm]/card:px-3`,r),...i})}l.displayName=`CardContent`;function u({ref:e,className:r,...i}){return(0,n.jsx)(`div`,{ref:e,"data-slot":`card-footer`,className:t.cn(`bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center`,r),...i})}u.displayName=`CardFooter`,exports.Card=i,exports.CardAction=c,exports.CardContent=l,exports.CardDescription=s,exports.CardFooter=u,exports.CardHeader=a,exports.CardTitle=o;
 //# sourceMappingURL=card.cjs.map

package/dist/ui/components/ui/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Card","props","size","className","CardHeader","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"sources":["../../../../src/ui/components/ui/card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a bordered card surface with default or compact spacing.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered Card composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & { /**\n * Visual size preset; defaults to default unless the owning component states otherwise.\n */\n  /**\n   * Visual size preset; defaults to default unless the owning component states otherwise.\n   */\n  size?: 'default' | 'sm' }\n>(({ className, size = 'default', ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot='card'\n    data-size={size}\n    className={cn(\n      'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',\n      className,\n    )}\n    {...props}\n  />\n));\nCard.displayName = 'Card';\n\n/**\n * Lays out a card heading and optional trailing action.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='card-header'\n      className={cn(\n        'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nCardHeader.displayName = 'CardHeader';\n\n/**\n * Styles the card title without imposing a heading level.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst CardTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='card-title'\n      className={cn(\n        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nCardTitle.displayName = 'CardTitle';\n\n/**\n * Styles supporting card text with muted coloring.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst CardDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='card-description'\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  ),\n);\nCardDescription.displayName = 'CardDescription';\n\n/**\n * Positions an action in the header grid trailing column.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardAction composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst CardAction = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='card-action'\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  ),\n);\nCardAction.displayName = 'CardAction';\n\n/**\n * Adds consistent horizontal padding around card content.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='card-content'\n      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}\n      {...props}\n    />\n  ),\n);\nCardContent.displayName = 'CardContent';\n\n/**\n * Renders a shaded footer with a top border inside a card.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardFooter composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nconst CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='card-footer'\n      className={cn(\n        'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nCardFooter.displayName = 'CardFooter';\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n"],"mappings":"A,mPAmBA,IAAMM,EAAON,EAAM,YAShB,CAAE,YAAW,OAAO,UAAW,GAAGO,GAAS,KAC5C,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,OACV,YAAWI,EACX,UAAWP,EAAAA,GACT,uVACAQ,CACF,EACA,GAAIF,CACL,CAAA,CACF,EACD,EAAK,YAAc,OAiBnB,IAAMG,EAAaV,EAAM,YACtB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,cACV,UAAWH,EAAAA,GACT,qSACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,EACA,EAAW,YAAc,aAiBzB,IAAMI,EAAYX,EAAM,YACrB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,aACV,UAAWH,EAAAA,GACT,uEACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,EACA,EAAU,YAAc,YAiBxB,IAAMK,EAAkBZ,EAAM,YAC3B,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,mBACV,UAAWH,EAAAA,GAAG,gCAAiCQ,CAAS,EACxD,GAAIF,CACL,CAAA,CAEL,EACA,EAAgB,YAAc,kBAiB9B,IAAMM,EAAab,EAAM,YACtB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,cACV,UAAWH,EAAAA,GAAG,iEAAkEQ,CAAS,EACzF,GAAIF,CACL,CAAA,CAEL,EACA,EAAW,YAAc,aAiBzB,IAAMO,EAAcd,EAAM,YACvB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,eACV,UAAWH,EAAAA,GAAG,sCAAuCQ,CAAS,EAC9D,GAAIF,CACL,CAAA,CAEL,EACA,EAAY,YAAc,cAiB1B,IAAMQ,EAAaf,EAAM,YACtB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,cACV,UAAWH,EAAAA,GACT,wFACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,EACA,EAAW,YAAc,a"}
+{"version":3,"file":"card.cjs","names":["cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Card","props","size","className","CardHeader","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"sources":["../../../../src/ui/components/ui/card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a bordered card surface with default or compact spacing.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered Card composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction Card({\n  ref,\n  className,\n  size = 'default',\n  ...props\n}: React.PropsWithoutRef<\n  React.ComponentProps<'div'> & {\n    /**\n     * Visual size preset; defaults to default unless the owning component states otherwise.\n     */\n    size?: 'default' | 'sm';\n  }\n> &\n  React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card'\n      data-size={size}\n      className={cn(\n        'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nCard.displayName = 'Card';\n\n/**\n * Lays out a card heading and optional trailing action.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction CardHeader({\n  ref,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card-header'\n      className={cn(\n        'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nCardHeader.displayName = 'CardHeader';\n\n/**\n * Styles the card title without imposing a heading level.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction CardTitle({\n  ref,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card-title'\n      className={cn(\n        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nCardTitle.displayName = 'CardTitle';\n\n/**\n * Styles supporting card text with muted coloring.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction CardDescription({\n  ref,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card-description'\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\nCardDescription.displayName = 'CardDescription';\n\n/**\n * Positions an action in the header grid trailing column.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardAction composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction CardAction({\n  ref,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card-action'\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  );\n}\nCardAction.displayName = 'CardAction';\n\n/**\n * Adds consistent horizontal padding around card content.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction CardContent({\n  ref,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card-content'\n      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}\n      {...props}\n    />\n  );\n}\nCardContent.displayName = 'CardContent';\n\n/**\n * Renders a shaded footer with a top border inside a card.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered CardFooter composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place the slots inside Card; put CardAction inside CardHeader. size defaults to default, with sm using tighter spacing. Slots are div elements; the host supplies semantic headings where required. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Card><CardHeader><CardTitle>Draft</CardTitle><CardDescription>Ready for review</CardDescription><CardAction><button type=\"button\">Open</button></CardAction></CardHeader><CardContent>Document content</CardContent><CardFooter>Updated today</CardFooter></Card>);\n * }\n * ```\n */\nfunction CardFooter({\n  ref,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='card-footer'\n      className={cn(\n        'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nCardFooter.displayName = 'CardFooter';\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n"],"mappings":"A,mPAmBA,SAASK,EAAK,CACZ,MACA,YACA,OAAO,UACP,GAAGC,GASkC,CACrC,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,OACV,YAAWI,EACX,UAAWP,EAAAA,GACT,uVACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CACA,EAAK,YAAc,OAiBnB,SAASG,EAAW,CAClB,MACA,YACA,GAAGH,GAC2E,CAC9E,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,cACV,UAAWH,EAAAA,GACT,qSACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CACA,EAAW,YAAc,aAiBzB,SAASI,EAAU,CACjB,MACA,YACA,GAAGJ,GAC2E,CAC9E,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,aACV,UAAWH,EAAAA,GACT,uEACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CACA,EAAU,YAAc,YAiBxB,SAASK,EAAgB,CACvB,MACA,YACA,GAAGL,GAC2E,CAC9E,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,mBACV,UAAWH,EAAAA,GAAG,gCAAiCQ,CAAS,EACxD,GAAIF,CACL,CAAA,CAEL,CACA,EAAgB,YAAc,kBAiB9B,SAASM,EAAW,CAClB,MACA,YACA,GAAGN,GAC2E,CAC9E,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,cACV,UAAWH,EAAAA,GAAG,iEAAkEQ,CAAS,EACzF,GAAIF,CACL,CAAA,CAEL,CACA,EAAW,YAAc,aAiBzB,SAASO,EAAY,CACnB,MACA,YACA,GAAGP,GAC2E,CAC9E,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,eACV,UAAWH,EAAAA,GAAG,sCAAuCQ,CAAS,EAC9D,GAAIF,CACL,CAAA,CAEL,CACA,EAAY,YAAc,cAiB1B,SAASQ,EAAW,CAClB,MACA,YACA,GAAGR,GAC2E,CAC9E,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,YAAU,cACV,UAAWH,EAAAA,GACT,wFACAQ,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CACA,EAAW,YAAc,a"}

package/dist/ui/components/ui/card.d.cts

@@ -14,12 +14,15 @@ import * as React from 'react';
  * }
  * ```
  */
-declare const Card: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+declare function Card({ ref, className, size, ...props }: React.PropsWithoutRef<React.ComponentProps<'div'> & {
     /**
      * Visual size preset; defaults to default unless the owning component states otherwise.
      */
-    size?: "default" | "sm";
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    size?: 'default' | 'sm';
+}> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace Card {
+    var displayName: string;
+}
 /**
  * Lays out a card heading and optional trailing action.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -35,7 +38,10 @@ declare const Card: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<H
  * }
  * ```
  */
-declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CardHeader({ ref, className, ...props }: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
 /**
  * Styles the card title without imposing a heading level.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -51,7 +57,10 @@ declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTM
  * }
  * ```
  */
-declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CardTitle({ ref, className, ...props }: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
 /**
  * Styles supporting card text with muted coloring.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -67,7 +76,10 @@ declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
  * }
  * ```
  */
-declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CardDescription({ ref, className, ...props }: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace CardDescription {
+    var displayName: string;
+}
 /**
  * Positions an action in the header grid trailing column.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -83,7 +95,10 @@ declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.Detail
  * }
  * ```
  */
-declare const CardAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CardAction({ ref, className, ...props }: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace CardAction {
+    var displayName: string;
+}
 /**
  * Adds consistent horizontal padding around card content.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -99,7 +114,10 @@ declare const CardAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTM
  * }
  * ```
  */
-declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CardContent({ ref, className, ...props }: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
 /**
  * Renders a shaded footer with a top border inside a card.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -115,5 +133,8 @@ declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHT
  * }
  * ```
  */
-declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function CardFooter({ ref, className, ...props }: React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };