@realmorg/ui 0.0.0-stage → 2.0.0-alpha.2

package/components/input-group.html

@@ -0,0 +1,75 @@
+<custom-element name="ui-input-group" form-associated delegates-focus>
+  <script>
+    defineProps({
+      value: prop.string().default(""),
+      type: prop.enum(["text", "email", "password", "number", "search", "tel", "url"]).default("text"),
+      placeholder: prop.string(),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      height: calc(var(--spacing) * 9);
+      box-sizing: border-box;
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-xs);
+      transition: box-shadow var(--default-transition-duration);
+    }
+    :host(:focus-within) {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 calc(var(--spacing) * 3);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      outline: none;
+    }
+    input::placeholder {
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <slot></slot>
+  <input ref="control" part="input" _type="@type" _value="@value" _placeholder="@placeholder" _disabled="@disabled" _required="@required" _aria-label="@label">
+</custom-element>
+
+<custom-element name="ui-input-group-addon">
+  <style>
+    :host {
+      display: flex;
+      order: -1;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      height: 100%;
+      padding-inline-start: calc(var(--spacing) * 3);
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+      cursor: text;
+      user-select: none;
+    }
+    :host(:state(attr-align-is-inline-end)) {
+      order: 1;
+      padding-inline: 0 calc(var(--spacing) * 3);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/input-otp.html

@@ -0,0 +1,139 @@
+<custom-element name="ui-input-otp" form-associated>
+  <script>
+    const props = defineProps({
+      value: prop.string().default(""),
+      length: prop.number().int().min(1).max(12).default(6),
+      pattern: prop.string().default("[0-9]"),
+      separator: prop.number().int().min(0).default(0),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+    });
+
+    const otp = useState({
+      get slots() {
+        return Array.from({ length: props.length }, (_, index) => ({
+          index,
+          char: props.value[index] ?? "",
+          gap: props.separator > 0 && index > 0 && index % props.separator === 0,
+          label: `Character ${index + 1} of ${props.length}`,
+        }));
+      },
+      get complete() {
+        return props.value.length === props.length;
+      },
+    });
+
+    const KEYS = { ArrowLeft: -1, ArrowRight: 1 };
+
+    function boxes() {
+      return [...refs.group.querySelectorAll("input")];
+    }
+
+    function accept(text) {
+      const matcher = new RegExp(`^${props.pattern}$`);
+      return [...text].filter((char) => matcher.test(char)).join("");
+    }
+
+    async function write(start, text) {
+      const chars = [...props.value.padEnd(start, " ")];
+      [...accept(text)].forEach((char, offset) => {
+        chars[start + offset] = char;
+      });
+      props.value = chars.join("").slice(0, props.length).trimEnd();
+      dispatch("change");
+      if (otp.complete) dispatch("complete", { value: props.value });
+      await tick();
+      boxes()[Math.min(start + accept(text).length, props.length - 1)]?.focus();
+    }
+
+    function input(slot, field) {
+      const text = field.value;
+      field.value = slot.char;
+      if (text) write(slot.index, text.slice(-1));
+    }
+
+    function paste(slot, event) {
+      event.preventDefault();
+      write(slot.index, event.clipboardData.getData("text"));
+    }
+
+    function keys(slot, event) {
+      const step = KEYS[event.key];
+      if (step) boxes()[slot.index + step]?.focus();
+      if (event.key !== "Backspace") return;
+      event.preventDefault();
+      const target = slot.char ? slot.index : slot.index - 1;
+      if (target < 0) return;
+      props.value = props.value.slice(0, target) + props.value.slice(target + 1);
+      boxes()[target]?.focus();
+      dispatch("change");
+    }
+
+    observe(() => {
+      const missing = props.required && !otp.complete;
+      const anchor = refs.group?.querySelectorAll("input")[Math.min(props.value.length, props.length - 1)];
+      internals.setValidity(missing ? { valueMissing: true } : {}, missing ? "Enter the full code." : "", anchor);
+    });
+  </script>
+
+  <style>
+    :host {
+      display: inline-flex;
+    }
+    .group {
+      display: flex;
+      align-items: center;
+    }
+    input {
+      box-sizing: border-box;
+      width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+      margin-left: -1px;
+      border: 1px solid var(--input);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      text-align: center;
+      outline: none;
+    }
+    input:first-child,
+    input[data-gap] {
+      margin-left: 0;
+      border-start-start-radius: var(--radius-md);
+      border-end-start-radius: var(--radius-md);
+    }
+    input:last-child {
+      border-start-end-radius: var(--radius-md);
+      border-end-end-radius: var(--radius-md);
+    }
+    input[data-gap] {
+      margin-inline-start: calc(var(--spacing) * 6);
+    }
+    input:focus-visible {
+      position: relative;
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled {
+      opacity: 0.5;
+    }
+  </style>
+
+  <div class="group" ref="group" part="group" role="group">
+    <repeat-list of="#otp.slots" as="slot" key="index">
+      <input
+        part="slot"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        maxlength="2"
+        _value="#slot.char"
+        _aria-label="#slot.label"
+        _data-gap="#slot.gap"
+        _disabled="@disabled"
+        oninput="input(slot, this)"
+        onpaste="paste(slot, event)"
+        onkeydown="keys(slot, event)">
+    </repeat-list>
+  </div>
+</custom-element>

package/components/input.html

@@ -0,0 +1,82 @@
+<custom-element name="ui-input" form-associated delegates-focus>
+  <script>
+    defineProps({
+      value: prop.string().default(""),
+      type: prop
+        .enum(["text", "email", "password", "number", "search", "tel", "url", "date", "time", "datetime-local", "month", "week", "color"])
+        .default("text"),
+      placeholder: prop.string(),
+      autocomplete: prop.string(),
+      inputmode: prop.string(),
+      pattern: prop.string(),
+      min: prop.string(),
+      max: prop.string(),
+      step: prop.string(),
+      minlength: prop.number(),
+      maxlength: prop.number(),
+      disabled: prop.boolean(),
+      readonly: prop.boolean(),
+      required: prop.boolean(),
+      invalid: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      min-width: 0;
+    }
+    input {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(var(--spacing) * 9);
+      padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      box-shadow: var(--shadow-xs);
+      outline: none;
+      transition: color var(--default-transition-duration), box-shadow var(--default-transition-duration);
+    }
+    input::placeholder {
+      color: var(--muted-foreground);
+    }
+    input:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    input[aria-invalid="true"] {
+      border-color: var(--destructive);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  </style>
+
+  <input
+    ref="control"
+    _aria-label="@label"
+    part="input"
+    _type="@type"
+    _value="@value"
+    _placeholder="@placeholder"
+    _autocomplete="@autocomplete"
+    _inputmode="@inputmode"
+    _pattern="@pattern"
+    _min="@min"
+    _max="@max"
+    _step="@step"
+    _minlength="@minlength"
+    _maxlength="@maxlength"
+    _disabled="@disabled"
+    _readonly="@readonly"
+    _required="@required"
+    _aria-invalid="@invalid"
+>
+</custom-element>

package/components/item.html

@@ -0,0 +1,170 @@
+<custom-element name="ui-item">
+  <script>
+    defineProps({
+      variant: prop.enum(["default", "outline", "muted"]).default("default"),
+      size: prop.enum(["default", "sm"]).default("default"),
+    });
+
+    onConnected(() => {
+      internals.role = host.parentElement?.localName === "ui-item-group" ? "listitem" : null;
+    });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: calc(var(--spacing) * 4);
+      padding: calc(var(--spacing) * 4);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      font-size: var(--text-sm);
+      transition: background-color 0.1s;
+    }
+    :host(:state(attr-variant-is-outline)) {
+      border-color: var(--border);
+    }
+    :host(:state(attr-variant-is-muted)) {
+      background: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+    :host(:state(attr-size-is-sm)) {
+      gap: calc(var(--spacing) * 2.5);
+      padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-group" role="list">
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-media">
+  <style>
+    :host {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 2);
+    }
+    :host(:state(attr-variant-is-icon)) {
+      box-sizing: border-box;
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      background: var(--muted);
+    }
+    :host(:state(attr-variant-is-image)) {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+      overflow: hidden;
+      border-radius: var(--radius-sm);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+    :host(:state(attr-variant-is-image)) ::slotted(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-content">
+  <style>
+    :host {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 1);
+      min-width: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-title">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.25;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-description">
+  <style>
+    :host {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      color: var(--muted-foreground);
+      line-height: 1.4;
+      text-wrap: balance;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-actions">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-header">
+  <style>
+    :host {
+      display: flex;
+      flex-basis: 100%;
+      align-items: center;
+      justify-content: space-between;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-footer">
+  <style>
+    :host {
+      display: flex;
+      flex-basis: 100%;
+      align-items: center;
+      justify-content: space-between;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/kbd.html

@@ -0,0 +1,35 @@
+<custom-element name="ui-kbd">
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 1);
+      height: calc(var(--spacing) * 5);
+      min-width: calc(var(--spacing) * 5);
+      padding: 0 calc(var(--spacing) * 1);
+      border-radius: var(--radius-xs);
+      background: var(--muted);
+      color: var(--muted-foreground);
+      font-family: var(--font-sans);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-medium);
+      pointer-events: none;
+      user-select: none;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-kbd-group">
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/label.html

@@ -0,0 +1,40 @@
+<custom-element name="ui-label">
+  <script>
+    const props = defineProps({ for: prop.string() });
+
+    const CHECKABLE = new Set(["checkbox", "radio"]);
+
+    function target() {
+      return props.for ? host.getRootNode().getElementById(props.for) : null;
+    }
+
+    function activate() {
+      const field = target();
+      if (!field) return;
+      field.focus();
+      if (CHECKABLE.has(field.type) || "checked" in field) (field.shadowRoot?.querySelector('[ref="control"]') ?? field).click();
+    }
+
+    onConnected(() => {
+      const field = target();
+      if (field && !field.hasAttribute("aria-label")) field.setAttribute("aria-label", host.textContent.trim());
+    });
+  </script>
+
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      line-height: 1;
+      user-select: none;
+    }
+    :host(:state(attr-for)) {
+      cursor: pointer;
+    }
+  </style>
+
+  <span part="label" onclick="activate()"><slot></slot></span>
+</custom-element>

package/components/marker.html

@@ -0,0 +1,35 @@
+<custom-element name="ui-marker">
+  <script>
+    defineProps({ variant: prop.enum(["default", "separator", "border"]).default("default") });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      width: 100%;
+      min-height: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+    :host(:state(attr-variant-is-separator))::before,
+    :host(:state(attr-variant-is-separator))::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: var(--border);
+    }
+    :host(:state(attr-variant-is-border)) {
+      padding-bottom: calc(var(--spacing) * 2);
+      border-bottom: 1px solid var(--border);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      flex-shrink: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/menubar.html

@@ -0,0 +1,116 @@
+<custom-element name="ui-menubar" role="menubar">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+      width: fit-content;
+      height: calc(var(--spacing) * 9);
+      padding: calc(var(--spacing) * 1);
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--background);
+      box-shadow: var(--shadow-xs);
+    }
+    div {
+      display: contents;
+    }
+  </style>
+
+  <div part="bar" focusgroup="menubar inline wrap"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-menubar-menu">
+  <script>
+    let wasOpen = false;
+
+    function press() {
+      wasOpen = host.querySelector(":scope > ui-menubar-content").matches(":popover-open");
+    }
+
+    function toggle(trigger) {
+      const content = host.querySelector(":scope > ui-menubar-content");
+      const open = wasOpen || content.matches(":popover-open");
+      wasOpen = false;
+      if (open) content.hidePopover();
+      else {
+        trigger.focus();
+        content.showPopover({ source: trigger });
+      }
+    }
+  </script>
+
+  <style>
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-menubar-trigger">
+  <style>
+    :host {
+      display: inline-flex;
+    }
+    button {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+      border-radius: var(--radius-sm);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      cursor: default;
+      user-select: none;
+    }
+    button:hover,
+    button:focus-visible {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+  </style>
+
+  <button type="button" part="trigger" role="menuitem" aria-haspopup="menu" onpointerdown="press()" onclick="toggle(this)"><slot></slot></button>
+</custom-element>
+
+<custom-element name="ui-menubar-content" role="menu">
+  <script>
+    const ITEMS = ":is(ui-menu-item, ui-menu-checkbox-item, ui-menu-radio-item):not([disabled])";
+
+    function opened(event) {
+      if (event.newState === "open") host.querySelector(ITEMS)?.focus();
+    }
+
+    function leave(event) {
+      if (document.hasFocus() && !host.contains(event.relatedTarget)) host.hidePopover();
+    }
+
+    attrs.popover ??= "auto";
+
+    listen("toggle", opened);
+    listen("focusout", leave);
+    listen("select", () => host.hidePopover());
+  </script>
+
+  <style>
+    :host {
+      box-sizing: border-box;
+      min-width: calc(var(--spacing) * 48);
+      margin: calc(var(--spacing) * 2) 0 0 calc(var(--spacing) * -1);
+      padding: calc(var(--spacing) * 1);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      box-shadow: var(--shadow-md);
+      inset: auto;
+      position-area: bottom span-right;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+  </style>
+
+  <div part="menu" focusgroup="menu block wrap"><slot></slot></div>
+</custom-element>