@gnist/design-system 0.0.6

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { BodyText } from "../../../foundation/typography/index.js";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { clickAnimation } from "../../../styles/animations.css.js";
+import { focusStyle, stateLayers } from "../../../styles/states.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { Spinner } from "../../progress/Spinner.js";
+import { chipRecipe } from "./styles.css.js";
+const ActionChip = forwardRef(function ActionChip2({ label, onClick, selected, icon, loading, density = "default", ...props }, ref) {
+  return jsx("button", { ...props, title: label, onClick, className: classNames(chipRecipe({
+    selected,
+    filterVariant: false,
+    loading: loading == null ? void 0 : loading.isLoading
+  }), clickAnimation, focusStyle, stateLayers({
+    borderSize: "medium",
+    borderRadius: "full",
+    backgroundColor: "on-background",
+    setFocusState: true
+  })), ref, children: (loading == null ? void 0 : loading.isLoading) ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsxs(Fragment, { children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { children: label })] }) });
+});
+export {
+  ActionChip
+};

package/dist/components/actions/chips/FilterChip.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 FilterChip = React.forwardRef(function FilterChip2({ label, onClick, selected, loading, density = "default", icon, ...props }, ref) {
+  return jsxRuntime.jsxs("button", { ...props, title: label, onClick, className: classNames__default.default(styles_css.chipRecipe({
+    selected,
+    filterVariant: true,
+    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: [(icon || selected) && !(loading == null ? void 0 : loading.isLoading) && jsxRuntime.jsx(Icon.Icon, { icon: selected ? "check" : icon }), (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.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(index.BodyText, { children: label }) })] });
+});
+exports.FilterChip = FilterChip;

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

@@ -0,0 +1,27 @@
+import { AllowedIcons } from "../../../foundation/index.js";
+import { ComponentPropsWithRef } from "react";
+interface FilterChipProps extends ComponentPropsWithRef<"button"> {
+    /** The label of the chip */
+    label?: string;
+    /** The function to run when the chip is clicked */
+    onClick?: () => void;
+    /** Whether the chip is selected or not */
+    selected?: boolean;
+    /** Loading state */
+    loading?: {
+        isLoading: boolean;
+        loadingText: string;
+    };
+    /** The density of the chip */
+    density?: "default" | "compact";
+    /** The icon to display in the chip */
+    icon?: AllowedIcons;
+}
+/**
+ * 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.
+ *
+ * Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes. Tapping on a filter chip activates it and appends a leading checkmark icon in front of the label. Multiple filter chips can be selected or unselected.
+ **/
+export declare const FilterChip: import("react").ForwardRefExoticComponent<Omit<FilterChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=FilterChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/FilterChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAQlD,OAAO,EAAE,qBAAqB,EAA4B,MAAM,OAAO,CAAC;AAIxE,UAAU,eAAgB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC7D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACN,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;;;IAII;AAEJ,eAAO,MAAM,UAAU,4HAyDrB,CAAC"}

package/dist/components/actions/chips/FilterChip.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { BodyText } from "../../../foundation/typography/index.js";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { clickAnimation } from "../../../styles/animations.css.js";
+import { focusStyle, stateLayers } from "../../../styles/states.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { Spinner } from "../../progress/Spinner.js";
+import { chipRecipe } from "./styles.css.js";
+const FilterChip = forwardRef(function FilterChip2({ label, onClick, selected, loading, density = "default", icon, ...props }, ref) {
+  return jsxs("button", { ...props, title: label, onClick, className: classNames(chipRecipe({
+    selected,
+    filterVariant: true,
+    loading: loading == null ? void 0 : loading.isLoading
+  }), clickAnimation, focusStyle, stateLayers({
+    borderSize: "medium",
+    borderRadius: "full",
+    backgroundColor: "on-background",
+    setFocusState: true
+  })), ref, children: [(icon || selected) && !(loading == null ? void 0 : loading.isLoading) && jsx(Icon, { icon: selected ? "check" : icon }), (loading == null ? void 0 : loading.isLoading) ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsx(Fragment, { children: jsx(BodyText, { children: label }) })] });
+});
+export {
+  FilterChip
+};

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

@@ -0,0 +1,26 @@
+"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 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 TagChip = React.forwardRef(function TagChip2({ label, onClick, icon, density = "default", ...props }, ref) {
+  return jsxRuntime.jsxs("button", { ...props, title: label, onClick, className: classNames__default.default(styles_css.chipRecipe(), animations_css.clickAnimation, states_css.focusStyle, states_css.stateLayers({
+    borderSize: "medium",
+    borderRadius: "full",
+    backgroundColor: "on-background",
+    setFocusState: true
+  })), ref, children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { children: label }), jsxRuntime.jsx(Icon.Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
+});
+exports.TagChip = TagChip;

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

@@ -0,0 +1,20 @@
+import { AllowedIcons } from "../../../foundation/index.js";
+import { ComponentPropsWithRef, MouseEventHandler } from "react";
+interface TagChipProps extends ComponentPropsWithRef<"button"> {
+    /** The label of the chip */
+    label?: string;
+    /** The function to run when the chip is clicked */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** The icon to display in the chip */
+    icon?: AllowedIcons;
+    /** 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.
+ *
+ * Tag chips appear when selecting an option that triggers a tag and can be removed by clicking on the remove icon or unchecking the option. Tag chips appear within a multi select component or search field, presented as a horizontally scrollable list.
+ **/
+export declare const TagChip: import("react").ForwardRefExoticComponent<Omit<TagChipProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=TagChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/TagChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAGf,qCAAiD;AAOlD,OAAO,EACH,qBAAqB,EAGrB,iBAAiB,EACpB,MAAM,OAAO,CAAC;AAGf,UAAU,YAAa,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAED;;;;IAII;AAEJ,eAAO,MAAM,OAAO,yHA6BlB,CAAC"}

package/dist/components/actions/chips/TagChip.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { BodyText } from "../../../foundation/typography/index.js";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { clickAnimation } from "../../../styles/animations.css.js";
+import { focusStyle, stateLayers } from "../../../styles/states.css.js";
+import { chipRecipe } from "./styles.css.js";
+const TagChip = forwardRef(function TagChip2({ label, onClick, icon, density = "default", ...props }, ref) {
+  return jsxs("button", { ...props, title: label, onClick, className: classNames(chipRecipe(), clickAnimation, focusStyle, stateLayers({
+    borderSize: "medium",
+    borderRadius: "full",
+    backgroundColor: "on-background",
+    setFocusState: true
+  })), ref, children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { children: label }), jsx(Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
+});
+export {
+  TagChip
+};

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

@@ -0,0 +1,9 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ActionChip = require("./ActionChip.cjs");
+const FilterChip = require("./FilterChip.cjs");
+const TagChip = require("./TagChip.cjs");
+exports.ActionChip = ActionChip.ActionChip;
+exports.FilterChip = FilterChip.FilterChip;
+exports.TagChip = TagChip.TagChip;

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

@@ -0,0 +1,4 @@
+export { ActionChip } from "./ActionChip.js";
+export { FilterChip } from "./FilterChip.js";
+export { TagChip } from "./TagChip.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,9 @@
+"use client";
+import { ActionChip } from "./ActionChip.js";
+import { FilterChip } from "./FilterChip.js";
+import { TagChip } from "./TagChip.js";
+export {
+  ActionChip,
+  FilterChip,
+  TagChip
+};

package/dist/components/actions/chips/package.json

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

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

@@ -0,0 +1,74 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 chipBase = css.style({
+  display: "flex",
+  gap: tokens_css_js.tokens.spacing.base,
+  textWrap: "nowrap",
+  border: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.primary}`,
+  padding: `${tokens_css_js.tokens.spacing.base} ${tokens_css_js.tokens.spacing.xs}`,
+  borderRadius: tokens_css_js.tokens["border-radius"].full,
+  color: tokens_css_js.tokens.color["on-background"],
+  backgroundColor: tokens_css_js.tokens.color.background,
+  cursor: "pointer",
+  position: "relative",
+  minHeight: tokens_css_js.tokens.size.xl,
+  justifyContent: "center"
+});
+const chipRecipe = recipes.recipe({
+  base: chipBase,
+  variants: {
+    selected: {
+      true: [
+        {
+          backgroundColor: tokens_css_js.tokens.color.primary,
+          color: tokens_css_js.tokens.color["on-primary"],
+          borderColor: tokens_css_js.tokens.color.primary
+        }
+      ],
+      false: {}
+    },
+    filterVariant: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "on-background",
+          color: "background",
+          borderColor: "on-background"
+        })
+      ],
+      false: {}
+    },
+    loading: {
+      true: [
+        atoms_css_js.atoms({
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }),
+        {
+          minWidth: cssUtils.calc.multiply(tokens_css_js.tokens.size.xxl, 2),
+          border: "none",
+          cursor: "not-allowed",
+          backgroundColor: tokens_css_js.tokens.color.disabled
+        }
+      ],
+      false: {}
+    },
+    filled: {
+      true: [
+        {
+          backgroundColor: tokens_css_js.tokens.color["primary-container"],
+          color: tokens_css_js.tokens.color["on-primary"],
+          borderColor: tokens_css_js.tokens.color.primary
+        }
+      ],
+      false: {}
+    }
+  }
+});
+exports.chipRecipe = chipRecipe;

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

@@ -0,0 +1,32 @@
+export declare const chipRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        }[];
+        false: {};
+    };
+    filterVariant: {
+        true: string[];
+        false: {};
+    };
+    loading: {
+        true: (string | {
+            minWidth: string;
+            border: "none";
+            cursor: "not-allowed";
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        })[];
+        false: {};
+    };
+    filled: {
+        true: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        }[];
+        false: {};
+    };
+}>;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/styles.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}

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

@@ -0,0 +1,74 @@
+"use client";
+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 chipBase = style({
+  display: "flex",
+  gap: tokens.spacing.base,
+  textWrap: "nowrap",
+  border: `${tokens.stroke.medium} solid ${tokens.color.primary}`,
+  padding: `${tokens.spacing.base} ${tokens.spacing.xs}`,
+  borderRadius: tokens["border-radius"].full,
+  color: tokens.color["on-background"],
+  backgroundColor: tokens.color.background,
+  cursor: "pointer",
+  position: "relative",
+  minHeight: tokens.size.xl,
+  justifyContent: "center"
+});
+const chipRecipe = recipe({
+  base: chipBase,
+  variants: {
+    selected: {
+      true: [
+        {
+          backgroundColor: tokens.color.primary,
+          color: tokens.color["on-primary"],
+          borderColor: tokens.color.primary
+        }
+      ],
+      false: {}
+    },
+    filterVariant: {
+      true: [
+        atoms({
+          backgroundColor: "on-background",
+          color: "background",
+          borderColor: "on-background"
+        })
+      ],
+      false: {}
+    },
+    loading: {
+      true: [
+        atoms({
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }),
+        {
+          minWidth: calc.multiply(tokens.size.xxl, 2),
+          border: "none",
+          cursor: "not-allowed",
+          backgroundColor: tokens.color.disabled
+        }
+      ],
+      false: {}
+    },
+    filled: {
+      true: [
+        {
+          backgroundColor: tokens.color["primary-container"],
+          color: tokens.color["on-primary"],
+          borderColor: tokens.color.primary
+        }
+      ],
+      false: {}
+    }
+  }
+});
+export {
+  chipRecipe
+};

package/dist/components/actions/index.cjs

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PrimaryButton = require("./buttons/PrimaryButton.cjs");
+const SecondaryButton = require("./buttons/SecondaryButton.cjs");
+const SuccessButton = require("./buttons/SuccessButton.cjs");
+const DangerButton = require("./buttons/DangerButton.cjs");
+const GhostButton = require("./buttons/GhostButton.cjs");
+const TextButton = require("./buttons/TextButton.cjs");
+const IconButton = require("./buttons/IconButton.cjs");
+const Checkbox = require("./selectionControls/Checkbox.cjs");
+const RadioButton = require("./selectionControls/RadioButton.cjs");
+const ActionChip = require("./chips/ActionChip.cjs");
+const FilterChip = require("./chips/FilterChip.cjs");
+const TagChip = require("./chips/TagChip.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;
+exports.Checkbox = Checkbox.Checkbox;
+exports.RadioButton = RadioButton.RadioButton;
+exports.ActionChip = ActionChip.ActionChip;
+exports.FilterChip = FilterChip.FilterChip;
+exports.TagChip = TagChip.TagChip;

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

@@ -0,0 +1,4 @@
+export * from "./buttons/index.js";
+export * from "./selectionControls/index.js";
+export * from "./chips/index.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/actions/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC"}

package/dist/components/actions/index.js

@@ -0,0 +1,27 @@
+"use client";
+import { PrimaryButton } from "./buttons/PrimaryButton.js";
+import { SecondaryButton } from "./buttons/SecondaryButton.js";
+import { SuccessButton } from "./buttons/SuccessButton.js";
+import { DangerButton } from "./buttons/DangerButton.js";
+import { GhostButton } from "./buttons/GhostButton.js";
+import { TextButton } from "./buttons/TextButton.js";
+import { IconButton } from "./buttons/IconButton.js";
+import { Checkbox } from "./selectionControls/Checkbox.js";
+import { RadioButton } from "./selectionControls/RadioButton.js";
+import { ActionChip } from "./chips/ActionChip.js";
+import { FilterChip } from "./chips/FilterChip.js";
+import { TagChip } from "./chips/TagChip.js";
+export {
+  ActionChip,
+  Checkbox,
+  DangerButton,
+  FilterChip,
+  GhostButton,
+  IconButton,
+  PrimaryButton,
+  RadioButton,
+  SecondaryButton,
+  SuccessButton,
+  TagChip,
+  TextButton
+};

package/dist/components/actions/package.json

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

package/dist/components/actions/selectionControls/Checkbox.cjs

@@ -0,0 +1,56 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
+require("../../../utilities/accessibility/visuallyHidden.css.cjs");
+const index = require("../../../utilities/html/index.cjs");
+const React = require("react");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
+const checkbox_css = require("./checkbox.css.cjs");
+const shared_css = require("./shared.css.cjs");
+const shared = require("./shared.cjs");
+const CustomCheckbox = ({ value, disabled }) => {
+  if (!value) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  return jsxRuntime.jsx("span", { className: ` ${checkbox_css.checkbox({ disabled })}`, "aria-hidden": true, children: value !== "indeterminate" ? jsxRuntime.jsx(Icon.Icon, { icon: "check", size: "s" }) : jsxRuntime.jsx(Icon.Icon, { icon: "remove", size: "s" }) });
+};
+const defaultRender = (checkbox2, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [checkbox2, jsxRuntime.jsx("div", { className: shared_css.indentedDescriptionStyle, children: description })] });
+const Checkbox = React.forwardRef(function Checkbox2({
+  label,
+  description,
+  value,
+  onChange,
+  disabled,
+  validity,
+  id = index.createValidHtmlId(label),
+  hideLabel = false,
+  canShowErrorMessage = false,
+  className,
+  render = defaultRender,
+  // Input element props
+  onBlur,
+  ...rest
+}, ref) {
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
+    id: helperId,
+    validity,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
+  const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: description }) : void 0;
+  const checkboxElement = jsxRuntime.jsx("span", { className: `${shared_css.InputWrapper} ${className}`, ref, children: jsxRuntime.jsxs("label", { htmlFor: inputId, className: shared_css.LabelRecipe({ disabled }), id: labelId, children: [jsxRuntime.jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsxRuntime.jsx("span", { className: checkbox_css.CheckboxRecipe({
+    checked: value,
+    disabled,
+    validity: (validity == null ? void 0 : validity.type) === "error" ? "error" : void 0
+  }), children: jsxRuntime.jsx(CustomCheckbox, { value, disabled }) }), hideLabel ? jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label }) : jsxRuntime.jsx("span", { className: shared_css.LabelStyle, children: label })] }) });
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: render(checkboxElement, descriptionElement) });
+});
+exports.Checkbox = Checkbox;

package/dist/components/actions/selectionControls/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { SelectionControlProps } from "./shared.js";
+export type CheckboxProps = SelectionControlProps<boolean | "indeterminate">;
+/**
+ *
+ * Checkboxes allow users to select one or more items from a list. They may also be used as a way to have the users indicate they agree to  terms and services.
+ *
+ *  Checkboxes can turn an option on or off. Unlike radio buttons, changes in the states of one checkbox do not usually affect other checkboxes. Checkboxes should be used instead of switches if multiple options can be selected.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/actions/selectionControls/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Checkbox.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC;AA+B7E;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,yBAAyB,CAClD,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CA6EtD,CAAC"}

package/dist/components/actions/selectionControls/Checkbox.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
+import "../../../utilities/accessibility/visuallyHidden.css.js";
+import { createValidHtmlId } from "../../../utilities/html/index.js";
+import { forwardRef } from "react";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { CheckboxRecipe, checkbox } from "./checkbox.css.js";
+import { InputWrapper, LabelRecipe, InputStyleRecipe, LabelStyle, indentedDescriptionStyle } from "./shared.css.js";
+import { SelectionDescription, HelperTextWrapper } from "./shared.js";
+const CustomCheckbox = ({ value, disabled }) => {
+  if (!value) {
+    return jsx(Fragment, {});
+  }
+  return jsx("span", { className: ` ${checkbox({ disabled })}`, "aria-hidden": true, children: value !== "indeterminate" ? jsx(Icon, { icon: "check", size: "s" }) : jsx(Icon, { icon: "remove", size: "s" }) });
+};
+const defaultRender = (checkbox2, description) => jsxs(Fragment, { children: [checkbox2, jsx("div", { className: indentedDescriptionStyle, children: description })] });
+const Checkbox = forwardRef(function Checkbox2({
+  label,
+  description,
+  value,
+  onChange,
+  disabled,
+  validity,
+  id = createValidHtmlId(label),
+  hideLabel = false,
+  canShowErrorMessage = false,
+  className,
+  render = defaultRender,
+  // Input element props
+  onBlur,
+  ...rest
+}, ref) {
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = useInputHelperText({
+    id: helperId,
+    validity,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
+  const descriptionElement = description ? jsx(SelectionDescription, { disabled, children: description }) : void 0;
+  const checkboxElement = jsx("span", { className: `${InputWrapper} ${className}`, ref, children: jsxs("label", { htmlFor: inputId, className: LabelRecipe({ disabled }), id: labelId, children: [jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), tabIndex: 0, ...inputAriaProps, ...rest }), jsx("span", { className: CheckboxRecipe({
+    checked: value,
+    disabled,
+    validity: (validity == null ? void 0 : validity.type) === "error" ? "error" : void 0
+  }), children: jsx(CustomCheckbox, { value, disabled }) }), hideLabel ? jsx(ScreenReaderOnly, { children: label }) : jsx("span", { className: LabelStyle, children: label })] }) });
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: render(checkboxElement, descriptionElement) });
+});
+export {
+  Checkbox
+};