@lobehub/ui 5.33.2 → 5.34.0

package/es/base-ui/Accordion/Accordion.d.mts

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

package/es/base-ui/Accordion/Accordion.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { actionVariants } from "./style.mjs";
+import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger } from "./atoms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Accordion/Accordion.tsx
+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: cx(classNames?.root, className),
+		defaultValue,
+		hideIndicator,
+		indicatorPlacement,
+		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", {
+					style: customStyles?.action,
+					className: cx("accordion-action", actionVariants({
+						alwaysVisible: item.alwaysShowAction,
+						variant
+					}), classNames?.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 };
+
+//# sourceMappingURL=Accordion.mjs.map

package/es/base-ui/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../src/base-ui/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from './atoms';\nimport { actionVariants } 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={cx(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                style={customStyles?.action}\n                className={cx(\n                  'accordion-action',\n                  actionVariants({ alwaysVisible: item.alwaysShowAction, variant }),\n                  classNames?.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":";;;;;;AAeA,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,GAAG,YAAY,MAAM,SAAS;EAC3B;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,OAAO,cAAc;KACrB,WAAW,GACT,oBACA,eAAe;MAAE,eAAe,KAAK;MAAkB;KAAQ,CAAC,GAChE,YAAY,MACd;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;EA9BR,GAAA,KAAK,GA8BG,CAChB;CACY,CAAA;AAEnB;AAEA,UAAU,cAAc"}

package/es/base-ui/Accordion/atoms.d.mts

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

package/es/base-ui/Accordion/atoms.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { contentVariants, headerVariants, indicatorVariants, itemVariants, rootVariants, styles, triggerVariants } from "./style.mjs";
+import { createContext, use, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/base-ui/Accordion/atoms.tsx
+const AccordionContext = createContext({
+	hideIndicator: false,
+	indicatorPlacement: "start",
+	variant: "borderless"
+});
+const useAccordionContext = () => use(AccordionContext);
+const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPlacement = "start", variant = "borderless", ...rest }) => {
+	const contextValue = useMemo(() => ({
+		hideIndicator,
+		indicatorPlacement,
+		variant
+	}), [
+		hideIndicator,
+		indicatorPlacement,
+		variant
+	]);
+	return /* @__PURE__ */ jsx(AccordionContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			className: cx(rootVariants({ variant }), 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: cx(itemVariants({ variant }), className),
+		...rest
+	});
+};
+AccordionItem.displayName = "AccordionItem";
+const AccordionHeader = ({ className, variant: variantProp, ...rest }) => {
+	const ctx = useAccordionContext();
+	const variant = variantProp ?? ctx.variant;
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: cx(headerVariants({ variant }), 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__ */ jsx("span", {
+		className: indicatorVariants({ placement }),
+		children: placement === "start" ? /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+	});
+	return /* @__PURE__ */ jsxs(Accordion.Trigger, {
+		className: cx(triggerVariants({ variant }), className),
+		...rest,
+		children: [
+			placement === "start" && indicator,
+			children,
+			placement === "end" && 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";
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		className: cx(styles.panel, className),
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(contentVariants({
+				indent,
+				variant
+			}), contentClassName),
+			style: contentStyle,
+			children
+		})
+	});
+};
+AccordionPanel.displayName = "AccordionPanel";
+//#endregion
+export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, styles as accordionStyles, useAccordionContext };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/base-ui/Accordion/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["BaseUIAccordion"],"sources":["../../../src/base-ui/Accordion/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport {\n  contentVariants,\n  headerVariants,\n  indicatorVariants,\n  itemVariants,\n  rootVariants,\n  styles,\n  triggerVariants,\n} 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 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  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 className={cx(rootVariants({ variant }), className)} {...rest}>\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 <BaseUIAccordion.Item className={cx(itemVariants({ variant }), className)} {...rest} />;\n};\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport const AccordionHeader: FC<AccordionHeaderProps> = ({\n  className,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUIAccordion.Header className={cx(headerVariants({ variant }), className)} {...rest} />\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 className={indicatorVariants({ placement })}>\n      {placement === 'start' ? <ChevronRight size={16} /> : <ChevronDown size={16} />}\n    </span>\n  );\n\n  return (\n    <BaseUIAccordion.Trigger className={cx(triggerVariants({ variant }), className)} {...rest}>\n      {placement === 'start' && indicator}\n      {children}\n      {placement === 'end' && 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\n  return (\n    <BaseUIAccordion.Panel className={cx(styles.panel, className)} {...rest}>\n      <div\n        className={cx(contentVariants({ indent, variant }), contentClassName)}\n        style={contentStyle}\n      >\n        {children}\n      </div>\n    </BaseUIAccordion.Panel>\n  );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n\nexport { styles as accordionStyles } from './style';\n"],"mappings":";;;;;;;;AAgCA,MAAM,mBAAmB,cAAqC;CAC5D,eAAe;CACf,oBAAoB;CACpB,SAAS;AACX,CAAC;AAED,MAAa,4BAA4B,IAAI,gBAAgB;AAE7D,MAAa,iBAAyC,EACpD,UACA,WACA,gBAAgB,OAChB,qBAAqB,SACrB,UAAU,cACV,GAAG,WACC;CACJ,MAAM,eAAe,eACZ;EAAE;EAAe;EAAoB;CAAQ,IACpD;EAAC;EAAe;EAAoB;CAAO,CAC7C;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,oBAACA,UAAgB,MAAjB;GAAsB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;GAAG,GAAI;GAC5E;EACmB,CAAA;CACN,CAAA;AAEtB;AAEA,cAAc,cAAc;AAE5B,MAAa,iBAAyC,EACpD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CAEnC,OAAO,oBAACA,UAAgB,MAAjB;EAAsB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/F;AAEA,cAAc,cAAc;AAE5B,MAAa,mBAA6C,EACxD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,UAAgB,QAAjB;EAAwB,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAE9F;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAA+C,EAC1D,UACA,WACA,eAAe,mBACf,oBAAoB,eACpB,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CACnC,MAAM,gBAAgB,qBAAqB,IAAI;CAC/C,MAAM,YAAY,iBAAiB,IAAI;CAEvC,MAAM,YAAY,CAAC,iBACjB,oBAAC,QAAD;EAAM,WAAW,kBAAkB,EAAE,UAAU,CAAC;EAC7C,UAAA,cAAc,UAAU,oBAAC,cAAD,EAAc,MAAM,GAAK,CAAA,IAAI,oBAAC,aAAD,EAAa,MAAM,GAAK,CAAA;CAC1E,CAAA;CAGR,OACE,qBAACA,UAAgB,SAAjB;EAAyB,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAArF,UAAA;GACG,cAAc,WAAW;GACzB;GACA,cAAc,SAAS;EACD;;AAE7B;AAEA,iBAAiB,cAAc;AAE/B,MAAa,kBAA2C,EACtD,UACA,WACA,kBACA,cACA,eAAe,mBACf,oBAAoB,eACpB,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CACnC,MAAM,gBAAgB,qBAAqB,IAAI;CAC/C,MAAM,YAAY,iBAAiB,IAAI;CACvC,MAAM,SAAS,CAAC,iBAAiB,cAAc;CAE/C,OACE,oBAACA,UAAgB,OAAjB;EAAuB,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,GAAI;EACjE,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,gBAAgB;IAAE;IAAQ;GAAQ,CAAC,GAAG,gBAAgB;GACpE,OAAO;GAEN;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,eAAe,cAAc"}

package/es/base-ui/Accordion/index.d.mts

@@ -0,0 +1,5 @@
+import { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant } from "./type.mjs";
+import Accordion from "./Accordion.mjs";
+import { styles } 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, styles as accordionStyles, Accordion as default, useAccordionContext };

package/es/base-ui/Accordion/style.d.mts

@@ -0,0 +1,28 @@
+//#region src/base-ui/Accordion/style.d.ts
+declare const styles: {
+  action: string;
+  actionAlwaysVisible: string;
+  actionBorderless: string;
+  actionOutlined: string;
+  content: string;
+  contentBorderless: string;
+  contentIndent: string;
+  contentIndentOutlined: string;
+  contentOutlined: string;
+  header: string;
+  headerBorderless: string;
+  indicator: string;
+  indicatorEnd: string;
+  indicatorStart: string;
+  item: string;
+  itemOutlined: string;
+  panel: string;
+  root: string;
+  rootOutlined: string;
+  trigger: string;
+  triggerBorderless: string;
+  triggerOutlined: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/Accordion/style.mjs

@@ -0,0 +1,245 @@
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Accordion/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	action: css`
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+
+    opacity: 0;
+
+    transition: opacity 150ms ${cssVar.motionEaseOut};
+  `,
+	actionAlwaysVisible: css`
+    opacity: 1;
+  `,
+	actionBorderless: css`
+    padding-inline-end: var(--accordion-hover-inset, 8px);
+  `,
+	actionOutlined: css`
+    padding-inline-end: 16px;
+  `,
+	content: css`
+    font-size: 14px;
+    line-height: 1.6;
+  `,
+	contentBorderless: css`
+    padding-block: 0 12px;
+  `,
+	contentIndent: css`
+    padding-inline-start: 24px;
+  `,
+	contentIndentOutlined: css`
+    padding-inline-start: 40px;
+  `,
+	contentOutlined: css`
+    padding-block: 0 14px;
+    padding-inline: 16px;
+  `,
+	header: css`
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    margin: 0;
+
+    font-size: inherit;
+    font-weight: inherit;
+
+    transition: background 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not(:has([data-disabled])) {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &:hover .accordion-action,
+    &:focus-within .accordion-action {
+      opacity: 1;
+    }
+  `,
+	headerBorderless: css`
+    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);
+    border-radius: ${cssVar.borderRadius};
+  `,
+	indicator: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    color: ${cssVar.colorTextDescription};
+
+    transition: transform 200ms ${cssVar.motionEaseOut};
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	indicatorEnd: css`
+    margin-inline-start: auto;
+
+    [data-panel-open] & {
+      transform: rotate(180deg);
+    }
+  `,
+	indicatorStart: css`
+    [data-panel-open] & {
+      transform: rotate(90deg);
+    }
+  `,
+	item: css`
+    display: flex;
+    flex-direction: column;
+  `,
+	itemOutlined: css`
+    & + & {
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+    }
+  `,
+	panel: css`
+    overflow: hidden;
+    height: var(--accordion-panel-height);
+    transition: height 200ms ${cssVar.motionEaseOut};
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      height: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  `,
+	rootOutlined: css`
+    overflow: hidden;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+  `,
+	trigger: css`
+    cursor: pointer;
+    user-select: none;
+
+    display: flex;
+    flex: 1;
+    gap: 8px;
+    align-items: center;
+
+    min-width: 0;
+    border: 0;
+    border-radius: inherit;
+
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+    text-align: start;
+
+    background: none;
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar.colorPrimaryBorder};
+      outline-offset: -2px;
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+      color: ${cssVar.colorTextDisabled};
+    }
+  `,
+	triggerBorderless: css`
+    padding-block: 8px;
+    padding-inline: var(--accordion-hover-inset, 8px);
+  `,
+	triggerOutlined: css`
+    padding-block: 12px;
+    padding-inline: 16px;
+  `
+}));
+const rootVariants = cva(styles.root, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: null,
+		outlined: styles.rootOutlined
+	} }
+});
+const itemVariants = cva(styles.item, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: null,
+		outlined: styles.itemOutlined
+	} }
+});
+const headerVariants = cva(styles.header, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: styles.headerBorderless,
+		outlined: null
+	} }
+});
+const triggerVariants = cva(styles.trigger, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		borderless: styles.triggerBorderless,
+		outlined: styles.triggerOutlined
+	} }
+});
+const indicatorVariants = cva(styles.indicator, {
+	defaultVariants: { placement: "start" },
+	variants: { placement: {
+		end: styles.indicatorEnd,
+		start: styles.indicatorStart
+	} }
+});
+const contentVariants = cva(styles.content, {
+	compoundVariants: [{
+		class: styles.contentIndent,
+		indent: true,
+		variant: "borderless"
+	}, {
+		class: styles.contentIndentOutlined,
+		indent: true,
+		variant: "outlined"
+	}],
+	defaultVariants: {
+		indent: true,
+		variant: "borderless"
+	},
+	variants: {
+		indent: {
+			false: null,
+			true: null
+		},
+		variant: {
+			borderless: styles.contentBorderless,
+			outlined: styles.contentOutlined
+		}
+	}
+});
+const actionVariants = cva(styles.action, {
+	defaultVariants: {
+		alwaysVisible: false,
+		variant: "borderless"
+	},
+	variants: {
+		alwaysVisible: {
+			false: null,
+			true: styles.actionAlwaysVisible
+		},
+		variant: {
+			borderless: styles.actionBorderless,
+			outlined: styles.actionOutlined
+		}
+	}
+});
+//#endregion
+export { actionVariants, contentVariants, headerVariants, indicatorVariants, itemVariants, rootVariants, styles, triggerVariants };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Accordion/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  actionAlwaysVisible: css`\n    opacity: 1;\n  `,\n  actionBorderless: css`\n    padding-inline-end: var(--accordion-hover-inset, 8px);\n  `,\n  actionOutlined: css`\n    padding-inline-end: 16px;\n  `,\n  content: css`\n    font-size: 14px;\n    line-height: 1.6;\n  `,\n  contentBorderless: css`\n    padding-block: 0 12px;\n  `,\n  contentIndent: css`\n    padding-inline-start: 24px;\n  `,\n  contentIndentOutlined: css`\n    padding-inline-start: 40px;\n  `,\n  contentOutlined: css`\n    padding-block: 0 14px;\n    padding-inline: 16px;\n  `,\n  header: css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n\n    margin: 0;\n\n    font-size: inherit;\n    font-weight: inherit;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover .accordion-action,\n    &:focus-within .accordion-action {\n      opacity: 1;\n    }\n  `,\n  headerBorderless: css`\n    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n    border-radius: ${cssVar.borderRadius};\n  `,\n  indicator: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorEnd: css`\n    margin-inline-start: auto;\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  indicatorStart: css`\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  item: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  itemOutlined: css`\n    & + & {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--accordion-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n    border: 0;\n    border-radius: inherit;\n\n    font: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  triggerBorderless: css`\n    padding-block: 8px;\n    padding-inline: var(--accordion-hover-inset, 8px);\n  `,\n  triggerOutlined: css`\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n\nexport const headerVariants = cva(styles.header, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.headerBorderless,\n      outlined: null,\n    },\n  },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.triggerBorderless,\n      outlined: styles.triggerOutlined,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: { placement: 'start' },\n  variants: {\n    placement: {\n      end: styles.indicatorEnd,\n      start: styles.indicatorStart,\n    },\n  },\n});\n\nexport const contentVariants = cva(styles.content, {\n  compoundVariants: [\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndentOutlined,\n      indent: true,\n      variant: 'outlined',\n    },\n  ],\n  defaultVariants: { indent: true, variant: 'borderless' },\n  variants: {\n    indent: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.contentBorderless,\n      outlined: styles.contentOutlined,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n  variants: {\n    alwaysVisible: {\n      false: null,\n      true: styles.actionAlwaysVisible,\n    },\n    variant: {\n      borderless: styles.actionBorderless,\n      outlined: styles.actionOutlined,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;CAIZ,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;;aAgBD,OAAO,UAAU;;;;;;;2BAOH,OAAO,mBAAmB;;;;;;eAMtC,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,iBAAiB,GAAG;;;;AAItB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU;CACZ,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,SAAS;CAAa;CACvD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/base-ui/Accordion/type.d.mts

@@ -0,0 +1,79 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/base-ui/Accordion/type.d.ts
+type AccordionVariant = 'borderless' | 'outlined';
+type AccordionIndicatorPlacement = 'end' | 'start';
+interface AccordionClassNames {
+  action?: string;
+  content?: string;
+  header?: string;
+  item?: string;
+  panel?: string;
+  root?: string;
+  trigger?: string;
+}
+interface AccordionStyles {
+  action?: CSSProperties;
+  content?: CSSProperties;
+  header?: CSSProperties;
+  item?: CSSProperties;
+  panel?: CSSProperties;
+  root?: CSSProperties;
+  trigger?: CSSProperties;
+}
+interface AccordionItemType {
+  action?: ReactNode;
+  alwaysShowAction?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  key: string;
+  title: ReactNode;
+}
+type AccordionRootProps = Omit<ComponentProps<typeof Accordion.Root>, 'className' | 'render'> & {
+  className?: string;
+  hideIndicator?: boolean;
+  indicatorPlacement?: AccordionIndicatorPlacement;
+  variant?: AccordionVariant;
+};
+type AccordionItemProps = Omit<ComponentProps<typeof Accordion.Item>, 'className' | 'render'> & {
+  className?: string;
+  variant?: AccordionVariant;
+};
+type AccordionHeaderProps = Omit<ComponentProps<typeof Accordion.Header>, 'className' | 'render'> & {
+  className?: string;
+  variant?: AccordionVariant;
+};
+type AccordionTriggerProps = Omit<ComponentProps<typeof Accordion.Trigger>, 'className' | 'render'> & {
+  className?: string;
+  hideIndicator?: boolean;
+  indicatorPlacement?: AccordionIndicatorPlacement;
+  variant?: AccordionVariant;
+};
+type AccordionPanelProps = Omit<ComponentProps<typeof Accordion.Panel>, 'className' | 'render'> & {
+  className?: string;
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+  hideIndicator?: boolean;
+  indicatorPlacement?: AccordionIndicatorPlacement;
+  variant?: AccordionVariant;
+};
+interface AccordionProps {
+  className?: string;
+  classNames?: AccordionClassNames;
+  defaultValue?: string[];
+  gap?: number;
+  hideIndicator?: boolean;
+  indicatorPlacement?: AccordionIndicatorPlacement;
+  items?: AccordionItemType[];
+  keepMounted?: boolean;
+  multiple?: boolean;
+  onValueChange?: (value: string[]) => void;
+  ref?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
+  styles?: AccordionStyles;
+  value?: string[];
+  variant?: AccordionVariant;
+}
+//#endregion
+export { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Toast/style.mjs

@@ -186,19 +186,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     height: var(--toast-collapsed-height);
     padding-block: 12px;
     padding-inline: 16px;
-    border-radius: ${cssVar.borderRadiusLG};
+    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});
 
     color: ${cssVar.colorText};
 
     background: ${cssVar.colorBgElevated};
     background-clip: padding-box;
     box-shadow:
-      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
-      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);
+      0 0 0 1px ${cssVar.colorBorderSecondary},
+      0 4px 12px rgb(0 0 0 / 10%),
+      0 16px 32px -8px rgb(0 0 0 / 12%);
 
     transition:
       transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
@@ -317,39 +314,39 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     z-index: 100000;
 
     width: 360px;
-    max-width: calc(100vw - 32px);
+    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
 
     outline: 0;
 
     @media (width <= 480px) {
-      width: calc(100vw - 32px);
+      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
     }
   `,
 	viewportBottom: css`
-    inset-block-end: 16px;
+    inset-block-end: var(--toast-viewport-offset-y, 16px);
     inset-inline-start: 50%;
     transform: translateX(-50%);
   `,
 	viewportBottomLeft: css`
-    inset-block-end: 16px;
-    inset-inline-start: 16px;
+    inset-block-end: var(--toast-viewport-offset-y, 16px);
+    inset-inline-start: var(--toast-viewport-offset-x, 16px);
   `,
 	viewportBottomRight: css`
-    inset-block-end: 16px;
-    inset-inline-end: 16px;
+    inset-block-end: var(--toast-viewport-offset-y, 16px);
+    inset-inline-end: var(--toast-viewport-offset-x, 16px);
   `,
 	viewportTop: css`
-    inset-block-start: 16px;
+    inset-block-start: var(--toast-viewport-offset-y, 16px);
     inset-inline-start: 50%;
     transform: translateX(-50%);
   `,
 	viewportTopLeft: css`
-    inset-block-start: 16px;
-    inset-inline-start: 16px;
+    inset-block-start: var(--toast-viewport-offset-y, 16px);
+    inset-inline-start: var(--toast-viewport-offset-x, 16px);
   `,
 	viewportTopRight: css`
-    inset-block-start: 16px;
-    inset-inline-end: 16px;
+    inset-block-start: var(--toast-viewport-offset-y, 16px);
+    inset-inline-end: var(--toast-viewport-offset-x, 16px);
   `
 }));
 const viewportVariants = cva(styles.viewport, {