@mks2508/mks-ui 0.1.3 → 0.2.0

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

@@ -0,0 +1,110 @@
+import type { TooltipContextType, ITooltipProps, ITooltipProviderProps, ITooltipTriggerProps, ITooltipPortalProps, ITooltipPositionerProps, ITooltipPopupProps, ITooltipArrowProps } from './Tooltip.types';
+declare const useTooltip: () => TooltipContextType;
+/**
+ * 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>
+ * ```
+ */
+declare function TooltipProvider({ slots: _slots, ...props }: ITooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function Tooltip({ followCursor, followCursorSpringOptions, slots, config: _config, ...props }: ITooltipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function TooltipTrigger({ onMouseMove, slots, className, ...props }: ITooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function TooltipPortal({ slots: _slots, ...props }: ITooltipPortalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function TooltipPositioner({ slots, className, ...props }: ITooltipPositionerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function TooltipPopup({ transition, style, slots, className, ...props }: ITooltipPopupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Directional arrow pointing toward the trigger element.
+ *
+ * @param props - Arrow props forwarded to Base UI Tooltip.Arrow
+ *
+ * @example
+ * ```tsx
+ * <TooltipArrow slots={{ arrow: 'fill-primary' }} />
+ * ```
+ */
+declare function TooltipArrow({ slots, className, ...props }: ITooltipArrowProps): import("react/jsx-runtime").JSX.Element;
+export { TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipPositioner, TooltipPopup, TooltipArrow, useTooltip, };
+export type { ITooltipProviderProps, ITooltipProps, ITooltipTriggerProps, ITooltipPortalProps, ITooltipPositionerProps, ITooltipPopupProps, ITooltipArrowProps, TooltipContextType, TooltipSlot, ITooltipConfig, } from './Tooltip.types';
+export { tooltipStyles } from './Tooltip.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 './Textarea';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/react/ui/index.js

@@ -0,0 +1,37 @@
+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 { Textarea } from "./Textarea/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";

package/dist/react.js

@@ -0,0 +1,88 @@
+import { cn } from "./react/lib/utils.js";
+import { Slot } from "./react/primitives/Slot/index.js";
+import { Highlight, HighlightItem, useHighlight } from "./react/primitives/Highlight/index.js";
+import { useAutoHeight } from "./react/hooks/Animation/UseAutoHeight.js";
+import { AutoHeight } from "./react/primitives/AutoHeight/index.js";
+import { useIsInView } from "./react/hooks/DOM/UseIsInView.js";
+import { CountingNumber } from "./react/primitives/CountingNumber/index.js";
+import "./react/primitives/index.js";
+import { getStrictContext } from "./react/lib/get-strict-context.js";
+import { useControlledState } from "./react/hooks/State/UseControlledState.js";
+import { AccordionStyles, accordionVariants } from "./react/ui/Accordion/Accordion.styles.js";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem } from "./react/ui/Accordion/index.js";
+import { AlertDialogStyles } from "./react/ui/AlertDialog/AlertDialog.styles.js";
+import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, useAlertDialog } from "./react/ui/AlertDialog/index.js";
+import { checkboxStyles } from "./react/ui/Checkbox/Checkbox.styles.js";
+import { Checkbox, CheckboxIndicator, useCheckbox } from "./react/ui/Checkbox/index.js";
+import { dialogStyles } from "./react/ui/Dialog/Dialog.styles.js";
+import { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, useDialog } from "./react/ui/Dialog/index.js";
+import { useDataState } from "./react/hooks/State/UseDataState.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 "./react/ui/Menu/index.js";
+import { popoverStyles } from "./react/ui/Popover/Popover.styles.js";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopover } from "./react/ui/Popover/index.js";
+import { progressStyles } from "./react/ui/Progress/Progress.styles.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./react/ui/Progress/index.js";
+import { switchStyles } from "./react/ui/Switch/Switch.styles.js";
+import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./react/ui/Switch/index.js";
+import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./react/ui/Tabs/index.js";
+import { tooltipStyles } from "./react/ui/Tooltip/Tooltip.styles.js";
+import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./react/ui/Tooltip/index.js";
+import { badgeVariants } from "./react/ui/Badge/Badge.styles.js";
+import { Badge } from "./react/ui/Badge/index.js";
+import { buttonStateStyles, buttonVariants } from "./react/ui/Button/Button.styles.js";
+import { Button } from "./react/ui/Button/index.js";
+import { cardVariants } from "./react/ui/Card/Card.styles.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./react/ui/Card/index.js";
+import { Input } from "./react/ui/Input/index.js";
+import { Textarea } from "./react/ui/Textarea/index.js";
+import { inputGroupAddonVariants, inputGroupButtonVariants } from "./react/ui/InputGroup/InputGroup.styles.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./react/ui/InputGroup/index.js";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./react/ui/Combobox/index.js";
+import { bracketVariants } from "./react/ui/CornerBracket/CornerBracket.styles.js";
+import { CornerBracket } from "./react/ui/CornerBracket/index.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./react/ui/DropdownMenu/index.js";
+import { Label } from "./react/ui/Label/index.js";
+import { Separator } from "./react/ui/Separator/index.js";
+import { fieldVariants } from "./react/ui/Field/Field.styles.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./react/ui/Field/index.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./react/ui/Select/index.js";
+import "./react/ui/index.js";
+import { MorphingPopover, MorphingPopoverWithTarget } from "./react/components/MorphingPopover/index.js";
+import "./react/components/index.js";
+import "./react/hooks/index.js";
+import { ActivityIcon } from "./react/icons/lucide-animated/activity.js";
+import { ArrowDownToLineIcon } from "./react/icons/lucide-animated/arrow-down-to-line.js";
+import { ArrowUpIcon } from "./react/icons/lucide-animated/arrow-up.js";
+import { BellIcon } from "./react/icons/lucide-animated/bell.js";
+import { BellElectricIcon } from "./react/icons/lucide-animated/bell-electric.js";
+import { BotIcon } from "./react/icons/lucide-animated/bot.js";
+import { BoxIcon } from "./react/icons/lucide-animated/box.js";
+import { Check } from "./react/icons/lucide-animated/check.js";
+import { CircleCheckIcon } from "./react/icons/lucide-animated/circle-check.js";
+import { DeleteIcon } from "./react/icons/lucide-animated/delete.js";
+import { DownloadIcon } from "./react/icons/lucide-animated/download.js";
+import { Edit2 } from "./react/icons/lucide-animated/edit-2.js";
+import { Globe } from "./react/icons/lucide-animated/globe.js";
+import { HomeIcon } from "./react/icons/lucide-animated/home.js";
+import { Layers } from "./react/icons/lucide-animated/layers.js";
+import { LayoutPanelTopIcon } from "./react/icons/lucide-animated/layout-panel-top.js";
+import { ListIcon } from "./react/icons/lucide-animated/list.js";
+import { Package } from "./react/icons/lucide-animated/package.js";
+import { Palette } from "./react/icons/lucide-animated/palette.js";
+import { PlusIcon } from "./react/icons/lucide-animated/plus.js";
+import { RefreshCw } from "./react/icons/lucide-animated/refresh-cw.js";
+import { Rocket } from "./react/icons/lucide-animated/rocket.js";
+import { Save } from "./react/icons/lucide-animated/save.js";
+import { SearchIcon } from "./react/icons/lucide-animated/search.js";
+import { SettingsIcon } from "./react/icons/lucide-animated/settings.js";
+import { TerminalIcon } from "./react/icons/lucide-animated/terminal.js";
+import { Trash2 } from "./react/icons/lucide-animated/trash-2.js";
+import { TrendingDownIcon } from "./react/icons/lucide-animated/trending-down.js";
+import { TrendingUpIcon } from "./react/icons/lucide-animated/trending-up.js";
+import { Type } from "./react/icons/lucide-animated/type.js";
+import { Upload } from "./react/icons/lucide-animated/upload.js";
+import { XIcon } from "./react/icons/lucide-animated/x.js";
+import { HugeIcons } from "./react/icons/index.js";
+import "./react/lib/index.js";
+
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MorphingPopover, MorphingPopoverWithTarget, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RefreshCw, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Slot, Switch, SwitchIcon, SwitchThumb, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, cardVariants, checkboxStyles, cn, dialogStyles, fieldVariants, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, switchStyles, tooltipStyles, useAccordionItem, useAlertDialog, useAutoHeight, useCheckbox, useComboboxAnchor, useControlledState, useDataState, useDialog, useHighlight, useIsInView, useMenu, useMenuActiveValue, usePopover, useProgress, useSwitch, useTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,16 +12,17 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./components/*": "./src/components/*.tsx",
-    "./components/ui/*": "./src/components/ui/*.tsx",
-    "./components/animate-ui/primitives/*": "./src/components/animate-ui/primitives/*.tsx",
-    "./components/animate-ui/primitives/base/*": "./src/components/animate-ui/primitives/base/*.tsx",
-    "./components/animate-ui/primitives/animate/*": "./src/components/animate-ui/primitives/animate/*.tsx",
-    "./components/animate-ui/primitives/effects/*": "./src/components/animate-ui/primitives/effects/*.tsx",
-    "./components/animate-ui/primitives/texts/*": "./src/components/animate-ui/primitives/texts/*.tsx",
-    "./icons/*": "./src/icons/*.tsx",
-    "./icons/lucide-animated/*": "./src/icons/lucide-animated/*.tsx",
-    "./lib/*": "./src/lib/*.ts"
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react.js",
+      "default": "./dist/react.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"
   },
   "files": [
     "dist",
@@ -36,7 +37,6 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-rc.0",
     "@base-ui/react": "^1.1.0",
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@hugeicons/core-free-icons": "^3.1.1",
@@ -45,7 +45,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "motion": "^12.34.0",
-    "react": "^19.2.0",
     "shadcn": "^3.8.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",

package/src/core/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Core framework-agnostic types barrel export.
+ *
+ * @module @mks2508/mks-ui/core
+ */
+
+export type { StyleSlots, SlotOverrides, IBaseConfig, MotionOverride } from './types';

package/src/core/types.ts

@@ -0,0 +1,82 @@
+/**
+ * Framework-agnostic core types for @mks2508/mks-ui.
+ *
+ * These types are shared across all framework implementations (React, Solid, etc.).
+ * React-specific types should go in src/react/.
+ *
+ * @module @mks2508/mks-ui/core/types
+ */
+
+/**
+ * Maps each slot name to its default Tailwind class string.
+ * Used to define base styling of each visual region of a component.
+ *
+ * @example
+ * ```typescript
+ * type ButtonSlot = 'root' | 'icon' | 'label';
+ *
+ * const ButtonStyles: StyleSlots<ButtonSlot> = {
+ *   root: 'inline-flex items-center justify-center',
+ *   icon: 'size-4 shrink-0',
+ *   label: 'truncate',
+ * };
+ * ```
+ */
+export type StyleSlots<S extends string> = Record<S, string>;
+
+/**
+ * Partial override for slot classes. Consumers pass this via the `slots` prop
+ * to add or replace Tailwind classes on specific visual regions.
+ *
+ * @example
+ * ```tsx
+ * <Accordion slots={{ trigger: 'text-cyan-400 font-bold', panel: 'bg-zinc-900/50' }} />
+ * ```
+ */
+export type SlotOverrides<S extends string> = Partial<Record<S, string>>;
+
+/**
+ * Base configuration interface for component behavior and animation.
+ * Components extend this with their specific config options.
+ *
+ * @example
+ * ```typescript
+ * export interface IAccordionConfig extends IBaseConfig {
+ *   collapseOnBlur?: boolean;
+ * }
+ * ```
+ */
+export interface IBaseConfig {
+	/**
+	 * Animation settings.
+	 * Components define their own defaults.
+	 */
+	animation?: {
+		/** Duration in seconds. */
+		duration?: number;
+		/** CSS easing function or motion easing name. */
+		easing?: string;
+	};
+}
+
+/**
+ * Motion props for advanced animation control.
+ * Passed directly to internal motion element.
+ * When provided, overrides config.animation completely.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   motionProps={{
+ *     initial: { opacity: 0, scale: 0.95 },
+ *     animate: { opacity: 1, scale: 1 },
+ *     transition: { type: 'spring', stiffness: 300 },
+ *   }}
+ * />
+ * ```
+ *
+ * @remarks
+ * This is defined as an opaque type alias. The actual type is imported
+ * from motion/react in React-specific files to avoid core depending on motion.
+ */
+export type MotionOverride = Record<string, unknown>;