@mks2508/mks-ui 0.5.4 → 0.5.8

package/dist/react-ui/ui/DynamicToggle/{DynamicToggle-Cm6-VceQ.css → DynamicToggle-DJLwEkHr.css}

@@ -1,5 +1,5 @@
 /**
- * DynamicToggle — CSS state transitions.
+ * DynamicToggle v2 — CSS state transitions.
  *
  * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
  * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
@@ -12,6 +12,8 @@
   --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 ── */
@@ -24,18 +26,9 @@
   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);
+  color: var(--accent-foreground);
   z-index: 2;
 }
 [data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
@@ -49,31 +42,109 @@
   overflow: hidden;
 }
 
-/* ── Group indicator: clip-path reveal ── */
-[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-  pointer-events: none;
+/* ══════════════════════════════════════════════════════════
+ * 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:
-    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));
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
 }
-[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-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
+[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;
 }
 
 /* ══════════════════════════════════════════════════════════
@@ -214,11 +285,11 @@
 }
 
 /* ══════════════════════════════════════════════════════════
- * GROUP LABEL (above/below the pill)
+ * GROUP LABEL / BUBBLE (above or below the pill)
  *
- * Replaces the old "bubble" element. Positioned via CSS grid.
- * In filter/path morph modes, rendered inside GooeyCanvas.
+ * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
  * In none mode, simple CSS-driven show/hide.
+ * bubblePosition: top | bottom (no left/right in v2)
  * ══════════════════════════════════════════════════════════ */
 
 [data-slot="dt-group-label"] {
@@ -233,6 +304,8 @@
   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;
@@ -246,7 +319,7 @@
 }
 
 /* Top position */
-[data-slot="dt-group-label"][data-position="top"] {
+[data-slot="dt-group-label"][data-bubble-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;
@@ -254,29 +327,25 @@
 }
 
 /* Bottom position */
-[data-slot="dt-group-label"][data-position="bottom"] {
+[data-slot="dt-group-label"][data-bubble-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"] {
+/* When group active → group label grows (vertical: top/bottom) */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > 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;
 }
@@ -293,10 +362,6 @@
 }
 
 /* ── 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.css

@@ -1,5 +1,5 @@
 /**
- * DynamicToggle — CSS state transitions.
+ * DynamicToggle v2 — CSS state transitions.
  *
  * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
  * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
@@ -12,6 +12,8 @@
   --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 ── */
@@ -24,18 +26,9 @@
   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);
+  color: var(--accent-foreground);
   z-index: 2;
 }
 [data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
@@ -49,31 +42,109 @@
   overflow: hidden;
 }
 
-/* ── Group indicator: clip-path reveal ── */
-[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-  pointer-events: none;
+/* ══════════════════════════════════════════════════════════
+ * 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:
-    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));
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
 }
-[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-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
+[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;
 }
 
 /* ══════════════════════════════════════════════════════════
@@ -214,11 +285,11 @@
 }
 
 /* ══════════════════════════════════════════════════════════
- * GROUP LABEL (above/below the pill)
+ * GROUP LABEL / BUBBLE (above or below the pill)
  *
- * Replaces the old "bubble" element. Positioned via CSS grid.
- * In filter/path morph modes, rendered inside GooeyCanvas.
+ * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
  * In none mode, simple CSS-driven show/hide.
+ * bubblePosition: top | bottom (no left/right in v2)
  * ══════════════════════════════════════════════════════════ */
 
 [data-slot="dt-group-label"] {
@@ -233,6 +304,8 @@
   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;
@@ -246,7 +319,7 @@
 }
 
 /* Top position */
-[data-slot="dt-group-label"][data-position="top"] {
+[data-slot="dt-group-label"][data-bubble-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;
@@ -254,29 +327,25 @@
 }
 
 /* Bottom position */
-[data-slot="dt-group-label"][data-position="bottom"] {
+[data-slot="dt-group-label"][data-bubble-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"] {
+/* When group active → group label grows (vertical: top/bottom) */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > 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;
 }
@@ -293,10 +362,6 @@
 }
 
 /* ── 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

@@ -29,6 +29,7 @@ export declare const dynamicToggleVariants: (props?: ({
     variant?: "muted" | "default" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     shape?: "square" | "pill" | "rounded" | null | undefined;
+    morph?: "filter" | "path" | "none" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Variant props extracted from CVA */
 export type DynamicToggleVariantProps = VariantProps<typeof dynamicToggleVariants>;

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,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"}
+{"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;;;;;8EAqChC,CAAC;AAEH,uCAAuC;AACvC,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

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

@@ -19,9 +19,9 @@ const dynamicToggleStyles = {
 	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",
+	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-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
+	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",
@@ -54,12 +54,18 @@ const dynamicToggleVariants = cva(dynamicToggleStyles.root, {
 			pill: "rounded-full [--dt-radius:9999px]",
 			rounded: "rounded-xl [--dt-radius:0.75rem]",
 			square: "rounded-md [--dt-radius:0.375rem]"
+		},
+		morph: {
+			none: "",
+			filter: "bg-transparent border-transparent shadow-none overflow-visible",
+			path: "bg-transparent border-transparent"
 		}
 	},
 	defaultVariants: {
 		variant: "default",
 		size: "default",
-		shape: "pill"
+		shape: "pill",
+		morph: "none"
 	}
 });