@mks2508/mks-ui 0.2.0 → 0.3.1

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

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

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

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

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

@@ -1,88 +0,0 @@
-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/src/react/components/MorphingPopover/index.tsx

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

package/src/react/hooks/index.ts

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