@webjsdev/ui 0.3.1 → 0.3.2

package/packages/registry/components/toggle-group.ts

@@ -0,0 +1,236 @@
+/**
+ * ToggleGroup: group of toggles with single- or multiple-selection.
+ * Tier-2; items coordinate active state across the group, so this is
+ * a custom element (not a class helper). Items are styled via
+ * `toggleClass()` from `./toggle.ts` so the visual matches a single
+ * toggle exactly.
+ *
+ * shadcn parity:
+ *   ToggleGroup (type: single | multiple)
+ *               (variant: default | outline)
+ *               (size:    default | sm | lg)
+ *                                 → <ui-toggle-group type variant size value>
+ *   ToggleGroupItem               → <ui-toggle-group-item value>
+ *
+ * Usage:
+ *   <ui-toggle-group type="single" value="bold">
+ *     <ui-toggle-group-item value="bold" aria-label="Bold"><b>B</b></ui-toggle-group-item>
+ *     <ui-toggle-group-item value="italic" aria-label="Italic"><i>I</i></ui-toggle-group-item>
+ *     <ui-toggle-group-item value="underline" aria-label="Underline"><u>U</u></ui-toggle-group-item>
+ *   </ui-toggle-group>
+ *
+ *   <!-- Multiple selection (comma-separated value): -->
+ *   <ui-toggle-group type="multiple" value="bold,italic">
+ *     <ui-toggle-group-item value="bold">B</ui-toggle-group-item>
+ *     <ui-toggle-group-item value="italic">I</ui-toggle-group-item>
+ *   </ui-toggle-group>
+ *
+ * Attributes on <ui-toggle-group>:
+ *   `type`:        "single" (default) | "multiple".
+ *   `value`:       string. Selected value(s). Single: a single value;
+ *                  multiple: comma-separated values.
+ *   `variant`:     "default" (default) | "outline".
+ *   `size`:        "default" (default) | "sm" | "lg".
+ *   `spacing`:     "0" (default, joined corners) | "default" (gapped).
+ *   `orientation`: "horizontal" (default) | "vertical".
+ *
+ * Attributes on <ui-toggle-group-item>:
+ *   `value`:   string. Identifier this item contributes when selected.
+ *   `pressed`: boolean (reflected). Mirrors the group's selection for this item.
+ *
+ * Events:
+ *   `ui-value-change` on <ui-toggle-group>: `{ detail: { value } }` after selection changes.
+ *
+ * Keyboard: Enter / Space toggles the focused item (native button activation).
+ *
+ * Design tokens used: inherited from toggleClass (--muted, --accent, --ring,
+ * --input, --destructive).
+ */
+import { WebComponent, html } from '@webjsdev/core';
+import { cn } from '../lib/utils.ts';
+import { toggleClass, type ToggleVariant, type ToggleSize } from './toggle.ts';
+
+const ROOT_BASE =
+  'group/toggle-group flex w-fit items-center rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch';
+
+const ITEM_EXTRA =
+  'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l';
+
+// --------------------------------------------------------------------------
+// <ui-toggle-group>
+// Renders a wrapping <div role="group"> with the @ui-toggle-item-click
+// listener bound declaratively. Children project through the slot. Item
+// state (data-state, aria-pressed) is reflected from updated() so the
+// effect runs after the host's commit. A queueMicrotask defer inside
+// gives the descendant <ui-toggle-group-item> components time to commit
+// their own renders before we read / write their state.
+// --------------------------------------------------------------------------
+
+export class UiToggleGroup extends WebComponent {
+  static properties = {
+    value: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    spacing: { type: String, reflect: true },
+    orientation: { type: String, reflect: true },
+  };
+  declare value: string;
+  declare type: 'single' | 'multiple';
+  declare variant: ToggleVariant;
+  declare size: ToggleSize;
+  declare spacing: string;
+  declare orientation: 'horizontal' | 'vertical';
+
+  constructor() {
+    super();
+    this.value = '';
+    this.type = 'single';
+    this.variant = 'default';
+    this.size = 'default';
+    this.spacing = '0';
+    this.orientation = 'horizontal';
+  }
+
+  get _values(): Set<string> {
+    const raw = this.value ?? '';
+    return new Set(raw ? raw.split(',').map((s) => s.trim()).filter(Boolean) : []);
+  }
+
+  render() {
+    const gap = this.spacing === '0' ? '' : 'gap-1';
+    return html`<div
+      data-slot="toggle-group"
+      role="group"
+      class=${cn(ROOT_BASE, gap)}
+      data-variant=${this.variant}
+      data-size=${this.size}
+      data-spacing=${this.spacing}
+      data-orientation=${this.orientation}
+      @ui-toggle-item-click=${this._onItemClick}
+    ><slot></slot></div>`;
+  }
+
+  updated(): void {
+    // Reflect group state onto each <ui-toggle-group-item>. One microtask
+    // gives the items time to commit their own renders first.
+    queueMicrotask(() => this._reflectItems());
+  }
+
+  _reflectItems(): void {
+    const values = this._values;
+    this.querySelectorAll<UiToggleGroupItem>('ui-toggle-group-item').forEach((item) => {
+      const on = !!item.value && values.has(item.value);
+      // Reflect both on the host (for CSS sibling selectors like
+      // data-[spacing=0]:first:rounded-l-md that need to target the host
+      // as a sibling of other items) and as a reactive prop so the
+      // item's render() refreshes its inner styling.
+      item.pressed = on;
+    });
+  }
+
+  _onItemClick = (e: Event): void => {
+    const v = (e as CustomEvent).detail?.value as string | undefined;
+    if (!v) return;
+    const values = this._values;
+    if (this.type === 'single') {
+      values.clear();
+      values.add(v);
+    } else if (values.has(v)) {
+      values.delete(v);
+    } else {
+      values.add(v);
+    }
+    const next = Array.from(values).join(',');
+    this.value = this.type === 'single' ? (next.split(',')[0] ?? '') : next;
+    this.dispatchEvent(
+      new CustomEvent('ui-value-change', { detail: { value: this.value }, bubbles: true }),
+    );
+  };
+}
+UiToggleGroup.register('ui-toggle-group');
+
+// --------------------------------------------------------------------------
+// <ui-toggle-group-item>
+// Renders a native <button> styled via toggleClass; emits a bubbling
+// `ui-toggle-item-click` event with detail.value so the group can
+// coordinate selection. Variant / size / spacing read from the group
+// at render time (data-* attributes on the host carry them for
+// Tailwind variant selectors on the joined-spacing rounded corners).
+// --------------------------------------------------------------------------
+
+export class UiToggleGroupItem extends WebComponent {
+  static properties = {
+    value: { type: String, reflect: true },
+    pressed: { type: Boolean, reflect: true },
+  };
+  declare value: string;
+  declare pressed: boolean;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.pressed = false;
+  }
+
+  // render() runs server-side too. linkedom doesn't implement closest()
+  // on custom elements, so guard it; the client re-renders with the
+  // real parent reference after hydration.
+  get _group(): UiToggleGroup | null {
+    if (typeof this.closest !== 'function') return null;
+    return this.closest('ui-toggle-group') as UiToggleGroup | null;
+  }
+
+  // Compound-component caveat: the host element carries the visual
+  // class + data-* attributes (not an inner <button>) so CSS sibling
+  // selectors like `data-[spacing=0]:first:rounded-l-md` match it as
+  // a sibling of other items in the group. Light DOM has no :host CSS
+  // and no way to bind host attributes from a render() template, so
+  // ARIA + static markup attributes go in connectedCallback (set once)
+  // and the parent-derived data-* + class string get refreshed in
+  // render(). Click + keyboard listeners live on the host because the
+  // click target IS the host (the styled element under the cursor).
+  connectedCallback(): void {
+    this.dataset.slot = 'toggle-group-item';
+    this.role = 'button';
+    this.tabIndex = 0;
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKeyDown);
+    super.connectedCallback?.();
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener('click', this._onClick);
+    this.removeEventListener('keydown', this._onKeyDown);
+    super.disconnectedCallback?.();
+  }
+
+  render() {
+    const group = this._group;
+    const variant = (group?.variant ?? 'default') as ToggleVariant;
+    const size = (group?.size ?? 'default') as ToggleSize;
+    const spacing = group?.spacing ?? '0';
+    this.dataset.variant = variant;
+    this.dataset.size = size;
+    this.dataset.spacing = spacing;
+    this.dataset.state = this.pressed ? 'on' : 'off';
+    this.ariaPressed = String(this.pressed);
+    this.className = cn(toggleClass({ variant, size }), ITEM_EXTRA);
+    return html`<slot></slot>`;
+  }
+
+  _onClick = (): void => {
+    if (!this.value) return;
+    this.dispatchEvent(
+      new CustomEvent('ui-toggle-item-click', { detail: { value: this.value }, bubbles: true }),
+    );
+  };
+
+  _onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this._onClick();
+    }
+  };
+}
+UiToggleGroupItem.register('ui-toggle-group-item');

package/packages/registry/components/toggle.ts

@@ -0,0 +1,118 @@
+/**
+ * Toggle: pressable on / off button. Ships both as a Tier-1 class helper
+ * (for callers that want to own pressed state on a native `<button>`)
+ * and as the Tier-2 `<ui-toggle>` custom element (for callers that want
+ * state managed for them).
+ *
+ * shadcn parity:
+ *   Toggle (variant: default | outline)
+ *          (size:    default | sm | lg)
+ *                                 → toggleClass({ variant, size })  (class helper)
+ *                                 → <ui-toggle pressed variant size>  (custom element)
+ *
+ * Usage (Tier-1 class helper, caller owns state):
+ *   <button class=${toggleClass()} data-state="off" aria-pressed="false"
+ *           onclick="this.dataset.state = this.dataset.state==='on'?'off':'on'">
+ *     <svg>…</svg>
+ *   </button>
+ *
+ * Usage (Tier-2 custom element, state managed):
+ *   <ui-toggle aria-label="Toggle bold">
+ *     <svg>…</svg>
+ *   </ui-toggle>
+ *
+ *   <!-- Controlled / initial: -->
+ *   <ui-toggle variant="outline" size="sm" pressed>B</ui-toggle>
+ *
+ * Attributes on <ui-toggle>:
+ *   `pressed`:  boolean (reflected). Active state.
+ *   `variant`:  "default" (default) | "outline".
+ *   `size`:     "default" (default) | "sm" | "lg".
+ *   `disabled`: boolean (reflected). Disables click + focus.
+ *
+ * Events:
+ *   `ui-pressed-change` on <ui-toggle>: `{ detail: { pressed } }` after a click.
+ *
+ * Keyboard: native button — Enter / Space activates (via the inner <button>).
+ *
+ * Design tokens used: --muted, --muted-foreground, --accent, --accent-foreground,
+ * --input, --background, --ring, --destructive.
+ */
+import { WebComponent, html } from '@webjsdev/core';
+import { cn } from '../lib/utils.ts';
+
+// cursor-pointer + select-none on BASE for both call sites: the
+// class-helper applied to a native <button> (where shadcn's upstream
+// also omits it; see the same convention the button fix applies) and
+// the <ui-toggle> custom element. select-none prevents drag-selecting
+// icon/label glyphs that aren't meant to be selectable. disabled:
+// pointer-events-none below already suppresses cursor for disabled buttons.
+const BASE =
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap select-none transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+const VARIANTS = {
+  default: 'bg-transparent',
+  outline:
+    'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+} as const;
+
+const SIZES = {
+  default: 'h-9 min-w-9 px-2',
+  sm: 'h-8 min-w-8 px-1.5',
+  lg: 'h-10 min-w-10 px-2.5',
+} as const;
+
+export type ToggleVariant = keyof typeof VARIANTS;
+export type ToggleSize = keyof typeof SIZES;
+
+export function toggleClass(opts: { variant?: ToggleVariant; size?: ToggleSize } = {}): string {
+  return cn(BASE, VARIANTS[opts.variant ?? 'default'], SIZES[opts.size ?? 'default']);
+}
+
+// --------------------------------------------------------------------------
+// <ui-toggle> wraps a native <button> and tracks pressed state. Native
+// <button> handles Enter/Space → click + focus + disabled semantics for
+// free; we only own the pressed-state toggle on click. Authored children
+// project through the default slot inside the inner button.
+// --------------------------------------------------------------------------
+
+export class UiToggle extends WebComponent {
+  static properties = {
+    pressed: { type: Boolean, reflect: true },
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+  declare pressed: boolean;
+  declare variant: ToggleVariant;
+  declare size: ToggleSize;
+  declare disabled: boolean;
+
+  constructor() {
+    super();
+    this.pressed = false;
+    this.variant = 'default';
+    this.size = 'default';
+    this.disabled = false;
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      data-slot="toggle"
+      class=${toggleClass({ variant: this.variant, size: this.size })}
+      aria-pressed=${String(this.pressed)}
+      data-state=${this.pressed ? 'on' : 'off'}
+      ?disabled=${this.disabled}
+      @click=${this._onClick}
+    ><slot></slot></button>`;
+  }
+
+  _onClick = (): void => {
+    this.pressed = !this.pressed;
+    this.dispatchEvent(
+      new CustomEvent('ui-pressed-change', { detail: { pressed: this.pressed }, bubbles: true }),
+    );
+  };
+}
+UiToggle.register('ui-toggle');

package/packages/registry/components/tooltip.ts

@@ -0,0 +1,195 @@
+/**
+ * Tooltip: hover- / focus-triggered floating tip. Tier-2. The content
+ * uses the native Popover API in `popover="manual"` mode for top-layer
+ * rendering (no z-index wars); the custom element owns the
+ * hover-with-delay state machine and JS positioning.
+ *
+ * shadcn parity:
+ *   Tooltip               → <ui-tooltip delay-duration skip-delay-duration>
+ *   TooltipTrigger        → <ui-tooltip-trigger>
+ *   TooltipContent        → <ui-tooltip-content side align side-offset align-offset>
+ *   TooltipProvider       → not needed; delay state is per-tooltip (and globally
+ *                           shared via `skip-delay-duration` cooldown).
+ *
+ * Usage:
+ *   <ui-tooltip delay-duration="500" skip-delay-duration="300">
+ *     <ui-tooltip-trigger>
+ *       <button class=${buttonClass({ size: 'icon', variant: 'ghost' })} aria-label="Help">?</button>
+ *     </ui-tooltip-trigger>
+ *     <ui-tooltip-content side="top">Helpful tip</ui-tooltip-content>
+ *   </ui-tooltip>
+ *
+ * Attributes on <ui-tooltip>:
+ *   `open`:                boolean (reflected). Open state.
+ *   `delay-duration`:      ms, default 700. Initial hover delay before opening.
+ *   `skip-delay-duration`: ms, default 300. Window after a tooltip closes
+ *                          during which the next tooltip skips its
+ *                          `delay-duration` (so moving between adjacent
+ *                          triggers feels instant).
+ *
+ * Attributes on <ui-tooltip-content>:
+ *   `side`:         "top" (default) | "right" | "bottom" | "left".
+ *   `align`:        "center" (default) | "start" | "end".
+ *   `side-offset`:  number, default 4. Pixels between trigger and content.
+ *   `align-offset`: number, default 0. Pixels of cross-axis shift.
+ *
+ * Events: none dispatched at present (hover state changes are local;
+ * use the reflected `open` attribute to observe state from CSS).
+ *
+ * Programmatic API on <ui-tooltip>: `.show()` · `.hide()`.
+ *
+ * Design tokens used: --foreground, --background.
+ */
+import { WebComponent, html } from '@webjsdev/core';
+import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
+
+// UA `[popover]` defaults paint a bordered, padded panel centered with
+// `margin: auto`; the class string opts out via `m-0` + `border-0` and
+// layers the shadcn look on top. `fixed` keeps JS-computed top/left in
+// top layer. UA `[popover]:not(:popover-open) { display: none }` keeps
+// the closed state hidden.
+export const tooltipContentClass = (): string =>
+  'fixed z-50 w-fit m-0 border-0 overflow-visible rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background';
+
+// Module-level "last close" timestamp, shared across every <ui-tooltip>
+// on the page. When the next tooltip is hovered within
+// `skip-delay-duration` ms of this stamp, it skips its delay-duration
+// wait and opens immediately. Matches shadcn TooltipProvider.skipDelayDuration.
+let lastTooltipHideAt = 0;
+
+// --------------------------------------------------------------------------
+// <ui-tooltip>
+// --------------------------------------------------------------------------
+
+export class UiTooltip extends WebComponent {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+  };
+  declare open: boolean;
+
+  _showTimer: number | undefined;
+  _hideTimer: number | undefined;
+
+  constructor() {
+    super();
+    this.open = false;
+  }
+
+  // Back-compat getter for tests + external code that read `el.isOpen`
+  // alongside the reactive `open` prop.
+  get isOpen(): boolean { return this.open; }
+
+  show(): void {
+    clearTimeout(this._showTimer);
+    clearTimeout(this._hideTimer);
+    const delay = Number(this.getAttribute('delay-duration') ?? 700);
+    const skipDelay = Number(this.getAttribute('skip-delay-duration') ?? 300);
+    const sinceLastHide = Date.now() - lastTooltipHideAt;
+    if (lastTooltipHideAt > 0 && sinceLastHide < skipDelay) {
+      this.open = true;
+      return;
+    }
+    this._showTimer = window.setTimeout(() => { this.open = true; }, delay);
+  }
+
+  hide(): void {
+    clearTimeout(this._showTimer);
+    this._hideTimer = window.setTimeout(() => {
+      this.open = false;
+      lastTooltipHideAt = Date.now();
+    }, 100);
+  }
+
+  render() {
+    return html`<div
+      data-slot="tooltip"
+      data-state=${this.open ? 'open' : 'closed'}
+    ><slot></slot></div>`;
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (!changedProperties.has('open')) return;
+    // Skip the constructor's initial open=false set.
+    if (changedProperties.get('open') === undefined) return;
+    // Defer one microtask so the content child's [popover] inner element
+    // has committed; we drive its showPopover() / hidePopover() from here.
+    queueMicrotask(() => this._syncContent());
+  }
+
+  _syncContent(): void {
+    // <ui-tooltip-content> renders a `<div popover="manual">` inside its
+    // slot output; the popover API lives on that inner div, not the
+    // host. Query past the host to the actual popover element.
+    const popover = this.querySelector<HTMLElement>('ui-tooltip-content [popover]');
+    const host = this.querySelector<HTMLElement>('ui-tooltip-content');
+    if (!popover || !popover.isConnected) return;
+    const p = popover as HTMLElement & {
+      showPopover?: () => void;
+      hidePopover?: () => void;
+      matches: (s: string) => boolean;
+    };
+    if (typeof p.showPopover !== 'function') return;
+    if (this.open) {
+      if (!p.matches(':popover-open')) p.showPopover();
+      if (host) this._reposition(host, popover);
+    } else if (p.matches(':popover-open')) {
+      p.hidePopover();
+    }
+  }
+
+  _reposition(contentHost: HTMLElement, popover: HTMLElement): void {
+    const trigger = this.querySelector<HTMLElement>('ui-tooltip-trigger');
+    if (!trigger) return;
+    // Placement attributes live on the <ui-tooltip-content> host (the
+    // public API surface); positioning targets the inner popover element.
+    positionFloating(trigger, popover, {
+      side: (contentHost.getAttribute('side') ?? 'top') as PopoverSide,
+      align: (contentHost.getAttribute('align') ?? 'center') as PopoverAlign,
+      sideOffset: Number(contentHost.getAttribute('side-offset') ?? 4),
+      alignOffset: Number(contentHost.getAttribute('align-offset') ?? 0),
+    });
+  }
+}
+UiTooltip.register('ui-tooltip');
+
+// --------------------------------------------------------------------------
+// <ui-tooltip-trigger>
+// Wraps the user's focusable element. Hover/focus handlers live on the
+// rendered wrapper via declarative bindings; no manual addEventListener
+// or disconnect cleanup is needed.
+// --------------------------------------------------------------------------
+
+export class UiTooltipTrigger extends WebComponent {
+  render() {
+    return html`<div
+      data-slot="tooltip-trigger"
+      @mouseenter=${this._onEnter}
+      @mouseleave=${this._onLeave}
+      @focusin=${this._onEnter}
+      @focusout=${this._onLeave}
+    ><slot></slot></div>`;
+  }
+
+  _onEnter = (): void => (this.closest('ui-tooltip') as UiTooltip | null)?.show();
+  _onLeave = (): void => (this.closest('ui-tooltip') as UiTooltip | null)?.hide();
+}
+UiTooltipTrigger.register('ui-tooltip-trigger');
+
+// --------------------------------------------------------------------------
+// <ui-tooltip-content>
+// Renders a `<div popover="manual" role="tooltip">` (the floating panel).
+// The popover attribute is declarative on the inner element, so the
+// browser registers it as a popover before the parent calls showPopover.
+// --------------------------------------------------------------------------
+
+export class UiTooltipContent extends WebComponent {
+  render() {
+    return html`<div
+      data-slot="tooltip-content"
+      role="tooltip"
+      popover="manual"
+      class=${tooltipContentClass()}
+    ><slot></slot></div>`;
+  }
+}
+UiTooltipContent.register('ui-tooltip-content');