@mks2508/mks-ui 0.5.1 → 0.5.4

package/dist/react-ui/ui/DataCard/index.d.ts

@@ -1,127 +1,58 @@
-import * as React from 'react';
 import { dataCardVariants } from './DataCard.styles';
 import type { SlotOverrides } from '../../../core/types';
-import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardState, DataCardSlot } from './DataCard.types';
-/**
- * Context type for DataCard state management.
- */
+import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardConfig, DataCardSlot } from './DataCard.types';
 type DataCardContextType = {
-    /** Current variant of: card. */
     variant: IDataCardProps['variant'];
-    /** Current size of: card. */
     size: IDataCardProps['size'];
-    /** Whether card is disabled. */
     disabled: boolean;
-    /** Whether glass effect is enabled. */
     glass: boolean;
-    /** Slot overrides from parent. */
+    config?: IDataCardConfig;
     slots?: SlotOverrides<DataCardSlot>;
-    /** Update interaction state. */
-    setState: React.Dispatch<React.SetStateAction<IDataCardState>>;
 };
 declare const useDataCard: () => DataCardContextType;
 /**
- * DataCard — comprehensive showcase component demonstrating mks-ui patterns.
- *
- * Features:
- * - Slot overrides for customization
- * - State-based styling (hover, pressed, disabled)
- * - CVA variants (size, color variant)
- * - asChild composition pattern
- * - Motion/animation integration
- * - Custom render functions
- * - Form field integration
- * - Icon composition
- * - Glassmorphism effects
+ * Root card container with glassmorphism, corner brackets, and state tracking.
  *
- * @example
- * ```tsx
- * <DataCard variant="accent" size="default">
- *   <DataCardValue number={1234} />
- *   <DataCardToggle />
- * </DataCard>
- * ```
+ * @param props - {@link IDataCardProps}
+ * @returns A motion.div card with context provider
  */
-declare function DataCard({ variant, size, disabled, glass, showBrackets, className, style, slots, config, children, ...props }: IDataCardProps): import("react/jsx-runtime").JSX.Element;
+declare function DataCard({ variant, size, disabled, glass, showBrackets, className, style, slots, config, children, }: IDataCardProps): import("react/jsx-runtime").JSX.Element;
 /**
- * DataCardValue — displays animated number with CountingNumber.
+ * Animated number display with optional label and unit.
  *
- * @example
- * ```tsx
- * <DataCardValue
- *   number={1234}
- *   label="Active Users"
- *   unit="users"
- * />
- * ```
+ * @param props - {@link IDataCardValueProps}
+ * @returns Animated number with CountingNumber primitive
  */
 declare function DataCardValue({ number, label, unit, decimalPlaces, padStart, }: IDataCardValueProps): import("react/jsx-runtime").JSX.Element;
 /**
- * DataCardLabel — displays title and description.
+ * Title + description label.
  *
- * @example
- * ```tsx
- * <DataCardLabel
- *   title="Revenue"
- *   description="This month"
- * />
- * ```
+ * @param props - {@link IDataCardLabelProps}
+ * @returns Title and optional description text
  */
 declare function DataCardLabel({ title, description, className, ...props }: IDataCardLabelProps): import("react/jsx-runtime").JSX.Element;
 /**
- * DataCardToggle — interactive switch element.
+ * Switch toggle control inside a DataCard.
  *
- * Uses asChild pattern for composition with Switch component.
- *
- * @example
- * ```tsx
- * <DataCardToggle
- *   checked={enabled}
- *   onCheckedChange={setEnabled}
- *   label="Enable notifications"
- *   checkedIcon={<BellIcon />}
- *   uncheckedIcon={<BellOffIcon />}
- * />
- * ```
+ * @param props - {@link IDataCardToggleProps}
+ * @returns Label + Switch toggle
  */
-declare function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label, }: IDataCardToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function DataCardToggle({ checked, onCheckedChange, label, }: IDataCardToggleProps): import("react/jsx-runtime").JSX.Element;
 /**
- * DataCardActions — container for action buttons.
+ * Action button container.
  *
- * @example
- * ```tsx
- * <DataCardActions align="end">
- *   <Button size="sm">Edit</Button>
- *   <Button size="sm" variant="ghost">Delete</Button>
- * </DataCardActions>
- * ```
+ * @param props - {@link IDataCardActionsProps}
+ * @returns Flex container for action buttons
  */
 declare function DataCardActions({ align, className, children, ...props }: IDataCardActionsProps): import("react/jsx-runtime").JSX.Element;
 /**
- * DataCardBracket — decorative corner bracket.
- *
- * Wraps CornerBracket with motion animations.
- *
- * @example
- * ```tsx
- * <DataCardBracket position="tl" variant="accent" />
- * ```
- */
-declare function DataCardBracket({ position, variant, className, }: IDataCardBracketProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Hook to access DataCard context.
- * Must be used within DataCard provider.
- *
- * @returns The current DataCard context
+ * Decorative corner bracket. Rendered directly via CornerBracket
+ * (no wrapper div — the SVG positions itself via absolute positioning).
  *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { variant, size, disabled } = useDataCard();
- *   return <div>Current variant: {variant}</div>;
- * }
- * ```
+ * @param props - {@link IDataCardBracketProps}
+ * @returns CornerBracket SVG at the specified corner
  */
+declare function DataCardBracket({ position, variant, }: IDataCardBracketProps): import("react/jsx-runtime").JSX.Element;
 export { useDataCard };
 export { DataCard, DataCardValue, DataCardLabel, DataCardToggle, DataCardActions, DataCardBracket, dataCardVariants, };
 export type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardState, IDataCardConfig, DataCardVariant, DataCardSize, DataCardSlot, } from './DataCard.types';

package/dist/react-ui/ui/DataCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAwD,MAAM,mBAAmB,CAAC;AAC3G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B;;GAEG;AACH,KAAK,mBAAmB,GAAG;IACzB,gCAAgC;IAChC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,6BAA6B;IAC7B,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,gCAAgC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,KAAK,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAmB,EACnB,IAAgB,EAChB,QAAgB,EAChB,KAAY,EACZ,YAAmB,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA0EhB;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,aAAiB,EACjB,QAAgB,GACjB,EAAE,mBAAmB,2CA+BrB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAqBrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,eAAe,EACf,WAAW,EACX,aAAa,EACb,KAAK,GACN,EAAE,oBAAoB,2CAqBtB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoBvB;AAED;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,OAAmB,EACnB,SAAS,GACV,EAAE,qBAAqB,2CAkBvB;AAED;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,GACjB,CAAC;AAGF,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,gBAAgB,EAAmC,MAAM,mBAAmB,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EAErB,eAAe,EACf,YAAY,EACb,MAAM,kBAAkB,CAAC;AAM1B,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAM3D;;;;;GAKG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAmB,EACnB,IAAgB,EAChB,QAAgB,EAChB,KAAY,EACZ,YAAmB,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,cAAc,2CAgDhB;AAMD;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,aAAiB,EACjB,QAAgB,GACjB,EAAE,mBAAmB,2CA8BrB;AAMD;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAarB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,eAAe,EACf,KAAK,GACN,EAAE,oBAAoB,2CAgBtB;AAMD;;;;;GAKG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoBvB;AAMD;;;;;;GAMG;AACH,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,OAAmB,GACpB,EAAE,qBAAqB,2CAiBvB;AAMD,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,GACjB,CAAC;AAEF,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/react-ui/ui/DataCard/index.js

@@ -5,63 +5,58 @@ import { CountingNumber } from "../../primitives/CountingNumber/index.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { Switch, SwitchThumb } from "../Switch/index.js";
 import { CornerBracket } from "../CornerBracket/index.js";
-import { dataCardStateStyles, dataCardStyles, dataCardVariants } from "./DataCard.styles.js";
+import { dataCardStyles, dataCardVariants } from "./DataCard.styles.js";
 import * as React$1 from "react";
 import { motion } from "motion/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/ui/DataCard/index.tsx
-const [DataCardProvider, useDataCard] = getStrictContext("DataCardContext");
 /**
-* DataCard — comprehensive showcase component demonstrating mks-ui patterns.
+* DataCard — glassmorphism dashboard metric card.
+*
+* Features: animated numbers, corner brackets, toggle, size/variant CVA,
+* state-based styling, slot overrides, config for animation tuning.
 *
-* Features:
-* - Slot overrides for customization
-* - State-based styling (hover, pressed, disabled)
-* - CVA variants (size, color variant)
-* - asChild composition pattern
-* - Motion/animation integration
-* - Custom render functions
-* - Form field integration
-* - Icon composition
-* - Glassmorphism effects
+* @module @mks2508/mks-ui/react/ui/DataCard
 *
 * @example
 * ```tsx
 * <DataCard variant="accent" size="default">
-*   <DataCardValue number={1234} />
-*   <DataCardToggle />
+*   <DataCardLabel title="Revenue" description="This month" />
+*   <DataCardValue number={45678} unit="$" />
 * </DataCard>
 * ```
 */
-function DataCard({ variant = "default", size = "default", disabled = false, glass = true, showBrackets = true, className, style, slots, config, children, ...props }) {
+const [DataCardProvider, useDataCard] = getStrictContext("DataCardContext");
+/**
+* Root card container with glassmorphism, corner brackets, and state tracking.
+*
+* @param props - {@link IDataCardProps}
+* @returns A motion.div card with context provider
+*/
+function DataCard({ variant = "default", size = "default", disabled = false, glass = true, showBrackets = true, className, style, slots, config, children }) {
 	const [state, setState] = React$1.useState({
 		hovered: false,
 		pressed: false,
-		disabled: disabled ?? false
+		disabled
 	});
 	const contextValue = React$1.useMemo(() => ({
 		variant,
 		size,
-		disabled: disabled ?? false,
+		disabled,
 		glass,
-		slots,
-		setState
+		config,
+		slots
 	}), [
 		variant,
 		size,
 		disabled,
 		glass,
+		config,
 		slots
 	]);
-	const computedClassName = React$1.useMemo(() => {
-		if (typeof className === "function") return className(state);
-		return className;
-	}, [className, state]);
-	const computedStyle = React$1.useMemo(() => {
-		if (typeof style === "function") return style(state);
-		return style;
-	}, [style, state]);
+	const computedClassName = typeof className === "function" ? className(state) : className;
+	const computedStyle = typeof style === "function" ? style(state) : style;
 	return /* @__PURE__ */ jsx(DataCardProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs(motion.div, {
@@ -74,29 +69,28 @@ function DataCard({ variant = "default", size = "default", disabled = false, gla
 				variant,
 				size,
 				glass
-			}), slots?.root, computedClassName, state.hovered && dataCardStateStyles.hovered, state.pressed && dataCardStateStyles.pressed, disabled && dataCardStateStyles.disabled),
+			}), disabled && "opacity-50 pointer-events-none", slots?.root, computedClassName),
 			style: computedStyle,
-			onHoverStart: () => setState((prev) => ({
-				...prev,
+			onHoverStart: () => setState((p) => ({
+				...p,
 				hovered: true
 			})),
-			onHoverEnd: () => setState((prev) => ({
-				...prev,
+			onHoverEnd: () => setState((p) => ({
+				...p,
 				hovered: false
 			})),
-			onTapStart: () => setState((prev) => ({
-				...prev,
+			onTapStart: () => setState((p) => ({
+				...p,
 				pressed: true
 			})),
-			onTap: () => setState((prev) => ({
-				...prev,
+			onTap: () => setState((p) => ({
+				...p,
 				pressed: false
 			})),
-			onTapCancel: () => setState((prev) => ({
-				...prev,
+			onTapCancel: () => setState((p) => ({
+				...p,
 				pressed: false
 			})),
-			...props,
 			children: [showBrackets && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(DataCardBracket, {
 					position: "tl",
@@ -119,22 +113,19 @@ function DataCard({ variant = "default", size = "default", disabled = false, gla
 	});
 }
 /**
-* DataCardValue — displays animated number with CountingNumber.
+* Animated number display with optional label and unit.
 *
-* @example
-* ```tsx
-* <DataCardValue
-*   number={1234}
-*   label="Active Users"
-*   unit="users"
-* />
-* ```
+* @param props - {@link IDataCardValueProps}
+* @returns Animated number with CountingNumber primitive
 */
 function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = false }) {
-	const { variant, size } = useDataCard();
+	const { size, config, slots } = useDataCard();
+	const stiffness = config?.counterStiffness ?? 90;
+	const damping = config?.counterDamping ?? 10;
+	const sizeClass = size === "compact" ? "text-3xl font-bold" : size === "spacious" ? "text-5xl font-bold" : "text-4xl font-bold";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-card-value",
-		className: cn(dataCardStyles.value),
+		className: cn(dataCardStyles.value, slots?.value),
 		children: [
 			label && /* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground text-xs uppercase tracking-wider font-mono",
@@ -145,10 +136,10 @@ function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = fals
 				decimalPlaces,
 				padStart,
 				transition: {
-					stiffness: variant === "accent" ? 150 : 90,
-					damping: variant === "accent" ? 20 : 10
+					stiffness,
+					damping
 				},
-				className: size === "compact" ? "text-3xl font-bold" : size === "spacious" ? "text-5xl font-bold" : "text-4xl font-bold"
+				className: sizeClass
 			}),
 			unit && /* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground text-lg ml-1",
@@ -158,15 +149,10 @@ function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = fals
 	});
 }
 /**
-* DataCardLabel — displays title and description.
+* Title + description label.
 *
-* @example
-* ```tsx
-* <DataCardLabel
-*   title="Revenue"
-*   description="This month"
-* />
-* ```
+* @param props - {@link IDataCardLabelProps}
+* @returns Title and optional description text
 */
 function DataCardLabel({ title, description, className, ...props }) {
 	const { slots } = useDataCard();
@@ -184,60 +170,36 @@ function DataCardLabel({ title, description, className, ...props }) {
 	});
 }
 /**
-* DataCardToggle — interactive switch element.
+* Switch toggle control inside a DataCard.
 *
-* Uses asChild pattern for composition with Switch component.
-*
-* @example
-* ```tsx
-* <DataCardToggle
-*   checked={enabled}
-*   onCheckedChange={setEnabled}
-*   label="Enable notifications"
-*   checkedIcon={<BellIcon />}
-*   uncheckedIcon={<BellOffIcon />}
-* />
-* ```
+* @param props - {@link IDataCardToggleProps}
+* @returns Label + Switch toggle
 */
-function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label }) {
-	const { disabled, variant, size, glass, slots } = useDataCard();
+function DataCardToggle({ checked, onCheckedChange, label }) {
+	const { disabled, slots } = useDataCard();
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-card-toggle",
 		className: cn(dataCardStyles.toggle, slots?.toggle),
 		children: [label && /* @__PURE__ */ jsx("span", {
 			className: "text-sm text-muted-foreground",
 			children: label
-		}), /* @__PURE__ */ jsxs(Switch, {
+		}), /* @__PURE__ */ jsx(Switch, {
 			checked,
 			onCheckedChange,
 			disabled,
-			children: [
-				/* @__PURE__ */ jsx(SwitchThumb, {}),
-				checkedIcon && /* @__PURE__ */ jsx("div", {
-					className: "text-primary",
-					children: checkedIcon
-				}),
-				!checkedIcon && /* @__PURE__ */ jsx("div", {
-					className: "text-muted-foreground",
-					children: uncheckedIcon
-				})
-			]
+			nativeButton: true,
+			children: /* @__PURE__ */ jsx(SwitchThumb, {})
 		})]
 	});
 }
 /**
-* DataCardActions — container for action buttons.
+* Action button container.
 *
-* @example
-* ```tsx
-* <DataCardActions align="end">
-*   <Button size="sm">Edit</Button>
-*   <Button size="sm" variant="ghost">Delete</Button>
-* </DataCardActions>
-* ```
+* @param props - {@link IDataCardActionsProps}
+* @returns Flex container for action buttons
 */
 function DataCardActions({ align = "end", className, children, ...props }) {
-	const { variant, size, glass, slots } = useDataCard();
+	const { slots } = useDataCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "data-card-actions",
 		"data-align": align,
@@ -247,28 +209,24 @@ function DataCardActions({ align = "end", className, children, ...props }) {
 	});
 }
 /**
-* DataCardBracket — decorative corner bracket.
+* Decorative corner bracket. Rendered directly via CornerBracket
+* (no wrapper div — the SVG positions itself via absolute positioning).
 *
-* Wraps CornerBracket with motion animations.
-*
-* @example
-* ```tsx
-* <DataCardBracket position="tl" variant="accent" />
-* ```
+* @param props - {@link IDataCardBracketProps}
+* @returns CornerBracket SVG at the specified corner
 */
-function DataCardBracket({ position, variant = "default", className }) {
-	const { size, glass, slots } = useDataCard();
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(dataCardStyles.bracket, slots?.bracket, className),
-		children: /* @__PURE__ */ jsx(CornerBracket, {
-			position,
-			variant,
-			size: {
-				compact: 16,
-				default: 20,
-				spacious: 24
-			}[size ?? "default"]
-		})
+function DataCardBracket({ position, variant = "default" }) {
+	const { size, config } = useDataCard();
+	const animate = config?.animateBrackets ?? true;
+	return /* @__PURE__ */ jsx(CornerBracket, {
+		position,
+		variant,
+		size: {
+			compact: 16,
+			default: 20,
+			spacious: 24
+		}[size ?? "default"],
+		className: cn(animate && "opacity-60 group-hover/data-card:opacity-100 transition-opacity", !animate && "opacity-50")
 	});
 }