@mks2508/mks-ui 0.1.3 → 0.2.0

package/README.md

@@ -1,73 +1,136 @@
-# React + TypeScript + Vite
+# @mks2508/mks-ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+UI component library built on Shadcn UI + Animate UI primitives with custom components, animated icons, and React hooks.
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+bun add @mks2508/mks-ui
+```
+
+Peer dependencies: `react >= 19.2.0`, `react-dom >= 19.2.0`
 
-## React Compiler
+## Architecture
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+v0.2.0 uses a **framework-agnostic core + React namespace** architecture:
 
-## Expanding the ESLint configuration
+```
+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
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+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
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## Usage
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+```tsx
+// 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';
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+// Core types (framework-agnostic)
+import type { StyleSlots, SlotOverrides, IBaseConfig } from '@mks2508/mks-ui';
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Components
+
+### Animate UI (animated)
+
+| Component | Description |
+|-----------|-------------|
+| `Accordion` | Animated expand/collapse panels |
+| `AlertDialog` | Animated alert dialog with backdrop |
+| `Checkbox` | Animated checkbox with indicator |
+| `Dialog` | Modal dialog with motion transitions |
+| `Menu` | Context/trigger menu with highlight |
+| `Popover` | Animated popover with arrow |
+| `Progress` | Animated progress bar |
+| `Switch` | Animated toggle switch |
+| `Tabs` | Animated tabs with highlight |
+| `Tooltip` | Animated tooltip with arrow |
+
+### Primitives
+
+| Component | Description |
+|-----------|-------------|
+| `AutoHeight` | Smooth height auto-resize animation |
+| `CountingNumber` | Animated number interpolation |
+| `Highlight` | Animated highlight effect |
+| `Slot` | Motion-enhanced asChild composition |
+
+### Shadcn base
+
+| Component | Description |
+|-----------|-------------|
+| `Badge` | Status/label badges |
+| `Button` | Button with variants and sizes |
+| `Card` | Container card |
+| `Combobox` | Searchable select |
+| `DropdownMenu` | Dropdown menu (Shadcn API) |
+| `Field` | Form field wrapper |
+| `Input` | Text input |
+| `InputGroup` | Grouped input with addons |
+| `Label` | Form label |
+| `Select` | Select dropdown |
+| `Separator` | Visual divider |
+| `Textarea` | Multi-line text input |
+
+### Custom
+
+| Component | Description |
+|-----------|-------------|
+| `CornerBracket` | Corner bracket decoration (tl/tr/bl/br) |
+| `MorphingPopover` | Morphing transition popover |
+
+## Icons
+
+33 animated Lucide icons + HugeIcons namespace.
+
+```tsx
+import { Check, Search, Terminal } from '@mks2508/mks-ui/react';
+import { HugeIcons } from '@mks2508/mks-ui/react';
+```
+
+## Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useAutoHeight` | Auto-resizing height |
+| `useControlledState` | Controlled/uncontrolled state |
+| `useDataState` | Data loading state |
+| `useIsInView` | Intersection Observer |
+
+## Sub-path imports
+
+```tsx
+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 (Rolldown + tsc + tsc-alias)
+bun run typecheck  # Type check
+bun run lint       # ESLint
+bun run format     # Prettier
 ```
+
+## License
+
+MIT

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,15 +1,28 @@
 /**
  * @mks2508/mks-ui
  *
- * UI component library - Shadcn/Animate UI based with DevEnv 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 } from '@mks2508/mks-ui';
- * import { DevEnvBracket } from '@mks2508/mks-ui/components/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 './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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,cAAc,QAAQ,CAAC"}

package/dist/index.js

@@ -1,56 +0,0 @@
-import { cn } from "./lib/utils.js";
-import { buttonStateStyles, buttonVariants } from "./components/ui/button/button.styles.js";
-import { Button } from "./components/ui/button/button.js";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/ui/alert-dialog.js";
-import { badgeVariants } from "./components/ui/badge/badge.styles.js";
-import { Badge } from "./components/ui/badge/badge.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 { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./components/animate-ui/primitives/base/switch.js";
-import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./components/animate-ui/primitives/base/tabs.js";
-import { DevEnvBracket } from "./components/ui/devenv-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";
-
-export { ActivityIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, DeleteIcon, DevEnvBracket, 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, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, MorphingPopover, MorphingPopoverWithTarget, Package, Palette, PlusIcon, RefreshCw, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Switch, SwitchIcon, SwitchThumb, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, Textarea, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, badgeVariants, buttonStateStyles, buttonVariants, cardVariants, cn, useComboboxAnchor, useSwitch };

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/{components/ui/morphing-popover/morphing-popover.js → react/components/MorphingPopover/index.js}

@@ -1,20 +1,38 @@
-"use client";
+'use client';
 
-import { cn } from "../../../lib/utils.js";
+import { cn } from "../../lib/utils.js";
 import morphing_popover_module_default from "./morphing-popover.module.js";
-import { forwardRef } from "react";
+import { forwardRef } from "../../../react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/ui/morphing-popover/morphing-popover.tsx
+//#region src/react/components/MorphingPopover/index.tsx
 /**
-* MorphingPopover - A popover that animates from a trigger button to a target position
+* 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="⋯"
+*   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 }}
 * />
@@ -51,7 +69,29 @@ const MorphingPopover = forwardRef(({ content, trigger = "⋯", triggerClassName
 	});
 });
 MorphingPopover.displayName = "MorphingPopover";
-const MorphingPopoverWithTarget = forwardRef(({ content, trigger = "⋯", triggerClassName, popoverClassName, targetRef, onOpen, onClose, popoverId = "morphing-popover-target" }, ref) => {
+/**
+* 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?.();

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"}