@mks2508/mks-ui 0.5.2 → 0.5.7

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

@@ -1,150 +1,376 @@
 /**
- * DynamicToggle — CSS-only animated transitions.
+ * DynamicToggle — CSS state transitions.
  *
- * Ported from @jh3yy codepen. All colors via CSS variables (semantic tokens).
- * Uses :has(:checked) for state-driven animation.
- * container-type: size on group for cqh units in clip-path.
+ * 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';
  */
 
-:root {
-  --dt-duration: 0.22s;
+/* ── Variables ── */
+[data-slot="dt-root"] {
+  --dt-dur: 0.22s;
   --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-  --dt-drop-off: 0.45;
+  --dt-fade: 0.45;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* ── Track layout ── */
-[data-slot="dt-track"] {
-  grid-template-columns: repeat(4, 1fr);
+/* ── Track: explicit row prevents h-full items from overflowing container ── */
+[data-slot="dt-root"] [data-slot="dt-track"] {
+  grid-template-rows: minmax(0, 1fr);
 }
 
-[data-slot="dt-track"] > label:first-of-type,
-[data-slot="dt-group"] {
+/* ── 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-indicator"] {
-  transition: translate var(--dt-duration) var(--dt-ease);
+/* ── Primary option text ── */
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
+  color: var(--accent-foreground);
+  z-index: 2;
 }
-
-/* When primary (non-group) is checked → indicator on left */
-[data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-  translate: 0 0;
+[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
+  color: var(--foreground);
+  opacity: var(--dt-fade);
 }
 
-/* When nothing in track is checked → group is active → indicator slides right */
-[data-slot="dt-track"]:not(:has(> input:checked)) [data-slot="dt-indicator"] {
-  translate: 100% 0;
+/* ── Group: container queries ── */
+[data-slot="dt-root"] [data-slot="dt-group"] {
+  container-type: size;
+  overflow: hidden;
 }
 
-/* ── Primary option text ── */
-[data-slot="dt-track"]:has(> input:checked) > label {
-  color: var(--card);
+/* ══════════════════════════════════════════════════════════
+ * INDICATOR POSITIONING
+ *
+ * Modern: CSS Anchor Positioning — indicator follows active option
+ * Fallback: translate-based positioning for older browsers
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── Anchor-based indicator (requires full anchor API) ── */
+@supports (anchor-scope: all) {
+  /* Scope anchors per toggle instance */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) {
+    anchor-scope: --dt-active;
+  }
+
+  /* Active option becomes the anchor via native :checked */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+
+  /* Single unified indicator: morphs from full-width to half-width */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
+    position-anchor: --dt-active;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    translate: none;
+    width: auto;
+    transition:
+      top var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease),
+      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
+      left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+
+  /* Hide the group indicator — unified indicator handles everything */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
+    display: none;
+  }
 }
 
-[data-slot="dt-track"]:not(:has(> input:checked)) > label {
-  color: var(--foreground);
-  opacity: var(--dt-drop-off);
+/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
+@supports not (anchor-scope: all) {
+  /* Unified indicator: left/right transition morphs width + position */
+  [data-slot="dt-root"] [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 0;
+    width: auto;
+    translate: none;
+    transition:
+      left var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  /* Top-level checked: indicator covers left half */
+  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+    left: 0;
+    right: 50%;
+  }
+  /* Group option 1 checked: indicator at 3rd quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 25%;
+  }
+  /* Group option 2 checked: indicator at 4th quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+    left: 75%;
+    right: 0;
+  }
+  /* Hide group indicator — unified indicator handles everything */
+  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+    display: none;
+  }
 }
 
-/* ── Group container ── */
-[data-slot="dt-group"] {
-  container-type: size;
-  grid-template-columns: 1fr 1fr;
+/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 0;
+  width: auto;
+  translate: none;
+  transition:
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 25%;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+  left: 75%;
+  right: 0;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
+  display: none;
 }
 
-/* ── Group collapsed label ("Changes") ── */
-[data-slot="dt-group-label"] {
+/* ══════════════════════════════════════════════════════════
+ * 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%;
-  transition: translate var(--dt-duration) var(--dt-ease),
-              scale var(--dt-duration) var(--dt-ease);
+  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);
 }
 
-/* When group is active → label moves up and shrinks */
-[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-label"] {
-  translate: -50% -250%;
-  scale: 0.85;
+/* ── ::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);
 }
-
-/* ── Group internal indicator ── */
-[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);
-  /* Collapsed: clip to tiny pill in center */
-  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"]:not([data-opts])::after {
+  content: none;
 }
 
-/* When group is active → indicator expands and positions */
-[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
-  background: var(--card);
-  clip-path: inset(0 0 0 0 round 100px);
+/* ── 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);
 }
-
-/* First sub-option checked → indicator left */
-[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"] 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);
 }
 
-/* Second sub-option checked → indicator right */
-[data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
+/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="title"]::before {
+  translate: -50% -50%;
 }
-
-/* ── Group option labels ── */
-[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"][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;
 }
 
-[data-slot="dt-group"] label span {
-  transition: scale var(--dt-duration) var(--dt-ease);
+/* ── 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;
 }
 
-/* When group collapsed: hide sub-option labels */
-[data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group"] label {
-  color: var(--muted-foreground);
+/* ── 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 active: show labels, highlight active one */
+/* ── 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 {
-  color: var(--muted-foreground);
   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;
 }
 
-/* Sub-option label scale animation */
-[data-slot="dt-group"] label:nth-of-type(1) span {
-  scale: 0.75;
-  transform-origin: 150% 150%;
+/* ══════════════════════════════════════════════════════════
+ * 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;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+[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;
 }
 
-[data-slot="dt-group"] label:nth-of-type(2) span {
-  scale: 0.75;
-  transform-origin: -65% 150%;
+/* 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;
 }
 
-[data-slot="dt-group"]:has(input:checked) label span {
+/* 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;
 }
 
-/* ── Screen reader only (hidden radios) ── */
-[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;
+/* ── 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

@@ -1,12 +1,13 @@
 /**
- * DynamicToggle style slots and types.
+ * DynamicToggle style slots + CVA variants.
  *
- * Uses semantic CSS variables for all colors.
- * Animation handled in DynamicToggle.css (clip-path, transitions).
+ * 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 */
@@ -16,50 +17,69 @@ export type DynamicToggleSlot =
   | 'option'
   | 'indicator'
   | 'group'
-  | 'groupLabel'
-  | 'groupIndicator';
+  | 'groupIndicator'
+  | 'groupLabel';
 
 /**
  * Default styles for each DynamicToggle slot.
  *
- * @example
- * ```tsx
- * <DynamicToggle slots={{ root: 'w-72', indicator: 'bg-primary' }}>
- *   ...
- * </DynamicToggle>
- * ```
+ * 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 rounded-full border border-border bg-card',
-    'p-[2px] select-none',
-  ].join(' '),
-  track: [
-    'relative grid place-items-center',
-    'w-full h-full',
-  ].join(' '),
-  option: [
-    'inline-grid place-items-center cursor-pointer',
-    'text-xs font-medium z-[2] h-full w-full',
-    'transition-[color,opacity] duration-[220ms]',
-  ].join(' '),
-  indicator: [
-    'absolute w-1/2 left-0 top-0 bottom-0',
-    'bg-foreground rounded-full',
-    'pointer-events-none z-0',
-  ].join(' '),
-  group: [
-    'relative w-full h-full grid',
-    'border border-transparent',
-  ].join(' '),
+  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 left-1/2 top-1/2 z-[2]',
-    'text-xs font-medium text-foreground',
+    'absolute',
+    'flex items-center justify-center',
+    'text-muted-foreground font-medium whitespace-nowrap',
     'pointer-events-none',
   ].join(' '),
-  groupIndicator: [
-    'absolute left-1/2 top-0 bottom-0',
-    'bg-foreground rounded-full',
-    'pointer-events-none z-0',
-  ].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>;