@staffbase/design 18.8.1 → 19.0.0

package/dist/main.cjs

@@ -273,36 +273,17 @@ ActionMenuItemIcon.displayName = "ActionMenuItemIcon";
 ActionMenuItemLabel.displayName = "ActionMenuItemLabel";
 //#endregion
 //#region src/components/button/Button.tsx
-var Button = (0, react.forwardRef)(function Button(props, ref) {
-	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		"data-c13y-component": "button",
-		className: `ds-button ds-button--${variant} ${className}`,
-		disabled,
-		...rest,
-		ref,
-		children: [
-			iconPosition === "leading" ? icon : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, clsx.default)("ds-button__content"),
-				children
-			}),
-			iconPosition === "trailing" ? icon : null
-		]
-	});
-});
-var IconButton = (0, react.forwardRef)(function IconButton(props, ref) {
-	const { icon, className = "", variant = "primary", ...rest } = props;
+var Button = (0, react.forwardRef)((props, ref) => {
+	const { children, className, variant = "solid", color = "primary", iconOnly = false, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		"data-c13y-component": "button",
-		className: (0, clsx.default)("ds-button", "ds-icon-button", `ds-button--${variant}`, `${className}`),
+		className: (0, clsx.default)("ds-button", `ds-button--${variant}`, `ds-button--${color}`, { "ds-button--icon-only": iconOnly }, className),
 		...rest,
 		ref,
-		children: icon
+		children
 	});
 });
 Button.displayName = "Button";
-IconButton.displayName = "IconButton";
 //#endregion
 //#region src/components/alertDialog/AlertDialog.tsx
 var Trigger$7 = (props) => {
@@ -326,7 +307,7 @@ var Cancel = (0, react.forwardRef)((props, ref) => {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.AlertDialog.Close, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		"data-c13y-purpose": "close",
-		variant: "secondary",
+		color: "neutral",
 		className: (0, clsx.default)("ds-alert-dialog__cancel", className),
 		...rest,
 		ref,
@@ -336,7 +317,6 @@ var Cancel = (0, react.forwardRef)((props, ref) => {
 var Action$1 = (0, react.forwardRef)((props, ref) => {
 	const { children, className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		"data-c13y-component": "button",
 		className: (0, clsx.default)("ds-alert-dialog__action", className),
 		...rest,
 		ref,
@@ -8932,6 +8912,40 @@ var BottomSheet = {
 	Header: Header$1
 };
 //#endregion
+//#region src/components/buttonDeprecated/ButtonDeprecated.tsx
+/** @deprecated Use Button instead */
+var ButtonDeprecated = (0, react.forwardRef)(function Button(props, ref) {
+	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"data-c13y-component": "button",
+		className: `ds-button-deprecated ds-button-deprecated--${variant} ${className}`,
+		disabled,
+		...rest,
+		ref,
+		children: [
+			iconPosition === "leading" ? icon : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, clsx.default)("ds-button__content"),
+				children
+			}),
+			iconPosition === "trailing" ? icon : null
+		]
+	});
+});
+/** @deprecated Use Button with iconOnly instead */
+var IconButton = (0, react.forwardRef)(function IconButton(props, ref) {
+	const { icon, className = "", variant = "primary", ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"data-c13y-component": "button",
+		className: (0, clsx.default)("ds-button-deprecated", "ds-icon-button", `ds-button-deprecated--${variant}`, `${className}`),
+		...rest,
+		ref,
+		children: icon
+	});
+});
+ButtonDeprecated.displayName = "Button";
+IconButton.displayName = "IconButton";
+//#endregion
 //#region src/components/card/Card.tsx
 var Card = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
@@ -9354,38 +9368,6 @@ Wrapper.displayName = "FileUpload.Wrapper";
 Preview.displayName = "FileUploadPreview";
 Overlay.displayName = "FileUploadOverlay";
 //#endregion
-//#region src/components/ghostButton/GhostButton.tsx
-var GhostButton = (0, react.forwardRef)(function GhostButton(props, ref) {
-	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		"data-c13y-component": "ghost-button",
-		className: `ds-ghost-button ds-ghost-button--${variant} ${className}`,
-		disabled,
-		...rest,
-		ref,
-		children: [
-			iconPosition === "leading" ? icon : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, clsx.default)("ds-ghost-button__content"),
-				children
-			}),
-			iconPosition === "trailing" ? icon : null
-		]
-	});
-});
-var IconGhostButton = (0, react.forwardRef)(function IconGhostButton(props, ref) {
-	const { icon, className = "", variant = "primary", ...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		"data-c13y-component": "ghost-button",
-		className: (0, clsx.default)("ds-ghost-button", "ds-ghost-icon-button", `ds-ghost-button--${variant}`, `${className}`),
-		...rest,
-		ref,
-		children: icon
-	});
-});
-GhostButton.displayName = "GhostButton";
-IconGhostButton.displayName = "IconGhostButton";
-//#endregion
 //#region src/components/loadingSpinner/LoadingSpinner.tsx
 var getProgressOffset = (circumference, progress) => {
 	if (progress) return circumference - circumference * progress / 100;
@@ -9692,15 +9674,16 @@ var Filter = (attr) => {
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (0, clsx.default)("ds-filter__footer"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GhostButton, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
+					color: "neutral",
 					onClick: () => {
 						cancelAll([...localOptions]);
 					},
-					variant: "secondary",
 					disabled: !hasSelected || !!loading,
 					children: clearButtonText
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GhostButton, {
-					variant: "primary",
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
 					onClick: handleApply,
 					disabled: !dirty || !!loading,
 					children: applyButtonText
@@ -9853,6 +9836,40 @@ var FilterTrigger = (0, react.memo)((0, react.forwardRef)(function FilterTrigger
 }));
 Filter.displayName = "Filter";
 //#endregion
+//#region src/components/ghostButton/GhostButton.tsx
+/** @deprecated Use Button with variant="ghost" instead */
+var GhostButton = (0, react.forwardRef)(function GhostButton(props, ref) {
+	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"data-c13y-component": "ghost-button",
+		className: `ds-ghost-button ds-ghost-button--${variant} ${className}`,
+		disabled,
+		...rest,
+		ref,
+		children: [
+			iconPosition === "leading" ? icon : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, clsx.default)("ds-ghost-button__content"),
+				children
+			}),
+			iconPosition === "trailing" ? icon : null
+		]
+	});
+});
+/** @deprecated Use Button with variant="ghost" and iconOnly instead */
+var IconGhostButton = (0, react.forwardRef)(function IconGhostButton(props, ref) {
+	const { icon, className = "", variant = "primary", ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"data-c13y-component": "ghost-button",
+		className: (0, clsx.default)("ds-ghost-button", "ds-ghost-icon-button", `ds-ghost-button--${variant}`, `${className}`),
+		...rest,
+		ref,
+		children: icon
+	});
+});
+GhostButton.displayName = "GhostButton";
+IconGhostButton.displayName = "IconGhostButton";
+//#endregion
 //#region src/components/growl/Growl.tsx
 var PlainGrowl = (0, react.forwardRef)(function PlainGrowl(props, ref) {
 	const { variant = "success", className = "", ...rest } = props;
@@ -10121,7 +10138,7 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
 		onClick: () => onHeaderButtonClick(),
 		children: headerButtonText
 	});
-	else headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+	else headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonDeprecated, {
 		className: (0, clsx.default)("ds-modal__button--accept"),
 		variant: "primary",
 		onClick: () => onHeaderButtonClick(),
@@ -10234,12 +10251,12 @@ var ModalFooter = (0, react.forwardRef)(function ModalFooter(props, ref) {
 		ref,
 		children: [props.children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "ds-modal__footer-buttons",
-			children: [cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			children: [cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonDeprecated, {
 				className: (0, clsx.default)("ds-modal__button--cancel"),
 				variant: "secondary",
 				onClick: () => onCancel(),
 				children: cancelButtonText
-			}), footerButtonText && onFooterButtonClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			}), footerButtonText && onFooterButtonClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonDeprecated, {
 				className: (0, clsx.default)("ds-modal__button--accept"),
 				variant: footerButtonVariant,
 				disabled: disableFooterButton,
@@ -10345,11 +10362,11 @@ function ModalDialog(props) {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "ds-modal-dialog__content",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonDeprecated, {
 							variant: confirmButtonVariant,
 							onClick: onConfirm,
 							children: confirmButtonText
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonDeprecated, {
 							variant: "secondary",
 							onClick: onCancel,
 							children: cancelButtonText
@@ -11758,6 +11775,7 @@ exports.BulbIcon = BulbIcon_default;
 exports.BulletListIcon = BulletListIcon_default;
 exports.BurgerIcon = BurgerIcon_default;
 exports.Button = Button;
+exports.ButtonDeprecated = ButtonDeprecated;
 exports.CalendarIcon = CalendarIcon_default;
 exports.CameraIcon = CameraIcon_default;
 exports.Card = Card;