npm - @mks2508/mks-ui - Versions diffs - 0.5.2 → 0.5.4 - Mend

@mks2508/mks-ui 0.5.2 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/src/react-ui/ui/DynamicToggle/prototype.html ADDED Viewed

@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DynamicToggle Prototype v6</title>
+<style>
+  :root {
+    --fg: #e2e8f0;
+    --bg: #0f172a;
+    --card: #1e293b;
+    --muted: #64748b;
+    --border: #334155;
+    --duration: 0.22;
+    --drop-off: 0.4;
+    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    min-height: 100vh;
+    display: flex; flex-direction: column; align-items: center;
+    padding: 4rem 1rem; gap: 3rem;
+    background: var(--bg);
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--fg);
+  }
+  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
+  .row { display: flex; gap: 2rem; align-items: end; flex-wrap: wrap; justify-content: center; }
+  /* Debug toggle */
+  #debug-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 999; padding: 0.5rem 1rem; border-radius: 8px; background: #334155; color: #e2e8f0; border: 1px solid #475569; cursor: pointer; font-size: 12px; }
+  /* ================================================================
+   * CONTROL
+   * ================================================================ */
+  .control {
+    --w: 260px;
+    --h: 38px;
+    --radius: 9999px;
+    --font: 0.75rem;
+    --_r: min(var(--radius), calc(var(--h) / 2));
+    position: relative;
+    width: var(--w);
+    height: var(--h);
+    background: var(--card);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    padding: 2px;
+    margin-top: calc(var(--h) * 0.8);
+  }
+  .control__track {
+    display: grid; place-items: center;
+    grid-template-columns: repeat(4, 1fr);
+    width: 100%; height: 100%;
+    position: relative;
+  }
+  .indicator {
+    position: absolute;
+    width: 50%; left: 0; top: 0; bottom: 0;
+    background: var(--fg);
+    border-radius: var(--radius);
+    transition: translate calc(var(--duration) * 1s) var(--ease);
+  }
+  label {
+    display: inline-grid; place-items: center;
+    height: 100%; width: 100%;
+    cursor: pointer; font-size: var(--font);
+    color: var(--fg); z-index: 2; font-weight: 500;
+  }
+  .control__track > label { color: var(--card); }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
+  }
+  .premium {
+    width: 100%; height: 100%;
+    display: grid; position: relative;
+    grid-template-columns: 1fr 1fr;
+    container-type: size;
+  }
+  .premium, .control__track > label:nth-of-type(1) { grid-column: span 2; }
+  .premium::before { display: none; }
+  .premium .indicator {
+    background: var(--fg); left: 50%; top: 0;
+    translate: -50% 0;
+    transition: translate calc(var(--duration) * 1s) var(--ease),
+                clip-path calc(var(--duration) * 1s) var(--ease),
+                background calc(var(--duration) * 1s) var(--ease);
+    clip-path: inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round var(--radius));
+  }
+  .premium label span {
+    display: grid; place-items: center; height: 100%; width: 100%;
+    transition: scale calc(var(--duration) * 1s) var(--ease);
+  }
+  .premium label:nth-of-type(1) span { scale: 0.75; transform-origin: 150% 150%; border-radius: var(--radius); }
+  .premium label:nth-of-type(2) span { scale: 0.75; transform-origin: -65% 150%; border-radius: var(--radius); }
+  .premium label {
+    color: var(--muted);
+    transition: color calc(var(--duration) * 1s) var(--ease), opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .control__track:has(> :checked) > label { color: var(--card); }
+  .control__track:not(:has(> :checked)) > label { color: var(--fg); opacity: var(--drop-off); }
+  .control__track:not(:has(> :checked)) > .indicator { translate: 100% 0; }
+  .control__track:has(> :checked) .premium .indicator { background: var(--muted); }
+  .control__track:has(> :checked) .premium label { color: var(--muted); }
+  .premium:has(:checked) label span { scale: 1; }
+  .premium:has(:checked) .indicator { background: var(--card); clip-path: inset(0 0 0 0 round var(--radius)); }
+  .premium:has(:checked) label { color: var(--muted); opacity: 0.75; }
+  .premium:has(:nth-of-type(1):checked) label:nth-of-type(1),
+  .premium:has(:nth-of-type(2):checked) label:nth-of-type(2) { color: var(--fg); opacity: 1; }
+  .premium:has(:nth-of-type(1):checked) .indicator { translate: -100% 0; }
+  .premium:has(:nth-of-type(2):checked) .indicator { translate: 0 0; }
+  /* ================================================================
+   * BUBBLE — full width, ears at bottom corners
+   * Ears positioned at the junction line, curving inward
+   * ================================================================ */
+  .bubble {
+    position: absolute;
+    left: var(--_r);
+    right: var(--_r);
+    bottom: 100%;
+    margin-bottom: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-bottom: none;
+    border-radius: calc(var(--_r) * 0.4) calc(var(--_r) * 0.4) 0 0;
+    font-size: var(--font);
+    font-weight: 500;
+    color: var(--fg);
+    white-space: nowrap;
+    pointer-events: none;
+    height: 0;
+    padding: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition:
+      height calc(var(--duration) * 1.5s) var(--ease),
+      padding calc(var(--duration) * 1.5s) var(--ease),
+      opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  /*
+   * Concave ears — positioned BELOW the bubble, extending into the
+   * pill's border-radius corner area. The transparent quarter-circle
+   * reveals the page bg, creating the concave junction.
+   *
+   * All positions adjustable via --ear-* CSS vars (control panel).
+   */
+  .bubble::before,
+  .bubble::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-5px + var(--ear-ly, 0px));
+    width: var(--_r);
+    height: var(--_r);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .bubble::before {
+    left: calc(var(--_r) * -1 + var(--ear-lx, 0px));
+    background: radial-gradient(
+      circle at var(--ear-co-l, 0% 0%),
+      transparent calc(var(--_r) - 1.5px),
+      var(--border) calc(var(--_r) - 0.5px),
+      var(--card) var(--_r)
+    );
+  }
+  .bubble::after {
+    right: calc(var(--_r) * -1 + var(--ear-rx, 0px));
+    background: radial-gradient(
+      circle at var(--ear-co-r, 100% 0%),
+      transparent calc(var(--_r) - 1.5px),
+      var(--border) calc(var(--_r) - 0.5px),
+      var(--card) var(--_r)
+    );
+  }
+  .control:has(.premium :checked) .bubble::before,
+  .control:has(.premium :checked) .bubble::after {
+    opacity: 1;
+  }
+  /* DEBUG: show ear boundaries */
+  [data-debug="true"] .bubble { outline: 2px dashed red; }
+  [data-debug="true"] .bubble::before { opacity: 1 !important; outline: 1px dashed cyan; }
+  [data-debug="true"] .bubble::after { opacity: 1 !important; outline: 1px dashed magenta; }
+  /* Active: bubble grows + ears show */
+  .control:has(.premium :checked) .bubble {
+    height: calc(var(--h) * 0.7);
+    padding: 0 0.75em;
+    opacity: 1;
+    overflow: visible;
+  }
+  .control:has(.premium :checked) .bubble::before,
+  .control:has(.premium :checked) .bubble::after {
+    opacity: 1;
+  }
+  /* SIZES */
+  .control.xs  { --w: 170px; --h: 26px; --font: 9px; }
+  .control.sm  { --w: 210px; --h: 30px; --font: 10px; }
+  .control.lg  { --w: 320px; --h: 44px; --font: 14px; }
+  .control.xl  { --w: 400px; --h: 52px; --font: 16px; }
+  /* SHAPES */
+  .control.rounded { --radius: 12px; }
+  .control.square  { --radius: 6px; }
+</style>
+</head>
+<body>
+<div id="controls" style="position:fixed;top:1rem;right:1rem;z-index:999;background:#1e293b;border:1px solid #475569;border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:0.5rem;font-size:11px;color:#94a3b8;min-width:280px;">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
+    <strong style="color:#e2e8f0">Ear Controls</strong>
+    <button onclick="if(document.body.dataset.debug==='true'){document.body.dataset.debug='false'}else{document.body.dataset.debug='true'}" style="padding:2px 8px;border-radius:4px;background:#334155;color:#e2e8f0;border:1px solid #475569;cursor:pointer;font-size:10px">Debug Colors</button>
+  </div>
+  <label>Left X: <span id="v-lx">0</span>px
+    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-lx',this.value+'px');document.getElementById('v-lx').textContent=this.value" style="width:100%">
+  </label>
+  <label>Left Y (bottom offset): <span id="v-ly">0</span>
+    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-ly',this.value+'px');document.getElementById('v-ly').textContent=this.value" style="width:100%">
+  </label>
+  <label>Right X: <span id="v-rx">0</span>px
+    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-rx',this.value+'px');document.getElementById('v-rx').textContent=this.value" style="width:100%">
+  </label>
+  <label>Right Y (bottom offset): <span id="v-ry">0</span>
+    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-ry',this.value+'px');document.getElementById('v-ry').textContent=this.value" style="width:100%">
+  </label>
+  <div style="margin-top:0.25rem;border-top:1px solid #334155;padding-top:0.25rem">
+    <strong style="color:#e2e8f0;font-size:10px">Quick: Both Y</strong>
+  </div>
+  <label>Both Y offset: <span id="v-by">0</span>
+    <input type="range" min="-50" max="50" value="0" oninput="var v=this.value+'px';document.documentElement.style.setProperty('--ear-ly',v);document.documentElement.style.setProperty('--ear-ry',v);document.getElementById('v-by').textContent=this.value;document.getElementById('v-ly').textContent=this.value;document.getElementById('v-ry').textContent=this.value" style="width:100%">
+  </label>
+  <label>Circle Origin Left: <span id="v-co1">0% 0%</span>
+    <select onchange="document.documentElement.style.setProperty('--ear-co-l',this.value);document.getElementById('v-co1').textContent=this.value" style="width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #475569;border-radius:4px;padding:2px">
+      <option value="0% 0%">0% 0% (top-left)</option>
+      <option value="100% 0%">100% 0% (top-right)</option>
+      <option value="100% 100%">100% 100% (bottom-right)</option>
+      <option value="0% 100%">0% 100% (bottom-left)</option>
+      <option value="50% 50%">50% 50% (center)</option>
+    </select>
+  </label>
+  <label>Circle Origin Right: <span id="v-co2">100% 0%</span>
+    <select onchange="document.documentElement.style.setProperty('--ear-co-r',this.value);document.getElementById('v-co2').textContent=this.value" style="width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #475569;border-radius:4px;padding:2px">
+      <option value="100% 0%">100% 0% (top-right)</option>
+      <option value="0% 0%">0% 0% (top-left)</option>
+      <option value="0% 100%">0% 100% (bottom-left)</option>
+      <option value="100% 100%">100% 100% (bottom-right)</option>
+      <option value="50% 50%">50% 50% (center)</option>
+    </select>
+  </label>
+  <div style="margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid #334155;font-size:10px;color:#64748b" id="css-out"></div>
+  <button onclick="
+    var s=getComputedStyle(document.documentElement);
+    document.getElementById('css-out').textContent=
+      'left:'+s.getPropertyValue('--ear-lx')+' bottom:'+s.getPropertyValue('--ear-ly')+
+      ' | right:'+s.getPropertyValue('--ear-rx')+' bottom:'+s.getPropertyValue('--ear-ry')+
+      ' | size:'+s.getPropertyValue('--ear-pct')+'% | L-origin:'+s.getPropertyValue('--ear-co-l')+
+      ' | R-origin:'+s.getPropertyValue('--ear-co-r');
+  " style="padding:4px 8px;border-radius:4px;background:#334155;color:#e2e8f0;border:1px solid #475569;cursor:pointer;font-size:10px">Copy Current Values</button>
+</div>
+<h3>All Sizes — Pill</h3>
+<div class="row">
+  <div><h3>XS</h3>
+    <div class="control xs">
+      <div class="bubble">Changes</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="xs-a">Tree</label><input class="sr-only" type="radio" name="xs" id="xs-a">
+        <div class="premium"><div class="indicator"></div>
+          <label for="xs-b"><span>Flat</span></label><input class="sr-only" type="radio" name="xs" id="xs-b" checked>
+          <label for="xs-c"><span>Grp</span></label><input class="sr-only" type="radio" name="xs" id="xs-c">
+        </div></div></div></div>
+  <div><h3>SM</h3>
+    <div class="control sm">
+      <div class="bubble">Changes</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="sm-a">Tree</label><input class="sr-only" type="radio" name="sm" id="sm-a">
+        <div class="premium"><div class="indicator"></div>
+          <label for="sm-b"><span>Flat</span></label><input class="sr-only" type="radio" name="sm" id="sm-b" checked>
+          <label for="sm-c"><span>Grp</span></label><input class="sr-only" type="radio" name="sm" id="sm-c">
+        </div></div></div></div>
+  <div><h3>Default</h3>
+    <div class="control">
+      <div class="bubble">Premium</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="df-a">Free</label><input class="sr-only" type="radio" name="df" id="df-a">
+        <div class="premium"><div class="indicator"></div>
+          <label for="df-b"><span>Solo</span></label><input class="sr-only" type="radio" name="df" id="df-b" checked>
+          <label for="df-c"><span>Team</span></label><input class="sr-only" type="radio" name="df" id="df-c">
+        </div></div></div></div>
+  <div><h3>LG</h3>
+    <div class="control lg">
+      <div class="bubble">Billing</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="lg-a">Annual</label><input class="sr-only" type="radio" name="lg" id="lg-a">
+        <div class="premium"><div class="indicator"></div>
+          <label for="lg-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="lg" id="lg-b" checked>
+          <label for="lg-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="lg" id="lg-c">
+        </div></div></div></div>
+  <div><h3>XL</h3>
+    <div class="control xl">
+      <div class="bubble">Enterprise</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="xl-a">Standard</label><input class="sr-only" type="radio" name="xl" id="xl-a">
+        <div class="premium"><div class="indicator"></div>
+          <label for="xl-b"><span>Business</span></label><input class="sr-only" type="radio" name="xl" id="xl-b" checked>
+          <label for="xl-c"><span>Custom</span></label><input class="sr-only" type="radio" name="xl" id="xl-c">
+        </div></div></div></div>
+</div>
+<h3>Rounded</h3>
+<div class="row">
+  <div class="control sm rounded">
+    <div class="bubble">Mode</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="r1-a">Off</label><input class="sr-only" type="radio" name="r1" id="r1-a">
+      <div class="premium"><div class="indicator"></div>
+        <label for="r1-b"><span>Auto</span></label><input class="sr-only" type="radio" name="r1" id="r1-b" checked>
+        <label for="r1-c"><span>Manual</span></label><input class="sr-only" type="radio" name="r1" id="r1-c">
+      </div></div></div>
+  <div class="control rounded">
+    <div class="bubble">Theme</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="r2-a">System</label><input class="sr-only" type="radio" name="r2" id="r2-a">
+      <div class="premium"><div class="indicator"></div>
+        <label for="r2-b"><span>Light</span></label><input class="sr-only" type="radio" name="r2" id="r2-b" checked>
+        <label for="r2-c"><span>Dark</span></label><input class="sr-only" type="radio" name="r2" id="r2-c">
+      </div></div></div>
+  <div class="control lg rounded">
+    <div class="bubble">Advanced</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="r3-a">Basic</label><input class="sr-only" type="radio" name="r3" id="r3-a">
+      <div class="premium"><div class="indicator"></div>
+        <label for="r3-b"><span>Pro</span></label><input class="sr-only" type="radio" name="r3" id="r3-b" checked>
+        <label for="r3-c"><span>Expert</span></label><input class="sr-only" type="radio" name="r3" id="r3-c">
+      </div></div></div>
+</div>
+<h3>Square</h3>
+<div class="row">
+  <div class="control sm square">
+    <div class="bubble">Group</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="sq1-a">A</label><input class="sr-only" type="radio" name="sq1" id="sq1-a">
+      <div class="premium"><div class="indicator"></div>
+        <label for="sq1-b"><span>B</span></label><input class="sr-only" type="radio" name="sq1" id="sq1-b" checked>
+        <label for="sq1-c"><span>C</span></label><input class="sr-only" type="radio" name="sq1" id="sq1-c">
+      </div></div></div>
+  <div class="control square">
+    <div class="bubble">Output</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="sq2-a">Input</label><input class="sr-only" type="radio" name="sq2" id="sq2-a">
+      <div class="premium"><div class="indicator"></div>
+        <label for="sq2-b"><span>JSON</span></label><input class="sr-only" type="radio" name="sq2" id="sq2-b" checked>
+        <label for="sq2-c"><span>XML</span></label><input class="sr-only" type="radio" name="sq2" id="sq2-c">
+      </div></div></div>
+  <div class="control lg square">
+    <div class="bubble">Target</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="sq3-a">Source</label><input class="sr-only" type="radio" name="sq3" id="sq3-a">
+      <div class="premium"><div class="indicator"></div>
+        <label for="sq3-b"><span>Dev</span></label><input class="sr-only" type="radio" name="sq3" id="sq3-b" checked>
+        <label for="sq3-c"><span>Prod</span></label><input class="sr-only" type="radio" name="sq3" id="sq3-c">
+      </div></div></div>
+</div>
+<h3>Collapsed (click left option)</h3>
+<div class="row">
+  <div class="control">
+    <div class="bubble">Premium</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="ps-a">Free</label><input class="sr-only" type="radio" name="ps" id="ps-a" checked>
+      <div class="premium"><div class="indicator"></div>
+        <label for="ps-b"><span>Solo</span></label><input class="sr-only" type="radio" name="ps" id="ps-b">
+        <label for="ps-c"><span>Team</span></label><input class="sr-only" type="radio" name="ps" id="ps-c">
+      </div></div></div>
+  <div class="control rounded">
+    <div class="bubble">Premium</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="ps2-a">Free</label><input class="sr-only" type="radio" name="ps2" id="ps2-a" checked>
+      <div class="premium"><div class="indicator"></div>
+        <label for="ps2-b"><span>Solo</span></label><input class="sr-only" type="radio" name="ps2" id="ps2-b">
+        <label for="ps2-c"><span>Team</span></label><input class="sr-only" type="radio" name="ps2" id="ps2-c">
+      </div></div></div>
+  <div class="control square">
+    <div class="bubble">Premium</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="ps3-a">Free</label><input class="sr-only" type="radio" name="ps3" id="ps3-a" checked>
+      <div class="premium"><div class="indicator"></div>
+        <label for="ps3-b"><span>Solo</span></label><input class="sr-only" type="radio" name="ps3" id="ps3-b">
+        <label for="ps3-c"><span>Team</span></label><input class="sr-only" type="radio" name="ps3" id="ps3-c">
+      </div></div></div>
+</div>
+</body>
+</html>

package/src/react-ui/ui/Switch/index.tsx CHANGED Viewed

@@ -107,7 +107,7 @@ function Switch({
         defaultChecked={defaultChecked}
         checked={checked}
         onCheckedChange={setIsChecked}
-        nativeButton={nativeButton}
+        nativeButton={nativeButton ?? true}
         disabled={disabled}
         readOnly={readOnly}
         required={required}

/package/dist/react-ui/blocks/Terminal/panel/{terminal-filter-dropdown.module-DAcl_XQZ.css → terminal-filter-dropdown.module-C6oDcFBS.css} RENAMED Viewed

File without changes

/package/dist/react-ui/blocks/Terminal/panel/{terminal-session-tabs.module-DNAop5e3.css → terminal-session-tabs.module-D_-sgyza.css} RENAMED Viewed

File without changes

/package/dist/react-ui/components/MorphingPopover/{morphing-popover.module-BJrjXisF.css → morphing-popover.module-B1ftlaYj.css} RENAMED Viewed

File without changes