@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/button/index.d.ts

@@ -1,11 +1,18 @@
-import { DOMAttributes, ReactNode, RefAttributes } from "react";
-import { ButtonProps, ButtonRenderProps, ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
+import { ButtonDOMProps, ButtonState } from "../../button/index.js";
+import { ReactNode, RefAttributes } from "react";
+import { ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
 //#region src/components/button/index.d.ts
-type ButtonDOMProps = Omit<ButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;
 type ButtonProps$1 = {
   children?: ReactNode;
   /** A function may compute the class from the button's render state. */
   className?: ClassNameOrFunction<ButtonState>;
+  /**
+   * Whether a toggle starts selected, when it keeps its own state. Passing
+   * this, `isSelected` or `onChange` is what makes the button a toggle —
+   * except a `text` button, which the page gives no selected colours, so it
+   * stays a plain button.
+   */
+  defaultSelected?: boolean;
   /**
    * Disables the press ripple. The hover/pressed background state layer is
    * unaffected.
@@ -16,17 +23,44 @@ type ButtonProps$1 = {
    * Where the button leads. Given one, the button is rendered as a link —
    * an `<a>`, announced as the link it is — with the same styles and ripple.
    * `render`, `type`, and the form and pending props apply to the button
-   * form only.
+   * form only, and a toggle is never a link.
    */
   href?: string;
+  /**
+   * An icon before the label, at the page's icon size for the button's size:
+   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw
+   * it `1em` square in `currentColor`, as every icon here is, and it follows.
+   * Hidden with the label while the button is pending.
+   */
+  icon?: ReactNode;
+  /**
+   * Whether a toggle is selected, when the call site holds the state. Pass
+   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what
+   * makes the button a toggle, `text` excepted.
+   */
+  isSelected?: boolean;
+  /**
+   * Called with the new state when a toggle is pressed. Passing this,
+   * `isSelected` or `defaultSelected` is what makes the button a toggle,
+   * `text` excepted.
+   */
+  onChange?: (isSelected: boolean) => void;
   /**
    * The name of the ring shown while the button is pending, for a screen
-   * reader. The label it replaces is hidden while it shows.
-   * @default 'Loading'
+   * reader. The label it replaces is hidden while it shows. Left out, it is
+   * the word for it in the I18nProvider's locale — "Loading" in English.
    */
   pendingLabel?: string;
   /** The link's `rel`, when `href` is set. */
   rel?: string;
+  /**
+   * The corner the button rests at: `round` is the pill, `square` the
+   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.
+   * Either tightens while pressed, and a toggle trades one for the other
+   * once selected.
+   * @default 'round'
+   */
+  shape?: ButtonShape;
   /**
    * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —
    * the buttons spec page's XS, S, M, L and XL, each with its own inline
@@ -47,17 +81,27 @@ type ButtonProps$1 = {
    */
   variant?: ButtonVariant;
 } & ButtonDOMProps;
+type ButtonShape = 'round' | 'square';
 type ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
-type ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;
 type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
-type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof ButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;
 /**
- * The design's button, at five emphasis levels and five control heights.
- * Given `href` it is a link with the same appearance. Every `aria-*` prop is
- * forwarded to the element; React Aria alone would keep only the labelling
- * ones.
+ * The design's button, at five emphasis levels and five control heights,
+ * round or square. Given `href` it is a link with the same appearance. Every
+ * `aria-*` prop is forwarded to the element; React Aria alone would keep only
+ * the labelling ones.
+ *
+ * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which
+ * reports its state through `aria-pressed` and draws the page's second pair
+ * of colour roles for its variant. A toggle takes neither `href` nor the
+ * pending props, and a `text` button never toggles.
+ *
+ * ```tsx
+ * <Button defaultSelected variant="tonal">
+ *   Label
+ * </Button>
+ * ```
  */
-declare function Button$1({ children, disableRipple, href, isDisabled, isPending, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel, ref, rel, render, size, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
+declare function Button$1({ children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape, size: ownSize, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
 //#endregion
-export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
+export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
 //# sourceMappingURL=index.d.ts.map