premium-ds 0.1.0

package/src/components/radio-group/radio-group.css

@@ -0,0 +1,277 @@
+/* RadioGroup - single-select in two skins: rows (dot + label) and cards (selectable tiles). */
+
+/* dot dims (18 / sm 16, inner 8 / sm 7) are bespoke, intentionally off the token ramps - don't "fix" to a token */
+.rg {
+  --rg-dot: 18px;
+  --rg-dot-inner: 8px;
+
+  display: grid;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+.rg--sm {
+  --rg-dot: 16px;
+  --rg-dot-inner: 7px;
+}
+
+.rg__head {
+  margin-bottom: var(--space-4);
+}
+.rg__label {
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+  color: var(--text-body);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  line-height: 1;
+  padding: 0;
+}
+.rg__req {
+  color: var(--danger);
+}
+.rg__optional {
+  color: var(--text-subtle);
+  font-weight: var(--weight-regular);
+}
+.rg__helper {
+  font: var(--type-caption);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+  max-width: var(--measure-prose);
+}
+
+.rg__options {
+  display: grid;
+  gap: var(--space-1);
+}
+.rg--horizontal .rg__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-5);
+}
+.rg--cards .rg__options {
+  gap: var(--space-3);
+}
+.rg--cards.rg--horizontal .rg__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+.rg--cards.rg--horizontal .rg-opt {
+  flex: 1 1 0;
+  min-width: 12rem;
+}
+
+/* align-items:flex-start pins the dot to the first text line when a description wraps below */
+.rg-opt {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  -webkit-tap-highlight-color: transparent;
+}
+.rg-opt:hover:not(.is-disabled) {
+  background: var(--bg-subtle);
+}
+
+.rg-opt__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* height = the label's line-box, so the dot optically centers on the first line */
+.rg-opt__control {
+  flex: none;
+  height: var(--leading-body);
+  display: grid;
+  place-items: center;
+}
+.rg--sm .rg-opt__control {
+  height: var(--leading-caption);
+}
+
+.rg-opt__dot {
+  position: relative;
+  width: var(--rg-dot);
+  height: var(--rg-dot);
+  border-radius: var(--radius-full);
+  /* transparent so the ring-centre gap shows the surface behind (card tint), never a white halo */
+  background: transparent;
+  border: var(--border-hairline) solid var(--border-strong);
+  /* transform stays in the bundle so the press scale eases instead of snapping */
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+/* single marker glides between dots via Motion layoutId; centred by inset:0 + margin:auto, so no CSS transition here - Motion owns the move */
+.rg__marker {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--rg-dot-inner);
+  height: var(--rg-dot-inner);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  pointer-events: none;
+  will-change: transform;
+}
+
+.rg-opt__body {
+  display: grid;
+  gap: var(--space-px);
+  padding-top: 0;
+}
+.rg-opt__label {
+  font: var(--type-body);
+  color: var(--text-strong);
+}
+.rg--sm .rg-opt__label {
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+}
+.rg-opt__desc {
+  font: var(--type-caption);
+  color: var(--text-muted);
+  text-wrap: pretty;
+}
+
+.rg-opt:hover:not(.is-disabled):not(.is-selected) .rg-opt__dot {
+  border-color: var(--text-muted);
+}
+.rg-opt:active:not(.is-disabled) .rg-opt__dot {
+  transform: scale(0.92);
+}
+
+/* .is-selected (React) drives selection, not :checked/:has - Chromium doesn't reliably invalidate those on a radio's implicit sibling-uncheck */
+.rg-opt.is-selected .rg-opt__dot {
+  border-color: var(--accent);
+}
+
+.rg-opt__input:focus-visible ~ .rg-opt__control .rg-opt__dot {
+  border-color: var(--accent);
+  box-shadow: var(--ring-accent);
+}
+
+.rg-opt.is-disabled {
+  cursor: not-allowed;
+}
+.rg-opt.is-disabled .rg-opt__label {
+  color: var(--text-disabled);
+}
+.rg-opt.is-disabled .rg-opt__desc {
+  color: var(--text-disabled);
+}
+.rg-opt.is-disabled .rg-opt__dot {
+  background: var(--bg-muted);
+  border-color: var(--border-default);
+}
+.rg-opt.is-disabled.is-selected .rg-opt__dot {
+  border-color: var(--border-strong);
+}
+.rg-opt.is-disabled.is-selected .rg__marker {
+  background: var(--text-disabled);
+}
+
+.rg--cards .rg-opt {
+  position: relative;
+  align-items: center;
+  padding: var(--space-4);
+  background: var(--bg-surface);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs);
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.rg--cards .rg-opt:hover:not(.is-disabled):not(.is-selected) {
+  background: var(--bg-surface);
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+}
+.rg--cards .rg-opt:active:not(.is-disabled) {
+  transform: translateY(var(--space-px));
+  box-shadow: var(--shadow-xs);
+}
+
+.rg--cards .rg-opt__control {
+  order: 3;
+  margin-left: auto;
+}
+.rg-opt__icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--text-muted);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.rg-opt__icon svg {
+  display: block;
+}
+
+/* selected fill is a shared layoutId layer that glides between cards - the card paints no selected bg/border of its own */
+.rg__card-fill {
+  position: absolute;
+
+  /* negative inset covers the card's hairline so the accent edge replaces it */
+  inset: calc(-1 * var(--border-hairline));
+  z-index: 0;
+  border: var(--border-hairline) solid var(--accent);
+  border-radius: var(--radius-lg);
+  background: var(--accent-subtle);
+  pointer-events: none;
+}
+.rg--cards .rg-opt > .rg-opt__icon,
+.rg--cards .rg-opt > .rg-opt__control,
+.rg--cards .rg-opt > .rg-opt__body {
+  position: relative;
+  z-index: 1;
+}
+.rg--cards .rg-opt.is-selected .rg-opt__icon {
+  color: var(--text-accent);
+}
+.rg--cards .rg-opt:has(.rg-opt__input:focus-visible) {
+  box-shadow: var(--ring-accent);
+}
+
+.rg--cards .rg-opt.is-disabled {
+  background: var(--bg-subtle);
+  border-color: var(--border-subtle);
+  box-shadow: none;
+}
+.rg--cards .rg-opt.is-disabled .rg-opt__icon {
+  color: var(--text-disabled);
+}
+
+/* in a <Collapse>: absent = zero reserved space; the padding-top is the options-message gap, inside the collapsible area */
+.rg__msg {
+  font: var(--type-caption);
+  color: var(--danger-text);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: 1em;
+  padding-top: var(--space-3);
+}
+.rg__msg i,
+.rg__msg svg {
+  flex: none;
+}
+
+.rg.is-error .rg-opt:not(.is-selected) .rg-opt__dot {
+  border-color: var(--danger);
+}
+.rg.is-error.rg--cards .rg-opt:not(.is-selected) {
+  border-color: var(--danger);
+}

package/src/components/select/MultiSelect.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+/* MultiSelect - many-of custom listbox; committing toggles a row, the menu stays open. */
+import * as React from 'react';
+import {
+  useControllable as useMsControllable,
+  normalize as msNormalize,
+  matches as msMatches,
+  useSelectMenu as useMsMenu,
+  SelectTrigger as MsTrigger,
+  SelectMenu as MsMenu,
+  SearchField as MsSearchField,
+  FilterRow as MsFilterRow,
+  EmptyRow as MsEmptyRow,
+  LoadingRows as MsLoadingRows,
+  type SelectOption,
+  type SelectGroup,
+} from './select-core';
+import { IconSlot } from '../icon/IconSlot';
+
+export interface MultiSelectProps {
+  options: SelectOption[] | SelectGroup[];
+  /** Controlled value. */
+  value?: string[];
+  defaultValue?: string[];
+  /** Fires with the NEXT array and the option that was toggled. */
+  onChange?: (value: string[], toggled: SelectOption) => void;
+  placeholder?: string;
+  size?: 'sm' | 'default' | 'lg';
+  disabled?: boolean;
+  invalid?: boolean;
+  loading?: boolean;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Your own icon node pinned before the trigger label. */
+  leadingIcon?: React.ReactNode;
+  id?: string;
+  ariaLabel?: string;
+}
+
+function CheckboxTick({ checked }: { checked: boolean }) {
+  return (
+    <span className="cbx" aria-hidden="true">
+      <input type="checkbox" className="cbx__input" tabIndex={-1} checked={checked} readOnly />
+      <span className="cbx__box">
+        <svg className="cbx__mark" viewBox="0 0 16 16" fill="none">
+          <path className="cbx__tick" d="M3.5 8.5 L6.75 11.5 L12.5 4.75" />
+        </svg>
+        <span className="cbx__dash"></span>
+      </span>
+    </span>
+  );
+}
+
+export function MultiSelect({
+  options = [],
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  placeholder = 'Select options',
+  size = 'default',
+  disabled = false,
+  invalid = false,
+  loading = false,
+  searchable = false,
+  searchPlaceholder = 'Filter options',
+  leadingIcon = null,
+  id,
+  ariaLabel,
+}: MultiSelectProps) {
+  const { useState, useRef, useEffect, useId } = React;
+  const [value, setValue] = useMsControllable<string[]>(
+    controlledValue,
+    defaultValue,
+    onChange as ((next: string[], opt?: SelectOption) => void) | undefined,
+  );
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const triggerRef = useRef<HTMLButtonElement>(null),
+    listRef = useRef<HTMLDivElement>(null),
+    searchRef = useRef<HTMLInputElement>(null);
+  const baseId = id || 'mselect-' + useId();
+  const menuId = baseId + '-menu';
+  const listId = baseId + '-list';
+
+  const { groups, flat } = msNormalize(options);
+  const values = Array.isArray(value) ? value : [];
+  const isSelected = (v: string) => values.indexOf(v) !== -1;
+  const selectedOptions = flat.filter((o) => isSelected(o.value));
+  const navItems: SelectOption[] = [];
+  groups.forEach((g) =>
+    g.options.forEach((o) => {
+      if (msMatches(o, query)) navItems.push(o);
+    }),
+  );
+
+  const show = () => {
+    if (!disabled && !loading) setOpen(true);
+  };
+  const hide = () => setOpen(false);
+  const returnFocus = () => triggerRef.current && triggerRef.current.focus();
+
+  function commit(opt: SelectOption) {
+    if (!opt || opt.disabled) return;
+    const next = isSelected(opt.value)
+      ? values.filter((v) => v !== opt.value)
+      : [...values, opt.value];
+    setValue(next, opt);
+  }
+
+  useEffect(() => {
+    if (!open) setQuery('');
+  }, [open]);
+
+  const { activeIdx, setActiveIdx, onMenuKeyDown } = useMsMenu({
+    open,
+    close: hide,
+    returnFocus,
+    triggerRef,
+    listRef,
+    searchRef,
+    menuId,
+    navItems,
+    isSelected,
+    commit,
+    searchable,
+  });
+
+  const isPlaceholder = !loading && selectedOptions.length === 0;
+  const adId = open && activeIdx >= 0 ? baseId + '-opt-' + activeIdx : undefined;
+  let vIdx = -1;
+
+  return (
+    <div
+      className="select"
+      data-multiple="true"
+      data-size={size === 'default' ? undefined : size}
+      data-open={open ? 'true' : undefined}
+      data-disabled={disabled ? 'true' : undefined}
+      data-invalid={invalid ? 'true' : undefined}
+      data-loading={loading ? 'true' : undefined}
+    >
+      <MsTrigger
+        triggerRef={triggerRef}
+        baseId={baseId}
+        open={open}
+        disabled={disabled}
+        invalid={invalid}
+        ariaLabel={ariaLabel}
+        adId={adId}
+        show={show}
+        hide={hide}
+        leading={leadingIcon || (selectedOptions.length === 1 && selectedOptions[0].icon) || null}
+        text={loading ? 'Loading...' : isPlaceholder ? placeholder : selectedOptions[0].label}
+        isPlaceholder={isPlaceholder}
+        count={selectedOptions.length - 1}
+      />
+
+      <MsMenu open={open} menuId={menuId}>
+        {searchable && !loading && (
+          <MsSearchField
+            searchRef={searchRef}
+            query={query}
+            onQuery={setQuery}
+            onKeyDown={onMenuKeyDown}
+            placeholder={searchPlaceholder}
+            listId={listId}
+            adId={adId}
+          />
+        )}
+
+        <div
+          className="select__list"
+          ref={listRef}
+          id={listId}
+          role="listbox"
+          aria-multiselectable="true"
+          tabIndex={-1}
+          aria-label={ariaLabel}
+          onKeyDown={searchable ? undefined : onMenuKeyDown}
+        >
+          {loading ? (
+            <MsLoadingRows />
+          ) : (
+            <React.Fragment>
+              {groups.map((g, gi) => (
+                <div
+                  className="select__group"
+                  role="group"
+                  aria-label={g.label || undefined}
+                  key={gi}
+                >
+                  {g.label && g.options.some((o) => msMatches(o, query)) && (
+                    <div className="select__group-label">{g.label}</div>
+                  )}
+                  {g.options.map((opt) => {
+                    const visible = msMatches(opt, query);
+                    const i = visible ? ((vIdx += 1), vIdx) : -1;
+                    const isSel = isSelected(opt.value);
+                    const row = (
+                      <div
+                        key={opt.value}
+                        id={visible ? baseId + '-opt-' + i : undefined}
+                        data-idx={visible ? i : undefined}
+                        className="select__option"
+                        role="option"
+                        aria-selected={isSel}
+                        aria-hidden={!visible || undefined}
+                        aria-disabled={opt.disabled || undefined}
+                        data-selected={isSel ? 'true' : undefined}
+                        data-active={visible && i === activeIdx ? 'true' : undefined}
+                        data-disabled={opt.disabled ? 'true' : undefined}
+                        onMouseEnter={() => visible && !opt.disabled && setActiveIdx(i)}
+                        onMouseDown={(e) => e.preventDefault() /* keep focus on list */}
+                        onClick={() => visible && commit(opt)}
+                      >
+                        {opt.icon && (
+                          <span className="select__option-icon">
+                            <IconSlot size="sm">{opt.icon}</IconSlot>
+                          </span>
+                        )}
+                        <span className="select__option-text">
+                          <span className="select__option-label">{opt.label}</span>
+                          {opt.description && (
+                            <span className="select__option-desc">{opt.description}</span>
+                          )}
+                        </span>
+                        <span className="select__option-check">
+                          <CheckboxTick checked={isSel} />
+                        </span>
+                      </div>
+                    );
+                    return searchable ? (
+                      <MsFilterRow key={opt.value} visible={visible}>
+                        {row}
+                      </MsFilterRow>
+                    ) : (
+                      row
+                    );
+                  })}
+                </div>
+              ))}
+              {navItems.length === 0 && <MsEmptyRow query={query} />}
+            </React.Fragment>
+          )}
+        </div>
+      </MsMenu>
+    </div>
+  );
+}