@gnist/design-system 6.0.0-alpha.3 → 6.1.0

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

@@ -1,73 +1,63 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
+import { recipe } from "@vanilla-extract/recipes";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { calc } from "@vanilla-extract/css-utils";
-const chipBase = gnistStyle({
-  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"
+import { style } from "@vanilla-extract/css";
+var chipRecipe = recipe({
+	base: 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"
+	}),
+	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: {}
+		}
+	}
 });
-const chipRecipe = gnistRecipe({
-  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
-};
+//#endregion
+export { chipRecipe };

package/dist/components/actions/index.cjs

@@ -1,31 +1,33 @@
 "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 Switch = require("./selectionControls/Switch.cjs");
-const RadioGroup = require("./selectionControls/RadioGroup.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.Switch = Switch.Switch;
-exports.RadioGroup = RadioGroup.RadioGroup;
-exports.ActionChip = ActionChip.ActionChip;
-exports.FilterChip = FilterChip.FilterChip;
-exports.TagChip = TagChip.TagChip;
+const require_PrimaryButton = require("./buttons/PrimaryButton.cjs");
+const require_SecondaryButton = require("./buttons/SecondaryButton.cjs");
+const require_SuccessButton = require("./buttons/SuccessButton.cjs");
+const require_DangerButton = require("./buttons/DangerButton.cjs");
+const require_GhostButton = require("./buttons/GhostButton.cjs");
+const require_TextButton = require("./buttons/TextButton.cjs");
+const require_IconButton = require("./buttons/IconButton.cjs");
+require("./buttons/index.cjs");
+const require_Checkbox = require("./selectionControls/Checkbox.cjs");
+const require_RadioGroup = require("./selectionControls/RadioGroup.cjs");
+const require_RadioButton = require("./selectionControls/RadioButton.cjs");
+const require_Switch = require("./selectionControls/Switch.cjs");
+require("./selectionControls/index.cjs");
+const require_ActionChip = require("./chips/ActionChip.cjs");
+const require_FilterChip = require("./chips/FilterChip.cjs");
+const require_TagChip = require("./chips/TagChip.cjs");
+require("./chips/index.cjs");
+exports.ActionChip = require_ActionChip.ActionChip;
+exports.Checkbox = require_Checkbox.Checkbox;
+exports.DangerButton = require_DangerButton.DangerButton;
+exports.FilterChip = require_FilterChip.FilterChip;
+exports.GhostButton = require_GhostButton.GhostButton;
+exports.IconButton = require_IconButton.IconButton;
+exports.PrimaryButton = require_PrimaryButton.PrimaryButton;
+exports.RadioButton = require_RadioButton.RadioButton;
+exports.RadioGroup = require_RadioGroup.RadioGroup;
+exports.SecondaryButton = require_SecondaryButton.SecondaryButton;
+exports.SuccessButton = require_SuccessButton.SuccessButton;
+exports.Switch = require_Switch.Switch;
+exports.TagChip = require_TagChip.TagChip;
+exports.TextButton = require_TextButton.TextButton;

package/dist/components/actions/index.js

@@ -6,26 +6,14 @@ 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 "./buttons/index.js";
 import { Checkbox } from "./selectionControls/Checkbox.js";
+import { RadioGroup } from "./selectionControls/RadioGroup.js";
 import { RadioButton } from "./selectionControls/RadioButton.js";
 import { Switch } from "./selectionControls/Switch.js";
-import { RadioGroup } from "./selectionControls/RadioGroup.js";
+import "./selectionControls/index.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,
-  RadioGroup,
-  SecondaryButton,
-  SuccessButton,
-  Switch,
-  TagChip,
-  TextButton
-};
+import "./chips/index.js";
+export { ActionChip, Checkbox, DangerButton, FilterChip, GhostButton, IconButton, PrimaryButton, RadioButton, RadioGroup, SecondaryButton, SuccessButton, Switch, TagChip, TextButton };

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

@@ -1,56 +1,95 @@
 "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");
-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" }) });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/iconography/index.cjs");
+const require_InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+const require_ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
+require("../../../utilities/accessibility/index.cjs");
+const require_index$2 = require("../../../utilities/html/index.cjs");
+const require_checkbox_css = require("./checkbox.css.cjs");
+const require_shared_css = require("./shared.css.cjs");
+const require_shared = require("./shared.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/actions/selectionControls/Checkbox.tsx
+var CustomCheckbox = ({ value, disabled }) => {
+	if (!value) return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return (0, react_jsx_runtime.jsx)("span", {
+		className: ` ${require_checkbox_css.checkbox({ disabled })}`,
+		"aria-hidden": true,
+		children: value !== "indeterminate" ? (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			icon: "check",
+			size: "s"
+		}) : (0, react_jsx_runtime.jsx)(require_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 })] });
-function Checkbox({
-  label,
-  description,
-  value,
-  onChange,
-  disabled,
-  validity,
-  id = index.createValidHtmlId(label),
-  hideLabel = false,
-  canShowErrorMessage = false,
-  className,
-  render = defaultRender,
-  // Input element props
-  onBlur,
-  ref,
-  ...rest
-}) {
-  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?.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 && render(checkboxElement, descriptionElement) });
+var defaultRender = (checkbox, description) => (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [checkbox, (0, react_jsx_runtime.jsx)("div", {
+	className: require_shared_css.indentedDescriptionStyle,
+	children: description
+})] });
+/**
+*
+* 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.
+
+Documentation: [Checkbox](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-checkbox--docs)
+*/
+function Checkbox({ label, description, value, onChange, disabled, validity, id = require_index$2.createValidHtmlId(label), hideLabel = false, canShowErrorMessage = false, className, render = defaultRender, onBlur, ref, ...rest }) {
+	const inputId = id;
+	const labelId = `${id}-label`;
+	const { helperTextProps, inputAriaProps } = require_InputHelperText.useInputHelperText({
+		id: `${id}-helper`,
+		validity,
+		reserveSpaceForMessage: canShowErrorMessage
+	});
+	const descriptionElement = description ? (0, react_jsx_runtime.jsx)(require_shared.SelectionDescription, {
+		disabled,
+		children: description
+	}) : void 0;
+	const checkboxElement = (0, react_jsx_runtime.jsx)("span", {
+		className: `${require_shared_css.InputWrapper} ${className}`,
+		ref,
+		children: (0, react_jsx_runtime.jsxs)("label", {
+			htmlFor: inputId,
+			className: require_shared_css.LabelRecipe({ disabled }),
+			id: labelId,
+			children: [
+				(0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					id: inputId,
+					disabled,
+					onChange,
+					checked: value === true,
+					className: require_shared_css.InputStyleRecipe({ disabled }),
+					tabIndex: 0,
+					...inputAriaProps,
+					...rest
+				}),
+				(0, react_jsx_runtime.jsx)("span", {
+					className: require_checkbox_css.CheckboxRecipe({
+						checked: value,
+						disabled,
+						validity: validity?.type === "error" ? "error" : void 0
+					}),
+					children: (0, react_jsx_runtime.jsx)(CustomCheckbox, {
+						value,
+						disabled
+					})
+				}),
+				hideLabel ? (0, react_jsx_runtime.jsx)(require_ScreenReaderOnly.ScreenReaderOnly, { children: label }) : (0, react_jsx_runtime.jsx)("span", {
+					className: require_shared_css.LabelStyle,
+					children: label
+				})
+			]
+		})
+	});
+	return (0, react_jsx_runtime.jsx)(require_shared.HelperTextWrapper, {
+		...helperTextProps,
+		children: render && render(checkboxElement, descriptionElement)
+	});
 }
+//#endregion
 exports.Checkbox = Checkbox;

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

@@ -1,56 +1,94 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import "../../../foundation/iconography/index.js";
 import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
 import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
-import "../../../utilities/accessibility/visuallyHidden.css.js";
+import "../../../utilities/accessibility/index.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
-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, InputStyleRecipe, LabelStyle, LabelRecipe, 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" }) });
+import { InputStyleRecipe, InputWrapper, LabelRecipe, LabelStyle, indentedDescriptionStyle } from "./shared.css.js";
+import { HelperTextWrapper, SelectionDescription } from "./shared.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/selectionControls/Checkbox.tsx
+var 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 })] });
-function Checkbox({
-  label,
-  description,
-  value,
-  onChange,
-  disabled,
-  validity,
-  id = createValidHtmlId(label),
-  hideLabel = false,
-  canShowErrorMessage = false,
-  className,
-  render = defaultRender,
-  // Input element props
-  onBlur,
-  ref,
-  ...rest
-}) {
-  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?.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 && render(checkboxElement, descriptionElement) });
+var defaultRender = (checkbox, description) => jsxs(Fragment, { children: [checkbox, jsx("div", {
+	className: indentedDescriptionStyle,
+	children: description
+})] });
+/**
+*
+* 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.
+
+Documentation: [Checkbox](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-checkbox--docs)
+*/
+function Checkbox({ label, description, value, onChange, disabled, validity, id = createValidHtmlId(label), hideLabel = false, canShowErrorMessage = false, className, render = defaultRender, onBlur, ref, ...rest }) {
+	const inputId = id;
+	const labelId = `${id}-label`;
+	const { helperTextProps, inputAriaProps } = useInputHelperText({
+		id: `${id}-helper`,
+		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?.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 && render(checkboxElement, descriptionElement)
+	});
 }
-export {
-  Checkbox
-};
+//#endregion
+export { Checkbox };