@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react-ui/ui/index.ts

@@ -0,0 +1,37 @@
+/**
+ * UI components barrel export.
+ *
+ * All public UI components built on Base UI primitives with StyleSlots/CVA pattern.
+ *
+ * @module @mks2508/mks-ui/react/ui
+ */
+
+// Animate UI components
+export * from './Accordion';
+export * from './AlertDialog';
+export * from './Checkbox';
+export * from './Dialog';
+export * from './Menu';
+export * from './Popover';
+export * from './Progress';
+export * from './Switch';
+export * from './Tabs';
+export * from './Tooltip';
+
+// Base UI components
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Combobox';
+export * from './CornerBracket';
+export * from './DropdownMenu';
+export * from './Field';
+export * from './Input';
+export * from './InputGroup';
+export * from './Label';
+export * from './Select';
+export * from './Separator';
+export * from './DataCard';
+
+// WAAPI-based components
+export * from './TextFlow';

package/dist/react/components/MorphingPopover/MorphingPopover.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MorphingPopover.types.d.ts","sourceRoot":"","sources":["../../../../src/react/components/MorphingPopover/MorphingPopover.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,UAAU,qBAAqB;IAC7B,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kDAAkD;IAClD,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,mEAAmE;AACnE,UAAU,oBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;CAClD;AAED;;;;GAIG;AACH,UAAU,+BACR,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,YAAY,CAAC;IAC/D,gDAAgD;IAChD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,+BAA+B,GAChC,CAAC"}

package/dist/react/components/MorphingPopover/index.d.ts

@@ -1,46 +0,0 @@
-import type { IMorphingPopoverProps, IMorphingPopoverWithTargetProps } from './MorphingPopover.types';
-/**
- * MorphingPopover — animates from a circular trigger to an expanded popover.
- *
- * @param content - Content to display in the expanded popover
- * @param trigger - Trigger button content (default: "...")
- * @param targetSize - Expanded dimensions { width, height }
- * @param onOpen - Callback when popover opens
- * @param onClose - Callback when popover closes
- *
- * @example
- * ```tsx
- * <MorphingPopover
- *   trigger="+"
- *   content={<div>Expanded content</div>}
- *   targetSize={{ width: 320, height: 200 }}
- * />
- * ```
- */
-declare const MorphingPopover: import("../../../react").ForwardRefExoticComponent<IMorphingPopoverProps & import("../../../react").RefAttributes<HTMLButtonElement>>;
-/**
- * MorphingPopoverWithTarget — variant that animates to a specific target element.
- *
- * The target element must have CSS `anchor-name: --target-anchor` set on it.
- *
- * @param targetRef - Reference to the target element to anchor to
- * @param content - Content to display in the expanded popover
- *
- * @example
- * ```tsx
- * const targetRef = useRef<HTMLDivElement>(null);
- *
- * <div ref={targetRef} style={{ anchorName: '--target-anchor' }}>
- *   Drag me around
- * </div>
- *
- * <MorphingPopoverWithTarget
- *   targetRef={targetRef}
- *   content={<div>Content</div>}
- * />
- * ```
- */
-declare const MorphingPopoverWithTarget: import("../../../react").ForwardRefExoticComponent<IMorphingPopoverWithTargetProps & import("../../../react").RefAttributes<HTMLButtonElement>>;
-export { MorphingPopover, MorphingPopoverWithTarget };
-export type { IMorphingPopoverProps, IMorphingPopoverWithTargetProps, } from './MorphingPopover.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/react/components/MorphingPopover/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/components/MorphingPopover/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,qBAAqB,EAErB,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,eAAe,qHAuDpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,yBAAyB,+HAiD9B,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,+BAA+B,GAChC,MAAM,yBAAyB,CAAC"}

package/dist/react/components/MorphingPopover/index.js

@@ -1,119 +0,0 @@
-'use client';
-
-import { cn } from "../../lib/utils.js";
-import morphing_popover_module_default from "./morphing-popover.module.js";
-import { forwardRef } from "../../../react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/react/components/MorphingPopover/index.tsx
-/**
-* MorphingPopover — a popover that animates from a trigger button to a target position.
-*
-* Uses CSS Anchor Positioning + Popover API + @starting-style for smooth morphing animations.
-*
-* @example
-* ```tsx
-* <MorphingPopover
-*   trigger="..."
-*   content={<div>Expanded content</div>}
-*   targetSize={{ width: 320, height: 200 }}
-* />
-* ```
-*/
-/**
-* MorphingPopover — animates from a circular trigger to an expanded popover.
-*
-* @param content - Content to display in the expanded popover
-* @param trigger - Trigger button content (default: "...")
-* @param targetSize - Expanded dimensions { width, height }
-* @param onOpen - Callback when popover opens
-* @param onClose - Callback when popover closes
-*
-* @example
-* ```tsx
-* <MorphingPopover
-*   trigger="+"
-*   content={<div>Expanded content</div>}
-*   targetSize={{ width: 320, height: 200 }}
-* />
-* ```
-*/
-const MorphingPopover = forwardRef(({ content, trigger = "⋯", triggerClassName, popoverClassName, targetSize = {
-	width: 220,
-	height: 120
-}, onOpen, onClose, popoverId = "morphing-popover" }, ref) => {
-	const containerStyle = {
-		"--target-width": `${targetSize.width}px`,
-		"--target-height": `${targetSize.height}px`
-	};
-	const handleToggle = (e) => {
-		if (e.target.matches(":popover-open")) onOpen?.();
-		else onClose?.();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: morphing_popover_module_default.morphingPopoverContainer,
-		style: containerStyle,
-		children: [/* @__PURE__ */ jsx("button", {
-			ref,
-			popovertarget: popoverId,
-			popoverTargetAction: "toggle",
-			className: cn(morphing_popover_module_default.morphingTrigger, triggerClassName),
-			onClick: handleToggle,
-			children: trigger
-		}), /* @__PURE__ */ jsx("div", {
-			id: popoverId,
-			popover: "auto",
-			className: cn(morphing_popover_module_default.morphingPopover, popoverClassName),
-			children: content
-		})]
-	});
-});
-MorphingPopover.displayName = "MorphingPopover";
-/**
-* MorphingPopoverWithTarget — variant that animates to a specific target element.
-*
-* The target element must have CSS `anchor-name: --target-anchor` set on it.
-*
-* @param targetRef - Reference to the target element to anchor to
-* @param content - Content to display in the expanded popover
-*
-* @example
-* ```tsx
-* const targetRef = useRef<HTMLDivElement>(null);
-*
-* <div ref={targetRef} style={{ anchorName: '--target-anchor' }}>
-*   Drag me around
-* </div>
-*
-* <MorphingPopoverWithTarget
-*   targetRef={targetRef}
-*   content={<div>Content</div>}
-* />
-* ```
-*/
-const MorphingPopoverWithTarget = forwardRef(({ content, trigger = "⋯", triggerClassName, popoverClassName, onOpen, onClose, popoverId = "morphing-popover-target" }, ref) => {
-	const handleToggle = (e) => {
-		if (e.target.matches(":popover-open")) onOpen?.();
-		else onClose?.();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: morphing_popover_module_default.morphingPopoverTargetContainer,
-		children: [/* @__PURE__ */ jsx("button", {
-			ref,
-			popovertarget: popoverId,
-			popoverTargetAction: "toggle",
-			className: cn(morphing_popover_module_default.morphingTrigger, triggerClassName),
-			onClick: handleToggle,
-			children: trigger
-		}), /* @__PURE__ */ jsx("div", {
-			id: popoverId,
-			popover: "auto",
-			className: cn(morphing_popover_module_default.morphingPopoverTarget, popoverClassName),
-			children: content
-		})]
-	});
-});
-MorphingPopoverWithTarget.displayName = "MorphingPopoverWithTarget";
-
-//#endregion
-export { MorphingPopover, MorphingPopoverWithTarget };

package/dist/react/components/MorphingPopover/morphing-popover.module.js

@@ -1,5 +0,0 @@
-//#region src/react/components/MorphingPopover/morphing-popover.module.css
-var morphing_popover_module_default = {};
-
-//#endregion
-export { morphing_popover_module_default as default };

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,mBAAmB,CAAC"}

package/dist/react/hooks/Animation/UseAutoHeight.d.ts

@@ -1,30 +0,0 @@
-import * as React from '../../../react';
-/**
- * Options for the useAutoHeight hook.
- */
-interface IAutoHeightOptions {
-    /** Include parent element box model (padding, border) in measurement. */
-    includeParentBox?: boolean;
-    /** Include self element box model in measurement. */
-    includeSelfBox?: boolean;
-}
-/**
- * Hook that measures and tracks the height of an element with ResizeObserver.
- * Returns a ref to attach and the current height value.
- *
- * @param deps - Dependency list to trigger re-measurement
- * @param options - Configuration for box model inclusion
- * @returns Object with ref and height
- *
- * @example
- * ```tsx
- * const { ref, height } = useAutoHeight<HTMLDivElement>([content]);
- * <div style={{ height }}><div ref={ref}>{content}</div></div>
- * ```
- */
-export declare function useAutoHeight<T extends HTMLElement = HTMLDivElement>(deps?: React.DependencyList, options?: IAutoHeightOptions): {
-    readonly ref: React.RefObject<T | null>;
-    readonly height: number;
-};
-export type { IAutoHeightOptions };
-//# sourceMappingURL=UseAutoHeight.d.ts.map

package/dist/react/hooks/Animation/UseAutoHeight.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UseAutoHeight.d.ts","sourceRoot":"","sources":["../../../../src/react/hooks/Animation/UseAutoHeight.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,UAAU,kBAAkB;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAClE,IAAI,GAAE,KAAK,CAAC,cAAmB,EAC/B,OAAO,GAAE,kBAGR;;;EAuFF;AAED,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/react/hooks/Animation/UseAutoHeight.js

@@ -1,80 +0,0 @@
-'use client';
-
-import * as React from "../../../react";
-
-//#region src/react/hooks/Animation/UseAutoHeight.tsx
-/**
-* Hook that measures and tracks the height of an element with ResizeObserver.
-* Returns a ref to attach and the current height value.
-*
-* @param deps - Dependency list to trigger re-measurement
-* @param options - Configuration for box model inclusion
-* @returns Object with ref and height
-*
-* @example
-* ```tsx
-* const { ref, height } = useAutoHeight<HTMLDivElement>([content]);
-* <div style={{ height }}><div ref={ref}>{content}</div></div>
-* ```
-*/
-function useAutoHeight(deps = [], options = {
-	includeParentBox: true,
-	includeSelfBox: false
-}) {
-	const ref = React.useRef(null);
-	const roRef = React.useRef(null);
-	const [height, setHeight] = React.useState(0);
-	const measure = React.useCallback(() => {
-		const el = ref.current;
-		if (!el) return 0;
-		const base = el.getBoundingClientRect().height || 0;
-		let extra = 0;
-		if (options.includeParentBox && el.parentElement) {
-			const cs = getComputedStyle(el.parentElement);
-			const paddingY = (parseFloat(cs.paddingTop || "0") || 0) + (parseFloat(cs.paddingBottom || "0") || 0);
-			const borderY = (parseFloat(cs.borderTopWidth || "0") || 0) + (parseFloat(cs.borderBottomWidth || "0") || 0);
-			if (cs.boxSizing === "border-box") extra += paddingY + borderY;
-		}
-		if (options.includeSelfBox) {
-			const cs = getComputedStyle(el);
-			const paddingY = (parseFloat(cs.paddingTop || "0") || 0) + (parseFloat(cs.paddingBottom || "0") || 0);
-			const borderY = (parseFloat(cs.borderTopWidth || "0") || 0) + (parseFloat(cs.borderBottomWidth || "0") || 0);
-			if (cs.boxSizing === "border-box") extra += paddingY + borderY;
-		}
-		const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-		return Math.ceil((base + extra) * dpr) / dpr;
-	}, [options.includeParentBox, options.includeSelfBox]);
-	React.useLayoutEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-		setHeight(measure());
-		if (roRef.current) {
-			roRef.current.disconnect();
-			roRef.current = null;
-		}
-		const ro = new ResizeObserver(() => {
-			const next = measure();
-			requestAnimationFrame(() => setHeight(next));
-		});
-		ro.observe(el);
-		if (options.includeParentBox && el.parentElement) ro.observe(el.parentElement);
-		roRef.current = ro;
-		return () => {
-			ro.disconnect();
-			roRef.current = null;
-		};
-	}, deps);
-	React.useLayoutEffect(() => {
-		if (height === 0) {
-			const next = measure();
-			if (next !== 0) setHeight(next);
-		}
-	}, [height, measure]);
-	return {
-		ref,
-		height
-	};
-}
-
-//#endregion
-export { useAutoHeight };

package/dist/react/hooks/DOM/UseIsInView.d.ts

@@ -1,32 +0,0 @@
-import * as React from '../../../react';
-import { type UseInViewOptions } from 'motion/react';
-/**
- * Options for the useIsInView hook.
- */
-interface IUseIsInViewOptions {
-    /** Enable intersection observer tracking. */
-    inView?: boolean;
-    /** Only trigger once when element enters viewport. */
-    inViewOnce?: boolean;
-    /** Root margin for intersection observer. */
-    inViewMargin?: UseInViewOptions['margin'];
-}
-/**
- * Hook that tracks whether an element is visible in the viewport
- * using the Intersection Observer API via motion/react.
- *
- * @param ref - Forwarded ref to merge with local ref
- * @param options - InView configuration options
- * @returns Object with local ref and isInView boolean
- *
- * @example
- * ```tsx
- * const { ref, isInView } = useIsInView(forwardedRef, { inView: true, inViewOnce: true });
- * ```
- */
-declare function useIsInView<T extends HTMLElement = HTMLElement>(ref: React.Ref<T>, options?: IUseIsInViewOptions): {
-    ref: React.RefObject<T | null>;
-    isInView: boolean;
-};
-export { useIsInView, type IUseIsInViewOptions };
-//# sourceMappingURL=UseIsInView.d.ts.map

package/dist/react/hooks/DOM/UseIsInView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UseIsInView.d.ts","sourceRoot":"","sources":["../../../../src/react/hooks/DOM/UseIsInView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhE;;GAEG;AACH,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;CAC3C;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtD,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EACjB,OAAO,GAAE,mBAAwB;;;EAWlC;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/dist/react/hooks/DOM/UseIsInView.js

@@ -1,33 +0,0 @@
-import * as React from "../../../react";
-import { useInView } from "motion/react";
-
-//#region src/react/hooks/DOM/UseIsInView.tsx
-/**
-* Hook that tracks whether an element is visible in the viewport
-* using the Intersection Observer API via motion/react.
-*
-* @param ref - Forwarded ref to merge with local ref
-* @param options - InView configuration options
-* @returns Object with local ref and isInView boolean
-*
-* @example
-* ```tsx
-* const { ref, isInView } = useIsInView(forwardedRef, { inView: true, inViewOnce: true });
-* ```
-*/
-function useIsInView(ref, options = {}) {
-	const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
-	const localRef = React.useRef(null);
-	React.useImperativeHandle(ref, () => localRef.current);
-	const inViewResult = useInView(localRef, {
-		once: inViewOnce,
-		margin: inViewMargin
-	});
-	return {
-		ref: localRef,
-		isInView: !inView || inViewResult
-	};
-}
-
-//#endregion
-export { useIsInView };

package/dist/react/hooks/State/UseControlledState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UseControlledState.d.ts","sourceRoot":"","sources":["../../../../src/react/hooks/State/UseControlledState.tsx"],"names":[],"mappings":"AAEA;;GAEG;AACH,UAAU,qBAAqB,CAAC,CAAC;IAC/B,wBAAwB;IACxB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,IAAI,SAAS,GAAG,EAAE,GAAG,EAAE,EAC3D,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9C,GACA,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAoBhD;AAED,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/react/hooks/State/UseControlledState.js

@@ -1,34 +0,0 @@
-import * as React from "../../../react";
-
-//#region src/react/hooks/State/UseControlledState.tsx
-/**
-* Hook for controlled/uncontrolled state management.
-* Supports both patterns seamlessly — when `value` is provided, it's controlled;
-* otherwise uses internal state initialized from `defaultValue`.
-*
-* @param props - Value, defaultValue, and onChange callback
-* @returns Tuple of [currentValue, setValue]
-*
-* @example
-* ```tsx
-* const [open, setOpen] = useControlledState({
-*   value: props.open,
-*   defaultValue: false,
-*   onChange: props.onOpenChange,
-* });
-* ```
-*/
-function useControlledState(props) {
-	const { value, defaultValue, onChange } = props;
-	const [state, setInternalState] = React.useState(value !== void 0 ? value : defaultValue);
-	React.useEffect(() => {
-		if (value !== void 0) setInternalState(value);
-	}, [value]);
-	return [state, React.useCallback((next, ...args) => {
-		setInternalState(next);
-		onChange?.(next, ...args);
-	}, [onChange])];
-}
-
-//#endregion
-export { useControlledState };

package/dist/react/hooks/State/UseDataState.d.ts

@@ -1,21 +0,0 @@
-import * as React from '../../../react';
-/** Possible values stored in a data-* attribute. */
-type DataStateValue = string | boolean | null;
-/**
- * Hook that observes a `data-*` attribute on a DOM element via MutationObserver
- * and returns the current value reactively.
- *
- * @param key - The data attribute key (without `data-` prefix)
- * @param forwardedRef - Optional forwarded ref to merge
- * @param onChange - Callback when value changes
- * @returns Tuple of [currentValue, localRef]
- *
- * @example
- * ```tsx
- * const [state, ref] = useDataState<HTMLDivElement>('state');
- * // Reacts to changes in `data-state` attribute on the element
- * ```
- */
-declare function useDataState<T extends HTMLElement = HTMLElement>(key: string, forwardedRef?: React.Ref<T | null>, onChange?: (value: DataStateValue) => void): [DataStateValue, React.RefObject<T | null>];
-export { useDataState, type DataStateValue };
-//# sourceMappingURL=UseDataState.d.ts.map

package/dist/react/hooks/State/UseDataState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UseDataState.d.ts","sourceRoot":"","sources":["../../../../src/react/hooks/State/UseDataState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oDAAoD;AACpD,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;AAe9C;;;;;;;;;;;;;;GAcG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACvD,GAAG,EAAE,MAAM,EACX,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,GACzC,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAkC7C;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,CAAC"}

package/dist/react/hooks/State/UseDataState.js

@@ -1,63 +0,0 @@
-'use client';
-
-import * as React from "../../../react";
-
-//#region src/react/hooks/State/UseDataState.tsx
-/**
-* Parse a DOM dataset attribute string into a typed value.
-*
-* @param value - Raw attribute string
-* @returns Parsed DataStateValue
-*/
-function parseDatasetValue(value) {
-	if (value === null) return null;
-	if (value === "" || value === "true") return true;
-	if (value === "false") return false;
-	return value;
-}
-/**
-* Hook that observes a `data-*` attribute on a DOM element via MutationObserver
-* and returns the current value reactively.
-*
-* @param key - The data attribute key (without `data-` prefix)
-* @param forwardedRef - Optional forwarded ref to merge
-* @param onChange - Callback when value changes
-* @returns Tuple of [currentValue, localRef]
-*
-* @example
-* ```tsx
-* const [state, ref] = useDataState<HTMLDivElement>('state');
-* // Reacts to changes in `data-state` attribute on the element
-* ```
-*/
-function useDataState(key, forwardedRef, onChange) {
-	const localRef = React.useRef(null);
-	React.useImperativeHandle(forwardedRef, () => localRef.current);
-	const getSnapshot = () => {
-		const el = localRef.current;
-		return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
-	};
-	const subscribe = (callback) => {
-		const el = localRef.current;
-		if (!el) return () => {};
-		const observer = new MutationObserver((records) => {
-			for (const record of records) if (record.attributeName === `data-${key}`) {
-				callback();
-				break;
-			}
-		});
-		observer.observe(el, {
-			attributes: true,
-			attributeFilter: [`data-${key}`]
-		});
-		return () => observer.disconnect();
-	};
-	const value = React.useSyncExternalStore(subscribe, getSnapshot);
-	React.useEffect(() => {
-		if (onChange) onChange(value);
-	}, [value, onChange]);
-	return [value, localRef];
-}
-
-//#endregion
-export { useDataState };

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

@@ -1,14 +0,0 @@
-/**
- * Custom React hooks barrel export.
- *
- * @module @mks2508/mks-ui/react/hooks
- */
-export { useAutoHeight } from './Animation/UseAutoHeight';
-export type { IAutoHeightOptions } from './Animation/UseAutoHeight';
-export { useControlledState } from './State/UseControlledState';
-export type { IControlledStateProps } from './State/UseControlledState';
-export { useDataState } from './State/UseDataState';
-export type { DataStateValue } from './State/UseDataState';
-export { useIsInView } from './DOM/UseIsInView';
-export type { IUseIsInViewOptions } from './DOM/UseIsInView';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/react/hooks/index.js

@@ -1,4 +0,0 @@
-import { useAutoHeight } from "./Animation/UseAutoHeight.js";
-import { useIsInView } from "./DOM/UseIsInView.js";
-import { useControlledState } from "./State/UseControlledState.js";
-import { useDataState } from "./State/UseDataState.js";

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/icons/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,mBAAmB,CAAC;AAIlC,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAC"}

package/dist/react/icons/lucide-animated/activity.d.ts

@@ -1,11 +0,0 @@
-import type { HTMLAttributes } from "../../../react";
-export interface ActivityIconHandle {
-    startAnimation: () => void;
-    stopAnimation: () => void;
-}
-interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
-    size?: number;
-}
-declare const ActivityIcon: import("../../../react").ForwardRefExoticComponent<ActivityIconProps & import("../../../react").RefAttributes<ActivityIconHandle>>;
-export { ActivityIcon };
-//# sourceMappingURL=activity.d.ts.map

package/dist/react/icons/lucide-animated/activity.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"activity.d.ts","sourceRoot":"","sources":["../../../../src/react/icons/lucide-animated/activity.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwBD,QAAA,MAAM,YAAY,kHAgEjB,CAAC;AAIF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/react/icons/lucide-animated/activity.js

@@ -1,75 +0,0 @@
-"use client";
-
-import { cn } from "../../lib/utils.js";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "../../../react";
-import { jsx } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
-
-//#region src/react/icons/lucide-animated/activity.tsx
-const VARIANTS = {
-	normal: {
-		opacity: 1,
-		pathLength: 1,
-		pathOffset: 0,
-		transition: {
-			duration: .4,
-			opacity: { duration: .1 }
-		}
-	},
-	animate: {
-		opacity: [0, 1],
-		pathLength: [0, 1],
-		pathOffset: [1, 0],
-		transition: {
-			duration: .6,
-			ease: "linear",
-			opacity: { duration: .1 }
-		}
-	}
-};
-const ActivityIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
-	const controls = useAnimation();
-	const isControlledRef = useRef(false);
-	useImperativeHandle(ref, () => {
-		isControlledRef.current = true;
-		return {
-			startAnimation: () => controls.start("animate"),
-			stopAnimation: () => controls.start("normal")
-		};
-	});
-	const handleMouseEnter = useCallback((e) => {
-		if (isControlledRef.current) onMouseEnter?.(e);
-		else controls.start("animate");
-	}, [controls, onMouseEnter]);
-	const handleMouseLeave = useCallback((e) => {
-		if (isControlledRef.current) onMouseLeave?.(e);
-		else controls.start("normal");
-	}, [controls, onMouseLeave]);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(className),
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		...props,
-		children: /* @__PURE__ */ jsx("svg", {
-			fill: "none",
-			height: size,
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "2",
-			viewBox: "0 0 24 24",
-			width: size,
-			xmlns: "http://www.w3.org/2000/svg",
-			children: /* @__PURE__ */ jsx(motion.path, {
-				animate: controls,
-				d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
-				initial: "normal",
-				variants: VARIANTS
-			})
-		})
-	});
-});
-ActivityIcon.displayName = "ActivityIcon";
-
-//#endregion
-export { ActivityIcon };