@mks2508/mks-ui 0.1.4 → 0.2.0

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

@@ -0,0 +1,80 @@
+'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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,31 @@
+/**
+ * Props for useControlledState hook.
+ */
+interface IControlledStateProps<T> {
+    /** Controlled value. */
+    value?: T;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: T;
+}
+/**
+ * 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,
+ * });
+ * ```
+ */
+export declare function useControlledState<T, Rest extends any[] = []>(props: IControlledStateProps<T> & {
+    onChange?: (value: T, ...args: Rest) => void;
+}): readonly [T, (next: T, ...args: Rest) => void];
+export type { IControlledStateProps };
+//# sourceMappingURL=UseControlledState.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,63 @@
+'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

@@ -0,0 +1,14 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,8 @@
+/**
+ * Icons barrel export - Organized by registry.
+ *
+ * @module @mks2508/mks-ui/react/icons
+ */
+export * from './lucide-animated';
+export * as HugeIcons from '@hugeicons/core-free-icons';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,75 @@
+"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 };

package/dist/react/icons/lucide-animated/arrow-down-to-line.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ArrowDownToLine Icon.
+ *
+ * Simple SVG icon for follow cursor enabled.
+ *
+ * @module components/icons/arrow-down-to-line
+ */
+import type { HTMLAttributes } from '../../../react';
+export interface IArrowDownToLineIconProps extends HTMLAttributes<SVGSVGElement> {
+    size?: number;
+}
+/**
+ * ArrowDownToLine Icon component.
+ *
+ * Use for follow cursor enabled state (auto-scroll to bottom).
+ *
+ * @example
+ * ```tsx
+ * <ArrowDownToLineIcon className="w-4 h-4 text-primary" />
+ * ```
+ */
+export declare function ArrowDownToLineIcon({ className, size, ...props }: IArrowDownToLineIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=arrow-down-to-line.d.ts.map

package/dist/react/icons/lucide-animated/arrow-down-to-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-down-to-line.d.ts","sourceRoot":"","sources":["../../../../src/react/icons/lucide-animated/arrow-down-to-line.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,IAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAoB3B"}

package/dist/react/icons/lucide-animated/arrow-down-to-line.js

@@ -0,0 +1,45 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/icons/lucide-animated/arrow-down-to-line.tsx
+/**
+* ArrowDownToLine Icon.
+*
+* Simple SVG icon for follow cursor enabled.
+*
+* @module components/icons/arrow-down-to-line
+*/
+/**
+* ArrowDownToLine Icon component.
+*
+* Use for follow cursor enabled state (auto-scroll to bottom).
+*
+* @example
+* ```tsx
+* <ArrowDownToLineIcon className="w-4 h-4 text-primary" />
+* ```
+*/
+function ArrowDownToLineIcon({ className, size = 24, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className,
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 17V3" }),
+			/* @__PURE__ */ jsx("path", { d: "m6 11 6 6 6-6" }),
+			/* @__PURE__ */ jsx("path", { d: "M20 21H4" })
+		]
+	});
+}
+
+//#endregion
+export { ArrowDownToLineIcon };

package/dist/react/icons/lucide-animated/arrow-up.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ArrowUp Icon.
+ *
+ * Simple SVG icon for follow cursor disabled.
+ *
+ * @module components/icons/arrow-up
+ */
+import type { HTMLAttributes } from '../../../react';
+export interface IArrowUpIconProps extends HTMLAttributes<SVGSVGElement> {
+    size?: number;
+}
+/**
+ * ArrowUp Icon component.
+ *
+ * Use for follow cursor disabled state (scroll locked).
+ *
+ * @example
+ * ```tsx
+ * <ArrowUpIcon className="w-4 h-4 text-muted-foreground" />
+ * ```
+ */
+export declare function ArrowUpIcon({ className, size, ...props }: IArrowUpIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=arrow-up.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-up.d.ts","sourceRoot":"","sources":["../../../../src/react/icons/lucide-animated/arrow-up.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,aAAa,CAAC;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAmBnB"}

package/dist/react/icons/lucide-animated/arrow-up.js

@@ -0,0 +1,41 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/icons/lucide-animated/arrow-up.tsx
+/**
+* ArrowUp Icon.
+*
+* Simple SVG icon for follow cursor disabled.
+*
+* @module components/icons/arrow-up
+*/
+/**
+* ArrowUp Icon component.
+*
+* Use for follow cursor disabled state (scroll locked).
+*
+* @example
+* ```tsx
+* <ArrowUpIcon className="w-4 h-4 text-muted-foreground" />
+* ```
+*/
+function ArrowUpIcon({ className, size = 24, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className,
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M12 3v17" }), /* @__PURE__ */ jsx("path", { d: "m6 11 6-6 6 6" })]
+	});
+}
+
+//#endregion
+export { ArrowUpIcon };

package/dist/react/icons/lucide-animated/bell-electric.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"bell-electric.d.ts","sourceRoot":"","sources":["../../../../src/react/icons/lucide-animated/bell-electric.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,sBAAsB;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,UAAU,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,gBAAgB,0HAsGpB,CAAC;AAIH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}