@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/README.md

@@ -88,21 +88,58 @@ const nextConfig = {
 
 ## 🤯 Usage
 
-> \[!NOTE]\
-> The LobeUI components are developed based on [Antd](https://ant.design/components/overview/), fully compatible with Antd components,
-> and it is recommended to use [antd-style](https://ant-design.github.io/antd-style/) as the default css-in-js styling solution.
+Import the theme stylesheet once, then wrap the app in `ConfigProvider`:
 
 ```tsx
-import { ThemeProvider, Button } from '@lobehub/ui';
-import { Button } from 'antd';
+import '@lobehub/ui/theme.css';
+import '@lobehub/ui/style.css';
+// optional document resets (body font, background, scrollbars)
+import '@lobehub/ui/global.css';
+
+import { Button, ConfigProvider } from '@lobehub/ui';
+import { motion } from 'motion/react';
 
 export default () => (
-  <ThemeProvider>
+  <ConfigProvider motion={motion}>
     <Button>Hello AIGC</Button>
-  </ThemeProvider>
+  </ConfigProvider>
 );
 ```
 
+Lobe UI CSS is emitted inside the `lobe-base`, `lobe-popup` and `lobe-ui` cascade layers, so unlayered CSS always wins over it. Put global resets (`button { font: inherit }`, normalize.css, ...) in a layer declared before them:
+
+```css
+@layer reset, lobe-base, lobe-popup, lobe-ui;
+
+@layer reset {
+  button {
+    font: inherit;
+  }
+}
+```
+
+This `@layer` statement must be the first CSS your app loads, before `theme.css` and `style.css`: the first declaration of a layer fixes its order and later order statements are ignored.
+
+With Tailwind v4, use one merged statement as the very first CSS, before `@import 'tailwindcss'`, `theme.css` and `style.css`:
+
+```css
+@layer theme, base, lobe-base, lobe-popup, lobe-ui, components, utilities;
+```
+
+The lobe layers sit after Tailwind's `base` (preflight), so preflight loses to Lobe UI, and before `components` / `utilities`, so Tailwind utilities still beat Lobe UI. These layering guarantees cover components already migrated to StyleX; the remaining components still inject runtime styles until the migration completes.
+
+### Theming
+
+Appearance and colors are plain attributes, read by `theme.css`:
+
+```html
+<html data-theme="dark" data-primary-color="blue" data-neutral-color="slate"></html>
+```
+
+- `setLobeTheme({ appearance, primaryColor, neutralColor })` updates them at runtime; `<LobeThemeScript appearance="system" />` sets them before first paint. With `next-themes`, use `attribute="data-theme"`.
+- `<ThemeScope appearance="dark">` themes a subtree (e.g. a dark island in a light page).
+- Style with `createStaticStyles` / `cssVar` / `cx` from `@lobehub/ui`; `useTheme()` / `useThemeMode()` return the current tokens when JS needs concrete values.
+
 ### I18n
 
 Use the i18n provider with resource bundles. Component `texts` props always take priority.
@@ -119,17 +156,15 @@ import hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey';
 
 ### ConfigProvider (Motion)
 
-You must pass a motion component via `ConfigProvider`, and `ConfigProvider` must wrap `ThemeProvider` — never the other way round. `ThemeProvider` renders the antd `App` that hosts the static `notification` / `modal` holders and reads the CDN config for its webfonts, so both need the contexts from `ConfigProvider` above them.
+You must pass a motion component via `ConfigProvider`. It also loads the web fonts (`enableCustomFonts`, `customFonts`), sets `direction`, and hosts the portal container for popups.
 
 ```tsx
-import { ConfigProvider, ThemeProvider } from '@lobehub/ui';
+import { ConfigProvider } from '@lobehub/ui';
 import { motion } from 'motion/react';
 
 export default () => (
   <ConfigProvider motion={motion}>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
+    <App />
   </ConfigProvider>
 );
 ```
@@ -137,16 +172,14 @@ export default () => (
 If your app uses `LazyMotion`, pass `m`:
 
 ```tsx
-import { ConfigProvider, ThemeProvider } from '@lobehub/ui';
+import { ConfigProvider } from '@lobehub/ui';
 import { LazyMotion, domAnimation } from 'motion/react';
 import * as m from 'motion/react-m';
 
 export default () => (
   <LazyMotion features={domAnimation}>
     <ConfigProvider motion={m}>
-      <ThemeProvider>
-        <App />
-      </ThemeProvider>
+      <App />
     </ConfigProvider>
   </LazyMotion>
 );

package/es/Accordion/Accordion.d.mts

@@ -1,6 +1,7 @@
 import { AccordionProps } from "./type.mjs";
+import { FC } from "react";
 //#region src/Accordion/Accordion.d.ts
-declare const Accordion: import("react").NamedExoticComponent<AccordionProps>;
+declare const Accordion: FC<AccordionProps>;
 //#endregion
 export { Accordion as default };
 //# sourceMappingURL=Accordion.d.mts.map

package/es/Accordion/Accordion.mjs

@@ -1,88 +1,57 @@
 "use client";
-import Divider from "../base-ui/Divider/Divider.mjs";
-import { AccordionConfigContext, AccordionItemStateProvider } from "./context.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
-import { Children, Fragment, isValidElement, memo, useCallback, useMemo, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import { LayoutGroup } from "motion/react";
-import useMergeState from "use-merge-value";
+import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger } from "./atoms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 //#region src/Accordion/Accordion.tsx
-const Accordion = memo(({ children, className: userClassName, style: userStyle, accordion = false, defaultExpandedKeys, expandedKeys: expandedKeysProp, onExpandedChange, variant = "borderless", gap, showDivider = false, disableAnimation = false, hideIndicator = false, indicatorPlacement = "start", keepContentMounted = true, classNames, styles: customStyles, motionProps, ref, ...rest }) => {
-	const validChildren = Children.toArray(children).filter(isValidElement);
-	const allItemKeys = validChildren.map((child, index) => child.props.itemKey || index);
-	const [expandedKeys, setExpandedKeys] = useMergeState(defaultExpandedKeys ?? allItemKeys, {
-		onChange: onExpandedChange,
-		value: expandedKeysProp
-	});
-	const expandedKeysRef = useRef(expandedKeys);
-	expandedKeysRef.current = expandedKeys;
-	const setExpandedKeysRef = useRef(setExpandedKeys);
-	setExpandedKeysRef.current = setExpandedKeys;
-	const isOpenKey = useCallback((key) => expandedKeysRef.current.includes(key), []);
-	const toggleExpand = useCallback((key) => {
-		const prev = expandedKeysRef.current;
-		let newKeys;
-		if (accordion) newKeys = prev.includes(key) ? [] : [key];
-		else newKeys = prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key];
-		setExpandedKeysRef.current(newKeys);
-	}, [accordion]);
-	const toggleExpandKeys = useCallback((keys, preferredKey) => {
-		const prev = expandedKeysRef.current;
-		const isOpen = keys.some((key) => prev.includes(key));
-		let newKeys;
-		if (accordion) newKeys = isOpen ? [] : [preferredKey];
-		else newKeys = isOpen ? prev.filter((key) => !keys.includes(key)) : [...prev, preferredKey];
-		setExpandedKeysRef.current(newKeys);
-	}, [accordion]);
-	const configValue = useMemo(() => ({
-		disableAnimation,
-		hideIndicator,
-		indicatorPlacement,
-		keepContentMounted,
-		motionProps,
-		showDivider,
-		variant
-	}), [
-		disableAnimation,
+const Accordion = ({ className, classNames, defaultValue, gap, hideIndicator, indicatorPlacement = "start", items, keepMounted, multiple = true, onValueChange, ref, style, styles: customStyles, value, variant = "borderless" }) => {
+	return /* @__PURE__ */ jsx(AccordionRoot, {
+		className: clsx(classNames?.root, className),
+		defaultValue,
 		hideIndicator,
 		indicatorPlacement,
-		keepContentMounted,
-		motionProps,
-		showDivider,
-		variant
-	]);
-	const hasExplicitExpandedKeys = expandedKeysProp !== void 0 || defaultExpandedKeys !== void 0;
-	const content = /* @__PURE__ */ jsx(Fragment$1, { children: validChildren.map((child, index) => {
-		const hasChildItemKey = child.props.itemKey !== void 0;
-		const childKey = hasChildItemKey ? child.props.itemKey : index;
-		const itemIsOpen = expandedKeys.includes(childKey);
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccordionItemStateProvider, {
-			expandedKeys: hasChildItemKey ? void 0 : expandedKeys,
-			isOpen: itemIsOpen,
-			isOpenKey,
-			itemKey: childKey,
-			preferProviderKeyForNestedItems: !hasExplicitExpandedKeys,
-			onToggleKey: toggleExpand,
-			onToggleKeys: toggleExpandKeys,
-			children: child
-		}), showDivider && index < validChildren.length - 1 && /* @__PURE__ */ jsx(Divider, { className: styles.divider })] }, childKey);
-	}) });
-	return /* @__PURE__ */ jsx(AccordionConfigContext, {
-		value: configValue,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cx(styles.base, classNames?.base, userClassName),
-			ref,
-			style: {
-				gap,
-				...customStyles?.base,
-				...userStyle
-			},
-			...rest,
-			children: disableAnimation ? content : /* @__PURE__ */ jsx(LayoutGroup, { children: content })
-		})
+		multiple,
+		ref,
+		style: {
+			gap,
+			...style,
+			...customStyles?.root
+		},
+		value,
+		variant,
+		onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+		children: items?.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
+			className: classNames?.item,
+			disabled: item.disabled,
+			style: customStyles?.item,
+			value: item.key,
+			children: [/* @__PURE__ */ jsxs(AccordionHeader, {
+				className: classNames?.header,
+				style: customStyles?.header,
+				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+					className: classNames?.trigger,
+					style: customStyles?.trigger,
+					children: item.title
+				}), item.action && /* @__PURE__ */ jsx("div", {
+					...styleProps([
+						styles.action,
+						variant === "borderless" ? styles.actionBorderless : styles.actionOutlined,
+						item.alwaysShowAction && styles.actionAlwaysVisible
+					], clsx("accordion-action", classNames?.action), customStyles?.action),
+					children: item.action
+				})]
+			}), /* @__PURE__ */ jsx(AccordionPanel, {
+				className: classNames?.panel,
+				contentClassName: classNames?.content,
+				contentStyle: customStyles?.content,
+				keepMounted,
+				style: customStyles?.panel,
+				children: item.children
+			})]
+		}, item.key))
 	});
-});
+};
 Accordion.displayName = "Accordion";
 //#endregion
 export { Accordion as default };

package/es/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback, useMemo, useRef } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Divider from '@/base-ui/Divider';\n\nimport { AccordionConfigContext, AccordionItemStateProvider } from './context';\nimport { styles } from './style';\nimport { type AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n  ({\n    children,\n    className: userClassName,\n    style: userStyle,\n    accordion = false,\n    defaultExpandedKeys,\n    expandedKeys: expandedKeysProp,\n    onExpandedChange,\n    variant = 'borderless',\n    gap,\n    showDivider = false,\n    disableAnimation = false,\n    hideIndicator = false,\n    indicatorPlacement = 'start',\n    keepContentMounted = true,\n    classNames,\n    styles: customStyles,\n    motionProps,\n    ref,\n    ...rest\n  }) => {\n    // Convert children to array and filter valid elements\n    const validChildren = Children.toArray(children).filter(isValidElement);\n\n    // Collect all item keys\n    const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n    // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n    const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n    const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n      onChange: onExpandedChange,\n      value: expandedKeysProp,\n    });\n\n    // Hold expandedKeys and setExpandedKeys via refs so toggleExpand can stay\n    // reference-stable. use-merge-value's setter is recreated on every render,\n    // so depending on it would force AccordionItemStateProvider's memoized\n    // value to change identity each render — even when nothing toggled —\n    // re-rendering every nested AccordionItem via \"context changed\".\n    const expandedKeysRef = useRef(expandedKeys);\n    expandedKeysRef.current = expandedKeys;\n    const setExpandedKeysRef = useRef(setExpandedKeys);\n    setExpandedKeysRef.current = setExpandedKeys;\n\n    const isOpenKey = useCallback((key: Key) => expandedKeysRef.current.includes(key), []);\n\n    const toggleExpand = useCallback(\n      (key: Key) => {\n        const prev = expandedKeysRef.current;\n        let newKeys: Key[];\n\n        if (accordion) {\n          newKeys = prev.includes(key) ? [] : [key];\n        } else {\n          newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n        }\n\n        setExpandedKeysRef.current(newKeys);\n      },\n      [accordion],\n    );\n\n    const toggleExpandKeys = useCallback(\n      (keys: Key[], preferredKey: Key) => {\n        const prev = expandedKeysRef.current;\n        const isOpen = keys.some((key) => prev.includes(key));\n        let newKeys: Key[];\n\n        if (accordion) {\n          newKeys = isOpen ? [] : [preferredKey];\n        } else {\n          newKeys = isOpen\n            ? prev.filter((key: Key) => !keys.includes(key))\n            : [...prev, preferredKey];\n        }\n\n        setExpandedKeysRef.current(newKeys);\n      },\n      [accordion],\n    );\n\n    const configValue = useMemo(\n      () => ({\n        disableAnimation,\n        hideIndicator,\n        indicatorPlacement,\n        keepContentMounted,\n        motionProps,\n        showDivider,\n        variant,\n      }),\n      [\n        disableAnimation,\n        hideIndicator,\n        indicatorPlacement,\n        keepContentMounted,\n        motionProps,\n        showDivider,\n        variant,\n      ],\n    );\n\n    const hasExplicitExpandedKeys =\n      expandedKeysProp !== undefined || defaultExpandedKeys !== undefined;\n\n    const content = (\n      <>\n        {validChildren.map((child, index) => {\n          const hasChildItemKey = (child.props as any).itemKey !== undefined;\n          const childKey = hasChildItemKey ? (child.props as any).itemKey : index;\n          const itemIsOpen = expandedKeys.includes(childKey);\n          return (\n            <Fragment key={childKey}>\n              <AccordionItemStateProvider\n                expandedKeys={hasChildItemKey ? undefined : expandedKeys}\n                isOpen={itemIsOpen}\n                isOpenKey={isOpenKey}\n                itemKey={childKey}\n                preferProviderKeyForNestedItems={!hasExplicitExpandedKeys}\n                onToggleKey={toggleExpand}\n                onToggleKeys={toggleExpandKeys}\n              >\n                {child}\n              </AccordionItemStateProvider>\n              {showDivider && index < validChildren.length - 1 && (\n                <Divider className={styles.divider} />\n              )}\n            </Fragment>\n          );\n        })}\n      </>\n    );\n\n    return (\n      <AccordionConfigContext value={configValue}>\n        <div\n          className={cx(styles.base, classNames?.base, userClassName)}\n          ref={ref}\n          style={{\n            gap,\n            ...customStyles?.base,\n            ...userStyle,\n          }}\n          {...rest}\n        >\n          {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n        </div>\n      </AccordionConfigContext>\n    );\n  },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,YAAY,MACf,EACC,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,KACA,GAAG,WACC;CAEJ,MAAM,gBAAgB,SAAS,QAAQ,QAAQ,CAAC,CAAC,OAAO,cAAc;CAGtE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,KAAK;CAK7F,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;CACT,CAAC;CAOD,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,qBAAqB,OAAO,eAAe;CACjD,mBAAmB,UAAU;CAE7B,MAAM,YAAY,aAAa,QAAa,gBAAgB,QAAQ,SAAS,GAAG,GAAG,CAAC,CAAC;CAErF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO,gBAAgB;EAC7B,IAAI;EAEJ,IAAI,WACF,UAAU,KAAK,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG;OAExC,UAAU,KAAK,SAAS,GAAG,IAAI,KAAK,QAAQ,MAAW,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG;EAGnF,mBAAmB,QAAQ,OAAO;CACpC,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,mBAAmB,aACtB,MAAa,iBAAsB;EAClC,MAAM,OAAO,gBAAgB;EAC7B,MAAM,SAAS,KAAK,MAAM,QAAQ,KAAK,SAAS,GAAG,CAAC;EACpD,IAAI;EAEJ,IAAI,WACF,UAAU,SAAS,CAAC,IAAI,CAAC,YAAY;OAErC,UAAU,SACN,KAAK,QAAQ,QAAa,CAAC,KAAK,SAAS,GAAG,CAAC,IAC7C,CAAC,GAAG,MAAM,YAAY;EAG5B,mBAAmB,QAAQ,OAAO;CACpC,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,cAAc,eACX;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,0BACJ,qBAAqB,KAAA,KAAa,wBAAwB,KAAA;CAE5D,MAAM,UACJ,oBAAA,YAAA,EAAA,UACG,cAAc,KAAK,OAAO,UAAU;EACnC,MAAM,kBAAmB,MAAM,MAAc,YAAY,KAAA;EACzD,MAAM,WAAW,kBAAmB,MAAM,MAAc,UAAU;EAClE,MAAM,aAAa,aAAa,SAAS,QAAQ;EACjD,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,4BAAD;GACE,cAAc,kBAAkB,KAAA,IAAY;GAC5C,QAAQ;GACG;GACX,SAAS;GACT,iCAAiC,CAAC;GAClC,aAAa;GACb,cAAc;GAEb,UAAA;EACyB,CAAA,GAC3B,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,SAAD,EAAS,WAAW,OAAO,QAAU,CAAA,CAE/B,EAAA,GAfK,QAeL;CAEd,CAAC,EACD,CAAA;CAGJ,OACE,oBAAC,wBAAD;EAAwB,OAAO;EAC7B,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,aAAa;GACrD;GACL,OAAO;IACL;IACA,GAAG,cAAc;IACjB,GAAG;GACL;GACA,GAAI;GAEH,UAAA,mBAAmB,UAAU,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA;EAC9D,CAAA;CACiB,CAAA;AAE5B,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from './atoms';\nimport { styles } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion: FC<AccordionProps> = ({\n  className,\n  classNames,\n  defaultValue,\n  gap,\n  hideIndicator,\n  indicatorPlacement = 'start',\n  items,\n  keepMounted,\n  multiple = true,\n  onValueChange,\n  ref,\n  style,\n  styles: customStyles,\n  value,\n  variant = 'borderless',\n}) => {\n  return (\n    <AccordionRoot\n      className={clsx(classNames?.root, className)}\n      defaultValue={defaultValue}\n      hideIndicator={hideIndicator}\n      indicatorPlacement={indicatorPlacement}\n      multiple={multiple}\n      ref={ref}\n      style={{ gap, ...style, ...customStyles?.root }}\n      value={value}\n      variant={variant}\n      onValueChange={onValueChange ? (next) => onValueChange(next as string[]) : undefined}\n    >\n      {items?.map((item) => (\n        <AccordionItem\n          className={classNames?.item}\n          disabled={item.disabled}\n          key={item.key}\n          style={customStyles?.item}\n          value={item.key}\n        >\n          <AccordionHeader className={classNames?.header} style={customStyles?.header}>\n            <AccordionTrigger className={classNames?.trigger} style={customStyles?.trigger}>\n              {item.title}\n            </AccordionTrigger>\n            {item.action && (\n              <div\n                {...styleProps(\n                  [\n                    styles.action,\n                    variant === 'borderless' ? styles.actionBorderless : styles.actionOutlined,\n                    item.alwaysShowAction && styles.actionAlwaysVisible,\n                  ],\n                  clsx('accordion-action', classNames?.action),\n                  customStyles?.action,\n                )}\n              >\n                {item.action}\n              </div>\n            )}\n          </AccordionHeader>\n          <AccordionPanel\n            className={classNames?.panel}\n            contentClassName={classNames?.content}\n            contentStyle={customStyles?.content}\n            keepMounted={keepMounted}\n            style={customStyles?.panel}\n          >\n            {item.children}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </AccordionRoot>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAiC,EACrC,WACA,YACA,cACA,KACA,eACA,qBAAqB,SACrB,OACA,aACA,WAAW,MACX,eACA,KACA,OACA,QAAQ,cACR,OACA,UAAU,mBACN;CACJ,OACE,oBAAC,eAAD;EACE,WAAW,KAAK,YAAY,MAAM,SAAS;EAC7B;EACC;EACK;EACV;EACL;EACL,OAAO;GAAE;GAAK,GAAG;GAAO,GAAG,cAAc;EAAK;EACvC;EACE;EACT,eAAe,iBAAiB,SAAS,cAAc,IAAgB,IAAI,KAAA;EAE1E,UAAA,OAAO,KAAK,SACX,qBAAC,eAAD;GACE,WAAW,YAAY;GACvB,UAAU,KAAK;GAEf,OAAO,cAAc;GACrB,OAAO,KAAK;GALd,UAAA,CAOE,qBAAC,iBAAD;IAAiB,WAAW,YAAY;IAAQ,OAAO,cAAc;IAArE,UAAA,CACE,oBAAC,kBAAD;KAAkB,WAAW,YAAY;KAAS,OAAO,cAAc;KACpE,UAAA,KAAK;IACU,CAAA,GACjB,KAAK,UACJ,oBAAC,OAAD;KACE,GAAI,WACF;MACE,OAAO;MACP,YAAY,eAAe,OAAO,mBAAmB,OAAO;MAC5D,KAAK,oBAAoB,OAAO;KAClC,GACA,KAAK,oBAAoB,YAAY,MAAM,GAC3C,cAAc,MAChB;KAEC,UAAA,KAAK;IACH,CAAA,CAEQ;GACjB,CAAA,GAAA,oBAAC,gBAAD;IACE,WAAW,YAAY;IACvB,kBAAkB,YAAY;IAC9B,cAAc,cAAc;IACf;IACb,OAAO,cAAc;IAEpB,UAAA,KAAK;GACQ,CAAA,CACH;EAjCR,GAAA,KAAK,GAiCG,CAChB;CACY,CAAA;AAEnB;AAEA,UAAU,cAAc"}

package/es/Accordion/atoms.d.mts

@@ -0,0 +1,18 @@
+import { AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps, AccordionVariant } from "./type.mjs";
+import { accordionStyles } from "./style.mjs";
+import { FC } from "react";
+//#region src/Accordion/atoms.d.ts
+interface AccordionContextValue {
+  hideIndicator: boolean;
+  indicatorPlacement: AccordionIndicatorPlacement;
+  variant: AccordionVariant;
+}
+export declare const useAccordionContext: () => AccordionContextValue;
+export declare const AccordionRoot: FC<AccordionRootProps>;
+export declare const AccordionItem: FC<AccordionItemProps>;
+export declare const AccordionHeader: FC<AccordionHeaderProps>;
+export declare const AccordionTrigger: FC<AccordionTriggerProps>;
+export declare const AccordionPanel: FC<AccordionPanelProps>;
+//#endregion
+export { accordionStyles };
+//# sourceMappingURL=atoms.d.mts.map

package/es/Accordion/atoms.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { accordionHeaderMarker, accordionPanelMarker, accordionTriggerMarker } from "./marker.stylex.mjs";
+import { accordionStyles, styles } from "./style.mjs";
+import { createContext, use, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { Accordion } from "@base-ui/react/accordion";
+import { ChevronDown, ChevronRight, Play } from "lucide-react";
+//#region src/Accordion/atoms.tsx
+const triggerVariantStyles = {
+	borderless: styles.triggerBorderless,
+	filled: styles.triggerFilled,
+	outlined: styles.triggerOutlined
+};
+const indicatorPlacementStyles = {
+	end: styles.indicatorEnd,
+	inline: styles.indicatorInline,
+	start: styles.indicatorStart
+};
+const contentVariantStyles = {
+	borderless: styles.contentBorderless,
+	filled: styles.contentBorderless,
+	outlined: styles.contentOutlined
+};
+const AccordionContext = createContext({
+	hideIndicator: false,
+	indicatorPlacement: "start",
+	variant: "borderless"
+});
+const useAccordionContext = () => use(AccordionContext);
+const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPlacement = "start", multiple = true, variant = "borderless", ...rest }) => {
+	const contextValue = useMemo(() => ({
+		hideIndicator,
+		indicatorPlacement,
+		variant
+	}), [
+		hideIndicator,
+		indicatorPlacement,
+		variant
+	]);
+	return /* @__PURE__ */ jsx(AccordionContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			multiple,
+			className: styleProps([styles.root, variant === "outlined" && styles.rootOutlined], className).className,
+			...rest,
+			children
+		})
+	});
+};
+AccordionRoot.displayName = "AccordionRoot";
+const AccordionItem = ({ className, variant: variantProp, ...rest }) => {
+	const ctx = useAccordionContext();
+	const variant = variantProp ?? ctx.variant;
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		className: styleProps([styles.item, variant === "outlined" && styles.itemOutlined], className).className,
+		...rest
+	});
+};
+AccordionItem.displayName = "AccordionItem";
+const AccordionHeader = ({ className, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
+	const ctx = useAccordionContext();
+	const variant = variantProp ?? ctx.variant;
+	const inline = (placementProp ?? ctx.indicatorPlacement) === "inline" && variant !== "outlined";
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: styleProps([
+			accordionHeaderMarker,
+			styles.header,
+			variant === "borderless" && styles.headerBorderless,
+			variant === "filled" && styles.headerFilled,
+			inline && styles.headerInline
+		], clsx(inline && "lobe-accordion-header-inline", className)).className,
+		...rest
+	});
+};
+AccordionHeader.displayName = "AccordionHeader";
+const AccordionTrigger = ({ children, className, hideIndicator: hideIndicatorProp, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
+	const ctx = useAccordionContext();
+	const variant = variantProp ?? ctx.variant;
+	const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
+	const placement = placementProp ?? ctx.indicatorPlacement;
+	const indicator = !hideIndicator && /* @__PURE__ */ jsxs("span", {
+		...stylex.props(styles.indicator, indicatorPlacementStyles[placement]),
+		children: [
+			placement === "start" && /* @__PURE__ */ jsx(ChevronRight, { size: 16 }),
+			placement === "inline" && /* @__PURE__ */ jsx(Play, {
+				fill: "currentColor",
+				size: 7,
+				strokeWidth: 1
+			}),
+			placement === "end" && /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+		]
+	});
+	return /* @__PURE__ */ jsxs(Accordion.Trigger, {
+		className: styleProps([
+			accordionTriggerMarker,
+			focusRing.info,
+			styles.trigger,
+			triggerVariantStyles[variant]
+		], className).className,
+		...rest,
+		children: [
+			placement === "start" && indicator,
+			children,
+			placement !== "start" && indicator
+		]
+	});
+};
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionPanel = ({ children, className, contentClassName, contentStyle, hideIndicator: hideIndicatorProp, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
+	const ctx = useAccordionContext();
+	const variant = variantProp ?? ctx.variant;
+	const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
+	const placement = placementProp ?? ctx.indicatorPlacement;
+	const indent = !hideIndicator && placement === "start";
+	const inline = placement === "inline";
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		className: styleProps([accordionPanelMarker, styles.panel], className).className,
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			...styleProps([
+				styles.content,
+				contentVariantStyles[variant],
+				inline && variant === "borderless" && styles.contentInline,
+				indent && variant !== "outlined" && styles.contentIndent,
+				indent && variant === "outlined" && styles.contentIndentOutlined
+			], contentClassName, contentStyle),
+			children
+		})
+	});
+};
+AccordionPanel.displayName = "AccordionPanel";
+//#endregion
+export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, accordionStyles, useAccordionContext };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/Accordion/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["BaseUIAccordion"],"sources":["../../src/Accordion/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight, Play } from 'lucide-react';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  accordionHeaderMarker,\n  accordionPanelMarker,\n  accordionTriggerMarker,\n} from './marker.stylex';\nimport { styles } from './style';\nimport type {\n  AccordionHeaderProps,\n  AccordionIndicatorPlacement,\n  AccordionItemProps,\n  AccordionPanelProps,\n  AccordionRootProps,\n  AccordionTriggerProps,\n  AccordionVariant,\n} from './type';\n\ninterface AccordionContextValue {\n  hideIndicator: boolean;\n  indicatorPlacement: AccordionIndicatorPlacement;\n  variant: AccordionVariant;\n}\n\nconst triggerVariantStyles = {\n  borderless: styles.triggerBorderless,\n  filled: styles.triggerFilled,\n  outlined: styles.triggerOutlined,\n};\n\nconst indicatorPlacementStyles = {\n  end: styles.indicatorEnd,\n  inline: styles.indicatorInline,\n  start: styles.indicatorStart,\n};\n\nconst contentVariantStyles = {\n  borderless: styles.contentBorderless,\n  filled: styles.contentBorderless,\n  outlined: styles.contentOutlined,\n};\n\nconst AccordionContext = createContext<AccordionContextValue>({\n  hideIndicator: false,\n  indicatorPlacement: 'start',\n  variant: 'borderless',\n});\n\nexport const useAccordionContext = () => use(AccordionContext);\n\nexport const AccordionRoot: FC<AccordionRootProps> = ({\n  children,\n  className,\n  hideIndicator = false,\n  indicatorPlacement = 'start',\n  multiple = true,\n  variant = 'borderless',\n  ...rest\n}) => {\n  const contextValue = useMemo(\n    () => ({ hideIndicator, indicatorPlacement, variant }),\n    [hideIndicator, indicatorPlacement, variant],\n  );\n\n  return (\n    <AccordionContext value={contextValue}>\n      <BaseUIAccordion.Root\n        multiple={multiple}\n        className={\n          styleProps([styles.root, variant === 'outlined' && styles.rootOutlined], className)\n            .className\n        }\n        {...rest}\n      >\n        {children}\n      </BaseUIAccordion.Root>\n    </AccordionContext>\n  );\n};\n\nAccordionRoot.displayName = 'AccordionRoot';\n\nexport const AccordionItem: FC<AccordionItemProps> = ({\n  className,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUIAccordion.Item\n      className={\n        styleProps([styles.item, variant === 'outlined' && styles.itemOutlined], className)\n          .className\n      }\n      {...rest}\n    />\n  );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport const AccordionHeader: FC<AccordionHeaderProps> = ({\n  className,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const inline = (placementProp ?? ctx.indicatorPlacement) === 'inline' && variant !== 'outlined';\n\n  return (\n    <BaseUIAccordion.Header\n      className={\n        styleProps(\n          [\n            accordionHeaderMarker,\n            styles.header,\n            variant === 'borderless' && styles.headerBorderless,\n            variant === 'filled' && styles.headerFilled,\n            inline && styles.headerInline,\n          ],\n          clsx(inline && 'lobe-accordion-header-inline', className),\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nAccordionHeader.displayName = 'AccordionHeader';\n\nexport const AccordionTrigger: FC<AccordionTriggerProps> = ({\n  children,\n  className,\n  hideIndicator: hideIndicatorProp,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n  const placement = placementProp ?? ctx.indicatorPlacement;\n\n  const indicator = !hideIndicator && (\n    <span {...stylex.props(styles.indicator, indicatorPlacementStyles[placement])}>\n      {placement === 'start' && <ChevronRight size={16} />}\n      {placement === 'inline' && <Play fill=\"currentColor\" size={7} strokeWidth={1} />}\n      {placement === 'end' && <ChevronDown size={16} />}\n    </span>\n  );\n\n  return (\n    <BaseUIAccordion.Trigger\n      className={\n        styleProps(\n          [accordionTriggerMarker, focusRing.info, styles.trigger, triggerVariantStyles[variant]],\n          className,\n        ).className\n      }\n      {...rest}\n    >\n      {placement === 'start' && indicator}\n      {children}\n      {placement !== 'start' && indicator}\n    </BaseUIAccordion.Trigger>\n  );\n};\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nexport const AccordionPanel: FC<AccordionPanelProps> = ({\n  children,\n  className,\n  contentClassName,\n  contentStyle,\n  hideIndicator: hideIndicatorProp,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n  const placement = placementProp ?? ctx.indicatorPlacement;\n  const indent = !hideIndicator && placement === 'start';\n  const inline = placement === 'inline';\n\n  return (\n    <BaseUIAccordion.Panel\n      className={styleProps([accordionPanelMarker, styles.panel], className).className}\n      {...rest}\n    >\n      <div\n        {...styleProps(\n          [\n            styles.content,\n            contentVariantStyles[variant],\n            inline && variant === 'borderless' && styles.contentInline,\n            indent && variant !== 'outlined' && styles.contentIndent,\n            indent && variant === 'outlined' && styles.contentIndentOutlined,\n          ],\n          contentClassName,\n          contentStyle,\n        )}\n      >\n        {children}\n      </div>\n    </BaseUIAccordion.Panel>\n  );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n\nexport { accordionStyles } from './style';\n"],"mappings":"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"}

package/es/Accordion/index.d.mts

@@ -1,4 +1,5 @@
-import { AccordionItemProps, AccordionProps } from "./type.mjs";
+import { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant } from "./type.mjs";
 import Accordion from "./Accordion.mjs";
-import AccordionItem from "./AccordionItem.mjs";
-export { Accordion, AccordionItem, AccordionItemProps, AccordionProps };
+import { accordionStyles } from "./style.mjs";
+import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, useAccordionContext } from "./atoms.mjs";
+export { type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, accordionStyles, Accordion as default, useAccordionContext };

package/es/Accordion/index.mjs

@@ -1,3 +1,4 @@
+import { accordionStyles } from "./style.mjs";
+import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, useAccordionContext } from "./atoms.mjs";
 import Accordion from "./Accordion.mjs";
-import AccordionItem from "./AccordionItem.mjs";
-export { Accordion, AccordionItem };
+export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, accordionStyles, Accordion as default, useAccordionContext };

package/es/Accordion/marker.stylex.mjs

@@ -0,0 +1,17 @@
+//#region src/Accordion/marker.stylex.ts
+const accordionHeaderMarker = {
+	lb1khua0w: "lb1khua0w",
+	$$css: true
+};
+const accordionPanelMarker = {
+	lb6r460e: "lb6r460e",
+	$$css: true
+};
+const accordionTriggerMarker = {
+	lbcx8n6t: "lbcx8n6t",
+	$$css: true
+};
+//#endregion
+export { accordionHeaderMarker, accordionPanelMarker, accordionTriggerMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Accordion/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Accordion/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const accordionHeaderMarker = stylex.defineMarker();\nexport const accordionPanelMarker = stylex.defineMarker();\nexport const accordionTriggerMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,wBAAwB;CACnC,WAAW;CACX,OAAO;AACT;AACA,MAAa,uBAAuB;CAClC,UAAU;CACV,OAAO;AACT;AACA,MAAa,yBAAyB;CACpC,UAAU;CACV,OAAO;AACT"}

package/es/Accordion/style.d.mts

@@ -0,0 +1,33 @@
+import "@stylexjs/stylex";
+//#region src/Accordion/style.d.ts
+export declare const accordionStyles: {
+  panel: string;
+  header: string;
+  action: string;
+  content: string;
+  trigger: string;
+  root: string;
+  indicator: string;
+  item: string;
+  itemOutlined: string;
+  rootOutlined: string;
+  actionAlwaysVisible: string;
+  actionBorderless: string;
+  actionOutlined: string;
+  contentBorderless: string;
+  contentIndent: string;
+  contentIndentOutlined: string;
+  contentInline: string;
+  contentOutlined: string;
+  headerBorderless: string;
+  headerFilled: string;
+  headerInline: string;
+  indicatorEnd: string;
+  indicatorInline: string;
+  indicatorStart: string;
+  triggerBorderless: string;
+  triggerFilled: string;
+  triggerOutlined: string;
+};
+//#endregion
+//# sourceMappingURL=style.d.mts.map