@toyu-ui/elements 0.1.0

package/layout-helpers-C2WgKm6F.js

@@ -0,0 +1,171 @@
+const a = new CSSStyleSheet(), n = `
+  @layer reset, tokens, product-theme, components, product-components, utilities, overrides;
+
+  @layer utilities {
+    .ty-flex,
+    tyui-flex {
+      box-sizing: border-box;
+      display: var(--ty-flex-display, flex);
+      flex-direction: var(--ty-flex-direction, row);
+      flex-wrap: var(--ty-flex-wrap, nowrap);
+      align-items: var(--ty-flex-align, stretch);
+      justify-content: var(--ty-flex-justify, flex-start);
+      gap: var(--ty-flex-gap, var(--ty-layout-gap, var(--ty-space-3, 0.75rem)));
+    }
+
+    .ty-cluster,
+    tyui-cluster {
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: var(--ty-cluster-align, center);
+      justify-content: var(--ty-cluster-justify, flex-start);
+      gap:
+        var(--ty-cluster-row-gap, var(--ty-cluster-gap, var(--ty-space-2, 0.5rem)))
+        var(--ty-cluster-gap, var(--ty-space-2, 0.5rem));
+    }
+
+    .ty-grid,
+    tyui-grid {
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(min(100%, var(--ty-grid-min-item-size, 16rem)), 1fr)
+      );
+      align-items: var(--ty-grid-align, stretch);
+      justify-items: var(--ty-grid-justify, stretch);
+      grid-auto-flow: var(--ty-grid-auto-flow, row);
+      gap:
+        var(--ty-grid-row-gap, var(--ty-grid-gap, var(--ty-space-4, 1rem)))
+        var(--ty-grid-gap, var(--ty-space-4, 1rem));
+    }
+
+    .ty-center,
+    tyui-center {
+      box-sizing: content-box;
+      display: var(--ty-center-display, block);
+      margin-inline: auto;
+      max-inline-size: var(--ty-center-measure, var(--ty-layout-content-measure, 65ch));
+      padding-inline: var(--ty-center-gutter, var(--ty-page-gutter, 1rem));
+    }
+
+    tyui-center[intrinsic],
+    .ty-center[data-intrinsic='true'] {
+      --ty-center-display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ty-container,
+    tyui-container {
+      box-sizing: border-box;
+      display: block;
+      inline-size: 100%;
+      max-inline-size: var(--ty-container-max-inline-size, var(--ty-container-wide, 72rem));
+      margin-inline: auto;
+      padding-inline: var(--ty-container-gutter, var(--ty-page-gutter, 1rem));
+    }
+
+    tyui-container[bleed],
+    .ty-container[data-bleed='true'] {
+      max-inline-size: none;
+      padding-inline: 0;
+    }
+
+    .ty-frame,
+    tyui-frame {
+      box-sizing: border-box;
+      aspect-ratio: var(--ty-frame-ratio, 16 / 9);
+      display: block;
+      overflow: hidden;
+    }
+
+    .ty-frame > *,
+    tyui-frame > * {
+      box-sizing: border-box;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    .ty-frame > img,
+    .ty-frame > video,
+    .ty-frame > iframe,
+    .ty-frame > canvas,
+    tyui-frame > img,
+    tyui-frame > video,
+    tyui-frame > iframe,
+    tyui-frame > canvas {
+      object-fit: var(--ty-frame-fit, cover);
+      object-position: var(--ty-frame-position, center);
+    }
+
+    .ty-sidebar,
+    tyui-sidebar {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: var(--ty-sidebar-direction, row);
+      flex-wrap: wrap;
+      align-items: var(--ty-sidebar-align, stretch);
+      gap: var(--ty-sidebar-gap, var(--ty-layout-gap, var(--ty-space-3, 0.75rem)));
+    }
+
+    .ty-sidebar > :first-child,
+    tyui-sidebar > :first-child {
+      flex-basis: var(--ty-sidebar-size, 18rem);
+      flex-grow: 1;
+    }
+
+    .ty-sidebar > :last-child,
+    tyui-sidebar > :last-child {
+      flex-basis: 0;
+      flex-grow: 999;
+      min-inline-size: min(100%, var(--ty-sidebar-content-min-inline-size, 50%));
+    }
+  }
+`;
+a.replaceSync(n);
+let i = !1;
+function o() {
+  i || typeof document > "u" || (document.adoptedStyleSheets = [...document.adoptedStyleSheets, a], i = !0);
+}
+function s(e, r, t) {
+  return r.includes(e) ? e : t;
+}
+function y(e, r, t) {
+  if (typeof t == "boolean") {
+    e.toggleAttribute(r, t);
+    return;
+  }
+  e.setAttribute(r, t);
+}
+function c(e, r) {
+  const t = s(e, ["0", "1", "2", "3", "4"], r);
+  return `var(--ty-space-${t}, ${{
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem"
+  }[t]})`;
+}
+function d(e, r) {
+  const t = e?.trim();
+  return t || r;
+}
+function u(e, r) {
+  const t = e?.trim();
+  return t ? t.replace("/", " / ") : r;
+}
+function f(e, r, t) {
+  e.style.setProperty(r, t);
+}
+export {
+  f as a,
+  c as b,
+  o as i,
+  d as l,
+  s as n,
+  u as r,
+  y as s
+};

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@toyu-ui/elements",
+  "version": "0.1.0",
+  "keywords": [
+    "tanstack-intent"
+  ],
+  "homepage": "https://github.com/jurokapsiar/tyui#readme",
+  "bugs": {
+    "url": "https://github.com/jurokapsiar/tyui/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jurokapsiar/tyui.git",
+    "directory": "libs/elements"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./button": {
+      "types": "./button.d.ts",
+      "default": "./button.js"
+    },
+    "./center": {
+      "types": "./center.d.ts",
+      "default": "./center.js"
+    },
+    "./checkbox": {
+      "types": "./checkbox.d.ts",
+      "default": "./checkbox.js"
+    },
+    "./cluster": {
+      "types": "./cluster.d.ts",
+      "default": "./cluster.js"
+    },
+    "./container": {
+      "types": "./container.d.ts",
+      "default": "./container.js"
+    },
+    "./flex": {
+      "types": "./flex.d.ts",
+      "default": "./flex.js"
+    },
+    "./frame": {
+      "types": "./frame.d.ts",
+      "default": "./frame.js"
+    },
+    "./grid": {
+      "types": "./grid.d.ts",
+      "default": "./grid.js"
+    },
+    "./input": {
+      "types": "./input.d.ts",
+      "default": "./input.js"
+    },
+    "./radio": {
+      "types": "./radio.d.ts",
+      "default": "./radio.js"
+    },
+    "./radio-group": {
+      "types": "./radio-group.d.ts",
+      "default": "./radio-group.js"
+    },
+    "./sidebar": {
+      "types": "./sidebar.d.ts",
+      "default": "./sidebar.js"
+    },
+    "./custom-elements.json": {
+      "default": "./custom-elements.json"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc -p tsconfig.lib.json --noEmit"
+  },
+  "dependencies": {
+    "@toyu-ui/core": "^0.1.0"
+  },
+  "private": false
+}

package/radio/tyui-radio.d.ts

@@ -0,0 +1,21 @@
+export type TyuiRadioLabelPosition = 'after' | 'below';
+export declare class TyuiRadioElement extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get labelPosition(): TyuiRadioLabelPosition;
+    set labelPosition(value: TyuiRadioLabelPosition);
+    get name(): string;
+    set name(value: string);
+    get required(): boolean;
+    set required(value: boolean);
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    focus(options?: FocusOptions): void;
+}

package/radio-group/tyui-radio-group.d.ts

@@ -0,0 +1,28 @@
+export type TyuiRadioGroupLayout = 'vertical' | 'horizontal' | 'horizontal-stacked';
+export type TyuiRadioGroupEventDetail = {
+    value: string;
+};
+export type TyuiRadioGroupEvent = CustomEvent<TyuiRadioGroupEventDetail>;
+export declare class TyuiRadioGroupElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get layout(): TyuiRadioGroupLayout;
+    set layout(value: TyuiRadioGroupLayout);
+    get name(): string;
+    set name(value: string);
+    get required(): boolean;
+    set required(value: boolean);
+    get value(): string;
+    set value(value: string);
+    get validity(): ValidityState | undefined;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+}

package/radio-group.d.ts

@@ -0,0 +1 @@
+export * from './radio-group/tyui-radio-group';

package/radio-group.js

@@ -0,0 +1,234 @@
+const o = new CSSStyleSheet();
+o.replaceSync(`
+  @layer ty.component-base {
+    :host {
+      display: inline-flex;
+      flex-direction: column;
+      gap: var(--ty-radio-group-gap, var(--ty-space-2, 0.5rem));
+      color: var(--ty-radio-group-foreground, var(--ty-color-text, CanvasText));
+      font-family: var(--ty-font-family, inherit);
+      font-size: var(--ty-radio-group-font-size, var(--ty-control-font-size, 0.875rem));
+      line-height: var(--ty-radio-group-line-height, 1.25rem);
+    }
+
+    :host([disabled]) {
+      color: var(--ty-radio-group-disabled-foreground, var(--ty-color-disabled-text, GrayText));
+    }
+
+    [part='label'] {
+      color: var(--ty-radio-group-label-color, currentColor);
+      font-weight: var(--ty-radio-group-label-font-weight, var(--ty-font-weight-regular, 400));
+    }
+
+    [part='items'] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ty-radio-group-gap, var(--ty-space-2, 0.5rem));
+    }
+
+    :host([layout='horizontal']) [part='items'],
+    :host([layout='horizontal-stacked']) [part='items'] {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ty-radio-group-inline-gap, var(--ty-space-4, 1rem));
+    }
+
+    :host([layout='horizontal-stacked']) [part='items'] {
+      align-items: flex-start;
+    }
+
+    @media (forced-colors: active) {
+      :host,
+      [part='label'] {
+        color: CanvasText;
+      }
+
+      :host([disabled]),
+      :host([disabled]) [part='label'] {
+        color: GrayText;
+      }
+    }
+  }
+`);
+const n = document.createElement("template");
+n.innerHTML = `
+  <span part="label"></span>
+  <div part="items"><slot></slot></div>
+`;
+let h = 0, d = 0;
+function u(s) {
+  return s === "horizontal" || s === "horizontal-stacked" ? s : "vertical";
+}
+function l(s, t) {
+  return s.hasAttribute(t);
+}
+class c extends HTMLElement {
+  static formAssociated = !0;
+  static observedAttributes = ["disabled", "label", "layout", "name", "required", "value"];
+  #r;
+  #s;
+  #n;
+  #d = `tyui-radio-group-label-${++h}`;
+  #b = `tyui-radio-group-${++d}`;
+  #h = !1;
+  #e = "";
+  #i = "";
+  #t = "";
+  constructor() {
+    super();
+    const t = this.attachShadow({ mode: "open" });
+    t.adoptedStyleSheets = [o], t.append(n.content.cloneNode(!0));
+    const e = t.querySelector('[part="label"]'), i = t.querySelector("slot");
+    if (!(e instanceof HTMLElement) || !(i instanceof HTMLSlotElement))
+      throw new Error("TyuiRadioGroupElement template is missing expected nodes.");
+    this.#s = e, this.#n = i, this.#r = this.#f(), this.addEventListener("click", this.#m), this.addEventListener("keydown", this.#A), this.#n.addEventListener("slotchange", this.#p);
+  }
+  get disabled() {
+    return l(this, "disabled");
+  }
+  set disabled(t) {
+    this.toggleAttribute("disabled", t);
+  }
+  get label() {
+    return this.#e;
+  }
+  set label(t) {
+    this.#e = String(t), this.#e ? this.setAttribute("label", this.#e) : this.removeAttribute("label");
+  }
+  get layout() {
+    return u(this.getAttribute("layout"));
+  }
+  set layout(t) {
+    this.setAttribute("layout", t);
+  }
+  get name() {
+    return this.#i;
+  }
+  set name(t) {
+    this.#i = String(t), this.#i ? this.setAttribute("name", this.#i) : this.removeAttribute("name");
+  }
+  get required() {
+    return l(this, "required");
+  }
+  set required(t) {
+    this.toggleAttribute("required", t);
+  }
+  get value() {
+    return this.#t;
+  }
+  set value(t) {
+    this.#a(String(t), !1);
+  }
+  get validity() {
+    return this.#r?.validity;
+  }
+  connectedCallback() {
+    this.#g(), this.hasAttribute("role") || this.setAttribute("role", "radiogroup"), this.getAttribute("aria-labelledby") ? this.#h = !0 : this.setAttribute("aria-labelledby", this.#d), this.#y(), this.#l();
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "label" ? this.#e = i ?? "" : t === "name" ? this.#i = i ?? "" : t === "value" && (this.#t = i ?? ""), this.#l();
+  }
+  checkValidity() {
+    return this.#r?.checkValidity() ?? (!this.required || !!this.#t || this.disabled);
+  }
+  reportValidity() {
+    return this.#r?.reportValidity() ?? this.checkValidity();
+  }
+  #f() {
+    if (!("attachInternals" in this)) return null;
+    try {
+      return this.attachInternals();
+    } catch {
+      return null;
+    }
+  }
+  #g() {
+    this.#e = this.getAttribute("label") ?? this.#e, this.#i = this.getAttribute("name") ?? this.#i, this.#t = this.getAttribute("value") ?? this.#t;
+  }
+  #y() {
+    this.hasAttribute("layout") || this.setAttribute("layout", "vertical");
+  }
+  #p = () => {
+    if (!this.#t) {
+      const t = this.#o().find((e) => e.checked);
+      t && (this.#t = t.value);
+    }
+    this.#l();
+  };
+  #m = (t) => {
+    if (this.disabled) return;
+    const e = this.#c(t.composedPath());
+    !e || e.disabled || e.getAttribute("aria-disabled") === "true" || this.#a(e.value, !0);
+  };
+  #A = (t) => {
+    if (this.disabled) return;
+    const e = this.#S();
+    if (e.length === 0) return;
+    const i = this.#c(t.composedPath()), r = i ? e.indexOf(i) : -1;
+    if (t.key === "ArrowDown" || t.key === "ArrowRight") {
+      t.preventDefault();
+      const a = e[r === -1 ? 0 : (r + 1) % e.length];
+      a && this.#u(a);
+      return;
+    }
+    if (t.key === "ArrowUp" || t.key === "ArrowLeft") {
+      t.preventDefault();
+      const a = e[r === -1 ? 0 : (r - 1 + e.length) % e.length];
+      a && this.#u(a);
+      return;
+    }
+    t.key === " " && i && !i.disabled && (t.preventDefault(), this.#a(i.value, !0));
+  };
+  #u(t) {
+    this.#a(t.value, !0), t.focus();
+  }
+  #a(t, e) {
+    t !== this.#t && (this.#t = t, t ? this.setAttribute("value", t) : this.removeAttribute("value"), this.#l(), e && this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.#t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  #l() {
+    this.setAttribute("aria-disabled", String(this.disabled)), this.setAttribute("aria-required", String(this.required)), this.#s.id = this.#d, this.#s.textContent = this.#h ? "" : this.#e, this.#s.toggleAttribute("hidden", this.#h && this.#e.length === 0), this.#v(), this.#k();
+  }
+  #v() {
+    const t = this.#o(), e = this.layout === "horizontal-stacked" ? "below" : "after";
+    for (const i of t)
+      this.#t && i.toggleAttribute("checked", i.value === this.#t), i.toggleAttribute("required", this.required), i.setAttribute("label-position", e), this.#i ? i.setAttribute("name", this.#i) : i.name || i.setAttribute("name", this.#b), this.disabled ? (i.setAttribute("aria-disabled", "true"), i.tabIndex = -1) : i.setAttribute("aria-disabled", String(i.disabled));
+    this.#x(t);
+  }
+  #x(t = this.#o()) {
+    if (this.disabled) {
+      for (const r of t) r.tabIndex = -1;
+      return;
+    }
+    const i = t.find((r) => r.checked && !r.disabled) ?? t.find((r) => !r.disabled);
+    for (const r of t)
+      r.tabIndex = r === i ? 0 : -1;
+  }
+  #k() {
+    if (this.#r?.setFormValue(!this.disabled && this.#t ? this.#t : null), this.required && !this.disabled && !this.#t) {
+      this.#r?.setValidity({ valueMissing: !0 }, "Select an option.");
+      return;
+    }
+    this.#r?.setValidity({});
+  }
+  #o() {
+    return this.#n.assignedElements({ flatten: !0 }).filter((t) => t.tagName === "TYUI-RADIO");
+  }
+  #S() {
+    return this.#o().filter((t) => !t.disabled);
+  }
+  #c(t) {
+    return t.find(
+      (e) => e instanceof Element && e.tagName === "TYUI-RADIO"
+    );
+  }
+}
+export {
+  c as TyuiRadioGroupElement
+};

package/radio.d.ts

@@ -0,0 +1 @@
+export * from './radio/tyui-radio';