@mks2508/mks-ui 0.1.4 → 0.2.1

package/dist/{components/ui/button/button.styles.js → react-ui/ui/Button/Button.styles.js}

@@ -1,12 +1,8 @@
 import { cva } from "class-variance-authority";
 
-//#region src/components/ui/button/button.styles.ts
+//#region src/react-ui/ui/Button/Button.styles.ts
 /**
-* Variantes de estilo para el componente Button usando CVA (Class Variance Authority).
-*
-* Define las combinaciones de variantes visuales soportadas:
-* - variant: default, secondary, destructive, outline, ghost, link, success, warning
-* - size: default, sm, lg, icon
+* CVA variants for the Button root.
 *
 * @see {@link https://cva.style/docs/getting-started/variants}
 */
@@ -34,9 +30,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-/**
-* Clases para estados específicos del botón.
-*/
+/** State-specific style classes for Button. */
 const buttonStateStyles = {
 	pressed: "scale-[0.98]",
 	disabled: "opacity-50 pointer-events-none"

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { buttonVariants, ButtonSlot } from './Button.styles';
+/** Button interaction state. */
+interface IButtonState {
+    /** Whether the button is disabled. */
+    disabled: boolean;
+    /** Whether the button is being pressed. */
+    pressed: boolean;
+}
+/**
+ * Props for the Button component.
+ *
+ * Supports state-based className/style functions, asChild composition,
+ * and custom render elements via Base UI.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="destructive" size="lg">Delete</Button>
+ * <Button asChild><a href="/link">Link</a></Button>
+ * <Button className={(state) => state.pressed ? 'scale-95' : ''}>Press</Button>
+ * ```
+ */
+interface IButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'>, VariantProps<typeof buttonVariants> {
+    /** Keep button focusable when disabled. */
+    focusableWhenDisabled?: boolean;
+    /** Whether the rendered element is a native button. */
+    nativeButton?: boolean;
+    /** Render as child element (Slot pattern). */
+    asChild?: boolean;
+    /** Custom render element or function. */
+    render?: React.ReactElement | ((props: React.HTMLProps<HTMLElement>, state: IButtonState) => React.ReactElement);
+    /** CSS class or function returning class based on button state. */
+    className?: string | ((state: IButtonState) => string | undefined);
+    /** CSS styles or function returning styles based on button state. */
+    style?: React.CSSProperties | ((state: IButtonState) => React.CSSProperties | undefined);
+    /** Override classes for button visual regions. */
+    slots?: SlotOverrides<ButtonSlot>;
+}
+/** Available button variants. */
+type ButtonVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'success' | 'warning';
+/** Available button sizes. */
+type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
+export type { IButtonProps, IButtonState, ButtonVariant, ButtonSize };
+//# sourceMappingURL=Button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/Button.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,cAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElE,gCAAgC;AAChC,UAAU,YAAY;IACpB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,UAAU,YACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAChF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EACH,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC;IACvF,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;IACnE,qEAAqE;IACrE,KAAK,CAAC,EACF,KAAK,CAAC,aAAa,GACnB,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC/D,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,iCAAiC;AACjC,KAAK,aAAa,GACd,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,CAAC;AAEd,8BAA8B;AAC9B,KAAK,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,22 @@
+import { buttonVariants, buttonStateStyles } from './Button.styles';
+import type { IButtonProps } from './Button.types';
+/**
+ * Button — interactive button built on Base UI with variants and state tracking.
+ *
+ * @param variant - Visual style: default, secondary, destructive, outline, ghost, link, success, warning
+ * @param size - Button size: default, sm, lg, icon
+ * @param asChild - Render as child element using Slot pattern
+ * @param focusableWhenDisabled - Keep button focusable when disabled
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default" size="lg">Click me</Button>
+ * <Button variant="destructive">Delete</Button>
+ * <Button asChild><a href="/link">Link Button</a></Button>
+ * ```
+ */
+declare function Button({ className, variant, size, focusableWhenDisabled, nativeButton, asChild, render, style, children, disabled, slots, onPointerDown, onPointerUp, onPointerLeave, ...props }: IButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants, buttonStateStyles };
+export type { IButtonProps, IButtonState, ButtonVariant, ButtonSize, } from './Button.types';
+export type { ButtonSlot } from './Button.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,gBAAgB,CAAC;AAsBjE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,qBAAqB,EACrB,YAAY,EACZ,OAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,YAAY,2CAqFd;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AACrD,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,UAAU,GACX,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { buttonStateStyles, buttonVariants } from "./Button.styles.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+
+//#region src/react-ui/ui/Button/index.tsx
+/**
+* Slot component for the asChild pattern.
+* Composes the button with another element passing all props and handlers.
+*/
+function Slot({ children, ...props }) {
+	const child = React.Children.only(children);
+	return React.cloneElement(child, {
+		...props,
+		...child.props,
+		className: cn(props.className, child.props.className),
+		style: {
+			...props.style,
+			...child.props.style
+		}
+	});
+}
+/**
+* Button — interactive button built on Base UI with variants and state tracking.
+*
+* @param variant - Visual style: default, secondary, destructive, outline, ghost, link, success, warning
+* @param size - Button size: default, sm, lg, icon
+* @param asChild - Render as child element using Slot pattern
+* @param focusableWhenDisabled - Keep button focusable when disabled
+*
+* @example
+* ```tsx
+* <Button variant="default" size="lg">Click me</Button>
+* <Button variant="destructive">Delete</Button>
+* <Button asChild><a href="/link">Link Button</a></Button>
+* ```
+*/
+function Button$1({ className, variant, size, focusableWhenDisabled, nativeButton, asChild = false, render, style, children, disabled, slots, onPointerDown, onPointerUp, onPointerLeave, ...props }) {
+	const [pressed, setPressed] = React.useState(false);
+	const handlePointerDown = React.useCallback((e) => {
+		setPressed(true);
+		onPointerDown?.(e);
+	}, [onPointerDown]);
+	const handlePointerUp = React.useCallback((e) => {
+		setPressed(false);
+		onPointerUp?.(e);
+	}, [onPointerUp]);
+	const handlePointerLeave = React.useCallback((e) => {
+		setPressed(false);
+		onPointerLeave?.(e);
+	}, [onPointerLeave]);
+	const state = {
+		disabled: disabled ?? false,
+		pressed
+	};
+	const baseClassName = cn(buttonVariants({
+		variant,
+		size
+	}), slots?.root, typeof className === "function" ? className(state) : className, pressed && buttonStateStyles.pressed);
+	const baseStyle = typeof style === "function" ? style(state) : style;
+	if (asChild && React.isValidElement(children)) return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		"data-pressed": pressed,
+		disabled,
+		focusableWhenDisabled,
+		className: baseClassName,
+		style: baseStyle,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onPointerLeave: handlePointerLeave,
+		...props,
+		children: /* @__PURE__ */ jsx(Slot, {
+			className: baseClassName,
+			style: baseStyle,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		"data-pressed": pressed,
+		disabled,
+		focusableWhenDisabled,
+		nativeButton,
+		render,
+		className: baseClassName,
+		style: baseStyle,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onPointerLeave: handlePointerLeave,
+		...props,
+		children
+	});
+}
+
+//#endregion
+export { Button$1 as Button };

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

@@ -0,0 +1,11 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Card component. */
+type CardSlot = 'root' | 'header' | 'title' | 'description' | 'action' | 'content' | 'footer';
+declare const cardStyles: StyleSlots<CardSlot>;
+/** CVA variants for the Card root. */
+declare const cardVariants: (props?: ({
+    variant?: "default" | "glass" | "glass-accent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { cardStyles, cardVariants };
+export type { CardSlot };
+//# sourceMappingURL=Card.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Card/Card.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,6CAA6C;AAC7C,KAAK,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9F,QAAA,MAAM,UAAU,EAAE,UAAU,CAAC,QAAQ,CAQpC,CAAC;AAEF,sCAAsC;AACtC,QAAA,MAAM,YAAY;;8EAWhB,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;AACpC,YAAY,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/Card/Card.styles.ts
+const cardStyles = {
+	root: "flex flex-col gap-6 rounded-xl border transition-all",
+	header: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+	title: "leading-none font-semibold",
+	description: "text-muted-foreground text-sm",
+	action: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+	content: "px-6",
+	footer: "flex items-center px-6 [.border-t]:pt-6"
+};
+/** CVA variants for the Card root. */
+const cardVariants = cva(cardStyles.root, {
+	variants: { variant: {
+		default: "bg-card text-card-foreground py-6 shadow-sm",
+		glass: "bg-card/70 backdrop-blur-md border-border shadow-[0_4px_20px_rgba(0,0,0,0.19)]",
+		"glass-accent": "bg-card/70 backdrop-blur-md border-border-primary shadow-[0_4px_20px_rgba(212,12,103,0.25)]"
+	} },
+	defaultVariants: { variant: "default" }
+});
+
+//#endregion
+export { cardStyles, cardVariants };

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

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { cardVariants, CardSlot } from './Card.styles';
+/** Props for the Card component. */
+interface ICardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
+    /** Override classes for card visual regions. */
+    slots?: SlotOverrides<CardSlot>;
+}
+/** Props for CardHeader. */
+type ICardHeaderProps = React.ComponentProps<'div'>;
+/** Props for CardTitle. */
+type ICardTitleProps = React.ComponentProps<'div'>;
+/** Props for CardDescription. */
+type ICardDescriptionProps = React.ComponentProps<'div'>;
+/** Props for CardAction. */
+type ICardActionProps = React.ComponentProps<'div'>;
+/** Props for CardContent. */
+type ICardContentProps = React.ComponentProps<'div'>;
+/** Props for CardFooter. */
+type ICardFooterProps = React.ComponentProps<'div'>;
+export type { ICardProps, ICardHeaderProps, ICardTitleProps, ICardDescriptionProps, ICardActionProps, ICardContentProps, ICardFooterProps, };
+//# sourceMappingURL=Card.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Card/Card.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,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE5D,oCAAoC;AACpC,UAAU,UACR,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,gDAAgD;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CACjC;AAED,4BAA4B;AAC5B,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,2BAA2B;AAC3B,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnD,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEzD,4BAA4B;AAC5B,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,6BAA6B;AAC7B,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAErD,4BAA4B;AAC5B,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,CAAC"}

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

@@ -0,0 +1,36 @@
+import { cardVariants } from './Card.styles';
+import type { ICardProps, ICardHeaderProps, ICardTitleProps, ICardDescriptionProps, ICardActionProps, ICardContentProps, ICardFooterProps } from './Card.types';
+/**
+ * Card — container with variants for default, glass, and glass-accent styles.
+ *
+ * @param variant - Visual style: 'default', 'glass', or 'glass-accent'
+ * @param slots - Override classes for card visual regions
+ *
+ * @example
+ * ```tsx
+ * <Card variant="glass">
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *     <CardDescription>Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ */
+declare function Card({ className, variant, slots, ...props }: ICardProps): import("react/jsx-runtime").JSX.Element;
+/** Card header section with grid layout for title/action. */
+declare function CardHeader({ className, ...props }: ICardHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Card title text. */
+declare function CardTitle({ className, ...props }: ICardTitleProps): import("react/jsx-runtime").JSX.Element;
+/** Card description text. */
+declare function CardDescription({ className, ...props }: ICardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/** Card action slot positioned in the header. */
+declare function CardAction({ className, ...props }: ICardActionProps): import("react/jsx-runtime").JSX.Element;
+/** Card content area. */
+declare function CardContent({ className, ...props }: ICardContentProps): import("react/jsx-runtime").JSX.Element;
+/** Card footer area. */
+declare function CardFooter({ className, ...props }: ICardFooterProps): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, cardVariants, };
+export type { ICardProps, ICardHeaderProps, ICardTitleProps, ICardDescriptionProps, ICardActionProps, ICardContentProps, ICardFooterProps, } from './Card.types';
+export type { CardSlot } from './Card.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Card/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,YAAY,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAShE;AAED,6DAA6D;AAC7D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ5D;AAED,uBAAuB;AACvB,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAQ1D;AAED,6BAA6B;AAC7B,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAQtE;AAED,iDAAiD;AACjD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ5D;AAED,yBAAyB;AACzB,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQ9D;AAED,wBAAwB;AACxB,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ5D;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,YAAY,GACb,CAAC;AAEF,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,82 @@
+import { cn } from "../../lib/utils.js";
+import { cardStyles, cardVariants } from "./Card.styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/Card/index.tsx
+/**
+* Card — container with variants for default, glass, and glass-accent styles.
+*
+* @param variant - Visual style: 'default', 'glass', or 'glass-accent'
+* @param slots - Override classes for card visual regions
+*
+* @example
+* ```tsx
+* <Card variant="glass">
+*   <CardHeader>
+*     <CardTitle>Title</CardTitle>
+*     <CardDescription>Description</CardDescription>
+*   </CardHeader>
+*   <CardContent>Content</CardContent>
+* </Card>
+* ```
+*/
+function Card({ className, variant, slots, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-variant": variant,
+		className: cn(cardVariants({ variant }), slots?.root, className),
+		...props
+	});
+}
+/** Card header section with grid layout for title/action. */
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn(cardStyles.header, className),
+		...props
+	});
+}
+/** Card title text. */
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cn(cardStyles.title, className),
+		...props
+	});
+}
+/** Card description text. */
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cn(cardStyles.description, className),
+		...props
+	});
+}
+/** Card action slot positioned in the header. */
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cn(cardStyles.action, className),
+		...props
+	});
+}
+/** Card content area. */
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn(cardStyles.content, className),
+		...props
+	});
+}
+/** Card footer area. */
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn(cardStyles.footer, className),
+		...props
+	});
+}
+
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,25 @@
+/**
+ * Style slots and CVA variants for the Checkbox component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Checkbox/Checkbox.styles
+ */
+import type { StyleSlots } from '../../../core/types';
+import type { CheckboxSlot } from './Checkbox.types';
+/**
+ * Default style slots for the Checkbox component.
+ * Each key maps to a visual region with its base Tailwind classes.
+ *
+ * - `root` - The outer checkbox button with border, sizing, and focus styles
+ * - `indicator` - The SVG indicator element with sizing
+ *
+ * @example
+ * ```typescript
+ * import { checkboxStyles } from './Checkbox.styles';
+ *
+ * // Access the root slot classes
+ * const rootClasses = checkboxStyles.root;
+ * // 'inline-flex items-center justify-center ...'
+ * ```
+ */
+export declare const checkboxStyles: StyleSlots<CheckboxSlot>;
+//# sourceMappingURL=Checkbox.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAanD,CAAC"}

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

@@ -0,0 +1,34 @@
+//#region src/react-ui/ui/Checkbox/Checkbox.styles.ts
+/**
+* Default style slots for the Checkbox component.
+* Each key maps to a visual region with its base Tailwind classes.
+*
+* - `root` - The outer checkbox button with border, sizing, and focus styles
+* - `indicator` - The SVG indicator element with sizing
+*
+* @example
+* ```typescript
+* import { checkboxStyles } from './Checkbox.styles';
+*
+* // Access the root slot classes
+* const rootClasses = checkboxStyles.root;
+* // 'inline-flex items-center justify-center ...'
+* ```
+*/
+const checkboxStyles = {
+	root: [
+		"inline-flex items-center justify-center",
+		"size-5 shrink-0 rounded-sm",
+		"border border-input",
+		"shadow-xs",
+		"transition-colors",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+		"disabled:cursor-not-allowed disabled:opacity-50",
+		"data-[checked]:bg-primary data-[checked]:text-primary-foreground data-[checked]:border-primary",
+		"data-[indeterminate]:bg-primary data-[indeterminate]:text-primary-foreground data-[indeterminate]:border-primary"
+	].join(" "),
+	indicator: "size-4"
+};
+
+//#endregion
+export { checkboxStyles };

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

@@ -0,0 +1,88 @@
+/**
+ * Type definitions for the Checkbox component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Checkbox/Checkbox.types
+ */
+import type { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import type { HTMLMotionProps, SVGMotionProps } from 'motion/react';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+/**
+ * Available style slot names for the Checkbox component.
+ * Each slot maps to a visual region that can be customized via the `slots` prop.
+ *
+ * - `root` - The outer checkbox button element
+ * - `indicator` - The SVG checkmark/indeterminate indicator
+ *
+ * @example
+ * ```tsx
+ * <Checkbox slots={{ root: 'border-cyan-400', indicator: 'text-cyan-400' }} />
+ * ```
+ */
+export type CheckboxSlot = 'root' | 'indicator';
+/**
+ * Internal context type for Checkbox state management.
+ * Shared between the Checkbox root and its child components via React context.
+ */
+export type CheckboxContextType = {
+    /** Whether the checkbox is currently checked. */
+    isChecked: boolean;
+    /** Callback to update the checked state. */
+    setIsChecked: ICheckboxProps['onCheckedChange'];
+    /** Whether the checkbox is in an indeterminate state. */
+    isIndeterminate: boolean | undefined;
+};
+/**
+ * Configuration options for Checkbox behavior and animation.
+ * Extends the base config with checkbox-specific settings.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox config={{ animation: { duration: 0.2 } }} />
+ * ```
+ */
+export interface ICheckboxConfig extends IBaseConfig {
+    /**
+     * Scale factor applied when the checkbox is tapped.
+     * @defaultValue 0.95
+     */
+    tapScale?: number;
+    /**
+     * Scale factor applied when the checkbox is hovered.
+     * @defaultValue 1.05
+     */
+    hoverScale?: number;
+}
+/**
+ * Props for the Checkbox root component.
+ * Combines Base UI Checkbox.Root props (without `render`) with Motion button props,
+ * plus slot overrides and configuration.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   checked={isChecked}
+ *   onCheckedChange={setIsChecked}
+ *   slots={{ root: 'rounded-md border-2 border-zinc-600' }}
+ * />
+ * ```
+ */
+export type ICheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'render'> & HTMLMotionProps<'button'> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<CheckboxSlot>;
+    /** Behavioral and animation configuration. */
+    config?: ICheckboxConfig;
+};
+/**
+ * Props for the CheckboxIndicator sub-component.
+ * Extends SVG motion props for the animated checkmark/indeterminate indicator.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxIndicator className="size-4" />
+ * ```
+ */
+export type ICheckboxIndicatorProps = SVGMotionProps<SVGSVGElement> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<CheckboxSlot>;
+};
+//# sourceMappingURL=Checkbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE/D;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,WAAW,CAAC;AAEhD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,YAAY,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IAChD,yDAAyD;IACzD,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnD,QAAQ,CACT,GACC,eAAe,CAAC,QAAQ,CAAC,GAAG;IAC1B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEJ;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC"}

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

@@ -0,0 +1,59 @@
+import type { CheckboxContextType, ICheckboxProps, ICheckboxIndicatorProps } from './Checkbox.types';
+declare const useCheckbox: () => CheckboxContextType;
+/**
+ * Checkbox root component with animated tap and hover interactions.
+ *
+ * Wraps Base UI `Checkbox.Root` with a `motion.button` render element,
+ * providing spring-based press and hover scale animations. Supports both
+ * controlled and uncontrolled checked state via `useControlledState`.
+ *
+ * @param props - Checkbox props including Base UI root props, motion props, slots, and config
+ * @returns A checkbox button element with animation support
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   checked={isChecked}
+ *   onCheckedChange={setIsChecked}
+ *   slots={{ root: 'border-2 border-cyan-500 rounded-md' }}
+ * >
+ *   <CheckboxIndicator />
+ * </Checkbox>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Indeterminate state
+ * <Checkbox indeterminate>
+ *   <CheckboxIndicator />
+ * </Checkbox>
+ * ```
+ */
+declare function Checkbox({ name, checked, defaultChecked, onCheckedChange, indeterminate, value, nativeButton, parent, disabled, readOnly, required, inputRef, id, className, slots, config, ...props }: ICheckboxProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * CheckboxIndicator renders an animated SVG checkmark or indeterminate line.
+ *
+ * Uses Motion `pathLength` and `opacity` variants for smooth check/uncheck
+ * transitions. Remains mounted (`keepMounted`) to enable exit animations.
+ *
+ * @param props - SVG motion props plus optional slot overrides
+ * @returns An animated SVG indicator element
+ *
+ * @example
+ * ```tsx
+ * <Checkbox checked={isChecked} onCheckedChange={setIsChecked}>
+ *   <CheckboxIndicator className="size-4 text-white" />
+ * </Checkbox>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With slot overrides
+ * <CheckboxIndicator slots={{ indicator: 'size-3.5' }} />
+ * ```
+ */
+declare function CheckboxIndicator({ className, slots, ...props }: ICheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export { Checkbox, CheckboxIndicator, useCheckbox, };
+export type { ICheckboxProps, ICheckboxIndicatorProps, ICheckboxConfig, CheckboxContextType, CheckboxSlot, } from './Checkbox.types';
+export { checkboxStyles } from './Checkbox.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Checkbox/index.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,aAAa,EACb,KAAK,EACL,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,2CAwChB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CA6DjF;AAED,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,WAAW,GACZ,CAAC;AAGF,YAAY,EACV,cAAc,EACd,uBAAuB,EACvB,eAAe,EACf,mBAAmB,EACnB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}