@gnist/design-system 0.0.6

package/dist/components/actions/buttons/TextButton.cjs

@@ -0,0 +1,29 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+require("../../../foundation/iconography/Icon.cjs");
+const index = require("../../../foundation/typography/index.cjs");
+const React = require("react");
+const classNames = require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const states_css = require("../../../styles/states.css.cjs");
+const styles_css = require("./styles.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const TextButton = React.forwardRef(function TextButton2({ $as, as, className, underline, ...props }, ref) {
+  return React.createElement($as ?? as ?? "button", {
+    ...props,
+    ref,
+    className: classNames__default.default(className, styles_css.buttonRecipe({ color: "transparent", buttonType: "text" }), states_css.stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }))
+  }, props.children ? jsxRuntime.jsx(index.BodyText, { className: styles_css.textButtonText({ underline }), children: props.children }) : void 0);
+});
+exports.TextButton = TextButton;

package/dist/components/actions/buttons/TextButton.d.ts

@@ -0,0 +1,16 @@
+import { ElementType } from "react";
+/**
+Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards and dialogs, text buttons help maintain an emphasis on card content. Because the background is transparent, the text and underline color is inherited from ancestors to acommodate use on different background colors.
+
+Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for TextButton.
+*/
+export declare const TextButton: import("react").ForwardRefExoticComponent<Omit<{
+    as?: ElementType | undefined;
+    $as?: ElementType | undefined;
+} & Omit<any, "as" | "$as"> & {
+    /**
+     * Should the text be underlined?
+     */
+    underline?: boolean;
+}, "ref"> & import("react").RefAttributes<Element>>;
+//# sourceMappingURL=TextButton.d.ts.map

package/dist/components/actions/buttons/TextButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/TextButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAW7E;;;;EAIE;AACF,eAAO,MAAM,UAAU;;;;IAXf;;OAEG;gBACS,OAAO;mDAoCzB,CAAC"}

package/dist/components/actions/buttons/TextButton.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import "../../../foundation/iconography/Icon.js";
+import { BodyText } from "../../../foundation/typography/index.js";
+import { forwardRef, createElement } from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { stateLayers } from "../../../styles/states.css.js";
+import { buttonRecipe, textButtonText } from "./styles.css.js";
+const TextButton = forwardRef(function TextButton2({ $as, as, className, underline, ...props }, ref) {
+  return createElement($as ?? as ?? "button", {
+    ...props,
+    ref,
+    className: classNames(className, buttonRecipe({ color: "transparent", buttonType: "text" }), stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }))
+  }, props.children ? jsx(BodyText, { className: textButtonText({ underline }), children: props.children }) : void 0);
+});
+export {
+  TextButton
+};

package/dist/components/actions/buttons/createButtonVariant.cjs

@@ -0,0 +1,30 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const states_css = require("../../../styles/states.css.cjs");
+const classNames = require("classnames");
+const styles_css = require("./styles.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const getButtonVariantProps = (color, { ...props }) => {
+  var _a;
+  return {
+    ...props,
+    className: classNames__default.default(props.className, styles_css.buttonRecipe({
+      color,
+      buttonType: "box",
+      isLoading: (_a = props.loading) == null ? void 0 : _a.isLoading
+    }), color === "transparent" ? states_css.stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }) : states_css.stateLayers({
+      borderSize: "none",
+      borderRadius: "button",
+      backgroundColor: `on-${color}`,
+      setFocusState: true
+    }))
+  };
+};
+exports.getButtonVariantProps = getButtonVariantProps;

package/dist/components/actions/buttons/createButtonVariant.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from "react";
+import { BoxedButtonProps } from "./ButtonBase.js";
+export declare const getButtonVariantProps: <AsElement extends ElementType>(color: "primary" | "secondary" | "success" | "error" | "transparent", { ...props }: BoxedButtonProps<AsElement>) => BoxedButtonProps<AsElement>;
+//# sourceMappingURL=createButtonVariant.d.ts.map

package/dist/components/actions/buttons/createButtonVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createButtonVariant.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/createButtonVariant.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,eAAO,MAAM,qBAAqB,GAAI,SAAS,SAAS,WAAW,SACxD,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,gBACtD,gBAAgB,CAAC,SAAS,CAAC,KAC1C,gBAAgB,CAAC,SAAS,CAuB3B,CAAC"}

package/dist/components/actions/buttons/createButtonVariant.js

@@ -0,0 +1,28 @@
+"use client";
+import { stateLayers } from "../../../styles/states.css.js";
+import classNames from "classnames";
+import { buttonRecipe } from "./styles.css.js";
+const getButtonVariantProps = (color, { ...props }) => {
+  var _a;
+  return {
+    ...props,
+    className: classNames(props.className, buttonRecipe({
+      color,
+      buttonType: "box",
+      isLoading: (_a = props.loading) == null ? void 0 : _a.isLoading
+    }), color === "transparent" ? stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }) : stateLayers({
+      borderSize: "none",
+      borderRadius: "button",
+      backgroundColor: `on-${color}`,
+      setFocusState: true
+    }))
+  };
+};
+export {
+  getButtonVariantProps
+};

package/dist/components/actions/buttons/index.cjs

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PrimaryButton = require("./PrimaryButton.cjs");
+const SecondaryButton = require("./SecondaryButton.cjs");
+const SuccessButton = require("./SuccessButton.cjs");
+const DangerButton = require("./DangerButton.cjs");
+const GhostButton = require("./GhostButton.cjs");
+const TextButton = require("./TextButton.cjs");
+const IconButton = require("./IconButton.cjs");
+exports.PrimaryButton = PrimaryButton.PrimaryButton;
+exports.SecondaryButton = SecondaryButton.SecondaryButton;
+exports.SuccessButton = SuccessButton.SuccessButton;
+exports.DangerButton = DangerButton.DangerButton;
+exports.GhostButton = GhostButton.GhostButton;
+exports.TextButton = TextButton.TextButton;
+exports.IconButton = IconButton.IconButton;

package/dist/components/actions/buttons/index.d.ts

@@ -0,0 +1,8 @@
+export { PrimaryButton } from "./PrimaryButton.js";
+export { SecondaryButton } from "./SecondaryButton.js";
+export { SuccessButton } from "./SuccessButton.js";
+export { DangerButton } from "./DangerButton.js";
+export { GhostButton } from "./GhostButton.js";
+export { TextButton } from "./TextButton.js";
+export { IconButton } from "./IconButton.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/actions/buttons/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { PrimaryButton } from "./PrimaryButton.js";
+import { SecondaryButton } from "./SecondaryButton.js";
+import { SuccessButton } from "./SuccessButton.js";
+import { DangerButton } from "./DangerButton.js";
+import { GhostButton } from "./GhostButton.js";
+import { TextButton } from "./TextButton.js";
+import { IconButton } from "./IconButton.js";
+export {
+  DangerButton,
+  GhostButton,
+  IconButton,
+  PrimaryButton,
+  SecondaryButton,
+  SuccessButton,
+  TextButton
+};

package/dist/components/actions/buttons/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/actions/buttons/styles.css.cjs

@@ -0,0 +1,149 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const animations_css = require("../../../styles/animations.css.cjs");
+const states_css = require("../../../styles/states.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
+const buttonBase = css.style([
+  states_css.focusStyle,
+  animations_css.clickAnimation,
+  atoms_css_js.atoms({
+    margin: "none",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "button"
+  }),
+  {
+    border: "none",
+    boxSizing: "border-box",
+    position: "relative",
+    textDecoration: "none",
+    width: "fit-content",
+    minWidth: cssUtils.calc.multiply(tokens_css_js.tokens.spacing["3xl"], 3),
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    ":disabled": {
+      cursor: "not-allowed"
+    }
+  }
+]);
+const getColors = (variant) => atoms_css_js.atoms({ backgroundColor: variant, color: `on-${variant}` });
+const textAndIconButton = css.style([
+  atoms_css_js.atoms({ height: "l" }),
+  {
+    color: "inherit",
+    minWidth: 0
+  }
+]);
+const buttonRecipe = recipes.recipe({
+  base: [buttonBase],
+  variants: {
+    isLoading: {
+      true: { ":disabled": { color: "transparent" } },
+      false: { ":disabled": { color: tokens_css_js.tokens.color["on-disabled"] } }
+    },
+    color: {
+      primary: getColors("primary"),
+      secondary: getColors("secondary"),
+      success: getColors("success"),
+      error: getColors("error"),
+      transparent: { backgroundColor: "transparent" }
+    },
+    buttonType: {
+      box: {
+        ":disabled": {
+          backgroundColor: tokens_css_js.tokens.color.disabled
+        }
+      },
+      text: [
+        textAndIconButton,
+        atoms_css_js.atoms({ paddingX: "base", paddingY: "none" }),
+        {
+          position: "relative"
+        }
+      ],
+      icon: [
+        textAndIconButton,
+        atoms_css_js.atoms({ columnGap: "base", padding: "none" }),
+        {
+          display: "grid",
+          gridAutoFlow: "column"
+        }
+      ]
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { buttonType: "box", color: "transparent" },
+      style: [
+        atoms_css_js.atoms({ color: "on-background" }),
+        {
+          borderStyle: "solid",
+          borderColor: tokens_css_js.tokens.color["on-background"],
+          borderWidth: tokens_css_js.tokens.stroke.medium,
+          ":disabled": {
+            backgroundColor: "transparent",
+            borderColor: tokens_css_js.tokens.color.disabled
+          }
+        }
+      ]
+    }
+  ],
+  defaultVariants: {
+    isLoading: false
+  }
+});
+const boxedButton = recipes.recipe({
+  base: atoms_css_js.atoms({ columnGap: "base" }),
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({ height: "xxl", paddingX: "m" }),
+      compact: atoms_css_js.atoms({ height: "xl", paddingX: "s" })
+    }
+  },
+  defaultVariants: { density: "default" }
+});
+const iconButton = recipes.recipe({
+  variants: {
+    showLabel: {
+      left: { paddingLeft: tokens_css_js.tokens.spacing.base },
+      right: { paddingRight: tokens_css_js.tokens.spacing.base },
+      none: ""
+    }
+  }
+});
+const textButtonText = recipes.recipe({
+  base: {
+    borderBottomStyle: "solid",
+    borderBottomWidth: tokens_css_js.tokens.stroke.medium
+  },
+  variants: {
+    underline: {
+      true: {
+        selectors: {
+          [`${buttonRecipe.classNames.base}:not(:focus-visible) &`]: {
+            borderBottomColor: "inherit"
+          },
+          [`${buttonRecipe.classNames.base}:not(:focus-visible):disabled &`]: {
+            borderBottomColor: tokens_css_js.tokens.color["on-disabled"]
+          }
+        }
+      },
+      false: {
+        borderBottomColor: "transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    underline: false
+  }
+});
+exports.boxedButton = boxedButton;
+exports.buttonRecipe = buttonRecipe;
+exports.iconButton = iconButton;
+exports.textButtonText = textButtonText;

package/dist/components/actions/buttons/styles.css.d.ts

@@ -0,0 +1,71 @@
+export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    isLoading: {
+        true: {
+            ":disabled": {
+                color: "transparent";
+            };
+        };
+        false: {
+            ":disabled": {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        success: string;
+        error: string;
+        transparent: {
+            backgroundColor: "transparent";
+        };
+    };
+    buttonType: {
+        box: {
+            ":disabled": {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        text: (string | {
+            position: "relative";
+        })[];
+        icon: (string | {
+            display: "grid";
+            gridAutoFlow: "column";
+        })[];
+    };
+}>;
+export declare const boxedButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+}>;
+export declare const iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    showLabel: {
+        left: {
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        right: {
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        none: string;
+    };
+}>;
+export declare const textButtonText: import("@vanilla-extract/recipes").RuntimeFn<{
+    underline: {
+        true: {
+            selectors: {
+                [x: string]: {
+                    borderBottomColor: "inherit";
+                } | {
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        false: {
+            borderBottomColor: "transparent";
+        };
+    };
+}>;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/actions/buttons/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/styles.css.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAStB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;EAQrB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EA0BzB,CAAC"}

package/dist/components/actions/buttons/styles.css.js

@@ -0,0 +1,149 @@
+"use client";
+import { clickAnimation } from "../../../styles/animations.css.js";
+import { focusStyle } from "../../../styles/states.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+const buttonBase = style([
+  focusStyle,
+  clickAnimation,
+  atoms({
+    margin: "none",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "button"
+  }),
+  {
+    border: "none",
+    boxSizing: "border-box",
+    position: "relative",
+    textDecoration: "none",
+    width: "fit-content",
+    minWidth: calc.multiply(tokens.spacing["3xl"], 3),
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    ":disabled": {
+      cursor: "not-allowed"
+    }
+  }
+]);
+const getColors = (variant) => atoms({ backgroundColor: variant, color: `on-${variant}` });
+const textAndIconButton = style([
+  atoms({ height: "l" }),
+  {
+    color: "inherit",
+    minWidth: 0
+  }
+]);
+const buttonRecipe = recipe({
+  base: [buttonBase],
+  variants: {
+    isLoading: {
+      true: { ":disabled": { color: "transparent" } },
+      false: { ":disabled": { color: tokens.color["on-disabled"] } }
+    },
+    color: {
+      primary: getColors("primary"),
+      secondary: getColors("secondary"),
+      success: getColors("success"),
+      error: getColors("error"),
+      transparent: { backgroundColor: "transparent" }
+    },
+    buttonType: {
+      box: {
+        ":disabled": {
+          backgroundColor: tokens.color.disabled
+        }
+      },
+      text: [
+        textAndIconButton,
+        atoms({ paddingX: "base", paddingY: "none" }),
+        {
+          position: "relative"
+        }
+      ],
+      icon: [
+        textAndIconButton,
+        atoms({ columnGap: "base", padding: "none" }),
+        {
+          display: "grid",
+          gridAutoFlow: "column"
+        }
+      ]
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { buttonType: "box", color: "transparent" },
+      style: [
+        atoms({ color: "on-background" }),
+        {
+          borderStyle: "solid",
+          borderColor: tokens.color["on-background"],
+          borderWidth: tokens.stroke.medium,
+          ":disabled": {
+            backgroundColor: "transparent",
+            borderColor: tokens.color.disabled
+          }
+        }
+      ]
+    }
+  ],
+  defaultVariants: {
+    isLoading: false
+  }
+});
+const boxedButton = recipe({
+  base: atoms({ columnGap: "base" }),
+  variants: {
+    density: {
+      default: atoms({ height: "xxl", paddingX: "m" }),
+      compact: atoms({ height: "xl", paddingX: "s" })
+    }
+  },
+  defaultVariants: { density: "default" }
+});
+const iconButton = recipe({
+  variants: {
+    showLabel: {
+      left: { paddingLeft: tokens.spacing.base },
+      right: { paddingRight: tokens.spacing.base },
+      none: ""
+    }
+  }
+});
+const textButtonText = recipe({
+  base: {
+    borderBottomStyle: "solid",
+    borderBottomWidth: tokens.stroke.medium
+  },
+  variants: {
+    underline: {
+      true: {
+        selectors: {
+          [`${buttonRecipe.classNames.base}:not(:focus-visible) &`]: {
+            borderBottomColor: "inherit"
+          },
+          [`${buttonRecipe.classNames.base}:not(:focus-visible):disabled &`]: {
+            borderBottomColor: tokens.color["on-disabled"]
+          }
+        }
+      },
+      false: {
+        borderBottomColor: "transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    underline: false
+  }
+});
+export {
+  boxedButton,
+  buttonRecipe,
+  iconButton,
+  textButtonText
+};

package/dist/components/actions/chips/ActionChip.cjs

@@ -0,0 +1,32 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
+const index = require("../../../foundation/typography/index.cjs");
+const React = require("react");
+const classNames = require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const animations_css = require("../../../styles/animations.css.cjs");
+const states_css = require("../../../styles/states.css.cjs");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const Spinner = require("../../progress/Spinner.cjs");
+const styles_css = require("./styles.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const ActionChip = React.forwardRef(function ActionChip2({ label, onClick, selected, icon, loading, density = "default", ...props }, ref) {
+  return jsxRuntime.jsx("button", { ...props, title: label, onClick, className: classNames__default.default(styles_css.chipRecipe({
+    selected,
+    filterVariant: false,
+    loading: loading == null ? void 0 : loading.isLoading
+  }), animations_css.clickAnimation, states_css.focusStyle, states_css.stateLayers({
+    borderSize: "medium",
+    borderRadius: "full",
+    backgroundColor: "on-background",
+    setFocusState: true
+  })), ref, children: (loading == null ? void 0 : loading.isLoading) ? jsxRuntime.jsx(Spinner.Spinner, { diameter: density === "compact" ? tokens_css_js.tokens.size.xs : tokens_css_js.tokens.size.s, textDescription: loading.loadingText }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { children: label })] }) });
+});
+exports.ActionChip = ActionChip;

package/dist/components/actions/chips/ActionChip.d.ts

@@ -0,0 +1,29 @@
+import { AllowedIcons } from "../../../foundation/index.js";
+import { ComponentPropsWithRef, MouseEventHandler } from "react";
+export interface ActionChipProps extends ComponentPropsWithRef<"button"> {
+    /** The label of the chip. */
+    label?: string;
+    /** The function to run when the chip is clicked. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Whether the chip is selected or not. */
+    selected?: boolean;
+    /** The icon to display in the chip. */
+    icon?: AllowedIcons;
+    /** Loading state */
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+    /** Density of the chip. */
+    density?: "default" | "compact";
+}
+/**
+ * Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
+ *
+ * Action chips represent smart or automated actions. Action chips function as though the user asked an assistant to complete the action. Action chips should be shown dynamically and contextually in a UI underneath primary content.
+ *
+ * Action chips could also allow selection of a single chip from a set of options.
+ * In this case action chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus. When used in this way, you should ensure that selecting a single action chip automatically deselects all other chips in the set.
+ **/
+export declare const ActionChip: import("react").ForwardRefExoticComponent<Omit<ActionChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ActionChip.d.ts.map

package/dist/components/actions/chips/ActionChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IACpE,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;;IAOI;AACJ,eAAO,MAAM,UAAU,4HAsDrB,CAAC"}