@luscii-healthtech/web-ui 37.4.0 → 37.5.0

package/dist/components/ButtonV2/ButtonProps.type.d.ts

@@ -50,6 +50,24 @@ export interface ButtonWithPendingStateProps extends BaseButtonProps {
     isPending?: boolean;
 }
 export type PrimaryButtonProps = ButtonWithPendingStateProps;
+/**
+ * Properties specific to the IconButtons
+ */
+export type IconButtonProps = ButtonWithPendingStateProps & {
+    /**
+     * The icon that will be rendered in the button.
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the button. This will only be visible to screen readers, and will also be used to target buttons in tests.
+     */
+    label: string;
+    /**
+     * Since this button only renders one icon, we don't need leading or trailing icons.
+     */
+    leadingIcon: never;
+    trailingIcon: never;
+};
 /**
  * All properties of BaseButtonProps and ButtonWithPendingStateProps,
  * plus other properties that are assigned internally by the button variants.

package/dist/components/ButtonV2/PrimaryIconButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { type IconButtonProps } from "./ButtonProps.type";
+export declare const PrimaryIconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonV2/SecondaryIconButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { type IconButtonProps } from "./ButtonProps.type";
+export declare const SecondaryIconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonV2/TertiaryIconButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { type IconButtonProps } from "./ButtonProps.type";
+export declare const TertiaryIconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -23,6 +23,9 @@ export { type BaseButtonProps as NonPrimaryButtonProps, type ButtonWithPendingSt
 export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
 export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
 export { TertiaryButton } from "./components/ButtonV2/TertiaryButton";
+export { PrimaryIconButton } from "./components/ButtonV2/PrimaryIconButton";
+export { SecondaryIconButton } from "./components/ButtonV2/SecondaryIconButton";
+export { TertiaryIconButton } from "./components/ButtonV2/TertiaryIconButton";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as CenteredHero } from "./components/CenteredHero/CenteredHero";
 export { Checkbox } from "./components/Checkbox/Checkbox";

package/dist/index.development.js

@@ -1860,45 +1860,45 @@ const createSpacingClassNames = (keys, spacingProps) => {
   return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
 };
 const Box = (props) => {
-  const { as: Element = "div", borderRadius, className, elevation, width } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width"]);
+  const { as: Element = "div", borderRadius, className, elevation, width, backgroundColor, hoverBackgroundColor, cursor } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width", "backgroundColor", "hoverBackgroundColor", "cursor"]);
   const spacingClasses = createSpacingClassNames(spacingKeys, props);
   const shadowClassName = createShadowClassName(elevation);
   const borderRadiusClassName = createRadiusClassName(borderRadius);
   const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
   return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
-    "ui-bg-surface": props.backgroundColor === "surface",
-    "ui-bg-background": props.backgroundColor === "background",
-    "ui-bg-secondary-background": props.backgroundColor === "secondary-background",
-    "ui-bg-slate-100": props.backgroundColor === "base",
-    "ui-bg-blue-50": props.backgroundColor === "blue",
-    "ui-bg-red-50": props.backgroundColor === "red",
-    "ui-bg-green-50": props.backgroundColor === "green",
-    "ui-bg-amber-50": props.backgroundColor === "amber",
+    "ui-bg-surface": backgroundColor === "surface",
+    "ui-bg-background": backgroundColor === "background",
+    "ui-bg-secondary-background": backgroundColor === "secondary-background",
+    "ui-bg-slate-100": backgroundColor === "base",
+    "ui-bg-blue-50": backgroundColor === "blue",
+    "ui-bg-red-50": backgroundColor === "red",
+    "ui-bg-green-50": backgroundColor === "green",
+    "ui-bg-amber-50": backgroundColor === "amber",
     [`ui-w-${width}`]: width && width !== "full",
     "ui-w-full": width === "full"
   }, {
-    "hover:ui-bg-slate-100": props.hoverBackgroundColor === "base",
-    "hover:ui-bg-background": props.backgroundColor === "background",
-    "hover:ui-bg-secondary-background": props.hoverBackgroundColor === "secondary-background",
-    "hover:ui-bg-blue-50": props.hoverBackgroundColor === "blue",
-    "hover:ui-bg-red-50": props.hoverBackgroundColor === "red",
-    "hover:ui-bg-green-50": props.hoverBackgroundColor === "green",
-    "hover:ui-bg-amber-50": props.hoverBackgroundColor === "amber"
+    "hover:ui-bg-slate-100": hoverBackgroundColor === "base",
+    "hover:ui-bg-background": backgroundColor === "background",
+    "hover:ui-bg-secondary-background": hoverBackgroundColor === "secondary-background",
+    "hover:ui-bg-blue-50": hoverBackgroundColor === "blue",
+    "hover:ui-bg-red-50": hoverBackgroundColor === "red",
+    "hover:ui-bg-green-50": hoverBackgroundColor === "green",
+    "hover:ui-bg-amber-50": hoverBackgroundColor === "amber"
   }, {
-    "ui-transition-colors motion-reduce:ui-transition-none": props.hoverBackgroundColor !== void 0
+    "ui-transition-colors motion-reduce:ui-transition-none": hoverBackgroundColor !== void 0
   }, {
-    "ui-cursor-auto": props.cursor === "auto",
-    "ui-cursor-default": props.cursor === "default",
-    "ui-cursor-pointer": props.cursor === "pointer",
-    "ui-cursor-wait": props.cursor === "wait",
-    "ui-cursor-move": props.cursor === "move",
-    "ui-cursor-help": props.cursor === "help",
-    "ui-cursor-not-allowed": props.cursor === "not-allowed",
-    "ui-cursor-progress": props.cursor === "progress",
-    "ui-cursor-copy": props.cursor === "copy",
-    "ui-cursor-no-drop": props.cursor === "no-drop",
-    "ui-cursor-grab": props.cursor === "grab",
-    "ui-cursor-grabbing": props.cursor === "grabbing"
+    "ui-cursor-auto": cursor === "auto",
+    "ui-cursor-default": cursor === "default",
+    "ui-cursor-pointer": cursor === "pointer",
+    "ui-cursor-wait": cursor === "wait",
+    "ui-cursor-move": cursor === "move",
+    "ui-cursor-help": cursor === "help",
+    "ui-cursor-not-allowed": cursor === "not-allowed",
+    "ui-cursor-progress": cursor === "progress",
+    "ui-cursor-copy": cursor === "copy",
+    "ui-cursor-no-drop": cursor === "no-drop",
+    "ui-cursor-grab": cursor === "grab",
+    "ui-cursor-grabbing": cursor === "grabbing"
   }, className, shadowClassName, borderRadiusClassName) }, attributesWithoutSpacingKeys));
 };
 
@@ -2987,6 +2987,30 @@ const Badge = (props) => {
   );
 };
 
+const PrimaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
+  const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
+  return React__namespace.default.createElement(PrimaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
+    "ui-px-[calc(theme('spacing.xxs')-1px)]": size === "medium",
+    "ui-px-[calc(theme('spacing.s')-1px)]": size === "large"
+  }, props.className) }));
+});
+
+const SecondaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
+  const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
+  return React__namespace.default.createElement(SecondaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
+    "ui-px-[calc(theme('spacing.xxs')-1px)]": size === "medium",
+    "ui-px-[calc(theme('spacing.s')-1px)]": size === "large"
+  }, props.className) }));
+});
+
+const TertiaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
+  const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
+  return React__namespace.default.createElement(TertiaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
+    "ui-px-[calc(theme('spacing.xxs')-1px)]": size === "medium",
+    "ui-px-[calc(theme('spacing.s')-1px)]": size === "large"
+  }, props.className) }));
+});
+
 const DotButton = (_a) => {
   var { onClick, isActive, className } = _a, rest = __rest(_a, ["onClick", "isActive", "className"]);
   const classes = classNames__default.default(className, "ui-rounded-full", "hover:ui-bg-primary", "ui-size-2", {
@@ -7456,6 +7480,7 @@ exports.PinIcon = PinIcon;
 exports.PlusIcon = PlusIcon;
 exports.PreviewPhone = PreviewPhone;
 exports.PrimaryButton = PrimaryButton;
+exports.PrimaryIconButton = PrimaryIconButton;
 exports.PrintIcon = PrinterIcon;
 exports.PrinterIcon = PrinterIcon;
 exports.Radio = Radio;
@@ -7469,6 +7494,7 @@ exports.RocketIcon = RocketIcon;
 exports.SearchIcon = SearchIcon;
 exports.SearchInput = SearchInput;
 exports.SecondaryButton = SecondaryButton;
+exports.SecondaryIconButton = SecondaryIconButton;
 exports.Section = Section$1;
 exports.SectionItem = SectionItem;
 exports.SectionItemWithContent = SectionItemWithContent;
@@ -7504,6 +7530,7 @@ exports.TadaIcon = TadaIcon;
 exports.Tag = Tag;
 exports.TagGroup = TagGroup;
 exports.TertiaryButton = TertiaryButton;
+exports.TertiaryIconButton = TertiaryIconButton;
 exports.Text = Text;
 exports.TextEditor = TextEditor;
 exports.TextLink = TextLink;