@mks2508/mks-ui 0.1.0 → 0.1.2

package/dist/components/animate-ui/primitives/animate/slot.js

@@ -1,47 +1,42 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { motion, isMotionComponent } from 'motion/react';
-import { cn } from '@/lib/utils';
+
+import { cn } from "../../../../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { isMotionComponent, motion } from "motion/react";
+
+//#region src/components/animate-ui/primitives/animate/slot.tsx
 function mergeRefs(...refs) {
-    return (node) => {
-        refs.forEach((ref) => {
-            if (!ref)
-                return;
-            if (typeof ref === 'function') {
-                ref(node);
-            }
-            else {
-                ref.current = node;
-            }
-        });
-    };
+	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;
+	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;
 }
 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;
-    const mergedProps = mergeProps(childProps, props);
-    return (_jsx(Base, { ...mergedProps, ref: mergeRefs(childRef, ref) }));
+	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)
+	});
 }
-export { Slot, };
-//# sourceMappingURL=slot.js.map
+
+//#endregion
+export { Slot };

package/dist/components/animate-ui/primitives/base/menu.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Menu as MenuPrimitive } from '@base-ui-components/react/menu';
 import { type HTMLMotionProps } from 'motion/react';
-import { type HighlightItemProps, type HighlightProps } from '@/components/animate-ui/primitives/effects/highlight';
+import { type HighlightItemProps, type HighlightProps } from '../../../../components/animate-ui/primitives/effects/highlight';
 type MenuActiveValueContextType = {
     highlightedValue: string | null;
     setHighlightedValue: (value: string | null) => void;

package/dist/components/animate-ui/primitives/base/progress.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Progress as ProgressPrimitives } from '@base-ui-components/react/progress';
-import { type CountingNumberProps } from '@/components/animate-ui/primitives/texts/counting-number';
+import { type CountingNumberProps } from '../../../../components/animate-ui/primitives/texts/counting-number';
 type ProgressContextType = {
     value: number;
 };

package/dist/components/animate-ui/primitives/base/switch.js

@@ -1,36 +1,90 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { Switch as SwitchPrimitives } from '@base-ui-components/react/switch';
-import { motion, } from 'motion/react';
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-const [SwitchProvider, useSwitch] = getStrictContext('SwitchContext');
-function Switch({ name, defaultChecked, checked, onCheckedChange, nativeButton, disabled, readOnly, required, inputRef, id, ...props }) {
-    const [isPressed, setIsPressed] = React.useState(false);
-    const [isChecked, setIsChecked] = useControlledState({
-        value: checked,
-        defaultValue: defaultChecked,
-        onChange: onCheckedChange,
-    });
-    return (_jsx(SwitchProvider, { value: { isChecked, setIsChecked, isPressed, setIsPressed }, children: _jsx(SwitchPrimitives.Root, { name: name, defaultChecked: defaultChecked, checked: checked, onCheckedChange: setIsChecked, nativeButton: nativeButton, disabled: disabled, readOnly: readOnly, required: required, inputRef: inputRef, id: id, render: _jsx(motion.button, { "data-slot": "switch", whileTap: "tap", initial: false, onTapStart: () => setIsPressed(true), onTapCancel: () => setIsPressed(false), onTap: () => setIsPressed(false), ...props }) }) }));
+
+import { getStrictContext } from "../../../../lib/get-strict-context.js";
+import { useControlledState } from "../../../../hooks/use-controlled-state.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui-components/react/switch";
+import { motion } from "motion/react";
+
+//#region src/components/animate-ui/primitives/base/switch.tsx
+const [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
+function Switch$1({ name, defaultChecked, checked, onCheckedChange, nativeButton, disabled, readOnly, required, inputRef, id, ...props }) {
+	const [isPressed, setIsPressed] = React.useState(false);
+	const [isChecked, setIsChecked] = useControlledState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	return /* @__PURE__ */ jsx(SwitchProvider, {
+		value: {
+			isChecked,
+			setIsChecked,
+			isPressed,
+			setIsPressed
+		},
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			name,
+			defaultChecked,
+			checked,
+			onCheckedChange: setIsChecked,
+			nativeButton,
+			disabled,
+			readOnly,
+			required,
+			inputRef,
+			id,
+			render: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "switch",
+				whileTap: "tap",
+				initial: false,
+				onTapStart: () => setIsPressed(true),
+				onTapCancel: () => setIsPressed(false),
+				onTap: () => setIsPressed(false),
+				...props
+			})
+		})
+	});
 }
-function SwitchThumb({ pressedAnimation, transition = { type: 'spring', stiffness: 300, damping: 25 }, ...props }) {
-    const { isPressed } = useSwitch();
-    return (_jsx(SwitchPrimitives.Thumb, { render: _jsx(motion.div, { "data-slot": "switch-thumb", whileTap: "tab", layout: true, transition: transition, animate: isPressed ? pressedAnimation : undefined, ...props }) }));
+function SwitchThumb({ pressedAnimation, transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 25
+}, ...props }) {
+	const { isPressed } = useSwitch();
+	return /* @__PURE__ */ jsx(Switch.Thumb, { render: /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "switch-thumb",
+		whileTap: "tab",
+		layout: true,
+		transition,
+		animate: isPressed ? pressedAnimation : void 0,
+		...props
+	}) });
 }
-function SwitchIcon({ position, transition = { type: 'spring', bounce: 0 }, ...props }) {
-    const { isChecked } = useSwitch();
-    const isAnimated = React.useMemo(() => {
-        if (position === 'right')
-            return !isChecked;
-        if (position === 'left')
-            return isChecked;
-        if (position === 'thumb')
-            return true;
-        return false;
-    }, [position, isChecked]);
-    return (_jsx(motion.div, { "data-slot": `switch-${position}-icon`, animate: isAnimated ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }, transition: transition, ...props }));
+function SwitchIcon({ position, transition = {
+	type: "spring",
+	bounce: 0
+}, ...props }) {
+	const { isChecked } = useSwitch();
+	const isAnimated = React.useMemo(() => {
+		if (position === "right") return !isChecked;
+		if (position === "left") return isChecked;
+		if (position === "thumb") return true;
+		return false;
+	}, [position, isChecked]);
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": `switch-${position}-icon`,
+		animate: isAnimated ? {
+			scale: 1,
+			opacity: 1
+		} : {
+			scale: 0,
+			opacity: 0
+		},
+		transition,
+		...props
+	});
 }
-export { Switch, SwitchThumb, SwitchIcon, useSwitch, };
-//# sourceMappingURL=switch.js.map
+
+//#endregion
+export { Switch$1 as Switch, SwitchIcon, SwitchThumb, useSwitch };

package/dist/components/animate-ui/primitives/base/tabs.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
 import { type HTMLMotionProps, type Transition } from 'motion/react';
-import { type HighlightProps, type HighlightItemProps } from '@/components/animate-ui/primitives/effects/highlight';
-import { type AutoHeightProps } from '@/components/animate-ui/primitives/effects/auto-height';
+import { type HighlightProps, type HighlightItemProps } from '../../../../components/animate-ui/primitives/effects/highlight';
+import { type AutoHeightProps } from '../../../../components/animate-ui/primitives/effects/auto-height';
 type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
 declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
 type TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;

package/dist/components/animate-ui/primitives/base/tabs.js

@@ -1,53 +1,132 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import { motion, AnimatePresence, } from 'motion/react';
-import { Highlight, HighlightItem, } from '@/components/animate-ui/primitives/effects/highlight';
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-import { AutoHeight, } from '@/components/animate-ui/primitives/effects/auto-height';
-const [TabsProvider, useTabs] = getStrictContext('TabsContext');
-function Tabs(props) {
-    const [value, setValue] = useControlledState({
-        value: props.value,
-        defaultValue: props.defaultValue,
-        onChange: props.onValueChange,
-    });
-    return (_jsx(TabsProvider, { value: { value, setValue }, children: _jsx(TabsPrimitive.Root, { "data-slot": "tabs", ...props, onValueChange: setValue }) }));
-}
-function TabsHighlight({ transition = { type: 'spring', stiffness: 200, damping: 25 }, ...props }) {
-    const { value } = useTabs();
-    return (_jsx(Highlight, { "data-slot": "tabs-highlight", controlledItems: true, value: value, transition: transition, click: false, ...props }));
+
+import { getStrictContext } from "../../../../lib/get-strict-context.js";
+import { useControlledState } from "../../../../hooks/use-controlled-state.js";
+import { Highlight, HighlightItem } from "../effects/highlight.js";
+import { AutoHeight } from "../effects/auto-height.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { Tabs } from "@base-ui-components/react/tabs";
+
+//#region src/components/animate-ui/primitives/base/tabs.tsx
+const [TabsProvider, useTabs] = getStrictContext("TabsContext");
+function Tabs$1(props) {
+	const [value, setValue] = useControlledState({
+		value: props.value,
+		defaultValue: props.defaultValue,
+		onChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(TabsProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			"data-slot": "tabs",
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+function TabsHighlight({ transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 25
+}, ...props }) {
+	const { value } = useTabs();
+	return /* @__PURE__ */ jsx(Highlight, {
+		"data-slot": "tabs-highlight",
+		controlledItems: true,
+		value,
+		transition,
+		click: false,
+		...props
+	});
 }
 function TabsList(props) {
-    return _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", ...props });
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		...props
+	});
 }
 function TabsHighlightItem(props) {
-    return _jsx(HighlightItem, { "data-slot": "tabs-highlight-item", ...props });
+	return /* @__PURE__ */ jsx(HighlightItem, {
+		"data-slot": "tabs-highlight-item",
+		...props
+	});
 }
 function TabsTab(props) {
-    return _jsx(TabsPrimitive.Tab, { "data-slot": "tabs-tab", ...props });
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-tab",
+		...props
+	});
 }
-function TabsPanel({ value, keepMounted, transition = { duration: 0.5, ease: 'easeInOut' }, ...props }) {
-    return (_jsx(AnimatePresence, { mode: "wait", children: _jsx(TabsPrimitive.Panel, { render: _jsx(motion.div, { "data-slot": "tabs-panel", layout: true, layoutDependency: value, initial: { opacity: 0, filter: 'blur(4px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(4px)' }, transition: transition, ...props }), keepMounted: keepMounted, value: value }) }));
+function TabsPanel({ value, keepMounted, transition = {
+	duration: .5,
+	ease: "easeInOut"
+}, ...props }) {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: /* @__PURE__ */ jsx(Tabs.Panel, {
+			render: /* @__PURE__ */ jsx(motion.div, {
+				"data-slot": "tabs-panel",
+				layout: true,
+				layoutDependency: value,
+				initial: {
+					opacity: 0,
+					filter: "blur(4px)"
+				},
+				animate: {
+					opacity: 1,
+					filter: "blur(0px)"
+				},
+				exit: {
+					opacity: 0,
+					filter: "blur(4px)"
+				},
+				transition,
+				...props
+			}),
+			keepMounted,
+			value
+		})
+	});
 }
 const defaultTransition = {
-    type: 'spring',
-    stiffness: 200,
-    damping: 30,
+	type: "spring",
+	stiffness: 200,
+	damping: 30
 };
 function isAutoMode(props) {
-    return !props.mode || props.mode === 'auto-height';
+	return !props.mode || props.mode === "auto-height";
 }
 function TabsPanels(props) {
-    const { value } = useTabs();
-    if (isAutoMode(props)) {
-        const { children, transition = defaultTransition, ...autoProps } = props;
-        return (_jsx(AutoHeight, { "data-slot": "tabs-panels", deps: [value], transition: transition, ...autoProps, children: _jsx(React.Fragment, { children: children }, value) }));
-    }
-    const { children, style, transition = defaultTransition, ...layoutProps } = props;
-    return (_jsx(motion.div, { "data-slot": "tabs-panels", layout: "size", layoutDependency: value, transition: { layout: transition }, style: { overflow: 'hidden', ...style }, ...layoutProps, children: _jsx(React.Fragment, { children: children }, value) }));
-}
-export { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsTab, TabsPanel, TabsPanels, };
-//# sourceMappingURL=tabs.js.map
+	const { value } = useTabs();
+	if (isAutoMode(props)) {
+		const { children, transition = defaultTransition, ...autoProps } = props;
+		return /* @__PURE__ */ jsx(AutoHeight, {
+			"data-slot": "tabs-panels",
+			deps: [value],
+			transition,
+			...autoProps,
+			children: /* @__PURE__ */ jsx(React.Fragment, { children }, value)
+		});
+	}
+	const { children, style, transition = defaultTransition, ...layoutProps } = props;
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "tabs-panels",
+		layout: "size",
+		layoutDependency: value,
+		transition: { layout: transition },
+		style: {
+			overflow: "hidden",
+			...style
+		},
+		...layoutProps,
+		children: /* @__PURE__ */ jsx(React.Fragment, { children }, value)
+	});
+}
+
+//#endregion
+export { Tabs$1 as Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab };

package/dist/components/animate-ui/primitives/effects/auto-height.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type HTMLMotionProps, type LegacyAnimationControls, type TargetAndTransition, type Transition } from 'motion/react';
-import { WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
+import { WithAsChild } from '../../../../components/animate-ui/primitives/animate/slot';
 type AutoHeightProps = WithAsChild<{
     children: React.ReactNode;
     deps?: React.DependencyList;

package/dist/components/animate-ui/primitives/effects/auto-height.js

@@ -1,18 +1,37 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion, } from 'motion/react';
-import { useAutoHeight } from '@/hooks/use-auto-height';
-import { Slot } from '@/components/animate-ui/primitives/animate/slot';
+
+import { useAutoHeight } from "../../../../hooks/use-auto-height.js";
+import { Slot } from "../animate/slot.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+
+//#region src/components/animate-ui/primitives/effects/auto-height.tsx
 function AutoHeight({ children, deps = [], transition = {
-    type: 'spring',
-    stiffness: 300,
-    damping: 30,
-    bounce: 0,
-    restDelta: 0.01,
+	type: "spring",
+	stiffness: 300,
+	damping: 30,
+	bounce: 0,
+	restDelta: .01
 }, style, animate, asChild = false, ...props }) {
-    const { ref, height } = useAutoHeight(deps);
-    const Comp = asChild ? Slot : motion.div;
-    return (_jsx(Comp, { style: { overflow: 'hidden', ...style }, animate: { height, ...animate }, transition: transition, ...props, children: _jsx("div", { ref: ref, children: children }) }));
+	const { ref, height } = useAutoHeight(deps);
+	return /* @__PURE__ */ jsx(asChild ? Slot : motion.div, {
+		style: {
+			overflow: "hidden",
+			...style
+		},
+		animate: {
+			height,
+			...animate
+		},
+		transition,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			children
+		})
+	});
 }
-export { AutoHeight };
-//# sourceMappingURL=auto-height.js.map
+
+//#endregion
+export { AutoHeight };