@luscii-healthtech/web-ui 58.7.2 → 58.8.0

package/dist/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export interface ButtonGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * The buttons to render in the group. A button group holds a single, double
+     * or triple action.
+     */
+    children?: React.ReactNode;
+    /**
+     * Direction of the group.
+     *
+     * - `RTL` (default) aligns the actions to the end of the container, with the
+     *   most important action last (right). This is the default for most button
+     *   groups, e.g. in modals and cards.
+     * - `LTR` aligns the actions to the start of the container, with the most
+     *   important action first (left). Use this in a full page form.
+     */
+    direction?: "RTL" | "LTR";
+}
+/**
+ * A button group is a container that defines the button combinations that can
+ * be used in the UI. It takes a single, double or triple action as children and
+ * takes care of the spacing and alignment between them.
+ *
+ * The buttons themselves are the regular button components, so any combination
+ * of `PrimaryButton`, `SecondaryButton`, `TertiaryButton` and their icon
+ * counterparts can be passed in.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <SecondaryButton>Cancel</SecondaryButton>
+ *   <PrimaryButton>Save</PrimaryButton>
+ * </ButtonGroup>
+ * ```
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/generated/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export interface ButtonGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * The buttons to render in the group. A button group holds a single, double
+     * or triple action.
+     */
+    children?: React.ReactNode;
+    /**
+     * Direction of the group.
+     *
+     * - `RTL` (default) aligns the actions to the end of the container, with the
+     *   most important action last (right). This is the default for most button
+     *   groups, e.g. in modals and cards.
+     * - `LTR` aligns the actions to the start of the container, with the most
+     *   important action first (left). Use this in a full page form.
+     */
+    direction?: "RTL" | "LTR";
+}
+/**
+ * A button group is a container that defines the button combinations that can
+ * be used in the UI. It takes a single, double or triple action as children and
+ * takes care of the spacing and alignment between them.
+ *
+ * The buttons themselves are the regular button components, so any combination
+ * of `PrimaryButton`, `SecondaryButton`, `TertiaryButton` and their icon
+ * counterparts can be passed in.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <SecondaryButton>Cancel</SecondaryButton>
+ *   <PrimaryButton>Save</PrimaryButton>
+ * </ButtonGroup>
+ * ```
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -27,6 +27,7 @@ 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 { ButtonGroup, type ButtonGroupProps, } from "./components/ButtonGroup/ButtonGroup";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as CenteredHero } from "./components/CenteredHero/CenteredHero";
 export { Checkbox } from "./components/Checkbox/Checkbox";

package/dist/src/index.d.ts

@@ -27,6 +27,7 @@ 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 { ButtonGroup, type ButtonGroupProps, } from "./components/ButtonGroup/ButtonGroup";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as CenteredHero } from "./components/CenteredHero/CenteredHero";
 export { Checkbox } from "./components/Checkbox/Checkbox";

package/dist/stories/ButtonGroup.stories.d.ts

@@ -0,0 +1,39 @@
+import { type StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../src").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * A single action. Most commonly a primary button.
+ */
+export declare const Single: Story;
+/**
+ * Two actions. The most important action is placed last, so it sits closest to
+ * the edge of the container.
+ */
+export declare const Double: Story;
+/**
+ * Three actions. This is the maximum a button group should hold.
+ */
+export declare const Triple: Story;
+/**
+ * The default `RTL` direction aligns the actions to the end of the container,
+ * with the most important action last. Use `LTR` in a full page form, which
+ * aligns the actions to the start with the most important action first.
+ */
+export declare const Direction: Story;
+/**
+ * The button group is only a container, so any combination of the button
+ * components can be used as its actions. These are the combinations defined in
+ * the design system.
+ */
+export declare const Combinations: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "58.7.2",
+  "version": "58.8.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"