@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -0,0 +1,319 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { AlertDialogStyles } from "./AlertDialog.styles.js";
+import "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+
+//#region src/react-ui/ui/AlertDialog/index.tsx
+const [AlertDialogProvider, useAlertDialog] = getStrictContext("AlertDialogContext");
+/**
+* Root AlertDialog component. Manages open state and provides context
+* to all child sub-components.
+*
+* Supports both controlled (`open` + `onOpenChange`) and uncontrolled
+* (`defaultOpen`) usage patterns.
+*
+* @param props - {@link IAlertDialogProps}
+* @returns The rendered alert dialog root
+*
+* @example
+* ```tsx
+* // Uncontrolled
+* <AlertDialog>
+*   <AlertDialogTrigger>Open</AlertDialogTrigger>
+*   <AlertDialogPortal>...</AlertDialogPortal>
+* </AlertDialog>
+*
+* // Controlled
+* const [open, setOpen] = useState(false);
+* <AlertDialog open={open} onOpenChange={setOpen}>
+*   ...
+* </AlertDialog>
+* ```
+*/
+function AlertDialog$1({ slots: _slots, config: _config, ...props }) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(AlertDialogProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(AlertDialog.Root, {
+			"data-slot": "alert-dialog",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+/**
+* Button that opens the AlertDialog when clicked.
+* Renders as a button element by default.
+*
+* @param props - {@link IAlertDialogTriggerProps}
+* @returns The rendered trigger button
+*
+* @example
+* ```tsx
+* <AlertDialogTrigger className="bg-destructive text-destructive-foreground">
+*   Delete Account
+* </AlertDialogTrigger>
+* ```
+*/
+function AlertDialogTrigger({ slots: _slots, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+/**
+* Portal wrapper that renders alert dialog content outside the DOM hierarchy.
+* Manages AnimatePresence for enter/exit animations of the backdrop and popup.
+*
+* The portal is automatically kept mounted for exit animations and only
+* renders its children when the dialog is open.
+*
+* @param props - {@link IAlertDialogPortalProps}
+* @returns The rendered portal with AnimatePresence
+*
+* @example
+* ```tsx
+* <AlertDialogPortal>
+*   <AlertDialogBackdrop />
+*   <AlertDialogPopup>...</AlertDialogPopup>
+* </AlertDialogPortal>
+* ```
+*/
+function AlertDialogPortal(props) {
+	const { isOpen } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		keepMounted: true,
+		...props
+	}) });
+}
+/**
+* Semi-transparent overlay behind the alert dialog.
+* Animates in with a fade and optional blur effect.
+*
+* @param props - {@link IAlertDialogBackdropProps}
+* @returns The rendered animated backdrop
+*
+* @example
+* ```tsx
+* // Default backdrop
+* <AlertDialogBackdrop />
+*
+* // Custom backdrop with blur
+* <AlertDialogBackdrop
+*   className="bg-black/60 backdrop-blur-md"
+*   transition={{ duration: 0.3 }}
+* />
+* ```
+*/
+function AlertDialogBackdrop({ transition = {
+	duration: .2,
+	ease: "easeInOut"
+}, slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-backdrop",
+		render: /* @__PURE__ */ jsx(motion.div, {
+			className: cn(AlertDialogStyles.backdrop, slots?.backdrop, className),
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			transition,
+			...props
+		}, "alert-dialog-backdrop")
+	});
+}
+/**
+* Main dialog container with a 3D perspective flip animation.
+*
+* The `from` prop controls which direction the dialog flips from:
+* - `top` / `bottom` rotate around the X axis
+* - `left` / `right` rotate around the Y axis
+*
+* Uses spring physics for a natural, bouncy entrance.
+*
+* @param props - {@link IAlertDialogPopupProps}
+* @returns The rendered animated popup
+*
+* @example
+* ```tsx
+* // Flip from top (default)
+* <AlertDialogPopup>...</AlertDialogPopup>
+*
+* // Flip from bottom with custom spring
+* <AlertDialogPopup
+*   from="bottom"
+*   transition={{ type: 'spring', stiffness: 200, damping: 30 }}
+* >
+*   ...
+* </AlertDialogPopup>
+* ```
+*/
+function AlertDialogPopup({ from = "top", initialFocus, finalFocus, transition = {
+	type: "spring",
+	stiffness: 150,
+	damping: 25
+}, slots, className, ...props }) {
+	const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
+	const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
+	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		initialFocus,
+		finalFocus,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "alert-dialog-popup",
+			className: cn(AlertDialogStyles.popup, slots?.popup, className),
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)",
+				transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			transition,
+			...props
+		}, "alert-dialog-popup")
+	});
+}
+/**
+* Button that closes the AlertDialog when clicked.
+* Typically used in the footer alongside a confirm action.
+*
+* @param props - {@link IAlertDialogCloseProps}
+* @returns The rendered close button
+*
+* @example
+* ```tsx
+* <AlertDialogClose className="border border-border px-4 py-2 rounded-md">
+*   Cancel
+* </AlertDialogClose>
+* ```
+*/
+function AlertDialogClose({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-close",
+		className: cn(AlertDialogStyles.close, slots?.close, className),
+		...props
+	});
+}
+/**
+* Layout wrapper for the dialog title and description.
+* Provides consistent spacing and text alignment.
+*
+* @param props - {@link IAlertDialogHeaderProps}
+* @returns The rendered header container
+*
+* @example
+* ```tsx
+* <AlertDialogHeader>
+*   <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+*   <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+* </AlertDialogHeader>
+* ```
+*/
+function AlertDialogHeader({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn(AlertDialogStyles.header, slots?.header, className),
+		...props
+	});
+}
+/**
+* Layout wrapper for dialog action buttons.
+* Uses responsive flex layout: column on mobile, row on desktop.
+*
+* @param props - {@link IAlertDialogFooterProps}
+* @returns The rendered footer container
+*
+* @example
+* ```tsx
+* <AlertDialogFooter>
+*   <AlertDialogClose>Cancel</AlertDialogClose>
+*   <Button variant="destructive" onClick={handleDelete}>
+*     Delete
+*   </Button>
+* </AlertDialogFooter>
+* ```
+*/
+function AlertDialogFooter({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn(AlertDialogStyles.footer, slots?.footer, className),
+		...props
+	});
+}
+/**
+* Title element for the AlertDialog.
+* Automatically associated with the dialog for accessibility via Base UI.
+*
+* @param props - {@link IAlertDialogTitleProps}
+* @returns The rendered title element
+*
+* @example
+* ```tsx
+* <AlertDialogTitle className="text-destructive">
+*   Delete Workspace
+* </AlertDialogTitle>
+* ```
+*/
+function AlertDialogTitle({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn(AlertDialogStyles.title, slots?.title, className),
+		...props
+	});
+}
+/**
+* Description element for the AlertDialog.
+* Provides additional context about the action being confirmed.
+* Automatically associated with the dialog for accessibility via Base UI.
+*
+* @param props - {@link IAlertDialogDescriptionProps}
+* @returns The rendered description element
+*
+* @example
+* ```tsx
+* <AlertDialogDescription>
+*   This will permanently delete the workspace and all associated data.
+*   This action cannot be undone.
+* </AlertDialogDescription>
+* ```
+*/
+function AlertDialogDescription({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn(AlertDialogStyles.description, slots?.description, className),
+		...props
+	});
+}
+
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, useAlertDialog };

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Badge/Badge.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,8CAA8C;AAC9C,KAAK,SAAS,GAAG,MAAM,CAAC;AAExB,QAAA,MAAM,WAAW,EAAE,UAAU,CAAC,SAAS,CAEtC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,aAAa;;;8EAwBlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,CAAC"}

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

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/Badge/Badge.styles.ts
+/**
+* CVA variants for the Badge root.
+*
+* @see {@link https://cva.style/docs/getting-started/variants}
+*/
+const badgeVariants = cva("inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: {
+		variant: {
+			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+			secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+			outline: "text-foreground"
+		},
+		size: {
+			default: "h-6 px-2.5 py-0.5",
+			sm: "h-5 px-2 text-[10px]",
+			lg: "h-7 px-3 text-sm"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
+//#endregion
+export { badgeVariants };

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Badge/Badge.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,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE/D;;;;;;;GAOG;AACH,UAAU,WACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,gCAAgC;AAChC,KAAK,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;AAExE,6BAA6B;AAC7B,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Badge/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAUxE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1E,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,34 @@
+import { cn } from "../../lib/utils.js";
+import { badgeVariants } from "./Badge.styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/Badge/index.tsx
+/**
+* Badge — displays status labels, categories, or indicators.
+*
+* @param variant - Visual style: 'default', 'secondary', 'destructive', 'outline'
+* @param size - Badge size: 'default', 'sm', 'lg'
+* @param slots - Override classes for badge visual regions
+*
+* @example
+* ```tsx
+* <Badge variant="secondary">New</Badge>
+* <Badge variant="destructive" size="sm">Error</Badge>
+* ```
+*/
+function Badge({ className, variant, size, slots, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "badge",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(badgeVariants({
+			variant,
+			size
+		}), slots?.root, className),
+		...props
+	});
+}
+
+//#endregion
+export { Badge };

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/Button.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,+CAA+C;AAC/C,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,QAAA,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAExC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;8EAgCnB,CAAC;AAEF,+CAA+C;AAC/C,QAAA,MAAM,iBAAiB;;;CAGtB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAC3D,YAAY,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/Button/Button.styles.ts
+/**
+* CVA variants for the Button root.
+*
+* @see {@link https://cva.style/docs/getting-started/variants}
+*/
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 active:scale-[0.98]", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+			success: "bg-emerald-600 text-white hover:bg-emerald-700 focus-visible:ring-emerald-600",
+			warning: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500"
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3 text-xs",
+			lg: "h-11 rounded-md px-8 text-base",
+			icon: "h-10 w-10 p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/** State-specific style classes for Button. */
+const buttonStateStyles = {
+	pressed: "scale-[0.98]",
+	disabled: "opacity-50 pointer-events-none"
+};
+
+//#endregion
+export { buttonStateStyles, buttonVariants };

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.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$1 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$1.Children.only(children);
+	return React$1.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$1.useState(false);
+	const handlePointerDown = React$1.useCallback((e) => {
+		setPressed(true);
+		onPointerDown?.(e);
+	}, [onPointerDown]);
+	const handlePointerUp = React$1.useCallback((e) => {
+		setPressed(false);
+		onPointerUp?.(e);
+	}, [onPointerUp]);
+	const handlePointerLeave = React$1.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$1.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.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.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.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.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"}