@mks2508/mks-ui 0.5.1 → 0.5.4

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

@@ -0,0 +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.
+*
+* 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 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",
+		"flex items-center justify-center",
+		"text-muted-foreground font-medium whitespace-nowrap",
+		"pointer-events-none"
+	].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, dynamicToggleVariants };

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

@@ -0,0 +1,138 @@
+/**
+ * DynamicToggle type definitions.
+ *
+ * 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, 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.
+ */
+export type DynamicToggleContextType = {
+    /** Current selected value */
+    value: string;
+    /** Update selected value */
+    setValue: (value: string) => void;
+    /** Auto-generated radio group name */
+    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}
+ *   size="sm" config={{ morphMode: 'filter' }}
+ * >
+ *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ *   <DynamicToggleGroup label="Changes" collapsedMode="title">
+ *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+ *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ *   </DynamicToggleGroup>
+ * </DynamicToggle>
+ * ```
+ */
+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 */
+    children: React.ReactNode;
+}
+/**
+ * Props for a single toggle option (top-level or inside a group).
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ * ```
+ */
+export interface IDynamicToggleOptionProps {
+    /** Value this option represents */
+    value: string;
+    /** Label content */
+    children: React.ReactNode;
+    /** Additional class */
+    className?: string;
+}
+/**
+ * Props for an expandable group of 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="Premium" collapsedMode="title">
+ *   <DynamicToggleOption value="solo">Solo</DynamicToggleOption>
+ *   <DynamicToggleOption value="team">Team</DynamicToggleOption>
+ * </DynamicToggleGroup>
+ * ```
+ */
+export interface IDynamicToggleGroupProps {
+    /** Label shown as group title / group label text */
+    label: string;
+    /** 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;
+}
+//# sourceMappingURL=DynamicToggle.types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+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 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 namespace DynamicToggle {
+    var displayName: string;
+}
+/**
+ * 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;
+}
+/**
+ * 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 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

@@ -0,0 +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"}

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

@@ -0,0 +1,188 @@
+'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 "./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 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.
+*
+* Supports exactly 1 `DynamicToggleOption` + 1 `DynamicToggleGroup` (with 2 sub-options).
+*
+* @module @mks2508/mks-ui/react/ui/DynamicToggle
+*
+* @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>
+* ```
+*/
+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 with expanding sub-options and group label.
+*/
+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 [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,
+			disabled,
+			registerGroup
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "dt-root",
+			"data-morph": effectiveMorphMode !== "none" ? effectiveMorphMode : void 0,
+			"data-group-active": groupActive || void 0,
+			"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 — hidden radio + visible label.
+*/
+function DynamicToggleOption({ value, children, className }) {
+	const ctx = useDynamicToggle();
+	const id = React$1.useId();
+	const isActive = ctx.value === value;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		"data-slot": "dt-option",
+		"data-active": isActive || void 0,
+		className: cn(dynamicToggleStyles.option, className),
+		children: /* @__PURE__ */ jsx("span", { children })
+	}), /* @__PURE__ */ jsx("input", {
+		className: "sr-only",
+		type: "radio",
+		name: ctx.groupName,
+		id,
+		value,
+		checked: isActive,
+		disabled: ctx.disabled,
+		onChange: () => ctx.setValue(value)
+	})] });
+}
+/**
+* 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 }) {
+	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("div", {
+			"data-slot": "dt-group-indicator",
+			className: dynamicToggleStyles.groupIndicator
+		}), children]
+	});
+}
+DynamicToggle.displayName = "DynamicToggle";
+DynamicToggleOption.displayName = "DynamicToggleOption";
+DynamicToggleGroup.displayName = "DynamicToggleGroup";
+
+//#endregion
+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.d.ts

@@ -30,4 +30,5 @@ export * from './Separator';
 export * from './Textarea';
 export * from './DataCard';
 export * from './TextFlow';
+export * from './DynamicToggle';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,iBAAiB,CAAC"}

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

@@ -39,3 +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, 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.1",
+  "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';

package/src/react-ui/primitives/waapi/Gooey/Gooey.types.ts

@@ -0,0 +1,123 @@
+/**
+ * Gooey morphing primitive types.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+import type { ReactNode } from 'react';
+
+// ---------------------------------------------------------------------------
+// GooeyFilter
+// ---------------------------------------------------------------------------
+
+/**
+ * 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;
+}
+
+// ---------------------------------------------------------------------------
+// GooeyCanvas
+// ---------------------------------------------------------------------------
+
+/**
+ * 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;
+}
+
+// ---------------------------------------------------------------------------
+// MorphPath
+// ---------------------------------------------------------------------------
+
+/**
+ * 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';
+}
+
+// ---------------------------------------------------------------------------
+// useMorphPath
+// ---------------------------------------------------------------------------
+
+/**
+ * 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';
+}