@yarcl/react 0.1.0 → 0.2.0

package/src/components/Button.tsx

@@ -1,58 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx, radiusClass, sizeClass, variantClass } from '../classes';
-import type { TokenProps, VariantProps } from '../types';
-import { useButtonGroup } from './ButtonGroup';
-import { Spinner } from './Spinner';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Button}. Accepts all native `<button>` attributes except `color`. */
-export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color'>, TokenProps, VariantProps {
-  /** Shows a {@link Spinner}, disables the button and sets `aria-busy`. */
-  loading?: boolean;
-}
-
-/**
- * A button styled from the consumer's design tokens.
- * Shares the size scale with {@link Input}, so both have the same height at the same size.
- * Icons (`<svg>`) inside are sized from the size's `iconSize`.
- *
- * @example
- * ```tsx
- * <Button size="lg" color="danger" variant="outline" radius="pill">Delete</Button>
- * ```
- */
-export function Button({
-  size,
-  radius,
-  color,
-  variant,
-  loading,
-  disabled,
-  className,
-  type = 'button',
-  children,
-  ...props
-}: ButtonProps) {
-  const own = useDefaults('Button');
-  const group = useButtonGroup();
-  return (
-    <button
-      type={type}
-      className={cx(
-        'yarcl-button',
-        sizeClass(size ?? group?.size ?? own.size),
-        radiusClass(radius ?? group?.radius ?? own.radius, size ?? group?.size ?? own.size),
-        colorClass(color ?? group?.color ?? own.color),
-        variantClass(variant ?? group?.variant ?? own.variant),
-        className,
-      )}
-      disabled={disabled || loading}
-      aria-busy={loading || undefined}
-      {...props}
-    >
-      {loading && <Spinner label="" aria-hidden="true" />}
-      {children}
-    </button>
-  );
-}

package/src/components/ButtonGroup.tsx

@@ -1,61 +0,0 @@
-import { createContext, useContext, type ComponentProps } from 'react';
-import { cx } from '../classes';
-import type { TokenProps, VariantProps } from '../types';
-
-const ButtonGroupContext = createContext<(TokenProps & VariantProps) | null>(null);
-
-export function useButtonGroup() {
-  return useContext(ButtonGroupContext);
-}
-
-/** Props for {@link ButtonGroup}. Token props are passed down to every button inside. */
-export interface ButtonGroupProps extends Omit<ComponentProps<'div'>, 'color'>, TokenProps, VariantProps {
-  /**
-   * Joins the buttons into one control with shared borders.
-   * @default true
-   */
-  attached?: boolean;
-  /**
-   * Direction of the buttons.
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-}
-
-/**
- * Groups related {@link Button}s and {@link IconButton}s. Buttons inherit `size`, `color`,
- * `variant` and `radius` from the group unless they set their own. Give the group an `aria-label`.
- *
- * @example
- * ```tsx
- * <ButtonGroup aria-label="Pagination" variant="outline">
- *   <Button>Previous</Button>
- *   <Button>Next</Button>
- * </ButtonGroup>
- * ```
- */
-export function ButtonGroup({
-  size,
-  color,
-  variant,
-  radius,
-  attached = true,
-  orientation = 'horizontal',
-  className,
-  ...props
-}: ButtonGroupProps) {
-  return (
-    <ButtonGroupContext.Provider value={{ size, color, variant, radius }}>
-      <div
-        role="group"
-        className={cx(
-          'yarcl-button-group',
-          `yarcl-button-group-${orientation}`,
-          attached && 'yarcl-button-group-attached',
-          className,
-        )}
-        {...props}
-      />
-    </ButtonGroupContext.Provider>
-  );
-}

package/src/components/Card.tsx

@@ -1,50 +0,0 @@
-import type { ComponentProps } from 'react';
-import { cx, paddingClass, radiusClass, shadowClass } from '../classes';
-import type { Radius, Shadow, Spacing } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Card}. */
-export interface CardProps extends ComponentProps<'div'> {
-  /**
-   * Element to render.
-   * @default 'div'
-   */
-  as?: 'div' | 'section' | 'article' | 'aside';
-  /**
-   * Inner padding, from the `spacing` config.
-   * @default config.defaults.padding
-   */
-  padding?: Spacing;
-  /**
-   * Corner radius, from the `radii` config.
-   * @default config.defaults.radius
-   */
-  radius?: Radius;
-  /** Elevation, from the `shadows` config. No shadow when omitted. */
-  shadow?: Shadow;
-}
-
-/**
- * A bordered surface for grouping content.
- *
- * @example
- * ```tsx
- * <Card shadow="md">
- *   <Stack>
- *     <Heading level={3}>Plan</Heading>
- *     <Text muted>Pro, billed yearly</Text>
- *   </Stack>
- * </Card>
- * ```
- */
-export function Card({ as = 'div', padding, radius, shadow, className, ...props }: CardProps) {
-  const own = useDefaults('Card');
-  const Tag = as as 'div';
-  return (
-    <Tag
-      className={cx('yarcl-card', paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius), shadowClass(shadow ?? own.shadow), className)}
-      {...props}
-    />
-  );
-}

package/src/components/Checkbox.tsx

@@ -1,49 +0,0 @@
-import { useEffect, useImperativeHandle, useRef, type ComponentProps, type ReactNode } from 'react';
-import { colorClass, cx, sizeClass } from '../classes';
-import { useFieldProps } from '../field-context';
-import type { Color, Size } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Checkbox}. Accepts all native `<input>` attributes except `type`, `color` and `size`. */
-export interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'color' | 'size' | 'children'> {
-  /** Label shown next to the box. */
-  children?: ReactNode;
-  /**
-   * Box size, from the `sizes` config (uses the size's `iconSize`).
-   * @default config.defaults.size
-   */
-  size?: Size;
-  /**
-   * Color of the checked box, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-  /** Shows a mixed state. Cleared by the browser when the user toggles the box. */
-  indeterminate?: boolean;
-}
-
-/**
- * A checkbox with an optional label.
- *
- * @example
- * ```tsx
- * <Checkbox defaultChecked>Remember me</Checkbox>
- * ```
- */
-export function Checkbox(props: CheckboxProps) {
-  const own = useDefaults('Checkbox');
-  const { children, size, color, indeterminate = false, className, style, ref, ...rest } = useFieldProps(props);
-  const inner = useRef<HTMLInputElement>(null);
-  useImperativeHandle(ref, () => inner.current!, []);
-  useEffect(() => {
-    if (inner.current) inner.current.indeterminate = indeterminate;
-  }, [indeterminate]);
-
-  return (
-    <label className={cx('yarcl-checkbox', sizeClass(size ?? own.size), colorClass(color ?? own.color), className)} style={style}>
-      <input ref={inner} type="checkbox" className="yarcl-checkbox-input" {...rest} />
-      {children != null && <span className="yarcl-checkbox-label">{children}</span>}
-    </label>
-  );
-}