@spark-web/button 1.5.4-poc-simple.0 → 2.0.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @spark-web/button
 
+## 2.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/spinner@2.0.0-rc.1
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+  - @spark-web/a11y@2.0.0-rc.1
+  - @spark-web/icon@2.0.0-rc.1
+  - @spark-web/link@2.0.0-rc.1
+  - @spark-web/text@2.0.0-rc.1
+  - @spark-web/box@2.0.0-rc.1
+
+## 2.0.0-rc.0
+
+### Major Changes
+
+- rc versio
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/spinner@2.0.0-rc.0
+  - @spark-web/theme@4.0.0-rc.0
+  - @spark-web/a11y@2.0.0-rc.0
+  - @spark-web/icon@2.0.0-rc.0
+  - @spark-web/text@2.0.0-rc.0
+  - @spark-web/box@2.0.0-rc.0
+  - @spark-web/link@2.0.0-rc.0
+  - @spark-web/utils@2.0.0-rc.0
+
 ## 1.5.3
 
 ### Patch Changes

package/dist/declarations/src/base-button.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@spark-web/box';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import type { NativeButtonProps } from "./types.js";
+export declare type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
+export declare const BaseButton: import("react").ForwardRefExoticComponent<NativeButtonProps & Partial<BoxProps> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * handle "disabled" behaviour w/o disabling buttons
+ * @see https://axesslab.com/disabled-buttons-suck/
+ */
+export declare function getPreventableClickHandler(onClick: BaseButtonProps['onClick'], disabled: boolean): (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/dist/declarations/src/button-link.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { LinkComponentProps } from '@spark-web/link';
+import type { CommonButtonProps } from "./types.js";
+export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
+/** The appearance of a `Button`, with the semantics of a link. */
+export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
+    as?: Comp | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/declarations/src/button.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { CommonButtonProps, NativeButtonProps } from "./types.js";
+export declare type ButtonProps = CommonButtonProps & {
+    /**
+     * Identifies the element (or elements) whose contents or presence
+     * are controlled by the current element.
+     */
+    'aria-controls'?: NativeButtonProps['aria-controls'];
+    /**  Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: NativeButtonProps['aria-describedby'];
+    /**  Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: NativeButtonProps['aria-expanded'];
+    /** When true, prevents onClick from firing. */
+    disabled?: boolean;
+    /** When true, the button will display a loading spinner. */
+    loading?: boolean;
+    /** Function to be fired following a click event of the button. Only applicable for Button. */
+    onClick?: NativeButtonProps['onClick'];
+    /** The size of the button. */
+    size?: CommonButtonProps['size'];
+    /** Provide an alternate type if the button is within a form. */
+    type?: 'button' | 'submit' | 'reset';
+};
+/**
+ * Buttons are used to initialize an action, their label should express what
+ * action will occur when the user interacts with it.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,9 @@
+export { BaseButton } from "./base-button.js";
+export { Button } from "./button.js";
+export { ButtonLink } from "./button-link.js";
+export { useButtonStyles } from "./use-button-styles.js";
+export type { BaseButtonProps } from "./base-button.js";
+export type { ButtonProps } from "./button.js";
+export type { ButtonLinkProps } from "./button-link.js";
+export type { ButtonChildrenProps, ButtonProminence, ButtonSize, ButtonTone, } from "./types.js";
+export type { UseButtonStylesProps } from "./use-button-styles.js";

package/dist/declarations/src/types.d.ts

@@ -0,0 +1,37 @@
+import type { BackgroundTone } from '@spark-web/a11y';
+import type { IconProps } from '@spark-web/icon';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ButtonHTMLAttributes, ReactElement } from 'react';
+import type { mapTokens } from "./utils.js";
+export declare type ButtonSize = keyof (typeof mapTokens)[keyof typeof mapTokens];
+export declare type ButtonProminence = 'high' | 'low' | 'none';
+export declare type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
+declare type ChildrenWithText = {
+    label?: never;
+    children: string | number | [ReactElement<IconProps>, string | number] | [string | number, ReactElement<IconProps>];
+};
+declare type IconOnly = {
+    /**
+     * Implicit label for buttons only required for icon-only buttons
+     * for accessibility reasons.
+     */
+    label: string;
+    children: ReactElement<IconProps>;
+};
+export declare type ButtonChildrenProps = ChildrenWithText | IconOnly;
+export declare type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type CommonButtonProps = {
+    /** Sets data attributes for the element. */
+    data?: DataAttributeMap;
+    /** Unique identifier for the underlying element. */
+    id?: string;
+} & ButtonChildrenProps & ButtonStyleProps;
+export declare type ButtonStyleProps = {
+    /** Sets the visual prominence of the button. */
+    prominence?: ButtonProminence;
+    /** Sets the size of the button. */
+    size?: ButtonSize;
+    /** Sets the tone of the button. */
+    tone?: ButtonTone;
+};
+export {};

package/dist/declarations/src/use-button-styles.d.ts

@@ -0,0 +1,88 @@
+import type { ButtonProminence, ButtonSize, ButtonTone } from "./types.js";
+/**
+ * useButtonStyles
+ *
+ * Custom hook for styling buttons and certain links.
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying `Box` component, and the second item is a CSS object that can be
+ * passed to Emotion's `css` function.
+ */
+export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): readonly [{
+    readonly alignItems: "center";
+    readonly background: "body" | "input" | "disabled" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
+    readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive" | "standardInverted" | "field" | "fieldHover" | "fieldDisabled"> | undefined;
+    readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"standard" | "large"> | undefined;
+    readonly borderRadius: "small" | "medium";
+    readonly cursor: "pointer";
+    readonly display: "inline-flex";
+    readonly gap: "small";
+    readonly height: "large" | "medium";
+    readonly justifyContent: "center";
+    readonly paddingX: "medium" | "xlarge" | undefined;
+    readonly position: "relative";
+    readonly width: "large" | "medium" | undefined;
+}, {
+    readonly '&:not([aria-disabled=true])': {
+        readonly ':hover': {
+            readonly borderColor: string | undefined;
+            readonly backgroundColor: string | undefined;
+            readonly '> *': {
+                readonly color: string | undefined;
+                readonly stroke: string | undefined;
+                readonly transitionProperty: string;
+                readonly transitionTimingFunction: string;
+                readonly transitionDuration: string;
+            };
+        };
+        readonly ':active': {
+            readonly borderColor: string | undefined;
+            readonly backgroundColor: string | undefined;
+            readonly transform: "scale(0.98)";
+            readonly '> *': {
+                readonly color: string | undefined;
+                readonly stroke: string | undefined;
+                readonly transitionProperty: string;
+                readonly transitionTimingFunction: string;
+                readonly transitionDuration: string;
+            };
+        };
+        readonly ':focus': {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    readonly '&[aria-disabled=true]': {
+        readonly backgroundColor: string | undefined;
+        readonly borderColor: string | undefined;
+        readonly cursor: "default";
+        readonly '*': {
+            readonly color: string | undefined;
+            readonly stroke: string | undefined;
+        };
+        readonly ':focus': {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    readonly transitionProperty: string;
+    readonly transitionTimingFunction: string;
+    readonly transitionDuration: string;
+}];
+export declare type UseButtonStylesProps = {
+    /** Whether the children of the button is a single icon or not. */
+    iconOnly: boolean;
+    /** Sets the visual prominence of the button. */
+    prominence: ButtonProminence;
+    /** Sets the size of the button. */
+    size: ButtonSize;
+    /** Sets the tone of the button. */
+    tone: ButtonTone;
+};

package/dist/declarations/src/utils.d.ts

@@ -0,0 +1,43 @@
+import type { BoxProps } from '@spark-web/box';
+import type { ForegroundTone } from '@spark-web/text';
+import type { BrighteTheme } from '@spark-web/theme';
+import type { ButtonProminence, ButtonTone } from "./types.js";
+declare type BaseButtonStyles = {
+    background: BoxProps['background'];
+    border?: BoxProps['border'];
+    borderWidth?: BoxProps['borderWidth'];
+    textTone?: ForegroundTone;
+};
+declare type HoverButtonStyles = {
+    backgroundHover: keyof BrighteTheme['backgroundInteractions'];
+    borderHover?: keyof BrighteTheme['border']['color'];
+    textToneHover?: keyof BrighteTheme['color']['foreground'];
+};
+declare type ActiveButtonStyles = {
+    backgroundActive: keyof BrighteTheme['backgroundInteractions'];
+    borderActive?: keyof BrighteTheme['border']['color'];
+    textToneActive?: keyof BrighteTheme['color']['foreground'];
+};
+declare type DisabledButtonStyles = {
+    backgroundDisabled: keyof BrighteTheme['color']['background'];
+    borderDisabled?: keyof BrighteTheme['border']['color'];
+    textToneDisabled: keyof BrighteTheme['color']['foreground'];
+};
+declare type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
+declare type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
+export declare const variants: Variants;
+export declare const mapTokens: {
+    readonly fontSize: {
+        readonly medium: "small";
+        readonly large: "standard";
+    };
+    readonly size: {
+        readonly medium: "medium";
+        readonly large: "large";
+    };
+    readonly spacing: {
+        readonly medium: "medium";
+        readonly large: "xlarge";
+    };
+};
+export {};

package/dist/spark-web-button.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJ1dHRvbi5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJ1dHRvbi5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=