@kaizen/components 1.67.22 → 1.68.1

package/dist/styles.css

@@ -32,6 +32,242 @@
   }
 }
 
+.Button-module_button__vlUCI {
+  /* RESET */
+  appearance: none;
+  background: transparent;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --button-min-x-y: var(--spacing-40);
+  --button-border-width: var(--border-solid-border-width);
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
+
+  background-color: var(--button-bg-color, var(--color-blue-500));
+  border: var(--button-border-width) solid;
+  border-radius: var(--border-solid-border-radius);
+  border-color: var(--button-border-color, var(--color-blue-500));
+  box-sizing: border-box;
+  color: var(--button-text-color, var(--color-white));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: start;
+  font-family: var(
+    --button-font-family,
+    var(--typography-paragraph-body-font-family)
+  );
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, 1rem);
+  line-height: var(--button-line-height, 1.5rem);
+  min-height: var(--button-min-x-y);
+  min-width: var(--button-min-x-y);
+  position: relative;
+  padding: var(--button-padding-y) var(--button-padding-x);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-blue-600);
+    --button-border-color: var(--color-blue-600);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
+  }
+
+  &[data-focus-visible]::after {
+    content: "";
+    position: absolute;
+    background: transparent;
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
+    border-width: var(--border-focus-ring-border-width);
+    border-style: var(--border-focus-ring-border-style);
+    inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+  }
+}
+
+.Button-module_fullWidth__qIkG6 {
+  width: 100%;
+}
+
+.Button-module_small__FYPwk {
+  --button-font-size: 0.75rem;
+  --button-line-height: 1rem;
+  --button-min-x-y: var(--spacing-32);
+  --icon-size: 16;
+}
+
+.Button-module_medium__4LOhQ {
+  --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-40);
+  --icon-size: 24;
+}
+
+.Button-module_large__MjtVH {
+  --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-48);
+  --icon-size: 24;
+}
+
+.Button-module_smallIconButton__4gN-i,
+.Button-module_mediumIconButton__CEXv- {
+  --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+}
+
+.Button-module_largeIconButton__Apt33 {
+  --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+}
+
+.Button-module_secondary__Mmev0 {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-gray-500);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-600);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
+  }
+}
+
+.Button-module_tertiary__MJjKC {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
+  }
+}
+
+.Button-module_primaryReversed__m4kze,
+.Button-module_secondaryReversed__Q435c,
+.Button-module_tertiaryReversed__Q-UqR {
+  &[data-focus-visible]::after {
+    border-color: var(--color-blue-300);
+  }
+}
+
+.Button-module_primaryReversed__m4kze {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+}
+
+.Button-module_secondaryReversed__Q435c {
+  --button-bg-color: transparent;
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
+}
+
+.Button-module_tertiaryReversed__Q-UqR {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
+  }
+
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
+  }
+}
+
+.Button-module_isDisabled__m1eE- {
+  --button-bg-color: var(--color-gray-400);
+  --button-border-color: var(--color-gray-400);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-400);
+    --button-border-color: var(--color-gray-400);
+  }
+}
+
+.Button-module_hideContentWidth__-E94d {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+}
+
+.Button-module_retainContentWidth__b4IEC {
+  visibility: hidden;
+}
+
 .MenuItem-module_item__uImZI {
   display: block;
   font-family: var(--typography-paragraph-body-font-family);
@@ -72,6 +308,46 @@
   opacity: 0.3;
 }
 
+.PendingContent-module_pendingContent__c4IFS {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-pending-content-gap, var(--spacing-6));
+}
+
+.PendingContent-module_large__ypTxk {
+  --button-pending-content-gap: var(--spacing-8);
+}
+
+.PendingContent-module_centerSpinner__EYn7L {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ButtonContent-module_buttonContent__v5mHZ {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-icon-gap, var(--spacing-6));
+}
+
+.ButtonContent-module_large__mLOdb {
+  --button-icon-gap: var(--spacing-8);
+}
+
+.ButtonContent-module_buttonLabel__T5XAq {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ButtonContent-module_buttonIcon__qkAX- {
+  display: inline-flex;
+  align-items: center;
+}
+
+.Focusable-module_focusableWrapper__NfuIi {
+  display: inline-flex;
+}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -128,97 +404,6 @@
     opacity: 1;
   }
 }
-.Button-module_button__QOSYH {
-  --button-min-height-width: var(--spacing-48);
-  --button-padding-x: calc(
-    var(--spacing-12) - var(--border-solid-border-width)
-  );
-  --button-padding-y: calc(
-    var(--spacing-8) - var(--border-solid-border-width)
-  );
-  --button-icon-size: var(--spacing-24);
-  appearance: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  border: none;
-  border: var(--border-solid-border-width) var(--border-solid-border-style);
-  border-radius: var(--border-solid-border-radius);
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: left;
-  gap: var(--spacing-8);
-  font-family: var(--typography-button-primary-font-family);
-  font-weight: var(--typography-button-primary-font-weight);
-  font-size: var(--typography-button-primary-font-size);
-  line-height: var(--typography-button-primary-line-height);
-  min-height: var(--button-min-height-width);
-  min-width: var(--button-min-height-width);
-  outline: none;
-  position: relative;
-  padding: var(--button-padding-y) var(--button-padding-x);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.Button-module_button__QOSYH[data-focus-visible]::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-color: var(--color-blue-500);
-  border-radius: var(--border-focus-ring-border-radius);
-  border-width: var(--border-focus-ring-border-width);
-  border-style: var(--border-focus-ring-border-style);
-  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2 + 1px));
-}
-.Button-module_button__QOSYH svg {
-  height: var(--button-icon-size);
-  width: var(--button-icon-size);
-}
-
-.Button-module_default__gSx3e {
-  border-color: var(--color-gray-500);
-  color: var(--color-purple-800);
-}
-.Button-module_default__gSx3e[data-hovered], .Button-module_default__gSx3e[data-focus-visible], .Button-module_default__gSx3e[data-pressed] {
-  background-color: var(--color-gray-200);
-  border-color: var(--color-purple-800);
-}
-.Button-module_default__gSx3e[data-disabled] {
-  opacity: 0.3;
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id {
-  background-color: transparent;
-  border-color: rgba(var(--color-white-rgb), 0.65);
-  color: var(--color-white);
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-hovered], .Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-focus-visible] {
-  background-color: rgba(var(--color-white-rgb), 0.1);
-  border-color: var(--color-white);
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
-}
-.Button-module_default__gSx3e.Button-module_reversed__DT-Id[data-disabled]::after {
-  border-color: var(--color-gray-400);
-}
-
-.Button-module_small__S-t5B {
-  --button-min-height-width: 2.5rem;
-  --button-padding-x: calc(
-    var(--spacing-8) - var(--border-solid-border-width)
-  );
-  --button-padding-y: calc(
-    var(--spacing-8) - var(--border-solid-border-width)
-  );
-  --button-icon-size: var(--spacing-16);
-  gap: var(--spacing-8);
-}
-.Focusable-module_focusableWrapper__NfuIi {
-  display: inline-flex;
-}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 .OverlayArrow-module_overlayArrow__hoDyK {

package/dist/types/__actions__/Button/v3/Button.d.ts

@@ -1,11 +1,24 @@
+import React from "react";
 import { ButtonProps as RACButtonProps } from "react-aria-components";
-export type ButtonVariants = "default";
-export type ButtonProps = RACButtonProps & {
+import { ButtonSizes, ButtonVariants, PendingButtonProps } from "./types";
+type ButtonBaseProps = Omit<RACButtonProps, "children"> & {
+    /** Used as the label for the button. */
+    children: RACButtonProps["children"];
+    /** Visually hides the Button's child content used as the label and the `pendingLabel`. Use for icon-only `Button`. @default "false" */
+    hasHiddenLabel?: boolean;
     /** The visual style of the button.
      *  @default "default" */
     variant?: ButtonVariants;
     /** The visual size of the button. `medium` was formerly `regular`
      *  @default "medium" */
-    size?: "small" | "medium";
+    size?: ButtonSizes;
+    /** Renders an icon at the `iconPosition` provided. To the size scales with the button, we recommend using the `Icon` component from `"@kaizen/components/future"` */
+    icon?: JSX.Element;
+    /** Controls the position of the Icon passed in as props. @default "start" */
+    iconPosition?: "start" | "end";
+    /** Controls if the button inherits width from its parent. @default "false" */
+    isFullWidth?: boolean;
 };
-export declare const Button: ({ variant, className, size, children, ...otherProps }: ButtonProps) => JSX.Element;
+export type ButtonProps = ButtonBaseProps & PendingButtonProps;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/__actions__/Button/v3/index.d.ts

@@ -1 +1,2 @@
 export * from "./Button";
+export * from "./types";

package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import { ButtonProps } from "../../Button";
+type ButtonContentProps = {
+    size?: ButtonProps["size"];
+    icon?: ButtonProps["icon"];
+    iconPosition?: ButtonProps["iconPosition"];
+    hasHiddenLabel?: ButtonProps["hasHiddenLabel"];
+} & HTMLAttributes<HTMLSpanElement>;
+/** Renders the inner content of the button, handling icon and label visibility */
+export declare const ButtonContent: ({ children, hasHiddenLabel, size, icon, iconPosition, className, ...restProps }: ButtonContentProps) => JSX.Element;
+export {};

package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/index.d.ts

@@ -0,0 +1 @@
+export * from "./ButtonContent";

package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.d.ts

@@ -0,0 +1,5 @@
+import { ButtonSizes, PendingProps } from "../../types";
+/** Renders the pending content of the button, handling pending label visibility and spinner positioning */
+export declare const PendingContent: ({ pendingLabel, hasHiddenPendingLabel, size, }: PendingProps & {
+    size?: ButtonSizes;
+}) => JSX.Element;

package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/index.d.ts

@@ -0,0 +1 @@
+export * from "./PendingContent";

package/dist/types/__actions__/Button/v3/subcomponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PendingContent";
+export * from "./ButtonContent";

package/dist/types/__actions__/Button/v3/types.d.ts

@@ -0,0 +1,21 @@
+export type ButtonVariants = "primary" | "secondary" | "tertiary";
+export type ButtonSizes = "small" | "medium" | "large";
+export type PendingPropsUndefined = {
+    isPending?: undefined;
+    /** Rendered as the child while `isPending` is `true`. This determines the accessible label for the Button while pending. */
+    pendingLabel?: never;
+    /** Visually hides the `pendingLabel` and renders the loading spinner. This will maintain the width of the Button's `children` to avoid layout shifts.
+     * @default false
+     */
+    hasHiddenPendingLabel?: never;
+};
+export type PendingProps = {
+    isPending: boolean;
+    /** Rendered as the child while `pendingLabel` is `true`. This determines the accessible label for the Button while pending. */
+    pendingLabel: string;
+    /** Visually Hides the `pendingLabel` and renders the loading spinner. This will maintain the width of the Button's `children` to avoid layout shifts.
+     * @default false
+     */
+    hasHiddenPendingLabel?: boolean;
+};
+export type PendingButtonProps = PendingProps | PendingPropsUndefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.22",
+  "version": "1.68.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",