@staffbase/design 19.1.0 → 20.0.0

package/dist/main.cjs

@@ -11,35 +11,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
+const require_chunk = require("./chunk-CDHmpCQf.cjs");
 let _floating_ui_react = require("@floating-ui/react");
 let clsx = require("clsx");
-clsx = __toESM(clsx, 1);
+clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
-react = __toESM(react, 1);
+react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react = require("@base-ui/react");
+let _base_ui_react_avatar = require("@base-ui/react/avatar");
 let _base_ui_react_drawer = require("@base-ui/react/drawer");
 let _base_ui_react_field = require("@base-ui/react/field");
 let react_dropzone = require("react-dropzone");
@@ -48,14 +28,14 @@ let motion_react = require("motion/react");
 let _base_ui_react_menu = require("@base-ui/react/menu");
 let _base_ui_react_number_field = require("@base-ui/react/number-field");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
-_radix_ui_react_popover = __toESM(_radix_ui_react_popover, 1);
+_radix_ui_react_popover = require_chunk.__toESM(_radix_ui_react_popover, 1);
 let _base_ui_react_combobox = require("@base-ui/react/combobox");
 let _base_ui_react_radio = require("@base-ui/react/radio");
 let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
 let _base_ui_react_select = require("@base-ui/react/select");
 let _base_ui_react_switch = require("@base-ui/react/switch");
 let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
-_radix_ui_react_tabs = __toESM(_radix_ui_react_tabs, 1);
+_radix_ui_react_tabs = require_chunk.__toESM(_radix_ui_react_tabs, 1);
 let _base_ui_react_input = require("@base-ui/react/input");
 let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
 //#region src/components/actionMenu/ActionMenuContext.tsx
@@ -273,11 +253,24 @@ ActionMenuItemIcon.displayName = "ActionMenuItemIcon";
 ActionMenuItemLabel.displayName = "ActionMenuItemLabel";
 //#endregion
 //#region src/components/button/Button.tsx
+function buttonVariants({ variant = "solid", color = "primary", iconOnly, className } = {}) {
+	return {
+		className: (0, clsx.default)("ds-button", className),
+		"data-variant": variant,
+		"data-color": color,
+		"data-icon-only": iconOnly ? true : void 0
+	};
+}
 var Button = (0, react.forwardRef)((props, ref) => {
-	const { children, className, variant = "solid", color = "primary", iconOnly = false, ...rest } = props;
+	const { children, className, variant, color, iconOnly, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		"data-c13y-component": "button",
-		className: (0, clsx.default)("ds-button", `ds-button--${variant}`, `ds-button--${color}`, { "ds-button--icon-only": iconOnly }, className),
+		...buttonVariants({
+			variant,
+			color,
+			iconOnly,
+			className
+		}),
 		...rest,
 		ref,
 		children
@@ -336,7 +329,7 @@ var Popup$6 = (0, react.forwardRef)((props, ref) => {
 		})]
 	});
 });
-var Title$2 = (0, react.forwardRef)((props, ref) => {
+var Title$3 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.AlertDialog.Title, {
 		"data-c13y-component": "alert-dialog-title",
@@ -345,7 +338,7 @@ var Title$2 = (0, react.forwardRef)((props, ref) => {
 		ref
 	});
 });
-var Description$3 = (0, react.forwardRef)((props, ref) => {
+var Description$4 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.AlertDialog.Description, {
 		"data-c13y-component": "alert-dialog-description",
@@ -360,11 +353,70 @@ var AlertDialog = {
 	Popup: Popup$6,
 	Cancel,
 	Action: Action$1,
-	Title: Title$2,
-	Description: Description$3,
+	Title: Title$3,
+	Description: Description$4,
 	Icon: Icon$1
 };
 //#endregion
+//#region src/components/avatar/Avatar.tsx
+var Root$10 = (0, react.forwardRef)((props, ref) => {
+	const { size = 40, className, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Root, {
+		ref,
+		"data-size": size,
+		className: (0, clsx.default)("ds-avatar", className),
+		...rest
+	});
+});
+var Image = (0, react.forwardRef)((props, ref) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Image, {
+		"data-c13y-component": "avatar",
+		ref,
+		className: (0, clsx.default)("ds-avatar__image", className),
+		...rest
+	});
+});
+var AVATAR_COLORS = [
+	"cyan",
+	"pink",
+	"purple",
+	"teal"
+];
+function deriveColor(name) {
+	return AVATAR_COLORS[name.split("").reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0) % AVATAR_COLORS.length] ?? "purple";
+}
+var Avatar = {
+	Root: Root$10,
+	Fallback: (0, react.forwardRef)((props, ref) => {
+		const { className, name, ...rest } = props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_avatar.Avatar.Fallback, {
+			"data-c13y-component": "avatar",
+			ref,
+			"data-color": name ? deriveColor(name) : void 0,
+			className: (0, clsx.default)("ds-avatar__fallback", className),
+			...rest
+		});
+	}),
+	Group: (0, react.forwardRef)((props, ref) => {
+		const { className, ...rest } = props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: (0, clsx.default)("ds-avatar__group", className),
+			...rest
+		});
+	}),
+	GroupCount: (0, react.forwardRef)((props, ref) => {
+		const { className, ...rest } = props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: (0, clsx.default)("ds-avatar__group-count", className),
+			...rest
+		});
+	}),
+	Image
+};
+//#endregion
 //#region src/icons/AddCircleIcon.tsx
 /**
 * THIS IS A GENERATED FILE. PLEASE SEE `scripts/iconGenerator`.
@@ -8807,8 +8859,9 @@ var Icon = ({ name, ...props }) => {
 	}) : null;
 };
 //#endregion
-//#region src/components/avatar/Avatar.tsx
-function Avatar(props) {
+//#region src/components/avatarDeprecated/AvatarDeprecated.tsx
+/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+function AvatarDeprecated(props) {
 	const { alt, children, className = "", color = "purple", size = "32", src } = props;
 	const [hasImage, setHasImage] = (0, react.useState)(src !== void 0 && src !== "");
 	const variant = typeof children === "string" && children !== "" ? color : "grey";
@@ -8818,20 +8871,18 @@ function Avatar(props) {
 	const attrs = { title: alt };
 	if (hasImage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		...attrs,
-		"data-c13y-component": "avatar",
-		className: (0, clsx.default)("ds-avatar", "ds-avatar__image", `ds-avatar--size-${size}`, className),
+		className: (0, clsx.default)("ds-avatar-deprecated", "ds-avatar-deprecated__image", `ds-avatar--size-${size}`, className),
 		src,
 		alt,
 		onError: () => setHasImage(false)
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		...attrs,
-		"data-c13y-component": "avatar",
-		className: (0, clsx.default)("ds-avatar", "ds-avatar--default", `ds-avatar--${variant}`, `ds-avatar--size-${size}`, className),
+		className: (0, clsx.default)("ds-avatar-deprecated", "ds-avatar--default", `ds-avatar--${variant}`, `ds-avatar--size-${size}`, className),
 		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserIcon_default, {})
 	});
 }
-Avatar.displayName = "Avatar";
+AvatarDeprecated.displayName = "Avatar";
 //#endregion
 //#region src/components/badge/Badge.tsx
 function Badge(props) {
@@ -8859,7 +8910,7 @@ var ICONS = {
 	warning: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WarningIcon_default, {}),
 	critical: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {})
 };
-var Root$8 = (0, react.forwardRef)((props, ref) => {
+var Root$9 = (0, react.forwardRef)((props, ref) => {
 	const { children, className, variant = "info", size = "sm", layout = "standalone", ...restProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-c13y-component": "banner",
@@ -8876,8 +8927,8 @@ var Root$8 = (0, react.forwardRef)((props, ref) => {
 		})]
 	});
 });
-Root$8.displayName = "Banner.Root";
-var CloseButton = (0, react.forwardRef)((props, ref) => {
+Root$9.displayName = "Banner.Root";
+var Close$3 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...restProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		ref,
@@ -8888,8 +8939,8 @@ var CloseButton = (0, react.forwardRef)((props, ref) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon_default, {})
 	});
 });
-CloseButton.displayName = "Banner.CloseButton";
-var Banner = Object.assign(Root$8, { CloseButton });
+Close$3.displayName = "Banner.Close";
+var Banner = Object.assign(Root$9, { Close: Close$3 });
 //#endregion
 //#region src/components/bottomSheet/BottomSheet.tsx
 var Trigger$6 = (props) => {
@@ -8900,7 +8951,7 @@ var Trigger$6 = (props) => {
 		ref
 	});
 };
-var Title$1 = (0, react.forwardRef)((props, ref) => {
+var Title$2 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Title, {
 		"data-c13y-component": "bottom-sheet-title",
@@ -8909,7 +8960,7 @@ var Title$1 = (0, react.forwardRef)((props, ref) => {
 		ref
 	});
 });
-var Description$2 = (0, react.forwardRef)((props, ref) => {
+var Description$3 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Description, {
 		"data-c13y-component": "bottom-sheet-description",
@@ -8983,8 +9034,8 @@ var BottomSheet = {
 	Trigger: Trigger$6,
 	Close: Close$2,
 	Back,
-	Description: Description$2,
-	Title: Title$1,
+	Description: Description$3,
+	Title: Title$2,
 	Action,
 	Header: Header$1
 };
@@ -9154,7 +9205,7 @@ var Trigger$5 = (props) => {
 		ref
 	});
 };
-var Title = (0, react.forwardRef)((props, ref) => {
+var Title$1 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Title, {
 		"data-c13y-component": "dialog-title",
@@ -9163,7 +9214,7 @@ var Title = (0, react.forwardRef)((props, ref) => {
 		ref
 	});
 });
-var Description$1 = (0, react.forwardRef)((props, ref) => {
+var Description$2 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Dialog.Description, {
 		"data-c13y-component": "dialog-description",
@@ -9228,8 +9279,8 @@ var Dialog = {
 	Popup: Popup$4,
 	Trigger: Trigger$5,
 	Close: Close$1,
-	Description: Description$1,
-	Title,
+	Description: Description$2,
+	Title: Title$1,
 	Header,
 	Footer,
 	Body
@@ -9263,13 +9314,63 @@ function Divider(props) {
 }
 Divider.displayName = "Divider";
 //#endregion
+//#region src/components/empty/Empty.tsx
+var Root$8 = (0, react.forwardRef)((props, ref) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-c13y-component": "empty",
+		className: (0, clsx.default)("ds-empty", className),
+		...rest,
+		ref
+	});
+});
+Root$8.displayName = "Empty.Root";
+var Media = (0, react.forwardRef)((props, ref) => {
+	const { className, size = "md", ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-c13y-component": "empty-media",
+		"data-size": size,
+		className: (0, clsx.default)("ds-empty__media", className),
+		...rest,
+		ref
+	});
+});
+Media.displayName = "Empty.Media";
+var Title = (0, react.forwardRef)((props, ref) => {
+	const { className, children, as: Tag, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		"data-c13y-component": "empty-title",
+		className: (0, clsx.default)("ds-empty__title", className),
+		...rest,
+		ref,
+		children
+	});
+});
+Title.displayName = "Empty.Title";
+var Description$1 = (0, react.forwardRef)((props, ref) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		"data-c13y-component": "empty-description",
+		className: (0, clsx.default)("ds-empty__description", className),
+		...rest,
+		ref
+	});
+});
+Description$1.displayName = "Empty.Description";
+var Empty = {
+	Root: Root$8,
+	Media,
+	Title,
+	Description: Description$1
+};
+//#endregion
 //#region src/components/emptyState/EmptyState.tsx
 var getValidIconSize = (iconSize) => iconSize === "40px" || iconSize === "96px" ? iconSize : "40px";
+/** @deprecated Use Empty instead */
 function EmptyState(props) {
 	const { title, icon, iconSize, body, className = "" } = props;
 	const validIconSize = getValidIconSize(iconSize);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-c13y-component": "empty-state",
 		className: (0, clsx.default)("ds-empty-state", className),
 		children: [
 			icon && (0, react.cloneElement)(icon, {
@@ -9282,12 +9383,10 @@ function EmptyState(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "ds-empty-state__title",
-				"data-c13y-component": "empty-state-title",
 				children: title
 			}),
 			body ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "ds-empty-state__body",
-				"data-c13y-component": "empty-state-content",
 				children: body
 			}) : null
 		]
@@ -10804,7 +10903,7 @@ var Chip = (0, react.forwardRef)((props, ref) => {
 		})]
 	});
 });
-var Empty$1 = (0, react.forwardRef)((props, ref) => {
+var Empty$2 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Empty, {
 		"data-c13y-component": "searchable-multi-select-empty",
@@ -10840,7 +10939,7 @@ var SearchableMultiSelect = {
 	Input: Input$1,
 	Value: Value$1,
 	Chip,
-	Empty: Empty$1,
+	Empty: Empty$2,
 	Collection: _base_ui_react_combobox.Combobox.Collection,
 	Status: _base_ui_react_combobox.Combobox.Status
 };
@@ -10938,7 +11037,7 @@ var GroupLabel$1 = (0, react.forwardRef)((props, ref) => {
 		...rest
 	});
 });
-var Empty = (0, react.forwardRef)((props, ref) => {
+var Empty$1 = (0, react.forwardRef)((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Empty, {
 		"data-c13y-component": "searchable-single-select-empty",
@@ -10959,7 +11058,7 @@ var SearchableSingleSelect = {
 	ItemIndicator: ItemIndicator$1,
 	Separator: Separator$2,
 	Input,
-	Empty
+	Empty: Empty$1
 };
 //#endregion
 //#region src/components/segmentedControl/SegmentedControl.tsx
@@ -11835,6 +11934,7 @@ exports.ArrowUpIcon = ArrowUpIcon_default;
 exports.ArtboardIcon = ArtboardIcon_default;
 exports.AttachmentIcon = AttachmentIcon_default;
 exports.Avatar = Avatar;
+exports.AvatarDeprecated = AvatarDeprecated;
 exports.Badge = Badge;
 exports.Banner = Banner;
 exports.BarChartIcon = BarChartIcon_default;
@@ -11899,6 +11999,7 @@ exports.EmailFollowUpIcon = EmailFollowUpIcon_default;
 exports.EmailIcon = EmailIcon_default;
 exports.EmailOpenIcon = EmailOpenIcon_default;
 exports.EmailTeamsIcon = EmailTeamsIcon_default;
+exports.Empty = Empty;
 exports.EmptyState = EmptyState;
 exports.ExpandHorizontalIcon = ExpandHorizontalIcon_default;
 exports.ExpandIcon = ExpandIcon_default;
@@ -12139,6 +12240,7 @@ exports.ViewAltIcon = ViewAltIcon_default;
 exports.ViewIcon = ViewIcon_default;
 exports.WarningIcon = WarningIcon_default;
 exports.WatchIcon = WatchIcon_default;
+exports.buttonVariants = buttonVariants;
 exports.iconNames = iconNames;
 
 //# sourceMappingURL=main.cjs.map