@mks2508/mks-ui 0.5.2 → 0.5.4

package/dist/react-ui/index.js

@@ -22,6 +22,11 @@ import { useCSSGridMorph } from "./primitives/waapi/Morph/techniques/useCSSGridM
 import { useViewTransitions } from "./primitives/waapi/Morph/techniques/useViewTransitions.js";
 import { useMorph } from "./primitives/waapi/Morph/useMorph.js";
 import { Morph } from "./primitives/waapi/Morph/index.js";
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, morphPathDown, morphPathUp } from "./primitives/waapi/Gooey/gooey-utils.js";
+import { GooeyFilter } from "./primitives/waapi/Gooey/GooeyFilter.js";
+import { GooeyCanvas } from "./primitives/waapi/Gooey/GooeyCanvas.js";
+import { useMorphPath } from "./primitives/waapi/Gooey/useMorphPath.js";
+import { MorphPath } from "./primitives/waapi/Gooey/MorphPath.js";
 import "./primitives/index.js";
 import { getStrictContext } from "./lib/get-strict-context.js";
 import { useControlledState } from "./hooks/State/UseControlledState.js";
@@ -68,8 +73,8 @@ import { dataCardStyles, dataCardVariants } from "./ui/DataCard/DataCard.styles.
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./ui/DataCard/index.js";
 import { useListFormat } from "./hooks/Formatting/UseListFormat.js";
 import { TextFlow } from "./ui/TextFlow/index.js";
-import { dynamicToggleStyles } from "./ui/DynamicToggle/DynamicToggle.styles.js";
-import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption } from "./ui/DynamicToggle/index.js";
+import { dynamicToggleStyles, dynamicToggleVariants } from "./ui/DynamicToggle/DynamicToggle.styles.js";
+import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle } from "./ui/DynamicToggle/index.js";
 import "./ui/index.js";
 import { MorphingPopover, MorphingPopoverWithTarget } from "./components/MorphingPopover/index.js";
 import "./components/index.js";
@@ -110,4 +115,4 @@ import { HugeIcons } from "./icons/index.js";
 import { IconWrapper } from "./lib/icon-wrapper.js";
 import "./lib/index.js";
 
-export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, 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, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, 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, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, 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, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, dynamicToggleStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, 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, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, 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, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GOOEY_DEFAULTS, Globe, GooeyCanvas, GooeyFilter, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, 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, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, morphPathDown, morphPathUp, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };

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

@@ -19,4 +19,9 @@ import { useCSSGridMorph } from "./waapi/Morph/techniques/useCSSGridMorph.js";
 import { useViewTransitions } from "./waapi/Morph/techniques/useViewTransitions.js";
 import { useMorph } from "./waapi/Morph/useMorph.js";
 import { Morph } from "./waapi/Morph/index.js";
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, morphPathDown, morphPathUp } from "./waapi/Gooey/gooey-utils.js";
+import { GooeyFilter } from "./waapi/Gooey/GooeyFilter.js";
+import { GooeyCanvas } from "./waapi/Gooey/GooeyCanvas.js";
+import { useMorphPath } from "./waapi/Gooey/useMorphPath.js";
+import { MorphPath } from "./waapi/Gooey/MorphPath.js";
 import "./waapi/index.js";

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Gooey morphing primitive types.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+import type { ReactNode } from 'react';
+/**
+ * Props for the GooeyFilter SVG filter definition.
+ *
+ * @example
+ * ```tsx
+ * <GooeyFilter id="my-goo" blur={8} />
+ * ```
+ */
+export interface IGooeyFilterProps {
+    /** Unique filter ID — referenced via `filter: url(#id)` */
+    id: string;
+    /** Gaussian blur stdDeviation (default: 8) */
+    blur?: number;
+    /** Alpha channel multiplier in feColorMatrix (default: 20) */
+    alphaGain?: number;
+    /** Alpha channel offset in feColorMatrix (default: -10) */
+    alphaOffset?: number;
+}
+/**
+ * Props for the GooeyCanvas container.
+ *
+ * Wraps children with an SVG gooey filter. All same-colored children
+ * inside automatically merge visually into an organic blob.
+ *
+ * @example
+ * ```tsx
+ * <GooeyCanvas height={40}>
+ *   <div className="bg-card rounded-full h-10 w-64" />
+ *   <div className="bg-card absolute bottom-full w-32 h-6" />
+ * </GooeyCanvas>
+ * ```
+ */
+export interface IGooeyCanvasProps {
+    /** Blur radius override. If omitted, auto-calculated from `height`. */
+    blur?: number;
+    /** Element height — used to auto-calculate blur (default: 32) */
+    height?: number;
+    /** Drop-shadow outline blur in px (default: 0.5) */
+    outlineBlur?: number;
+    /** Drop-shadow outline color (default: 'var(--border)') */
+    outlineColor?: string;
+    /** Number of stacked drop-shadows for outline thickness (default: 2) */
+    outlineLayers?: number;
+    /** Alpha gain override */
+    alphaGain?: number;
+    /** Alpha offset override */
+    alphaOffset?: number;
+    /** Extra className on the filter container */
+    className?: string;
+    /** Content to merge with the gooey filter */
+    children: ReactNode;
+}
+/**
+ * Props for the MorphPath SVG path component.
+ *
+ * Renders a parametric `<path>` that morphs from a pill shape to a
+ * pill+body blob based on the `progress` value.
+ *
+ * @example
+ * ```tsx
+ * <svg>
+ *   <MorphPath pillWidth={260} bodyWidth={180} totalHeight={60} progress={0.5} fill="var(--card)" />
+ * </svg>
+ * ```
+ */
+export interface IMorphPathProps extends React.SVGProps<SVGPathElement> {
+    /** Pill width in px */
+    pillWidth: number;
+    /** Body (expanded area) width in px */
+    bodyWidth: number;
+    /** Total height (pill + body) in px */
+    totalHeight: number;
+    /** Morph progress: 0 = pill only, 1 = fully expanded */
+    progress: number;
+    /** Pill height (default: 34) */
+    pillHeight?: number;
+    /** Body expansion direction relative to pill */
+    direction?: 'down' | 'up';
+}
+/**
+ * Options for the useMorphPath hook.
+ */
+export interface IUseMorphPathOptions {
+    /** Pill width in px */
+    pillWidth: number;
+    /** Body width in px */
+    bodyWidth: number;
+    /** Total height in px */
+    totalHeight: number;
+    /** Morph progress 0→1 */
+    progress: number;
+    /** Pill height (default: 34) */
+    pillHeight?: number;
+    /** Body direction */
+    direction?: 'down' | 'up';
+}
+//# sourceMappingURL=Gooey.types.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts

@@ -0,0 +1,10 @@
+import type { IGooeyCanvasProps } from './Gooey.types';
+/**
+ * GooeyCanvas — container with gooey SVG filter applied.
+ */
+declare function GooeyCanvas({ blur, height, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, className, children, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GooeyCanvas {
+    var displayName: string;
+}
+export { GooeyCanvas };
+//# sourceMappingURL=GooeyCanvas.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,iBAAiB,2CA+BnB;kBAzCQ,WAAW;;;AA6CpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { buildFilterString, computeBlur } from "./gooey-utils.js";
+import { GooeyFilter } from "./GooeyFilter.js";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx
+/**
+* GooeyCanvas — container that applies gooey SVG filter to children.
+*
+* Renders a GooeyFilter + a wrapper div with `filter: url(#id)`.
+* All same-colored children inside merge organically. Optional drop-shadow
+* outline traces the merged shape's edge.
+*
+* Blur auto-scales with height: `blur = Math.round(height * 0.15)`.
+*
+* @example
+* ```tsx
+* <div style={{ position: 'relative' }}>
+*   <GooeyCanvas height={40}>
+*     <div className="absolute inset-0 bg-card rounded-full" />
+*     <div className="absolute bottom-full bg-card w-32 h-6 rounded-lg" />
+*   </GooeyCanvas>
+*   <div className="relative z-10">Content on top (not filtered)</div>
+* </div>
+* ```
+*
+* @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+*/
+/**
+* GooeyCanvas — container with gooey SVG filter applied.
+*/
+function GooeyCanvas({ blur, height = 32, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, className, children }) {
+	const filterId = React$1.useId().replace(/:/g, "") + "-goo";
+	const computedBlur = blur ?? computeBlur(height);
+	const filterStyle = React$1.useMemo(() => ({ filter: buildFilterString(filterId, outlineBlur, outlineColor, outlineLayers) }), [
+		filterId,
+		outlineBlur,
+		outlineColor,
+		outlineLayers
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GooeyFilter, {
+		id: filterId,
+		blur: computedBlur,
+		alphaGain,
+		alphaOffset
+	}), /* @__PURE__ */ jsx("div", {
+		"data-slot": "gooey-canvas",
+		style: filterStyle,
+		className: cn("absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible", className),
+		children
+	})] });
+}
+GooeyCanvas.displayName = "GooeyCanvas";
+
+//#endregion
+export { GooeyCanvas };

package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.d.ts

@@ -0,0 +1,7 @@
+import type { IGooeyFilterProps } from './Gooey.types';
+/**
+ * GooeyFilter — renders an SVG filter definition for gooey morphing.
+ */
+declare const GooeyFilter: import("react").MemoExoticComponent<({ id, blur, alphaGain, alphaOffset, }: IGooeyFilterProps) => import("react/jsx-runtime").JSX.Element>;
+export { GooeyFilter };
+//# sourceMappingURL=GooeyFilter.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyFilter.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyFilter.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUvD;;GAEG;AACH,QAAA,MAAM,WAAW,8EAKd,iBAAiB,6CAwBlB,CAAC;AAIH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.js

@@ -0,0 +1,78 @@
+'use client';
+
+import { GOOEY_DEFAULTS, buildColorMatrixValues } from "./gooey-utils.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Gooey/GooeyFilter.tsx
+/**
+* GooeyFilter — SVG filter definition for gooey morphing effects.
+*
+* Renders a hidden `<svg>` with a `<filter>` that uses `feGaussianBlur` +
+* `feColorMatrix` + `feComposite` to merge same-colored shapes organically.
+*
+* Apply via `filter: url(#id)` on a container. All same-colored children merge.
+* `feComposite operator="atop"` preserves sharp text/content on top.
+*
+* @param id - Unique filter ID
+* @param blur - Gaussian blur stdDeviation (default: 8)
+* @param alphaGain - Alpha multiplier for merge threshold (default: 20)
+* @param alphaOffset - Alpha offset for edge sharpness (default: -10)
+*
+* @example
+* ```tsx
+* <GooeyFilter id="my-goo" blur={6} />
+* <div style={{ filter: 'url(#my-goo)' }}>
+*   <div className="bg-card" />  // these merge
+*   <div className="bg-card" />  // organically
+* </div>
+* ```
+*
+* @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+*/
+const HIDDEN_SVG_STYLE = {
+	position: "absolute",
+	width: 0,
+	height: 0,
+	overflow: "hidden",
+	pointerEvents: "none"
+};
+/**
+* GooeyFilter — renders an SVG filter definition for gooey morphing.
+*/
+const GooeyFilter = memo(function GooeyFilter({ id, blur = 8, alphaGain = GOOEY_DEFAULTS.ALPHA_GAIN, alphaOffset = GOOEY_DEFAULTS.ALPHA_OFFSET }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		style: HIDDEN_SVG_STYLE,
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+			id,
+			x: "-20%",
+			y: "-20%",
+			width: "140%",
+			height: "140%",
+			colorInterpolationFilters: "sRGB",
+			children: [
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: blur,
+					result: "blur"
+				}),
+				/* @__PURE__ */ jsx("feColorMatrix", {
+					in: "blur",
+					mode: "matrix",
+					values: buildColorMatrixValues(alphaGain, alphaOffset),
+					result: "goo"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					in: "SourceGraphic",
+					in2: "goo",
+					operator: "atop"
+				})
+			]
+		}) })
+	});
+});
+GooeyFilter.displayName = "GooeyFilter";
+
+//#endregion
+export { GooeyFilter };

package/dist/react-ui/primitives/waapi/Gooey/MorphPath.d.ts

@@ -0,0 +1,7 @@
+import type { IMorphPathProps } from './Gooey.types';
+/**
+ * MorphPath — parametric SVG path for pill→blob morphing.
+ */
+declare const MorphPath: import("react").MemoExoticComponent<({ pillWidth, bodyWidth, totalHeight, progress, pillHeight, direction, ...pathProps }: IMorphPathProps) => import("react/jsx-runtime").JSX.Element>;
+export { MorphPath };
+//# sourceMappingURL=MorphPath.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/MorphPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MorphPath.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/MorphPath.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD;;GAEG;AACH,QAAA,MAAM,SAAS,6HAQZ,eAAe,6CAWhB,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/MorphPath.js

@@ -0,0 +1,51 @@
+'use client';
+
+import { GOOEY_DEFAULTS } from "./gooey-utils.js";
+import { useMorphPath } from "./useMorphPath.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Gooey/MorphPath.tsx
+/**
+* MorphPath — SVG `<path>` component with parametric pill-to-blob morphing.
+*
+* Generates a `<path d="...">` that transitions from a pill shape to an
+* expanded blob based on the `progress` value (0→1). Uses quadratic Bezier
+* curves at the junction for organic concave connections.
+*
+* @example
+* ```tsx
+* <svg width={300} height={80} style={{ position: 'absolute' }}>
+*   <MorphPath
+*     pillWidth={260}
+*     bodyWidth={180}
+*     totalHeight={80}
+*     progress={expanded ? 1 : 0}
+*     direction="up"
+*     fill="var(--card)"
+*   />
+* </svg>
+* ```
+*
+* @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+*/
+/**
+* MorphPath — parametric SVG path for pill→blob morphing.
+*/
+const MorphPath = memo(function MorphPath({ pillWidth, bodyWidth, totalHeight, progress, pillHeight = GOOEY_DEFAULTS.PILL_HEIGHT, direction = "down", ...pathProps }) {
+	return /* @__PURE__ */ jsx("path", {
+		d: useMorphPath({
+			pillWidth,
+			bodyWidth,
+			totalHeight,
+			progress,
+			pillHeight,
+			direction
+		}),
+		...pathProps
+	});
+});
+MorphPath.displayName = "MorphPath";
+
+//#endregion
+export { MorphPath };

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Gooey morphing utilities — pure functions for SVG filter and path generation.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+/** Default gooey filter parameters. */
+export declare const GOOEY_DEFAULTS: {
+    /** Blur = height * BLUR_RATIO */
+    readonly BLUR_RATIO: 0.15;
+    /** feColorMatrix alpha channel multiplier */
+    readonly ALPHA_GAIN: 20;
+    /** feColorMatrix alpha channel offset */
+    readonly ALPHA_OFFSET: -10;
+    /** Default pill height (px) */
+    readonly PILL_HEIGHT: 34;
+    /** Quadratic bezier curve factor at full expansion */
+    readonly CURVE_FACTOR: 14;
+    /** Max body corner radius (px) */
+    readonly MAX_CORNER_RADIUS: 16;
+    /** Corner radius to body-height ratio */
+    readonly CORNER_RATIO: 0.45;
+    /** Minimum body height delta to show rounded corners */
+    readonly MIN_BODY_DELTA: 8;
+};
+/**
+ * Compute the optimal Gaussian blur for a gooey filter based on element height.
+ *
+ * @param height - Element height in pixels
+ * @returns Blur stdDeviation value
+ */
+export declare function computeBlur(height: number): number;
+/**
+ * Build the feColorMatrix `values` string.
+ *
+ * @param gain - Alpha multiplier (default: 20)
+ * @param offset - Alpha offset (default: -10)
+ * @returns Matrix values string for feColorMatrix
+ */
+export declare function buildColorMatrixValues(gain?: number, offset?: number): string;
+/**
+ * Build the CSS filter string with gooey + optional drop-shadow outline.
+ *
+ * @param filterId - SVG filter ID to reference
+ * @param outlineBlur - Drop-shadow blur (px)
+ * @param outlineColor - Drop-shadow color
+ * @param outlineLayers - Number of stacked drop-shadows for thickness
+ * @returns CSS filter property value
+ */
+export declare function buildFilterString(filterId: string, outlineBlur?: number, outlineColor?: string, outlineLayers?: number): string;
+type PathFn = (pw: number, bw: number, th: number, t: number, ph: number) => string;
+/**
+ * Memoize a path generation function — caches last result to avoid
+ * recomputing identical paths on consecutive animation frames.
+ *
+ * @param fn - Path generation function
+ * @returns Memoized function
+ */
+export declare function memoizePath(fn: PathFn): PathFn;
+/**
+ * Generate an SVG path for a pill that morphs downward into a body blob.
+ * Adapted from goey-toast's morphPathRaw.
+ *
+ * @param pw - Pill width
+ * @param bw - Body width (expanded)
+ * @param th - Total height (pill + body)
+ * @param t - Transition progress 0 (pill only) → 1 (full blob)
+ * @param ph - Pill height (default: PILL_HEIGHT)
+ * @returns SVG path d-string
+ */
+export declare function morphPathDown(pw: number, bw: number, th: number, t: number, ph?: number): string;
+/**
+ * Generate an SVG path for a pill that morphs UPWARD into a body blob.
+ * Used for DynamicToggle's bubble-above-pill layout.
+ *
+ * @param pw - Pill width
+ * @param bw - Body (bubble) width
+ * @param th - Total height (bubble + pill)
+ * @param t - Transition progress 0 (pill only) → 1 (full blob with bubble)
+ * @param ph - Pill height
+ * @returns SVG path d-string
+ */
+export declare function morphPathUp(pw: number, bw: number, th: number, t: number, ph?: number): string;
+/** Memoized versions for animation performance. */
+export declare const morphPathDownMemo: PathFn;
+export declare const morphPathUpMemo: PathFn;
+export {};
+//# sourceMappingURL=gooey-utils.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gooey-utils.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/gooey-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,uCAAuC;AACvC,eAAO,MAAM,cAAc;IACzB,iCAAiC;;IAEjC,6CAA6C;;IAE7C,yCAAyC;;IAEzC,+BAA+B;;IAE/B,sDAAsD;;IAEtD,kCAAkC;;IAElC,yCAAyC;;IAEzC,wDAAwD;;CAEhD,CAAC;AAMX;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,GAAE,MAAkC,EACxC,MAAM,GAAE,MAAoC,GAC3C,MAAM,CAER;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,MAAY,EACzB,YAAY,GAAE,MAAwB,EACtC,aAAa,GAAE,MAAU,GACxB,MAAM,CAKR;AAMD,KAAK,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAW9C;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAwCR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAsDR;AAED,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,QAA2B,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.js

@@ -0,0 +1,177 @@
+//#region src/react-ui/primitives/waapi/Gooey/gooey-utils.ts
+/**
+* Gooey morphing utilities — pure functions for SVG filter and path generation.
+*
+* @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+*/
+/** Default gooey filter parameters. */
+const GOOEY_DEFAULTS = {
+	BLUR_RATIO: .15,
+	ALPHA_GAIN: 20,
+	ALPHA_OFFSET: -10,
+	PILL_HEIGHT: 34,
+	CURVE_FACTOR: 14,
+	MAX_CORNER_RADIUS: 16,
+	CORNER_RATIO: .45,
+	MIN_BODY_DELTA: 8
+};
+/**
+* Compute the optimal Gaussian blur for a gooey filter based on element height.
+*
+* @param height - Element height in pixels
+* @returns Blur stdDeviation value
+*/
+function computeBlur(height) {
+	return Math.round(height * GOOEY_DEFAULTS.BLUR_RATIO);
+}
+/**
+* Build the feColorMatrix `values` string.
+*
+* @param gain - Alpha multiplier (default: 20)
+* @param offset - Alpha offset (default: -10)
+* @returns Matrix values string for feColorMatrix
+*/
+function buildColorMatrixValues(gain = GOOEY_DEFAULTS.ALPHA_GAIN, offset = GOOEY_DEFAULTS.ALPHA_OFFSET) {
+	return `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${gain} ${offset}`;
+}
+/**
+* Build the CSS filter string with gooey + optional drop-shadow outline.
+*
+* @param filterId - SVG filter ID to reference
+* @param outlineBlur - Drop-shadow blur (px)
+* @param outlineColor - Drop-shadow color
+* @param outlineLayers - Number of stacked drop-shadows for thickness
+* @returns CSS filter property value
+*/
+function buildFilterString(filterId, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2) {
+	const goo = `url(#${filterId})`;
+	const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+	return `${goo} ${Array(outlineLayers).fill(shadow).join(" ")}`;
+}
+/**
+* Memoize a path generation function — caches last result to avoid
+* recomputing identical paths on consecutive animation frames.
+*
+* @param fn - Path generation function
+* @returns Memoized function
+*/
+function memoizePath(fn) {
+	let lastArgs = null;
+	let lastResult = "";
+	return (pw, bw, th, t, ph) => {
+		if (lastArgs && lastArgs[0] === pw && lastArgs[1] === bw && lastArgs[2] === th && lastArgs[3] === t && lastArgs[4] === ph) return lastResult;
+		lastResult = fn(pw, bw, th, t, ph);
+		lastArgs = [
+			pw,
+			bw,
+			th,
+			t,
+			ph
+		];
+		return lastResult;
+	};
+}
+/**
+* Generate an SVG path for a pill that morphs downward into a body blob.
+* Adapted from goey-toast's morphPathRaw.
+*
+* @param pw - Pill width
+* @param bw - Body width (expanded)
+* @param th - Total height (pill + body)
+* @param t - Transition progress 0 (pill only) → 1 (full blob)
+* @param ph - Pill height (default: PILL_HEIGHT)
+* @returns SVG path d-string
+*/
+function morphPathDown(pw, bw, th, t, ph = GOOEY_DEFAULTS.PILL_HEIGHT) {
+	const pr = ph / 2;
+	const pillW = Math.min(pw, bw);
+	const bodyH = ph + (th - ph) * t;
+	if (t <= 0 || bodyH - ph < GOOEY_DEFAULTS.MIN_BODY_DELTA) return [
+		`M 0,${pr}`,
+		`A ${pr},${pr} 0 0 1 ${pr},0`,
+		`H ${pillW - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW - pr},${ph}`,
+		`H ${pr}`,
+		`A ${pr},${pr} 0 0 1 0,${pr}`,
+		`Z`
+	].join(" ");
+	const curve = GOOEY_DEFAULTS.CURVE_FACTOR * t;
+	const cr = Math.min(GOOEY_DEFAULTS.MAX_CORNER_RADIUS, (bodyH - ph) * GOOEY_DEFAULTS.CORNER_RATIO);
+	const bodyW = pillW + (bw - pillW) * t;
+	const bodyTop = ph - curve;
+	const qEndX = Math.min(pillW + curve, bodyW - cr);
+	return [
+		`M 0,${pr}`,
+		`A ${pr},${pr} 0 0 1 ${pr},0`,
+		`H ${pillW - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+		`L ${pillW},${bodyTop}`,
+		`Q ${pillW},${bodyTop + curve} ${qEndX},${bodyTop + curve}`,
+		`H ${bodyW - cr}`,
+		`A ${cr},${cr} 0 0 1 ${bodyW},${bodyTop + curve + cr}`,
+		`L ${bodyW},${bodyH - cr}`,
+		`A ${cr},${cr} 0 0 1 ${bodyW - cr},${bodyH}`,
+		`H ${cr}`,
+		`A ${cr},${cr} 0 0 1 0,${bodyH - cr}`,
+		`Z`
+	].join(" ");
+}
+/**
+* Generate an SVG path for a pill that morphs UPWARD into a body blob.
+* Used for DynamicToggle's bubble-above-pill layout.
+*
+* @param pw - Pill width
+* @param bw - Body (bubble) width
+* @param th - Total height (bubble + pill)
+* @param t - Transition progress 0 (pill only) → 1 (full blob with bubble)
+* @param ph - Pill height
+* @returns SVG path d-string
+*/
+function morphPathUp(pw, bw, th, t, ph = GOOEY_DEFAULTS.PILL_HEIGHT) {
+	const pr = ph / 2;
+	const pillW = Math.min(pw, bw);
+	const bubbleH = (th - ph) * t;
+	if (t <= 0 || bubbleH < GOOEY_DEFAULTS.MIN_BODY_DELTA) {
+		const y0 = th - ph;
+		return [
+			`M 0,${y0 + pr}`,
+			`A ${pr},${pr} 0 0 1 ${pr},${y0}`,
+			`H ${pillW - pr}`,
+			`A ${pr},${pr} 0 0 1 ${pillW},${y0 + pr}`,
+			`A ${pr},${pr} 0 0 1 ${pillW - pr},${y0 + ph}`,
+			`H ${pr}`,
+			`A ${pr},${pr} 0 0 1 0,${y0 + pr}`,
+			`Z`
+		].join(" ");
+	}
+	const curve = GOOEY_DEFAULTS.CURVE_FACTOR * t;
+	const cr = Math.min(GOOEY_DEFAULTS.MAX_CORNER_RADIUS, bubbleH * GOOEY_DEFAULTS.CORNER_RATIO);
+	const bubbleW = pillW + (bw - pillW) * t;
+	const pillTop = th - ph;
+	const bubbleBottom = pillTop + curve;
+	const bubbleTop = pillTop - bubbleH + curve;
+	const qEndX = Math.min(pillW + curve, bubbleW - cr);
+	return [
+		`M 0,${pillTop + pr}`,
+		`A ${pr},${pr} 0 0 1 0,${pillTop + ph - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pr},${pillTop + ph}`,
+		`H ${pillW - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW},${pillTop + ph - pr}`,
+		`L ${pillW},${bubbleBottom}`,
+		`Q ${pillW},${bubbleBottom - curve} ${qEndX},${bubbleBottom - curve}`,
+		`H ${bubbleW - cr}`,
+		`A ${cr},${cr} 0 0 0 ${bubbleW},${bubbleBottom - curve - cr}`,
+		`L ${bubbleW},${bubbleTop + cr}`,
+		`A ${cr},${cr} 0 0 0 ${bubbleW - cr},${bubbleTop}`,
+		`H ${cr}`,
+		`A ${cr},${cr} 0 0 0 0,${bubbleTop + cr}`,
+		`Z`
+	].join(" ");
+}
+/** Memoized versions for animation performance. */
+const morphPathDownMemo = memoizePath(morphPathDown);
+const morphPathUpMemo = memoizePath(morphPathUp);
+
+//#endregion
+export { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp };