@mks2508/mks-ui 0.5.2 → 0.5.7

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

@@ -0,0 +1,376 @@
+/**
+ * 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;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── 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;
+}
+
+/* ── Primary option text ── */
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
+  color: var(--accent-foreground);
+  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;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * 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;
+  }
+}
+
+/* ── 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;
+  }
+}
+
+/* ── 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 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;
+  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;
+}
+
+/* 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/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts

@@ -1,23 +1,35 @@
 /**
- * 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 { type VariantProps } from 'class-variance-authority';
 import type { StyleSlots } from '../../../core/types';
 /** Slot names for DynamicToggle */
-export type DynamicToggleSlot = 'root' | 'track' | 'option' | 'indicator' | 'group' | 'groupLabel' | 'groupIndicator';
+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 declare const dynamicToggleStyles: StyleSlots<DynamicToggleSlot>;
+/**
+ * CVA variants for DynamicToggle root.
+ *
  * @example
  * ```tsx
- * <DynamicToggle slots={{ root: 'w-72', indicator: 'bg-primary' }}>
- *   ...
- * </DynamicToggle>
+ * <DynamicToggle size="sm" variant="outline" shape="rounded">
  * ```
  */
-export declare const dynamicToggleStyles: StyleSlots<DynamicToggleSlot>;
+export declare const dynamicToggleVariants: (props?: ({
+    variant?: "muted" | "default" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    shape?: "square" | "pill" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props extracted from CVA */
+export type DynamicToggleVariantProps = VariantProps<typeof dynamicToggleVariants>;
 //# sourceMappingURL=DynamicToggle.styles.d.ts.map

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicToggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,GACX,OAAO,GACP,YAAY,GACZ,gBAAgB,CAAC;AAErB;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAiC7D,CAAC"}
+{"version":3,"file":"DynamicToggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,YAAY,CAAC;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAa7D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB;;;;8EA8BhC,CAAC;AAEH,uCAAuC;AACvC,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.js

@@ -1,39 +1,67 @@
+import { cva } from "class-variance-authority";
+
 //#region src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts
 /**
+* 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
+*/
+/**
 * 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' }}`.
 */
 const dynamicToggleStyles = {
-	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">
+* ```
+*/
+const dynamicToggleVariants = cva(dynamicToggleStyles.root, {
+	variants: {
+		variant: {
+			default: "bg-card border-border shadow-sm",
+			ghost: "bg-transparent border-transparent",
+			muted: "bg-muted border-muted",
+			outline: "bg-transparent border-border"
+		},
+		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: {
+			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"
+	}
+});
 
 //#endregion
-export { dynamicToggleStyles };
+export { dynamicToggleStyles, dynamicToggleVariants };

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts

@@ -1,13 +1,42 @@
 /**
  * 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';
+/** 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';
+/**
+ * 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 shared between DynamicToggle root and its children.
  */
@@ -20,30 +49,46 @@ 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;
 };
 /**
  * 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 */
@@ -67,21 +112,31 @@ export interface IDynamicToggleOptionProps {
 }
 /**
  * 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/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,wBAAwB;IACvC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"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"}