@yarcl/react 0.1.0 → 0.2.0

package/src/components/Tabs.tsx

@@ -1,159 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useId,
-  type ComponentProps,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-import { colorClass, cx, sizeClass } from '../classes';
-import { useControllable } from '../hooks';
-import type { Color, Size } from '../types';
-import { useDefaults } from '../runtime';
-
-
-interface TabsContextValue {
-  value: string;
-  select: (value: string) => void;
-  idFor: (kind: 'tab' | 'panel', value: string) => string;
-}
-
-const TabsContext = createContext<TabsContextValue | null>(null);
-
-function useTabsContext(component: string) {
-  const context = useContext(TabsContext);
-  if (!context) throw new Error(`yarcl: <${component}> must be inside <Tabs>`);
-  return context;
-}
-
-/** Props shared by both forms of {@link TabsProps}. */
-export interface TabsBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'color'> {
-  /** Called with the newly selected tab's value. */
-  onValueChange?: (value: string) => void;
-  /**
-   * Tab height and font size, from the `sizes` config.
-   * @default config.defaults.size
-   */
-  size?: Size;
-  /**
-   * Color of the selected tab's indicator, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-}
-
-/** Props for {@link Tabs}. Pass `value` (controlled) or `defaultValue` (uncontrolled). */
-export type TabsProps = TabsBaseProps &
-  (
-    | { /** Selected tab (controlled). */ value: string; defaultValue?: never }
-    | { value?: never; /** Initially selected tab (uncontrolled). */ defaultValue: string }
-  );
-
-function TabsRoot({ value: valueProp, defaultValue, onValueChange, size, color, className, ...props }: TabsProps) {
-  const own = useDefaults('Tabs');
-  const [value, select] = useControllable(valueProp, defaultValue ?? '', onValueChange);
-  const baseId = useId();
-  const idFor = (kind: 'tab' | 'panel', v: string) => `${baseId}-${kind}-${v.replace(/[^\w-]/g, '_')}`;
-  return (
-    <TabsContext.Provider value={{ value, select, idFor }}>
-      <div className={cx('yarcl-tabs', sizeClass(size ?? own.size), colorClass(color ?? own.color), className)} {...props} />
-    </TabsContext.Provider>
-  );
-}
-
-/** Props for `Tabs.List`. */
-export interface TabsListProps extends ComponentProps<'div'> {
-  /** `Tabs.Trigger`s. */
-  children?: ReactNode;
-}
-
-function TabsList({ className, onKeyDown, ...props }: TabsListProps) {
-  const { select } = useTabsContext('Tabs.List');
-
-  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
-    onKeyDown?.(event);
-    const tabs = [...event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)')];
-    const current = tabs.indexOf(document.activeElement as HTMLButtonElement);
-    if (current === -1) return;
-    const next = {
-      ArrowRight: (current + 1) % tabs.length,
-      ArrowLeft: (current - 1 + tabs.length) % tabs.length,
-      Home: 0,
-      End: tabs.length - 1,
-    }[event.key];
-    if (next === undefined) return;
-    event.preventDefault();
-    tabs[next].focus();
-    select(tabs[next].dataset.value!);
-  }
-
-  return <div role="tablist" className={cx('yarcl-tabs-list', className)} onKeyDown={handleKeyDown} {...props} />;
-}
-
-/** Props for `Tabs.Trigger`. */
-export interface TabsTriggerProps extends Omit<ComponentProps<'button'>, 'value'> {
-  /** Identifies the tab; matches a `Tabs.Panel`'s `value`. */
-  value: string;
-}
-
-function TabsTrigger({ value, className, onClick, ...props }: TabsTriggerProps) {
-  const context = useTabsContext('Tabs.Trigger');
-  const selected = context.value === value;
-  return (
-    <button
-      type="button"
-      role="tab"
-      id={context.idFor('tab', value)}
-      aria-controls={context.idFor('panel', value)}
-      aria-selected={selected}
-      tabIndex={selected ? 0 : -1}
-      data-value={value}
-      className={cx('yarcl-tabs-trigger', className)}
-      onClick={(event) => {
-        onClick?.(event);
-        context.select(value);
-      }}
-      {...props}
-    />
-  );
-}
-
-/** Props for `Tabs.Panel`. */
-export interface TabsPanelProps extends Omit<ComponentProps<'div'>, 'value'> {
-  /** Matches the `value` of the `Tabs.Trigger` that shows this panel. */
-  value: string;
-}
-
-function TabsPanel({ value, className, ...props }: TabsPanelProps) {
-  const context = useTabsContext('Tabs.Panel');
-  const selected = context.value === value;
-  return (
-    <div
-      role="tabpanel"
-      id={context.idFor('panel', value)}
-      aria-labelledby={context.idFor('tab', value)}
-      tabIndex={0}
-      hidden={!selected}
-      className={cx('yarcl-tabs-panel', className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Switches between panels of content. Arrow keys move between tabs, Home and End jump to the ends.
- * Tab height comes from the shared size scale.
- *
- * @example
- * ```tsx
- * <Tabs defaultValue="overview">
- *   <Tabs.List aria-label="Project">
- *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
- *     <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
- *   </Tabs.List>
- *   <Tabs.Panel value="overview">…</Tabs.Panel>
- *   <Tabs.Panel value="settings">…</Tabs.Panel>
- * </Tabs>
- * ```
- */
-export const Tabs = Object.assign(TabsRoot, { List: TabsList, Trigger: TabsTrigger, Panel: TabsPanel });

package/src/components/Text.tsx

@@ -1,67 +0,0 @@
-import type { ComponentProps, CSSProperties } from 'react';
-import { colorClass, cx, typeClass } from '../classes';
-import type { Color, TextStyle } from '../types';
-import { useConfig, useDefaults } from '../runtime';
-
-
-/** Elements {@link Text} can render as. */
-export type TextElement = 'span' | 'p' | 'div' | 'strong' | 'em' | 'small' | 'code' | 'label';
-
-/** Props for {@link Text}. */
-export interface TextProps extends Omit<ComponentProps<'span'>, 'color'> {
-  /**
-   * Element to render.
-   * @default 'span'
-   */
-  as?: TextElement;
-  /**
-   * Text style, from the `typography.styles` config.
-   * @default config.defaults.textStyle
-   */
-  textStyle?: TextStyle;
-  /** Semantic color, from the `colors` config. Inherits the surrounding color when omitted. */
-  color?: Color;
-  /** Uses the muted neutral color, for secondary text. */
-  muted?: boolean;
-  /** Truncates with an ellipsis: `true` for one line, a number for that many lines. */
-  truncate?: boolean | number;
-}
-
-/**
- * Text in one of the consumer's text styles.
- *
- * @example
- * ```tsx
- * <Text as="p" textStyle="caption" muted>Updated 2 minutes ago</Text>
- * ```
- */
-export function Text({
-  as = 'span',
-  textStyle,
-  color,
-  muted,
-  truncate,
-  className,
-  style,
-  ...props
-}: TextProps) {
-  const config = useConfig();
-  const own = useDefaults('Text');
-  const Tag = as as 'span';
-  const lines = truncate === true ? 1 : truncate || 0;
-  return (
-    <Tag
-      className={cx(
-        'yarcl-text',
-        typeClass(textStyle ?? own.textStyle ?? config.defaults.textStyle),
-        (color ?? own.color) && cx('yarcl-text-colored', colorClass(color ?? own.color)),
-        muted && 'yarcl-text-muted',
-        lines === 1 && 'yarcl-text-truncate',
-        lines > 1 && 'yarcl-text-clamp',
-        className,
-      )}
-      style={lines > 1 ? ({ '--yarcl-lines': lines, ...style } as CSSProperties) : style}
-      {...props}
-    />
-  );
-}

package/src/components/Textarea.tsx

@@ -1,26 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx, radiusClass, sizeClass } from '../classes';
-import { useFieldProps } from '../field-context';
-import type { TokenProps } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Textarea}. Accepts all native `<textarea>` attributes except `color`. */
-export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'color'>, TokenProps {}
-
-/**
- * A multi-line text input. Uses the size's font size and padding, and grows from
- * a minimum of one control height. Inside a {@link Field}, it is labelled and described automatically.
- *
- * @example
- * ```tsx
- * <Textarea rows={4} placeholder="Message" />
- * ```
- */
-export function Textarea(props: TextareaProps) {
-  const own = useDefaults('Textarea');
-  const { size, radius, color, className, ...rest } = useFieldProps(props);
-  return (
-    <textarea className={cx('yarcl-textarea', sizeClass(size ?? own.size), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className)} {...rest} />
-  );
-}

package/src/components/Toast.tsx

@@ -1,190 +0,0 @@
-import { useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import { colorClass, cx } from '../classes';
-import type { Color } from '../types';
-import { useConfig, useDefaults } from '../runtime';
-
-
-/** Options for {@link toast}. */
-export interface ToastOptions {
-  /** Main message. */
-  title: ReactNode;
-  /** Supporting text. */
-  description?: ReactNode;
-  /**
-   * Accent color, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-  /**
-   * Time before it dismisses itself, in ms. Paused while hovered or focused. `0` keeps it until dismissed.
-   * @default config.timing.toastDuration
-   */
-  duration?: number;
-  /** A single action, e.g. Undo. Choosing it dismisses the toast. */
-  action?: { label: string; onClick: () => void };
-  /** Announces immediately (`role="alert"`) instead of politely. Use for errors that need attention. */
-  urgent?: boolean;
-}
-
-interface ToastEntry extends ToastOptions {
-  id: string;
-}
-
-let entries: ToastEntry[] = [];
-let counter = 0;
-const listeners = new Set<() => void>();
-
-function emit(next: ToastEntry[]) {
-  entries = next;
-  listeners.forEach((listener) => listener());
-}
-
-function subscribe(listener: () => void) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-
-/**
- * Shows a toast notification. Requires one {@link Toaster} rendered in the app.
- * Returns the toast's id, for {@link toast.dismiss}.
- *
- * @example
- * ```ts
- * toast({ title: 'Saved', color: 'success' });
- * toast({ title: 'Message deleted', action: { label: 'Undo', onClick: restore } });
- * ```
- */
-export function toast(options: ToastOptions): string {
-  const id = `yarcl-toast-${++counter}`;
-  emit([...entries, { id, ...options }]);
-  return id;
-}
-
-/** Dismisses a toast by id, or all toasts when called without one. */
-toast.dismiss = (id?: string) => emit(id ? entries.filter((entry) => entry.id !== id) : []);
-
-/** Props for {@link Toaster}. */
-export interface ToasterProps {
-  /**
-   * Screen corner or edge where toasts appear.
-   * @default 'bottom-right'
-   */
-  placement?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-  /**
-   * Maximum toasts shown at once. When exceeded, the oldest are dismissed.
-   * @default 4
-   */
-  limit?: number;
-  /**
-   * Accessible name of the notifications region.
-   * @default 'Notifications'
-   */
-  label?: string;
-}
-
-function useModalHost() {
-  const [host, setHost] = useState<HTMLElement | null>(null);
-  useEffect(() => {
-    const update = () => {
-      const modals = [...document.querySelectorAll('dialog')].filter((dialog) => dialog.matches(':modal'));
-      setHost(modals.at(-1) ?? null);
-    };
-    const observer = new MutationObserver(update);
-    observer.observe(document.body, { subtree: true, childList: true, attributes: true, attributeFilter: ['open'] });
-    update();
-    return () => observer.disconnect();
-  }, []);
-  return host;
-}
-
-/**
- * Renders toasts created with {@link toast}. Render once, near the app root.
- * Lives in the browser's top layer, so toasts show above everything. While a modal
- * {@link Dialog} or {@link Drawer} is open, toasts render inside it so they stay interactive.
- *
- * @example
- * ```tsx
- * <App />
- * <Toaster placement="top-right" />
- * ```
- */
-export function Toaster({ placement = 'bottom-right', limit = 4, label = 'Notifications' }: ToasterProps) {
-  const all = useSyncExternalStore(subscribe, () => entries, () => entries);
-  const visible = all.slice(-limit);
-  const ref = useRef<HTMLElement>(null);
-  const host = useModalHost();
-
-  useEffect(() => {
-    if (all.length > limit) emit(all.slice(-limit));
-  }, [all, limit]);
-
-  useEffect(() => {
-    const region = ref.current;
-    if (!region?.showPopover) return;
-    if (region.matches(':popover-open')) region.hidePopover();
-    if (visible.length > 0) region.showPopover();
-  }, [visible.length, all, host]);
-
-  const region = (
-    <section
-      ref={ref}
-      popover="manual"
-      aria-label={label}
-      className={cx('yarcl-toaster', `yarcl-toaster-${placement}`)}
-    >
-      {(placement.startsWith('top') ? [...visible].reverse() : visible).map((entry) => (
-        <ToastItem key={entry.id} entry={entry} />
-      ))}
-    </section>
-  );
-
-  return host ? createPortal(region, host) : region;
-}
-
-function ToastItem({ entry }: { entry: ToastEntry }) {
-  const own = useDefaults('Toast');
-  const config = useConfig();
-  const { id, title, description, color, action, urgent } = entry;
-  const duration = entry.duration ?? config.timing.toastDuration;
-  const [paused, setPaused] = useState(false);
-
-  useEffect(() => {
-    if (paused || duration <= 0) return;
-    const timer = setTimeout(() => toast.dismiss(id), duration);
-    return () => clearTimeout(timer);
-  }, [id, duration, paused]);
-
-  return (
-    <div
-      role={urgent ? 'alert' : 'status'}
-      className={cx('yarcl-toast', colorClass(color ?? own.color))}
-      onMouseEnter={() => setPaused(true)}
-      onMouseLeave={() => setPaused(false)}
-      onFocus={() => setPaused(true)}
-      onBlur={() => setPaused(false)}
-    >
-      <div className="yarcl-toast-text">
-        <div className="yarcl-toast-title">{title}</div>
-        {description != null && <div className="yarcl-toast-description">{description}</div>}
-      </div>
-      {action && (
-        <button
-          type="button"
-          className="yarcl-toast-action"
-          onClick={() => {
-            action.onClick();
-            toast.dismiss(id);
-          }}
-        >
-          {action.label}
-        </button>
-      )}
-      <button type="button" className="yarcl-toast-close" aria-label="Dismiss" onClick={() => toast.dismiss(id)}>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-          <path d="M6 6l12 12M18 6 6 18" />
-        </svg>
-      </button>
-    </div>
-  );
-}

package/src/components/ToggleGroup.tsx

@@ -1,227 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useLayoutEffect,
-  useRef,
-  type ComponentProps,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-import { cx } from '../classes';
-import { useControllable } from '../hooks';
-import type { Color, Radius, Size, Variant } from '../types';
-import { Button } from './Button';
-import { useConfig, useDefaults } from '../runtime';
-
-
-interface ToggleGroupContextValue {
-  selected: string[];
-  toggle: (value: string) => void;
-  size?: Size;
-  color?: Color;
-  radius?: Radius | 'size';
-  variant: Variant;
-  selectedVariant: Variant;
-  disabled?: boolean;
-}
-
-const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);
-
-/** Props shared by both forms of {@link ToggleGroupProps}. */
-export interface ToggleGroupBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'color'> {
-  /** Size of every item, from the `sizes` config. */
-  size?: Size;
-  /** Color of every item, from the `colors` config. */
-  color?: Color;
-  /** Radius of every item, from the `radii` config, or `'size'` to match the item size. */
-  radius?: Radius | 'size';
-  /**
-   * Variant of unselected items, from the `variants` config.
-   * @default config.defaults.softVariant
-   */
-  variant?: Variant;
-  /**
-   * Variant of selected items, from the `variants` config.
-   * @default config.defaults.variant
-   */
-  selectedVariant?: Variant;
-  /**
-   * Joins the items into one segmented control.
-   * @default true
-   */
-  attached?: boolean;
-  /** Disables every item. */
-  disabled?: boolean;
-  /** `ToggleGroup.Item`s. */
-  children?: ReactNode;
-}
-
-/** Props for {@link ToggleGroup}. `type` decides whether one or many items can be on. */
-export type ToggleGroupProps = ToggleGroupBaseProps &
-  (
-    | {
-        /** One item on at a time, like a segmented control. */
-        type: 'single';
-        /** Controlled selected value. */
-        value?: string | null;
-        /** Initially selected value when uncontrolled. */
-        defaultValue?: string | null;
-        /** Called with the selected value, or `null` when the selected item is turned off. */
-        onValueChange?: (value: string | null) => void;
-        /** Prevents turning the selected item off, so one is always on. */
-        required?: boolean;
-      }
-    | {
-        /** Any number of items on, like formatting buttons. */
-        type: 'multiple';
-        /** Controlled selected values. */
-        value?: string[];
-        /** Initially selected values when uncontrolled. */
-        defaultValue?: string[];
-        /** Called with all selected values. */
-        onValueChange?: (value: string[]) => void;
-        required?: never;
-      }
-  );
-
-const toArray = (value: string | string[] | null | undefined) => (value == null ? [] : Array.isArray(value) ? value : [value]);
-
-function ToggleGroupRoot(props: ToggleGroupProps) {
-  const config = useConfig();
-  const own = useDefaults('ToggleGroup');
-  const {
-    type,
-    value,
-    defaultValue,
-    onValueChange,
-    required,
-    size = own.size,
-    color = own.color,
-    radius = own.radius,
-    variant = own.variant ?? config.defaults.softVariant,
-    selectedVariant = own.selectedVariant ?? config.defaults.variant,
-    attached = true,
-    disabled,
-    className,
-    onKeyDown,
-    children,
-    ...rest
-  } = props;
-
-  const [selected, setSelected] = useControllable<string[]>(
-    value === undefined ? undefined : toArray(value),
-    toArray(defaultValue),
-    (next) =>
-      type === 'multiple'
-        ? (onValueChange as (v: string[]) => void)?.(next)
-        : (onValueChange as (v: string | null) => void)?.(next[0] ?? null),
-  );
-
-  const ref = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
-    const items = [...(ref.current?.querySelectorAll<HTMLButtonElement>('.yarcl-toggle-item') ?? [])];
-    const stop = items.find((item) => item.getAttribute('aria-pressed') === 'true' && !item.disabled) ?? items.find((item) => !item.disabled);
-    items.forEach((item) => (item.tabIndex = item === stop ? 0 : -1));
-  });
-
-  function toggle(item: string) {
-    const on = selected.includes(item);
-    if (type === 'multiple') setSelected(on ? selected.filter((v) => v !== item) : [...selected, item]);
-    else if (!on) setSelected([item]);
-    else if (!required) setSelected([]);
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
-    onKeyDown?.(event);
-    const items = [...event.currentTarget.querySelectorAll<HTMLButtonElement>('.yarcl-toggle-item:not(:disabled)')];
-    const current = items.indexOf(document.activeElement as HTMLButtonElement);
-    if (current === -1) return;
-    const next = {
-      ArrowRight: (current + 1) % items.length,
-      ArrowDown: (current + 1) % items.length,
-      ArrowLeft: (current - 1 + items.length) % items.length,
-      ArrowUp: (current - 1 + items.length) % items.length,
-      Home: 0,
-      End: items.length - 1,
-    }[event.key];
-    if (next === undefined) return;
-    event.preventDefault();
-    items.forEach((item, i) => (item.tabIndex = i === next ? 0 : -1));
-    items[next].focus();
-  }
-
-  return (
-    <ToggleGroupContext.Provider
-      value={{
-        selected,
-        toggle,
-        size,
-        color,
-        radius,
-        variant,
-        selectedVariant,
-        disabled,
-      }}
-    >
-      <div
-        ref={ref}
-        role="group"
-        className={cx(
-          'yarcl-button-group yarcl-button-group-horizontal yarcl-toggle-group',
-          attached && 'yarcl-button-group-attached',
-          className,
-        )}
-        onKeyDown={handleKeyDown}
-        {...rest}
-      >
-        {children}
-      </div>
-    </ToggleGroupContext.Provider>
-  );
-}
-
-/** Props for `ToggleGroup.Item`. */
-export interface ToggleGroupItemProps extends Omit<ComponentProps<'button'>, 'value' | 'color'> {
-  /** Identifies the item in the group's value. */
-  value: string;
-  /** Makes the item square, for icon-only items. Give it an `aria-label`. */
-  icon?: boolean;
-}
-
-function ToggleGroupItem({ value, icon, disabled, className, onClick, ...props }: ToggleGroupItemProps) {
-  const context = useContext(ToggleGroupContext);
-  if (!context) throw new Error('yarcl: <ToggleGroup.Item> must be inside <ToggleGroup>');
-  const on = context.selected.includes(value);
-  return (
-    <Button
-      aria-pressed={on}
-      data-value={value}
-      disabled={disabled || context.disabled}
-      size={context.size}
-      color={context.color}
-      radius={context.radius}
-      variant={on ? context.selectedVariant : context.variant}
-      className={cx('yarcl-toggle-item', icon && 'yarcl-icon-button', className)}
-      onClick={(event) => {
-        onClick?.(event);
-        context.toggle(value);
-      }}
-      {...props}
-    />
-  );
-}
-
-/**
- * A set of toggle buttons. `type="single"` behaves like a segmented control,
- * `type="multiple"` like formatting buttons. Items use `aria-pressed`; arrow keys move focus.
- *
- * @example
- * ```tsx
- * <ToggleGroup type="single" defaultValue="week" aria-label="Range" required>
- *   <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
- *   <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
- *   <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
- * </ToggleGroup>
- * ```
- */
-export const ToggleGroup = Object.assign(ToggleGroupRoot, { Item: ToggleGroupItem });