@mks2508/mks-ui 0.1.4 → 0.2.0

package/README.md

@@ -10,12 +10,39 @@ bun add @mks2508/mks-ui
 
 Peer dependencies: `react >= 19.2.0`, `react-dom >= 19.2.0`
 
+## Architecture
+
+v0.2.0 uses a **framework-agnostic core + React namespace** architecture:
+
+```
+src/
+├── core/           # Framework-agnostic types (StyleSlots, IBaseConfig)
+├── react/          # All React code
+│   ├── ui/         # 23 UI components (3-file structure)
+│   ├── primitives/ # Slot, Highlight, AutoHeight, CountingNumber
+│   ├── components/ # MorphingPopover (CSS modules)
+│   ├── hooks/      # 4 hooks (Animation/, State/, DOM/)
+│   ├── icons/      # 33 lucide-animated icons + HugeIcons
+│   └── lib/        # cn(), getStrictContext()
+├── index.ts        # Core entry point
+└── index.css       # Global styles
+```
+
+Each UI component follows a 3-file structure:
+- `index.tsx` — Component implementation + exports
+- `{Name}.types.ts` — TypeScript interfaces (IPrefix convention)
+- `{Name}.styles.ts` — StyleSlots + CVA variants
+
 ## Usage
 
 ```tsx
-import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui';
-import { useAutoHeight } from '@mks2508/mks-ui';
-import { cn } from '@mks2508/mks-ui';
+// React components, hooks, icons, utilities
+import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui/react';
+import { useAutoHeight, useControlledState } from '@mks2508/mks-ui/react';
+import { cn } from '@mks2508/mks-ui/react';
+
+// Core types (framework-agnostic)
+import type { StyleSlots, SlotOverrides, IBaseConfig } from '@mks2508/mks-ui';
 ```
 
 ## Components
@@ -35,7 +62,7 @@ import { cn } from '@mks2508/mks-ui';
 | `Tabs` | Animated tabs with highlight |
 | `Tooltip` | Animated tooltip with arrow |
 
-### Animate UI utilities
+### Primitives
 
 | Component | Description |
 |-----------|-------------|
@@ -70,11 +97,11 @@ import { cn } from '@mks2508/mks-ui';
 
 ## Icons
 
-32 animated Lucide icons + HugeIcons namespace.
+33 animated Lucide icons + HugeIcons namespace.
 
 ```tsx
-import { Check, Search, Terminal } from '@mks2508/mks-ui';
-import { HugeIcons } from '@mks2508/mks-ui';
+import { Check, Search, Terminal } from '@mks2508/mks-ui/react';
+import { HugeIcons } from '@mks2508/mks-ui/react';
 ```
 
 ## Hooks
@@ -89,16 +116,16 @@ import { HugeIcons } from '@mks2508/mks-ui';
 ## Sub-path imports
 
 ```tsx
-import { Button } from '@mks2508/mks-ui/components/ui/button';
-import { Check } from '@mks2508/mks-ui/icons/lucide-animated/check';
-import { cn } from '@mks2508/mks-ui/lib/utils';
+import { Button } from '@mks2508/mks-ui/react/ui/Button';
+import { Check } from '@mks2508/mks-ui/react/icons/lucide-animated/check';
+import { cn } from '@mks2508/mks-ui/react/lib/utils';
 ```
 
 ## Development
 
 ```bash
 bun run dev        # Vite dev server
-bun run build      # Production build
+bun run build      # Production build (Rolldown + tsc + tsc-alias)
 bun run typecheck  # Type check
 bun run lint       # ESLint
 bun run format     # Prettier

package/dist/core/index.d.ts

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

package/dist/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/core/types.d.ts

@@ -0,0 +1,79 @@
+/**
+ * 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>;
+//# sourceMappingURL=types.d.ts.map

package/dist/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,WAAW;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE;QACX,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,iDAAiD;QACjD,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,16 +1,28 @@
 /**
  * @mks2508/mks-ui
  *
- * UI component library - Shadcn/Animate UI based with custom components.
+ * UI component library - Framework-agnostic core types and React components.
+ *
+ * ## Entry Points
+ *
+ * ### Main Entry (Core Types)
+ * ```typescript
+ * import type { StyleSlots, SlotOverrides, IBaseConfig } from '@mks2508/mks-ui';
+ * ```
+ *
+ * ### React Entry (Components, Hooks, Icons, Utils)
+ * ```typescript
+ * import { Button, Card, CornerBracket } from '@mks2508/mks-ui/react';
+ * import { useAutoHeight } from '@mks2508/mks-ui/react';
+ * import { Check, Search } from '@mks2508/mks-ui/react';
+ * import { cn } from '@mks2508/mks-ui/react';
+ * ```
  *
  * @example
  * ```tsx
- * import { Button, Card, CornerBracket } from '@mks2508/mks-ui';
- * import { useAutoHeight } from '@mks2508/mks-ui';
+ * import type { StyleSlots } from '@mks2508/mks-ui';
+ * import { Button, Card, CornerBracket } from '@mks2508/mks-ui/react';
  * ```
  */
-export * from './lib/utils';
-export * from './components/ui';
-export * from './icons';
-export * from './hooks';
+export * from './core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,cAAc,QAAQ,CAAC"}

package/dist/index.js

@@ -1,72 +0,0 @@
-import { cn } from "./lib/utils.js";
-import { useControlledState } from "./hooks/use-controlled-state.js";
-import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem } from "./components/animate-ui/primitives/base/accordion.js";
-import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, useAlertDialog } from "./components/animate-ui/primitives/base/alert-dialog.js";
-import { Checkbox, CheckboxIndicator, useCheckbox } from "./components/animate-ui/primitives/base/checkbox.js";
-import { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, useDialog } from "./components/animate-ui/primitives/base/dialog.js";
-import { Highlight, HighlightItem, useHighlight } from "./components/animate-ui/primitives/effects/highlight.js";
-import { useDataState } from "./hooks/use-data-state.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 "./components/animate-ui/primitives/base/menu.js";
-import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopover } from "./components/animate-ui/primitives/base/popover.js";
-import { useIsInView } from "./hooks/use-is-in-view.js";
-import { CountingNumber } from "./components/animate-ui/primitives/texts/counting-number.js";
-import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./components/animate-ui/primitives/base/progress.js";
-import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./components/animate-ui/primitives/base/switch.js";
-import { useAutoHeight } from "./hooks/use-auto-height.js";
-import { Slot } from "./components/animate-ui/primitives/animate/slot.js";
-import { AutoHeight } from "./components/animate-ui/primitives/effects/auto-height.js";
-import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./components/animate-ui/primitives/base/tabs.js";
-import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./components/animate-ui/primitives/base/tooltip.js";
-import { badgeVariants } from "./components/ui/badge/badge.styles.js";
-import { Badge } from "./components/ui/badge/badge.js";
-import { buttonStateStyles, buttonVariants } from "./components/ui/button/button.styles.js";
-import { Button } from "./components/ui/button/button.js";
-import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/ui/card.js";
-import { Input } from "./components/ui/input.js";
-import { Textarea } from "./components/ui/textarea.js";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/ui/input-group.js";
-import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./components/ui/combobox.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/ui/dropdown-menu.js";
-import { Label } from "./components/ui/label.js";
-import { Separator } from "./components/ui/separator.js";
-import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/ui/field.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
-import { CornerBracket } from "./components/ui/corner-bracket.js";
-import { MorphingPopover, MorphingPopoverWithTarget } from "./components/ui/morphing-popover/morphing-popover.js";
-import "./components/ui/index.js";
-import { ActivityIcon } from "./icons/lucide-animated/activity.js";
-import { ArrowDownToLineIcon } from "./icons/lucide-animated/arrow-down-to-line.js";
-import { ArrowUpIcon } from "./icons/lucide-animated/arrow-up.js";
-import { BellIcon } from "./icons/lucide-animated/bell.js";
-import { BellElectricIcon } from "./icons/lucide-animated/bell-electric.js";
-import { BotIcon } from "./icons/lucide-animated/bot.js";
-import { BoxIcon } from "./icons/lucide-animated/box.js";
-import { Check } from "./icons/lucide-animated/check.js";
-import { CircleCheckIcon } from "./icons/lucide-animated/circle-check.js";
-import { DeleteIcon } from "./icons/lucide-animated/delete.js";
-import { DownloadIcon } from "./icons/lucide-animated/download.js";
-import { Edit2 } from "./icons/lucide-animated/edit-2.js";
-import { Globe } from "./icons/lucide-animated/globe.js";
-import { HomeIcon } from "./icons/lucide-animated/home.js";
-import { Layers } from "./icons/lucide-animated/layers.js";
-import { LayoutPanelTopIcon } from "./icons/lucide-animated/layout-panel-top.js";
-import { ListIcon } from "./icons/lucide-animated/list.js";
-import { Package } from "./icons/lucide-animated/package.js";
-import { Palette } from "./icons/lucide-animated/palette.js";
-import { PlusIcon } from "./icons/lucide-animated/plus.js";
-import { RefreshCw } from "./icons/lucide-animated/refresh-cw.js";
-import { Rocket } from "./icons/lucide-animated/rocket.js";
-import { Save } from "./icons/lucide-animated/save.js";
-import { SearchIcon } from "./icons/lucide-animated/search.js";
-import { SettingsIcon } from "./icons/lucide-animated/settings.js";
-import { TerminalIcon } from "./icons/lucide-animated/terminal.js";
-import { Trash2 } from "./icons/lucide-animated/trash-2.js";
-import { TrendingDownIcon } from "./icons/lucide-animated/trending-down.js";
-import { TrendingUpIcon } from "./icons/lucide-animated/trending-up.js";
-import { Type } from "./icons/lucide-animated/type.js";
-import { Upload } from "./icons/lucide-animated/upload.js";
-import { XIcon } from "./icons/lucide-animated/x.js";
-import { HugeIcons } from "./icons/index.js";
-import "./hooks/index.js";
-
-export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, 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, badgeVariants, buttonStateStyles, buttonVariants, cardVariants, cn, useAccordionItem, useAlertDialog, useAutoHeight, useCheckbox, useComboboxAnchor, useControlledState, useDataState, useDialog, useHighlight, useIsInView, useMenu, useMenuActiveValue, usePopover, useProgress, useSwitch, useTooltip };

package/dist/react/components/MorphingPopover/MorphingPopover.types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Props for the MorphingPopover component.
+ *
+ * @interface IMorphingPopoverProps
+ */
+interface IMorphingPopoverProps {
+    /** Content to display in popover. */
+    content: React.ReactNode;
+    /** Trigger button text or icon. */
+    trigger?: React.ReactNode;
+    /** Additional CSS classes for trigger button. */
+    triggerClassName?: string;
+    /** Additional CSS classes for popover. */
+    popoverClassName?: string;
+    /** Target dimensions for the expanded popover. */
+    targetSize?: {
+        width?: number;
+        height?: number;
+    };
+    /** Callback when popover opens. */
+    onOpen?: () => void;
+    /** Callback when popover closes. */
+    onClose?: () => void;
+    /** Popover HTML ID. */
+    popoverId?: string;
+}
+/** Extended button props to support the Popover API attributes. */
+interface IMorphingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    popovertarget?: string;
+    popoverTargetAction?: 'toggle' | 'show' | 'hide';
+}
+/**
+ * Props for the MorphingPopoverWithTarget variant.
+ *
+ * @interface IMorphingPopoverWithTargetProps
+ */
+interface IMorphingPopoverWithTargetProps extends Omit<IMorphingPopoverProps, 'popoverId' | 'targetSize'> {
+    /** Reference to target element to anchor to. */
+    targetRef: React.RefObject<HTMLElement>;
+    /** Popover HTML ID. */
+    popoverId?: string;
+}
+export type { IMorphingPopoverProps, IMorphingButtonProps, IMorphingPopoverWithTargetProps, };
+//# sourceMappingURL=MorphingPopover.types.d.ts.map

package/dist/react/components/MorphingPopover/MorphingPopover.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MorphingPopover.types.d.ts","sourceRoot":"","sources":["../../../../src/react/components/MorphingPopover/MorphingPopover.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,UAAU,qBAAqB;IAC7B,qCAAqC;IACrC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kDAAkD;IAClD,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,mEAAmE;AACnE,UAAU,oBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;CAClD;AAED;;;;GAIG;AACH,UAAU,+BACR,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,YAAY,CAAC;IAC/D,gDAAgD;IAChD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,+BAA+B,GAChC,CAAC"}

package/dist/react/components/MorphingPopover/index.d.ts

@@ -0,0 +1,46 @@
+import type { IMorphingPopoverProps, 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 }}
+ * />
+ * ```
+ */
+declare const MorphingPopover: import("../../../react").ForwardRefExoticComponent<IMorphingPopoverProps & import("../../../react").RefAttributes<HTMLButtonElement>>;
+/**
+ * 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>}
+ * />
+ * ```
+ */
+declare const MorphingPopoverWithTarget: import("../../../react").ForwardRefExoticComponent<IMorphingPopoverWithTargetProps & import("../../../react").RefAttributes<HTMLButtonElement>>;
+export { MorphingPopover, MorphingPopoverWithTarget };
+export type { IMorphingPopoverProps, IMorphingPopoverWithTargetProps, } from './MorphingPopover.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/MorphingPopover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/components/MorphingPopover/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,qBAAqB,EAErB,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,eAAe,qHAuDpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,yBAAyB,+HAiD9B,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,+BAA+B,GAChC,MAAM,yBAAyB,CAAC"}

package/dist/react/components/MorphingPopover/index.js

@@ -0,0 +1,119 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import morphing_popover_module_default from "./morphing-popover.module.js";
+import { forwardRef } from "../../../react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/components/MorphingPopover/index.tsx
+/**
+* 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 }}
+* />
+* ```
+*/
+/**
+* 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(({ content, trigger = "⋯", triggerClassName, popoverClassName, targetSize = {
+	width: 220,
+	height: 120
+}, onOpen, onClose, popoverId = "morphing-popover" }, ref) => {
+	const containerStyle = {
+		"--target-width": `${targetSize.width}px`,
+		"--target-height": `${targetSize.height}px`
+	};
+	const handleToggle = (e) => {
+		if (e.target.matches(":popover-open")) onOpen?.();
+		else onClose?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: morphing_popover_module_default.morphingPopoverContainer,
+		style: containerStyle,
+		children: [/* @__PURE__ */ jsx("button", {
+			ref,
+			popovertarget: popoverId,
+			popoverTargetAction: "toggle",
+			className: cn(morphing_popover_module_default.morphingTrigger, triggerClassName),
+			onClick: handleToggle,
+			children: trigger
+		}), /* @__PURE__ */ jsx("div", {
+			id: popoverId,
+			popover: "auto",
+			className: cn(morphing_popover_module_default.morphingPopover, popoverClassName),
+			children: content
+		})]
+	});
+});
+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(({ content, trigger = "⋯", triggerClassName, popoverClassName, onOpen, onClose, popoverId = "morphing-popover-target" }, ref) => {
+	const handleToggle = (e) => {
+		if (e.target.matches(":popover-open")) onOpen?.();
+		else onClose?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: morphing_popover_module_default.morphingPopoverTargetContainer,
+		children: [/* @__PURE__ */ jsx("button", {
+			ref,
+			popovertarget: popoverId,
+			popoverTargetAction: "toggle",
+			className: cn(morphing_popover_module_default.morphingTrigger, triggerClassName),
+			onClick: handleToggle,
+			children: trigger
+		}), /* @__PURE__ */ jsx("div", {
+			id: popoverId,
+			popover: "auto",
+			className: cn(morphing_popover_module_default.morphingPopoverTarget, popoverClassName),
+			children: content
+		})]
+	});
+});
+MorphingPopoverWithTarget.displayName = "MorphingPopoverWithTarget";
+
+//#endregion
+export { MorphingPopover, MorphingPopoverWithTarget };

package/dist/react/components/MorphingPopover/morphing-popover.module.js

@@ -0,0 +1,5 @@
+//#region src/react/components/MorphingPopover/morphing-popover.module.css
+var morphing_popover_module_default = {};
+
+//#endregion
+export { morphing_popover_module_default as default };

package/dist/react/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Complex components barrel export.
+ *
+ * Components that use CSS modules or have complex internal structure.
+ *
+ * @module @mks2508/mks-ui/react/components
+ */
+export * from './MorphingPopover';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,mBAAmB,CAAC"}

package/dist/react/components/index.js

@@ -0,0 +1 @@
+import { MorphingPopover, MorphingPopoverWithTarget } from "./MorphingPopover/index.js";

package/dist/react/hooks/Animation/UseAutoHeight.d.ts

@@ -0,0 +1,30 @@
+import * as React from '../../../react';
+/**
+ * Options for the useAutoHeight hook.
+ */
+interface IAutoHeightOptions {
+    /** Include parent element box model (padding, border) in measurement. */
+    includeParentBox?: boolean;
+    /** Include self element box model in measurement. */
+    includeSelfBox?: boolean;
+}
+/**
+ * Hook that measures and tracks the height of an element with ResizeObserver.
+ * Returns a ref to attach and the current height value.
+ *
+ * @param deps - Dependency list to trigger re-measurement
+ * @param options - Configuration for box model inclusion
+ * @returns Object with ref and height
+ *
+ * @example
+ * ```tsx
+ * const { ref, height } = useAutoHeight<HTMLDivElement>([content]);
+ * <div style={{ height }}><div ref={ref}>{content}</div></div>
+ * ```
+ */
+export declare function useAutoHeight<T extends HTMLElement = HTMLDivElement>(deps?: React.DependencyList, options?: IAutoHeightOptions): {
+    readonly ref: React.RefObject<T | null>;
+    readonly height: number;
+};
+export type { IAutoHeightOptions };
+//# sourceMappingURL=UseAutoHeight.d.ts.map

package/dist/react/hooks/Animation/UseAutoHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseAutoHeight.d.ts","sourceRoot":"","sources":["../../../../src/react/hooks/Animation/UseAutoHeight.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,UAAU,kBAAkB;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAClE,IAAI,GAAE,KAAK,CAAC,cAAmB,EAC/B,OAAO,GAAE,kBAGR;;;EAuFF;AAED,YAAY,EAAE,kBAAkB,EAAE,CAAC"}