@jig-ui/react 0.1.0

package/dist/togglebutton/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButton } from './togglebutton';
+export type { ToggleButtonProps, ToggleChangeDetails } from './togglebutton';

package/dist/togglebutton/togglebutton.d.ts

@@ -0,0 +1,93 @@
+import { ButtonHTMLAttributes, Ref } from 'react';
+import { IconName } from '../icon';
+type ToggleButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * What a handler receives alongside the new pressed state.
+ *
+ * Declared here rather than re-exported from Base UI: 0001 settled that
+ * consumers import from `@jig-ui/react` and should not need to know Base UI
+ * exists. This is the subset of its change details that is useful to call —
+ * the object passed at runtime carries more, and passing it through unchanged
+ * is what makes the cancellation reach Base UI.
+ */
+export interface ToggleChangeDetails {
+    /**
+     * Cancels the change. The button does not move, and inside a
+     * `ToggleButtonGroup` the group's value is not committed either.
+     */
+    cancel: () => void;
+    /** The native event behind the change. */
+    readonly event: Event;
+    /** Whether something has already cancelled this change. */
+    readonly isCanceled: boolean;
+}
+interface ToggleButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed' | 'aria-label' | 'value'> {
+    size?: ToggleButtonSize;
+    /** Controlled pressed state. Leave undefined to let the button manage its own. */
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    /**
+     * Fires before the change is applied. Call `details.cancel()` to veto it.
+     *
+     * This replaced an earlier contract where an `onClick` handler calling
+     * `preventDefault()` cancelled the toggle. Base UI does not read
+     * `defaultPrevented`, and only this route can also veto a group's value
+     * commit. See apps/docs/decisions/0005-toggle-button-group.html (D2).
+     */
+    onPressedChange?: (pressed: boolean, details: ToggleChangeDetails) => void;
+    /**
+     * Identifies this button within a `ToggleButtonGroup`. Required in practice
+     * when nested in one — the type cannot express "only when nested", so Base
+     * UI logs a development error if it is missing.
+     */
+    value?: string;
+    /** Shown while unpressed, at the regular weight. */
+    icon?: IconName;
+    /**
+     * Swapped in while pressed. Defaults to `icon`, and either way the pressed
+     * state renders at the `fill` weight — which is what fill is for.
+     */
+    pressedIcon?: IconName;
+    /** Which side of the label the icon sits on. */
+    iconPosition?: 'start' | 'end';
+    ref?: Ref<HTMLButtonElement>;
+}
+export type ToggleButtonProps = ToggleButtonBaseProps & ({
+    /**
+     * Drops the label and takes IconButton's square padding, so the two
+     * sit together at matching dimensions.
+     */
+    isIconOnly?: false;
+    /** Overrides the accessible name that the visible text would give. */
+    label?: string;
+} | {
+    isIconOnly: true;
+    /**
+     * Required here: with no visible text there is nothing else to name
+     * the button for assistive technology.
+     */
+    label: string;
+    /** Required here too — an icon-only toggle with no icon is an empty square. */
+    icon: IconName;
+});
+/**
+ * A button that stays pressed.
+ *
+ * Manages its own state by default; pass `pressed` and `onPressedChange` to
+ * control it. `onPressedChange` fires before the change is applied, so calling
+ * `details.cancel()` inside it vetoes the toggle.
+ *
+ * `icon` shows while unpressed and `pressedIcon` while pressed, defaulting to
+ * the same glyph — either way the pressed state renders at the `fill` weight.
+ *
+ * `isIconOnly` drops the label and takes square padding, matching `IconButton`;
+ * it requires both `label` and `icon`.
+ *
+ * Inside a `ToggleButtonGroup` the pressed state comes from the group instead,
+ * and each button needs a `value` identifying it.
+ *
+ * @example
+ * <ToggleButton icon="star" pressedIcon="star" isIconOnly label="Favourite" />
+ */
+export declare function ToggleButton({ size, pressed, defaultPressed, onPressedChange, value, icon, pressedIcon, iconPosition, isIconOnly, label, disabled, type, className, children, ref, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/togglebuttongroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButtonGroup } from './togglebuttongroup';
+export type { ToggleButtonGroupProps } from './togglebuttongroup';

package/dist/togglebuttongroup/togglebuttongroup.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode, Ref } from 'react';
+export interface ToggleButtonGroupProps<Value extends string = string> {
+    /**
+     * The pressed buttons, as an array of their `value`s — an array even when
+     * `multiple` is false, where it holds at most one. Controlled counterpart of
+     * `defaultValue`.
+     */
+    value?: readonly Value[];
+    defaultValue?: readonly Value[];
+    /**
+     * Narrowed to the group's `Value` when one is inferred or given. Note this
+     * does *not* check each button's `value` prop — React children are opaque to
+     * a parent's type argument, so a mistyped item is a runtime mismatch either
+     * way.
+     */
+    onValueChange?: (value: Value[]) => void;
+    /**
+     * Allow more than one button pressed at a time. When false, pressing one
+     * releases the others.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /** Disables every button in the group, whatever their own `disabled` says. */
+    disabled?: boolean;
+    /**
+     * Which arrow keys move focus, and the value reported to assistive
+     * technology.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Wrap focus from the last button back to the first.
+     *
+     * @default true
+     */
+    loopFocus?: boolean;
+    /**
+     * Names the group. A set of toggles is announced as a group, and an unnamed
+     * one tells a screen-reader user nothing about what it controls.
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A set of `ToggleButton`s sharing one value, with arrow-key navigation between
+ * them and a single tab stop.
+ *
+ * The children are plain `ToggleButton`s — there is no separate item
+ * component — and each needs a `value` identifying it within the group.
+ *
+ * The group's value is an array. By default one button is pressed at a time;
+ * `multiple` allows several. Set `aria-label` or `aria-labelledby` to name the
+ * group, since it has no visible label of its own.
+ *
+ * `orientation` sets which arrow keys move focus, and `loopFocus` wraps from
+ * the last button to the first.
+ *
+ * Carries no visual treatment of its own: the buttons look as they do
+ * standalone, so wrap it in a `Stack` for spacing.
+ *
+ * @example
+ * <ToggleButtonGroup aria-label="Theme" value={theme} onValueChange={setTheme}>
+ *   <ToggleButton value="light" isIconOnly icon="sun" label="Light" />
+ *   <ToggleButton value="dark" isIconOnly icon="moon" label="Dark" />
+ * </ToggleButtonGroup>
+ */
+export declare function ToggleButtonGroup<Value extends string = string>({ value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus, className, children, ref, ...props }: ToggleButtonGroupProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/token/index.d.ts

@@ -0,0 +1,2 @@
+export { Token } from './token';
+export type { TokenProps, TokenColor, TokenSize } from './token';

package/dist/token/token.d.ts

@@ -0,0 +1,82 @@
+import { AnchorHTMLAttributes, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+import { IconName } from '../icon';
+/**
+ * The hues a Token can take, in ramp order.
+ *
+ * A Token's colour says what kind of thing it is, not how loud it is, so this
+ * names a hue rather than reusing Button's `primary | secondary | danger |
+ * ghost`. Decided in apps/docs/decisions/0006-token.html (D2). Kept in step
+ * with `TOKEN_HUES` in packages/tokens/src/utils.ts, which generates the
+ * matching `color.token.*` sets.
+ */
+export type TokenColor = 'warm' | 'cool' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'fuschia' | 'purple' | 'gray';
+export type TokenSize = 'sm' | 'md' | 'lg';
+/** What Token owns, whichever element it ends up rendering. */
+interface TokenOwnProps {
+    /** The label. Truncates with an ellipsis; it never wraps. */
+    children?: ReactNode;
+    color?: TokenColor;
+    size?: TokenSize;
+    /**
+     * An icon from the curated set, sized and spaced by the Token rather than by
+     * the caller. Decorative — the label names the token.
+     */
+    icon?: IconName;
+    /**
+     * Names the remove button for assistive technology. Derived as
+     * `Remove {children}` when the label is a string, so this is only needed
+     * when it is not — or when the derived name reads badly.
+     */
+    removeLabel?: string;
+}
+/** Attributes React declares that Token decides for itself. */
+type Reserved = keyof TokenOwnProps | 'color';
+/**
+ * A link and nothing else: the whole pill is the `<a>`, because there is no
+ * second control that would have to nest inside it.
+ */
+type LinkTokenProps = TokenOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, Reserved> & {
+    href: string;
+    onRemove?: never;
+    ref?: Ref<HTMLAnchorElement>;
+};
+/**
+ * Removable, with or without a link. A `<button>` may not sit inside an
+ * `<a>` — interactive content cannot nest — so the pill becomes a `<span>`
+ * container and the anchor, where there is one, shrinks to the label.
+ * Decided in 0006 D4.
+ */
+type RemovableTokenProps = TokenOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, Reserved> & {
+    href?: string;
+    /** Renders the × button. */
+    onRemove: (event: MouseEvent<HTMLButtonElement>) => void;
+    ref?: Ref<HTMLSpanElement>;
+};
+/** Neither: a plain rendered value. */
+type PlainTokenProps = TokenOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, Reserved> & {
+    href?: never;
+    onRemove?: never;
+    ref?: Ref<HTMLSpanElement>;
+};
+export type TokenProps = LinkTokenProps | RemovableTokenProps | PlainTokenProps;
+/**
+ * A small labelled value — a chip. A filter, a tag, a selected entry in a
+ * multi-value field.
+ *
+ * `color` names a hue rather than an emphasis, because a token's colour says
+ * what kind of thing it is, not how important it is.
+ *
+ * Passing `onRemove` adds a remove button, whose accessible name is derived
+ * from the label; set `removeLabel` when the label is not a string. Passing
+ * `href` makes it a link. With both, the link shrinks to the label so the two
+ * controls stay separate.
+ *
+ * The label truncates with an ellipsis and never wraps — cap the width with
+ * `style` where that matters. Its height matches an `Input` of the same `size`,
+ * so it nests inside one cleanly.
+ *
+ * @example
+ * <Token color="teal" icon="user" onRemove={() => remove(person)}>{person.name}</Token>
+ */
+export declare function Token({ color, size, icon, href, onRemove, removeLabel, className, children, ref, ...props }: TokenProps): import("react/jsx-runtime").JSX.Element;
+export {};