@vanrot/ui 0.0.0

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+.vr-textarea {
+  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: 7rem;
+  padding: var(--vr-space-3);
+}

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

@@ -0,0 +1 @@
+<vr-textarea size.md tone.default name="notes" placeholder="Notes"></vr-textarea>

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

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

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

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

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

@@ -0,0 +1 @@
+  <vr-textarea size.md tone.default name="notes" placeholder="Notes"></vr-textarea>

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

@@ -0,0 +1,123 @@
+.vr-toast {
+  display: contents;
+}
+
+.vr-toast-viewport {
+  bottom: var(--vr-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--vr-space-2);
+  max-width: 420px;
+  pointer-events: none;
+  position: fixed;
+  right: var(--vr-space-4);
+  width: 100%;
+  z-index: var(--vr-z-toast);
+}
+
+.vr-toast-placement-topright .vr-toast-viewport,
+.vr-toast-viewport.vr-toast-placement-topright {
+  bottom: auto;
+  left: auto;
+  right: var(--vr-space-4);
+  top: var(--vr-space-4);
+}
+
+.vr-toast-placement-topleft .vr-toast-viewport,
+.vr-toast-viewport.vr-toast-placement-topleft {
+  bottom: auto;
+  left: var(--vr-space-4);
+  right: auto;
+  top: var(--vr-space-4);
+}
+
+.vr-toast-placement-bottomright .vr-toast-viewport,
+.vr-toast-viewport.vr-toast-placement-bottomright {
+  bottom: var(--vr-space-4);
+  left: auto;
+  right: var(--vr-space-4);
+  top: auto;
+}
+
+.vr-toast-placement-bottomleft .vr-toast-viewport,
+.vr-toast-viewport.vr-toast-placement-bottomleft {
+  bottom: var(--vr-space-4);
+  left: var(--vr-space-4);
+  right: auto;
+  top: auto;
+}
+
+.vr-toast-item {
+  background: var(--vr-surface-raised);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-md);
+  box-shadow: var(--vr-shadow-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--vr-space-1);
+  min-width: 320px;
+  padding: var(--vr-space-4);
+  pointer-events: all;
+  position: relative;
+  transition: opacity var(--vr-motion-normal), transform var(--vr-motion-normal);
+}
+
+.vr-toast-item[hidden] {
+  display: none;
+}
+
+.vr-toast-title {
+  color: var(--vr-color-text);
+  font: 600 var(--vr-text-sm) / var(--vr-leading-tight) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-toast-description {
+  color: var(--vr-color-muted);
+  font: 400 var(--vr-text-sm) / var(--vr-leading-normal) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-toast-close {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--vr-radius-sm);
+  color: var(--vr-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 1.5rem;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: var(--vr-space-3);
+  top: var(--vr-space-3);
+  transition: background var(--vr-motion-fast), color var(--vr-motion-fast);
+  width: 1.5rem;
+}
+
+.vr-toast-close:hover {
+  background: var(--vr-surface-popover);
+  color: var(--vr-color-text);
+}
+
+/* Tone variants — left border accent */
+.vr-toast-tone-default .vr-toast-item,
+.vr-toast-item.vr-toast-tone-default {
+  border-left: 4px solid var(--vr-color-line);
+}
+
+.vr-toast-tone-success .vr-toast-item,
+.vr-toast-item.vr-toast-tone-success {
+  border-left: 4px solid var(--vr-color-success);
+}
+
+.vr-toast-tone-warning .vr-toast-item,
+.vr-toast-item.vr-toast-tone-warning {
+  border-left: 4px solid var(--vr-color-warning);
+}
+
+.vr-toast-tone-danger .vr-toast-item,
+.vr-toast-item.vr-toast-tone-danger {
+  border-left: 4px solid var(--vr-color-danger);
+}

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

@@ -0,0 +1,8 @@
+<vr-toast tone.success placement.bottomright aria-label="Notifications">
+  <vr-toast-viewport>
+    <vr-toast-item>
+      <vr-toast-title>{{ label() }}</vr-toast-title>
+      <vr-toast-description>Changes were saved.</vr-toast-description>
+    </vr-toast-item>
+  </vr-toast-viewport>
+</vr-toast>

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

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

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

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

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

@@ -0,0 +1,7 @@
+<vr-toast tone.success placement.bottomright aria-label="Notifications">
+  <vr-toast-viewport>
+    <vr-toast-item>
+      <vr-toast-title>Toast</vr-toast-title>
+    </vr-toast-item>
+  </vr-toast-viewport>
+</vr-toast>

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

@@ -0,0 +1,15 @@
+.vr-tooltip {
+  display: inline-block;
+  position: relative;
+}
+
+.vr-tooltip-content {
+  background: var(--vr-surface-popover);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-sm);
+  box-shadow: var(--vr-shadow-1);
+  color: var(--vr-color-text);
+  font-size: var(--vr-font-size-sm);
+  padding: var(--vr-space-1) var(--vr-space-2);
+  z-index: var(--vr-z-tooltip);
+}

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

@@ -0,0 +1,6 @@
+<vr-tooltip side.top align.center>
+  <vr-tooltip-trigger>
+    <vr-button aria-label="Copy page" type="button">{{ label() }}</vr-button>
+  </vr-tooltip-trigger>
+  <vr-tooltip-content>Copy page</vr-tooltip-content>
+</vr-tooltip>

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

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

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

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

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

@@ -0,0 +1,6 @@
+<vr-tooltip side.top align.center>
+  <vr-tooltip-trigger>
+    <vr-button aria-label="Copy page" type="button">Copy</vr-button>
+  </vr-tooltip-trigger>
+  <vr-tooltip-content>Copy page</vr-tooltip-content>
+</vr-tooltip>