@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/components/Combobox/useComboboxKeyboard.cjs

@@ -0,0 +1,59 @@
+'use client';
+const require_use_debounce_callback = require("../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.cjs");
+require("../../utilities/index.cjs");
+const require_ComboboxIdContext = require("./ComboboxIdContext.cjs");
+//#region src/components/Combobox/useComboboxKeyboard.tsx
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption }) => {
+	const { activeIndex } = require_ComboboxIdContext.useComboboxId();
+	const handleKeyDownFunc = (event) => {
+		if (readOnly || disabled) return;
+		if (!event) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (open) break;
+				setOpen(true);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (activeIndex !== 0) break;
+				setOpen(false);
+				break;
+			case "Enter": {
+				event.preventDefault();
+				if (!open) break;
+				if (activeIndex <= interactiveChildren.length - 1) {
+					const selectedComponent = interactiveChildren[activeIndex];
+					if (selectedComponent.props.onSelect) {
+						selectedComponent?.props.onSelect();
+						return;
+					}
+				}
+				const option = filteredOptions[activeIndex - interactiveChildren.length];
+				handleSelectOption({ option: options[option] });
+				break;
+			}
+			case "Backspace":
+				if (!multiple) {
+					const lastOption = Object.keys(selectedOptions).pop();
+					lastOption && handleSelectOption({
+						option: selectedOptions[lastOption],
+						remove: true
+					});
+					break;
+				}
+				if (inputValue === "" && multiple) {
+					const lastOption = Object.keys(selectedOptions).pop();
+					lastOption && handleSelectOption({
+						option: selectedOptions[lastOption],
+						remove: true
+					});
+				}
+				break;
+			default: break;
+		}
+	};
+	return require_use_debounce_callback.useDebounceCallback(handleKeyDownFunc, 20);
+};
+//#endregion
+exports.useComboboxKeyboard = useComboboxKeyboard;

package/dist/cjs/components/Combobox/useFloatingCombobox.cjs

@@ -0,0 +1,75 @@
+'use client';
+const require_ComboboxIdContext = require("./ComboboxIdContext.cjs");
+let react = require("react");
+let _floating_ui_react = require("@floating-ui/react");
+let react_dom = require("react-dom");
+//#region src/components/Combobox/useFloatingCombobox.tsx
+const useFloatingCombobox = ({ listRef }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const { activeIndex } = require_ComboboxIdContext.useComboboxId();
+	const dispatch = require_ComboboxIdContext.useComboboxIdDispatch();
+	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
+		open,
+		onOpenChange: (newOpen) => {
+			if (!newOpen) dispatch?.({
+				type: "SET_ACTIVE_INDEX",
+				payload: 0
+			});
+			(0, react_dom.flushSync)(() => {
+				if (refs.floating.current && !newOpen) refs.floating.current.scrollTop = 0;
+				setTimeout(() => {
+					setOpen(newOpen);
+				}, 1);
+			});
+		},
+		whileElementsMounted: (reference, floating, update) => {
+			(0, _floating_ui_react.autoUpdate)(reference, floating, update);
+			return () => {
+				floating.scrollTop = 0;
+			};
+		},
+		middleware: [
+			(0, _floating_ui_react.flip)({ padding: 10 }),
+			(0, _floating_ui_react.size)({ apply({ rects, elements }) {
+				requestAnimationFrame(() => {
+					Object.assign(elements.floating.style, {
+						width: `${rects.reference.width}px`,
+						maxHeight: `200px`
+					});
+				});
+			} }),
+			(0, _floating_ui_react.offset)(10)
+		]
+	});
+	const { getReferenceProps, getFloatingProps, getItemProps } = (0, _floating_ui_react.useInteractions)([
+		(0, _floating_ui_react.useRole)(context, { role: "listbox" }),
+		(0, _floating_ui_react.useDismiss)(context),
+		(0, _floating_ui_react.useListNavigation)(context, {
+			listRef,
+			activeIndex,
+			virtual: true,
+			scrollItemIntoView: true,
+			enabled: open,
+			focusItemOnHover: true,
+			onNavigate: (index) => {
+				dispatch?.({
+					type: "SET_ACTIVE_INDEX",
+					payload: index || 0
+				});
+			}
+		})
+	]);
+	return {
+		open,
+		setOpen,
+		activeIndex,
+		refs,
+		floatingStyles,
+		context,
+		getReferenceProps,
+		getFloatingProps,
+		getItemProps
+	};
+};
+//#endregion
+exports.useFloatingCombobox = useFloatingCombobox;

package/dist/cjs/components/Combobox/useFormField/FieldsetContext.cjs

@@ -0,0 +1,5 @@
+'use client';
+//#region src/components/Combobox/useFormField/FieldsetContext.ts
+const FieldsetContext = (0, require("react").createContext)(null);
+//#endregion
+exports.FieldsetContext = FieldsetContext;

package/dist/cjs/components/Combobox/useFormField/useFormField.cjs

@@ -0,0 +1,34 @@
+'use client';
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_FieldsetContext = require("./FieldsetContext.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+//#region src/components/Combobox/useFormField/useFormField.ts
+/**
+* Handles props and their state for various form-fields in context with Fieldset
+*/
+const useFormField = (props, prefix) => {
+	const fieldset = (0, react.useContext)(require_FieldsetContext.FieldsetContext);
+	const randomId = (0, react.useId)();
+	const id = props.id ?? `${prefix}-${randomId}`;
+	const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
+	const descriptionId = `${prefix}-description-${randomId}`;
+	const size = props.size ?? fieldset?.size ?? "md";
+	const disabled = fieldset?.disabled || props?.disabled;
+	const hasError = !disabled && !!(props.error || fieldset?.error);
+	return {
+		hasError,
+		errorId,
+		descriptionId,
+		size,
+		inputProps: {
+			id,
+			disabled,
+			"aria-invalid": hasError ? true : void 0,
+			"aria-describedby": (0, clsx_lite.default)(props["aria-describedby"], !!props?.description && typeof props?.description === "string" && descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || void 0
+		}
+	};
+};
+//#endregion
+exports.useFormField = useFormField;

package/dist/cjs/components/Combobox/useFormField/useFormField.d.cts

@@ -0,0 +1,27 @@
+
+import { Size } from "@digdir/designsystemet-types";
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/Combobox/useFormField/useFormField.d.ts
+type FormFieldProps = {
+  /** Error message for form field */
+  error?: ReactNode;
+  /** Override generated errorId */
+  errorId?: string;
+  /** Disables element
+   * @note Avoid using if possible for accessibility purposes
+   */
+  disabled?: boolean;
+  /** Description for field */
+  description?: ReactNode;
+  /** Override internal id */
+  id?: string;
+  /** Toggle `readOnly` */
+  readOnly?: boolean;
+  /**
+   * Changes field size and paddings
+   * @default md
+   */
+  size?: Size;
+} & Pick<HTMLAttributes<HTMLElement>, 'aria-describedby'>;
+//#endregion
+export { FormFieldProps };

package/dist/cjs/components/Combobox/utilities.cjs

@@ -0,0 +1,35 @@
+'use client';
+const require_Custom = require("./Custom.cjs");
+let react = require("react");
+//#region src/components/Combobox/utilities.ts
+function isComboboxCustom(child) {
+	return (0, react.isValidElement)(child) && child.type === require_Custom.ComboboxCustom;
+}
+function isInteractiveComboboxCustom(child) {
+	return isComboboxCustom(child) && child.props.interactive === true;
+}
+const INTERNAL_OPTION_PREFIX = "internal-option-";
+/**
+* We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+* @param value
+* @returns
+*/
+const prefix = (value) => {
+	return INTERNAL_OPTION_PREFIX + value;
+};
+const removePrefix = (value) => {
+	return value.slice(16);
+};
+const setReactInputValue = (input, value) => {
+	const previousValue = input.value;
+	input.value = value;
+	const tracker = input._valueTracker;
+	if (typeof tracker !== "undefined") tracker.setValue(previousValue);
+	input.dispatchEvent(new Event("change", { bubbles: true }));
+};
+//#endregion
+exports.isComboboxCustom = isComboboxCustom;
+exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;
+exports.prefix = prefix;
+exports.removePrefix = removePrefix;
+exports.setReactInputValue = setReactInputValue;

package/dist/cjs/components/alert/alert.cjs

@@ -0,0 +1,23 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/alert/alert.tsx
+/**
+* Alerts are used to inform users about important information, warnings, errors, or success.
+*
+* @example
+* <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+*/
+const Alert = (0, react.forwardRef)(function Alert({ "data-color": color = "info", className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx_lite.default)("ds-alert", className),
+		"data-color": color,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.Alert = Alert;

package/dist/cjs/components/alert/alert.d.cts

@@ -0,0 +1,14 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { HTMLAttributes } from "react";
+//#region src/components/alert/alert.d.ts
+type AlertProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
+ * @example
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+ */
+declare const Alert: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Alert, AlertProps };

package/dist/cjs/components/avatar/avatar.cjs

@@ -0,0 +1,47 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/avatar/avatar.tsx
+/**
+* Avatars are used to represent people or entities.
+*
+* @example
+* <Avatar aria-label="John Doe" initials="JD" />
+*
+* @example
+* <Avatar aria-label="John Doe">
+*  <img src='…' alt='John Doe' />
+* </Avatar>
+*
+* @example
+* <Avatar aria-label="John Doe">
+*  <Icon />
+* </Avatar>
+*/
+const Avatar = (0, react.forwardRef)(function Avatar({ "aria-label": ariaLabel, "data-tooltip": dataTooltip, variant, className, children, initials, asChild, ...rest }, ref) {
+	const OuterComponent = asChild ? _radix_ui_react_slot.Slot : "span";
+	const useSlot = children && typeof children !== "string";
+	const textChild = children && typeof children === "string";
+	const Component = useSlot ? _radix_ui_react_slot.Slot : react.Fragment;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OuterComponent, {
+		ref,
+		className: (0, clsx_lite.default)("ds-avatar", className),
+		"data-variant": variant,
+		"data-initials": initials,
+		role: asChild ? void 0 : "img",
+		"aria-label": ariaLabel || dataTooltip,
+		"data-tooltip": dataTooltip,
+		tabIndex: dataTooltip ? 0 : void 0,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			...useSlot && !asChild ? { "aria-hidden": true } : {},
+			children: textChild ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children }) : children
+		})
+	});
+});
+//#endregion
+exports.Avatar = Avatar;

package/dist/cjs/components/avatar/avatar.d.cts

@@ -0,0 +1,68 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { Size } from "@digdir/designsystemet-types";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/avatar/avatar.d.ts
+type AriaHidden = HTMLAttributes<HTMLSpanElement>['aria-hidden'];
+type AriaAttributes$1 = {
+  'aria-label': string;
+  'data-tooltip'?: never;
+  'aria-hidden'?: AriaHidden;
+} | {
+  'aria-label'?: never;
+  'data-tooltip': string;
+  'aria-hidden'?: AriaHidden;
+} | {
+  'aria-label'?: string;
+  'data-tooltip'?: string;
+  'aria-hidden': true | 'true';
+};
+type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, AriaAttributes$1 & {
+  /**
+   * The size of the avatar.
+   */
+  'data-size'?: 'xs' | Size;
+  /**
+   * The shape of the avatar.
+   *
+   * @default 'circle'
+   * @deprecated Please use `style={{ '--dsc-avatar-radius': VALUE }}` instead
+   */
+  variant?: 'circle' | 'square';
+  /**
+   * Initials to display inside the avatar.
+   */
+  initials?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Image, icon or initials to display inside the avatar.
+   *
+   * Gets `aria-hidden="true"`
+   */
+  children?: ReactNode;
+}>;
+/**
+ * Avatars are used to represent people or entities.
+ *
+ * @example
+ * <Avatar aria-label="John Doe" initials="JD" />
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <img src='…' alt='John Doe' />
+ * </Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <Icon />
+ * </Avatar>
+ */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Avatar, AvatarProps };

package/dist/cjs/components/avatar-stack/avatar-stack.cjs

@@ -0,0 +1,40 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/avatar-stack/avatar-stack.tsx
+/**
+* Use `AvatarStack` to constrain Avatars into a stack.
+*
+* @example
+* <EXPERIMENTAL_AvatarStack>
+*   <Avatar aria-label='name'>
+*     <img src={cat1} alt='' />
+*   </Avatar>
+*   <Avatar aria-label='name'>
+*     <BriefcaseIcon />
+*   </Avatar>
+*   <Avatar aria-label='name' initials='sm' />
+* </EXPERIMENTAL_AvatarStack>
+*/
+const EXPERIMENTAL_AvatarStack = (0, react.forwardRef)(function AvatarStack({ className, gap, suffix, children, avatarSize, overlap, style, expandable, ...rest }, ref) {
+	if (typeof overlap === "number") overlap = `calc(var(--dsc-avatar-stack-size) / 100 * ${overlap})`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+		className: (0, clsx_lite.default)(`ds-avatar-stack`, className),
+		"data-expandable": expandable || void 0,
+		tabIndex: rest.tabIndex ?? (expandable ? 0 : void 0),
+		ref,
+		style: {
+			"--dsc-avatar-stack-gap": gap,
+			"--dsc-avatar-stack-size": avatarSize,
+			"--dsc-avatar-stack-overlap": overlap,
+			...style
+		},
+		...rest,
+		children: [children, suffix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: suffix })]
+	});
+});
+//#endregion
+exports.EXPERIMENTAL_AvatarStack = EXPERIMENTAL_AvatarStack;

package/dist/cjs/components/avatar-stack/avatar-stack.d.cts

@@ -0,0 +1,81 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/avatar-stack/avatar-stack.d.ts
+type AvatarStackProps = {
+  /**
+   *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
+   *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
+   */
+  gap?: string;
+  /**
+   *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
+   *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
+   */
+  avatarSize?: string;
+  /**
+   *  A number which represents the percentage value of how much avatars should overlap.
+   *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
+   */
+  overlap?: number | string;
+  /**
+   *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
+   */
+  suffix?: string;
+  /**
+   *  Expand on hover to show full avatars.
+   *  'fixed': AvatarStack physical width does not change when avatars are expanded.
+   *  @default undefined
+   */
+  expandable?: 'fixed' | boolean;
+} & HTMLAttributes<HTMLUListElement>;
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponent<{
+  /**
+   *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
+   *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
+   */
+  gap?: string;
+  /**
+   *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
+   *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
+   */
+  avatarSize?: string;
+  /**
+   *  A number which represents the percentage value of how much avatars should overlap.
+   *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
+   */
+  overlap?: number | string;
+  /**
+   *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
+   */
+  suffix?: string;
+  /**
+   *  Expand on hover to show full avatars.
+   *  'fixed': AvatarStack physical width does not change when avatars are expanded.
+   *  @default undefined
+   */
+  expandable?: "fixed" | boolean;
+} & HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
+//#endregion
+export { AvatarStackProps, EXPERIMENTAL_AvatarStack };

package/dist/cjs/components/badge/badge-position.cjs

@@ -0,0 +1,27 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/badge/badge-position.tsx
+/**
+* `BadgePosition` is a component that positions the badge.
+*
+* @example
+* <BadgePosition placement='top-right' overlap='circle'>
+*  <Badge count={5} maxCount={10} />
+*  <Element />
+* </BadgePosition>
+*/
+const BadgePosition = (0, react.forwardRef)(function BadgePlacement({ className, overlap = "rectangle", placement = "top-right", ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, clsx_lite.default)("ds-badge--position", className),
+		"data-overlap": overlap,
+		"data-placement": placement,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.BadgePosition = BadgePosition;

package/dist/cjs/components/badge/badge-position.d.cts

@@ -0,0 +1,45 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { HTMLAttributes } from "react";
+//#region src/components/badge/badge-position.d.ts
+type BadgePositionProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+  /**
+   * The placement of the badge
+   *
+   * @default top-right
+   */
+  placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  /**
+   * Use when badge is floating to change the position of the badge
+   *
+   * @default rectangle
+   */
+  overlap?: 'circle' | 'rectangle';
+}>;
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
+declare const BadgePosition: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "placement" | "overlap"> & {
+  /**
+   * The placement of the badge
+   *
+   * @default top-right
+   */
+  placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  /**
+   * Use when badge is floating to change the position of the badge
+   *
+   * @default rectangle
+   */
+  overlap?: "circle" | "rectangle";
+} & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { BadgePosition, BadgePositionProps };

package/dist/cjs/components/badge/badge.cjs

@@ -0,0 +1,29 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/badge/badge.tsx
+/**
+* `Badge` is a non-interactive component for displaying status with or without numbers.
+*
+* @example without children
+* <Badge count={5} maxCount={10} />
+*
+* @example with children
+* <Badge count={5} maxCount={10}>
+*   <Icon />
+* </Badge>
+*/
+const Badge = (0, react.forwardRef)(function Badge({ className, count, maxCount, variant, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, clsx_lite.default)("ds-badge", className),
+		"data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count,
+		"data-variant": variant,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.Badge = Badge;

package/dist/cjs/components/badge/badge.d.cts

@@ -0,0 +1,25 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { HTMLAttributes } from "react";
+//#region src/components/badge/badge.d.ts
+type BadgeProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+  /**
+   * The number to display in the badge
+   */
+  count?: number;
+  /**
+   * The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+`
+   */
+  maxCount?: number;
+  /**
+   * Change the background color of the badge.
+   *
+   * @default 'base'
+   */
+  variant?: 'base' | 'tinted';
+  children?: never;
+}>;
+//#endregion
+export { BadgeProps };

package/dist/cjs/components/badge/index.cjs

@@ -0,0 +1,15 @@
+'use client';
+const require_badge = require("./badge.cjs");
+const require_badge_position = require("./badge-position.cjs");
+//#region src/components/badge/index.ts
+/**
+* `Badge` is a non-interactive component for displaying status with or without numbers.
+*
+* @example without children
+* <Badge count={5} maxCount={10} />
+*/
+const Badge = Object.assign(require_badge.Badge, { Position: require_badge_position.BadgePosition });
+Badge.Position.displayName = "Badge.Position";
+//#endregion
+exports.Badge = Badge;
+exports.BadgePosition = require_badge_position.BadgePosition;