@chayns-ui/core 0.4.2 → 0.5.0

package/dist/components/badge/Badge.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+//#region src/components/badge/Badge.tsx
+var Badge = forwardRef(function Badge({ "aria-label": ariaLabel, children, className, size = "sm", tone = "neutral", ...spanProps }, ref) {
+	const resolvedClassName = [
+		"chayns-badge",
+		`chayns-badge--${tone}`,
+		`chayns-badge--${size}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("span", {
+		...spanProps,
+		"aria-label": ariaLabel,
+		className: resolvedClassName,
+		ref,
+		role: ariaLabel === void 0 ? void 0 : "status",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "chayns-badge__content",
+			children
+		})
+	});
+});
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { BadgeProps } from './Badge.types.js';\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { 'aria-label': ariaLabel, children, className, size = 'sm', tone = 'neutral', ...spanProps },\n  ref,\n) {\n  const resolvedClassName = [\n    'chayns-badge',\n    `chayns-badge--${tone}`,\n    `chayns-badge--${size}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span\n      {...spanProps}\n      aria-label={ariaLabel}\n      className={resolvedClassName}\n      ref={ref}\n      role={ariaLabel === undefined ? undefined : 'status'}\n    >\n      <span className=\"chayns-badge__content\">{children}</span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"mappings":";;;AAIA,IAAM,QAAQ,WAAwC,SAAS,MAC7D,EAAE,cAAc,WAAW,UAAU,WAAW,OAAO,MAAM,OAAO,WAAW,GAAG,aAClF,KACA;CACA,MAAM,oBAAoB;EACxB;EACA,iBAAiB;EACjB,iBAAiB;EACjB;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,cAAY;EACZ,WAAW;EACN;EACL,MAAM,cAAc,KAAA,IAAY,KAAA,IAAY;EAE5C,UAAA,oBAAC,QAAD;GAAM,WAAU;GAAyB;EAAe,CAAA;CACpD,CAAA;AAEV,CAAC"}

package/dist/components/badge/Badge.types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export declare const BADGE_TONES: readonly ["neutral", "accent", "success", "warning", "danger"];
+export type BadgeTone = (typeof BADGE_TONES)[number];
+export declare const BADGE_SIZES: readonly ["sm", "md"];
+export type BadgeSize = (typeof BADGE_SIZES)[number];
+export interface BadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role'> {
+    children: Exclude<ReactNode, boolean | null | undefined>;
+    tone?: BadgeTone;
+    size?: BadgeSize;
+    'aria-label'?: string;
+    role?: never;
+}
+//# sourceMappingURL=Badge.types.d.ts.map

package/dist/components/badge/Badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,eAAO,MAAM,WAAW,gEAAiE,CAAC;AAC1F,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,WAAW,uBAAwB,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1F,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}

package/dist/components/badge/Badge.types.js

@@ -0,0 +1,13 @@
+//#region src/components/badge/Badge.types.ts
+var BADGE_TONES = [
+	"neutral",
+	"accent",
+	"success",
+	"warning",
+	"danger"
+];
+var BADGE_SIZES = ["sm", "md"];
+//#endregion
+export { BADGE_SIZES, BADGE_TONES };
+
+//# sourceMappingURL=Badge.types.js.map

package/dist/components/badge/Badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.js","names":[],"sources":["../../../src/components/badge/Badge.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport const BADGE_TONES = ['neutral', 'accent', 'success', 'warning', 'danger'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\nexport const BADGE_SIZES = ['sm', 'md'] as const;\nexport type BadgeSize = (typeof BADGE_SIZES)[number];\n\nexport interface BadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'role'> {\n  children: Exclude<ReactNode, boolean | null | undefined>;\n  tone?: BadgeTone;\n  size?: BadgeSize;\n  'aria-label'?: string;\n  role?: never;\n}\n"],"mappings":";AAEA,IAAa,cAAc;CAAC;CAAW;CAAU;CAAW;CAAW;AAAQ;AAG/E,IAAa,cAAc,CAAC,MAAM,IAAI"}

package/dist/components/button/Button.types.d.ts

@@ -6,6 +6,11 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
  * @see {@link https://tappqa.tobit.com/Bodywork/DesignSystem/#buttons | DesignSystem — Buttons & Aktionen}
  */
 export type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger';
+/**
+ * Runtime representation of the finite Button variant contract.
+ * Keep this list as the single source for Storybook controls and iteration.
+ */
+export declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "danger"];
 /**
  * @description A FontAwesome Classic icon name in its Regular form (e.g.
  * `fa-plus`). Button and IconButton resolve the matching Solid weight

package/dist/components/button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,EAAE,CAAC;AAExC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3E;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF;;;;;OAKG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,eAAe,oDAKiB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,EAAE,CAAC;AAExC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3E;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF;;;;;OAKG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB"}

package/dist/components/button/Button.types.js

@@ -0,0 +1,15 @@
+//#region src/components/button/Button.types.ts
+/**
+* Runtime representation of the finite Button variant contract.
+* Keep this list as the single source for Storybook controls and iteration.
+*/
+var BUTTON_VARIANTS = [
+	"primary",
+	"outline",
+	"ghost",
+	"danger"
+];
+//#endregion
+export { BUTTON_VARIANTS };
+
+//# sourceMappingURL=Button.types.js.map

package/dist/components/button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","names":[],"sources":["../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\n/**\n * @description Supported visual emphasis levels for {@link ButtonProps} and\n * `IconButtonProps`. Milestone 1 supports exactly these four values; there is\n * no default variant and no fifth value.\n * @see {@link https://tappqa.tobit.com/Bodywork/DesignSystem/#buttons | DesignSystem — Buttons & Aktionen}\n */\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger';\n\n/**\n * Runtime representation of the finite Button variant contract.\n * Keep this list as the single source for Storybook controls and iteration.\n */\nexport const BUTTON_VARIANTS = [\n  'primary',\n  'outline',\n  'ghost',\n  'danger',\n] as const satisfies readonly ButtonVariant[];\n\n/**\n * @description A FontAwesome Classic icon name in its Regular form (e.g.\n * `fa-plus`). Button and IconButton resolve the matching Solid weight\n * internally and cross-fade between the two on hover/active; consumers must\n * not pass a pre-resolved weight and must supply a name that has both a\n * Regular and a Solid glyph available.\n */\nexport type ButtonIcon = `fa-${string}`;\n\n/**\n * @description Visible content that gives a `Button` its accessible name.\n * Excludes `boolean`, `null` and `undefined` so a `Button` can never be\n * rendered without real, visible label content.\n */\nexport type ButtonContent = Exclude<ReactNode, boolean | null | undefined>;\n\n/**\n * @description Props for a visible-label native action button. Renders a\n * native `<button>` and forwards all remaining native button props, events,\n * `className` and `ref`.\n */\nexport interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {\n  /**\n   * @description Visual emphasis that communicates the action's role within\n   * its action scope. At most one `primary` action should exist per closed\n   * action scope (page, card, dialog, drawer, form, wizard step, or closed\n   * accordion content).\n   */\n  variant: ButtonVariant;\n\n  /**\n   * @description Optional leading FontAwesome Classic icon name. Always\n   * rendered before `children`; there is no trailing-icon or icon-only mode\n   * on `Button` itself — use `IconButton` for an icon-only action.\n   */\n  icon?: ButtonIcon;\n\n  /**\n   * @description Visible, non-empty content used as the button label. Loading\n   * state, polymorphism (rendering as something other than a native button)\n   * and navigation are explicitly not part of the Milestone 1 API.\n   */\n  children: ButtonContent;\n}\n"],"mappings":";;;;;AAcA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;AACF"}

package/dist/components/combo-box/ComboBox.d.ts

@@ -0,0 +1,6 @@
+import type { ComboBoxOptionProps } from './ComboBox.types.js';
+declare const ComboBox: import("react").ForwardRefExoticComponent<(Omit<import("./ComboBox.types.js").ComboBoxSingleProps, "ref"> | Omit<import("./ComboBox.types.js").ComboBoxMultipleProps, "ref">) & import("react").RefAttributes<HTMLInputElement>> & {
+    Option: import("react").ForwardRefExoticComponent<Omit<ComboBoxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default ComboBox;
+//# sourceMappingURL=ComboBox.d.ts.map

package/dist/components/combo-box/ComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AA2T9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAEzD,eAAe,QAAQ,CAAC"}

package/dist/components/combo-box/ComboBox.js

@@ -0,0 +1,217 @@
+import { ComboBoxContext, getOptionLabel, useComboBoxContext } from "./ComboBoxContext.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/components/combo-box/ComboBox.tsx
+function getOptionElements(children) {
+	const options = [];
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		const element = child;
+		if (element.type === Fragment) options.push(...getOptionElements(element.props.children));
+		else if (typeof element.props.value === "string") options.push(element);
+	});
+	return options;
+}
+var Option = forwardRef(function Option({ children, className, value, ...optionProps }, ref) {
+	const comboBox = useComboBoxContext();
+	const isVisible = comboBox.visibleValues.includes(value);
+	const isSelected = comboBox.isSelected(value);
+	const resolvedClassName = [
+		"chayns-combo-box__option",
+		isSelected ? "chayns-combo-box__option--selected" : "",
+		comboBox.activeValue === value ? "chayns-combo-box__option--active" : "",
+		className
+	].filter(Boolean).join(" ");
+	if (!isVisible) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		...optionProps,
+		"aria-selected": isSelected,
+		className: resolvedClassName,
+		id: comboBox.optionId(value),
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: () => comboBox.select(value),
+		ref,
+		role: "option",
+		children: [comboBox.multiple ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "chayns-combo-box__checkbox",
+			"data-checked": isSelected || void 0
+		}) : null, children]
+	});
+});
+var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
+	const { "aria-label": ariaLabel, children, className, defaultValue, disabled, id, multiple = false, onValueChange, openOnFocus = true, placeholder, value, ...inputProps } = props;
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const listboxId = `${inputId}-listbox`;
+	const rootRef = useRef(null);
+	const inputRef = useRef(null);
+	const optionElements = useMemo(() => getOptionElements(children), [children]);
+	const optionMap = useMemo(() => new Map(optionElements.map((option) => [option.props.value, option])), [optionElements]);
+	const defaultValues = multiple ? defaultValue?.map((option) => option.props.value) ?? [] : [];
+	const controlledValues = multiple ? value?.map((option) => option.props.value) ?? [] : [];
+	const [uncontrolledValue, setUncontrolledValue] = useState(multiple ? "" : defaultValue ?? "");
+	const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);
+	const [inputText, setInputText] = useState(multiple ? "" : defaultValue ?? "");
+	const [open, setOpen] = useState(false);
+	const [activeValue, setActiveValue] = useState();
+	const isControlled = value !== void 0;
+	const selectedValue = multiple ? "" : isControlled ? value : uncontrolledValue;
+	const selectedValues = multiple ? isControlled ? controlledValues : uncontrolledValues : [];
+	const normalizedFilter = inputText.trim().toLocaleLowerCase();
+	const visibleValues = optionElements.filter((option) => {
+		const label = getOptionLabel(option.props.children).toLocaleLowerCase();
+		return normalizedFilter === "" || label.includes(normalizedFilter);
+	}).map((option) => option.props.value);
+	useEffect(() => {
+		if (open && activeValue === void 0) setActiveValue(visibleValues[0]);
+	}, [
+		activeValue,
+		open,
+		visibleValues
+	]);
+	useEffect(() => {
+		if (!open) return;
+		function closeOnOutsidePress(event) {
+			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {
+				commitInput();
+				setOpen(false);
+			}
+		}
+		document.addEventListener("pointerdown", closeOnOutsidePress);
+		return () => document.removeEventListener("pointerdown", closeOnOutsidePress);
+	});
+	function setInputElement(element) {
+		inputRef.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref !== null) ref.current = element;
+	}
+	function emitValue(nextValue) {
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}
+	function emitValues(nextValues) {
+		if (!isControlled) setUncontrolledValues(nextValues);
+		const nextOptions = nextValues.map((nextValue) => optionMap.get(nextValue)).filter((option) => option !== void 0);
+		onValueChange?.(nextOptions);
+	}
+	function commitInput() {
+		if (!multiple && inputText !== selectedValue) emitValue(inputText);
+	}
+	function select(nextValue) {
+		if (multiple) {
+			emitValues(selectedValues.includes(nextValue) ? selectedValues.filter((selected) => selected !== nextValue) : [...selectedValues, nextValue]);
+			setInputText("");
+			setActiveValue(void 0);
+			setOpen(true);
+			return;
+		}
+		const option = optionMap.get(nextValue);
+		emitValue(nextValue);
+		setInputText(option === void 0 ? nextValue : getOptionLabel(option.props.children));
+		setActiveValue(void 0);
+		setOpen(false);
+	}
+	function handleChange(event) {
+		setInputText(event.target.value);
+		setActiveValue(void 0);
+		setOpen(true);
+		props.onChange?.(event);
+	}
+	function handleBlur(event) {
+		props.onBlur?.(event);
+		if (!rootRef.current?.contains(event.relatedTarget)) {
+			commitInput();
+			setOpen(false);
+		}
+	}
+	function handleKeyDown(event) {
+		const currentIndex = activeValue === void 0 ? -1 : visibleValues.indexOf(activeValue);
+		let nextIndex = currentIndex;
+		if (event.key === "ArrowDown") nextIndex = Math.min(currentIndex + 1, visibleValues.length - 1);
+		if (event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
+		if (event.key === "Home") nextIndex = 0;
+		if (event.key === "End") nextIndex = visibleValues.length - 1;
+		if (nextIndex !== currentIndex && visibleValues[nextIndex] !== void 0) {
+			event.preventDefault();
+			setActiveValue(visibleValues[nextIndex]);
+			setOpen(true);
+		} else if (event.key === "Enter" && activeValue !== void 0) {
+			event.preventDefault();
+			select(activeValue);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			setInputText(multiple ? "" : selectedValue);
+			setActiveValue(void 0);
+			setOpen(false);
+		}
+		props.onKeyDown?.(event);
+	}
+	const resolvedClassName = ["chayns-combo-box", open ? "chayns-combo-box--open" : ""].filter(Boolean).join(" ");
+	const describedLabel = placeholder === void 0 ? void 0 : `${inputId}-label`;
+	const selectedOptions = selectedValues.map((selected) => optionMap.get(selected)).filter((option) => option !== void 0);
+	const inputClassName = ["chayns-combo-box__input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ComboBoxContext.Provider, {
+		value: {
+			activeValue,
+			close: () => setOpen(false),
+			inputText,
+			isSelected: (optionValue) => multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,
+			multiple,
+			optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+			select,
+			visibleValues
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: resolvedClassName,
+			ref: rootRef,
+			children: [
+				multiple ? /* @__PURE__ */ jsx("div", {
+					className: "chayns-combo-box__chips",
+					"aria-hidden": "true",
+					children: selectedOptions.map((option) => /* @__PURE__ */ jsx("span", {
+						className: "chayns-combo-box__chip",
+						children: option.props.children
+					}, option.props.value))
+				}) : null,
+				/* @__PURE__ */ jsx("input", {
+					...inputProps,
+					"aria-activedescendant": open && activeValue ? `${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, "-")}` : void 0,
+					"aria-autocomplete": "list",
+					"aria-controls": listboxId,
+					"aria-expanded": open,
+					"aria-label": ariaLabel,
+					className: inputClassName,
+					disabled,
+					id: inputId,
+					onBlur: handleBlur,
+					onChange: handleChange,
+					onFocus: () => openOnFocus && setOpen(true),
+					onKeyDown: handleKeyDown,
+					placeholder: placeholder === void 0 ? void 0 : " ",
+					ref: setInputElement,
+					role: "combobox",
+					value: inputText
+				}),
+				placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
+					className: "chayns-combo-box__label",
+					htmlFor: inputId,
+					id: describedLabel,
+					children: placeholder
+				}) : null,
+				open ? /* @__PURE__ */ jsx("div", {
+					"aria-multiselectable": multiple || void 0,
+					className: "chayns-combo-box__popup",
+					id: listboxId,
+					role: "listbox",
+					children
+				}) : null
+			]
+		})
+	});
+});
+var ComboBox = Object.assign(ComboBoxRoot, { Option });
+//#endregion
+export { ComboBox as default };
+
+//# sourceMappingURL=ComboBox.js.map

package/dist/components/combo-box/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';\n\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isVisible = comboBox.visibleValues.includes(value);\n  const isSelected = comboBox.isSelected(value);\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    comboBox.activeValue === value ? 'chayns-combo-box__option--active' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      {...optionProps}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={() => comboBox.select(value)}\n      ref={ref}\n      role=\"option\"\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLInputElement, ComboBoxProps>(function ComboBoxRoot(props, ref) {\n  const {\n    'aria-label': ariaLabel,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    id,\n    multiple = false,\n    onValueChange,\n    openOnFocus = true,\n    placeholder,\n    value,\n    ...inputProps\n  } = props;\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const listboxId = `${inputId}-listbox`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const optionElements = useMemo(() => getOptionElements(children), [children]);\n  const optionMap = useMemo(\n    () => new Map(optionElements.map((option) => [option.props.value, option])),\n    [optionElements],\n  );\n  const defaultValues = multiple\n    ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const controlledValues = multiple\n    ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n  const [inputText, setInputText] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [open, setOpen] = useState(false);\n  const [activeValue, setActiveValue] = useState<string>();\n  const isControlled = value !== undefined;\n  const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n  const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n  const normalizedFilter = inputText.trim().toLocaleLowerCase();\n  const visibleValues = optionElements\n    .filter((option) => {\n      const label = getOptionLabel(option.props.children).toLocaleLowerCase();\n      return normalizedFilter === '' || label.includes(normalizedFilter);\n    })\n    .map((option) => option.props.value);\n\n  useEffect(() => {\n    if (open && activeValue === undefined) {\n      setActiveValue(visibleValues[0]);\n    }\n  }, [activeValue, open, visibleValues]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {\n        commitInput();\n        setOpen(false);\n      }\n    }\n\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\n\n  function setInputElement(element: HTMLInputElement | null) {\n    inputRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function emitValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n  }\n\n  function emitValues(nextValues: string[]) {\n    if (!isControlled) {\n      setUncontrolledValues(nextValues);\n    }\n\n    const nextOptions = nextValues\n      .map((nextValue) => optionMap.get(nextValue))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n      nextOptions,\n    );\n  }\n\n  function commitInput() {\n    if (!multiple && inputText !== selectedValue) {\n      emitValue(inputText);\n    }\n  }\n\n  function select(nextValue: string) {\n    if (multiple) {\n      const nextValues = selectedValues.includes(nextValue)\n        ? selectedValues.filter((selected) => selected !== nextValue)\n        : [...selectedValues, nextValue];\n      emitValues(nextValues);\n      setInputText('');\n      setActiveValue(undefined);\n      setOpen(true);\n      return;\n    }\n\n    const option = optionMap.get(nextValue);\n    emitValue(nextValue);\n    setInputText(option === undefined ? nextValue : getOptionLabel(option.props.children));\n    setActiveValue(undefined);\n    setOpen(false);\n  }\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    setInputText(event.target.value);\n    setActiveValue(undefined);\n    setOpen(true);\n    props.onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    props.onBlur?.(event);\n    if (!rootRef.current?.contains(event.relatedTarget)) {\n      commitInput();\n      setOpen(false);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const currentIndex = activeValue === undefined ? -1 : visibleValues.indexOf(activeValue);\n    let nextIndex = currentIndex;\n\n    if (event.key === 'ArrowDown') nextIndex = Math.min(currentIndex + 1, visibleValues.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(currentIndex - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = visibleValues.length - 1;\n\n    if (nextIndex !== currentIndex && visibleValues[nextIndex] !== undefined) {\n      event.preventDefault();\n      setActiveValue(visibleValues[nextIndex]);\n      setOpen(true);\n    } else if (event.key === 'Enter' && activeValue !== undefined) {\n      event.preventDefault();\n      select(activeValue);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setInputText(multiple ? '' : selectedValue);\n      setActiveValue(undefined);\n      setOpen(false);\n    }\n\n    props.onKeyDown?.(event);\n  }\n\n  const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n    .filter(Boolean)\n    .join(' ');\n  const describedLabel = placeholder === undefined ? undefined : `${inputId}-label`;\n  const selectedOptions = selectedValues\n    .map((selected) => optionMap.get(selected))\n    .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n  const inputClassName = ['chayns-combo-box__input', className].filter(Boolean).join(' ');\n\n  return (\n    <ComboBoxContext.Provider\n      value={{\n        activeValue,\n        close: () => setOpen(false),\n        inputText,\n        isSelected: (optionValue) =>\n          multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n        multiple,\n        optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n        select,\n        visibleValues,\n      }}\n    >\n      <div className={resolvedClassName} ref={rootRef}>\n        {multiple ? (\n          <div className=\"chayns-combo-box__chips\" aria-hidden=\"true\">\n            {selectedOptions.map((option) => (\n              <span className=\"chayns-combo-box__chip\" key={option.props.value}>\n                {option.props.children}\n              </span>\n            ))}\n          </div>\n        ) : null}\n        <input\n          {...inputProps}\n          aria-activedescendant={\n            open && activeValue\n              ? `${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-expanded={open}\n          aria-label={ariaLabel}\n          className={inputClassName}\n          disabled={disabled}\n          id={inputId}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={() => openOnFocus && setOpen(true)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder === undefined ? undefined : ' '}\n          ref={setInputElement}\n          role=\"combobox\"\n          value={inputText}\n        />\n        {placeholder !== undefined ? (\n          <label className=\"chayns-combo-box__label\" htmlFor={inputId} id={describedLabel}>\n            {placeholder}\n          </label>\n        ) : null}\n        {open ? (\n          <div\n            aria-multiselectable={multiple || undefined}\n            className=\"chayns-combo-box__popup\"\n            id={listboxId}\n            role=\"listbox\"\n          >\n            {children}\n          </div>\n        ) : null}\n      </div>\n    </ComboBoxContext.Provider>\n  );\n});\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nexport default ComboBox;\n"],"mappings":"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"}

package/dist/components/combo-box/ComboBox.types.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+export interface ComboBoxOptionProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'aria-selected'> {
+    value: string;
+    children: Exclude<ReactNode, boolean | null | undefined>;
+    role?: never;
+    'aria-selected'?: never;
+}
+type ComboBoxBaseProps = Omit<ComponentPropsWithRef<'input'>, 'children' | 'defaultValue' | 'value' | 'multiple' | 'role' | 'aria-activedescendant' | 'aria-controls' | 'aria-expanded' | 'aria-autocomplete' | 'onBlur' | 'onChange' | 'onKeyDown'> & {
+    children: ReactNode;
+    /** Bodywork floating label. */
+    placeholder?: string;
+    /** Opens the popup when the input receives focus. */
+    openOnFocus?: boolean;
+    onBlur?: ComponentPropsWithRef<'input'>['onBlur'];
+    onChange?: ComponentPropsWithRef<'input'>['onChange'];
+    onKeyDown?: ComponentPropsWithRef<'input'>['onKeyDown'];
+};
+export interface ComboBoxSingleProps extends ComboBoxBaseProps {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface ComboBoxMultipleProps extends ComboBoxBaseProps {
+    multiple: true;
+    value?: ReactElement<ComboBoxOptionProps>[];
+    defaultValue?: ReactElement<ComboBoxOptionProps>[];
+    onValueChange?: (value: ReactElement<ComboBoxOptionProps>[]) => void;
+}
+export type ComboBoxProps = ComboBoxSingleProps | ComboBoxMultipleProps;
+export {};
+//# sourceMappingURL=ComboBox.types.d.ts.map

package/dist/components/combo-box/ComboBox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,MAAM,GAAG,eAAe,CACtC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,KAAK,iBAAiB,GAAG,IAAI,CAC3B,qBAAqB,CAAC,OAAO,CAAC,EAC5B,UAAU,GACV,cAAc,GACd,OAAO,GACP,UAAU,GACV,MAAM,GACN,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,mBAAmB,GACnB,QAAQ,GACR,UAAU,GACV,WAAW,CACd,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;CACzD,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,KAAK,IAAI,CAAC;CACtE;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAC"}

package/dist/components/combo-box/ComboBoxContext.d.ts

@@ -0,0 +1,15 @@
+import type { ComboBoxOptionProps } from './ComboBox.types.js';
+export interface ComboBoxContextValue {
+    activeValue?: string | undefined;
+    close: () => void;
+    inputText: string;
+    isSelected: (value: string) => boolean;
+    multiple: boolean;
+    optionId: (value: string) => string;
+    select: (value: string) => void;
+    visibleValues: string[];
+}
+export declare const ComboBoxContext: import("react").Context<ComboBoxContextValue | null>;
+export declare function useComboBoxContext(): ComboBoxContextValue;
+export declare function getOptionLabel(option: ComboBoxOptionProps['children']): string;
+//# sourceMappingURL=ComboBoxContext.d.ts.map

package/dist/components/combo-box/ComboBoxContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxContext.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBoxContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAEhF,wBAAgB,kBAAkB,IAAI,oBAAoB,CAQzD;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,UAAU,CAAC,GAAG,MAAM,CAM9E"}

package/dist/components/combo-box/ComboBoxContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+//#region src/components/combo-box/ComboBoxContext.ts
+var ComboBoxContext = createContext(null);
+function useComboBoxContext() {
+	const context = useContext(ComboBoxContext);
+	if (context === null) throw new Error("ComboBox.Option must be rendered within ComboBox.");
+	return context;
+}
+function getOptionLabel(option) {
+	if (typeof option === "string" || typeof option === "number") return String(option);
+	return "";
+}
+//#endregion
+export { ComboBoxContext, getOptionLabel, useComboBoxContext };
+
+//# sourceMappingURL=ComboBoxContext.js.map

package/dist/components/combo-box/ComboBoxContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxContext.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ComboBoxOptionProps } from './ComboBox.types.js';\n\nexport interface ComboBoxContextValue {\n  activeValue?: string | undefined;\n  close: () => void;\n  inputText: string;\n  isSelected: (value: string) => boolean;\n  multiple: boolean;\n  optionId: (value: string) => string;\n  select: (value: string) => void;\n  visibleValues: string[];\n}\n\nexport const ComboBoxContext = createContext<ComboBoxContextValue | null>(null);\n\nexport function useComboBoxContext(): ComboBoxContextValue {\n  const context = useContext(ComboBoxContext);\n\n  if (context === null) {\n    throw new Error('ComboBox.Option must be rendered within ComboBox.');\n  }\n\n  return context;\n}\n\nexport function getOptionLabel(option: ComboBoxOptionProps['children']): string {\n  if (typeof option === 'string' || typeof option === 'number') {\n    return String(option);\n  }\n\n  return '';\n}\n"],"mappings":";;AAeA,IAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,qBAA2C;CACzD,MAAM,UAAU,WAAW,eAAe;CAE1C,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,mDAAmD;CAGrE,OAAO;AACT;AAEA,SAAgB,eAAe,QAAiD;CAC9E,IAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAClD,OAAO,OAAO,MAAM;CAGtB,OAAO;AACT"}

package/dist/components/split-button/SplitButton.types.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef } from 'react';
 import type { ButtonContent, ButtonIcon, ButtonVariant } from '../button/Button.types.js';
+export { BUTTON_VARIANTS } from '../button/Button.types.js';
 import type { PopupListItem } from '../popup/Popup.types.js';
 export interface SplitButtonProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onClick'> {
     variant: ButtonVariant;

package/dist/components/split-button/SplitButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/SplitButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,SAAS,CACvB;IACC,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"SplitButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/SplitButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,SAAS,CACvB;IACC,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/index.d.ts

@@ -1,7 +1,13 @@
 export { default as Button } from './components/button/Button.js';
 export { default as IconButton } from './components/icon-button/IconButton.js';
 export type { ButtonContent, ButtonIcon, ButtonProps, ButtonVariant, } from './components/button/Button.types.js';
+export { BUTTON_VARIANTS } from './components/button/Button.types.js';
 export type { IconButtonProps } from './components/icon-button/IconButton.types.js';
+export { default as Badge } from './components/badge/Badge.js';
+export { BADGE_SIZES, BADGE_TONES } from './components/badge/Badge.types.js';
+export type { BadgeProps, BadgeSize, BadgeTone } from './components/badge/Badge.types.js';
+export { default as ComboBox } from './components/combo-box/ComboBox.js';
+export type { ComboBoxMultipleProps, ComboBoxOptionProps, ComboBoxProps, ComboBoxSingleProps, } from './components/combo-box/ComboBox.types.js';
 export { default as TextField } from './components/text-field/TextField.js';
 export type { TextFieldProps } from './components/text-field/TextField.types.js';
 export { default as TextArea } from './components/text-area/TextArea.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,YAAY,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,GACd,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAEpF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC5E,YAAY,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAEhG,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACjG,YAAY,EACV,qBAAqB,EACrB,YAAY,GACb,MAAM,0DAA0D,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAEpG,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEnG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAEvF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACvE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAEvF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,SAAS,GACV,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAC3F,YAAY,EACV,cAAc,EACd,mBAAmB,GACpB,MAAM,2CAA2C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,5 +1,9 @@
 import Button from "./components/button/Button.js";
 import IconButton from "./components/icon-button/IconButton.js";
+import { BUTTON_VARIANTS } from "./components/button/Button.types.js";
+import Badge from "./components/badge/Badge.js";
+import { BADGE_SIZES, BADGE_TONES } from "./components/badge/Badge.types.js";
+import ComboBox from "./components/combo-box/ComboBox.js";
 import TextField from "./components/text-field/TextField.js";
 import TextArea from "./components/text-area/TextArea.js";
 import Checkbox from "./components/checkbox/Checkbox.js";
@@ -16,4 +20,4 @@ import AvatarGroup from "./components/avatar-group/AvatarGroup.js";
 import List from "./components/list/List.js";
 import Accordion from "./components/accordion/Accordion.js";
 import AccordionGroup from "./components/accordion-group/AccordionGroup.js";
-export { Accordion, AccordionGroup, Avatar, AvatarGroup, Button, Card, Checkbox, IconButton, List, MessageBox, Popup_default as Popup, PopupList, RadioGroup, SegmentedControl, SplitButton, Switch, TextArea, TextField };
+export { Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BUTTON_VARIANTS, Badge, Button, Card, Checkbox, ComboBox, IconButton, List, MessageBox, Popup_default as Popup, PopupList, RadioGroup, SegmentedControl, SplitButton, Switch, TextArea, TextField };

package/dist/list.css

@@ -58,16 +58,16 @@
   }
 
   .chayns-list-item__title {
-    overflow: hidden;
     color: var(--text);
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .chayns-list-item__description {
-    overflow: hidden;
     color: var(--text-3);
     font-size: var(--fs-meta);
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

package/dist/styles.css

@@ -1,4 +1,6 @@
 @import url('./button.css');
+@import url('./badge.css');
+@import url('./combo-box.css');
 @import url('./card.css');
 @import url('./avatar.css');
 @import url('./list.css');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -23,6 +23,8 @@
       "import": "./dist/index.js"
     },
     "./button.css": "./dist/button.css",
+    "./badge.css": "./dist/badge.css",
+    "./combo-box.css": "./dist/combo-box.css",
     "./card.css": "./dist/card.css",
     "./avatar.css": "./dist/avatar.css",
     "./list.css": "./dist/list.css",