@vanrot/ui 0.0.0

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

@@ -0,0 +1,11 @@
+<vr-drawer side.right size.md>
+  <vr-drawer-trigger>
+    <vr-button variant.outline type="button">Open drawer</vr-button>
+  </vr-drawer-trigger>
+  <vr-drawer-content>
+    <vr-drawer-header>
+      <vr-drawer-title>{{ label() }}</vr-drawer-title>
+      <vr-drawer-description>Filter the current workspace view.</vr-drawer-description>
+    </vr-drawer-header>
+  </vr-drawer-content>
+</vr-drawer>

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

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { UiDrawer } from './ui.drawer.ts';
+
+const drawerSelector = 'vr-drawer';
+
+describe('UiDrawer', () => {
+  it('exposes stable demo copy', () => {
+    const component = new UiDrawer();
+
+    expect(component.label()).toBe('Drawer');
+    expect(drawerSelector).toBe('vr-drawer');
+  });
+});

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

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

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

@@ -0,0 +1,8 @@
+<vr-drawer side.right size.md>
+  <vr-drawer-trigger>
+    <vr-button variant.outline type="button">Open drawer</vr-button>
+  </vr-drawer-trigger>
+  <vr-drawer-content>
+    <vr-drawer-title>Drawer</vr-drawer-title>
+  </vr-drawer-content>
+</vr-drawer>

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

@@ -0,0 +1,119 @@
+.vr-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.vr-dropdown-trigger {
+  align-items: center;
+  background: var(--vr-surface-raised);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-md);
+  color: var(--vr-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: 500 var(--vr-text-sm) / 1 var(--vr-font-sans);
+  gap: var(--vr-space-2);
+  height: 2.25rem;
+  justify-content: center;
+  padding: 0 var(--vr-space-4);
+  transition: background var(--vr-motion-fast), border-color var(--vr-motion-fast);
+}
+
+.vr-dropdown-trigger:hover {
+  background: var(--vr-surface-popover);
+}
+
+.vr-dropdown-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-dropdown-content {
+  background: var(--vr-surface-popover);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-md);
+  box-shadow: var(--vr-shadow-2);
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  padding: var(--vr-space-1);
+  position: absolute;
+  top: calc(100% + var(--vr-space-1));
+  transition: opacity var(--vr-motion-fast), transform var(--vr-motion-fast);
+  z-index: var(--vr-z-dropdown);
+}
+
+.vr-dropdown-content[hidden] {
+  display: none;
+}
+
+.vr-dropdown-align-start .vr-dropdown-content,
+.vr-dropdown-content.vr-dropdown-align-start {
+  left: 0;
+}
+
+.vr-dropdown-align-end .vr-dropdown-content,
+.vr-dropdown-content.vr-dropdown-align-end {
+  right: 0;
+}
+
+.vr-dropdown-align-center .vr-dropdown-content,
+.vr-dropdown-content.vr-dropdown-align-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.vr-dropdown-side-top .vr-dropdown-content,
+.vr-dropdown-content.vr-dropdown-side-top {
+  bottom: calc(100% + var(--vr-space-1));
+  top: auto;
+}
+
+.vr-dropdown-item {
+  align-items: center;
+  border-radius: calc(var(--vr-radius-md) - 2px);
+  color: var(--vr-color-text);
+  cursor: pointer;
+  display: flex;
+  font: 400 var(--vr-text-sm) / 1 var(--vr-font-sans);
+  gap: var(--vr-space-2);
+  min-height: 2rem;
+  padding: var(--vr-space-1) var(--vr-space-2);
+  transition: background var(--vr-motion-fast);
+  user-select: none;
+}
+
+.vr-dropdown-item:hover {
+  background: var(--vr-surface-raised);
+}
+
+.vr-dropdown-item:focus-visible {
+  background: var(--vr-surface-raised);
+  box-shadow: 0 0 0 2px var(--vr-color-focus);
+  outline: none;
+}
+
+.vr-dropdown-label {
+  color: var(--vr-color-muted);
+  font: 600 var(--vr-text-xs) / 1 var(--vr-font-sans);
+  letter-spacing: 0.06em;
+  padding: var(--vr-space-2) var(--vr-space-2) var(--vr-space-1);
+  text-transform: uppercase;
+}
+
+.vr-dropdown-separator {
+  background: var(--vr-color-line);
+  height: 1px;
+  margin: var(--vr-space-1) 0;
+}
+
+.vr-dropdown-size-sm .vr-dropdown-content,
+.vr-dropdown-content.vr-dropdown-size-sm {
+  min-width: 120px;
+}
+
+.vr-dropdown-size-md .vr-dropdown-content,
+.vr-dropdown-content.vr-dropdown-size-md {
+  min-width: 200px;
+}

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

@@ -0,0 +1,10 @@
+<vr-dropdown align.end side.bottom>
+  <vr-dropdown-trigger type="button">{{ label() }}</vr-dropdown-trigger>
+  <vr-dropdown-content>
+    <vr-dropdown-label>Account</vr-dropdown-label>
+    <vr-dropdown-item>Profile</vr-dropdown-item>
+    <vr-dropdown-item>Settings</vr-dropdown-item>
+    <vr-dropdown-separator></vr-dropdown-separator>
+    <vr-dropdown-item>Sign out</vr-dropdown-item>
+  </vr-dropdown-content>
+</vr-dropdown>

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

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { UiDropdown } from './ui.dropdown.ts';
+
+const dropdownSelector = 'vr-dropdown';
+
+describe('UiDropdown', () => {
+  it('exposes stable demo copy', () => {
+    const component = new UiDropdown();
+
+    expect(component.label()).toBe('Dropdown');
+    expect(dropdownSelector).toBe('vr-dropdown');
+  });
+});

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

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

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

@@ -0,0 +1,6 @@
+<vr-dropdown align.end side.bottom>
+  <vr-dropdown-trigger type="button">Dropdown</vr-dropdown-trigger>
+  <vr-dropdown-content>
+    <vr-dropdown-item>Profile</vr-dropdown-item>
+  </vr-dropdown-content>
+</vr-dropdown>

package/src/primitives/empty-state/ui.empty-state.css

@@ -0,0 +1,9 @@
+.vr-empty-state {
+  align-items: center;
+  border: 1px dashed var(--vr-border-subtle);
+  border-radius: var(--vr-radius-lg);
+  color: var(--vr-color-muted);
+  display: grid;
+  min-height: 10rem;
+  place-items: center;
+}

package/src/primitives/empty-state/ui.empty-state.html

@@ -0,0 +1,3 @@
+<vr-empty-state tone.muted size.md>
+  No records found.
+</vr-empty-state>

package/src/primitives/empty-state/ui.empty-state.test.ts

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

package/src/primitives/empty-state/ui.empty-state.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const emptyStateCopy = {
+  label: 'Empty state',
+} as const;
+
+export class UiEmptyState {
+  label = signal(emptyStateCopy.label);
+}

package/src/primitives/empty-state/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-empty-state tone.muted size.md>
+    No records found.
+  </vr-empty-state>

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

@@ -0,0 +1,6 @@
+.vr-footer {
+  border-top: 1px solid var(--vr-color-line);
+  color: var(--vr-color-muted);
+  display: block;
+  padding-block: var(--vr-space-6);
+}

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

@@ -0,0 +1,3 @@
+<vr-footer>
+  {{ label() }}
+</vr-footer>

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

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

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

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

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

@@ -0,0 +1,3 @@
+  <vr-footer>
+    {{ t('home.footer') }}
+  </vr-footer>

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

@@ -0,0 +1,4 @@
+.vr-form {
+  display: grid;
+  gap: var(--vr-space-4);
+}

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

@@ -0,0 +1,6 @@
+<vr-form>
+  <vr-form-field name="email" required>
+    <vr-label>Email</vr-label>
+    <vr-input type.email size.md name="email" placeholder="Email"></vr-input>
+  </vr-form-field>
+</vr-form>

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

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

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

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

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

@@ -0,0 +1,6 @@
+  <vr-form>
+    <vr-form-field name="email" required>
+      <vr-label>Email</vr-label>
+      <vr-input type.email size.md name="email" placeholder="Email"></vr-input>
+    </vr-form-field>
+  </vr-form>

package/src/primitives/form-field/ui.form-field.css

@@ -0,0 +1,4 @@
+.vr-form-field {
+  display: grid;
+  gap: var(--vr-space-2);
+}

package/src/primitives/form-field/ui.form-field.html

@@ -0,0 +1,4 @@
+<vr-form-field name="email" required>
+  <vr-label>Email</vr-label>
+  <vr-input type.email size.md name="email"></vr-input>
+</vr-form-field>

package/src/primitives/form-field/ui.form-field.test.ts

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

package/src/primitives/form-field/ui.form-field.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const formFieldCopy = {
+  label: 'Form field',
+} as const;
+
+export class UiFormField {
+  label = signal(formFieldCopy.label);
+}

package/src/primitives/form-field/usage.home.html

@@ -0,0 +1,4 @@
+  <vr-form-field name="email" required>
+    <vr-label>Email</vr-label>
+    <vr-input type.email size.md name="email"></vr-input>
+  </vr-form-field>

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

@@ -0,0 +1,59 @@
+.vr-grid {
+  display: grid;
+}
+
+.vr-grid-cols-1 {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.vr-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.vr-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.vr-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.vr-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.vr-grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.vr-grid-gap-0 {
+  gap: 0;
+}
+
+.vr-grid-gap-1 {
+  gap: var(--vr-space-1);
+}
+
+.vr-grid-gap-2 {
+  gap: var(--vr-space-2);
+}
+
+.vr-grid-gap-3 {
+  gap: var(--vr-space-3);
+}
+
+.vr-grid-gap-4 {
+  gap: var(--vr-space-4);
+}
+
+.vr-grid-gap-5 {
+  gap: var(--vr-space-5);
+}
+
+.vr-grid-gap-6 {
+  gap: var(--vr-space-6);
+}
+
+.vr-grid-gap-8 {
+  gap: var(--vr-space-8);
+}

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

@@ -0,0 +1,3 @@
+<vr-grid cols.3 gap.4>
+  {{ label() }}
+</vr-grid>

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

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

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

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

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

@@ -0,0 +1,5 @@
+  <vr-grid cols.3 gap.4>
+    <vr-card>{{ t('home.card.title') }}</vr-card>
+    <vr-card variant.muted>{{ t('home.card.description') }}</vr-card>
+    <vr-card variant.interactive>{{ t('home.cta') }}</vr-card>
+  </vr-grid>

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

@@ -0,0 +1,6 @@
+.vr-header {
+  align-items: center;
+  border-bottom: 1px solid var(--vr-color-line);
+  display: flex;
+  min-height: 4rem;
+}

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

@@ -0,0 +1,3 @@
+<vr-header>
+  {{ label() }}
+</vr-header>

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

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

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

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

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

@@ -0,0 +1,5 @@
+  <vr-header>
+    <vr-nav aria-label="Primary">
+      {{ t('home.header') }}
+    </vr-nav>
+  </vr-header>

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

@@ -0,0 +1,5 @@
+.vr-img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}

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

@@ -0,0 +1,3 @@
+<vr-img alt="Image">
+  {{ label() }}
+</vr-img>

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

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

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

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

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

@@ -0,0 +1 @@
+  <vr-img src="/images/october.png" alt="October interface preview"></vr-img>

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

@@ -0,0 +1,8 @@
+.vr-input {
+  background: var(--vr-surface-card);
+  border: 1px solid var(--vr-border-subtle);
+  border-radius: var(--vr-radius-md);
+  color: var(--vr-color-text);
+  min-height: 2.5rem;
+  padding-inline: var(--vr-space-3);
+}

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

@@ -0,0 +1 @@
+<vr-input type.email size.md tone.default name="email" placeholder="Email"></vr-input>

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

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

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

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

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

@@ -0,0 +1 @@
+  <vr-input type.email size.md tone.default name="email" placeholder="Email"></vr-input>

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

@@ -0,0 +1,4 @@
+.vr-label {
+  color: var(--vr-color-text);
+  font-weight: 600;
+}

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

@@ -0,0 +1 @@
+<vr-label for="email">{{ label() }}</vr-label>

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

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

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

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

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

@@ -0,0 +1 @@
+  <vr-label for="email">Email</vr-label>

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

@@ -0,0 +1,6 @@
+.vr-layout {
+  background: var(--vr-color-canvas);
+  color: var(--vr-color-text);
+  display: block;
+  min-height: 100dvh;
+}

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

@@ -0,0 +1,3 @@
+<vr-layout>
+  {{ label() }}
+</vr-layout>

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

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