@mks2508/mks-ui 0.1.3 → 0.2.0

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+//#region src/react/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/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/Checkbox/Checkbox.types.d.ts.map

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

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

package/dist/react/ui/Checkbox/index.js

@@ -0,0 +1,158 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { checkboxStyles } from "./Checkbox.styles.js";
+import "../../../react";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+
+//#region src/react/ui/Checkbox/index.tsx
+const [CheckboxProvider, useCheckbox] = getStrictContext("CheckboxContext");
+/**
+* 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>
+* ```
+*/
+function Checkbox$1({ name, checked, defaultChecked, onCheckedChange, indeterminate, value, nativeButton, parent, disabled, readOnly, required, inputRef, id, className, slots, config, ...props }) {
+	const [isChecked, setIsChecked] = useControlledState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const tapScale = config?.tapScale ?? .95;
+	const hoverScale = config?.hoverScale ?? 1.05;
+	return /* @__PURE__ */ jsx(CheckboxProvider, {
+		value: {
+			isChecked,
+			setIsChecked,
+			isIndeterminate: indeterminate
+		},
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			name,
+			defaultChecked,
+			checked,
+			onCheckedChange: setIsChecked,
+			indeterminate,
+			value,
+			nativeButton,
+			parent,
+			disabled,
+			readOnly,
+			required,
+			inputRef,
+			id,
+			render: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "checkbox",
+				whileTap: { scale: tapScale },
+				whileHover: { scale: hoverScale },
+				className: cn(checkboxStyles.root, slots?.root, className),
+				...props
+			})
+		})
+	});
+}
+/**
+* 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' }} />
+* ```
+*/
+function CheckboxIndicator({ className, slots, ...props }) {
+	const { isChecked, isIndeterminate } = useCheckbox();
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.svg, {
+			"data-slot": "checkbox-indicator",
+			xmlns: "http://www.w3.org/2000/svg",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			strokeWidth: "3.5",
+			stroke: "currentColor",
+			initial: "unchecked",
+			animate: isChecked ? "checked" : "unchecked",
+			className: cn(checkboxStyles.indicator, slots?.indicator, className),
+			...props,
+			children: isIndeterminate ? /* @__PURE__ */ jsx(motion.line, {
+				x1: "5",
+				y1: "12",
+				x2: "19",
+				y2: "12",
+				strokeLinecap: "round",
+				initial: {
+					pathLength: 0,
+					opacity: 0
+				},
+				animate: {
+					pathLength: 1,
+					opacity: 1,
+					transition: { duration: .2 }
+				}
+			}) : /* @__PURE__ */ jsx(motion.path, {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M4.5 12.75l6 6 9-13.5",
+				variants: {
+					checked: {
+						pathLength: 1,
+						opacity: 1,
+						transition: {
+							duration: .2,
+							delay: .2
+						}
+					},
+					unchecked: {
+						pathLength: 0,
+						opacity: 0,
+						transition: { duration: .2 }
+					}
+				}
+			})
+		})
+	});
+}
+
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxIndicator, useCheckbox };

package/dist/react/ui/Combobox/Combobox.styles.d.ts

@@ -0,0 +1,7 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Combobox component family. */
+type ComboboxSlot = 'root' | 'trigger' | 'content' | 'list' | 'item' | 'label' | 'separator' | 'empty' | 'chips' | 'chip' | 'chipInput';
+declare const comboboxStyles: StyleSlots<ComboboxSlot>;
+export { comboboxStyles };
+export type { ComboboxSlot };
+//# sourceMappingURL=Combobox.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Combobox/Combobox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,wDAAwD;AACxD,KAAK,YAAY,GACb,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,OAAO,GACP,WAAW,GACX,OAAO,GACP,OAAO,GACP,MAAM,GACN,WAAW,CAAC;AAEhB,QAAA,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAc5C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/react/ui/Combobox/Combobox.styles.js

@@ -0,0 +1,17 @@
+//#region src/react/ui/Combobox/Combobox.styles.ts
+const comboboxStyles = {
+	root: "",
+	trigger: "[&_svg:not([class*='size-'])]:size-4",
+	content: "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
+	list: "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
+	item: "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	label: "text-muted-foreground px-2 py-1.5 text-xs",
+	separator: "bg-border -mx-1 my-1 h-px",
+	empty: "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+	chips: "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
+	chip: "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+	chipInput: "min-w-16 flex-1 outline-none"
+};
+
+//#endregion
+export { comboboxStyles };

package/dist/react/ui/Combobox/Combobox.types.d.ts

@@ -0,0 +1,49 @@
+import type { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import type { SlotOverrides } from '../../../core/types';
+import type { ComboboxSlot } from './Combobox.styles';
+/** Props for the Combobox root. */
+type IComboboxProps = ComboboxPrimitive.Root.Props<any, any>;
+/** Props for ComboboxValue. */
+type IComboboxValueProps = ComboboxPrimitive.Value.Props;
+/** Props for ComboboxTrigger. */
+type IComboboxTriggerProps = ComboboxPrimitive.Trigger.Props;
+/** Props for ComboboxClear. */
+type IComboboxClearProps = ComboboxPrimitive.Clear.Props;
+/** Props for ComboboxInput. */
+interface IComboboxInputProps extends ComboboxPrimitive.Input.Props {
+    /** Show the trigger arrow button. */
+    showTrigger?: boolean;
+    /** Show the clear button. */
+    showClear?: boolean;
+    /** Override classes for combobox visual regions. */
+    slots?: SlotOverrides<ComboboxSlot>;
+}
+/** Props for ComboboxContent. */
+interface IComboboxContentProps extends ComboboxPrimitive.Popup.Props, Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> {
+    slots?: SlotOverrides<ComboboxSlot>;
+}
+/** Props for ComboboxList. */
+type IComboboxListProps = ComboboxPrimitive.List.Props;
+/** Props for ComboboxItem. */
+type IComboboxItemProps = ComboboxPrimitive.Item.Props;
+/** Props for ComboboxGroup. */
+type IComboboxGroupProps = ComboboxPrimitive.Group.Props;
+/** Props for ComboboxLabel. */
+type IComboboxLabelProps = ComboboxPrimitive.GroupLabel.Props;
+/** Props for ComboboxCollection. */
+type IComboboxCollectionProps = ComboboxPrimitive.Collection.Props;
+/** Props for ComboboxEmpty. */
+type IComboboxEmptyProps = ComboboxPrimitive.Empty.Props;
+/** Props for ComboboxSeparator. */
+type IComboboxSeparatorProps = ComboboxPrimitive.Separator.Props;
+/** Props for ComboboxChips. */
+type IComboboxChipsProps = React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props;
+/** Props for ComboboxChip. */
+interface IComboboxChipProps extends ComboboxPrimitive.Chip.Props {
+    /** Show the remove button on the chip. */
+    showRemove?: boolean;
+}
+/** Props for ComboboxChipsInput. */
+type IComboboxChipsInputProps = ComboboxPrimitive.Input.Props;
+export type { IComboboxProps, IComboboxValueProps, IComboboxTriggerProps, IComboboxClearProps, IComboboxInputProps, IComboboxContentProps, IComboboxListProps, IComboboxItemProps, IComboboxGroupProps, IComboboxLabelProps, IComboboxCollectionProps, IComboboxEmptyProps, IComboboxSeparatorProps, IComboboxChipsProps, IComboboxChipProps, IComboboxChipsInputProps, };
+//# sourceMappingURL=Combobox.types.d.ts.map