@mks2508/mks-ui 0.1.4 → 0.2.0

package/dist/react/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/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/Badge/Badge.styles.d.ts

@@ -0,0 +1,16 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Badge component. */
+type BadgeSlot = 'root';
+declare const badgeStyles: StyleSlots<BadgeSlot>;
+/**
+ * CVA variants for the Badge root.
+ *
+ * @see {@link https://cva.style/docs/getting-started/variants}
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "destructive" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { badgeStyles, badgeVariants };
+export type { BadgeSlot };
+//# sourceMappingURL=Badge.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Badge/Badge.styles.js

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/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/Badge/Badge.types.d.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { badgeVariants, BadgeSlot } from './Badge.styles';
+/**
+ * Props for the Badge component.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="secondary" size="sm">New</Badge>
+ * ```
+ */
+interface IBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /** Override classes for badge visual regions. */
+    slots?: SlotOverrides<BadgeSlot>;
+}
+/** Available badge variants. */
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+/** Available badge sizes. */
+type BadgeSize = 'default' | 'sm' | 'lg';
+export type { IBadgeProps, BadgeVariant, BadgeSize };
+//# sourceMappingURL=Badge.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Badge/index.d.ts

@@ -0,0 +1,20 @@
+import { badgeVariants } from './Badge.styles';
+import type { IBadgeProps } from './Badge.types';
+/**
+ * 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>
+ * ```
+ */
+declare function Badge({ className, variant, size, slots, ...props }: IBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+export type { IBadgeProps, BadgeVariant, BadgeSize } from './Badge.types';
+export type { BadgeSlot } from './Badge.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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/Button/Button.styles.d.ts

@@ -0,0 +1,21 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Button component. */
+type ButtonSlot = 'root';
+declare const buttonStyles: StyleSlots<ButtonSlot>;
+/**
+ * CVA variants for the Button root.
+ *
+ * @see {@link https://cva.style/docs/getting-started/variants}
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "destructive" | "ghost" | "success" | "warning" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** State-specific style classes for Button. */
+declare const buttonStateStyles: {
+    pressed: string;
+    disabled: string;
+};
+export { buttonStyles, buttonVariants, buttonStateStyles };
+export type { ButtonSlot };
+//# sourceMappingURL=Button.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Button/Button.styles.js

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/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/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/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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"}