@vanrot/ui 0.0.0

package/src/primitives/skeleton/ui.skeleton.css

@@ -0,0 +1,53 @@
+.vr-skeleton {
+  background: var(--vr-surface-muted);
+  border-radius: var(--vr-radius-md);
+  color: transparent;
+  display: block;
+  height: 1rem;
+  overflow: hidden;
+  position: relative;
+  width: 12rem;
+}
+
+.vr-skeleton::before {
+  animation: vr-skeleton-shimmer 1.4s ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--vr-surface-raised) 86%, transparent),
+    transparent
+  );
+  content: "";
+  inset: 0;
+  position: absolute;
+  transform: translateX(-100%);
+}
+
+.vr-skeleton-avatar {
+  aspect-ratio: 1;
+  border-radius: var(--vr-radius-full);
+  height: unset;
+  width: 2.5rem;
+}
+
+.vr-skeleton-card {
+  height: unset;
+  min-height: 8rem;
+  width: 100%;
+}
+
+.vr-skeleton-block {
+  height: unset;
+  min-height: 4rem;
+  width: 100%;
+}
+
+@keyframes vr-skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/primitives/skeleton/ui.skeleton.html

@@ -0,0 +1,3 @@
+<vr-skeleton aria-label="Loading content">
+  {{ label() }}
+</vr-skeleton>

package/src/primitives/skeleton/ui.skeleton.test.ts

@@ -0,0 +1,12 @@
+// @vitest-environment jsdom
+
+import { testComponent } from '@vanrot/testing';
+import { UiSkeleton } from './ui.skeleton.ts';
+
+const skeletonCopy = {
+  label: 'Loading content',
+} as const;
+
+testComponent(UiSkeleton).can('render its label', function (screen) {
+  screen.expect.text(skeletonCopy.label);
+});

package/src/primitives/skeleton/ui.skeleton.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const skeletonCopy = {
+  label: 'Loading content',
+} as const;
+
+export class UiSkeleton {
+  label = signal(skeletonCopy.label);
+}

package/src/primitives/skeleton/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-skeleton aria-label="Loading content" variant.card>
+    {{ t('home.loadingContent') }}
+  </vr-skeleton>

package/src/primitives/slider/ui.slider.css

@@ -0,0 +1,4 @@
+.vr-slider {
+  accent-color: var(--vr-color-brand);
+  width: 100%;
+}

package/src/primitives/slider/ui.slider.html

@@ -0,0 +1 @@
+<vr-slider size.md tone.default min="0" max="100" value="50" aria-label="Volume"></vr-slider>

package/src/primitives/slider/ui.slider.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiSlider } from './ui.slider.ts';
+
+describe('UiSlider', () => {
+  it('exports the slider primitive class', () => {
+    expect(UiSlider).toBeTypeOf('function');
+  });
+});

package/src/primitives/slider/ui.slider.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const sliderCopy = {
+  label: 'Slider',
+} as const;
+
+export class UiSlider {
+  label = signal(sliderCopy.label);
+}

package/src/primitives/slider/usage.home.html

@@ -0,0 +1 @@
+  <vr-slider size.md tone.default min="0" max="100" value="50" aria-label="Volume"></vr-slider>

package/src/primitives/src/ui.src.css

@@ -0,0 +1,3 @@
+.vr-src {
+  display: contents;
+}

package/src/primitives/src/ui.src.html

@@ -0,0 +1,3 @@
+<vr-src type="image/avif">
+  {{ label() }}
+</vr-src>

package/src/primitives/src/ui.src.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { UiSrc } from './ui.src.ts';
+
+const srcCopy = {
+  label: 'Source',
+} as const;
+
+describe('UiSrc', () => {
+  it('exposes its label signal', () => {
+    const component = new UiSrc();
+
+    expect(component.label()).toBe(srcCopy.label);
+  });
+});

package/src/primitives/src/ui.src.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const srcCopy = {
+  label: 'Source',
+} as const;
+
+export class UiSrc {
+  label = signal(srcCopy.label);
+}

package/src/primitives/src/usage.home.html

@@ -0,0 +1,4 @@
+  <picture>
+    <vr-src srcset="/images/october.avif" type="image/avif"></vr-src>
+    <vr-img src="/images/october.png" alt="October interface preview"></vr-img>
+  </picture>

package/src/primitives/stat/ui.stat.css

@@ -0,0 +1,8 @@
+.vr-stat {
+  background: var(--vr-surface-card);
+  border: 1px solid var(--vr-border-subtle);
+  border-radius: var(--vr-radius-lg);
+  display: grid;
+  gap: var(--vr-space-2);
+  padding: var(--vr-space-4);
+}

package/src/primitives/stat/ui.stat.html

@@ -0,0 +1,4 @@
+<vr-stat tone.success align.left>
+  <span>Revenue</span>
+  <strong>$24,500</strong>
+</vr-stat>

package/src/primitives/stat/ui.stat.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiStat } from './ui.stat.ts';
+
+describe('UiStat', () => {
+  it('exports the stat primitive class', () => {
+    expect(UiStat).toBeTypeOf('function');
+  });
+});

package/src/primitives/stat/ui.stat.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const statCopy = {
+  label: 'Stat',
+} as const;
+
+export class UiStat {
+  label = signal(statCopy.label);
+}

package/src/primitives/stat/usage.home.html

@@ -0,0 +1,4 @@
+  <vr-stat tone.success align.left>
+    <span>Revenue</span>
+    <strong>$24,500</strong>
+  </vr-stat>

package/src/primitives/switch/ui.switch.css

@@ -0,0 +1,9 @@
+.vr-switch {
+  align-items: center;
+  background: var(--vr-surface-card);
+  border: 1px solid var(--vr-border-subtle);
+  border-radius: 999px;
+  display: inline-flex;
+  min-height: 2rem;
+  min-width: 3.5rem;
+}

package/src/primitives/switch/ui.switch.html

@@ -0,0 +1 @@
+<vr-switch size.md tone.default aria-label="Notifications"></vr-switch>

package/src/primitives/switch/ui.switch.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiSwitch } from './ui.switch.ts';
+
+describe('UiSwitch', () => {
+  it('exports the switch primitive class', () => {
+    expect(UiSwitch).toBeTypeOf('function');
+  });
+});

package/src/primitives/switch/ui.switch.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const switchCopy = {
+  label: 'Switch',
+} as const;
+
+export class UiSwitch {
+  label = signal(switchCopy.label);
+}

package/src/primitives/switch/usage.home.html

@@ -0,0 +1 @@
+  <vr-switch size.md tone.default aria-label="Notifications"></vr-switch>

package/src/primitives/table/ui.table.css

@@ -0,0 +1,5 @@
+.vr-table {
+  border-collapse: collapse;
+  color: var(--vr-color-text);
+  width: 100%;
+}

package/src/primitives/table/ui.table.html

@@ -0,0 +1,3 @@
+<vr-table density.compact tone.default sortable filterable paginated selectable>
+  <vr-table-caption>Recent invoices</vr-table-caption>
+</vr-table>

package/src/primitives/table/ui.table.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTable } from './ui.table.ts';
+
+describe('UiTable', () => {
+  it('exports the table primitive class', () => {
+    expect(UiTable).toBeTypeOf('function');
+  });
+});

package/src/primitives/table/ui.table.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableCopy = {
+  label: 'Table',
+} as const;
+
+export class UiTable {
+  label = signal(tableCopy.label);
+}

package/src/primitives/table/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-table density.compact tone.default sortable filterable paginated selectable>
+    <vr-table-caption>Recent invoices</vr-table-caption>
+  </vr-table>

package/src/primitives/table-body/ui.table-body.css

@@ -0,0 +1,3 @@
+.vr-table-body {
+  background: transparent;
+}

package/src/primitives/table-body/ui.table-body.html

@@ -0,0 +1,3 @@
+<vr-table-body>
+  <vr-table-row><vr-table-cell>Paid</vr-table-cell></vr-table-row>
+</vr-table-body>

package/src/primitives/table-body/ui.table-body.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableBody } from './ui.table-body.ts';
+
+describe('UiTableBody', () => {
+  it('exports the table body primitive class', () => {
+    expect(UiTableBody).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-body/ui.table-body.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableBodyCopy = {
+  label: 'Table body',
+} as const;
+
+export class UiTableBody {
+  label = signal(tableBodyCopy.label);
+}

package/src/primitives/table-body/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-table-body>
+    <vr-table-row><vr-table-cell>Paid</vr-table-cell></vr-table-row>
+  </vr-table-body>

package/src/primitives/table-caption/ui.table-caption.css

@@ -0,0 +1,5 @@
+.vr-table-caption {
+  color: var(--vr-color-muted);
+  padding: var(--vr-space-2);
+  text-align: left;
+}

package/src/primitives/table-caption/ui.table-caption.html

@@ -0,0 +1 @@
+<vr-table-caption>Recent invoices</vr-table-caption>

package/src/primitives/table-caption/ui.table-caption.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableCaption } from './ui.table-caption.ts';
+
+describe('UiTableCaption', () => {
+  it('exports the table caption primitive class', () => {
+    expect(UiTableCaption).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-caption/ui.table-caption.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableCaptionCopy = {
+  label: 'Table caption',
+} as const;
+
+export class UiTableCaption {
+  label = signal(tableCaptionCopy.label);
+}

package/src/primitives/table-caption/usage.home.html

@@ -0,0 +1 @@
+  <vr-table-caption>Recent invoices</vr-table-caption>

package/src/primitives/table-cell/ui.table-cell.css

@@ -0,0 +1,3 @@
+.vr-table-cell {
+  padding: var(--vr-space-3);
+}

package/src/primitives/table-cell/ui.table-cell.html

@@ -0,0 +1 @@
+<vr-table-cell>Paid</vr-table-cell>

package/src/primitives/table-cell/ui.table-cell.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableCell } from './ui.table-cell.ts';
+
+describe('UiTableCell', () => {
+  it('exports the table cell primitive class', () => {
+    expect(UiTableCell).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-cell/ui.table-cell.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableCellCopy = {
+  label: 'Table cell',
+} as const;
+
+export class UiTableCell {
+  label = signal(tableCellCopy.label);
+}

package/src/primitives/table-cell/usage.home.html

@@ -0,0 +1 @@
+  <vr-table-cell>Paid</vr-table-cell>

package/src/primitives/table-footer/ui.table-footer.css

@@ -0,0 +1,3 @@
+.vr-table-footer {
+  border-top: 1px solid var(--vr-border-subtle);
+}

package/src/primitives/table-footer/ui.table-footer.html

@@ -0,0 +1,3 @@
+<vr-table-footer>
+  <vr-table-row><vr-table-cell>Total</vr-table-cell></vr-table-row>
+</vr-table-footer>

package/src/primitives/table-footer/ui.table-footer.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableFooter } from './ui.table-footer.ts';
+
+describe('UiTableFooter', () => {
+  it('exports the table footer primitive class', () => {
+    expect(UiTableFooter).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-footer/ui.table-footer.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableFooterCopy = {
+  label: 'Table footer',
+} as const;
+
+export class UiTableFooter {
+  label = signal(tableFooterCopy.label);
+}

package/src/primitives/table-footer/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-table-footer>
+    <vr-table-row><vr-table-cell>Total</vr-table-cell></vr-table-row>
+  </vr-table-footer>

package/src/primitives/table-head/ui.table-head.css

@@ -0,0 +1,6 @@
+.vr-table-head {
+  color: var(--vr-color-muted);
+  font-weight: 600;
+  padding: var(--vr-space-3);
+  text-align: left;
+}

package/src/primitives/table-head/ui.table-head.html

@@ -0,0 +1 @@
+<vr-table-head sort="status">Status</vr-table-head>

package/src/primitives/table-head/ui.table-head.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableHead } from './ui.table-head.ts';
+
+describe('UiTableHead', () => {
+  it('exports the table head primitive class', () => {
+    expect(UiTableHead).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-head/ui.table-head.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableHeadCopy = {
+  label: 'Table head',
+} as const;
+
+export class UiTableHead {
+  label = signal(tableHeadCopy.label);
+}

package/src/primitives/table-head/usage.home.html

@@ -0,0 +1 @@
+  <vr-table-head sort="status">Status</vr-table-head>

package/src/primitives/table-header/ui.table-header.css

@@ -0,0 +1,3 @@
+.vr-table-header {
+  border-bottom: 1px solid var(--vr-border-subtle);
+}

package/src/primitives/table-header/ui.table-header.html

@@ -0,0 +1,3 @@
+<vr-table-header>
+  <vr-table-row><vr-table-head>Status</vr-table-head></vr-table-row>
+</vr-table-header>

package/src/primitives/table-header/ui.table-header.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableHeader } from './ui.table-header.ts';
+
+describe('UiTableHeader', () => {
+  it('exports the table header primitive class', () => {
+    expect(UiTableHeader).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-header/ui.table-header.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableHeaderCopy = {
+  label: 'Table header',
+} as const;
+
+export class UiTableHeader {
+  label = signal(tableHeaderCopy.label);
+}

package/src/primitives/table-header/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-table-header>
+    <vr-table-row><vr-table-head>Status</vr-table-head></vr-table-row>
+  </vr-table-header>

package/src/primitives/table-row/ui.table-row.css

@@ -0,0 +1,3 @@
+.vr-table-row {
+  border-bottom: 1px solid var(--vr-border-subtle);
+}

package/src/primitives/table-row/ui.table-row.html

@@ -0,0 +1,3 @@
+<vr-table-row>
+  <vr-table-cell>Paid</vr-table-cell>
+</vr-table-row>

package/src/primitives/table-row/ui.table-row.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiTableRow } from './ui.table-row.ts';
+
+describe('UiTableRow', () => {
+  it('exports the table row primitive class', () => {
+    expect(UiTableRow).toBeTypeOf('function');
+  });
+});

package/src/primitives/table-row/ui.table-row.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const tableRowCopy = {
+  label: 'Table row',
+} as const;
+
+export class UiTableRow {
+  label = signal(tableRowCopy.label);
+}

package/src/primitives/table-row/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-table-row>
+    <vr-table-cell>Paid</vr-table-cell>
+  </vr-table-row>

package/src/primitives/tabs/ui.tabs.css

@@ -0,0 +1,103 @@
+.vr-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vr-space-4);
+  width: 100%;
+}
+
+.vr-tabs-list {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--vr-space-1);
+}
+
+.vr-tabs-trigger {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--vr-radius-md);
+  color: var(--vr-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font: 500 var(--vr-text-sm) / 1 var(--vr-font-sans);
+  height: 2.25rem;
+  padding: 0 var(--vr-space-3);
+  transition: color var(--vr-motion-fast), background var(--vr-motion-fast);
+  white-space: nowrap;
+}
+
+.vr-tabs-trigger:hover {
+  color: var(--vr-color-text);
+}
+
+.vr-tabs-trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vr-color-focus) 28%, transparent);
+  outline: 2px solid var(--vr-color-focus);
+  outline-offset: 2px;
+}
+
+.vr-tabs-trigger[aria-selected="true"],
+.vr-tabs-trigger[data-state="active"] {
+  color: var(--vr-color-text);
+}
+
+.vr-tabs-panel {
+  color: var(--vr-color-text);
+  font: 400 var(--vr-text-sm) / var(--vr-leading-normal) var(--vr-font-sans);
+}
+
+.vr-tabs-panel[hidden] {
+  display: none;
+}
+
+/* Line variant */
+.vr-tabs-variant-line .vr-tabs-list {
+  border-bottom: 1px solid var(--vr-color-line);
+  border-radius: 0;
+  gap: 0;
+  padding: 0;
+}
+
+.vr-tabs-variant-line .vr-tabs-trigger {
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  margin-bottom: -1px;
+  padding: 0 var(--vr-space-4);
+}
+
+.vr-tabs-variant-line .vr-tabs-trigger[aria-selected="true"],
+.vr-tabs-variant-line .vr-tabs-trigger[data-state="active"] {
+  border-bottom-color: var(--vr-color-brand);
+  color: var(--vr-color-text);
+}
+
+/* Pill variant */
+.vr-tabs-variant-pill .vr-tabs-list {
+  background: var(--vr-surface-muted);
+  border-radius: var(--vr-radius-md);
+  padding: var(--vr-space-1);
+}
+
+.vr-tabs-variant-pill .vr-tabs-trigger {
+  border-radius: calc(var(--vr-radius-md) - 2px);
+}
+
+.vr-tabs-variant-pill .vr-tabs-trigger[aria-selected="true"],
+.vr-tabs-variant-pill .vr-tabs-trigger[data-state="active"] {
+  background: var(--vr-surface-raised);
+  box-shadow: var(--vr-shadow-1);
+  color: var(--vr-color-text);
+}
+
+/* Orientation */
+.vr-tabs-orientation-horizontal {
+  flex-direction: column;
+}
+
+.vr-tabs-orientation-vertical {
+  flex-direction: row;
+}
+
+.vr-tabs-orientation-vertical .vr-tabs-list {
+  flex-direction: column;
+}

package/src/primitives/tabs/ui.tabs.html

@@ -0,0 +1,8 @@
+<vr-tabs value.overview variant.line>
+  <vr-tabs-list>
+    <vr-tabs-trigger value.overview>Overview</vr-tabs-trigger>
+    <vr-tabs-trigger value.activity>Activity</vr-tabs-trigger>
+  </vr-tabs-list>
+  <vr-tabs-panel value.overview>Overview content</vr-tabs-panel>
+  <vr-tabs-panel value.activity>Activity content</vr-tabs-panel>
+</vr-tabs>