@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/questionnaire.css

@@ -0,0 +1,188 @@
+/* @auvyx/ui questionnaire | order 51 */
+@layer components {
+  .questionnaire {
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      flex-direction: column;
+      > output {
+        width: fit-content;
+        --tw-numeric-spacing: tabular-nums;
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+        min-block-size: 1lh;
+      }
+      > fieldset {
+        margin: 0;
+        display: grid;
+        min-width: 0;
+        border-style: var(--tw-border-style);
+        border-width: 0px;
+        padding: 0;
+        --tw-outline-style: none;
+        outline-style: none;
+        > legend {
+          float: inline-start;
+          width: 100%;
+          padding: 0;
+          text-wrap: pretty;
+        }
+        > legend + * {
+          clear: both;
+        }
+        > p {
+          margin: 0;
+          text-wrap: pretty;
+        }
+        > label {
+          position: relative;
+          display: flex;
+          cursor: pointer;
+          align-items: flex-start;
+          text-align: start;
+          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+          transition-duration: var(--tw-duration, var(--default-transition-duration));
+          --tw-outline-style: none;
+          outline-style: none;
+          -webkit-user-select: none;
+          user-select: none;
+          min-block-size: 2.75rem;
+          > span {
+            display: flex;
+            min-width: 0;
+            flex: 1;
+            flex-direction: column;
+            --tw-leading: var(--leading-snug);
+            line-height: var(--leading-snug);
+            > small {
+              display: block;
+            }
+          }
+          > kbd {
+            display: inline-flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+          }
+          &:has(> input:disabled) {
+            cursor: not-allowed;
+            opacity: 50%;
+          }
+        }
+      }
+      > footer {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    }
+}
+
+@layer components {
+  .questionnaire {
+      gap: calc(var(--spacing) * 6);
+    }
+  .questionnaire > output {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-muted-foreground);
+    }
+  .questionnaire > fieldset {
+      gap: calc(var(--spacing) * 3);
+    }
+  .questionnaire > fieldset > legend {
+      margin-bottom: calc(var(--spacing) * 2);
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+  .questionnaire > fieldset > p {
+      margin-bottom: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+    }
+  .questionnaire > fieldset > label {
+      gap: calc(var(--spacing) * 3);
+      border-radius: var(--auvyx-r-field);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      background-color: transparent;
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 3.5);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+          }
+        }
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 20%, transparent);
+        }
+      }
+    }
+  .questionnaire > fieldset > label:has(> input:checked) {
+      border-color: var(--color-primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+      background-color: var(--color-muted);
+    }
+  .questionnaire > fieldset > label:has(> input:focus-visible) {
+      border-color: var(--color-ring);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+      }
+    }
+  .questionnaire > fieldset > label:has(> input[aria-invalid='true']) {
+      border-color: var(--color-destructive);
+    }
+  .questionnaire > fieldset > label > input {
+      margin-top: calc(var(--spacing) * 0.5);
+    }
+  .questionnaire > fieldset > label > span {
+      gap: var(--spacing);
+    }
+  .questionnaire > fieldset > label > span > small {
+      color: var(--color-muted-foreground);
+    }
+  .questionnaire > fieldset > label > kbd {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+      border-radius: var(--auvyx-r-control);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      background-color: var(--color-background);
+      font-family: var(--font-mono);
+      font-size: 0.625rem;
+      --tw-leading: 1;
+      line-height: 1;
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-muted-foreground);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  .questionnaire > footer {
+      gap: calc(var(--spacing) * 2);
+      @media (width >= 40rem) {
+        min-height: calc(var(--spacing) * 9);
+      }
+    }
+}

package/dist/ui/radio-group.css

@@ -0,0 +1,115 @@
+/* @auvyx/ui radio-group | order 25 */
+@layer components {
+  .field > input[type='radio'], .input[type='radio'] {
+      position: relative;
+      flex-shrink: 0;
+      appearance: none;
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      --tw-outline-style: none;
+      outline-style: none;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      &:checked:before {
+        position: absolute;
+        top: calc(1 / 2 * 100%);
+        left: calc(1 / 2 * 100%);
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        border-radius: calc(infinity * 1px);
+        --tw-content: '';
+        content: var(--tw-content);
+      }
+    }
+}
+
+@layer components {
+  [role='radiogroup'] {
+      display: grid;
+      gap: calc(var(--spacing) * 3);
+    }
+  .field > input[type='radio'], .input[type='radio'] {
+      display: flex;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border-radius: calc(infinity * 1px);
+      border-color: var(--color-input);
+      &:checked {
+        border-color: var(--color-primary);
+      }
+      &:checked {
+        background-color: var(--color-primary);
+      }
+      &:checked {
+        color: var(--color-primary-foreground);
+      }
+      &:focus-visible {
+        border-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+      &[aria-invalid="true"] {
+        border-color: var(--color-destructive);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &[aria-invalid="true"] {
+        &:checked {
+          border-color: var(--color-primary);
+        }
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &:checked {
+          background-color: var(--color-primary);
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          border-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          --tw-ring-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          }
+        }
+      }
+    }
+  :is(.field > input[type='radio'], .input[type='radio']):checked:before {
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+      background-color: var(--color-primary-foreground);
+    }
+}

package/dist/ui/resizable.css

@@ -0,0 +1,94 @@
+/* @auvyx/ui resizable | order 55 */
+@layer components {
+  .resizable {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+      }
+      > :not([role='separator']) {
+        min-height: 0;
+        min-width: 0;
+        overflow: auto;
+        flex: var(--size, 1) 1 0px;
+      }
+      > [role='separator'] {
+        position: relative;
+        display: flex;
+        flex: none;
+        touch-action: none;
+        align-items: center;
+        justify-content: center;
+        --tw-outline-style: none;
+        outline-style: none;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: col-resize;
+        inline-size: 1px;
+        &::after {
+          position: absolute;
+          inset-block: 0;
+          --tw-content: '';
+          content: var(--tw-content);
+          inset-inline: -0.375rem;
+        }
+        &[data-handle]::before {
+          z-index: 10;
+          --tw-content: '';
+          content: var(--tw-content);
+        }
+      }
+      &[data-orientation='vertical'] > [role='separator'] {
+        cursor: row-resize;
+        inline-size: auto;
+        block-size: 1px;
+        &::after {
+          inset: -0.375rem 0;
+        }
+      }
+      &[data-dragging] {
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: col-resize;
+        > :not([role='separator']) {
+          pointer-events: none;
+        }
+      }
+      &[data-dragging][data-orientation='vertical'] {
+        cursor: row-resize;
+      }
+    }
+}
+
+@layer components {
+  .resizable > [role='separator'] {
+      background-color: var(--color-border);
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-offset-width: 1px;
+        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      }
+    }
+  .resizable > [role='separator'][data-handle]::before {
+      height: calc(var(--spacing) * 6);
+      width: var(--spacing);
+      border-radius: var(--auvyx-r-surface);
+      background-color: var(--color-border);
+    }
+  .resizable[data-orientation='vertical'] > [role='separator'][data-handle]::before {
+      height: var(--spacing);
+      width: calc(var(--spacing) * 6);
+    }
+  .resizable > [role='separator']:is(:hover, [data-active]) {
+      background-color: var(--color-ring);
+    }
+}

package/dist/ui/resizable.js

@@ -0,0 +1,95 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+(() => {
+  // ../elements/src/resizable.js
+  var AuvyxResizable = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this._init = true;
+      this.vertical = this.dataset.orientation === "vertical";
+      this.panels = [...this.children].filter((el) => el.getAttribute("role") !== "separator");
+      this.handles = [...this.children].filter((el) => el.getAttribute("role") === "separator");
+      if (this.panels.length < 2) return;
+      const given = this.panels.map((p) => parseFloat(getComputedStyle(p).getPropertyValue("--size")) || 0);
+      const missing = given.filter((v) => !v).length;
+      const rest = Math.max(0, 100 - given.reduce((a, b) => a + b, 0));
+      this.sizes = given.map((v) => v || (missing ? rest / missing : 0));
+      const sum = this.sizes.reduce((a, b) => a + b, 0) || 1;
+      this.sizes = this.sizes.map((v) => v / sum * 100);
+      this.apply();
+      this.handles.forEach((handle, i) => {
+        handle.setAttribute("aria-orientation", this.vertical ? "horizontal" : "vertical");
+        handle.setAttribute("aria-valuemin", "0");
+        handle.setAttribute("aria-valuemax", "100");
+        if (this.panels[i].id) handle.setAttribute("aria-controls", this.panels[i].id);
+        if (!handle.hasAttribute("tabindex")) handle.tabIndex = 0;
+        handle.addEventListener("pointerdown", (e) => this.startDrag(e, i));
+        handle.addEventListener("keydown", (e) => this.onKey(e, i));
+        handle.addEventListener("dblclick", () => this.resetPair(i));
+      });
+    }
+    minOf(i) {
+      const v = parseFloat(this.panels[i].dataset.min);
+      return Number.isFinite(v) ? v : 10;
+    }
+    maxOf(i) {
+      const v = parseFloat(this.panels[i].dataset.max);
+      return Number.isFinite(v) ? v : 100;
+    }
+    // Move the boundary after panel i so panel i gets `target` percent.
+    setPair(i, target) {
+      const pair = this.sizes[i] + this.sizes[i + 1];
+      const lo = Math.max(this.minOf(i), pair - this.maxOf(i + 1));
+      const hi = Math.min(this.maxOf(i), pair - this.minOf(i + 1));
+      const next = Math.min(hi, Math.max(lo, target));
+      this.sizes[i] = next;
+      this.sizes[i + 1] = pair - next;
+      this.apply();
+    }
+    resetPair(i) {
+      const pair = this.sizes[i] + this.sizes[i + 1];
+      this.setPair(i, pair / 2);
+    }
+    apply() {
+      this.panels.forEach((p, i) => p.style.setProperty("--size", this.sizes[i].toFixed(3)));
+      this.handles?.forEach((h, i) => h.setAttribute("aria-valuenow", String(Math.round(this.sizes[i]))));
+      this.dispatchEvent(new CustomEvent("resize", { detail: { sizes: [...this.sizes] } }));
+    }
+    startDrag(event, i) {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      const handle = event.currentTarget;
+      handle.setPointerCapture(event.pointerId);
+      handle.setAttribute("data-active", "");
+      this.setAttribute("data-dragging", "");
+      const rect = this.getBoundingClientRect();
+      const total = this.vertical ? rect.height : rect.width;
+      const rtl = !this.vertical && getComputedStyle(this).direction === "rtl";
+      const start = this.vertical ? event.clientY : event.clientX;
+      const initial = this.sizes[i];
+      const move = (e) => {
+        const delta = ((this.vertical ? e.clientY : e.clientX) - start) / total * 100;
+        this.setPair(i, initial + (rtl ? -delta : delta));
+      };
+      const end = () => {
+        handle.removeEventListener("pointermove", move);
+        handle.removeAttribute("data-active");
+        this.removeAttribute("data-dragging");
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", end, { once: true });
+      handle.addEventListener("pointercancel", end, { once: true });
+    }
+    onKey(event, i) {
+      const step = event.shiftKey ? 10 : 5;
+      const rtl = !this.vertical && getComputedStyle(this).direction === "rtl";
+      const grow = this.vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+      const shrink = this.vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+      const map = { [grow]: this.sizes[i] + step, [shrink]: this.sizes[i] - step, Home: 0, End: 100, Enter: null };
+      if (!(event.key in map)) return;
+      event.preventDefault();
+      if (event.key === "Enter") this.resetPair(i);
+      else this.setPair(i, map[event.key]);
+    }
+  };
+  if (!customElements.get("auvyx-resizable")) customElements.define("auvyx-resizable", AuvyxResizable);
+})();

package/dist/ui/scroll-area.css

@@ -0,0 +1,43 @@
+/* @auvyx/ui scroll-area | order 29 */
+@layer components {
+  .scrollbar {
+      scrollbar-width: auto;
+      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+      &::-webkit-scrollbar {
+        width: var(--scrollbar-width);
+        height: var(--scrollbar-width);
+      }
+      &::-webkit-scrollbar-track {
+        background: var(--scrollbar-track);
+      }
+      &::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-thumb);
+        border-radius: var(--scrollbar-radius);
+        border: 1px solid transparent;
+        background-clip: padding-box;
+      }
+      &::-webkit-scrollbar-corner {
+        background: var(--scrollbar-track);
+      }
+    }
+  .scrollbar-sm {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+      &::-webkit-scrollbar {
+        width: var(--scrollbar-sm-width);
+        height: var(--scrollbar-sm-width);
+      }
+      &::-webkit-scrollbar-track {
+        background: var(--scrollbar-track);
+      }
+      &::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-thumb);
+        border-radius: var(--scrollbar-radius);
+        border: 1px solid transparent;
+        background-clip: padding-box;
+      }
+      &::-webkit-scrollbar-corner {
+        background: var(--scrollbar-track);
+      }
+    }
+}