@mks2508/mks-ui 0.5.2 → 0.5.4

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

@@ -1,39 +1,67 @@
+import { cva } from "class-variance-authority";
+
 //#region src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts
 /**
+* DynamicToggle style slots + CVA variants.
+*
+* Layout via Tailwind. State animations via CSS file (`:has()`, `clip-path`).
+* Shape propagated to indicators via `--dt-radius` CSS variable.
+*
+* @module @mks2508/mks-ui/react/ui/DynamicToggle
+*/
+/**
 * Default styles for each DynamicToggle slot.
 *
-* @example
-* ```tsx
-* <DynamicToggle slots={{ root: 'w-72', indicator: 'bg-primary' }}>
-*   ...
-* </DynamicToggle>
-* ```
+* Width is set by size variants — required because indicator uses `width: 50%`
+* and clip-path uses container query units. Override: `slots={{ root: 'w-80' }}`.
 */
 const dynamicToggleStyles = {
-	root: ["relative rounded-full border border-border bg-card", "p-[2px] select-none"].join(" "),
-	track: ["relative grid place-items-center", "w-full h-full"].join(" "),
-	option: [
-		"inline-grid place-items-center cursor-pointer",
-		"text-xs font-medium z-[2] h-full w-full",
-		"transition-[color,opacity] duration-[220ms]"
-	].join(" "),
-	indicator: [
-		"absolute w-1/2 left-0 top-0 bottom-0",
-		"bg-foreground rounded-full",
-		"pointer-events-none z-0"
-	].join(" "),
-	group: ["relative w-full h-full grid", "border border-transparent"].join(" "),
+	root: "relative border p-[2px] select-none",
+	track: "relative grid grid-cols-[repeat(4,1fr)] place-items-center w-full h-full",
+	option: "inline-grid place-items-center cursor-pointer font-medium z-[2] h-full w-full whitespace-nowrap",
+	indicator: "absolute w-1/2 left-0 top-0 bottom-0 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
+	group: "col-span-2 relative w-full h-full grid grid-cols-2",
+	groupIndicator: "absolute left-1/2 top-0 bottom-0 w-1/2 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
 	groupLabel: [
-		"absolute left-1/2 top-1/2 z-[2]",
-		"text-xs font-medium text-foreground",
+		"absolute",
+		"flex items-center justify-center",
+		"text-muted-foreground font-medium whitespace-nowrap",
 		"pointer-events-none"
-	].join(" "),
-	groupIndicator: [
-		"absolute left-1/2 top-0 bottom-0",
-		"bg-foreground rounded-full",
-		"pointer-events-none z-0"
 	].join(" ")
 };
+/**
+* CVA variants for DynamicToggle root.
+*
+* @example
+* ```tsx
+* <DynamicToggle size="sm" variant="outline" shape="rounded">
+* ```
+*/
+const dynamicToggleVariants = cva(dynamicToggleStyles.root, {
+	variants: {
+		variant: {
+			default: "bg-card border-border shadow-sm",
+			ghost: "bg-transparent border-transparent",
+			muted: "bg-muted border-muted",
+			outline: "bg-transparent border-border"
+		},
+		size: {
+			sm: "h-[30px] w-[210px] text-[10px] [--dt-h:30px]",
+			default: "h-[38px] w-[260px] text-xs [--dt-h:38px]",
+			lg: "h-[44px] w-80 text-sm [--dt-h:44px]"
+		},
+		shape: {
+			pill: "rounded-full [--dt-radius:9999px]",
+			rounded: "rounded-xl [--dt-radius:0.75rem]",
+			square: "rounded-md [--dt-radius:0.375rem]"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		shape: "pill"
+	}
+});
 
 //#endregion
-export { dynamicToggleStyles };
+export { dynamicToggleStyles, dynamicToggleVariants };

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

@@ -1,13 +1,36 @@
 /**
  * DynamicToggle type definitions.
  *
- * A CSS-animated toggle where one option can expand into sub-options.
- * Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
+ * CSS-animated toggle where one option expands into sub-options.
+ * Uses hidden radios + `:has(:checked)` for zero-JS animation.
+ * Optional gooey morph via `GooeyCanvas` or `MorphPath` primitives.
  *
  * @module @mks2508/mks-ui/react/ui/DynamicToggle
  */
-import type { SlotOverrides } from '../../../core/types';
-import type { DynamicToggleSlot } from './DynamicToggle.styles';
+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.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggle config={{ morphMode: 'filter', duration: 0.3 }}>
+ *   ...
+ * </DynamicToggle>
+ * ```
+ */
+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;
+}
 /**
  * Context shared between DynamicToggle root and its children.
  */
@@ -20,30 +43,46 @@ export type DynamicToggleContextType = {
     groupName: string;
     /** Whether a group child is active */
     groupActive: boolean;
+    /** Whether the toggle is disabled */
+    disabled: boolean;
+    /** Register group info (called by DynamicToggleGroup on mount) */
+    registerGroup: (label: string, values: string[], position: 'top' | 'bottom' | 'hidden', collapsedMode: DynamicToggleCollapsedMode) => void;
 };
 /**
  * Props for the DynamicToggle root container.
  *
+ * Supports exactly one `DynamicToggleOption` + one `DynamicToggleGroup`.
+ * The group expands into sub-options when one of its children is active.
+ *
  * @example
  * ```tsx
- * <DynamicToggle value="tree" onValueChange={setVal}>
+ * <DynamicToggle
+ *   value="tree" onValueChange={setVal}
+ *   size="sm" config={{ morphMode: 'filter' }}
+ * >
  *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
- *   <DynamicToggleGroup label="Changes">
+ *   <DynamicToggleGroup label="Changes" collapsedMode="title">
  *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
  *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
  *   </DynamicToggleGroup>
  * </DynamicToggle>
  * ```
  */
-export interface IDynamicToggleProps {
+export interface IDynamicToggleProps extends DynamicToggleVariantProps {
     /** Controlled value */
     value?: string;
     /** Uncontrolled default value */
     defaultValue?: string;
     /** Change callback */
     onValueChange?: (value: string) => void;
+    /** Disable the entire toggle */
+    disabled?: boolean;
     /** Slot class overrides */
     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 */
@@ -67,21 +106,31 @@ export interface IDynamicToggleOptionProps {
 }
 /**
  * Props for an expandable group of options.
- * When none of the group's options are active, shows the collapsed `label`.
- * When one is active, expands to show all sub-options.
+ *
+ * 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="Changes">
- *   <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
- *   <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ * <DynamicToggleGroup label="Premium" collapsedMode="title">
+ *   <DynamicToggleOption value="solo">Solo</DynamicToggleOption>
+ *   <DynamicToggleOption value="team">Team</DynamicToggleOption>
  * </DynamicToggleGroup>
  * ```
  */
 export interface IDynamicToggleGroupProps {
-    /** Label shown when collapsed */
+    /** Label shown as group title / group label text */
     label: string;
-    /** DynamicToggleOption children */
+    /** Group label position relative to the pill (default: 'top') */
+    labelPosition?: 'top' | 'bottom' | 'hidden';
+    /** How the group appears when collapsed (default: 'title') */
+    collapsedMode?: DynamicToggleCollapsedMode;
+    /** Exactly 2 DynamicToggleOption 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;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;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;CACtB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,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,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;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;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,wBAAwB;IACvC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,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":"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"}

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

@@ -1,29 +1,31 @@
-import type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps } from './DynamicToggle.types';
+import './DynamicToggle.css';
+import { dynamicToggleVariants } from './DynamicToggle.styles';
+import type { DynamicToggleContextType, IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps } from './DynamicToggle.types';
+declare const useDynamicToggle: () => DynamicToggleContextType;
 /**
- * Root container — pill-shaped toggle control.
- *
- * @param props - Component props
- * @returns React component
+ * Root container — pill-shaped toggle with expanding sub-options and group label.
  */
-declare function DynamicToggle({ slots, className, children, ...props }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function DynamicToggle({ variant, size, shape, slots, config, disabled, className, children, 'aria-label': ariaLabel, ...props }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicToggle {
+    var displayName: string;
+}
 /**
- * A single toggle option — renders a hidden radio + visible label.
- * Can be used at the top level or inside a DynamicToggleGroup.
- *
- * @param props - Component props
- * @returns React component
+ * A single toggle option — hidden radio + visible label.
  */
 declare function DynamicToggleOption({ value, children, className }: IDynamicToggleOptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicToggleOption {
+    var displayName: string;
+}
 /**
- * An expandable group of options. Shows `label` when collapsed,
- * expands to show sub-options when one is active.
- *
- * @param props - Component props
- * @returns React component
+ * 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, children, className }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
-export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup };
-export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, DynamicToggleContextType, } from './DynamicToggle.types';
-export type { DynamicToggleSlot } from './DynamicToggle.styles';
+declare function DynamicToggleGroup({ label, labelPosition, collapsedMode, children, className, }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicToggleGroup {
+    var displayName: string;
+}
+export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup, useDynamicToggle, dynamicToggleVariants, };
+export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, IDynamicToggleConfig, DynamicToggleContextType, DynamicToggleCollapsedMode, DynamicToggleMorphMode, } 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":"AA4BA,OAAO,KAAK,EAEV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAyD/B;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiDrB;AAMD;;;;;;GAMG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA0BrF;AAMD;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAqBnF;AAMD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,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,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"}

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

@@ -1,123 +1,119 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
+import { GooeyCanvas } from "../../primitives/waapi/Gooey/GooeyCanvas.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
-import { dynamicToggleStyles } from "./DynamicToggle.styles.js";
+import "./DynamicToggle.js";
+import { dynamicToggleStyles, dynamicToggleVariants } from "./DynamicToggle.styles.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/ui/DynamicToggle/index.tsx
 /**
-* DynamicToggle — CSS-animated toggle where one option expands into sub-options.
+* DynamicToggle — CSS-animated toggle with expanding sub-options and group label.
 *
-* Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
-* The indicator slides between options, and group options expand/collapse
-* with a clip-path reveal animation.
+* 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.
+*
+* Supports exactly 1 `DynamicToggleOption` + 1 `DynamicToggleGroup` (with 2 sub-options).
 *
 * @module @mks2508/mks-ui/react/ui/DynamicToggle
 *
 * @example
 * ```tsx
-* <DynamicToggle value="tree" onValueChange={setVal}>
+* <DynamicToggle value="tree" onValueChange={setVal} size="sm" shape="pill">
 *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
-*   <DynamicToggleGroup label="Changes">
+*   <DynamicToggleGroup label="Changes" collapsedMode="title" labelPosition="top">
 *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
 *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
 *   </DynamicToggleGroup>
 * </DynamicToggle>
 * ```
 */
-const DT_CSS_ID = "mks-dynamic-toggle-css";
-/** Reads the CSS file content at build time via rolldown */
-const DT_CSS = `
-:root{--dt-duration:0.22s;--dt-ease:cubic-bezier(0.22,0.61,0.36,1);--dt-drop-off:0.45}
-[data-slot="dt-track"]{grid-template-columns:repeat(4,1fr)}
-[data-slot="dt-track"]>label:first-of-type,[data-slot="dt-group"]{grid-column:span 2}
-[data-slot="dt-indicator"]{transition:translate var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-indicator"]{translate:0 0}
-[data-slot="dt-track"]:not(:has(>input:checked)) [data-slot="dt-indicator"]{translate:100% 0}
-[data-slot="dt-track"]:has(>input:checked)>label{color:var(--card)}
-[data-slot="dt-track"]:not(:has(>input:checked))>label{color:var(--foreground);opacity:var(--dt-drop-off)}
-[data-slot="dt-group"]{container-type:size;grid-template-columns:1fr 1fr}
-[data-slot="dt-group-label"]{translate:-50% -80%;transition:translate var(--dt-duration) var(--dt-ease),scale var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-label"]{translate:-50% -250%;scale:0.85}
-[data-slot="dt-group-indicator"]{transition:translate var(--dt-duration) var(--dt-ease),clip-path var(--dt-duration) var(--dt-ease),background var(--dt-duration) var(--dt-ease);clip-path:inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round 100px);translate:-50% 0;background:var(--foreground)}
-[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"]{background:var(--card);clip-path:inset(0 0 0 0 round 100px)}
-[data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"]{translate:-100% 0}
-[data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"]{translate:0 0}
-[data-slot="dt-group"] label{color:var(--muted-foreground);transition:color var(--dt-duration) var(--dt-ease),opacity var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-group"] label span{transition:scale var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-group"] label{color:var(--muted-foreground)}
-[data-slot="dt-group"]:has(input:checked) label{color:var(--muted-foreground);opacity:0.75}
-[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2){color:var(--foreground);opacity:1}
-[data-slot="dt-group"] label:nth-of-type(1) span{scale:0.75;transform-origin:150% 150%}
-[data-slot="dt-group"] label:nth-of-type(2) span{scale:0.75;transform-origin:-65% 150%}
-[data-slot="dt-group"]:has(input:checked) label span{scale:1}
-[data-slot="dt-radio"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
-`;
-function useDynamicToggleCSS() {
-	React$1.useEffect(() => {
-		if (typeof document === "undefined") return;
-		if (document.getElementById(DT_CSS_ID)) return;
-		const style = document.createElement("style");
-		style.id = DT_CSS_ID;
-		style.textContent = DT_CSS;
-		document.head.appendChild(style);
-	}, []);
-}
 const [DynamicToggleProvider, useDynamicToggle] = getStrictContext("DynamicToggleContext");
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
+const SIZE_HEIGHT_PX = {
+	sm: 30,
+	default: 38,
+	lg: 44
+};
 /**
-* Root container — pill-shaped toggle control.
-*
-* @param props - Component props
-* @returns React component
+* Root container — pill-shaped toggle with expanding sub-options and group label.
 */
-function DynamicToggle({ slots, className, children, ...props }) {
-	useDynamicToggleCSS();
+function DynamicToggle({ variant, size, shape, slots, config, disabled = false, className, children, "aria-label": ariaLabel, ...props }) {
 	const [value, setValue] = useControlledState({
 		value: props.value,
 		defaultValue: props.defaultValue ?? "",
 		onChange: props.onValueChange
 	});
 	const groupName = React$1.useId();
-	const groupActive = React$1.useMemo(() => {
-		const vals = [];
-		React$1.Children.forEach(children, (child) => {
-			if (React$1.isValidElement(child) && child.type === DynamicToggleGroup) React$1.Children.forEach(child.props.children, (gc) => {
-				if (React$1.isValidElement(gc) && gc.props.value) vals.push(gc.props.value);
-			});
-		});
-		return vals;
-	}, [children]).includes(value);
+	const [groupLabel, setGroupLabel] = React$1.useState("");
+	const [groupValues, setGroupValues] = React$1.useState([]);
+	const [groupPosition, setGroupPosition] = 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 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 heightPx = SIZE_HEIGHT_PX[size ?? "default"] ?? 32;
+	const style = config?.duration ? { "--dt-dur": `${config.duration}s` } : void 0;
+	const groupLabelElement = showGroupLabel ? /* @__PURE__ */ jsx("div", {
+		"data-slot": "dt-group-label",
+		"data-position": groupPosition,
+		className: cn(dynamicToggleStyles.groupLabel, slots?.groupLabel),
+		children: /* @__PURE__ */ jsx("span", { children: groupLabel || "\xA0" })
+	}) : null;
 	return /* @__PURE__ */ jsx(DynamicToggleProvider, {
 		value: {
 			value,
 			setValue,
 			groupName,
-			groupActive
+			groupActive,
+			disabled,
+			registerGroup
 		},
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			"data-slot": "dt-root",
+			"data-morph": effectiveMorphMode !== "none" ? effectiveMorphMode : void 0,
 			"data-group-active": groupActive || void 0,
-			className: cn(dynamicToggleStyles.root, slots?.root, className),
-			children: /* @__PURE__ */ jsxs("div", {
-				"data-slot": "dt-track",
-				className: cn(dynamicToggleStyles.track, slots?.track),
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-slot": "dt-indicator",
-					className: cn(dynamicToggleStyles.indicator, slots?.indicator)
-				}), children]
-			})
+			"data-disabled": disabled || void 0,
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			style,
+			className: cn(dynamicToggleVariants({
+				variant,
+				size,
+				shape
+			}), slots?.root, className),
+			children: [
+				effectiveMorphMode === "filter" && /* @__PURE__ */ jsxs(GooeyCanvas, {
+					height: heightPx,
+					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[inherit] bg-card" }), groupLabelElement]
+				}),
+				effectiveMorphMode === "path" && groupLabelElement,
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "dt-track",
+					className: cn(dynamicToggleStyles.track, slots?.track),
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-slot": "dt-indicator",
+						className: cn(dynamicToggleStyles.indicator, slots?.indicator)
+					}), children]
+				})
+			]
 		})
 	});
 }
 /**
-* A single toggle option — renders a hidden radio + visible label.
-* Can be used at the top level or inside a DynamicToggleGroup.
-*
-* @param props - Component props
-* @returns React component
+* A single toggle option — hidden radio + visible label.
 */
 function DynamicToggleOption({ value, children, className }) {
 	const ctx = useDynamicToggle();
@@ -130,40 +126,63 @@ function DynamicToggleOption({ value, children, className }) {
 		className: cn(dynamicToggleStyles.option, className),
 		children: /* @__PURE__ */ jsx("span", { children })
 	}), /* @__PURE__ */ jsx("input", {
-		"data-slot": "dt-radio",
+		className: "sr-only",
 		type: "radio",
 		name: ctx.groupName,
 		id,
 		value,
 		checked: isActive,
+		disabled: ctx.disabled,
 		onChange: () => ctx.setValue(value)
 	})] });
 }
 /**
-* An expandable group of options. Shows `label` when collapsed,
-* expands to show sub-options when one is active.
-*
-* @param props - Component props
-* @returns React component
+* 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, children, className }) {
+function DynamicToggleGroup({ label, labelPosition = "top", collapsedMode = "title", children, className }) {
+	const ctx = useDynamicToggle();
+	const optsText = React$1.useMemo(() => {
+		const labels = [];
+		React$1.Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child)) {
+				const p = child.props;
+				if (p.children) labels.push(String(p.children));
+			}
+		});
+		return labels.join(" · ");
+	}, [children]);
+	useIsomorphicLayoutEffect(() => {
+		const values = [];
+		React$1.Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child)) {
+				const p = child.props;
+				if (p.value) values.push(p.value);
+			}
+		});
+		ctx.registerGroup(label, values, labelPosition, collapsedMode);
+	}, [
+		label,
+		labelPosition,
+		collapsedMode,
+		children,
+		ctx.registerGroup
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dt-group",
+		"data-collapsed": collapsedMode,
+		"data-label": label,
+		"data-opts": collapsedMode !== "title" ? optsText : void 0,
 		className: cn(dynamicToggleStyles.group, className),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"data-slot": "dt-group-label",
-				className: dynamicToggleStyles.groupLabel,
-				children: label
-			}),
-			/* @__PURE__ */ jsx("div", {
-				"data-slot": "dt-group-indicator",
-				className: dynamicToggleStyles.groupIndicator
-			}),
-			children
-		]
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "dt-group-indicator",
+			className: dynamicToggleStyles.groupIndicator
+		}), children]
 	});
 }
+DynamicToggle.displayName = "DynamicToggle";
+DynamicToggleOption.displayName = "DynamicToggleOption";
+DynamicToggleGroup.displayName = "DynamicToggleGroup";
 
 //#endregion
-export { DynamicToggle, DynamicToggleGroup, DynamicToggleOption };
+export { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle };

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

@@ -85,7 +85,7 @@ function Switch$1({ name, defaultChecked, checked, onCheckedChange, nativeButton
 			defaultChecked,
 			checked,
 			onCheckedChange: setIsChecked,
-			nativeButton,
+			nativeButton: nativeButton ?? true,
 			disabled,
 			readOnly,
 			required,

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

@@ -39,5 +39,5 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScro
 import { dataCardStyles, dataCardVariants } from "./DataCard/DataCard.styles.js";
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./DataCard/index.js";
 import { TextFlow } from "./TextFlow/index.js";
-import { dynamicToggleStyles } from "./DynamicToggle/DynamicToggle.styles.js";
-import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption } from "./DynamicToggle/index.js";
+import { dynamicToggleStyles, dynamicToggleVariants } from "./DynamicToggle/DynamicToggle.styles.js";
+import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle } from "./DynamicToggle/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css",
+    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css && mkdir -p dist/react-ui/ui/DynamicToggle && cp src/react-ui/ui/DynamicToggle/DynamicToggle.css dist/react-ui/ui/DynamicToggle/DynamicToggle.css",
     "typecheck": "bunx tsc --noEmit",
     "lint": "bunx oxlint .",
     "preview": "vite preview",

package/src/css.d.ts

@@ -4,3 +4,4 @@ declare module '*.module.css' {
 }
 
 declare module '@xterm/xterm/css/xterm.css';
+declare module '*.css';