@mks2508/mks-ui 0.5.2 → 0.5.4

package/src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts

@@ -1,14 +1,52 @@
 /**
  * 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';
+
+// ---------------------------------------------------------------------------
+// Shared types
+// ---------------------------------------------------------------------------
+
+/** 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';
+
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+
+/**
+ * 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
+// ---------------------------------------------------------------------------
 
 /**
  * Context shared between DynamicToggle root and its children.
@@ -22,37 +60,66 @@ 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;
 };
 
+// ---------------------------------------------------------------------------
+// Root
+// ---------------------------------------------------------------------------
+
 /**
  * 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 */
   children: React.ReactNode;
 }
 
+// ---------------------------------------------------------------------------
+// Option
+// ---------------------------------------------------------------------------
+
 /**
  * Props for a single toggle option (top-level or inside a group).
  *
@@ -70,23 +137,37 @@ export interface IDynamicToggleOptionProps {
   className?: string;
 }
 
+// ---------------------------------------------------------------------------
+// Group
+// ---------------------------------------------------------------------------
+
 /**
  * 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/src/react-ui/ui/DynamicToggle/index.tsx

@@ -1,19 +1,21 @@
 'use client';
 
 /**
- * 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>
@@ -25,57 +27,16 @@ import * as React from 'react';
 import { useControlledState } from '@/react-ui/hooks/State/UseControlledState';
 import { getStrictContext } from '@/react-ui/lib/get-strict-context';
 import { cn } from '@/react-ui/lib/utils';
-import { dynamicToggleStyles } from './DynamicToggle.styles';
+import { GooeyCanvas } from '@/react-ui/primitives/waapi/Gooey/GooeyCanvas';
+import './DynamicToggle.css';
+import { dynamicToggleStyles, dynamicToggleVariants } from './DynamicToggle.styles';
 import type {
   DynamicToggleContextType,
+  DynamicToggleCollapsedMode,
   IDynamicToggleProps,
   IDynamicToggleOptionProps,
   IDynamicToggleGroupProps,
 } from './DynamicToggle.types';
-// ---------------------------------------------------------------------------
-// CSS injection (same pattern as Tabs — inject once into document head)
-// ---------------------------------------------------------------------------
-
-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.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);
-  }, []);
-}
 
 // ---------------------------------------------------------------------------
 // Context
@@ -84,24 +45,42 @@ function useDynamicToggleCSS() {
 const [DynamicToggleProvider, useDynamicToggle] =
   getStrictContext<DynamicToggleContextType>('DynamicToggleContext');
 
+// ---------------------------------------------------------------------------
+// SSR-safe layout effect — useLayoutEffect on client, useEffect on server
+// ---------------------------------------------------------------------------
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+// ---------------------------------------------------------------------------
+// Size height map (for auto-blur calculation)
+// ---------------------------------------------------------------------------
+
+const SIZE_HEIGHT_PX: Record<string, number> = {
+  sm: 30,
+  default: 38,
+  lg: 44,
+};
+
 // ---------------------------------------------------------------------------
 // DynamicToggle (Root)
 // ---------------------------------------------------------------------------
 
 /**
- * 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({
+  variant,
+  size,
+  shape,
   slots,
+  config,
+  disabled = false,
   className,
   children,
+  'aria-label': ariaLabel,
   ...props
 }: IDynamicToggleProps) {
-  useDynamicToggleCSS();
-
   const [value, setValue] = useControlledState({
     value: props.value,
     defaultValue: props.defaultValue ?? '',
@@ -110,35 +89,75 @@ function DynamicToggle({
 
   const groupName = React.useId();
 
-  // Detect if group child is active (check children for group values)
-  const groupValues = React.useMemo(() => {
-    const vals: string[] = [];
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement<IDynamicToggleGroupProps>(child) && child.type === DynamicToggleGroup) {
-        React.Children.forEach(child.props.children, (gc) => {
-          if (React.isValidElement<IDynamicToggleOptionProps>(gc) && gc.props.value) {
-            vals.push(gc.props.value);
-          }
-        });
-      }
-    });
-    return vals;
-  }, [children]);
+  // Group info — registered by DynamicToggleGroup child via context + useLayoutEffect
+  const [groupLabel, setGroupLabel] = React.useState('');
+  const [groupValues, setGroupValues] = React.useState<string[]>([]);
+  const [groupPosition, setGroupPosition] = React.useState<'top' | 'bottom' | 'hidden'>('top');
+  const [groupCollapsedMode, setGroupCollapsedMode] = React.useState<DynamicToggleCollapsedMode>('title');
+
+  const registerGroup = React.useCallback(
+    (label: string, values: string[], position: 'top' | 'bottom' | 'hidden', collapsedMode: DynamicToggleCollapsedMode) => {
+      setGroupLabel(label);
+      setGroupValues(values);
+      setGroupPosition(position);
+      setGroupCollapsedMode(collapsedMode);
+    },
+    [],
+  );
 
   const groupActive = groupValues.includes(value);
 
+  // Config
+  const morphMode = config?.morphMode ?? 'none';
+  const resolvedVariant = variant ?? 'default';
+  const effectiveMorphMode = (resolvedVariant === 'ghost' || resolvedVariant === 'outline') ? 'none' : morphMode;
+  const labelAnimation = config?.labelAnimation ?? 'morph';
+  const showGroupLabel = labelAnimation !== 'none' && groupPosition !== 'hidden' && groupLabel;
+  const heightPx = SIZE_HEIGHT_PX[size ?? 'default'] ?? 32;
+
+  const style = config?.duration
+    ? { '--dt-dur': `${config.duration}s` } as React.CSSProperties
+    : undefined;
+
+  // Group label element (shared between modes)
+  const groupLabelElement = showGroupLabel ? (
+    <div
+      data-slot="dt-group-label"
+      data-position={groupPosition}
+      className={cn(dynamicToggleStyles.groupLabel, slots?.groupLabel)}
+    >
+      <span>{groupLabel || '\u00A0'}</span>
+    </div>
+  ) : null;
+
   return (
-    <DynamicToggleProvider value={{ value, setValue, groupName, groupActive }}>
+    <DynamicToggleProvider value={{ value, setValue, groupName, groupActive, disabled, registerGroup }}>
       <div
         data-slot="dt-root"
+        data-morph={effectiveMorphMode !== 'none' ? effectiveMorphMode : undefined}
         data-group-active={groupActive || undefined}
-        className={cn(dynamicToggleStyles.root, slots?.root, className)}
+        data-disabled={disabled || undefined}
+        role="radiogroup"
+        aria-label={ariaLabel}
+        style={style}
+        className={cn(dynamicToggleVariants({ variant, size, shape }), slots?.root, className)}
       >
+        {/* Filter morph: GooeyCanvas wraps backgrounds only */}
+        {effectiveMorphMode === 'filter' && (
+          <GooeyCanvas height={heightPx}>
+            <div className="absolute inset-0 rounded-[inherit] bg-card" />
+            {groupLabelElement}
+          </GooeyCanvas>
+        )}
+
+        {/* Path morph: group label rendered directly (no gooey filter) */}
+        {effectiveMorphMode === 'path' && groupLabelElement}
+
+        {/* Track — always rendered, z-indexed above gooey layer */}
         <div
           data-slot="dt-track"
           className={cn(dynamicToggleStyles.track, slots?.track)}
         >
-          {/* Main sliding indicator */}
           <div
             data-slot="dt-indicator"
             className={cn(dynamicToggleStyles.indicator, slots?.indicator)}
@@ -155,11 +174,7 @@ function DynamicToggle({
 // ---------------------------------------------------------------------------
 
 /**
- * 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 }: IDynamicToggleOptionProps) {
   const ctx = useDynamicToggle();
@@ -177,12 +192,13 @@ function DynamicToggleOption({ value, children, className }: IDynamicToggleOptio
         <span>{children}</span>
       </label>
       <input
-        data-slot="dt-radio"
+        className="sr-only"
         type="radio"
         name={ctx.groupName}
         id={id}
         value={value}
         checked={isActive}
+        disabled={ctx.disabled}
         onChange={() => ctx.setValue(value)}
       />
     </>
@@ -194,26 +210,50 @@ function DynamicToggleOption({ value, children, className }: IDynamicToggleOptio
 // ---------------------------------------------------------------------------
 
 /**
- * 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 }: IDynamicToggleGroupProps) {
+function DynamicToggleGroup({
+  label,
+  labelPosition = 'top',
+  collapsedMode = 'title',
+  children,
+  className,
+}: IDynamicToggleGroupProps) {
+  const ctx = useDynamicToggle();
+
+  // Build combined opts text from children
+  const optsText = React.useMemo(() => {
+    const labels: string[] = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        const p = child.props as { children?: React.ReactNode };
+        if (p.children) labels.push(String(p.children));
+      }
+    });
+    return labels.join(' · ');
+  }, [children]);
+
+  // Register group info with root — useLayoutEffect prevents visual flash
+  useIsomorphicLayoutEffect(() => {
+    const values: string[] = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        const p = child.props as { value?: string };
+        if (p.value) values.push(p.value);
+      }
+    });
+    ctx.registerGroup(label, values, labelPosition, collapsedMode);
+  }, [label, labelPosition, collapsedMode, children, ctx.registerGroup]);
+
   return (
     <div
       data-slot="dt-group"
+      data-collapsed={collapsedMode}
+      data-label={label}
+      data-opts={collapsedMode !== 'title' ? optsText : undefined}
       className={cn(dynamicToggleStyles.group, className)}
     >
-      {/* Collapsed label */}
-      <span
-        data-slot="dt-group-label"
-        className={dynamicToggleStyles.groupLabel}
-      >
-        {label}
-      </span>
-      {/* Internal sliding indicator */}
       <div
         data-slot="dt-group-indicator"
         className={dynamicToggleStyles.groupIndicator}
@@ -223,18 +263,32 @@ function DynamicToggleGroup({ label, children, className }: IDynamicToggleGroupP
   );
 }
 
+// Display names
+DynamicToggle.displayName = 'DynamicToggle';
+DynamicToggleOption.displayName = 'DynamicToggleOption';
+DynamicToggleGroup.displayName = 'DynamicToggleGroup';
+
 // ---------------------------------------------------------------------------
 // Exports
 // ---------------------------------------------------------------------------
 
-export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup };
+export {
+  DynamicToggle,
+  DynamicToggleOption,
+  DynamicToggleGroup,
+  useDynamicToggle,
+  dynamicToggleVariants,
+};
 
 export type {
   IDynamicToggleProps,
   IDynamicToggleOptionProps,
   IDynamicToggleGroupProps,
+  IDynamicToggleConfig,
   DynamicToggleContextType,
+  DynamicToggleCollapsedMode,
+  DynamicToggleMorphMode,
 } from './DynamicToggle.types';
 
-export type { DynamicToggleSlot } from './DynamicToggle.styles';
+export type { DynamicToggleSlot, DynamicToggleVariantProps } from './DynamicToggle.styles';
 export { dynamicToggleStyles } from './DynamicToggle.styles';