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

package/components/card.html

@@ -0,0 +1,113 @@
+<custom-element name="ui-card">
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 6);
+      padding: calc(var(--spacing) * 6) 0;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xl);
+      background: var(--card);
+      color: var(--card-foreground);
+      box-shadow: var(--shadow-xs);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-header">
+  <style>
+    :host {
+      display: grid;
+      grid-auto-rows: min-content;
+      align-items: start;
+      gap: calc(var(--spacing) * 1.5);
+      padding: 0 calc(var(--spacing) * 6);
+    }
+    ::slotted(:not(ui-card-action)) {
+      grid-column: 1;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-title">
+  <script>
+    defineProps({ level: prop.number().int().min(1).max(6).default(3) });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+    }
+    [part="title"] {
+      margin: 0;
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-semibold);
+      line-height: 1;
+    }
+  </style>
+
+  <div part="title" role="heading" _aria-level="@level"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-card-description">
+  <style>
+    :host {
+      display: block;
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-action">
+  <style>
+    :host {
+      display: block;
+      grid-column: 2;
+      grid-row: 1 / span 2;
+      justify-self: end;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-content">
+  <style>
+    :host {
+      display: block;
+      padding: 0 calc(var(--spacing) * 6);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-footer">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: 0 calc(var(--spacing) * 6);
+    }
+    :host(:state(attr-justify-is-between)) {
+      justify-content: space-between;
+    }
+    :host(:state(attr-justify-is-end)) {
+      justify-content: flex-end;
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/carousel.html

@@ -0,0 +1,186 @@
+<import-element from="./button.html"></import-element>
+
+<custom-element name="ui-carousel" role="region">
+  <script>
+    const props = defineProps({
+      orientation: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+      label: prop.string().default("Carousel"),
+    });
+
+    const content = useChildren("ui-carousel-content");
+    const position = useState({
+      index: 0,
+      get first() {
+        return this.index <= 0;
+      },
+      get last() {
+        return this.index >= slides().length - 1;
+      },
+    });
+    const KEYS = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 };
+
+    function slides() {
+      return [...(content[0]?.children ?? [])];
+    }
+
+    function settle(index) {
+      if (index === position.index) return;
+      position.index = index;
+      dispatch("change", { index });
+    }
+
+    function go(index) {
+      const all = slides();
+      const target = Math.max(0, Math.min(index, all.length - 1));
+      all[target]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+      settle(target);
+    }
+
+    function previous() {
+      go(position.index - 1);
+    }
+
+    function next() {
+      go(position.index + 1);
+    }
+
+    function keys(event) {
+      const step = KEYS[event.key];
+      if (!step) return;
+      event.preventDefault();
+      go(position.index + step);
+    }
+
+    function scrolled(track) {
+      const edge = props.orientation === "vertical" ? "top" : "left";
+      const start = track.getBoundingClientRect()[edge];
+      const distances = slides().map((slide) => Math.abs(slide.getBoundingClientRect()[edge] - start));
+      settle(distances.indexOf(Math.min(...distances)));
+    }
+
+    observe(() => {
+      internals.ariaLabel = props.label;
+      internals.ariaRoleDescription = "carousel";
+    });
+  </script>
+
+  <style>
+    :host {
+      --carousel-direction: row;
+      --carousel-axis: x;
+      --carousel-overflow-x: auto;
+      --carousel-overflow-y: hidden;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      width: 100%;
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      --carousel-direction: column;
+      --carousel-axis: y;
+      --carousel-overflow-x: hidden;
+      --carousel-overflow-y: auto;
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      justify-items: center;
+    }
+    :host(:state(attr-height)) {
+      height: calc(var(--spacing) * var(--attr-height));
+    }
+    ::slotted(ui-carousel-content) {
+      grid-area: 1 / 2;
+      align-self: stretch;
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(ui-carousel-content) {
+      grid-area: 2 / 1;
+      justify-self: stretch;
+    }
+    ::slotted(ui-carousel-previous) {
+      grid-area: 1 / 1;
+      margin-inline-end: calc(var(--spacing) * 2);
+    }
+    ::slotted(ui-carousel-next) {
+      grid-area: 1 / 3;
+      margin-inline-start: calc(var(--spacing) * 2);
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(ui-carousel-previous) {
+      grid-area: 1 / 1;
+      margin: 0 0 calc(var(--spacing) * 2);
+      rotate: 90deg;
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(ui-carousel-next) {
+      grid-area: 3 / 1;
+      margin: calc(var(--spacing) * 2) 0 0;
+      rotate: 90deg;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-carousel-content">
+  <style>
+    :host {
+      display: flex;
+      min-width: 0;
+      min-height: 0;
+    }
+    .track {
+      display: flex;
+      flex: 1;
+      flex-direction: var(--carousel-direction);
+      gap: calc(var(--spacing) * 4);
+      min-width: 0;
+      min-height: 0;
+      overflow-x: var(--carousel-overflow-x);
+      overflow-y: var(--carousel-overflow-y);
+      scroll-snap-type: var(--carousel-axis) mandatory;
+      scrollbar-width: none;
+      outline: none;
+    }
+    .track:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+  </style>
+
+  <div class="track" part="track" tabindex="0" onkeydown="keys(event)" onscrollend="scrolled(this)"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-carousel-item" role="group">
+  <script>
+    internals.ariaRoleDescription = "slide";
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      box-sizing: border-box;
+      flex: 0 0 100%;
+      min-width: 0;
+      min-height: 0;
+      scroll-snap-align: start;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-carousel-previous">
+  <style>
+    :host {
+      display: inline-flex;
+    }
+  </style>
+
+  <ui-button variant="outline" size="icon" aria-label="Previous slide" _disabled="#position.first" onclick="previous()">‹</ui-button>
+</custom-element>
+
+<custom-element name="ui-carousel-next">
+  <style>
+    :host {
+      display: inline-flex;
+    }
+  </style>
+
+  <ui-button variant="outline" size="icon" aria-label="Next slide" _disabled="#position.last" onclick="next()">›</ui-button>
+</custom-element>

package/components/chart.html

@@ -0,0 +1,162 @@
+<custom-element name="ui-chart">
+  <script>
+    const props = defineProps({
+      type: prop.enum(["bar", "line", "area"]).default("bar"),
+      data: prop.array(prop.object()).default([]),
+      x: prop.string().default("label"),
+      y: prop.string().default("value"),
+      height: prop.number().min(80).default(240),
+      label: prop.string().default("Chart"),
+    });
+
+    const WIDTH = 600;
+    const PAD = { top: 12, right: 12, bottom: 28, left: 44 };
+
+    const chart = useState({
+      get series() {
+        return props.y.split(",").map((key, index) => ({ key: key.trim(), color: `var(--chart-${(index % 5) + 1})` }));
+      },
+      get values() {
+        return props.data.flatMap((row) => this.series.map((series) => Number(row[series.key]) || 0));
+      },
+      get max() {
+        return Math.max(1, ...this.values);
+      },
+      get min() {
+        return Math.min(0, ...this.values);
+      },
+      get plotHeight() {
+        return props.height - PAD.top - PAD.bottom;
+      },
+      y(value) {
+        return PAD.top + this.plotHeight * ((this.max - value) / (this.max - this.min));
+      },
+      get step() {
+        return (WIDTH - PAD.left - PAD.right) / Math.max(1, props.data.length);
+      },
+      get viewBox() {
+        return `0 0 ${WIDTH} ${props.height}`;
+      },
+      get ticks() {
+        return [0, 0.25, 0.5, 0.75, 1].map((ratio) => ({
+          key: ratio,
+          y: PAD.top + this.plotHeight * (1 - ratio),
+          label: Math.round(this.min + (this.max - this.min) * ratio).toLocaleString(),
+        }));
+      },
+      get labels() {
+        return props.data.map((row, index) => ({ key: index, x: PAD.left + this.step * (index + 0.5), text: String(row[props.x] ?? "") }));
+      },
+      get bars() {
+        const width = (this.step * 0.7) / this.series.length;
+        return props.data.flatMap((row, index) =>
+          this.series.map((series, s) => {
+            const value = Number(row[series.key]) || 0;
+            const top = this.y(Math.max(value, 0));
+            return {
+              key: `${index}-${series.key}`,
+              x: PAD.left + this.step * index + this.step * 0.15 + width * s,
+              y: top,
+              width,
+              height: this.y(Math.min(value, 0)) - top,
+              color: series.color,
+              title: `${row[props.x]} · ${series.key}: ${value.toLocaleString()}`,
+            };
+          }),
+        );
+      },
+      get lines() {
+        return this.series.map((series) => {
+          const points = props.data.map((row, index) => [
+            PAD.left + this.step * (index + 0.5),
+            this.y(Number(row[series.key]) || 0),
+          ]);
+          const line = points.map(([x, y], index) => `${index ? "L" : "M"}${x},${y}`).join(" ");
+          const zero = this.y(0);
+          const area = points.length ? `${line} L${points.at(-1)[0]},${zero} L${points[0][0]},${zero} Z` : "";
+          return { key: series.key, line, area, color: series.color };
+        });
+      },
+      get legend() {
+        return this.series.length > 1 ? this.series : [];
+      },
+    });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      font-size: var(--text-xs);
+      color: var(--muted-foreground);
+    }
+    svg {
+      display: block;
+      width: 100%;
+      height: auto;
+      overflow: visible;
+    }
+    .grid {
+      stroke: var(--border);
+      stroke-dasharray: 3 3;
+    }
+    .tick {
+      fill: currentColor;
+      text-anchor: end;
+      dominant-baseline: middle;
+    }
+    .label {
+      fill: currentColor;
+      text-anchor: middle;
+    }
+    rect {
+      rx: 4;
+    }
+    .line {
+      fill: none;
+      stroke-width: 2;
+    }
+    .area {
+      opacity: 0.2;
+    }
+    :host(:not(:state(attr-type-is-bar))) .bars,
+    :host(:state(attr-type-is-bar)) .lines,
+    :host(:not(:state(attr-type-is-area))) .area {
+      display: none;
+    }
+    .legend {
+      display: flex;
+      justify-content: center;
+      gap: calc(var(--spacing) * 4);
+      margin-top: calc(var(--spacing) * 2);
+    }
+    .legend span::before {
+      content: "";
+      display: inline-block;
+      width: calc(var(--spacing) * 2.5);
+      height: calc(var(--spacing) * 2.5);
+      margin-right: calc(var(--spacing) * 1.5);
+      border-radius: var(--radius-xs);
+      background: var(--swatch);
+    }
+  </style>
+
+  <svg _viewBox="#chart.viewBox" role="img" _aria-label="@label" part="svg">
+    <g repeat="#chart.ticks" as="tick" key="key">
+      <line class="grid" x1="44" x2="588" _y1="#tick.y" _y2="#tick.y"></line>
+      <text class="tick" x="38" _y="#tick.y"><slot name="#tick.label"></slot></text>
+    </g>
+    <text repeat="#chart.labels" as="label" key="key" class="label" _x="#label.x" _y="@height" dy="-8"><slot name="#label.text"></slot></text>
+    <g class="bars">
+      <rect repeat="#chart.bars" as="bar" key="key" _x="#bar.x" _y="#bar.y" _width="#bar.width" _height="#bar.height" _fill="#bar.color"><title><slot name="#bar.title"></slot></title></rect>
+    </g>
+    <g class="lines" repeat="#chart.lines" as="series" key="key">
+      <path class="area" _d="#series.area" _fill="#series.color"></path>
+      <path class="line" _d="#series.line" _stroke="#series.color"></path>
+    </g>
+  </svg>
+  <div class="legend" part="legend">
+    <span repeat="#chart.legend" as="series" key="key" _--swatch="#series.color"><slot name="#series.key"></slot></span>
+  </div>
+</custom-element>

package/components/checkbox.html

@@ -0,0 +1,93 @@
+<custom-element name="ui-checkbox" form-associated delegates-focus>
+  <script>
+    const props = defineProps({
+      checked: prop.boolean(),
+      value: prop.string(),
+      indeterminate: prop.boolean(),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+
+    function settled() {
+      props.indeterminate = false;
+    }
+  </script>
+
+  <style>
+    :host(:state(attr-checked)) label {
+      color: var(--foreground);
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      vertical-align: middle;
+    }
+    input {
+      appearance: none;
+      box-sizing: border-box;
+      display: grid;
+      place-content: center;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      margin: 0;
+      border: 1px solid var(--input);
+      border-radius: var(--radius-xs);
+      background: transparent;
+      box-shadow: var(--shadow-xs);
+      cursor: pointer;
+      outline: none;
+      transition: box-shadow var(--default-transition-duration);
+    }
+    input::before {
+      content: "";
+      width: calc(var(--spacing) * 2.5);
+      height: calc(var(--spacing) * 2.5);
+      background: currentColor;
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      transform: scale(0);
+      transition: transform 0.1s;
+    }
+    input:checked,
+    input:indeterminate {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: var(--primary-foreground);
+    }
+    input:checked::before {
+      transform: scale(1);
+    }
+    input:indeterminate::before {
+      clip-path: inset(40% 0);
+      transform: scale(1);
+    }
+    input:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    label {
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      line-height: 1;
+    }
+  </style>
+
+  <input
+    id="control"
+    ref="control"
+    part="control"
+    type="checkbox"
+    _aria-label="@label"
+    _checked="@checked"
+    _indeterminate="@indeterminate"
+    _disabled="@disabled"
+    _required="@required"
+    onchange="settled()"
+>
+  <label for="control" part="label"><slot></slot></label>
+</custom-element>

package/components/code-block.html

@@ -0,0 +1,58 @@
+<import-element from="./button.html"></import-element>
+
+<custom-element name="ui-code-block">
+  <script>
+    defineProps({ language: prop.string() });
+
+    const copy = useState({ done: false });
+
+    async function copyCode() {
+      await navigator.clipboard.writeText(host.textContent.trim());
+      copy.done = true;
+      setTimeout(() => (copy.done = false), 1500);
+    }
+  </script>
+
+  <style>
+    :host {
+      position: relative;
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: color-mix(in oklab, var(--muted) 40%, transparent);
+      font-family: var(--font-mono);
+      font-size: var(--text-sm);
+    }
+    .code {
+      padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
+      overflow-x: auto;
+      white-space: pre;
+    }
+    ::slotted(pre) {
+      margin: 0;
+    }
+    .bar {
+      position: absolute;
+      top: calc(var(--spacing) * 1.5);
+      right: calc(var(--spacing) * 1.5);
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-family: var(--font-sans);
+      font-size: var(--text-xs);
+      text-transform: uppercase;
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <div class="code" part="code"><slot></slot></div>
+  <div class="bar" part="bar">
+    <span><slot name="@language"></slot></span>
+    <ui-button variant="ghost" size="icon-sm" aria-label="Copy code" onclick="copyCode()">
+      <is-hidden when="#copy.done">⧉</is-hidden>
+      <is-visible when="#copy.done">✓</is-visible>
+    </ui-button>
+  </div>
+</custom-element>

package/components/collapsible.html

@@ -0,0 +1,76 @@
+<custom-element name="ui-collapsible">
+  <script>
+    const props = defineProps({ open: prop.boolean().reflect(), disabled: prop.boolean() });
+
+    function toggled(details) {
+      if (details.open === props.open) return;
+      props.open = details.open;
+      dispatch("toggle");
+    }
+
+    function guard() {
+      return !props.disabled;
+    }
+  </script>
+
+  <style>
+    :host {
+      display: block;
+    }
+    summary {
+      list-style: none;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      outline: none;
+    }
+    summary::-webkit-details-marker {
+      display: none;
+    }
+    summary:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+    :host(:state(attr-disabled)) summary {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  </style>
+
+  <details _open="@open" ontoggle="toggled(this)">
+    <summary part="trigger" onclick="return guard()"><slot name="trigger"></slot></summary>
+    <slot></slot>
+  </details>
+</custom-element>
+
+<custom-element name="ui-collapsible-trigger" slot="trigger">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-semibold);
+    }
+    ::slotted(svg) {
+      flex-shrink: 0;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-collapsible-content">
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+      padding-top: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>