@mks2508/mks-ui 0.5.1 → 0.5.4

package/dist/react-ui/primitives/waapi/Gooey/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Gooey — SVG-based morphing primitives for organic shape merging.
+ *
+ * Two techniques:
+ * - **Filter**: `GooeyCanvas` / `GooeyFilter` — SVG filter merges same-colored shapes
+ * - **Path**: `MorphPath` / `useMorphPath` — parametric SVG path with Bezier junctions
+ *
+ * @example
+ * ```tsx
+ * // Filter approach — automatic merge
+ * <GooeyCanvas height={40}>
+ *   <div className="bg-card rounded-full h-10 w-64" />
+ *   <div className="bg-card absolute bottom-full rounded-lg h-6 w-32" />
+ * </GooeyCanvas>
+ *
+ * // Path approach — precise control
+ * <svg><MorphPath pillWidth={260} bodyWidth={180} totalHeight={60} progress={0.5} fill="var(--card)" /></svg>
+ * ```
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+export { GooeyFilter } from './GooeyFilter';
+export { GooeyCanvas } from './GooeyCanvas';
+export { MorphPath } from './MorphPath';
+export { useMorphPath } from './useMorphPath';
+export { GOOEY_DEFAULTS, computeBlur, buildColorMatrixValues, buildFilterString, memoizePath, morphPathDown, morphPathUp, morphPathDownMemo, morphPathUpMemo, } from './gooey-utils';
+export type { IGooeyFilterProps, IGooeyCanvasProps, IMorphPathProps, IUseMorphPathOptions, } from './Gooey.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EACL,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,GAChB,MAAM,eAAe,CAAC;AAGvB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/index.js

@@ -0,0 +1,5 @@
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp } from "./gooey-utils.js";
+import { GooeyFilter } from "./GooeyFilter.js";
+import { GooeyCanvas } from "./GooeyCanvas.js";
+import { useMorphPath } from "./useMorphPath.js";
+import { MorphPath } from "./MorphPath.js";

package/dist/react-ui/primitives/waapi/Gooey/useMorphPath.d.ts

@@ -0,0 +1,7 @@
+import type { IUseMorphPathOptions } from './Gooey.types';
+/**
+ * Generate a parametric SVG morph path from dimensions and progress.
+ */
+declare function useMorphPath({ pillWidth, bodyWidth, totalHeight, progress, pillHeight, direction, }: IUseMorphPathOptions): string;
+export { useMorphPath };
+//# sourceMappingURL=useMorphPath.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/useMorphPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMorphPath.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/useMorphPath.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D;;GAEG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAuC,EACvC,SAAkB,GACnB,EAAE,oBAAoB,GAAG,MAAM,CAK/B;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/useMorphPath.js

@@ -0,0 +1,47 @@
+'use client';
+
+import { GOOEY_DEFAULTS, morphPathDown, morphPathUp } from "./gooey-utils.js";
+import { useMemo } from "react";
+
+//#region src/react-ui/primitives/waapi/Gooey/useMorphPath.ts
+/**
+* useMorphPath — hook that generates a parametric SVG path d-string.
+*
+* Returns a memoized path for a pill shape morphing into a blob.
+* Use with `<path d={path} />` in an SVG element.
+*
+* @param opts - Dimensions and progress
+* @returns SVG path d-string
+*
+* @example
+* ```tsx
+* const path = useMorphPath({
+*   pillWidth: 260,
+*   bodyWidth: 180,
+*   totalHeight: 60,
+*   progress: expanded ? 1 : 0,
+*   direction: 'up',
+* });
+* return <svg><path d={path} fill="var(--card)" /></svg>;
+* ```
+*
+* @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+*/
+/**
+* Generate a parametric SVG morph path from dimensions and progress.
+*/
+function useMorphPath({ pillWidth, bodyWidth, totalHeight, progress, pillHeight = GOOEY_DEFAULTS.PILL_HEIGHT, direction = "down" }) {
+	return useMemo(() => {
+		return (direction === "up" ? morphPathUp : morphPathDown)(pillWidth, bodyWidth, totalHeight, progress, pillHeight);
+	}, [
+		pillWidth,
+		bodyWidth,
+		totalHeight,
+		progress,
+		pillHeight,
+		direction
+	]);
+}
+
+//#endregion
+export { useMorphPath };

package/dist/react-ui/primitives/waapi/index.d.ts

@@ -30,4 +30,6 @@ export { useMorphContext } from './Morph/MorphContext';
 export { useFLIPClipPath } from './Morph/techniques/useFLIPClipPath';
 export { useCSSGridMorph } from './Morph/techniques/useCSSGridMorph';
 export { useViewTransitions } from './Morph/techniques/useViewTransitions';
+export { GooeyFilter, GooeyCanvas, MorphPath, useMorphPath, GOOEY_DEFAULTS, computeBlur, buildColorMatrixValues, buildFilterString, morphPathDown, morphPathUp, } from './Gooey';
+export type { IGooeyFilterProps, IGooeyCanvasProps, IMorphPathProps, IUseMorphPathOptions, } from './Gooey';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/waapi/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAGlD,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,4BAA4B,EAC5B,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,cAAc,GACf,MAAM,QAAQ,CAAC;AAKhB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAC;AAK7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAK5G,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/waapi/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAGlD,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,4BAA4B,EAC5B,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,cAAc,GACf,MAAM,QAAQ,CAAC;AAKhB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAC;AAK7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAK5G,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAM3E,OAAO,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/dist/react-ui/primitives/waapi/index.js

@@ -16,3 +16,9 @@ import { useCSSGridMorph } from "./Morph/techniques/useCSSGridMorph.js";
 import { useViewTransitions } from "./Morph/techniques/useViewTransitions.js";
 import { useMorph } from "./Morph/useMorph.js";
 import { Morph } from "./Morph/index.js";
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, morphPathDown, morphPathUp } from "./Gooey/gooey-utils.js";
+import { GooeyFilter } from "./Gooey/GooeyFilter.js";
+import { GooeyCanvas } from "./Gooey/GooeyCanvas.js";
+import { useMorphPath } from "./Gooey/useMorphPath.js";
+import { MorphPath } from "./Gooey/MorphPath.js";
+import "./Gooey/index.js";

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

@@ -1,17 +1,35 @@
+/**
+ * DataCard style slots + CVA variants.
+ *
+ * Glassmorphism card for dashboard metrics/stats.
+ * Uses semantic CSS variables — theme-adaptive.
+ *
+ * @module @mks2508/mks-ui/react/ui/DataCard
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardLabel title="Revenue" />
+ *   <DataCardValue number={45678} unit="$" />
+ * </DataCard>
+ * ```
+ */
 import type { StyleSlots } from '../../../core/types';
 /**
- * Visual regions for: DataCard component family.
- * Each slot maps to: customizable visual region.
+ * Visual slots for DataCard component family.
  */
-export type DataCardSlot = 'root' | 'bracket' | 'header' | 'value' | 'label' | 'toggle' | 'actions' | 'footer';
+export type DataCardSlot = 'root' | 'bracket' | 'value' | 'label' | 'toggle' | 'actions';
 /**
- * Base style slots for: DataCard.
- * Uses glassmorphism pattern from: Synthwave Dark design system.
+ * Base style slots for DataCard.
  */
 export declare const dataCardStyles: StyleSlots<DataCardSlot>;
 /**
- * CVA variants for: DataCard root.
- * Combines glassmorphism with Synthwave Dark color scheme.
+ * CVA variants for DataCard root.
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="compact" glass>...</DataCard>
+ * ```
  */
 export declare const dataCardVariants: (props?: ({
     size?: "default" | "compact" | "spacious" | null | undefined;
@@ -19,17 +37,9 @@ export declare const dataCardVariants: (props?: ({
     glass?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * CVA variants for bracket visibility animation.
+ * Bracket visibility animation CVA.
  */
 export declare const bracketVariants: (props?: ({
     animate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * State-specific styles for DataCard interactions.
- */
-export declare const dataCardStateStyles: {
-    hovered: string;
-    pressed: string;
-    disabled: string;
-};
 //# sourceMappingURL=DataCard.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,CAAC;AAEb;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAgBnD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;8EAiF3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe;;8EAU1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC"}
+{"version":3,"file":"DataCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAOnD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB;;;;8EA2B3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe;;8EAU1B,CAAC"}

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

@@ -2,86 +2,56 @@ import { cva } from "class-variance-authority";
 
 //#region src/react-ui/ui/DataCard/DataCard.styles.ts
 /**
-* Base style slots for: DataCard.
-* Uses glassmorphism pattern from: Synthwave Dark design system.
+* DataCard style slots + CVA variants.
+*
+* Glassmorphism card for dashboard metrics/stats.
+* Uses semantic CSS variables — theme-adaptive.
+*
+* @module @mks2508/mks-ui/react/ui/DataCard
+*
+* @example
+* ```tsx
+* <DataCard variant="accent" size="default">
+*   <DataCardLabel title="Revenue" />
+*   <DataCardValue number={45678} unit="$" />
+* </DataCard>
+* ```
+*/
+/**
+* Base style slots for DataCard.
 */
 const dataCardStyles = {
 	root: "group/data-card relative isolate rounded-xl transition-all duration-300",
-	bracket: "absolute pointer-events-none transition-opacity duration-300",
-	header: "flex flex-col gap-1.5 px-5 pt-5 pb-2",
+	bracket: "absolute inset-0 pointer-events-none transition-opacity duration-300",
 	value: "flex items-baseline gap-1 tabular-nums tracking-tight",
 	label: "text-sm font-medium",
 	toggle: "flex items-center justify-between gap-3",
-	actions: "flex items-center gap-2",
-	footer: "mt-auto px-5 pb-4 pt-2"
+	actions: "flex items-center gap-2"
 };
 /**
-* CVA variants for: DataCard root.
-* Combines glassmorphism with Synthwave Dark color scheme.
+* CVA variants for DataCard root.
+*
+* @example
+* ```tsx
+* <DataCard variant="accent" size="compact" glass>...</DataCard>
+* ```
 */
 const dataCardVariants = cva(dataCardStyles.root, {
 	variants: {
 		size: {
-			compact: {
-				root: "p-3",
-				header: "gap-1 px-3 pt-3 pb-1.5",
-				footer: "px-3 pb-1.5 pt-1"
-			},
-			default: {
-				root: "p-4",
-				header: "gap-1.5 px-4 pt-4 pb-2",
-				footer: "px-4 pb-2 pt-2"
-			},
-			spacious: {
-				root: "p-6",
-				header: "gap-2 px-6 pt-6 pb-3",
-				footer: "px-6 pb-3 pt-2"
-			}
+			compact: "p-3",
+			default: "p-4",
+			spacious: "p-6"
 		},
 		variant: {
-			default: [
-				"bg-white/5",
-				"backdrop-blur-lg",
-				"border border-white/10",
-				"hover:bg-white/10",
-				"shadow-lg shadow-black/20"
-			].join(" "),
-			accent: [
-				"bg-cyan-500/10",
-				"backdrop-blur-lg",
-				"border border-cyan-400/30",
-				"hover:bg-cyan-500/20",
-				"shadow-cyan-500/20 shadow-lg"
-			].join(" "),
-			success: [
-				"bg-emerald-500/10",
-				"backdrop-blur-lg",
-				"border border-emerald-400/30",
-				"hover:bg-emerald-500/20",
-				"shadow-emerald-500/20 shadow-lg"
-			].join(" "),
-			warning: [
-				"bg-amber-500/10",
-				"backdrop-blur-lg",
-				"border border-amber-400/30",
-				"hover:bg-amber-500/20",
-				"shadow-amber-500/20 shadow-lg"
-			].join(" "),
-			destructive: [
-				"bg-red-500/10",
-				"backdrop-blur-lg",
-				"border border-red-400/30",
-				"hover:bg-red-500/20",
-				"shadow-red-500/20 shadow-lg"
-			].join(" ")
+			default: "bg-card/80 border border-border/50 shadow-lg shadow-black/10",
+			accent: "bg-accent/20 border border-accent/30 shadow-lg shadow-accent/10",
+			success: "bg-green-500/10 dark:bg-green-400/10 border border-green-500/30 dark:border-green-400/30 shadow-lg shadow-green-500/10",
+			warning: "bg-amber-500/10 dark:bg-amber-400/10 border border-amber-500/30 dark:border-amber-400/30 shadow-lg shadow-amber-500/10",
+			destructive: "bg-destructive/10 border border-destructive/30 shadow-lg shadow-destructive/10"
 		},
 		glass: {
-			true: [
-				"backdrop-blur-lg",
-				"bg-white/10",
-				"border border-white/20",
-				"shadow-xl"
-			].join(" "),
+			true: "backdrop-blur-lg",
 			false: ""
 		}
 	},
@@ -92,7 +62,7 @@ const dataCardVariants = cva(dataCardStyles.root, {
 	}
 });
 /**
-* CVA variants for bracket visibility animation.
+* Bracket visibility animation CVA.
 */
 const bracketVariants = cva(dataCardStyles.bracket, {
 	variants: { animate: {
@@ -101,14 +71,6 @@ const bracketVariants = cva(dataCardStyles.bracket, {
 	} },
 	defaultVariants: { animate: true }
 });
-/**
-* State-specific styles for DataCard interactions.
-*/
-const dataCardStateStyles = {
-	hovered: "scale-[1.02]",
-	pressed: "scale-[0.98]",
-	disabled: "opacity-50 pointer-events-none"
-};
 
 //#endregion
-export { dataCardStateStyles, dataCardStyles, dataCardVariants };
+export { dataCardStyles, dataCardVariants };

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

@@ -1,45 +1,41 @@
+/**
+ * DataCard type definitions.
+ *
+ * @module @mks2508/mks-ui/react/ui/DataCard
+ */
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides, IBaseConfig } from '../../../core/types';
 import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
 export type { DataCardSlot } from './DataCard.styles';
-/**
- * Available visual variants for DataCard.
- * - 'default' - Standard glassmorphism with neutral borders
- * - 'accent' - Cyan accent with primary glow
- * - 'success' - Green accent for positive data
- * - 'warning' - Amber accent for warnings
- * - 'destructive' - Red accent for critical data
- */
+/** Visual variant names */
 export type DataCardVariant = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
-/**
- * Size variants affecting padding and spacing.
- * - 'compact' - Dense layout for dashboards
- * - 'default' - Standard balanced spacing
- * - 'spacious' - More breathing room
- */
+/** Size variant names */
 export type DataCardSize = 'compact' | 'default' | 'spacious';
 /**
  * Interaction state for state-based styling.
- * Similar to Button's IButtonState pattern.
  */
 export interface IDataCardState {
-    /** Whether card content is hovered. */
+    /** Whether card is hovered */
     hovered: boolean;
-    /** Whether card is pressed/active. */
+    /** Whether card is pressed */
     pressed: boolean;
-    /** Whether card is disabled. */
+    /** Whether card is disabled */
     disabled: boolean;
 }
 /**
  * Configuration for DataCard behavior and animation.
- * Extends IBaseConfig with card-specific settings.
+ *
+ * @example
+ * ```tsx
+ * <DataCard config={{ animateBrackets: true, counterStiffness: 150 }}>...</DataCard>
+ * ```
  */
-export interface IDataCardConfig {
-    /** Enable/disable corner bracket animations. */
+export interface IDataCardConfig extends IBaseConfig {
+    /** Enable corner bracket hover animation (default: true) */
     animateBrackets?: boolean;
-    /** Spring stiffness for number counter. */
+    /** Spring stiffness for CountingNumber (default: 90) */
     counterStiffness?: number;
-    /** Spring damping for number counter. */
+    /** Spring damping for CountingNumber (default: 10) */
     counterDamping?: number;
 }
 /**
@@ -48,88 +44,72 @@ export interface IDataCardConfig {
  * @example
  * ```tsx
  * <DataCard variant="accent" size="default">
- *   <DataCardValue number={1234} />
- *   <DataCardToggle />
+ *   <DataCardLabel title="Revenue" description="This month" />
+ *   <DataCardValue number={45678} unit="$" />
  * </DataCard>
  * ```
  */
 export interface IDataCardProps extends VariantProps<typeof dataCardVariants> {
-    /** Visual style variant. */
+    /** Visual style variant */
     variant?: DataCardVariant;
-    /** Size variant affecting spacing. */
+    /** Size variant affecting spacing */
     size?: DataCardSize;
-    /** Whether card is disabled. */
+    /** Whether card is disabled */
     disabled?: boolean;
-    /** Override classes for card visual regions. */
+    /** Override classes per slot */
     slots?: SlotOverrides<DataCardSlot>;
-    /** Behavioral and animation configuration. */
+    /** Behavior/animation configuration */
     config?: IDataCardConfig;
-    /** CSS class or function returning class based on card state. */
+    /** CSS class or state-based class function */
     className?: string | ((state: IDataCardState) => string | undefined);
-    /** CSS styles or function returning styles based on card state. */
+    /** CSS styles or state-based styles function */
     style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
-    /** Enable glassmorphism effect (default: true). */
+    /** Enable glassmorphism blur (default: true) */
     glass?: boolean;
-    /** Show corner brackets (default: true). */
+    /** Show corner brackets (default: true) */
     showBrackets?: boolean;
-    /** Child elements. */
+    /** Child elements */
     children?: React.ReactNode;
 }
-/**
- * Props for DataCardValue - displays animated number.
- */
+/** Props for DataCardValue */
 export interface IDataCardValueProps {
-    /** Target number to animate to. */
+    /** Target number to animate to */
     number: number;
-    /** Label displayed above: number. */
+    /** Label displayed above number */
     label?: string;
-    /** Unit/suffix displayed after: number. */
+    /** Unit/suffix after number */
     unit?: string;
-    /** Decimal places for precision. */
+    /** Decimal places (default: 0) */
     decimalPlaces?: number;
-    /** Pad number with leading zeros. */
+    /** Pad number with leading zeros */
     padStart?: boolean;
 }
-/**
- * Props for DataCardLabel - title/description text.
- */
+/** Props for DataCardLabel */
 export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
-    /** Primary title text. */
+    /** Primary title text */
     title?: string;
-    /** Secondary description text. */
+    /** Secondary description */
     description?: string;
 }
-/**
- * Props for DataCardToggle - interactive switch element.
- */
+/** Props for DataCardToggle */
 export interface IDataCardToggleProps {
-    /** Whether toggle is checked. */
+    /** Whether toggle is checked */
     checked?: boolean;
-    /** Callback when toggle state changes. */
+    /** Callback when toggle changes */
     onCheckedChange?: (checked: boolean) => void;
-    /** Icon to show when checked (on). */
-    checkedIcon?: React.ReactNode;
-    /** Icon to show when unchecked (off). */
-    uncheckedIcon?: React.ReactNode;
-    /** Label for: toggle. */
+    /** Label for the toggle */
     label?: string;
-    /** Override classes for toggle regions. */
-    slots?: SlotOverrides<DataCardSlot>;
 }
-/**
- * Props for DataCardActions - action button container.
- */
+/** Props for DataCardActions */
 export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
-    /** Alignment of action buttons. */
+    /** Button alignment */
     align?: 'start' | 'center' | 'end';
 }
-/**
- * Props for DataCardBracket - decorative corner element.
- */
+/** Props for DataCardBracket */
 export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
-    /** Position of: bracket. */
+    /** Corner position */
     position: 'tl' | 'tr' | 'bl' | 'br';
-    /** Optional variant override for: this bracket. */
+    /** Variant override */
     variant?: 'default' | 'accent';
 }
 //# sourceMappingURL=DataCard.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.types.ts"],"names":[],"mappings":"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"}