@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -0,0 +1,114 @@
+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.
+*/
+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",
+	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"
+};
+/**
+* CVA variants for: DataCard root.
+* Combines glassmorphism with Synthwave Dark color scheme.
+*/
+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"
+			}
+		},
+		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(" ")
+		},
+		glass: {
+			true: [
+				"backdrop-blur-lg",
+				"bg-white/10",
+				"border border-white/20",
+				"shadow-xl"
+			].join(" "),
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		glass: true
+	}
+});
+/**
+* CVA variants for bracket visibility animation.
+*/
+const bracketVariants = cva(dataCardStyles.bracket, {
+	variants: { animate: {
+		true: "opacity-60 group-hover/data-card:opacity-100 transition-opacity",
+		false: "opacity-50"
+	} },
+	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 };

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

@@ -0,0 +1,135 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } 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
+ */
+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
+ */
+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. */
+    hovered: boolean;
+    /** Whether card is pressed/active. */
+    pressed: boolean;
+    /** Whether card is disabled. */
+    disabled: boolean;
+}
+/**
+ * Configuration for DataCard behavior and animation.
+ * Extends IBaseConfig with card-specific settings.
+ */
+export interface IDataCardConfig {
+    /** Enable/disable corner bracket animations. */
+    animateBrackets?: boolean;
+    /** Spring stiffness for number counter. */
+    counterStiffness?: number;
+    /** Spring damping for number counter. */
+    counterDamping?: number;
+}
+/**
+ * Props for DataCard root component.
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardValue number={1234} />
+ *   <DataCardToggle />
+ * </DataCard>
+ * ```
+ */
+export interface IDataCardProps extends VariantProps<typeof dataCardVariants> {
+    /** Visual style variant. */
+    variant?: DataCardVariant;
+    /** Size variant affecting spacing. */
+    size?: DataCardSize;
+    /** Whether card is disabled. */
+    disabled?: boolean;
+    /** Override classes for card visual regions. */
+    slots?: SlotOverrides<DataCardSlot>;
+    /** Behavioral and animation configuration. */
+    config?: IDataCardConfig;
+    /** CSS class or function returning class based on card state. */
+    className?: string | ((state: IDataCardState) => string | undefined);
+    /** CSS styles or function returning styles based on card state. */
+    style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
+    /** Enable glassmorphism effect (default: true). */
+    glass?: boolean;
+    /** Show corner brackets (default: true). */
+    showBrackets?: boolean;
+    /** Child elements. */
+    children?: React.ReactNode;
+}
+/**
+ * Props for DataCardValue - displays animated number.
+ */
+export interface IDataCardValueProps {
+    /** Target number to animate to. */
+    number: number;
+    /** Label displayed above: number. */
+    label?: string;
+    /** Unit/suffix displayed after: number. */
+    unit?: string;
+    /** Decimal places for precision. */
+    decimalPlaces?: number;
+    /** Pad number with leading zeros. */
+    padStart?: boolean;
+}
+/**
+ * Props for DataCardLabel - title/description text.
+ */
+export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
+    /** Primary title text. */
+    title?: string;
+    /** Secondary description text. */
+    description?: string;
+}
+/**
+ * Props for DataCardToggle - interactive switch element.
+ */
+export interface IDataCardToggleProps {
+    /** Whether toggle is checked. */
+    checked?: boolean;
+    /** Callback when toggle state 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?: string;
+    /** Override classes for toggle regions. */
+    slots?: SlotOverrides<DataCardSlot>;
+}
+/**
+ * Props for DataCardActions - action button container.
+ */
+export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
+    /** Alignment of action buttons. */
+    align?: 'start' | 'center' | 'end';
+}
+/**
+ * Props for DataCardBracket - decorative corner element.
+ */
+export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
+    /** Position of: bracket. */
+    position: 'tl' | 'tr' | 'bl' | 'br';
+    /** Optional variant override for: this bracket. */
+    variant?: 'default' | 'accent';
+}
+//# sourceMappingURL=DataCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAE3F;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cACf,SAAQ,YAAY,CAAC,OAAO,gBAAgB,CAAC;IAC7C,4BAA4B;IAC5B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;IACrE,mEAAmE;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC3F,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,sCAAsC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yCAAyC;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACxE,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACxE,4BAA4B;IAC5B,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC"}

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

@@ -0,0 +1,129 @@
+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.
+ */
+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. */
+    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
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardValue number={1234} />
+ *   <DataCardToggle />
+ * </DataCard>
+ * ```
+ */
+declare function DataCard({ variant, size, disabled, glass, showBrackets, className, style, slots, config, children, ...props }: IDataCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardValue — displays animated number with CountingNumber.
+ *
+ * @example
+ * ```tsx
+ * <DataCardValue
+ *   number={1234}
+ *   label="Active Users"
+ *   unit="users"
+ * />
+ * ```
+ */
+declare function DataCardValue({ number, label, unit, decimalPlaces, padStart, }: IDataCardValueProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardLabel — displays title and description.
+ *
+ * @example
+ * ```tsx
+ * <DataCardLabel
+ *   title="Revenue"
+ *   description="This month"
+ * />
+ * ```
+ */
+declare function DataCardLabel({ title, description, className, ...props }: IDataCardLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardToggle — interactive switch element.
+ *
+ * Uses asChild pattern for composition with Switch component.
+ *
+ * @example
+ * ```tsx
+ * <DataCardToggle
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ *   label="Enable notifications"
+ *   checkedIcon={<BellIcon />}
+ *   uncheckedIcon={<BellOffIcon />}
+ * />
+ * ```
+ */
+declare function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label, }: IDataCardToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataCardActions — container for action buttons.
+ *
+ * @example
+ * ```tsx
+ * <DataCardActions align="end">
+ *   <Button size="sm">Edit</Button>
+ *   <Button size="sm" variant="ghost">Delete</Button>
+ * </DataCardActions>
+ * ```
+ */
+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
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { variant, size, disabled } = useDataCard();
+ *   return <div>Current variant: {variant}</div>;
+ * }
+ * ```
+ */
+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';
+export { dataCardStyles } from './DataCard.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,276 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+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 * 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.
+*
+* 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
+*
+* @example
+* ```tsx
+* <DataCard variant="accent" size="default">
+*   <DataCardValue number={1234} />
+*   <DataCardToggle />
+* </DataCard>
+* ```
+*/
+function DataCard({ variant = "default", size = "default", disabled = false, glass = true, showBrackets = true, className, style, slots, config, children, ...props }) {
+	const [state, setState] = React$1.useState({
+		hovered: false,
+		pressed: false,
+		disabled: disabled ?? false
+	});
+	const contextValue = React$1.useMemo(() => ({
+		variant,
+		size,
+		disabled: disabled ?? false,
+		glass,
+		slots,
+		setState
+	}), [
+		variant,
+		size,
+		disabled,
+		glass,
+		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]);
+	return /* @__PURE__ */ jsx(DataCardProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(motion.div, {
+			"data-slot": "data-card",
+			"data-variant": variant,
+			"data-size": size,
+			"data-disabled": disabled || void 0,
+			"aria-disabled": disabled || void 0,
+			className: cn(dataCardVariants({
+				variant,
+				size,
+				glass
+			}), slots?.root, computedClassName, state.hovered && dataCardStateStyles.hovered, state.pressed && dataCardStateStyles.pressed, disabled && dataCardStateStyles.disabled),
+			style: computedStyle,
+			onHoverStart: () => setState((prev) => ({
+				...prev,
+				hovered: true
+			})),
+			onHoverEnd: () => setState((prev) => ({
+				...prev,
+				hovered: false
+			})),
+			onTapStart: () => setState((prev) => ({
+				...prev,
+				pressed: true
+			})),
+			onTap: () => setState((prev) => ({
+				...prev,
+				pressed: false
+			})),
+			onTapCancel: () => setState((prev) => ({
+				...prev,
+				pressed: false
+			})),
+			...props,
+			children: [showBrackets && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "tl",
+					variant: variant === "accent" ? "accent" : "default"
+				}),
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "tr",
+					variant: variant === "accent" ? "accent" : "default"
+				}),
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "bl",
+					variant: variant === "accent" ? "accent" : "default"
+				}),
+				/* @__PURE__ */ jsx(DataCardBracket, {
+					position: "br",
+					variant: variant === "accent" ? "accent" : "default"
+				})
+			] }), children]
+		})
+	});
+}
+/**
+* DataCardValue — displays animated number with CountingNumber.
+*
+* @example
+* ```tsx
+* <DataCardValue
+*   number={1234}
+*   label="Active Users"
+*   unit="users"
+* />
+* ```
+*/
+function DataCardValue({ number, label, unit, decimalPlaces = 0, padStart = false }) {
+	const { variant, size } = useDataCard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-card-value",
+		className: cn(dataCardStyles.value),
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs uppercase tracking-wider font-mono",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(CountingNumber, {
+				number,
+				decimalPlaces,
+				padStart,
+				transition: {
+					stiffness: variant === "accent" ? 150 : 90,
+					damping: variant === "accent" ? 20 : 10
+				},
+				className: size === "compact" ? "text-3xl font-bold" : size === "spacious" ? "text-5xl font-bold" : "text-4xl font-bold"
+			}),
+			unit && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-lg ml-1",
+				children: unit
+			})
+		]
+	});
+}
+/**
+* DataCardLabel — displays title and description.
+*
+* @example
+* ```tsx
+* <DataCardLabel
+*   title="Revenue"
+*   description="This month"
+* />
+* ```
+*/
+function DataCardLabel({ title, description, className, ...props }) {
+	const { slots } = useDataCard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-card-label",
+		className: cn(dataCardStyles.label, slots?.label, className),
+		...props,
+		children: [title && /* @__PURE__ */ jsx("h3", {
+			className: "text-foreground font-semibold",
+			children: title
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: description
+		})]
+	});
+}
+/**
+* DataCardToggle — interactive switch element.
+*
+* Uses asChild pattern for composition with Switch component.
+*
+* @example
+* ```tsx
+* <DataCardToggle
+*   checked={enabled}
+*   onCheckedChange={setEnabled}
+*   label="Enable notifications"
+*   checkedIcon={<BellIcon />}
+*   uncheckedIcon={<BellOffIcon />}
+* />
+* ```
+*/
+function DataCardToggle({ checked, onCheckedChange, checkedIcon, uncheckedIcon, label }) {
+	const { disabled, variant, size, glass, 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, {
+			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
+				})
+			]
+		})]
+	});
+}
+/**
+* DataCardActions — container for action buttons.
+*
+* @example
+* ```tsx
+* <DataCardActions align="end">
+*   <Button size="sm">Edit</Button>
+*   <Button size="sm" variant="ghost">Delete</Button>
+* </DataCardActions>
+* ```
+*/
+function DataCardActions({ align = "end", className, children, ...props }) {
+	const { variant, size, glass, slots } = useDataCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-card-actions",
+		"data-align": align,
+		className: cn(dataCardStyles.actions, align === "center" && "justify-center", align === "start" && "justify-start", align === "end" && "justify-end", slots?.actions, className),
+		...props,
+		children
+	});
+}
+/**
+* DataCardBracket — decorative corner bracket.
+*
+* Wraps CornerBracket with motion animations.
+*
+* @example
+* ```tsx
+* <DataCardBracket position="tl" variant="accent" />
+* ```
+*/
+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"]
+		})
+	});
+}
+
+//#endregion
+export { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard };

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAkC/C,CAAC"}