@mks2508/mks-ui 0.5.1 → 0.5.4

package/src/react-ui/ui/DynamicToggle/index.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+/**
+ * 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>
+ * ```
+ */
+
+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 { 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';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+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 with expanding sub-options and group label.
+ */
+function DynamicToggle({
+  variant,
+  size,
+  shape,
+  slots,
+  config,
+  disabled = false,
+  className,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: IDynamicToggleProps) {
+  const [value, setValue] = useControlledState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? '',
+    onChange: props.onValueChange,
+  });
+
+  const groupName = React.useId();
+
+  // 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, disabled, registerGroup }}>
+      <div
+        data-slot="dt-root"
+        data-morph={effectiveMorphMode !== 'none' ? effectiveMorphMode : undefined}
+        data-group-active={groupActive || undefined}
+        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)}
+        >
+          <div
+            data-slot="dt-indicator"
+            className={cn(dynamicToggleStyles.indicator, slots?.indicator)}
+          />
+          {children}
+        </div>
+      </div>
+    </DynamicToggleProvider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DynamicToggleOption
+// ---------------------------------------------------------------------------
+
+/**
+ * A single toggle option — hidden radio + visible label.
+ */
+function DynamicToggleOption({ value, children, className }: IDynamicToggleOptionProps) {
+  const ctx = useDynamicToggle();
+  const id = React.useId();
+  const isActive = ctx.value === value;
+
+  return (
+    <>
+      <label
+        htmlFor={id}
+        data-slot="dt-option"
+        data-active={isActive || undefined}
+        className={cn(dynamicToggleStyles.option, className)}
+      >
+        <span>{children}</span>
+      </label>
+      <input
+        className="sr-only"
+        type="radio"
+        name={ctx.groupName}
+        id={id}
+        value={value}
+        checked={isActive}
+        disabled={ctx.disabled}
+        onChange={() => ctx.setValue(value)}
+      />
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DynamicToggleGroup
+// ---------------------------------------------------------------------------
+
+/**
+ * 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,
+}: 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)}
+    >
+      <div
+        data-slot="dt-group-indicator"
+        className={dynamicToggleStyles.groupIndicator}
+      />
+      {children}
+    </div>
+  );
+}
+
+// Display names
+DynamicToggle.displayName = 'DynamicToggle';
+DynamicToggleOption.displayName = 'DynamicToggleOption';
+DynamicToggleGroup.displayName = 'DynamicToggleGroup';
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+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';