@mks2508/mks-ui 0.5.4 → 0.5.8

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts

@@ -1,5 +1,5 @@
 /**
- * DynamicToggle type definitions.
+ * DynamicToggle type definitions (v2 API).
  *
  * CSS-animated toggle where one option expands into sub-options.
  * Uses hidden radios + `:has(:checked)` for zero-JS animation.
@@ -11,14 +11,22 @@ import type { SlotOverrides, IBaseConfig } from '../../../core/types';
 import type { DynamicToggleSlot, DynamicToggleVariantProps } from './DynamicToggle.styles';
 /** How the group appears when collapsed (standalone option active). */
 export type DynamicToggleCollapsedMode = 'title' | 'opts' | 'title-opts';
-/** Morph technique for the pill↔groupLabel junction. */
-export type DynamicToggleMorphMode = 'none' | 'filter' | 'path';
 /**
- * Configuration for DynamicToggle animation behavior.
+ * Bubble position relative to the pill.
+ * - `top`    — bubble grows above the pill (default)
+ * - `bottom` — bubble grows below the pill
+ * - `none`   — no bubble, no gooey canvas, label-only pill with indicator
+ */
+export type DynamicToggleBubblePosition = 'top' | 'bottom' | 'none';
+/**
+ * Animation and behavior configuration for DynamicToggle.
+ *
+ * Controls timing, easing, and indicator behavior.
+ * The `morph` rendering mode is a root-level variant prop, NOT in config.
  *
  * @example
  * ```tsx
- * <DynamicToggle config={{ morphMode: 'filter', duration: 0.3 }}>
+ * <DynamicToggle config={{ duration: 0.3, indicatorDuration: 0.25 }}>
  *   ...
  * </DynamicToggle>
  * ```
@@ -26,11 +34,21 @@ export type DynamicToggleMorphMode = 'none' | 'filter' | 'path';
 export interface IDynamicToggleConfig extends IBaseConfig {
     /** CSS transition duration in seconds (default: 0.22) */
     duration?: number;
-    /** Label animation style (default: 'morph') */
-    labelAnimation?: 'morph' | 'float' | 'none';
-    /** Gooey morph mode for the pill↔groupLabel junction (default: 'none') */
-    morphMode?: DynamicToggleMorphMode;
+    /** Indicator slide duration in seconds (default: 0.3) */
+    indicatorDuration?: number;
+    /** Indicator slide easing (default: material standard cubic-bezier) */
+    indicatorEasing?: string;
+    /** Force translate-based indicator instead of CSS Anchor (debug/compat) */
+    forceTranslateIndicator?: boolean;
 }
+/** Structured payload for group registration via context. */
+export type DynamicToggleGroupRegistration = {
+    label: string;
+    values: string[];
+    bubblePosition: DynamicToggleBubblePosition;
+    collapsedMode: DynamicToggleCollapsedMode;
+    bubble?: React.ReactNode;
+};
 /**
  * Context shared between DynamicToggle root and its children.
  */
@@ -45,8 +63,10 @@ export type DynamicToggleContextType = {
     groupActive: boolean;
     /** Whether the toggle is disabled */
     disabled: boolean;
+    /** Effective morph mode after variant resolution */
+    morph: 'none' | 'filter' | 'path';
     /** Register group info (called by DynamicToggleGroup on mount) */
-    registerGroup: (label: string, values: string[], position: 'top' | 'bottom' | 'hidden', collapsedMode: DynamicToggleCollapsedMode) => void;
+    registerGroup: (info: DynamicToggleGroupRegistration) => void;
 };
 /**
  * Props for the DynamicToggle root container.
@@ -58,17 +78,17 @@ export type DynamicToggleContextType = {
  * ```tsx
  * <DynamicToggle
  *   value="tree" onValueChange={setVal}
- *   size="sm" config={{ morphMode: 'filter' }}
+ *   size="sm" morph="filter"
  * >
- *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
- *   <DynamicToggleGroup label="Changes" collapsedMode="title">
- *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
- *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
- *   </DynamicToggleGroup>
+ *   <DynamicToggle.Option value="tree">Tree</DynamicToggle.Option>
+ *   <DynamicToggle.Group label="Changes" bubblePosition="top" collapsedMode="title">
+ *     <DynamicToggle.Option value="flat">Flat</DynamicToggle.Option>
+ *     <DynamicToggle.Option value="grouped">Grouped</DynamicToggle.Option>
+ *   </DynamicToggle.Group>
  * </DynamicToggle>
  * ```
  */
-export interface IDynamicToggleProps extends DynamicToggleVariantProps {
+export interface IDynamicToggleProps extends DynamicToggleVariantProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children'> {
     /** Controlled value */
     value?: string;
     /** Uncontrolled default value */
@@ -81,10 +101,6 @@ export interface IDynamicToggleProps extends DynamicToggleVariantProps {
     slots?: SlotOverrides<DynamicToggleSlot>;
     /** Animation/behavior configuration */
     config?: IDynamicToggleConfig;
-    /** Accessible label for the radio group */
-    'aria-label'?: string;
-    /** Additional class for the root */
-    className?: string;
     /** DynamicToggleOption and DynamicToggleGroup children */
     children: React.ReactNode;
 }
@@ -107,30 +123,44 @@ export interface IDynamicToggleOptionProps {
 /**
  * Props for an expandable group of options.
  *
+ * `bubblePosition` is the single prop that controls whether a bubble
+ * label appears and where it is positioned.
+ *
  * When none of the group's options are active, shows collapsed content
  * based on `collapsedMode`:
  * - `'title'` — only the group label
  * - `'opts'` — only the combined sub-option text ("Solo · Team")
  * - `'title-opts'` — WIP: currently falls back to 'title' behavior
  *
- * When one is active, expands with a clip-path reveal animation.
- *
  * @example
  * ```tsx
- * <DynamicToggleGroup label="Premium" collapsedMode="title">
- *   <DynamicToggleOption value="solo">Solo</DynamicToggleOption>
- *   <DynamicToggleOption value="team">Team</DynamicToggleOption>
- * </DynamicToggleGroup>
+ * // With bubble above
+ * <DynamicToggle.Group label="Premium" bubblePosition="top">
+ *   <DynamicToggle.Option value="solo">Solo</DynamicToggle.Option>
+ *   <DynamicToggle.Option value="team">Team</DynamicToggle.Option>
+ * </DynamicToggle.Group>
+ *
+ * // No bubble — simple pill toggle
+ * <DynamicToggle.Group label="Mode" bubblePosition="none" collapsedMode="title">
+ *   <DynamicToggle.Option value="a">A</DynamicToggle.Option>
+ *   <DynamicToggle.Option value="b">B</DynamicToggle.Option>
+ * </DynamicToggle.Group>
  * ```
  */
 export interface IDynamicToggleGroupProps {
-    /** Label shown as group title / group label text */
+    /** Label shown as group title / collapsed text */
     label: string;
-    /** Group label position relative to the pill (default: 'top') */
-    labelPosition?: 'top' | 'bottom' | 'hidden';
+    /** Custom content for the bubble label (overrides label text when provided) */
+    bubble?: React.ReactNode;
+    /**
+     * Bubble position relative to the pill.
+     * `'none'` = no bubble, no gooey — label-only pill with indicator.
+     * @default 'top'
+     */
+    bubblePosition?: DynamicToggleBubblePosition;
     /** How the group appears when collapsed (default: 'title') */
     collapsedMode?: DynamicToggleCollapsedMode;
-    /** Exactly 2 DynamicToggleOption children */
+    /** Sub-option children */
     children: React.ReactNode;
     /** Additional class */
     className?: string;

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAM3F,uEAAuE;AACvE,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;AAEzE,wDAAwD;AACxD,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAMhE;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5C,0EAA0E;IAC1E,SAAS,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAMD;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,aAAa,EAAE,CACb,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EAAE,EAChB,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,EACrC,aAAa,EAAE,0BAA0B,KACtC,IAAI,CAAC;CACX,CAAC;AAMF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB;IACpE,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,uCAAuC;IACvC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,wBAAwB;IACvC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,8DAA8D;IAC9D,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"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"}

package/dist/react-ui/ui/DynamicToggle/index.d.ts

@@ -5,7 +5,7 @@ declare const useDynamicToggle: () => DynamicToggleContextType;
 /**
  * Root container — pill-shaped toggle with expanding sub-options and group label.
  */
-declare function DynamicToggle({ variant, size, shape, slots, config, disabled, className, children, 'aria-label': ariaLabel, ...props }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function DynamicToggle({ variant, size, shape, morph: morphProp, slots, config, disabled, className, children, value: valueProp, defaultValue, onValueChange, ...rest }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DynamicToggle {
     var displayName: string;
 }
@@ -20,12 +20,18 @@ declare namespace DynamicToggleOption {
  * Expandable group — registers with root on mount, renders sub-options.
  * The group label is rendered by the root based on registered info.
  */
-declare function DynamicToggleGroup({ label, labelPosition, collapsedMode, children, className, }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function DynamicToggleGroup({ label, bubble, bubblePosition, collapsedMode, children, className, }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DynamicToggleGroup {
     var displayName: string;
 }
+/** DynamicToggle with compound sub-components attached. */
+type DynamicToggleCompound = typeof DynamicToggle & {
+    Option: typeof DynamicToggleOption;
+    Group: typeof DynamicToggleGroup;
+};
 export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup, useDynamicToggle, dynamicToggleVariants, };
-export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, IDynamicToggleConfig, DynamicToggleContextType, DynamicToggleCollapsedMode, DynamicToggleMorphMode, } from './DynamicToggle.types';
+export type { DynamicToggleCompound };
+export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, IDynamicToggleConfig, DynamicToggleContextType, DynamicToggleCollapsedMode, DynamicToggleBubblePosition, DynamicToggleGroupRegistration, } from './DynamicToggle.types';
 export type { DynamicToggleSlot, DynamicToggleVariantProps } from './DynamicToggle.styles';
 export { dynamicToggleStyles } from './DynamicToggle.styles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAExB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAuBrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAuFrB;kBAlGQ,aAAa;;;AAwGtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAhDQ,kBAAkB;;;AA2D3B,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAIxB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAmCrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAuGrB;kBArHQ,aAAa;;;AA2HtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,cAAsB,EACtB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAjDQ,kBAAkB;;;AA4D3B,2DAA2D;AAC3D,KAAK,qBAAqB,GAAG,OAAO,aAAa,GAAG;IAClD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,KAAK,EAAE,OAAO,kBAAkB,CAAC;CAClC,CAAC;AASF,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -11,11 +11,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/ui/DynamicToggle/index.tsx
 /**
-* DynamicToggle — CSS-animated toggle with expanding sub-options and group label.
+* DynamicToggle v2 — CSS-animated toggle with expanding sub-options and group label.
 *
 * Pure CSS animation via `:has(:checked)` on hidden radio inputs.
-* When the group is active, a group label grows out of the pill.
-* Optional gooey morph via `config.morphMode` for organic junction.
+* When the group is active, a group label (bubble) grows out of the pill.
+* Optional gooey morph via `morph` prop for organic junction.
 *
 * Supports exactly 1 `DynamicToggleOption` + 1 `DynamicToggleGroup` (with 2 sub-options).
 *
@@ -23,12 +23,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * @example
 * ```tsx
-* <DynamicToggle value="tree" onValueChange={setVal} size="sm" shape="pill">
-*   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
-*   <DynamicToggleGroup label="Changes" collapsedMode="title" labelPosition="top">
-*     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
-*     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
-*   </DynamicToggleGroup>
+* <DynamicToggle value="tree" onValueChange={setVal} size="sm" morph="filter">
+*   <DynamicToggle.Option value="tree">Tree</DynamicToggle.Option>
+*   <DynamicToggle.Group label="Changes" bubblePosition="top" collapsedMode="title">
+*     <DynamicToggle.Option value="flat">Flat</DynamicToggle.Option>
+*     <DynamicToggle.Option value="grouped">Grouped</DynamicToggle.Option>
+*   </DynamicToggle.Group>
 * </DynamicToggle>
 * ```
 */
@@ -39,38 +39,54 @@ const SIZE_HEIGHT_PX = {
 	default: 38,
 	lg: 44
 };
+const SIZE_WIDTH_PX = {
+	sm: 210,
+	default: 260,
+	lg: 320
+};
+const SHAPE_RADIUS = {
+	pill: 9999,
+	rounded: 12,
+	square: 6
+};
 /**
 * Root container — pill-shaped toggle with expanding sub-options and group label.
 */
-function DynamicToggle({ variant, size, shape, slots, config, disabled = false, className, children, "aria-label": ariaLabel, ...props }) {
+function DynamicToggle({ variant, size, shape, morph: morphProp, slots, config, disabled = false, className, children, value: valueProp, defaultValue, onValueChange, ...rest }) {
 	const [value, setValue] = useControlledState({
-		value: props.value,
-		defaultValue: props.defaultValue ?? "",
-		onChange: props.onValueChange
+		value: valueProp,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
 	});
 	const groupName = React$1.useId();
 	const [groupLabel, setGroupLabel] = React$1.useState("");
+	const [groupBubble, setGroupBubble] = React$1.useState(null);
 	const [groupValues, setGroupValues] = React$1.useState([]);
-	const [groupPosition, setGroupPosition] = React$1.useState("top");
+	const [groupBubblePosition, setGroupBubblePosition] = React$1.useState("top");
 	const [groupCollapsedMode, setGroupCollapsedMode] = React$1.useState("title");
-	const registerGroup = React$1.useCallback((label, values, position, collapsedMode) => {
-		setGroupLabel(label);
-		setGroupValues(values);
-		setGroupPosition(position);
-		setGroupCollapsedMode(collapsedMode);
+	const registerGroup = React$1.useCallback((info) => {
+		setGroupLabel(info.label);
+		setGroupBubble(info.bubble ?? null);
+		setGroupValues(info.values);
+		setGroupBubblePosition(info.bubblePosition);
+		setGroupCollapsedMode(info.collapsedMode);
 	}, []);
 	const groupActive = groupValues.includes(value);
-	const morphMode = config?.morphMode ?? "none";
 	const resolvedVariant = variant ?? "default";
-	const effectiveMorphMode = resolvedVariant === "ghost" || resolvedVariant === "outline" ? "none" : morphMode;
-	const showGroupLabel = (config?.labelAnimation ?? "morph") !== "none" && groupPosition !== "hidden" && groupLabel;
+	const effectiveMorph = resolvedVariant === "ghost" || resolvedVariant === "outline" ? "none" : morphProp ?? "none";
+	const showBubble = effectiveMorph !== "none" && groupBubblePosition !== "none" && groupLabel;
 	const heightPx = SIZE_HEIGHT_PX[size ?? "default"] ?? 32;
-	const style = config?.duration ? { "--dt-dur": `${config.duration}s` } : void 0;
-	const groupLabelElement = showGroupLabel ? /* @__PURE__ */ jsx("div", {
+	const style = {
+		...config?.duration && { "--dt-dur": `${config.duration}s` },
+		...config?.indicatorDuration && { "--dt-indicator-dur": `${config.indicatorDuration}s` },
+		...config?.indicatorEasing && { "--dt-indicator-ease": config.indicatorEasing }
+	};
+	const hasStyle = Object.keys(style).length > 0;
+	const groupLabelElement = showBubble ? /* @__PURE__ */ jsx("div", {
 		"data-slot": "dt-group-label",
-		"data-position": groupPosition,
+		"data-bubble-position": groupBubblePosition,
 		className: cn(dynamicToggleStyles.groupLabel, slots?.groupLabel),
-		children: /* @__PURE__ */ jsx("span", { children: groupLabel || "\xA0" })
+		children: /* @__PURE__ */ jsx("span", { children: groupBubble || groupLabel || "\xA0" })
 	}) : null;
 	return /* @__PURE__ */ jsx(DynamicToggleProvider, {
 		value: {
@@ -79,27 +95,33 @@ function DynamicToggle({ variant, size, shape, slots, config, disabled = false,
 			groupName,
 			groupActive,
 			disabled,
+			morph: effectiveMorph,
 			registerGroup
 		},
 		children: /* @__PURE__ */ jsxs("div", {
+			...rest,
 			"data-slot": "dt-root",
-			"data-morph": effectiveMorphMode !== "none" ? effectiveMorphMode : void 0,
+			"data-morph": effectiveMorph !== "none" ? effectiveMorph : void 0,
+			"data-indicator": config?.forceTranslateIndicator ? "translate" : void 0,
 			"data-group-active": groupActive || void 0,
 			"data-disabled": disabled || void 0,
 			role: "radiogroup",
-			"aria-label": ariaLabel,
-			style,
+			style: hasStyle ? style : void 0,
 			className: cn(dynamicToggleVariants({
 				variant,
 				size,
-				shape
+				shape,
+				morph: effectiveMorph
 			}), slots?.root, className),
 			children: [
-				effectiveMorphMode === "filter" && /* @__PURE__ */ jsxs(GooeyCanvas, {
+				effectiveMorph === "filter" && groupBubblePosition !== "none" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GooeyCanvas, {
 					height: heightPx,
-					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[inherit] bg-card" }), groupLabelElement]
-				}),
-				effectiveMorphMode === "path" && groupLabelElement,
+					width: SIZE_WIDTH_PX[size ?? "default"] ?? 260,
+					radius: SHAPE_RADIUS[shape ?? "pill"] ?? 9999,
+					expanded: groupActive,
+					bubblePosition: groupBubblePosition
+				}), groupLabelElement] }),
+				effectiveMorph === "path" && groupLabelElement,
 				/* @__PURE__ */ jsxs("div", {
 					"data-slot": "dt-track",
 					className: cn(dynamicToggleStyles.track, slots?.track),
@@ -140,7 +162,7 @@ function DynamicToggleOption({ value, children, className }) {
 * Expandable group — registers with root on mount, renders sub-options.
 * The group label is rendered by the root based on registered info.
 */
-function DynamicToggleGroup({ label, labelPosition = "top", collapsedMode = "title", children, className }) {
+function DynamicToggleGroup({ label, bubble, bubblePosition = "top", collapsedMode = "title", children, className }) {
 	const ctx = useDynamicToggle();
 	const optsText = React$1.useMemo(() => {
 		const labels = [];
@@ -160,11 +182,18 @@ function DynamicToggleGroup({ label, labelPosition = "top", collapsedMode = "tit
 				if (p.value) values.push(p.value);
 			}
 		});
-		ctx.registerGroup(label, values, labelPosition, collapsedMode);
+		ctx.registerGroup({
+			label,
+			values,
+			bubblePosition,
+			collapsedMode,
+			bubble
+		});
 	}, [
 		label,
-		labelPosition,
+		bubblePosition,
 		collapsedMode,
+		bubble,
 		children,
 		ctx.registerGroup
 	]);
@@ -183,6 +212,8 @@ function DynamicToggleGroup({ label, labelPosition = "top", collapsedMode = "tit
 DynamicToggle.displayName = "DynamicToggle";
 DynamicToggleOption.displayName = "DynamicToggleOption";
 DynamicToggleGroup.displayName = "DynamicToggleGroup";
+DynamicToggle.Option = DynamicToggleOption;
+DynamicToggle.Group = DynamicToggleGroup;
 
 //#endregion
 export { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.5.4",
+  "version": "0.5.8",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,16 +17,56 @@
       "import": "./dist/react-ui/index.js",
       "default": "./dist/react-ui/index.js"
     },
-    "./react/ui/*": "./src/react-ui/ui/*/index.tsx",
-    "./react/primitives/*": "./src/react-ui/primitives/*/index.tsx",
-    "./react/components/*": "./src/react-ui/components/*/index.tsx",
-    "./react/hooks/*": "./src/react-ui/hooks/*/*.ts",
-    "./react/hooks/Animation/*": "./src/react-ui/hooks/Animation/*.tsx",
-    "./react/hooks/DOM/*": "./src/react-ui/hooks/DOM/*.tsx",
-    "./react/hooks/State/*": "./src/react-ui/hooks/State/*.tsx",
-    "./react/hooks/Formatting/*": "./src/react-ui/hooks/Formatting/*.ts",
-    "./react/icons/*": "./src/react-ui/icons/*.tsx",
-    "./react/lib/*": "./src/react-ui/lib/*.ts",
+    "./react/ui/*": {
+      "types": "./dist/react-ui/ui/*/index.d.ts",
+      "import": "./dist/react-ui/ui/*/index.js",
+      "default": "./dist/react-ui/ui/*/index.js"
+    },
+    "./react/primitives/*": {
+      "types": "./dist/react-ui/primitives/*/index.d.ts",
+      "import": "./dist/react-ui/primitives/*/index.js",
+      "default": "./dist/react-ui/primitives/*/index.js"
+    },
+    "./react/components/*": {
+      "types": "./dist/react-ui/components/*/index.d.ts",
+      "import": "./dist/react-ui/components/*/index.js",
+      "default": "./dist/react-ui/components/*/index.js"
+    },
+    "./react/hooks/*": {
+      "types": "./dist/react-ui/hooks/*/index.d.ts",
+      "import": "./dist/react-ui/hooks/*/index.js",
+      "default": "./dist/react-ui/hooks/*/index.js"
+    },
+    "./react/hooks/Animation/*": {
+      "types": "./dist/react-ui/hooks/Animation/*.d.ts",
+      "import": "./dist/react-ui/hooks/Animation/*.js",
+      "default": "./dist/react-ui/hooks/Animation/*.js"
+    },
+    "./react/hooks/DOM/*": {
+      "types": "./dist/react-ui/hooks/DOM/*.d.ts",
+      "import": "./dist/react-ui/hooks/DOM/*.js",
+      "default": "./dist/react-ui/hooks/DOM/*.js"
+    },
+    "./react/hooks/State/*": {
+      "types": "./dist/react-ui/hooks/State/*.d.ts",
+      "import": "./dist/react-ui/hooks/State/*.js",
+      "default": "./dist/react-ui/hooks/State/*.js"
+    },
+    "./react/hooks/Formatting/*": {
+      "types": "./dist/react-ui/hooks/Formatting/*.d.ts",
+      "import": "./dist/react-ui/hooks/Formatting/*.js",
+      "default": "./dist/react-ui/hooks/Formatting/*.js"
+    },
+    "./react/icons/*": {
+      "types": "./dist/react-ui/icons/*.d.ts",
+      "import": "./dist/react-ui/icons/*.js",
+      "default": "./dist/react-ui/icons/*.js"
+    },
+    "./react/lib/*": {
+      "types": "./dist/react-ui/lib/*.d.ts",
+      "import": "./dist/react-ui/lib/*.js",
+      "default": "./dist/react-ui/lib/*.js"
+    },
     "./react/blocks/Terminal": {
       "types": "./dist/react-ui/blocks/Terminal/index.d.ts",
       "import": "./dist/react-ui/blocks/Terminal/index.js",
@@ -44,8 +84,7 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",

package/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/core/index.ts

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

package/src/core/types.ts

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

package/src/css.d.ts

@@ -1,7 +0,0 @@
-declare module '*.module.css' {
-  const classes: Record<string, string>;
-  export default classes;
-}
-
-declare module '@xterm/xterm/css/xterm.css';
-declare module '*.css';