@mks2508/mks-ui 0.5.7 → 0.5.8

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

@@ -1,85 +0,0 @@
-/**
- * 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
- */
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-
-/** Slot names for DynamicToggle */
-export type DynamicToggleSlot =
-  | 'root'
-  | 'track'
-  | 'option'
-  | 'indicator'
-  | 'group'
-  | 'groupIndicator'
-  | 'groupLabel';
-
-/**
- * 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' }}`.
- */
-export const dynamicToggleStyles: StyleSlots<DynamicToggleSlot> = {
-  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-accent 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-accent 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">
- * ```
- */
-export const dynamicToggleVariants = cva(dynamicToggleStyles.root, {
-  variants: {
-    /** Visual variant — background and border */
-    variant: {
-      default: 'bg-card border-border shadow-sm',
-      ghost: 'bg-transparent border-transparent',
-      muted: 'bg-muted border-muted',
-      outline: 'bg-transparent border-border',
-    },
-    /**
-     * Size — height, width, and font size.
-     * Width is required for the 50% indicator and cqh clip-path.
-     */
-    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 — border radius propagated to indicators via --dt-radius */
-    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',
-  },
-});
-
-/** Variant props extracted from CVA */
-export type DynamicToggleVariantProps = VariantProps<typeof dynamicToggleVariants>;

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

@@ -1,180 +0,0 @@
-/**
- * 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';
-
-// ---------------------------------------------------------------------------
-// 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;
-  /** 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;
-}
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-/**
- * 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;
-};
-
-// ---------------------------------------------------------------------------
-// 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}
- *   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;
-}
-
-// ---------------------------------------------------------------------------
-// Option
-// ---------------------------------------------------------------------------
-
-/**
- * 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;
-}
-
-// ---------------------------------------------------------------------------
-// Group
-// ---------------------------------------------------------------------------
-
-/**
- * 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;
-}

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

@@ -1,316 +0,0 @@
-'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,
-};
-
-const SIZE_WIDTH_PX: Record<string, number> = {
-  sm: 210,
-  default: 260,
-  lg: 320,
-};
-
-const SHAPE_RADIUS: Record<string, number> = {
-  pill: 9999,
-  rounded: 12,
-  square: 6,
-};
-
-// ---------------------------------------------------------------------------
-// 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` }),
-    ...(config?.indicatorDuration && { '--dt-indicator-dur': `${config.indicatorDuration}s` }),
-    ...(config?.indicatorEasing && { '--dt-indicator-ease': config.indicatorEasing }),
-  } as React.CSSProperties;
-  const hasStyle = Object.keys(style).length > 0;
-
-  // 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-indicator={config?.forceTranslateIndicator ? 'translate' : undefined}
-        data-group-active={groupActive || undefined}
-        data-disabled={disabled || undefined}
-        role="radiogroup"
-        aria-label={ariaLabel}
-        style={hasStyle ? style : undefined}
-        className={cn(dynamicToggleVariants({ variant, size, shape }), slots?.root, className)}
-      >
-        {/* Filter morph: GooeyCanvas with SVG rects (Safari-safe) */}
-        {effectiveMorphMode === 'filter' && (
-          <>
-            <GooeyCanvas
-              height={heightPx}
-              width={SIZE_WIDTH_PX[size ?? 'default'] ?? 260}
-              radius={SHAPE_RADIUS[shape ?? 'pill'] ?? 9999}
-              expanded={groupActive}
-            />
-            {/* Group label text — outside the filtered canvas */}
-            {groupLabelElement}
-          </>
-        )}
-
-        {/* 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';