@mks2508/mks-ui 0.1.4 → 0.2.0

package/dist/react/primitives/Highlight/index.js

@@ -0,0 +1,396 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import * as React from "../../../react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/primitives/Highlight/index.tsx
+const DEFAULT_BOUNDS_OFFSET = {
+	top: 0,
+	left: 0,
+	width: 0,
+	height: 0
+};
+const HighlightContext = React.createContext(void 0);
+/**
+* Hook to access the Highlight context.
+* Must be used within a Highlight provider.
+*
+* @returns The current highlight context
+*/
+function useHighlight() {
+	const context = React.useContext(HighlightContext);
+	if (!context) throw new Error("useHighlight must be used within a HighlightProvider");
+	return context;
+}
+/**
+* Highlight primitive — animated background indicator that follows the active item.
+* Supports two modes: "children" (layoutId-based per item) and "parent" (absolute positioned).
+*
+* This is an internal primitive used by Tabs, Menu, and similar components.
+*
+* @param mode - Tracking mode: 'children' or 'parent'
+* @param hover - Activate on hover instead of click
+* @param click - Activate on click (default: true)
+* @param transition - Motion transition config
+*
+* @example
+* ```tsx
+* <Highlight hover>
+*   <HighlightItem><button>Tab 1</button></HighlightItem>
+*   <HighlightItem><button>Tab 2</button></HighlightItem>
+* </Highlight>
+* ```
+*/
+function Highlight({ ref, ...props }) {
+	const { as: Component = "div", children, value, defaultValue, onValueChange, className, style, transition = {
+		type: "spring",
+		stiffness: 350,
+		damping: 35
+	}, hover = false, click = true, enabled = true, controlledItems, disabled = false, exitDelay = 200, mode = "children" } = props;
+	const localRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => localRef.current);
+	const boundsOffset = props?.boundsOffset ?? DEFAULT_BOUNDS_OFFSET;
+	const boundsOffsetTop = boundsOffset.top ?? 0;
+	const boundsOffsetLeft = boundsOffset.left ?? 0;
+	const boundsOffsetWidth = boundsOffset.width ?? 0;
+	const boundsOffsetHeight = boundsOffset.height ?? 0;
+	const boundsOffsetRef = React.useRef({
+		top: boundsOffsetTop,
+		left: boundsOffsetLeft,
+		width: boundsOffsetWidth,
+		height: boundsOffsetHeight
+	});
+	React.useEffect(() => {
+		boundsOffsetRef.current = {
+			top: boundsOffsetTop,
+			left: boundsOffsetLeft,
+			width: boundsOffsetWidth,
+			height: boundsOffsetHeight
+		};
+	}, [
+		boundsOffsetTop,
+		boundsOffsetLeft,
+		boundsOffsetWidth,
+		boundsOffsetHeight
+	]);
+	const [activeValue, setActiveValue] = React.useState(value ?? defaultValue ?? null);
+	const [boundsState, setBoundsState] = React.useState(null);
+	const [activeClassNameState, setActiveClassNameState] = React.useState("");
+	const safeSetActiveValue = (id) => {
+		setActiveValue((prev) => {
+			if (prev !== id) {
+				onValueChange?.(id);
+				return id;
+			}
+			return prev;
+		});
+	};
+	const safeSetBoundsRef = React.useRef(void 0);
+	React.useEffect(() => {
+		safeSetBoundsRef.current = (bounds) => {
+			if (!localRef.current) return;
+			const containerRect = localRef.current.getBoundingClientRect();
+			const offset = boundsOffsetRef.current;
+			const newBounds = {
+				top: bounds.top - containerRect.top + offset.top,
+				left: bounds.left - containerRect.left + offset.left,
+				width: bounds.width + offset.width,
+				height: bounds.height + offset.height
+			};
+			setBoundsState((prev) => {
+				if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) return prev;
+				return newBounds;
+			});
+		};
+	});
+	const safeSetBounds = (bounds) => {
+		safeSetBoundsRef.current?.(bounds);
+	};
+	const clearBounds = React.useCallback(() => {
+		setBoundsState((prev) => prev === null ? prev : null);
+	}, []);
+	React.useEffect(() => {
+		if (value !== void 0) setActiveValue(value);
+		else if (defaultValue !== void 0) setActiveValue(defaultValue);
+	}, [value, defaultValue]);
+	const id = React.useId();
+	React.useEffect(() => {
+		if (mode !== "parent") return;
+		const container = localRef.current;
+		if (!container) return;
+		const onScroll = () => {
+			if (!activeValue) return;
+			const activeEl = container.querySelector(`[data-value="${activeValue}"][data-highlight="true"]`);
+			if (activeEl) safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+		};
+		container.addEventListener("scroll", onScroll, { passive: true });
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [mode, activeValue]);
+	const render = (children) => {
+		if (mode === "parent") return /* @__PURE__ */ jsxs(Component, {
+			ref: localRef,
+			"data-slot": "motion-highlight-container",
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className: props?.containerClassName,
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				mode: "wait",
+				children: boundsState && /* @__PURE__ */ jsx(motion.div, {
+					"data-slot": "motion-highlight",
+					animate: {
+						top: boundsState.top,
+						left: boundsState.left,
+						width: boundsState.width,
+						height: boundsState.height,
+						opacity: 1
+					},
+					initial: {
+						top: boundsState.top,
+						left: boundsState.left,
+						width: boundsState.width,
+						height: boundsState.height,
+						opacity: 0
+					},
+					exit: {
+						opacity: 0,
+						transition: {
+							...transition,
+							delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3
+						}
+					},
+					transition,
+					style: {
+						position: "absolute",
+						zIndex: 0,
+						...style
+					},
+					className: cn(className, activeClassNameState)
+				})
+			}), children]
+		});
+		return children;
+	};
+	return /* @__PURE__ */ jsx(HighlightContext.Provider, {
+		value: {
+			mode,
+			activeValue,
+			setActiveValue: safeSetActiveValue,
+			id,
+			hover,
+			click,
+			className,
+			style,
+			transition,
+			disabled,
+			enabled,
+			exitDelay,
+			setBounds: safeSetBounds,
+			clearBounds,
+			activeClassName: activeClassNameState,
+			setActiveClassName: setActiveClassNameState,
+			forceUpdateBounds: props?.forceUpdateBounds
+		},
+		children: enabled ? controlledItems ? render(children) : render(React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, {
+			className: props?.itemsClassName,
+			children: child
+		}, index))) : children
+	});
+}
+function getNonOverridingDataAttributes(element, dataAttributes) {
+	return Object.keys(dataAttributes).reduce((acc, key) => {
+		if (element.props[key] === void 0) acc[key] = dataAttributes[key];
+		return acc;
+	}, {});
+}
+/**
+* HighlightItem — a single item within a Highlight container.
+* Tracks its own position and renders the animated highlight indicator.
+*
+* @param value - Unique identifier for this item
+* @param activeClassName - Additional class when this item is active
+* @param asChild - Use the child element directly instead of wrapping
+*
+* @example
+* ```tsx
+* <HighlightItem value="tab-1">
+*   <button>Tab 1</button>
+* </HighlightItem>
+* ```
+*/
+function HighlightItem({ ref, as, children, id, value, className, style, transition, disabled = false, activeClassName, exitDelay, asChild = false, forceUpdateBounds, ...props }) {
+	const itemId = React.useId();
+	const { activeValue, setActiveValue, mode, setBounds, clearBounds, hover, click, enabled, className: contextClassName, style: contextStyle, transition: contextTransition, id: contextId, disabled: contextDisabled, exitDelay: contextExitDelay, forceUpdateBounds: contextForceUpdateBounds, setActiveClassName } = useHighlight();
+	const Component = as ?? "div";
+	const element = children;
+	const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
+	const isActive = activeValue === childValue;
+	const isDisabled = disabled === void 0 ? contextDisabled : disabled;
+	const itemTransition = transition ?? contextTransition;
+	const localRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => localRef.current);
+	const refCallback = React.useCallback((node) => {
+		localRef.current = node;
+	}, []);
+	React.useEffect(() => {
+		if (mode !== "parent") return;
+		let rafId;
+		let previousBounds = null;
+		const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
+		const updateBounds = () => {
+			if (!localRef.current) return;
+			const bounds = localRef.current.getBoundingClientRect();
+			if (shouldUpdateBounds) {
+				if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
+					rafId = requestAnimationFrame(updateBounds);
+					return;
+				}
+				previousBounds = bounds;
+				rafId = requestAnimationFrame(updateBounds);
+			}
+			setBounds(bounds);
+		};
+		if (isActive) {
+			updateBounds();
+			setActiveClassName(activeClassName ?? "");
+		} else if (!activeValue) clearBounds();
+		if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+	}, [
+		mode,
+		isActive,
+		activeValue,
+		setBounds,
+		clearBounds,
+		activeClassName,
+		setActiveClassName,
+		forceUpdateBounds,
+		contextForceUpdateBounds
+	]);
+	if (!React.isValidElement(children)) return children;
+	const dataAttributes = {
+		"data-active": isActive ? "true" : "false",
+		"aria-selected": isActive,
+		"data-disabled": isDisabled,
+		"data-value": childValue,
+		"data-highlight": true
+	};
+	const commonHandlers = hover ? {
+		onMouseEnter: (e) => {
+			setActiveValue(childValue);
+			element.props.onMouseEnter?.(e);
+		},
+		onMouseLeave: (e) => {
+			setActiveValue(null);
+			element.props.onMouseLeave?.(e);
+		}
+	} : click ? { onClick: (e) => {
+		setActiveValue(childValue);
+		element.props.onClick?.(e);
+	} } : {};
+	if (asChild) {
+		if (mode === "children") return React.cloneElement(element, {
+			key: childValue,
+			ref: refCallback,
+			className: cn("relative", element.props.className),
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item-container"
+			}),
+			...commonHandlers,
+			...props
+		}, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: isActive && !isDisabled && /* @__PURE__ */ jsx(motion.div, {
+				layoutId: `transition-background-${contextId}`,
+				"data-slot": "motion-highlight",
+				style: {
+					position: "absolute",
+					zIndex: 0,
+					...contextStyle,
+					...style
+				},
+				className: cn(contextClassName, activeClassName),
+				transition: itemTransition,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: {
+					opacity: 0,
+					transition: {
+						...itemTransition,
+						delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
+					}
+				},
+				...dataAttributes
+			})
+		}), /* @__PURE__ */ jsx(Component, {
+			"data-slot": "motion-highlight-item",
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className,
+			...dataAttributes,
+			children
+		})] }));
+		return React.cloneElement(element, {
+			ref: refCallback,
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item"
+			}),
+			...commonHandlers
+		});
+	}
+	return enabled ? /* @__PURE__ */ jsxs(Component, {
+		ref: localRef,
+		"data-slot": "motion-highlight-item-container",
+		className: cn(mode === "children" && "relative", className),
+		...dataAttributes,
+		...props,
+		...commonHandlers,
+		children: [mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: isActive && !isDisabled && /* @__PURE__ */ jsx(motion.div, {
+				layoutId: `transition-background-${contextId}`,
+				"data-slot": "motion-highlight",
+				style: {
+					position: "absolute",
+					zIndex: 0,
+					...contextStyle,
+					...style
+				},
+				className: cn(contextClassName, activeClassName),
+				transition: itemTransition,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: {
+					opacity: 0,
+					transition: {
+						...itemTransition,
+						delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
+					}
+				},
+				...dataAttributes
+			})
+		}), React.cloneElement(element, {
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className: element.props.className,
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item"
+			})
+		})]
+	}, childValue) : children;
+}
+
+//#endregion
+export { Highlight, HighlightItem, useHighlight };

package/dist/react/primitives/Slot/index.d.ts

@@ -0,0 +1,53 @@
+import * as React from '../../../react';
+import { type HTMLMotionProps } from 'motion/react';
+type AnyProps = Record<string, unknown>;
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<HTMLMotionProps<keyof HTMLElementTagNameMap>, 'ref'> & {
+    ref?: React.Ref<T>;
+};
+type WithAsChild<Base extends object> = (Base & {
+    asChild: true;
+    children: React.ReactElement;
+}) | (Base & {
+    asChild?: false | undefined;
+});
+/**
+ * Props for the Slot component.
+ *
+ * @example
+ * ```tsx
+ * <Slot asChild>
+ *   <button>Click me</button>
+ * </Slot>
+ * ```
+ */
+export interface ISlotProps<T extends HTMLElement = HTMLElement> extends DOMMotionProps<T> {
+    /** Child element to render with motion enhancements. */
+    children?: any;
+}
+type SlotProps<T extends HTMLElement = HTMLElement> = ISlotProps<T>;
+/**
+ * Slot component - Motion-enhanced composition primitive.
+ *
+ * Wraps a child element with motion capabilities using the asChild pattern.
+ * When the child is already a motion component, it's used directly.
+ * Otherwise, a motion wrapper is created with the child's element type.
+ *
+ * @param children - Child element to render with motion enhancements
+ * @param ref - Ref to the merged element
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Slot asChild>
+ *   <button>Click me</button>
+ * </Slot>
+ *
+ * // With motion props
+ * <Slot asChild>
+ *   <button onClick={handleClick}>Hover me</button>
+ * </Slot>
+ * ```
+ */
+export declare function Slot<T extends HTMLElement = HTMLElement>({ children, ref, ...props }: SlotProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export type { WithAsChild, DOMMotionProps, AnyProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/primitives/Slot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/primitives/Slot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAI/E,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExC,KAAK,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,IAAI,CAC7D,eAAe,CAAC,MAAM,qBAAqB,CAAC,EAC5C,KAAK,CACN,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE3B,KAAK,WAAW,CAAC,IAAI,SAAS,MAAM,IAChC,CAAC,IAAI,GAAG;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,CAAC,GACxD,CAAC,IAAI,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7C;;;;;;;;;GASG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAC7D,SAAQ,cAAc,CAAC,CAAC,CAAC;IACzB,wDAAwD;IAExD,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAwCpE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EACxD,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,kDAuBd;AAED,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/dist/react/primitives/Slot/index.js

@@ -0,0 +1,65 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import * as React from "../../../react";
+import { isMotionComponent, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/primitives/Slot/index.tsx
+function mergeRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		});
+	};
+}
+function mergeProps(childProps, slotProps) {
+	const merged = {
+		...childProps,
+		...slotProps
+	};
+	if (childProps.className || slotProps.className) merged.className = cn(childProps.className, slotProps.className);
+	if (childProps.style || slotProps.style) merged.style = {
+		...childProps.style,
+		...slotProps.style
+	};
+	return merged;
+}
+/**
+* Slot component - Motion-enhanced composition primitive.
+*
+* Wraps a child element with motion capabilities using the asChild pattern.
+* When the child is already a motion component, it's used directly.
+* Otherwise, a motion wrapper is created with the child's element type.
+*
+* @param children - Child element to render with motion enhancements
+* @param ref - Ref to the merged element
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Slot asChild>
+*   <button>Click me</button>
+* </Slot>
+*
+* // With motion props
+* <Slot asChild>
+*   <button onClick={handleClick}>Hover me</button>
+* </Slot>
+* ```
+*/
+function Slot({ children, ref, ...props }) {
+	const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
+	const Base = React.useMemo(() => isAlreadyMotion ? children.type : motion.create(children.type), [isAlreadyMotion, children.type]);
+	if (!React.isValidElement(children)) return null;
+	const { ref: childRef, ...childProps } = children.props;
+	return /* @__PURE__ */ jsx(Base, {
+		...mergeProps(childProps, props),
+		ref: mergeRefs(childRef, ref)
+	});
+}
+
+//#endregion
+export { Slot };

package/dist/react/primitives/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Primitives barrel export.
+ *
+ * Building blocks for components. Not meant to be used directly by consumers.
+ *
+ * @module @mks2508/mks-ui/react/primitives
+ */
+export * from './Slot';
+export * from './Highlight';
+export * from './AutoHeight';
+export * from './CountingNumber';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/primitives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}

package/dist/react/primitives/index.js

@@ -0,0 +1,4 @@
+import { Slot } from "./Slot/index.js";
+import { Highlight, HighlightItem, useHighlight } from "./Highlight/index.js";
+import { AutoHeight } from "./AutoHeight/index.js";
+import { CountingNumber } from "./CountingNumber/index.js";

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

@@ -0,0 +1,47 @@
+/**
+ * Style slots and CVA variants for the Accordion component.
+ *
+ * Defines the visual regions (slots) and variant-based styling
+ * using Class Variance Authority (CVA).
+ *
+ * @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
+ */
+import { type VariantProps } from 'class-variance-authority';
+import type { StyleSlots } from '../../../core/types';
+import type { AccordionSlot } from './Accordion.types';
+/**
+ * Default Tailwind classes for each visual region of the Accordion.
+ *
+ * @example
+ * ```typescript
+ * import { AccordionStyles } from '@mks2508/mks-ui';
+ *
+ * // Access individual slot defaults
+ * console.log(AccordionStyles.root);   // base root classes
+ * console.log(AccordionStyles.trigger); // base trigger classes
+ * ```
+ */
+export declare const AccordionStyles: StyleSlots<AccordionSlot>;
+/**
+ * CVA variants for the Accordion root element.
+ *
+ * Provides `default` and `bordered` visual variants that control
+ * the overall appearance of the accordion container.
+ *
+ * @example
+ * ```typescript
+ * import { accordionVariants } from '@mks2508/mks-ui';
+ *
+ * // Get class string for bordered variant
+ * const classes = accordionVariants({ variant: 'bordered' });
+ * ```
+ */
+export declare const accordionVariants: (props?: ({
+    variant?: "default" | "bordered" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variant props extracted from {@link accordionVariants}.
+ * Use this to type-check the `variant` prop on the Accordion root.
+ */
+export type AccordionVariantProps = VariantProps<typeof accordionVariants>;
+//# sourceMappingURL=Accordion.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,UAAU,CAAC,aAAa,CAOrD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB;;8EAgB5B,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,54 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/ui/Accordion/Accordion.styles.ts
+/**
+* Style slots and CVA variants for the Accordion component.
+*
+* Defines the visual regions (slots) and variant-based styling
+* using Class Variance Authority (CVA).
+*
+* @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
+*/
+/**
+* Default Tailwind classes for each visual region of the Accordion.
+*
+* @example
+* ```typescript
+* import { AccordionStyles } from '@mks2508/mks-ui';
+*
+* // Access individual slot defaults
+* console.log(AccordionStyles.root);   // base root classes
+* console.log(AccordionStyles.trigger); // base trigger classes
+* ```
+*/
+const AccordionStyles = {
+	root: "flex flex-col",
+	item: "border-b border-border",
+	header: "flex",
+	trigger: "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-panel-open]>svg]:rotate-180",
+	panel: "overflow-hidden text-sm"
+};
+/**
+* CVA variants for the Accordion root element.
+*
+* Provides `default` and `bordered` visual variants that control
+* the overall appearance of the accordion container.
+*
+* @example
+* ```typescript
+* import { accordionVariants } from '@mks2508/mks-ui';
+*
+* // Get class string for bordered variant
+* const classes = accordionVariants({ variant: 'bordered' });
+* ```
+*/
+const accordionVariants = cva(AccordionStyles.root, {
+	variants: { variant: {
+		default: "",
+		bordered: "rounded-lg border border-border"
+	} },
+	defaultVariants: { variant: "default" }
+});
+
+//#endregion
+export { AccordionStyles, accordionVariants };