@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/ui/Textarea/index.js

@@ -0,0 +1,24 @@
+import { cn } from "../../lib/utils.js";
+import { textareaStyles } from "./Textarea.styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/Textarea/index.tsx
+/**
+* Textarea — styled multi-line text input.
+*
+* @example
+* ```tsx
+* <Textarea placeholder="Enter description..." />
+* ```
+*/
+function Textarea({ className, slots, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn(textareaStyles.root, slots?.root, className),
+		...props
+	});
+}
+
+//#endregion
+export { Textarea };

package/dist/react-ui/ui/Tooltip/Tooltip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,WAAW,CAmBjD,CAAC"}

package/dist/react-ui/ui/Tooltip/Tooltip.styles.js

@@ -0,0 +1,26 @@
+//#region src/react-ui/ui/Tooltip/Tooltip.styles.ts
+/**
+* Default Tailwind classes for each Tooltip visual region.
+* Consumers override via the `slots` prop; the merge order is:
+* `base -> slots -> className`.
+*
+* @example
+* ```typescript
+* import { tooltipStyles } from './Tooltip.styles';
+* // tooltipStyles.popup => 'z-50 overflow-hidden rounded-md ...'
+* ```
+*/
+const tooltipStyles = {
+	root: "",
+	popup: [
+		"z-50 overflow-hidden rounded-md",
+		"border border-border bg-popover px-3 py-1.5",
+		"text-sm text-popover-foreground shadow-md"
+	].join(" "),
+	trigger: "",
+	positioner: "",
+	arrow: "fill-popover"
+};
+
+//#endregion
+export { tooltipStyles };

package/dist/react-ui/ui/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,203 @@
+/**
+ * Type definitions for the Tooltip component.
+ *
+ * Provides all prop interfaces, slot types, context types, and configuration
+ * for the animated tooltip system built on Base UI and Motion.
+ *
+ * @module @mks2508/mks-ui/react/ui/Tooltip/Tooltip.types
+ */
+import type * as React from 'react';
+import type { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import type { HTMLMotionProps, MotionValue, SpringOptions } from 'motion/react';
+import type { SlotOverrides, IBaseConfig } from '../../../core/types';
+/**
+ * Visual regions available for class-name overrides via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TooltipPopup slots={{ popup: 'bg-primary text-primary-foreground' }} />
+ * ```
+ */
+export type TooltipSlot = 'root' | 'popup' | 'trigger' | 'positioner' | 'arrow';
+/**
+ * Extended configuration for the Tooltip component.
+ * Inherits base animation settings and adds tooltip-specific cursor-following options.
+ *
+ * @example
+ * ```typescript
+ * const config: ITooltipConfig = {
+ *   followCursor: 'x',
+ *   followCursorSpringOptions: { stiffness: 200, damping: 17 },
+ *   animation: { duration: 0.15 },
+ * };
+ * ```
+ */
+export interface ITooltipConfig extends IBaseConfig {
+    /**
+     * Whether the tooltip follows the cursor position.
+     * - `true` — follows on both axes
+     * - `'x'` — follows only horizontal movement
+     * - `'y'` — follows only vertical movement
+     * - `false` — static positioning (default)
+     *
+     * @defaultValue false
+     */
+    followCursor?: boolean | 'x' | 'y';
+    /**
+     * Spring physics options for the cursor-following animation.
+     * Only used when `followCursor` is enabled.
+     *
+     * @defaultValue `{ stiffness: 200, damping: 17 }`
+     */
+    followCursorSpringOptions?: SpringOptions;
+}
+/**
+ * Internal context type shared between Tooltip sub-components.
+ * Tracks open state, cursor position motion values, and follow-cursor settings.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, x, y, followCursor } = useTooltip();
+ * ```
+ */
+export type TooltipContextType = {
+    /** Whether the tooltip is currently open. */
+    isOpen: boolean;
+    /** Callback to change the open state. */
+    setIsOpen: ITooltipProps['onOpenChange'];
+    /** Motion value tracking horizontal cursor offset. */
+    x: MotionValue<number>;
+    /** Motion value tracking vertical cursor offset. */
+    y: MotionValue<number>;
+    /** Current follow-cursor mode. */
+    followCursor?: boolean | 'x' | 'y';
+    /** Spring physics options for cursor-following. */
+    followCursorSpringOptions?: SpringOptions;
+};
+/**
+ * Props for the root `Tooltip` component.
+ * Wraps Base UI Tooltip.Root with controlled-state support, context provider,
+ * and cursor-following motion values.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip followCursor="x">
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipPortal>
+ *     <TooltipPositioner>
+ *       <TooltipPopup>Tooltip content</TooltipPopup>
+ *     </TooltipPositioner>
+ *   </TooltipPortal>
+ * </Tooltip>
+ * ```
+ */
+export interface ITooltipProps extends React.ComponentProps<typeof TooltipPrimitive.Root> {
+    /**
+     * Whether the tooltip follows the cursor position.
+     * @defaultValue false
+     */
+    followCursor?: boolean | 'x' | 'y';
+    /**
+     * Spring physics options for the cursor-following animation.
+     * @defaultValue `{ stiffness: 200, damping: 17 }`
+     */
+    followCursorSpringOptions?: SpringOptions;
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+    /** Component configuration. */
+    config?: ITooltipConfig;
+}
+/**
+ * Props for the `TooltipProvider` component.
+ * Wraps Base UI Tooltip.Provider to set shared defaults for a group of tooltips.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delay={200}>
+ *   <Tooltip>...</Tooltip>
+ *   <Tooltip>...</Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export interface ITooltipProviderProps extends React.ComponentProps<typeof TooltipPrimitive.Provider> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+}
+/**
+ * Props for the `TooltipTrigger` component.
+ * Renders the element that shows the tooltip on hover/focus.
+ *
+ * @example
+ * ```tsx
+ * <TooltipTrigger>
+ *   <Button>Hover me</Button>
+ * </TooltipTrigger>
+ * ```
+ */
+export interface ITooltipTriggerProps extends React.ComponentProps<typeof TooltipPrimitive.Trigger> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+}
+/**
+ * Props for the `TooltipPortal` component.
+ * Renders children into a React portal with AnimatePresence for exit animations.
+ * The `keepMounted` prop is handled internally and cannot be overridden.
+ *
+ * @example
+ * ```tsx
+ * <TooltipPortal>
+ *   <TooltipPositioner>
+ *     <TooltipPopup>...</TooltipPopup>
+ *   </TooltipPositioner>
+ * </TooltipPortal>
+ * ```
+ */
+export interface ITooltipPortalProps extends Omit<React.ComponentProps<typeof TooltipPrimitive.Portal>, 'keepMounted'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+}
+/**
+ * Props for the `TooltipPositioner` component.
+ * Handles automatic positioning relative to the trigger.
+ *
+ * @example
+ * ```tsx
+ * <TooltipPositioner sideOffset={4}>
+ *   <TooltipPopup>Content</TooltipPopup>
+ * </TooltipPositioner>
+ * ```
+ */
+export interface ITooltipPositionerProps extends React.ComponentProps<typeof TooltipPrimitive.Positioner> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+}
+/**
+ * Props for the `TooltipPopup` component.
+ * The main content container with scale entrance animation.
+ * Supports cursor-following via spring-animated motion values.
+ *
+ * @example
+ * ```tsx
+ * <TooltipPopup className="px-3 py-1.5 text-sm">
+ *   Helpful information
+ * </TooltipPopup>
+ * ```
+ */
+export interface ITooltipPopupProps extends Omit<Omit<React.ComponentProps<typeof TooltipPrimitive.Popup>, 'render'>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+}
+/**
+ * Props for the `TooltipArrow` component.
+ * Renders a directional arrow pointing toward the trigger.
+ *
+ * @example
+ * ```tsx
+ * <TooltipArrow className="fill-primary" />
+ * ```
+ */
+export interface ITooltipArrowProps extends React.ComponentProps<typeof TooltipPrimitive.Arrow> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<TooltipSlot>;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/dist/react-ui/ui/Tooltip/Tooltip.types.d.ts.map

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

package/dist/react-ui/ui/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tooltip/index.tsx"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAMzB,QAAA,MAA6B,UAAU,0BACiB,CAAC;AAMzD;;;;;;;;;;;;;GAaG;AACH,iBAAS,eAAe,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAI1E;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,OAAO,CAAC,EACf,YAAoB,EACpB,yBAA2D,EAC3D,KAAK,EACL,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,aAAa,2CA2Bf;AAMD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,EACtB,WAAW,EACX,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA+BtB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CActE;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EACpB,UAA4D,EAC5D,KAAK,EACL,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAgCpB;AAMD;;;;;;;;;GASG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD,OAAO,EACL,eAAe,EACf,OAAO,EACP,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,UAAU,GACX,CAAC;AAGF,YAAY,EACV,qBAAqB,EACrB,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,GACf,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/react-ui/ui/Tooltip/index.js

@@ -0,0 +1,219 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { tooltipStyles } from "./Tooltip.styles.js";
+import "react";
+import { AnimatePresence, motion, useMotionValue, useSpring } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/react-ui/ui/Tooltip/index.tsx
+const [LocalTooltipProvider, useTooltip] = getStrictContext("TooltipContext");
+/**
+* Shared configuration provider for a group of tooltips.
+* Sets defaults like delay, skip-delay, and close-delay for all nested Tooltips.
+*
+* @param props - Provider props forwarded to Base UI Tooltip.Provider
+*
+* @example
+* ```tsx
+* <TooltipProvider delay={200}>
+*   <Tooltip>...</Tooltip>
+*   <Tooltip>...</Tooltip>
+* </TooltipProvider>
+* ```
+*/
+function TooltipProvider({ slots: _slots, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		...props
+	});
+}
+/**
+* Root Tooltip component.
+* Manages controlled/uncontrolled open state, cursor-following motion values,
+* and provides context to children.
+*
+* @param props - Tooltip root props including `followCursor` and spring options
+*
+* @example
+* ```tsx
+* <Tooltip followCursor="x" followCursorSpringOptions={{ stiffness: 300 }}>
+*   <TooltipTrigger>Hover</TooltipTrigger>
+*   <TooltipPortal>
+*     <TooltipPositioner>
+*       <TooltipPopup>Content</TooltipPopup>
+*     </TooltipPositioner>
+*   </TooltipPortal>
+* </Tooltip>
+* ```
+*/
+function Tooltip$1({ followCursor = false, followCursorSpringOptions = {
+	stiffness: 200,
+	damping: 17
+}, slots, config: _config, ...props }) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(LocalTooltipProvider, {
+		value: {
+			isOpen,
+			setIsOpen,
+			x: useMotionValue(0),
+			y: useMotionValue(0),
+			followCursor,
+			followCursorSpringOptions
+		},
+		children: /* @__PURE__ */ jsx(Tooltip.Root, {
+			"data-slot": "tooltip",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+/**
+* Trigger element that shows the tooltip on hover/focus.
+* Tracks mouse position when `followCursor` is enabled on the parent Tooltip.
+*
+* @param props - Trigger props forwarded to Base UI Tooltip.Trigger
+*
+* @example
+* ```tsx
+* <TooltipTrigger>
+*   <button>Hover me</button>
+* </TooltipTrigger>
+* ```
+*/
+function TooltipTrigger({ onMouseMove, slots, className, ...props }) {
+	const { x, y, followCursor } = useTooltip();
+	const handleMouseMove = (event) => {
+		onMouseMove?.(event);
+		const target = event.currentTarget.getBoundingClientRect();
+		if (followCursor === "x" || followCursor === true) {
+			const offsetXFromCenter = (event.clientX - target.left - target.width / 2) / 2;
+			x.set(offsetXFromCenter);
+		}
+		if (followCursor === "y" || followCursor === true) {
+			const offsetYFromCenter = (event.clientY - target.top - target.height / 2) / 2;
+			y.set(offsetYFromCenter);
+		}
+	};
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		className: cn(tooltipStyles.trigger, slots?.trigger, className),
+		onMouseMove: handleMouseMove,
+		...props
+	});
+}
+/**
+* Portal wrapper with AnimatePresence for coordinated enter/exit animations.
+* Internally sets `keepMounted` so motion exit animations play correctly.
+*
+* @param props - Portal props (without keepMounted)
+*
+* @example
+* ```tsx
+* <TooltipPortal>
+*   <TooltipPositioner>
+*     <TooltipPopup>...</TooltipPopup>
+*   </TooltipPositioner>
+* </TooltipPortal>
+* ```
+*/
+function TooltipPortal({ slots: _slots, ...props }) {
+	const { isOpen } = useTooltip();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Tooltip.Portal, {
+		keepMounted: true,
+		"data-slot": "tooltip-portal",
+		...props
+	}) });
+}
+/**
+* Positioning wrapper that automatically places the popup relative to the trigger.
+*
+* @param props - Positioner props forwarded to Base UI Tooltip.Positioner
+*
+* @example
+* ```tsx
+* <TooltipPositioner sideOffset={4}>
+*   <TooltipPopup>Content</TooltipPopup>
+* </TooltipPositioner>
+* ```
+*/
+function TooltipPositioner({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		"data-slot": "tooltip-positioner",
+		className: cn(tooltipStyles.positioner, slots?.positioner, className),
+		...props
+	});
+}
+/**
+* Main tooltip content container with scale entrance animation.
+* Supports spring-animated cursor-following when `followCursor` is enabled
+* on the parent Tooltip.
+*
+* @param props - Popup props including motion transition overrides
+*
+* @example
+* ```tsx
+* <TooltipPopup slots={{ popup: 'bg-primary text-primary-foreground' }}>
+*   Helpful information
+* </TooltipPopup>
+* ```
+*/
+function TooltipPopup({ transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 25
+}, style, slots, className, ...props }) {
+	const { x, y, followCursor, followCursorSpringOptions } = useTooltip();
+	const translateX = useSpring(x, followCursorSpringOptions);
+	const translateY = useSpring(y, followCursorSpringOptions);
+	return /* @__PURE__ */ jsx(Tooltip.Popup, { render: /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "tooltip-popup",
+		className: cn(tooltipStyles.popup, slots?.popup, className),
+		initial: {
+			opacity: 0,
+			scale: .5
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .5
+		},
+		transition,
+		style: {
+			x: followCursor === "x" || followCursor === true ? translateX : void 0,
+			y: followCursor === "y" || followCursor === true ? translateY : void 0,
+			...style
+		},
+		...props
+	}, "tooltip-popup") });
+}
+/**
+* Directional arrow pointing toward the trigger element.
+*
+* @param props - Arrow props forwarded to Base UI Tooltip.Arrow
+*
+* @example
+* ```tsx
+* <TooltipArrow slots={{ arrow: 'fill-primary' }} />
+* ```
+*/
+function TooltipArrow({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		"data-slot": "tooltip-arrow",
+		className: cn(tooltipStyles.arrow, slots?.arrow, className),
+		...props
+	});
+}
+
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip };

package/dist/react-ui/ui/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * UI components barrel export.
+ *
+ * All public UI components built on Base UI primitives with StyleSlots/CVA pattern.
+ *
+ * @module @mks2508/mks-ui/react/ui
+ */
+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';
+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';
+export * from './TextFlow';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC"}

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

@@ -0,0 +1,39 @@
+import { AccordionStyles, accordionVariants } from "./Accordion/Accordion.styles.js";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem } from "./Accordion/index.js";
+import { AlertDialogStyles } from "./AlertDialog/AlertDialog.styles.js";
+import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, useAlertDialog } from "./AlertDialog/index.js";
+import { checkboxStyles } from "./Checkbox/Checkbox.styles.js";
+import { Checkbox, CheckboxIndicator, useCheckbox } from "./Checkbox/index.js";
+import { dialogStyles } from "./Dialog/Dialog.styles.js";
+import { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, useDialog } from "./Dialog/index.js";
+import { Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, useMenu, useMenuActiveValue } from "./Menu/index.js";
+import { popoverStyles } from "./Popover/Popover.styles.js";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopover } from "./Popover/index.js";
+import { progressStyles } from "./Progress/Progress.styles.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./Progress/index.js";
+import { switchStyles } from "./Switch/Switch.styles.js";
+import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./Switch/index.js";
+import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./Tabs/index.js";
+import { tooltipStyles } from "./Tooltip/Tooltip.styles.js";
+import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./Tooltip/index.js";
+import { badgeVariants } from "./Badge/Badge.styles.js";
+import { Badge } from "./Badge/index.js";
+import { buttonStateStyles, buttonVariants } from "./Button/Button.styles.js";
+import { Button } from "./Button/index.js";
+import { cardVariants } from "./Card/Card.styles.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./Card/index.js";
+import { Input } from "./Input/index.js";
+import { inputGroupAddonVariants, inputGroupButtonVariants } from "./InputGroup/InputGroup.styles.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./InputGroup/index.js";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./Combobox/index.js";
+import { bracketVariants } from "./CornerBracket/CornerBracket.styles.js";
+import { CornerBracket } from "./CornerBracket/index.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./DropdownMenu/index.js";
+import { Label } from "./Label/index.js";
+import { Separator } from "./Separator/index.js";
+import { fieldVariants } from "./Field/Field.styles.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./Field/index.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./Select/index.js";
+import { dataCardStyles, dataCardVariants } from "./DataCard/DataCard.styles.js";
+import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./DataCard/index.js";
+import { TextFlow } from "./TextFlow/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,16 +13,20 @@
       "default": "./dist/index.js"
     },
     "./react": {
-      "types": "./dist/react/index.d.ts",
-      "import": "./dist/react.js",
-      "default": "./dist/react.js"
+      "types": "./dist/react-ui/index.d.ts",
+      "import": "./dist/react-ui/index.js",
+      "default": "./dist/react-ui/index.js"
     },
-    "./react/ui/*": "./src/react/ui/*/index.tsx",
-    "./react/primitives/*": "./src/react/primitives/*/index.tsx",
-    "./react/components/*": "./src/react/components/*/index.tsx",
-    "./react/hooks/*": "./src/react/hooks/*.tsx",
-    "./react/icons/*": "./src/react/icons/*.tsx",
-    "./react/lib/*": "./src/react/lib/*.ts"
+    "./react/ui/*": "./src/react-ui/ui/*/index.tsx",
+    "./react/primitives/*": "./src/react-ui/primitives/*/index.tsx",
+    "./react/components/*": "./src/react-ui/components/*/index.tsx",
+    "./react/hooks/*": "./src/react-ui/hooks/*/*.ts",
+    "./react/hooks/Animation/*": "./src/react-ui/hooks/Animation/*.tsx",
+    "./react/hooks/DOM/*": "./src/react-ui/hooks/DOM/*.tsx",
+    "./react/hooks/State/*": "./src/react-ui/hooks/State/*.tsx",
+    "./react/hooks/Formatting/*": "./src/react-ui/hooks/Formatting/*.ts",
+    "./react/icons/*": "./src/react-ui/icons/*.tsx",
+    "./react/lib/*": "./src/react-ui/lib/*.ts"
   },
   "files": [
     "dist",