@chayns-ui/core 0.2.0 → 0.3.0

package/dist/components/popup/Popup.js

@@ -0,0 +1,107 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+//#region src/components/popup/Popup.tsx
+var Popup = ({ children, className, trigger }) => {
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState({
+		left: 0,
+		top: 0
+	});
+	const triggerRef = useRef(null);
+	const popupRef = useRef(null);
+	const popupId = useId();
+	const updatePosition = () => {
+		const anchor = triggerRef.current;
+		if (!anchor) return;
+		const rect = anchor.getBoundingClientRect();
+		const popup = popupRef.current;
+		const popupWidth = popup?.offsetWidth ?? 0;
+		const popupHeight = popup?.offsetHeight ?? 0;
+		const gap = 8;
+		const margin = 8;
+		const left = Math.min(Math.max(margin, rect.left), Math.max(margin, window.innerWidth - popupWidth - margin));
+		const below = rect.bottom + gap;
+		const top = below + popupHeight <= window.innerHeight - margin ? below : Math.max(margin, rect.top - popupHeight - gap);
+		setPosition({
+			left,
+			top
+		});
+	};
+	const close = (restoreFocus) => {
+		setOpen(false);
+		if (restoreFocus) queueMicrotask(() => triggerRef.current?.focus());
+	};
+	const setTriggerRef = useCallback((node) => {
+		triggerRef.current = node;
+	}, []);
+	useLayoutEffect(() => {
+		if (!open) return;
+		updatePosition();
+		(popupRef.current?.querySelector("[role=\"menuitem\"]"))?.focus();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (target instanceof Node && !triggerRef.current?.contains(target) && !popupRef.current?.contains(target)) close(false);
+		};
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				close(true);
+			}
+			if (event.key === "Tab") close(false);
+		};
+		const handleViewportChange = () => updatePosition();
+		const handlePopupClick = (event) => {
+			if (event.target.closest("[role=\"menuitem\"]")) close(true);
+		};
+		const popupElement = popupRef.current;
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("resize", handleViewportChange);
+		window.addEventListener("scroll", handleViewportChange, true);
+		popupElement?.addEventListener("click", handlePopupClick);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("resize", handleViewportChange);
+			window.removeEventListener("scroll", handleViewportChange, true);
+			popupElement?.removeEventListener("click", handlePopupClick);
+		};
+	}, [open]);
+	const triggerElement = trigger;
+	const enhancedTrigger = cloneElement(triggerElement, {
+		"aria-controls": popupId,
+		"aria-expanded": open,
+		"aria-haspopup": "menu",
+		onClick: (event) => {
+			triggerElement.props.onClick?.(event);
+			if (!event.defaultPrevented) setOpen((value) => !value);
+		},
+		onKeyDown: (event) => {
+			triggerElement.props.onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				setOpen(true);
+			}
+		},
+		ref: setTriggerRef
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [enhancedTrigger, open ? createPortal(/* @__PURE__ */ jsx("div", {
+		className: ["chayns-popup", className].filter(Boolean).join(" "),
+		id: popupId,
+		ref: popupRef,
+		style: {
+			left: position.left,
+			top: position.top
+		},
+		children
+	}), document.body) : null] });
+};
+//#endregion
+export { Popup as default };
+
+//# sourceMappingURL=Popup.js.map

package/dist/components/popup/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":[],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type MouseEvent,\n  type Ref,\n  type ReactElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { PopupProps } from './Popup.types.js';\n\ninterface PopupTriggerProps {\n  'aria-controls'?: string;\n  'aria-expanded'?: boolean;\n  'aria-haspopup'?: string;\n  onClick?: (event: MouseEvent) => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n}\n\ntype PopupTriggerElement = ReactElement<PopupTriggerProps & { ref?: Ref<HTMLElement> }>;\nconst Popup = ({ children, className, trigger }: PopupProps) => {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState({ left: 0, top: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n  const popupId = useId();\n\n  const updatePosition = () => {\n    const anchor = triggerRef.current;\n    if (!anchor) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const popup = popupRef.current;\n    const popupWidth = popup?.offsetWidth ?? 0;\n    const popupHeight = popup?.offsetHeight ?? 0;\n    const gap = 8;\n    const margin = 8;\n    const left = Math.min(\n      Math.max(margin, rect.left),\n      Math.max(margin, window.innerWidth - popupWidth - margin),\n    );\n    const below = rect.bottom + gap;\n    const top =\n      below + popupHeight <= window.innerHeight - margin\n        ? below\n        : Math.max(margin, rect.top - popupHeight - gap);\n\n    setPosition({ left, top });\n  };\n\n  const close = (restoreFocus: boolean) => {\n    setOpen(false);\n    if (restoreFocus) {\n      queueMicrotask(() => triggerRef.current?.focus());\n    }\n  };\n\n  const setTriggerRef = useCallback((node: HTMLElement | null) => {\n    triggerRef.current = node;\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    updatePosition();\n    const firstItem = popupRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"]');\n    firstItem?.focus();\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target;\n      if (\n        target instanceof Node &&\n        !triggerRef.current?.contains(target) &&\n        !popupRef.current?.contains(target)\n      ) {\n        close(false);\n      }\n    };\n    const handleKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        close(true);\n      }\n      if (event.key === 'Tab') close(false);\n    };\n    const handleViewportChange = () => updatePosition();\n    const handlePopupClick = (event: globalThis.MouseEvent) => {\n      if ((event.target as HTMLElement).closest('[role=\"menuitem\"]')) {\n        close(true);\n      }\n    };\n\n    const popupElement = popupRef.current;\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    document.addEventListener('keydown', handleKeyDown);\n    window.addEventListener('resize', handleViewportChange);\n    window.addEventListener('scroll', handleViewportChange, true);\n    popupElement?.addEventListener('click', handlePopupClick);\n\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('keydown', handleKeyDown);\n      window.removeEventListener('resize', handleViewportChange);\n      window.removeEventListener('scroll', handleViewportChange, true);\n      popupElement?.removeEventListener('click', handlePopupClick);\n    };\n  }, [open]);\n\n  const triggerElement = trigger as PopupTriggerElement;\n  // cloneElement forwards `ref` as a plain prop to merge it with the trigger's own ref; the ref\n  // is never read during this render, only later by React when attaching the trigger DOM node.\n  // eslint-disable-next-line react-hooks/refs\n  const enhancedTrigger = cloneElement(triggerElement, {\n    'aria-controls': popupId,\n    'aria-expanded': open,\n    'aria-haspopup': 'menu',\n    onClick: (event: React.MouseEvent) => {\n      triggerElement.props.onClick?.(event);\n      if (!event.defaultPrevented) setOpen((value) => !value);\n    },\n    onKeyDown: (event: KeyboardEvent) => {\n      triggerElement.props.onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n        setOpen(true);\n      }\n    },\n    ref: setTriggerRef,\n  });\n\n  return (\n    <>\n      {enhancedTrigger}\n      {open\n        ? createPortal(\n            <div\n              className={['chayns-popup', className].filter(Boolean).join(' ')}\n              id={popupId}\n              ref={popupRef}\n              style={{ left: position.left, top: position.top }}\n            >\n              {children}\n            </div>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n};\n\nexport default Popup;\n"],"mappings":"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"}

package/dist/components/popup/Popup.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ButtonIcon } from '../button/Button.types.js';
+export interface PopupListItem {
+    icon: ButtonIcon;
+    text: string;
+    onClick: () => void;
+}
+export interface PopupProps {
+    trigger: ReactElement;
+    children: ReactNode;
+    className?: string;
+}
+export interface PopupListProps {
+    trigger: ReactElement;
+    items: PopupListItem[];
+    className?: string;
+}
+//# sourceMappingURL=Popup.types.d.ts.map

package/dist/components/popup/Popup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.types.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/popup/PopupList.d.ts

@@ -0,0 +1,4 @@
+import type { PopupListProps } from './Popup.types.js';
+declare const PopupList: ({ className, items, trigger }: PopupListProps) => import("react").JSX.Element;
+export default PopupList;
+//# sourceMappingURL=PopupList.d.ts.map

package/dist/components/popup/PopupList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupList.d.ts","sourceRoot":"","sources":["../../../src/components/popup/PopupList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,SAAS,GAAI,+BAA+B,cAAc,gCAwC/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/popup/PopupList.js

@@ -0,0 +1,44 @@
+import ButtonIcon from "../button/button-icon/ButtonIcon.js";
+import Popup from "./Popup.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+//#region src/components/popup/PopupList.tsx
+var PopupList = ({ className, items, trigger }) => {
+	const itemRefs = useRef([]);
+	const handleKeyDown = (event) => {
+		const index = itemRefs.current.indexOf(document.activeElement);
+		if (index < 0 || items.length === 0) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const nextIndex = (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+			itemRefs.current[nextIndex]?.focus();
+		}
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			itemRefs.current[event.key === "Home" ? 0 : items.length - 1]?.focus();
+		}
+	};
+	return /* @__PURE__ */ jsx(Popup, {
+		...className ? { className } : {},
+		trigger,
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDown: handleKeyDown,
+			role: "menu",
+			tabIndex: -1,
+			children: items.map((item, index) => /* @__PURE__ */ jsxs("button", {
+				className: "chayns-popup-list__item",
+				onClick: item.onClick,
+				ref: (element) => {
+					itemRefs.current[index] = element;
+				},
+				role: "menuitem",
+				type: "button",
+				children: [/* @__PURE__ */ jsx(ButtonIcon, { icon: item.icon }), /* @__PURE__ */ jsx("span", { children: item.text })]
+			}, `${item.text}-${index}`))
+		})
+	});
+};
+//#endregion
+export { PopupList as default };
+
+//# sourceMappingURL=PopupList.js.map

package/dist/components/popup/PopupList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupList.js","names":[],"sources":["../../../src/components/popup/PopupList.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport Popup from './Popup.js';\nimport type { PopupListProps } from './Popup.types.js';\n\nconst PopupList = ({ className, items, trigger }: PopupListProps) => {\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const index = itemRefs.current.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0 || items.length === 0) return;\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      const direction = event.key === 'ArrowDown' ? 1 : -1;\n      const nextIndex = (index + direction + items.length) % items.length;\n      itemRefs.current[nextIndex]?.focus();\n    }\n    if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      itemRefs.current[event.key === 'Home' ? 0 : items.length - 1]?.focus();\n    }\n  };\n\n  return (\n    <Popup {...(className ? { className } : {})} trigger={trigger}>\n      <div onKeyDown={handleKeyDown} role=\"menu\" tabIndex={-1}>\n        {items.map((item, index) => (\n          <button\n            className=\"chayns-popup-list__item\"\n            key={`${item.text}-${index}`}\n            onClick={item.onClick}\n            ref={(element) => {\n              itemRefs.current[index] = element;\n            }}\n            role=\"menuitem\"\n            type=\"button\"\n          >\n            <ButtonIcon icon={item.icon} />\n            <span>{item.text}</span>\n          </button>\n        ))}\n      </div>\n    </Popup>\n  );\n};\n\nexport default PopupList;\n"],"mappings":";;;;;AAMA,IAAM,aAAa,EAAE,WAAW,OAAO,cAA8B;CACnE,MAAM,WAAW,OAAqC,CAAC,CAAC;CAExD,MAAM,iBAAiB,UAAyC;EAC9D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,SAAS,aAAkC;EAClF,IAAI,QAAQ,KAAK,MAAM,WAAW,GAAG;EAErC,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GACxD,MAAM,eAAe;GAErB,MAAM,aAAa,SADD,MAAM,QAAQ,cAAc,IAAI,MACX,MAAM,UAAU,MAAM;GAC7D,SAAS,QAAQ,UAAU,EAAE,MAAM;EACrC;EACA,IAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAC/C,MAAM,eAAe;GACrB,SAAS,QAAQ,MAAM,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE,EAAE,MAAM;EACvE;CACF;CAEA,OACE,oBAAC,OAAD;EAAO,GAAK,YAAY,EAAE,UAAU,IAAI,CAAC;EAAa;EACpD,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAO,UAAU;GAClD,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,UAAD;IACE,WAAU;IAEV,SAAS,KAAK;IACd,MAAM,YAAY;KAChB,SAAS,QAAQ,SAAS;IAC5B;IACA,MAAK;IACL,MAAK;IARP,UAAA,CAUE,oBAAC,YAAD,EAAY,MAAM,KAAK,KAAO,CAAA,GAC9B,oBAAC,QAAD,EAAA,UAAO,KAAK,KAAW,CAAA,CACjB;GAVD,GAAA,GAAG,KAAK,KAAK,GAAG,OAUf,CACT;EACE,CAAA;CACA,CAAA;AAEX"}

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

@@ -0,0 +1,4 @@
+import type { SplitButtonProps } from './SplitButton.types.js';
+declare const SplitButton: ({ children, className, disabled, icon, items, onClick, variant, ...containerProps }: SplitButtonProps) => import("react").JSX.Element;
+export default SplitButton;
+//# sourceMappingURL=SplitButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/SplitButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,QAAA,MAAM,WAAW,GAAI,qFASlB,gBAAgB,gCA+ClB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/split-button/SplitButton.js

@@ -0,0 +1,52 @@
+import ButtonIcon from "../button/button-icon/ButtonIcon.js";
+import Button from "../button/Button.js";
+import PopupList from "../popup/PopupList.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/components/split-button/SplitButton.tsx
+var SplitButton = ({ children, className, disabled, icon, items, onClick, variant, ...containerProps }) => {
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		...containerProps,
+		className: ["chayns-split-button", className].filter(Boolean).join(" "),
+		children: [icon ? /* @__PURE__ */ jsx(Button, {
+			"aria-labelledby": labelId,
+			className: "chayns-split-button__primary",
+			...disabled ? { disabled: true } : {},
+			icon,
+			...onClick ? { onClick } : {},
+			variant,
+			children: /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				children
+			})
+		}) : /* @__PURE__ */ jsx(Button, {
+			"aria-labelledby": labelId,
+			className: "chayns-split-button__primary",
+			...disabled ? { disabled: true } : {},
+			...onClick ? { onClick } : {},
+			variant,
+			children: /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				children
+			})
+		}), /* @__PURE__ */ jsx(PopupList, {
+			items,
+			trigger: /* @__PURE__ */ jsx("button", {
+				"aria-labelledby": labelId,
+				className: `chayns-split-button__trigger chayns-button--${variant}`,
+				...disabled ? { disabled: true } : {},
+				type: "button",
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "chayns-split-button__chevron",
+					children: /* @__PURE__ */ jsx(ButtonIcon, { icon: "fa-chevron-down" })
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { SplitButton as default };
+
+//# sourceMappingURL=SplitButton.js.map

package/dist/components/split-button/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","names":[],"sources":["../../../src/components/split-button/SplitButton.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport Button from '../button/Button.js';\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport PopupList from '../popup/PopupList.js';\nimport type { SplitButtonProps } from './SplitButton.types.js';\n\nconst SplitButton = ({\n  children,\n  className,\n  disabled,\n  icon,\n  items,\n  onClick,\n  variant,\n  ...containerProps\n}: SplitButtonProps) => {\n  const labelId = useId();\n\n  return (\n    <div\n      {...containerProps}\n      className={['chayns-split-button', className].filter(Boolean).join(' ')}\n    >\n      {icon ? (\n        <Button\n          aria-labelledby={labelId}\n          className=\"chayns-split-button__primary\"\n          {...(disabled ? { disabled: true } : {})}\n          icon={icon}\n          {...(onClick ? { onClick } : {})}\n          variant={variant}\n        >\n          <span id={labelId}>{children}</span>\n        </Button>\n      ) : (\n        <Button\n          aria-labelledby={labelId}\n          className=\"chayns-split-button__primary\"\n          {...(disabled ? { disabled: true } : {})}\n          {...(onClick ? { onClick } : {})}\n          variant={variant}\n        >\n          <span id={labelId}>{children}</span>\n        </Button>\n      )}\n      <PopupList\n        items={items}\n        trigger={\n          <button\n            aria-labelledby={labelId}\n            className={`chayns-split-button__trigger chayns-button--${variant}`}\n            {...(disabled ? { disabled: true } : {})}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"chayns-split-button__chevron\">\n              <ButtonIcon icon=\"fa-chevron-down\" />\n            </span>\n          </button>\n        }\n      />\n    </div>\n  );\n};\n\nexport default SplitButton;\n"],"mappings":";;;;;;AAOA,IAAM,eAAe,EACnB,UACA,WACA,UACA,MACA,OACA,SACA,SACA,GAAG,qBACmB;CACtB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAFxE,UAAA,CAIG,OACC,oBAAC,QAAD;GACE,mBAAiB;GACjB,WAAU;GACV,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;GAChC;GACN,GAAK,UAAU,EAAE,QAAQ,IAAI,CAAC;GACrB;GAET,UAAA,oBAAC,QAAD;IAAM,IAAI;IAAU;GAAe,CAAA;EAC7B,CAAA,IAER,oBAAC,QAAD;GACE,mBAAiB;GACjB,WAAU;GACV,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;GACtC,GAAK,UAAU,EAAE,QAAQ,IAAI,CAAC;GACrB;GAET,UAAA,oBAAC,QAAD;IAAM,IAAI;IAAU;GAAe,CAAA;EAC7B,CAAA,GAEV,oBAAC,WAAD;GACS;GACP,SACE,oBAAC,UAAD;IACE,mBAAiB;IACjB,WAAW,+CAA+C;IAC1D,GAAK,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAK;IAEL,UAAA,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KACjC,UAAA,oBAAC,YAAD,EAAY,MAAK,kBAAmB,CAAA;IAChC,CAAA;GACA,CAAA;EAEX,CAAA,CACE;;AAET"}

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

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { ButtonContent, ButtonIcon, ButtonVariant } from '../button/Button.types.js';
+import type { PopupListItem } from '../popup/Popup.types.js';
+export interface SplitButtonProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onClick'> {
+    variant: ButtonVariant;
+    children: ButtonContent;
+    items: PopupListItem[];
+    icon?: ButtonIcon;
+    onClick?: ComponentPropsWithRef<'button'>['onClick'];
+    disabled?: boolean;
+}
+//# sourceMappingURL=SplitButton.types.d.ts.map

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

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -1,9 +1,22 @@
-export { Button, IconButton } from './components/button/index.js';
-export type { ButtonContent, ButtonIcon, ButtonProps, ButtonVariant, IconButtonProps, } from './components/button/index.js';
-export { Card } from './components/card/index.js';
-export type { CardProps } from './components/card/index.js';
-export { List, ListItem } from './components/list/index.js';
-export type { ListItemProps, ListProps } from './components/list/index.js';
-export { Accordion, AccordionGroup } from './components/accordion/index.js';
-export type { AccordionGroupProps, AccordionProps } from './components/accordion/index.js';
+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 type { IconButtonProps } from './components/icon-button/IconButton.types.js';
+export { default as Popup } from './components/popup/Popup.js';
+export { default as PopupList } from './components/popup/PopupList.js';
+export type { PopupListItem, PopupListProps, PopupProps } from './components/popup/Popup.types.js';
+export { default as SplitButton } from './components/split-button/SplitButton.js';
+export type { SplitButtonProps } from './components/split-button/SplitButton.types.js';
+export { default as Card } from './components/card/Card.js';
+export type { CardProps } from './components/card/Card.types.js';
+export { default as Avatar } from './components/avatar/Avatar.js';
+export { default as AvatarGroup } from './components/avatar-group/AvatarGroup.js';
+export type { AvatarProps } from './components/avatar/Avatar.types.js';
+export type { AvatarGroupProps } from './components/avatar-group/AvatarGroup.types.js';
+export { default as List } from './components/list/List.js';
+export { default as ListItem } from './components/list-item/ListItem.js';
+export type { ListProps, ListItemProps } from './components/list/List.types.js';
+export { default as Accordion } from './components/accordion/Accordion.js';
+export { default as AccordionGroup } from './components/accordion-group/AccordionGroup.js';
+export type { AccordionProps, AccordionGroupProps, } from './components/accordion/Accordion.types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAClE,YAAY,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC"}
+{"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,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,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhF,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"}

package/dist/index.js

@@ -1,8 +1,13 @@
 import Button from "./components/button/Button.js";
-import IconButton from "./components/button/IconButton.js";
+import IconButton from "./components/icon-button/IconButton.js";
+import Popup from "./components/popup/Popup.js";
+import PopupList from "./components/popup/PopupList.js";
+import SplitButton from "./components/split-button/SplitButton.js";
 import Card from "./components/card/Card.js";
+import Avatar from "./components/avatar/Avatar.js";
+import AvatarGroup from "./components/avatar-group/AvatarGroup.js";
 import List from "./components/list/List.js";
-import ListItem from "./components/list/ListItem.js";
+import ListItem from "./components/list-item/ListItem.js";
 import Accordion from "./components/accordion/Accordion.js";
-import AccordionGroup from "./components/accordion/AccordionGroup.js";
-export { Accordion, AccordionGroup, Button, Card, IconButton, List, ListItem };
+import AccordionGroup from "./components/accordion-group/AccordionGroup.js";
+export { Accordion, AccordionGroup, Avatar, AvatarGroup, Button, Card, IconButton, List, ListItem, Popup, PopupList, SplitButton };

package/dist/list.css

@@ -89,10 +89,17 @@
 
   .chayns-list-item__trailing {
     flex: none;
+    align-self: flex-start;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    justify-content: flex-end;
     gap: var(--k8);
+    padding-block-start: var(--k10);
     padding-inline-end: var(--k16);
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    text-align: end;
+    white-space: nowrap;
   }
 
   .chayns-visually-hidden {

package/dist/popup.css

@@ -0,0 +1,34 @@
+@layer chayns.components {
+  .chayns-popup {
+    position: fixed;
+    z-index: var(--z-popover);
+    min-inline-size: 14rem;
+    padding: var(--sp-2);
+    border: 1px solid var(--disabled-border);
+    border-radius: 12px;
+    background: var(--surface);
+    box-shadow: var(--shadow-pop);
+  }
+
+  .chayns-popup-list__item {
+    display: flex;
+    inline-size: 100%;
+    align-items: center;
+    gap: var(--sp-2);
+    min-block-size: var(--ctrl-h);
+    padding: var(--sp-2) var(--sp-4);
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .chayns-popup-list__item:hover,
+  .chayns-popup-list__item:focus-visible {
+    background: var(--surface-alt);
+    outline: none;
+  }
+}

package/dist/split-button.css

@@ -0,0 +1,128 @@
+@layer chayns.components {
+  .chayns-split-button {
+    display: inline-flex;
+    align-items: stretch;
+    max-inline-size: 100%;
+  }
+
+  .chayns-split-button__primary {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .chayns-split-button__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ctrl-h);
+    padding: 0 var(--sp-2);
+    border: 0;
+    border-inline-start: 1px solid color-mix(in srgb, currentcolor 30%, transparent);
+    border-start-end-radius: 999px;
+    border-end-end-radius: 999px;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .chayns-split-button__trigger.chayns-button--primary {
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  .chayns-split-button__trigger.chayns-button--outline {
+    border-block: 1.5px solid var(--accent);
+    border-inline-end: 1.5px solid var(--accent);
+    background: var(--surface);
+    color: var(--accent);
+  }
+
+  .chayns-split-button__trigger.chayns-button--ghost {
+    background: transparent;
+    color: var(--text-2);
+  }
+
+  .chayns-split-button__trigger.chayns-button--danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  .chayns-split-button__trigger:disabled {
+    background: var(--disabled-bg);
+    border-inline-start-color: var(--disabled-border);
+    border-inline-end-color: var(--disabled-border);
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+  }
+
+  .chayns-split-button__trigger.chayns-button--outline:disabled {
+    border-block-color: var(--disabled-border);
+    background: var(--surface);
+  }
+
+  .chayns-split-button__trigger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+
+  .chayns-split-button__trigger:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+
+  .chayns-split-button__trigger.chayns-button--primary:active:not(:disabled) {
+    background: var(--accent-active);
+  }
+
+  .chayns-split-button__trigger.chayns-button--outline:active:not(:disabled) {
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  .chayns-split-button__trigger.chayns-button--ghost:active:not(:disabled) {
+    background: var(--surface-alt);
+    color: var(--accent);
+  }
+
+  .chayns-split-button__trigger.chayns-button--danger:active:not(:disabled) {
+    background: var(--danger-bg-hover);
+  }
+
+  .chayns-split-button__trigger:active:not(:disabled)
+    .chayns-button-icon__weight:not(.chayns-button-icon__weight--active),
+  .chayns-split-button__trigger:hover:not(:disabled)
+    .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
+    display: none;
+  }
+
+  .chayns-split-button__trigger:active:not(:disabled) .chayns-button-icon__weight--active,
+  .chayns-split-button__trigger:hover:not(:disabled) .chayns-button-icon__weight--active {
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .chayns-split-button__trigger.chayns-button--primary:hover:not(:disabled) {
+      background: var(--accent-hover);
+      box-shadow: var(--shadow-btn-hover);
+    }
+
+    .chayns-split-button__trigger.chayns-button--outline:hover:not(:disabled) {
+      background: var(--accent);
+      color: var(--on-accent);
+      box-shadow: var(--shadow-btn-hover);
+    }
+
+    .chayns-split-button__trigger.chayns-button--ghost:hover:not(:disabled) {
+      background: var(--surface-alt);
+      color: var(--accent);
+    }
+
+    .chayns-split-button__trigger.chayns-button--danger:hover:not(:disabled) {
+      background: var(--danger-bg-hover);
+    }
+  }
+
+  .chayns-split-button__chevron .chayns-button-icon {
+    inline-size: 1em;
+    block-size: 1em;
+  }
+}

package/dist/styles.css

@@ -1,4 +1,7 @@
 @import url('./button.css');
 @import url('./card.css');
+@import url('./avatar.css');
 @import url('./list.css');
 @import url('./accordion.css');
+@import url('./popup.css');
+@import url('./split-button.css');

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TobitSoftware/chayns-ui.git",
+    "directory": "packages/core"
+  },
   "sideEffects": [
     "**/*.css"
   ],
@@ -17,34 +22,21 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./button": {
-      "types": "./dist/components/button/index.d.ts",
-      "import": "./dist/components/button/index.js"
-    },
     "./button.css": "./dist/button.css",
-    "./card": {
-      "types": "./dist/components/card/index.d.ts",
-      "import": "./dist/components/card/index.js"
-    },
     "./card.css": "./dist/card.css",
-    "./list": {
-      "types": "./dist/components/list/index.d.ts",
-      "import": "./dist/components/list/index.js"
-    },
+    "./avatar.css": "./dist/avatar.css",
     "./list.css": "./dist/list.css",
-    "./accordion": {
-      "types": "./dist/components/accordion/index.d.ts",
-      "import": "./dist/components/accordion/index.js"
-    },
     "./accordion.css": "./dist/accordion.css",
+    "./popup.css": "./dist/popup.css",
+    "./split-button.css": "./dist/split-button.css",
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "react": ">=19.2 <20"
+    "react": ">=18 <20"
   },
   "engines": {
-    "node": ">=24"
+    "node": ">=18"
   },
   "publishConfig": {
     "access": "public"

package/dist/components/accordion/AccordionGroup.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionGroupProps } from './Accordion.types.js';
-declare function AccordionGroup({ children, className, defaultOpenId, onOpenChange, openId, }: AccordionGroupProps): import("react").JSX.Element;
-export default AccordionGroup;
-//# sourceMappingURL=AccordionGroup.d.ts.map

package/dist/components/accordion/AccordionGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/AccordionGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,aAAoB,EACpB,YAAY,EACZ,MAAM,GACP,EAAE,mBAAmB,+BA6BrB;AAED,eAAe,cAAc,CAAC"}

package/dist/components/accordion/AccordionGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionGroup.js","names":[],"sources":["../../../src/components/accordion/AccordionGroup.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { AccordionGroupContext } from './AccordionContext.js';\nimport type { AccordionGroupContextValue } from './AccordionContext.js';\nimport type { AccordionGroupProps } from './Accordion.types.js';\n\nfunction AccordionGroup({\n  children,\n  className,\n  defaultOpenId = null,\n  onOpenChange,\n  openId,\n}: AccordionGroupProps) {\n  const [uncontrolledOpenId, setUncontrolledOpenId] = useState<string | null>(defaultOpenId);\n\n  const isControlled = openId !== undefined;\n  const currentOpenId = isControlled ? openId : uncontrolledOpenId;\n\n  const isOpen = useCallback((id: string) => currentOpenId === id, [currentOpenId]);\n\n  const toggle = useCallback(\n    (id: string) => {\n      const nextOpenId = currentOpenId === id ? null : id;\n      if (!isControlled) setUncontrolledOpenId(nextOpenId);\n      onOpenChange?.(nextOpenId);\n    },\n    [currentOpenId, isControlled, onOpenChange],\n  );\n\n  const contextValue = useMemo<AccordionGroupContextValue>(\n    () => ({ isOpen, toggle }),\n    [isOpen, toggle],\n  );\n\n  const rootClassName = ['chayns-accordion-group', className].filter(Boolean).join(' ');\n\n  return (\n    <AccordionGroupContext.Provider value={contextValue}>\n      <div className={rootClassName}>{children}</div>\n    </AccordionGroupContext.Provider>\n  );\n}\n\nexport default AccordionGroup;\n"],"mappings":";;;;AAMA,SAAS,eAAe,EACtB,UACA,WACA,gBAAgB,MAChB,cACA,UACsB;CACtB,MAAM,CAAC,oBAAoB,yBAAyB,SAAwB,aAAa;CAEzF,MAAM,eAAe,WAAW,KAAA;CAChC,MAAM,gBAAgB,eAAe,SAAS;CAE9C,MAAM,SAAS,aAAa,OAAe,kBAAkB,IAAI,CAAC,aAAa,CAAC;CAEhF,MAAM,SAAS,aACZ,OAAe;EACd,MAAM,aAAa,kBAAkB,KAAK,OAAO;EACjD,IAAI,CAAC,cAAc,sBAAsB,UAAU;EACnD,eAAe,UAAU;CAC3B,GACA;EAAC;EAAe;EAAc;CAAY,CAC5C;CAEA,MAAM,eAAe,eACZ;EAAE;EAAQ;CAAO,IACxB,CAAC,QAAQ,MAAM,CACjB;CAEA,MAAM,gBAAgB,CAAC,0BAA0B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpF,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAChB,CAAA;AAEpC"}

package/dist/components/accordion/index.d.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion.js';
-export { default as AccordionGroup } from './AccordionGroup.js';
-export type { AccordionGroupProps, AccordionProps } from './Accordion.types.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/accordion/index.js

@@ -1,3 +0,0 @@
-import Accordion from "./Accordion.js";
-import AccordionGroup from "./AccordionGroup.js";
-export { Accordion, AccordionGroup };