@yarcl/react 0.1.0

package/src/define.ts

@@ -0,0 +1,379 @@
+/** A color with a value for each color scheme. Emitted as CSS `light-dark()`. */
+export interface ColorPair {
+  /** Value used when the color scheme is light. */
+  light: string;
+  /** Value used when the color scheme is dark. */
+  dark: string;
+}
+
+/** A semantic color: one value per color scheme, plus an optional foreground. */
+export interface ColorToken extends ColorPair {
+  /**
+   * Text color used on top of this color.
+   * Computed by contrast (black or white) per scheme when omitted; requires hex values.
+   */
+  on?: string | ColorPair;
+  /**
+   * Color used when this color is drawn as text: outline, soft and ghost variants, colored `Text`,
+   * `Link`, menu items. Computed per scheme when omitted: the color itself when it has enough
+   * contrast on the page, surface and tinted backgrounds, otherwise mixed toward the neutral text
+   * color until it does. Requires hex values.
+   */
+  text?: string | ColorPair;
+}
+
+/**
+ * A single step of the shared control size scale.
+ * Every sized control reads the same entry, so controls of the same size share the same height.
+ */
+export interface SizeToken {
+  /** Control height, e.g. `'2.5rem'`. */
+  height: string;
+  /** Horizontal padding, e.g. `'1rem'`. */
+  paddingX: string;
+  /** Font size, e.g. `'0.875rem'`. */
+  fontSize: string;
+  /** Size of icons inside controls of this size, e.g. `'1rem'`. */
+  iconSize: string;
+}
+
+/**
+ * A style recipe applied on top of a semantic color.
+ * Shared by every component that takes a `variant` prop.
+ */
+export interface VariantToken {
+  /** `fill`: the color itself; `tint`: a translucent wash of the color; `none`: transparent. */
+  background: 'fill' | 'tint' | 'none';
+  /** `color`: the semantic color; `neutral`: the neutral border color; `none`: no visible border. */
+  border: 'color' | 'neutral' | 'none';
+  /** `on`: the color's foreground; `color`: the semantic color; `neutral`: the default text color. */
+  text: 'on' | 'color' | 'neutral';
+}
+
+/** Cell spacing for tables at one density. */
+export interface DensityToken {
+  /** Horizontal cell padding, e.g. `'0.75rem'`. */
+  paddingX: string;
+  /** Vertical cell padding, e.g. `'0.5rem'`. */
+  paddingY: string;
+  /** Cell font size, e.g. `'0.875rem'`. */
+  fontSize: string;
+}
+
+/** A font file to load, emitted as an `@font-face` rule. */
+export interface FontFaceToken {
+  /** Family name to reference from `typography.families`, e.g. `'Inter'`. */
+  family: string;
+  /**
+   * Font file URL(s), e.g. `'/fonts/inter.woff2'`, or `'local(Inter)'`.
+   * The format is inferred from the extension.
+   */
+  src: string | string[];
+  /** Weight or weight range, e.g. `400` or `'100 900'` for variable fonts. */
+  weight?: number | string;
+  /** Font style of this file. */
+  style?: 'normal' | 'italic';
+  /**
+   * How the font displays while loading.
+   * @default 'swap'
+   */
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+}
+
+/** A named text style. */
+export interface TextStyleToken {
+  /** A key of `typography.families`. */
+  family: string;
+  /** Font size, e.g. `'1rem'`. */
+  size: string;
+  /** Font weight, e.g. `400`. */
+  weight: number;
+  /** Unitless line height, e.g. `1.5`. */
+  lineHeight: number;
+  /** Letter spacing, e.g. `'-0.01em'`. */
+  letterSpacing?: string;
+}
+
+/**
+ * Token props each component accepts in `components`. A component's defaults can only set
+ * props it actually has.
+ */
+export interface ComponentTokenProps {
+  Button: 'size' | 'radius' | 'color' | 'variant';
+  IconButton: 'size' | 'radius' | 'color' | 'variant';
+  ToggleGroup: 'size' | 'radius' | 'color' | 'variant' | 'selectedVariant';
+  Input: 'size' | 'radius' | 'color';
+  Textarea: 'size' | 'radius' | 'color';
+  NumberInput: 'size' | 'radius' | 'color';
+  Select: 'size' | 'radius' | 'color';
+  Combobox: 'size' | 'radius' | 'color';
+  DatePicker: 'size' | 'radius' | 'color' | 'variant';
+  Checkbox: 'size' | 'color';
+  Radio: 'size' | 'color';
+  Switch: 'size' | 'color';
+  Slider: 'size' | 'radius' | 'color';
+  Badge: 'size' | 'radius' | 'color' | 'variant';
+  Alert: 'radius' | 'color' | 'variant';
+  Card: 'radius' | 'padding' | 'shadow';
+  Popover: 'radius' | 'padding';
+  HoverCard: 'radius' | 'padding';
+  Dialog: 'radius' | 'size';
+  Drawer: 'size';
+  CommandPalette: 'size' | 'radius' | 'color';
+  Menu: 'size';
+  Tabs: 'size' | 'color';
+  Pagination: 'size' | 'radius' | 'color' | 'variant' | 'selectedVariant';
+  Accordion: 'size' | 'radius' | 'color';
+  Table: 'density';
+  Stack: 'gap';
+  Inline: 'gap';
+  Text: 'textStyle' | 'color';
+  Label: 'textStyle' | 'color';
+  Link: 'color';
+  Breadcrumb: 'textStyle' | 'color';
+  Spinner: 'size' | 'color';
+  Skeleton: 'size' | 'radius';
+  Progress: 'size' | 'color' | 'radius';
+  Toast: 'color';
+}
+
+/** Names of components that accept defaults in `components`. */
+export type ComponentName = keyof ComponentTokenProps;
+
+/**
+ * The structure every yarcl config must satisfy.
+ *
+ * Open groups (`colors`, `sizes`, `radii`, `variants`, `spacing`, `shadows`, `density`, `modalSizes`, `typography`) take any keys;
+ * those keys become the valid prop values. Groups with required keys (`neutrals`, `zIndex`,
+ * `motion`, `timing`, `borders`) must include the keys the library depends on, and accept any extra
+ * keys, which are emitted as CSS variables for the consumer's own styles.
+ */
+export interface YarclShape {
+  /** Semantic colors. Keys become the valid values of the `color` prop. */
+  colors: Record<string, ColorToken>;
+  /** Neutral colors for backgrounds, text and borders. Extra keys allowed. */
+  neutrals: Record<string, ColorPair> & {
+    /** Page background. */
+    bg: ColorPair;
+    /** Background of controls and raised surfaces. */
+    surface: ColorPair;
+    /** Default text. */
+    text: ColorPair;
+    /** Secondary text and placeholders. */
+    muted: ColorPair;
+    /** Default border. */
+    border: ColorPair;
+  };
+  /** Control size scale. Keys become the valid values of the `size` prop. */
+  sizes: Record<string, SizeToken>;
+  /**
+   * Border radii. Keys become the valid values of the `radius` prop. Name them after your
+   * sizes (`sm`, `md`, `lg` …) so controls can match their size, plus exceptions such as
+   * `square` and `rounded`. `size` is reserved.
+   */
+  radii: Record<string, string>;
+  /** Style recipes. Keys become the valid values of the `variant` prop. */
+  variants: Record<string, VariantToken>;
+  /** Spacing scale, e.g. for `gap` and padding. */
+  spacing: Record<string, string>;
+  /** Box shadows. */
+  shadows: Record<string, string>;
+  /** Table densities. Keys become the valid values of the `density` prop. */
+  density: Record<string, DensityToken>;
+  /**
+   * Widths of `Dialog` and `Drawer`, e.g. `{ sm: '24rem', md: '32rem', full: '100vw' }`.
+   * Keys become the valid values of their `size` prop. Separate from `sizes`, which sets control heights.
+   */
+  modalSizes: Record<string, string>;
+  /** Font files, font families, named text styles and heading levels. */
+  typography: {
+    /** Font files to load. Reference their `family` names in `families`. */
+    fontFaces?: readonly FontFaceToken[];
+    /** Font stacks, e.g. `{ sans: 'Inter, system-ui, sans-serif' }`. */
+    families: Record<string, string>;
+    /** Named text styles. Keys become the valid text style names. */
+    styles: Record<string, TextStyleToken>;
+    /** Text style for each heading level, used by `Heading`. Each must be a key of `styles`. */
+    headings: { h1: string; h2: string; h3: string; h4: string; h5: string; h6: string };
+  };
+  /** Stacking order of floating layers. Extra keys allowed. */
+  zIndex: Record<string, number> & { dropdown: number; tooltip: number; dialog: number; toast: number };
+  /** Transition timing. Extra keys allowed. */
+  motion: Record<string, string> & {
+    /** Short transitions, e.g. hover. */
+    fast: string;
+    /** Standard transitions, e.g. opening a popover. */
+    base: string;
+    /** Easing function. */
+    easing: string;
+  };
+  /** Interaction timing in milliseconds, read by components at render time. Extra keys allowed. */
+  timing: Record<string, number> & {
+    /** Delay before a `Tooltip` opens on hover. */
+    tooltipDelay: number;
+    /** Delay before a `HoverCard` opens on hover. */
+    hoverOpenDelay: number;
+    /** Delay before a `HoverCard` closes after the pointer leaves. */
+    hoverCloseDelay: number;
+    /** How long a toast stays before it dismisses itself. `0` keeps toasts until dismissed. */
+    toastDuration: number;
+  };
+  /** Border widths. Extra keys allowed. */
+  borders: Record<string, string> & { width: string };
+  /** Keyboard focus indicator, shared by every focusable component. */
+  focusRing: {
+    /** Outline width, e.g. `'2px'`. */
+    width: string;
+    /** Gap between the element and the outline, e.g. `'2px'`. Negative values draw it inside. */
+    offset: string;
+    /** A key of `colors`. */
+    color: string;
+    /**
+     * Outline style.
+     * @default 'solid'
+     */
+    style?: 'solid' | 'dashed' | 'dotted' | 'double';
+  };
+  /**
+   * Per-component defaults, e.g. `{ Button: { radius: 'square' } }`. Applied when a prop is omitted,
+   * before the global `defaults`. Each value must be a key of its group.
+   */
+  components?: { [C in ComponentName]?: { [P in ComponentTokenProps[C]]?: string } };
+  /** Values used when a component prop is omitted. Each must be a key of its group. */
+  defaults: {
+    size: string;
+    /**
+     * A key of `radii`, or `'size'` to use the radius named like the control's size
+     * (a `lg` button gets `radii.lg`). Components without a size use `defaults.size`.
+     */
+    radius: string;
+    color: string;
+    variant: string;
+    /** Color used for invalid fields. A key of `colors`. */
+    errorColor: string;
+    /** Text style for `Text`. A key of `typography.styles`. */
+    textStyle: string;
+    /** Text style for form labels and legends. A key of `typography.styles`. */
+    labelStyle: string;
+    /** Text style for helper and error text below form controls. A key of `typography.styles`. */
+    helperStyle: string;
+    /** Gap for `Stack` and `Inline`. A key of `spacing`. */
+    gap: string;
+    /** Padding for `Card`. A key of `spacing`. */
+    padding: string;
+    /** Elevation of popovers, menus and listboxes. A key of `shadows`. */
+    floatingShadow: string;
+    /** Density for `Table`. A key of `density`. */
+    density: string;
+    /** Variant for low-emphasis components such as `Badge` and `Alert`. A key of `variants`. */
+    softVariant: string;
+    /** Width of `Dialog` and `Drawer`. A key of `modalSizes`. */
+    modalSize: string;
+  };
+}
+
+type Whitespace = ' ' | '\n' | '\t';
+
+type KeyCheck<G> = {
+  [K in keyof G as K extends `${string}${Whitespace}${string}` ? K : never]: {
+    error: `Key "${K & string}" must not contain whitespace`;
+  };
+};
+
+interface TokenKeys<T extends YarclShape> {
+  size: keyof T['sizes'];
+  radius: keyof T['radii'] | 'size';
+  color: keyof T['colors'];
+  variant: keyof T['variants'];
+  selectedVariant: keyof T['variants'];
+  gap: keyof T['spacing'];
+  padding: keyof T['spacing'];
+  shadow: keyof T['shadows'];
+  density: keyof T['density'];
+  textStyle: keyof T['typography']['styles'];
+}
+
+type ComponentChecks<T extends YarclShape> = {
+  [C in keyof T['components']]: C extends ComponentName
+    ? {
+        [P in keyof T['components'][C]]: P extends ComponentTokenProps[C]
+          ? C extends 'Dialog' | 'Drawer'
+            ? P extends 'size'
+              ? keyof T['modalSizes']
+              : TokenKeys<T>[P]
+            : TokenKeys<T>[P]
+          : never;
+      }
+    : { error: `Unknown component "${C & string}"` };
+};
+
+type Checks<T extends YarclShape> = {
+  components?: ComponentChecks<T>;
+  colors: KeyCheck<T['colors']>;
+  neutrals: KeyCheck<T['neutrals']>;
+  zIndex: KeyCheck<T['zIndex']>;
+  motion: KeyCheck<T['motion']>;
+  timing: KeyCheck<T['timing']>;
+  borders: KeyCheck<T['borders']>;
+  sizes: KeyCheck<T['sizes']>;
+  radii: KeyCheck<T['radii']> & { size?: { error: 'The radius key "size" is reserved' } };
+  variants: KeyCheck<T['variants']>;
+  spacing: KeyCheck<T['spacing']>;
+  shadows: KeyCheck<T['shadows']>;
+  density: KeyCheck<T['density']>;
+  modalSizes: KeyCheck<T['modalSizes']>;
+  typography: {
+    families: KeyCheck<T['typography']['families']>;
+    styles: KeyCheck<T['typography']['styles']> & {
+      [K in keyof T['typography']['styles']]: { family: keyof T['typography']['families'] };
+    };
+    headings: Record<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', keyof T['typography']['styles']>;
+  };
+  focusRing: { color: keyof T['colors'] };
+  defaults: {
+    size: keyof T['sizes'];
+    radius: keyof T['radii'] | 'size';
+    color: keyof T['colors'];
+    variant: keyof T['variants'];
+    errorColor: keyof T['colors'];
+    textStyle: keyof T['typography']['styles'];
+    labelStyle: keyof T['typography']['styles'];
+    helperStyle: keyof T['typography']['styles'];
+    gap: keyof T['spacing'];
+    padding: keyof T['spacing'];
+    floatingShadow: keyof T['shadows'];
+    density: keyof T['density'];
+    softVariant: keyof T['variants'];
+    modalSize: keyof T['modalSizes'];
+  };
+};
+
+/**
+ * Declares a yarcl design system config.
+ *
+ * Checks at compile time that:
+ * - every color has a `light` and `dark` value
+ * - `defaults`, `focusRing.color`, `typography.headings` and each text style's `family` reference existing keys
+ * - no key contains whitespace
+ * - `components` only names known components, only sets props they have, and only uses existing keys
+ *
+ * Returns the config unchanged with literal types preserved, so the library can derive
+ * its prop types from it. Spread `@yarcl/react/defaults` to extend the library defaults instead
+ * of replacing them.
+ *
+ * @example
+ * ```ts
+ * // src/yarcl.config.ts
+ * import { defineConfig } from '@yarcl/react/define';
+ * import defaults from '@yarcl/react/defaults';
+ *
+ * export default defineConfig({
+ *   ...defaults,
+ *   colors: { ...defaults.colors, brand: { light: '#2d4bb8', dark: '#8aa2ff' } },
+ *   defaults: { ...defaults.defaults, color: 'brand' },
+ * });
+ * ```
+ */
+export function defineConfig<const T extends YarclShape>(config: T & Checks<T>): T {
+  return config;
+}

package/src/field-context.ts

@@ -0,0 +1,31 @@
+import { createContext, useContext } from 'react';
+import { cx } from './classes';
+
+export interface FieldContextValue {
+  id: string;
+  labelId: string;
+  describedBy: string | undefined;
+  invalid: boolean;
+  required: boolean | undefined;
+}
+
+export const FieldContext = createContext<FieldContextValue | null>(null);
+
+interface FieldControlProps {
+  id?: string;
+  required?: boolean;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling';
+}
+
+export function useFieldProps<T extends FieldControlProps>(props: T): T {
+  const field = useContext(FieldContext);
+  if (!field) return props;
+  return {
+    ...props,
+    id: props.id ?? field.id,
+    required: props.required ?? field.required,
+    'aria-describedby': cx(field.describedBy, props['aria-describedby']) || undefined,
+    'aria-invalid': props['aria-invalid'] ?? (field.invalid || undefined),
+  };
+}

package/src/floating.tsx

@@ -0,0 +1,61 @@
+import {
+  arrow,
+  flip,
+  offset,
+  shift,
+  size,
+  useMergeRefs,
+  type Middleware,
+} from '@floating-ui/react';
+import { cloneElement, isValidElement, type ReactElement, type Ref, type RefObject } from 'react';
+
+interface MiddlewareOptions {
+  gap?: number;
+  matchWidth?: boolean;
+  arrowRef?: RefObject<SVGSVGElement | null>;
+}
+
+export function floatingMiddleware({ gap = 6, matchWidth = false, arrowRef }: MiddlewareOptions = {}): Middleware[] {
+  return [
+    offset(gap),
+    flip({ padding: 8 }),
+    shift({ padding: 8 }),
+    size({
+      padding: 8,
+      apply({ rects, availableHeight, elements }) {
+        elements.floating.style.maxHeight = `${Math.max(availableHeight, 120)}px`;
+        if (matchWidth) elements.floating.style.minWidth = `${rects.reference.width}px`;
+      },
+    }),
+    ...(arrowRef ? [arrow({ element: arrowRef })] : []),
+  ];
+}
+
+type ElementWithRef = ReactElement<{ ref?: Ref<Element> }>;
+
+export function useTrigger(
+  child: ReactElement,
+  setReference: (node: Element | null) => void,
+  getReferenceProps: (props?: Record<string, unknown>) => Record<string, unknown>,
+): ReactElement {
+  if (!isValidElement(child)) throw new Error('yarcl: trigger must be a single React element');
+  const element = child as ElementWithRef;
+  const ref = useMergeRefs([setReference, element.props.ref]);
+  return cloneElement(element, getReferenceProps({ ...(element.props as Record<string, unknown>), ref }));
+}
+
+export function ChevronIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function CheckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true">
+      <path d="m5 12 5 5 9-10" />
+    </svg>
+  );
+}

package/src/hooks.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+export function useControllable<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+): [T, (next: T) => void] {
+  const [internal, setInternal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : internal;
+  const set = useCallback(
+    (next: T) => {
+      if (!controlled) setInternal(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+  return [current, set];
+}

package/src/index.ts

@@ -0,0 +1,119 @@
+import 'virtual:yarcl.css';
+import './styles.css';
+
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { ButtonGroup } from './components/ButtonGroup';
+export type { ButtonGroupProps } from './components/ButtonGroup';
+export { ToggleGroup } from './components/ToggleGroup';
+export type { ToggleGroupProps, ToggleGroupBaseProps, ToggleGroupItemProps } from './components/ToggleGroup';
+export { IconButton } from './components/IconButton';
+export type { IconButtonProps } from './components/IconButton';
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+export { Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+export { NumberInput } from './components/NumberInput';
+export type { NumberInputProps } from './components/NumberInput';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+export { Radio } from './components/Radio';
+export type { RadioProps } from './components/Radio';
+export { RadioGroup } from './components/RadioGroup';
+export type { RadioGroupProps } from './components/RadioGroup';
+export { Switch } from './components/Switch';
+export type { SwitchProps } from './components/Switch';
+export { Slider } from './components/Slider';
+export type { SliderProps, SliderValue } from './components/Slider';
+export { Field } from './components/Field';
+export type { FieldProps } from './components/Field';
+export { Label } from './components/Label';
+export type { LabelProps } from './components/Label';
+export { Text } from './components/Text';
+export type { TextProps, TextElement } from './components/Text';
+export { Heading } from './components/Heading';
+export type { HeadingProps } from './components/Heading';
+export { Link } from './components/Link';
+export type { LinkProps } from './components/Link';
+export { Breadcrumb } from './components/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps } from './components/Breadcrumb';
+export { Stack } from './components/Stack';
+export type { StackProps, LayoutProps, LayoutElement } from './components/Stack';
+export { Inline } from './components/Inline';
+export type { InlineProps } from './components/Inline';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { Popover } from './components/Popover';
+export type { PopoverProps, PopoverTriggerProps, PopoverContentProps } from './components/Popover';
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+export { HoverCard } from './components/HoverCard';
+export type { HoverCardProps } from './components/HoverCard';
+export { Menu } from './components/Menu';
+export type { MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps } from './components/Menu';
+export { Select } from './components/Select';
+export type { SelectProps, SelectOption } from './components/Select';
+export { Combobox } from './components/Combobox';
+export type { ComboboxBaseProps, ComboboxProps } from './components/Combobox';
+export { DatePicker } from './components/DatePicker';
+export type {
+  DatePickerProps,
+  DatePickerBaseProps,
+  DatePickerSingleProps,
+  DatePickerRangeProps,
+  DatePickerLabels,
+  DateRange,
+} from './components/DatePicker';
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
+export { Drawer } from './components/Drawer';
+export type { DrawerProps } from './components/Drawer';
+export type { ModalProps } from './components/Modal';
+export { CommandPalette } from './components/CommandPalette';
+export type { CommandPaletteProps, CommandPaletteCommand } from './components/CommandPalette';
+export { Toaster, toast } from './components/Toast';
+export type { ToasterProps, ToastOptions } from './components/Toast';
+export { Accordion } from './components/Accordion';
+export type {
+  AccordionProps,
+  AccordionBaseProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from './components/Accordion';
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabsBaseProps, TabsListProps, TabsTriggerProps, TabsPanelProps } from './components/Tabs';
+export { Pagination } from './components/Pagination';
+export type { PaginationProps } from './components/Pagination';
+export { Table } from './components/Table';
+export type { TableProps, TableHeaderCellProps, TableCellProps, CellAlign } from './components/Table';
+export { Badge } from './components/Badge';
+export type { BadgeProps } from './components/Badge';
+export { Alert } from './components/Alert';
+export type { AlertProps } from './components/Alert';
+export { Spinner } from './components/Spinner';
+export type { SpinnerProps } from './components/Spinner';
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
+export { Progress } from './components/Progress';
+export type { ProgressProps } from './components/Progress';
+export type {
+  Size,
+  Radius,
+  Color,
+  Variant,
+  Spacing,
+  Shadow,
+  TextStyle,
+  Density,
+  ModalSize,
+  Align,
+  Justify,
+  TokenProps,
+  VariantProps,
+} from './types';
+/** The build-time design system config: the consumer's, or the library default. */
+export { default as config } from '@yarcl/config';
+export { useConfig } from './runtime';