@chayns-ui/core 0.2.1 → 0.3.0

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,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -22,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 };

package/dist/components/button/ButtonIcon.d.ts

@@ -1,7 +0,0 @@
-import type { ButtonIcon as ButtonIconName } from './Button.types.js';
-interface ButtonIconProps {
-    icon: ButtonIconName;
-}
-declare function ButtonIcon({ icon }: ButtonIconProps): import("react").JSX.Element;
-export default ButtonIcon;
-//# sourceMappingURL=ButtonIcon.d.ts.map

package/dist/components/button/ButtonIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE,UAAU,eAAe;IACvB,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,+BAW5C;AAED,eAAe,UAAU,CAAC"}

package/dist/components/button/ButtonIcon.js

@@ -1,19 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/button/ButtonIcon.tsx
-function ButtonIcon({ icon }) {
-	return /* @__PURE__ */ jsxs("span", {
-		"aria-hidden": "true",
-		className: "chayns-button-icon",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "chayns-button-icon__weight",
-			children: /* @__PURE__ */ jsx("i", { className: `far ${icon}` })
-		}), /* @__PURE__ */ jsx("span", {
-			className: "chayns-button-icon__weight chayns-button-icon__weight--active",
-			children: /* @__PURE__ */ jsx("i", { className: `fas ${icon}` })
-		})]
-	});
-}
-//#endregion
-export { ButtonIcon as default };
-
-//# sourceMappingURL=ButtonIcon.js.map

package/dist/components/button/ButtonIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonIcon.js","names":[],"sources":["../../../src/components/button/ButtonIcon.tsx"],"sourcesContent":["import type { ButtonIcon as ButtonIconName } from './Button.types.js';\n\ninterface ButtonIconProps {\n  icon: ButtonIconName;\n}\n\nfunction ButtonIcon({ icon }: ButtonIconProps) {\n  return (\n    <span aria-hidden=\"true\" className=\"chayns-button-icon\">\n      <span className=\"chayns-button-icon__weight\">\n        <i className={`far ${icon}`} />\n      </span>\n      <span className=\"chayns-button-icon__weight chayns-button-icon__weight--active\">\n        <i className={`fas ${icon}`} />\n      </span>\n    </span>\n  );\n}\n\nexport default ButtonIcon;\n"],"mappings":";;AAMA,SAAS,WAAW,EAAE,QAAyB;CAC7C,OACE,qBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAnC,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;EAC1B,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;EAC1B,CAAA,CACF;;AAEV"}

package/dist/components/button/IconButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,IAAI,EACJ,IAAe,EACf,OAAO,EACP,GAAG,WAAW,EACf,EAAE,eAAe,+BAQjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/button/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import type { IconButtonProps } from './Button.types.js';\nimport ButtonIcon from './ButtonIcon.js';\nimport { getButtonClassName } from './buttonClassName.js';\n\nfunction IconButton({\n  className,\n  icon,\n  type = 'button',\n  variant,\n  ...buttonProps\n}: IconButtonProps) {\n  const resolvedClassName = getButtonClassName('chayns-icon-button', variant, className);\n\n  return (\n    <button {...buttonProps} className={resolvedClassName} type={type}>\n      <ButtonIcon icon={icon} />\n    </button>\n  );\n}\n\nexport default IconButton;\n"],"mappings":";;;;AAIA,SAAS,WAAW,EAClB,WACA,MACA,OAAO,UACP,SACA,GAAG,eACe;CAClB,MAAM,oBAAoB,mBAAmB,sBAAsB,SAAS,SAAS;CAErF,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAa,WAAW;EAAyB;EAC3D,UAAA,oBAAC,YAAD,EAAkB,KAAO,CAAA;CACnB,CAAA;AAEZ"}

package/dist/components/button/buttonClassName.d.ts

@@ -1,3 +0,0 @@
-import type { ButtonVariant } from './Button.types.js';
-export declare function getButtonClassName(componentClassName: 'chayns-button' | 'chayns-icon-button', variant: ButtonVariant, className?: string): string;
-//# sourceMappingURL=buttonClassName.d.ts.map

package/dist/components/button/buttonClassName.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonClassName.d.ts","sourceRoot":"","sources":["../../../src/components/button/buttonClassName.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,wBAAgB,kBAAkB,CAChC,kBAAkB,EAAE,eAAe,GAAG,oBAAoB,EAC1D,OAAO,EAAE,aAAa,EACtB,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAMR"}

package/dist/components/button/buttonClassName.js

@@ -1,9 +0,0 @@
-//#region src/components/button/buttonClassName.ts
-function getButtonClassName(componentClassName, variant, className) {
-	const variantClassName = `${componentClassName}--${variant}`;
-	return className ? `${componentClassName} ${variantClassName} ${className}` : `${componentClassName} ${variantClassName}`;
-}
-//#endregion
-export { getButtonClassName };
-
-//# sourceMappingURL=buttonClassName.js.map

package/dist/components/button/buttonClassName.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonClassName.js","names":[],"sources":["../../../src/components/button/buttonClassName.ts"],"sourcesContent":["import type { ButtonVariant } from './Button.types.js';\n\nexport function getButtonClassName(\n  componentClassName: 'chayns-button' | 'chayns-icon-button',\n  variant: ButtonVariant,\n  className?: string,\n): string {\n  const variantClassName = `${componentClassName}--${variant}`;\n\n  return className\n    ? `${componentClassName} ${variantClassName} ${className}`\n    : `${componentClassName} ${variantClassName}`;\n}\n"],"mappings":";AAEA,SAAgB,mBACd,oBACA,SACA,WACQ;CACR,MAAM,mBAAmB,GAAG,mBAAmB,IAAI;CAEnD,OAAO,YACH,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,cAC7C,GAAG,mBAAmB,GAAG;AAC/B"}

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

@@ -1,4 +0,0 @@
-export { default as Button } from './Button.js';
-export { default as IconButton } from './IconButton.js';
-export type { ButtonContent, ButtonIcon, ButtonProps, ButtonVariant, IconButtonProps, } from './Button.types.js';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,mBAAmB,CAAC"}

package/dist/components/button/index.js

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

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

@@ -1,3 +0,0 @@
-export { default as Card } from './Card.js';
-export type { CardProps } from './Card.types.js';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/card/index.js

@@ -1,2 +0,0 @@
-import Card from "./Card.js";
-export { Card };

package/dist/components/list/ListItem.d.ts

@@ -1,4 +0,0 @@
-import type { ListItemProps } from './List.types.js';
-declare function ListItem({ className, disabled, href, id, leading, onClick, subtitle, title, trailing, unread, unreadLabel, }: ListItemProps): import("react").JSX.Element;
-export default ListItem;
-//# sourceMappingURL=ListItem.d.ts.map

package/dist/components/list/ListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/list/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA+BrD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAc,EACd,WAAW,GACZ,EAAE,aAAa,+BA0Cf;AAED,eAAe,QAAQ,CAAC"}