@mks2508/mks-ui 0.5.1 → 0.5.4

package/src/react-ui/ui/DynamicToggle/DynamicToggle.css

@@ -0,0 +1,303 @@
+/**
+ * DynamicToggle — CSS state transitions.
+ *
+ * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
+ * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
+ *
+ * @import '@mks2508/mks-ui/dist/react-ui/ui/DynamicToggle/DynamicToggle.css';
+ */
+
+/* ── Variables ── */
+[data-slot="dt-root"] {
+  --dt-dur: 0.22s;
+  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --dt-fade: 0.45;
+}
+
+/* ── Track: explicit row prevents h-full items from overflowing container ── */
+[data-slot="dt-root"] [data-slot="dt-track"] {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+/* ── Top-level option spans 2 grid cols ── */
+[data-slot="dt-root"] [data-slot="dt-track"] > label {
+  grid-column: span 2;
+}
+
+/* ── Main indicator slide ── */
+[data-slot="dt-root"] [data-slot="dt-indicator"] {
+  transition: translate var(--dt-dur) var(--dt-ease);
+  translate: 100% 0;
+}
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  translate: 0 0;
+}
+
+/* ── Primary option text ── */
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
+  color: var(--card);
+  z-index: 2;
+}
+[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
+  color: var(--foreground);
+  opacity: var(--dt-fade);
+}
+
+/* ── Group: container queries ── */
+[data-slot="dt-root"] [data-slot="dt-group"] {
+  container-type: size;
+  overflow: hidden;
+}
+
+/* ── Group indicator: clip-path reveal ── */
+[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+  pointer-events: none;
+  transition:
+    translate var(--dt-dur) var(--dt-ease),
+    clip-path var(--dt-dur) var(--dt-ease),
+    background var(--dt-dur) var(--dt-ease);
+  clip-path: inset(
+    73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px)
+    round var(--dt-radius, 9999px)
+  );
+  translate: -50% 0;
+}
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group-indicator"] {
+  background: transparent;
+}
+[data-slot="dt-root"] [data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
+  background: var(--card);
+  clip-path: inset(0 0 0 0 round var(--dt-radius, 9999px));
+}
+[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"] {
+  translate: -100% 0;
+}
+[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
+  translate: 0 0;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * GROUP COLLAPSED STATE
+ *
+ * ::before = title text (via data-label attr)
+ * ::after  = combined opts text (via data-opts attr)
+ * <label>s = controlled by data-collapsed mode
+ *
+ * 3 modes: title | opts | title-opts (default)
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── ::before — group title ── */
+[data-slot="dt-group"]::before {
+  content: attr(data-label);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -80%;
+  color: var(--foreground);
+  font-size: inherit;
+  font-weight: 500;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+  transition:
+    scale var(--dt-dur) var(--dt-ease),
+    translate var(--dt-dur) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease);
+}
+
+/* ── ::after — combined opts text ── */
+[data-slot="dt-group"]::after {
+  content: attr(data-opts);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% 20%;
+  color: var(--muted-foreground);
+  font-size: 0.85em;
+  opacity: 0.6;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+  transition: opacity var(--dt-dur) var(--dt-ease);
+}
+[data-slot="dt-group"]:not([data-opts])::after {
+  content: none;
+}
+
+/* ── Group labels — transition props ── */
+[data-slot="dt-root"] [data-slot="dt-group"] label {
+  color: var(--muted-foreground);
+  cursor: pointer;
+  z-index: 2;
+  transition:
+    color var(--dt-dur) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease),
+    translate var(--dt-dur) var(--dt-ease);
+}
+[data-slot="dt-root"] [data-slot="dt-group"] label span {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--dt-radius, 9999px);
+  transition: scale var(--dt-dur) var(--dt-ease);
+}
+
+/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="title"]::before {
+  translate: -50% -50%;
+}
+[data-slot="dt-group"][data-collapsed="title"]::after {
+  display: none;
+}
+[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label span {
+  scale: 0.5;
+}
+
+/* ── Collapsed mode: "opts" — only ::after, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="opts"]::before {
+  display: none;
+}
+[data-slot="dt-group"][data-collapsed="opts"]::after {
+  translate: -50% -50%;
+  font-size: inherit;
+  opacity: 0.7;
+}
+[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label span {
+  scale: 0.5;
+}
+
+/* ── Collapsed mode: "title-opts" — WIP: disabled, falls back to "title" behavior ── */
+/* TODO: title-opts needs a redesign — title (::before) and scaled labels overlap
+   at all container sizes. The codepen original morph relied on specific dimensions
+   that don't translate to the component's size variants. Needs a different approach
+   (e.g., crossfade, flex layout, or JS-measured positions). */
+[data-slot="dt-group"][data-collapsed="title-opts"]::after {
+  content: none;
+}
+[data-slot="dt-group"][data-collapsed="title-opts"]::before {
+  translate: -50% -50%;
+}
+[data-slot="dt-group"][data-collapsed="title-opts"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+
+/* ── When group expanded ── */
+[data-slot="dt-group"]:has(input:checked)::before {
+  translate: -50% -250%;
+  scale: 0.85;
+}
+[data-slot="dt-group"]:has(input:checked)::after {
+  opacity: 0;
+}
+[data-slot="dt-group"]:has(input:checked) label {
+  opacity: 0.75;
+  color: var(--muted-foreground);
+  translate: 0 0;
+}
+[data-slot="dt-group"]:has(input:checked) label span {
+  scale: 1;
+}
+[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;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * GROUP LABEL (above/below the pill)
+ *
+ * Replaces the old "bubble" element. Positioned via CSS grid.
+ * In filter/path morph modes, rendered inside GooeyCanvas.
+ * In none mode, simple CSS-driven show/hide.
+ * ══════════════════════════════════════════════════════════ */
+
+[data-slot="dt-group-label"] {
+  display: grid;
+  grid-template-rows: 0fr;
+  left: 20%;
+  right: 20%;
+  transition:
+    grid-template-rows calc(var(--dt-dur) * 1.5) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease);
+  opacity: 0;
+  background: var(--card);
+  border: 1px solid var(--border);
+  z-index: 3;
+}
+[data-slot="dt-group-label"] > span {
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75em;
+  height: calc(var(--dt-h, 38px) * 0.4);
+  box-sizing: border-box;
+}
+
+/* Top position */
+[data-slot="dt-group-label"][data-position="top"] {
+  bottom: 100%;
+  border-radius: calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2) 0 0;
+  border-bottom: none;
+  margin-bottom: -1px;
+}
+
+/* Bottom position */
+[data-slot="dt-group-label"][data-position="bottom"] {
+  top: 100%;
+  border-radius: 0 0 calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2);
+  border-top: none;
+  margin-top: -1px;
+}
+
+/* When group active → group label grows */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
+  padding: 0.35em 0.75em;
+}
+
+/* ── Filter morph mode ── */
+[data-slot="dt-root"][data-morph="filter"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  overflow: visible;
+}
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group-label"] {
+  border: none;
+}
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-track"] {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Filter morph: ::before hides on expand, gooey canvas handles junction ── */
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group"]:has(input:checked)::before {
+  opacity: 0;
+  translate: -50% -80%;
+  scale: 1;
+}
+
+/* ── Path morph mode ── */
+[data-slot="dt-root"][data-morph="path"] {
+  background: transparent;
+  border-color: transparent;
+}
+[data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
+  position: relative;
+  z-index: 1;
+}

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

@@ -0,0 +1,85 @@
+/**
+ * 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-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">
+ * ```
+ */
+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

@@ -0,0 +1,174 @@
+/**
+ * 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;
+}
+
+// ---------------------------------------------------------------------------
+// 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;
+}