@mks2508/mks-ui 0.7.0 → 0.8.1

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

@@ -1,369 +0,0 @@
-/**
- * DynamicToggle v2 — 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/react/ui/DynamicToggle/DynamicToggle.module.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 / BUBBLE (above or below the pill)
- *
- * 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"] {
-  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-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;
-  margin-bottom: -1px;
-}
-
-/* Bottom position */
-[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 (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"][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"] [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"] [data-slot="dt-track"] {
-  position: relative;
-  z-index: 1;
-}
-

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

@@ -1,38 +0,0 @@
-/**
- * Tabs CSS Anchor Positioning.
- *
- * Zero-JS position tracking for the sliding indicator using CSS Anchor API.
- * The indicator automatically follows the active tab via anchor positioning.
- */
-
-/* Scope anchors per Tabs instance */
-[data-slot="tabs-list"] {
-  anchor-scope: --tabs-active;
-}
-
-/* Active tab becomes the anchor */
-[data-slot="tabs-tab"][data-active] {
-  anchor-name: --tabs-active;
-}
-
-/* Indicator follows the active anchor */
-[data-slot="tabs-indicator"] {
-  position-anchor: --tabs-active;
-  left: anchor(left);
-  right: anchor(right);
-  transition:
-    top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    right 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    bottom 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Respect reduced motion preference */
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="tabs-indicator"] {
-    transition-duration: 0ms;
-  }
-}
-