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

@mks2508/mks-ui 0.5.4 → 0.5.8

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 (262) hide show

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

@@ -1,419 +0,0 @@
-<!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/Field/Field.styles.ts DELETED Viewed

@@ -1,47 +0,0 @@
-import { cva } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-/** Visual regions for the Field component family. */
-type FieldSlot =
-  | 'root'
-  | 'set'
-  | 'legend'
-  | 'group'
-  | 'content'
-  | 'label'
-  | 'title'
-  | 'description'
-  | 'separator'
-  | 'error';
-const fieldStyles: StyleSlots<FieldSlot> = {
-  root: 'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
-  set: 'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
-  legend: 'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-  group: 'gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
-  content: 'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
-  label: 'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
-  title: 'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
-  description: 'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-  separator: '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',
-  error: 'text-destructive text-sm font-normal',
-};
-/** CVA variants for the Field root orientation. */
-const fieldVariants = cva(fieldStyles.root, {
-  variants: {
-    orientation: {
-      vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
-      horizontal:
-        'flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-      responsive:
-        'flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-    },
-  },
-  defaultVariants: {
-    orientation: 'vertical',
-  },
-});
-export { fieldStyles, fieldVariants };
-export type { FieldSlot };

package/src/react-ui/ui/Field/Field.types.ts DELETED Viewed

@@ -1,60 +0,0 @@
-import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
-import type { fieldVariants, FieldSlot } from './Field.styles';
-/** Props for the FieldSet component. */
-interface IFieldSetProps extends React.ComponentProps<'fieldset'> {
-  slots?: SlotOverrides<FieldSlot>;
-}
-/** Props for the FieldLegend component. */
-interface IFieldLegendProps extends React.ComponentProps<'legend'> {
-  /** Legend display variant. */
-  variant?: 'legend' | 'label';
-}
-/** Props for the FieldGroup component. */
-type IFieldGroupProps = React.ComponentProps<'div'>;
-/** Props for the Field component. */
-interface IFieldProps
-  extends React.ComponentProps<'div'>,
-    VariantProps<typeof fieldVariants> {
-  slots?: SlotOverrides<FieldSlot>;
-}
-/** Props for the FieldContent component. */
-type IFieldContentProps = React.ComponentProps<'div'>;
-/** Props for the FieldLabel component. */
-type IFieldLabelProps = React.ComponentProps<'label'>;
-/** Props for the FieldTitle component. */
-type IFieldTitleProps = React.ComponentProps<'div'>;
-/** Props for the FieldDescription component. */
-type IFieldDescriptionProps = React.ComponentProps<'p'>;
-/** Props for the FieldSeparator component. */
-interface IFieldSeparatorProps extends React.ComponentProps<'div'> {
-  children?: React.ReactNode;
-}
-/** Props for the FieldError component. */
-interface IFieldErrorProps extends React.ComponentProps<'div'> {
-  /** Array of error objects to display. */
-  errors?: Array<{ message?: string } | undefined>;
-}
-export type {
-  IFieldSetProps,
-  IFieldLegendProps,
-  IFieldGroupProps,
-  IFieldProps,
-  IFieldContentProps,
-  IFieldLabelProps,
-  IFieldTitleProps,
-  IFieldDescriptionProps,
-  IFieldSeparatorProps,
-  IFieldErrorProps,
-};