@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

package/es/Avatar/AvatarGroup/index.mjs

@@ -5,7 +5,7 @@ import { AvatarImpl } from "../Avatar.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Avatar/AvatarGroup/index.tsx
 const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, shadow, size = 48, background, animation, draggable, classNames, shape, styles: customStyles, onClick, ref, zIndexReverse, ...rest }) => {
 	const avatars = max ? items.slice(0, max) : items;
@@ -30,7 +30,7 @@ const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, s
 		children: [avatars.map((avatar, index) => {
 			const { key, style: avatarStyle, className: avatarClassName, ...restAvatarProps } = avatar;
 			return /* @__PURE__ */ jsx(AvatarImpl, {
-				className: clsx(classNames?.avatar, avatarClassName),
+				className: clsx$1(classNames?.avatar, avatarClassName),
 				xstyle: styles.avatar,
 				style: {
 					marginLeft: index === 0 ? 0 : gapValue,

package/es/Avatar/AvatarGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","Avatar"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { AvatarImpl as Avatar } from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={clsx(classNames?.avatar, avatarClassName)}\n              key={key}\n              xstyle={styles.avatar}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={classNames?.count}\n            contentXstyle={styles.count}\n            sliceText={false}\n            xstyle={styles.avatar}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAACC,YAAD;IACE,WAAW,KAAK,YAAY,QAAQ,eAAe;IAEnD,QAAQ,OAAO;IACf,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAXM,GAWN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAACA,YAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,YAAY;GACvB,eAAe,OAAO;GACtB,WAAW;GACX,QAAQ,OAAO;GACf,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox","Avatar","clsx"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { AvatarImpl as Avatar } from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={clsx(classNames?.avatar, avatarClassName)}\n              key={key}\n              xstyle={styles.avatar}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={classNames?.count}\n            contentXstyle={styles.count}\n            sliceText={false}\n            xstyle={styles.avatar}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAACC,YAAD;IACE,WAAWC,OAAK,YAAY,QAAQ,eAAe;IAEnD,QAAQ,OAAO;IACf,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAXM,GAWN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAACD,YAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,YAAY;GACvB,eAAe,OAAO;GACtB,WAAW;GACX,QAAQ,OAAO;GACf,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/Breadcrumb/Breadcrumb.mjs

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronRight } from "lucide-react";
 //#region src/Breadcrumb/Breadcrumb.tsx
@@ -33,7 +33,7 @@ const Breadcrumb = memo(({ className, classNames, items, ref, separator, style,
 		"aria-label": "breadcrumb",
 		ref,
 		...rest,
-		...styleProps(styles.root, clsx("lobe-breadcrumb", className), style),
+		...styleProps(styles.root, clsx$1("lobe-breadcrumb", className), style),
 		children: /* @__PURE__ */ jsx("ol", {
 			...stylex.props(styles.list),
 			children: items.map((item, index) => {

package/es/Breadcrumb/Breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nconst renderTitle = (item: BreadcrumbItem): ReactNode => {\n  if (item.href) {\n    return (\n      <A {...stylex.props(styles.link)} href={item.href} onClick={item.onClick}>\n        {item.title}\n      </A>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <button {...stylex.props(styles.button)} type=\"button\" onClick={item.onClick}>\n        {item.title}\n      </button>\n    );\n  }\n\n  return item.title;\n};\n\nconst Breadcrumb = memo<BreadcrumbProps>(\n  ({ className, classNames, items, ref, separator, style, styles: customStyles, ...rest }) => {\n    const separatorNode = separator ?? <Icon icon={ChevronRight} size={14} />;\n\n    return (\n      <nav\n        aria-label=\"breadcrumb\"\n        ref={ref}\n        {...rest}\n        {...styleProps(styles.root, clsx('lobe-breadcrumb', className), style)}\n      >\n        <ol {...stylex.props(styles.list)}>\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n\n            return (\n              <li\n                aria-current={isLast ? 'page' : undefined}\n                key={item.key ?? index}\n                {...styleProps(styles.item, classNames?.item, customStyles?.item)}\n              >\n                {renderTitle(item)}\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    {...styleProps(\n                      styles.separator,\n                      classNames?.separator,\n                      customStyles?.separator,\n                    )}\n                  >\n                    {separatorNode}\n                  </span>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,eAAe,SAAoC;CACvD,IAAI,KAAK,MACP,OAAO,oBAAC,GAAD;EAAG,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,MAAM,KAAK;EAAM,SAAS,KAAK;EACnE,UAAA,KAAK;CACL,CAAA;CAEP,IAAI,KAAK,SACP,OAAO,oBAAC,UAAD;EAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;EAAG,MAAK;EAAS,SAAS,KAAK;EACvE,UAAA,KAAK;CACA,CAAA;CAEZ,OAAO,KAAK;AACd;AACA,MAAM,aAAa,MAAuB,EACxC,WACA,YACA,OACA,KACA,WACA,OACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,gBAAgB,aAAa,oBAAC,MAAD;EAAM,MAAM;EAAc,MAAM;CAAK,CAAA;CACxE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAkB;EAAK,GAAI;EAAM,GAAI,WAAW,OAAO,MAAM,KAAK,mBAAmB,SAAS,GAAG,KAAK;EACvH,UAAA,oBAAC,MAAD;GAAI,GAAI,OAAO,MAAM,OAAO,IAAI;GAC7B,UAAA,MAAM,KAAK,MAAM,UAAU;IAC9B,MAAM,SAAS,UAAU,MAAM,SAAS;IACxC,OAAO,qBAAC,MAAD;KAAI,gBAAc,SAAS,SAAS,KAAA;KAAmC,GAAI,WAAW,OAAO,MAAM,YAAY,MAAM,cAAc,IAAI;KAAvI,UAAA,CACE,YAAY,IAAI,GAChB,CAAC,UAAU,oBAAC,QAAD;MAAM,eAAY;MAAO,GAAI,WAAW,OAAO,WAAW,YAAY,WAAW,cAAc,SAAS;MAC/G,UAAA;KACG,CAAA,CACN;IALiD,GAAA,KAAK,OAAO,KAK7D;GACZ,CAAC;EACK,CAAA;CACD,CAAA;AACX,CAAC;AACD,WAAW,cAAc"}
+{"version":3,"file":"Breadcrumb.mjs","names":["clsx"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nconst renderTitle = (item: BreadcrumbItem): ReactNode => {\n  if (item.href) {\n    return (\n      <A {...stylex.props(styles.link)} href={item.href} onClick={item.onClick}>\n        {item.title}\n      </A>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <button {...stylex.props(styles.button)} type=\"button\" onClick={item.onClick}>\n        {item.title}\n      </button>\n    );\n  }\n\n  return item.title;\n};\n\nconst Breadcrumb = memo<BreadcrumbProps>(\n  ({ className, classNames, items, ref, separator, style, styles: customStyles, ...rest }) => {\n    const separatorNode = separator ?? <Icon icon={ChevronRight} size={14} />;\n\n    return (\n      <nav\n        aria-label=\"breadcrumb\"\n        ref={ref}\n        {...rest}\n        {...styleProps(styles.root, clsx('lobe-breadcrumb', className), style)}\n      >\n        <ol {...stylex.props(styles.list)}>\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n\n            return (\n              <li\n                aria-current={isLast ? 'page' : undefined}\n                key={item.key ?? index}\n                {...styleProps(styles.item, classNames?.item, customStyles?.item)}\n              >\n                {renderTitle(item)}\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    {...styleProps(\n                      styles.separator,\n                      classNames?.separator,\n                      customStyles?.separator,\n                    )}\n                  >\n                    {separatorNode}\n                  </span>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,eAAe,SAAoC;CACvD,IAAI,KAAK,MACP,OAAO,oBAAC,GAAD;EAAG,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,MAAM,KAAK;EAAM,SAAS,KAAK;EACnE,UAAA,KAAK;CACL,CAAA;CAEP,IAAI,KAAK,SACP,OAAO,oBAAC,UAAD;EAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;EAAG,MAAK;EAAS,SAAS,KAAK;EACvE,UAAA,KAAK;CACA,CAAA;CAEZ,OAAO,KAAK;AACd;AACA,MAAM,aAAa,MAAuB,EACxC,WACA,YACA,OACA,KACA,WACA,OACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,gBAAgB,aAAa,oBAAC,MAAD;EAAM,MAAM;EAAc,MAAM;CAAK,CAAA;CACxE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAkB;EAAK,GAAI;EAAM,GAAI,WAAW,OAAO,MAAMA,OAAK,mBAAmB,SAAS,GAAG,KAAK;EACvH,UAAA,oBAAC,MAAD;GAAI,GAAI,OAAO,MAAM,OAAO,IAAI;GAC7B,UAAA,MAAM,KAAK,MAAM,UAAU;IAC9B,MAAM,SAAS,UAAU,MAAM,SAAS;IACxC,OAAO,qBAAC,MAAD;KAAI,gBAAc,SAAS,SAAS,KAAA;KAAmC,GAAI,WAAW,OAAO,MAAM,YAAY,MAAM,cAAc,IAAI;KAAvI,UAAA,CACE,YAAY,IAAI,GAChB,CAAC,UAAU,oBAAC,QAAD;MAAM,eAAY;MAAO,GAAI,WAAW,OAAO,WAAW,YAAY,WAAW,cAAc,SAAS;MAC/G,UAAA;KACG,CAAA,CACN;IALiD,GAAA,KAAK,OAAO,KAK7D;GACZ,CAAC;EACK,CAAA;CACD,CAAA;AACX,CAAC;AACD,WAAW,cAAc"}

package/es/Button/Button.mjs

@@ -36,7 +36,7 @@ const resolveVariantCls = ({ danger, ghost, type }) => {
 		case "primary": return danger ? styles.dangerSolid : styles.variantPrimary;
 		case "dashed": return danger ? [styles.variantDashed, styles.dangerOutlined] : styles.variantDashed;
 		case "fill": return danger ? styles.dangerFill : styles.variantFill;
-		case "text": return danger ? [styles.variantText, styles.dangerInline] : styles.variantText;
+		case "text": return danger ? [styles.variantText, styles.dangerText] : styles.variantText;
 		case "link": return danger ? [styles.variantLink, styles.dangerInline] : styles.variantLink;
 		default: return danger ? [styles.variantDefault, styles.dangerOutlined] : styles.variantDefault;
 	}

package/es/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ButtonOutdent, ButtonProps, ButtonType } from './type';\n\nconst resolveIconNode = (node: ReactNode | IconProps['icon'] | undefined | null) => {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n};\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}) => {\n  // `text` and `link` already drop the surface, so `ghost` there would only cost them\n  // their own traits (link's zero inline padding).\n  if (ghost && type !== 'text' && type !== 'link') {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? [styles.variantDashed, styles.dangerOutlined] : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? [styles.variantText, styles.dangerInline] : styles.variantText;\n    }\n    case 'link': {\n      return danger ? [styles.variantLink, styles.dangerInline] : styles.variantLink;\n    }\n    default: {\n      return danger ? [styles.variantDefault, styles.dangerOutlined] : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\ntype ButtonImplProps = Omit<ButtonProps, 'outdent' | 'type'> & {\n  outdent?: ButtonOutdent;\n  type?: ButtonType;\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nconst ButtonImpl = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  outdent,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  xstyle,\n  ...rest\n}: ButtonImplProps) => {\n  const Motion = useMotionComponent();\n  const isInteractionDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const outdentCls =\n    type === 'text' && outdent\n      ? outdent === 'end'\n        ? styles.outdentEnd\n        : styles.outdentStart\n      : undefined;\n\n  const composedClassName = styleProps(\n    [\n      styles.base,\n      focusRing.info,\n      sizeCls,\n      variantCls,\n      shapeCls,\n      block && styles.block,\n      iconPosition === 'end' && styles.iconEnd,\n      iconOnlySizeCls,\n      outdentCls,\n      xstyle,\n    ],\n    className,\n  ).className;\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      {...styleProps(\n        [\n          styles.iconBox,\n          styles.spinnerSlot,\n          iconPosition === 'end' && styles.spinnerSlotEnd,\n          loading && styles.spinnerSlotShow,\n        ],\n        classNames?.icon,\n        userStyles?.icon,\n      )}\n    >\n      <span {...stylex.props(styles.spinner)} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span {...styleProps(styles.iconBox, classNames?.icon, userStyles?.icon)}>\n        {resolveIconNode(icon)}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isInteractionDisabled\n    ? {}\n    : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isInteractionDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-busy={loading || undefined}\n        aria-disabled={isInteractionDisabled || undefined}\n        href={disabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isInteractionDisabled) {\n      e.preventDefault();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      aria-busy={loading || undefined}\n      aria-disabled={isInteractionDisabled || undefined}\n      className={composedClassName}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={handleButtonClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButtonImpl.displayName = 'BaseButton';\n\nexport { ButtonImpl };\n\nconst Button = ButtonImpl as <T extends ButtonType = 'default'>(\n  props: ButtonProps<T>,\n) => ReactElement;\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ButtonOutdent, ButtonProps, ButtonType } from './type';\n\nconst resolveIconNode = (node: ReactNode | IconProps['icon'] | undefined | null) => {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n};\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}) => {\n  // `text` and `link` already drop the surface, so `ghost` there would only cost them\n  // their own traits (link's zero inline padding).\n  if (ghost && type !== 'text' && type !== 'link') {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? [styles.variantDashed, styles.dangerOutlined] : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? [styles.variantText, styles.dangerText] : styles.variantText;\n    }\n    case 'link': {\n      return danger ? [styles.variantLink, styles.dangerInline] : styles.variantLink;\n    }\n    default: {\n      return danger ? [styles.variantDefault, styles.dangerOutlined] : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\ntype ButtonImplProps = Omit<ButtonProps, 'outdent' | 'type'> & {\n  outdent?: ButtonOutdent;\n  type?: ButtonType;\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nconst ButtonImpl = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  outdent,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  xstyle,\n  ...rest\n}: ButtonImplProps) => {\n  const Motion = useMotionComponent();\n  const isInteractionDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const outdentCls =\n    type === 'text' && outdent\n      ? outdent === 'end'\n        ? styles.outdentEnd\n        : styles.outdentStart\n      : undefined;\n\n  const composedClassName = styleProps(\n    [\n      styles.base,\n      focusRing.info,\n      sizeCls,\n      variantCls,\n      shapeCls,\n      block && styles.block,\n      iconPosition === 'end' && styles.iconEnd,\n      iconOnlySizeCls,\n      outdentCls,\n      xstyle,\n    ],\n    className,\n  ).className;\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      {...styleProps(\n        [\n          styles.iconBox,\n          styles.spinnerSlot,\n          iconPosition === 'end' && styles.spinnerSlotEnd,\n          loading && styles.spinnerSlotShow,\n        ],\n        classNames?.icon,\n        userStyles?.icon,\n      )}\n    >\n      <span {...stylex.props(styles.spinner)} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span {...styleProps(styles.iconBox, classNames?.icon, userStyles?.icon)}>\n        {resolveIconNode(icon)}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isInteractionDisabled\n    ? {}\n    : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isInteractionDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-busy={loading || undefined}\n        aria-disabled={isInteractionDisabled || undefined}\n        href={disabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isInteractionDisabled) {\n      e.preventDefault();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      aria-busy={loading || undefined}\n      aria-disabled={isInteractionDisabled || undefined}\n      className={composedClassName}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={handleButtonClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButtonImpl.displayName = 'BaseButton';\n\nexport { ButtonImpl };\n\nconst Button = ButtonImpl as <T extends ButtonType = 'default'>(\n  props: ButtonProps<T>,\n) => ReactElement;\n\nexport default Button;\n"],"mappings":"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"}

package/es/Button/style.d.mts

@@ -12,7 +12,7 @@ export declare const styles: Readonly<{
     readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
     readonly gap: stylex.StyleXClassNameFor<"gap", 6>;
     readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
-    readonly transition: stylex.StyleXClassNameFor<"transition", "color 160ms cubic-bezier(0.32, 0.72, 0, 1), background 160ms cubic-bezier(0.32, 0.72, 0, 1), border-color 160ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1)">;
+    readonly transition: stylex.StyleXClassNameFor<"transition", "color 160ms cubic-bezier(0.32, 0.72, 0, 1), background-color 160ms cubic-bezier(0.32, 0.72, 0, 1), background-image 160ms cubic-bezier(0.32, 0.72, 0, 1), border-color 160ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1)">;
     readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
     readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
     readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
@@ -105,6 +105,7 @@ export declare const styles: Readonly<{
   readonly variantDefault: Readonly<{
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
   readonly variantPrimary: Readonly<{
@@ -116,6 +117,7 @@ export declare const styles: Readonly<{
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
     readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "dashed">;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
   readonly variantFill: Readonly<{
@@ -137,6 +139,7 @@ export declare const styles: Readonly<{
   readonly dangerOutlined: Readonly<{
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", null>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
   readonly dangerSolid: Readonly<{
@@ -149,6 +152,10 @@ export declare const styles: Readonly<{
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
+  readonly dangerText: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+  }>;
   readonly dangerInline: Readonly<{
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;

package/es/Button/style.mjs

@@ -1,3 +1,4 @@
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import * as stylex from "@stylexjs/stylex";
 //#region src/Button/style.ts
 const buttonPaddingInline = {
@@ -5,6 +6,20 @@ const buttonPaddingInline = {
 	middle: 14,
 	small: 8
 };
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorText}${cssVar.colorBorder}`;
+`${cssVar.colorFillTertiary}${cssVar.colorFillTertiary}`;
+`${cssVar.colorFillSecondary}${cssVar.colorFillSecondary}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}${cssVar.colorBgContainer}`;
+`${cssVar.colorError}${cssVar.colorBgContainer}`;
 const styles = {
 	base: {
 		kVAM5u: "lbqnr5ac",
@@ -12,7 +27,7 @@ const styles = {
 		kMzoRj: "lbmkeg23",
 		kOIVth: "lb17d4w8g",
 		kybGjl: "lb1hl2dhg",
-		kmkexE: "lbz4dce",
+		kmkexE: "lb15xd0no",
 		kGNEyG: "lb6s0dn4",
 		kB7OPa: "lb9f619",
 		kkrTdU: "lb1ypdohk lb126qsmr",
@@ -120,9 +135,10 @@ const styles = {
 		$$css: true
 	},
 	variantDefault: {
-		kVAM5u: "lbqnr5ac lbnudtlt",
+		kVAM5u: "lbqnr5ac lbv4eugq",
 		kWkggS: "lb6yijhg",
-		kMwMTN: "lb66ogz0 lb10e6xak",
+		kKwaWg: "lb1hdlj1n lbx7ggy6",
+		kMwMTN: "lb66ogz0",
 		$$css: true
 	},
 	variantPrimary: {
@@ -132,10 +148,11 @@ const styles = {
 		$$css: true
 	},
 	variantDashed: {
-		kVAM5u: "lbqnr5ac lbnudtlt",
+		kVAM5u: "lbqnr5ac lbv4eugq",
 		ksu8eU: "lbbsl7fq",
 		kWkggS: "lb6yijhg",
-		kMwMTN: "lb66ogz0 lb10e6xak",
+		kKwaWg: "lb1hdlj1n lbx7ggy6",
+		kMwMTN: "lb66ogz0",
 		$$css: true
 	},
 	variantFill: {
@@ -158,25 +175,31 @@ const styles = {
 		$$css: true
 	},
 	dangerOutlined: {
-		kVAM5u: "lb11fhi00 lbh2h5hx",
-		kWkggS: "lb6yijhg",
-		kMwMTN: "lb12ap7uz lb158did2",
+		kVAM5u: "lb1mpi7gh lbs8cwth",
+		kWkggS: "lb1saschm lb6yijhg lbzxaxr6",
+		kKwaWg: null,
+		kMwMTN: "lb12ap7uz",
 		$$css: true
 	},
 	dangerSolid: {
-		kVAM5u: "lblxergw lb11fhi00 lb12cazn7 lb13cas3i",
-		kWkggS: "lb1v7zx8w lbixdnzb lb6w9gdg lb1qwfrtx",
+		kVAM5u: "lb1dvy257 lb11fhi00 lb2949mz lb1e5ynfq",
+		kWkggS: "lb15l4kc2 lbixdnzb lb1mog8ep lb1gj3nph",
 		kMwMTN: "lb15g0kca",
 		$$css: true
 	},
 	dangerFill: {
 		kVAM5u: "lb9r1u3d",
-		kWkggS: "lb1dm0l71 lb29nf4p lbt8c1aj",
-		kMwMTN: "lb1mergwt lb12ap7uz lb1iasuq3",
+		kWkggS: "lbrq8w1b lb1f2tfg0 lb1lf6bdk",
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	dangerText: {
+		kWkggS: "lb14kxky9 lbjbqb8w lb3lzv3l",
+		kMwMTN: "lb12ap7uz",
 		$$css: true
 	},
 	dangerInline: {
-		kMwMTN: "lb12ap7uz lb158did2",
+		kMwMTN: "lb12ap7uz lbcu7z5f",
 		$$css: true
 	},
 	ghostDefault: {
@@ -193,8 +216,8 @@ const styles = {
 	},
 	ghostDanger: {
 		kVAM5u: "lb9r1u3d",
-		kWkggS: "lb1qlulce lbjbqb8w lb5d67gy",
-		kMwMTN: "lb1mergwt lb12ap7uz lb1iasuq3",
+		kWkggS: "lb14kxky9 lbjbqb8w lb3lzv3l",
+		kMwMTN: "lb12ap7uz",
 		$$css: true
 	},
 	spinner: {
@@ -228,7 +251,7 @@ const splitStyles = {
 		$$css: true
 	},
 	solidDanger: {
-		"--lobe-split-button-fill": "lb18ie2v8 lb1ay50n1",
+		"--lobe-split-button-fill": "lb1g6lid4 lb14ldvf4",
 		$$css: true
 	},
 	item: {
@@ -256,8 +279,8 @@ const splitStyles = {
 		$$css: true
 	},
 	itemFillDanger: {
-		kVAM5u: "lb1n1lchj lb13cas3i",
-		kWkggS: "lb171v8l7 lb1qwfrtx",
+		kVAM5u: "lb1n1lchj lb1e5ynfq",
+		kWkggS: "lb171v8l7 lb1gj3nph",
 		$$css: true
 	},
 	itemFillGhost: {

package/es/Button/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Button/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nconst disabled = ':is(:disabled, [aria-disabled=\"true\"])';\nconst hover = ':hover:not(:disabled, [aria-disabled=\"true\"])';\nconst active = ':active:not(:disabled, [aria-disabled=\"true\"])';\nconst hoverIdle = ':hover:not(:active, :disabled, [aria-disabled=\"true\"])';\nconst hoverIdleClosed = ':hover:not(:active, :disabled, [aria-disabled=\"true\"], [data-popup-open])';\nconst popupOpen = ':is([data-popup-open])';\n\nconst spin = stylex.keyframes({\n  to: { transform: 'rotate(360deg)' },\n});\n\nconst ease = 'cubic-bezier(0.32, 0.72, 0, 1)';\nconst slotEase = 'cubic-bezier(0.22, 1, 0.36, 1)';\n\nexport const styles = stylex.create({\n  base: {\n    borderColor: cssVar.colorBorder,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    textDecoration: 'none',\n    transition: `color 160ms ${ease}, background 160ms ${ease}, border-color 160ms ${ease}, box-shadow 160ms ${ease}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    cursor: { default: 'pointer', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1,\n    opacity: { default: null, [disabled]: 0.5 },\n    pointerEvents: { default: null, [disabled]: 'none' },\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n\n  sizeSmall: {\n    '--button-padding-inline': `${buttonPaddingInline.small}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 12,\n    'height': 24,\n  },\n\n  sizeMiddle: {\n    '--button-padding-inline': `${buttonPaddingInline.middle}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 13,\n    'height': 32,\n  },\n\n  sizeLarge: {\n    '--button-padding-inline': `${buttonPaddingInline.large}px`,\n    'borderRadius': cssVar.borderRadius,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 14,\n    'height': 40,\n  },\n\n  outdentStart: {\n    marginInlineStart: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  outdentEnd: {\n    marginInlineEnd: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  shapeCircle: {\n    borderRadius: '50%',\n    paddingInline: 0,\n  },\n\n  shapeRound: {\n    borderRadius: 999,\n  },\n\n  block: {\n    width: '100%',\n  },\n\n  iconEnd: {\n    flexDirection: 'row-reverse',\n  },\n\n  iconOnlySmall: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 24,\n  },\n\n  iconOnlyMiddle: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 32,\n  },\n\n  iconOnlyLarge: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 40,\n  },\n\n  iconBox: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  spinnerSlot: {\n    overflow: 'hidden',\n    transition: `width 380ms ${slotEase}, margin 380ms ${slotEase}, opacity 260ms ${slotEase}`,\n    marginInlineEnd: -6,\n    opacity: 0,\n    width: 0,\n  },\n\n  spinnerSlotEnd: {\n    marginInlineEnd: 0,\n    marginInlineStart: -6,\n  },\n\n  spinnerSlotShow: {\n    marginInlineEnd: 0,\n    marginInlineStart: 0,\n    opacity: 1,\n    width: 12,\n  },\n\n  variantDefault: {\n    borderColor: { default: cssVar.colorBorder, [hover]: cssVar.colorPrimaryBorder },\n    backgroundColor: cssVar.colorBgContainer,\n    color: { default: cssVar.colorText, [hover]: cssVar.colorPrimaryText },\n  },\n\n  variantPrimary: {\n    borderColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  variantDashed: {\n    borderColor: { default: cssVar.colorBorder, [hover]: cssVar.colorPrimaryBorder },\n    borderStyle: 'dashed',\n    backgroundColor: cssVar.colorBgContainer,\n    color: { default: cssVar.colorText, [hover]: cssVar.colorPrimaryText },\n  },\n\n  variantFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: cssVar.colorFillTertiary,\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantText: {\n    borderColor: 'transparent',\n    backgroundColor: { default: 'transparent', [hover]: cssVar.colorFillSecondary },\n    color: cssVar.colorText,\n  },\n\n  variantLink: {\n    borderColor: 'transparent',\n    paddingInline: 0,\n    backgroundColor: 'transparent',\n    color: { default: cssVar.colorPrimary, [hover]: cssVar.colorPrimaryHover },\n  },\n\n  dangerOutlined: {\n    borderColor: { default: cssVar.colorError, [hover]: cssVar.colorErrorHover },\n    backgroundColor: cssVar.colorBgContainer,\n    color: { default: cssVar.colorError, [hover]: cssVar.colorErrorHover },\n  },\n\n  dangerSolid: {\n    borderColor: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: cssVar.colorErrorHover,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n    backgroundColor: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: cssVar.colorErrorHover,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  dangerFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorErrorBgHover,\n      default: cssVar.colorErrorBg,\n      [hover]: cssVar.colorErrorBgHover,\n    },\n    color: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdle]: cssVar.colorErrorHover,\n    },\n  },\n\n  dangerInline: {\n    color: { default: cssVar.colorError, [hover]: cssVar.colorErrorHover },\n  },\n\n  ghostDefault: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  ghostPrimary: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdle]: cssVar.colorPrimaryHover,\n    },\n  },\n\n  ghostDanger: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdle]: cssVar.colorErrorHover,\n    },\n  },\n\n  spinner: {\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 1.5,\n    animationDuration: '0.6s',\n    animationIterationCount: 'infinite',\n    animationName: spin,\n    animationTimingFunction: 'linear',\n    borderBlockStartColor: 'transparent',\n    display: 'inline-block',\n    height: 12,\n    width: 12,\n  },\n});\n\nconst hasHover = ':has(> :where(button, a):hover:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasActive = ':has(> :where(button, a):active:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasHoverOnly = `${hasHover}:not(${hasActive})`;\nconst first = ':first-of-type';\nconst last = ':last-of-type';\n\nexport const splitStyles = stylex.create({\n  root: {\n    display: 'inline-flex',\n    flexDirection: 'row',\n  },\n  interactionDisabled: {\n    opacity: 0.5,\n  },\n  solidPrimary: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: cssVar.colorPrimaryActive,\n      [hasHoverOnly]: cssVar.colorPrimaryHover,\n    },\n  },\n  solidDanger: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: cssVar.colorErrorActive,\n      [hasHoverOnly]: cssVar.colorErrorHover,\n    },\n  },\n  item: {\n    borderEndEndRadius: { default: null, [first]: 0 },\n    borderEndStartRadius: { default: null, [last]: 0 },\n    borderStartEndRadius: { default: null, [first]: 0 },\n    borderStartStartRadius: { default: null, [last]: 0 },\n    marginInlineStart: { default: null, [last]: -1 },\n  },\n  itemInteractionDisabled: {\n    opacity: { default: null, [disabled]: 1 },\n  },\n  itemSolid: {\n    // solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled)\n    'marginInlineStart': { default: null, [last]: 0 },\n    '::before': {\n      insetBlock: { default: null, [last]: 0 },\n      backgroundColor: { default: null, [last]: 'currentcolor' },\n      content: { default: null, [last]: \"''\" },\n      insetInlineStart: { default: null, [last]: 0 },\n      opacity: { default: null, [last]: 0.2 },\n      pointerEvents: { default: null, [last]: 'none' },\n      position: { default: null, [last]: 'absolute' },\n      width: { default: null, [last]: 1 },\n    },\n  },\n  itemFillDanger: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n  },\n  itemFillGhost: {\n    borderColor: 'var(--lobe-split-button-fill, transparent)',\n    backgroundColor: 'var(--lobe-split-button-fill, transparent)',\n  },\n  itemFillPrimary: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n  },\n});\n\nexport const buttonStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Button/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nconst disabled = ':is(:disabled, [aria-disabled=\"true\"])';\nconst hover = ':hover:not(:disabled, [aria-disabled=\"true\"])';\nconst active = ':active:not(:disabled, [aria-disabled=\"true\"])';\nconst hoverIdle = ':hover:not(:active, :disabled, [aria-disabled=\"true\"])';\nconst hoverIdleClosed = ':hover:not(:active, :disabled, [aria-disabled=\"true\"], [data-popup-open])';\nconst popupOpen = ':is([data-popup-open])';\n\nconst spin = stylex.keyframes({\n  to: { transform: 'rotate(360deg)' },\n});\n\nconst ease = 'cubic-bezier(0.32, 0.72, 0, 1)';\n\nconst errorHover = `color-mix(in srgb, ${cssVar.colorError} 88%, white)`;\nconst errorActive = `color-mix(in srgb, ${cssVar.colorError} 88%, black)`;\nconst borderHover = `color-mix(in srgb, ${cssVar.colorText} 8%, ${cssVar.colorBorder})`;\nconst neutralWash = `linear-gradient(${cssVar.colorFillTertiary}, ${cssVar.colorFillTertiary})`;\nconst neutralWashActive = `linear-gradient(${cssVar.colorFillSecondary}, ${cssVar.colorFillSecondary})`;\nconst error10 = `color-mix(in srgb, ${cssVar.colorError} 10%, transparent)`;\nconst error12 = `color-mix(in srgb, ${cssVar.colorError} 12%, transparent)`;\nconst error16 = `color-mix(in srgb, ${cssVar.colorError} 16%, transparent)`;\nconst error18 = `color-mix(in srgb, ${cssVar.colorError} 18%, transparent)`;\nconst error22 = `color-mix(in srgb, ${cssVar.colorError} 22%, transparent)`;\nconst error40 = `color-mix(in srgb, ${cssVar.colorError} 40%, transparent)`;\nconst error65 = `color-mix(in srgb, ${cssVar.colorError} 65%, transparent)`;\nconst errorOnContainer8 = `color-mix(in srgb, ${cssVar.colorError} 8%, ${cssVar.colorBgContainer})`;\nconst errorOnContainer14 = `color-mix(in srgb, ${cssVar.colorError} 14%, ${cssVar.colorBgContainer})`;\nconst slotEase = 'cubic-bezier(0.22, 1, 0.36, 1)';\n\nexport const styles = stylex.create({\n  base: {\n    borderColor: cssVar.colorBorder,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    textDecoration: 'none',\n    transition: `color 160ms ${ease}, background-color 160ms ${ease}, background-image 160ms ${ease}, border-color 160ms ${ease}, box-shadow 160ms ${ease}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    cursor: { default: 'pointer', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1,\n    opacity: { default: null, [disabled]: 0.5 },\n    pointerEvents: { default: null, [disabled]: 'none' },\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n\n  sizeSmall: {\n    '--button-padding-inline': `${buttonPaddingInline.small}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 12,\n    'height': 24,\n  },\n\n  sizeMiddle: {\n    '--button-padding-inline': `${buttonPaddingInline.middle}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 13,\n    'height': 32,\n  },\n\n  sizeLarge: {\n    '--button-padding-inline': `${buttonPaddingInline.large}px`,\n    'borderRadius': cssVar.borderRadius,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 14,\n    'height': 40,\n  },\n\n  outdentStart: {\n    marginInlineStart: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  outdentEnd: {\n    marginInlineEnd: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  shapeCircle: {\n    borderRadius: '50%',\n    paddingInline: 0,\n  },\n\n  shapeRound: {\n    borderRadius: 999,\n  },\n\n  block: {\n    width: '100%',\n  },\n\n  iconEnd: {\n    flexDirection: 'row-reverse',\n  },\n\n  iconOnlySmall: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 24,\n  },\n\n  iconOnlyMiddle: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 32,\n  },\n\n  iconOnlyLarge: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 40,\n  },\n\n  iconBox: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  spinnerSlot: {\n    overflow: 'hidden',\n    transition: `width 380ms ${slotEase}, margin 380ms ${slotEase}, opacity 260ms ${slotEase}`,\n    marginInlineEnd: -6,\n    opacity: 0,\n    width: 0,\n  },\n\n  spinnerSlotEnd: {\n    marginInlineEnd: 0,\n    marginInlineStart: -6,\n  },\n\n  spinnerSlotShow: {\n    marginInlineEnd: 0,\n    marginInlineStart: 0,\n    opacity: 1,\n    width: 12,\n  },\n\n  variantDefault: {\n    borderColor: { default: cssVar.colorBorder, [hover]: borderHover },\n    backgroundColor: cssVar.colorBgContainer,\n    backgroundImage: {\n      [active]: neutralWashActive,\n      default: null,\n      [hoverIdle]: neutralWash,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantPrimary: {\n    borderColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  variantDashed: {\n    borderColor: { default: cssVar.colorBorder, [hover]: borderHover },\n    borderStyle: 'dashed',\n    backgroundColor: cssVar.colorBgContainer,\n    backgroundImage: {\n      [active]: neutralWashActive,\n      default: null,\n      [hoverIdle]: neutralWash,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: cssVar.colorFillTertiary,\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantText: {\n    borderColor: 'transparent',\n    backgroundColor: { default: 'transparent', [hover]: cssVar.colorFillSecondary },\n    color: cssVar.colorText,\n  },\n\n  variantLink: {\n    borderColor: 'transparent',\n    paddingInline: 0,\n    backgroundColor: 'transparent',\n    color: { default: cssVar.colorPrimary, [hover]: cssVar.colorPrimaryHover },\n  },\n\n  dangerOutlined: {\n    borderColor: { default: error40, [hover]: error65 },\n    backgroundColor: {\n      [active]: errorOnContainer14,\n      default: cssVar.colorBgContainer,\n      [hoverIdle]: errorOnContainer8,\n    },\n    backgroundImage: null,\n    color: cssVar.colorError,\n  },\n\n  dangerSolid: {\n    borderColor: {\n      [active]: errorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: errorHover,\n      [popupOpen]: errorActive,\n    },\n    backgroundColor: {\n      [active]: errorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: errorHover,\n      [popupOpen]: errorActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  dangerFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: error22,\n      default: error12,\n      [hoverIdle]: error18,\n    },\n    color: cssVar.colorError,\n  },\n\n  dangerText: {\n    backgroundColor: {\n      [active]: error16,\n      default: 'transparent',\n      [hoverIdle]: error10,\n    },\n    color: cssVar.colorError,\n  },\n\n  dangerInline: {\n    color: { default: cssVar.colorError, [hover]: errorHover },\n  },\n\n  ghostDefault: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  ghostPrimary: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdle]: cssVar.colorPrimaryHover,\n    },\n  },\n\n  ghostDanger: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: error16,\n      default: 'transparent',\n      [hoverIdle]: error10,\n    },\n    color: cssVar.colorError,\n  },\n\n  spinner: {\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 1.5,\n    animationDuration: '0.6s',\n    animationIterationCount: 'infinite',\n    animationName: spin,\n    animationTimingFunction: 'linear',\n    borderBlockStartColor: 'transparent',\n    display: 'inline-block',\n    height: 12,\n    width: 12,\n  },\n});\n\nconst hasHover = ':has(> :where(button, a):hover:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasActive = ':has(> :where(button, a):active:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasHoverOnly = `${hasHover}:not(${hasActive})`;\nconst first = ':first-of-type';\nconst last = ':last-of-type';\n\nexport const splitStyles = stylex.create({\n  root: {\n    display: 'inline-flex',\n    flexDirection: 'row',\n  },\n  interactionDisabled: {\n    opacity: 0.5,\n  },\n  solidPrimary: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: cssVar.colorPrimaryActive,\n      [hasHoverOnly]: cssVar.colorPrimaryHover,\n    },\n  },\n  solidDanger: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: errorActive,\n      [hasHoverOnly]: errorHover,\n    },\n  },\n  item: {\n    borderEndEndRadius: { default: null, [first]: 0 },\n    borderEndStartRadius: { default: null, [last]: 0 },\n    borderStartEndRadius: { default: null, [first]: 0 },\n    borderStartStartRadius: { default: null, [last]: 0 },\n    marginInlineStart: { default: null, [last]: -1 },\n  },\n  itemInteractionDisabled: {\n    opacity: { default: null, [disabled]: 1 },\n  },\n  itemSolid: {\n    // solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled)\n    'marginInlineStart': { default: null, [last]: 0 },\n    '::before': {\n      insetBlock: { default: null, [last]: 0 },\n      backgroundColor: { default: null, [last]: 'currentcolor' },\n      content: { default: null, [last]: \"''\" },\n      insetInlineStart: { default: null, [last]: 0 },\n      opacity: { default: null, [last]: 0.2 },\n      pointerEvents: { default: null, [last]: 'none' },\n      position: { default: null, [last]: 'absolute' },\n      width: { default: null, [last]: 1 },\n    },\n  },\n  itemFillDanger: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: errorActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: errorActive,\n    },\n  },\n  itemFillGhost: {\n    borderColor: 'var(--lobe-split-button-fill, transparent)',\n    backgroundColor: 'var(--lobe-split-button-fill, transparent)',\n  },\n  itemFillPrimary: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n  },\n});\n\nexport const buttonStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":"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"}

package/es/Button/type.d.mts

@@ -50,4 +50,5 @@ type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Bas
 type NativeAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonOwnProps | 'type' | 'outdent'>;
 export type ButtonProps<T extends ButtonType = ButtonType> = BaseButtonOwnProps & NativeButtonProps & Partial<NativeAnchorProps> & TextOutdentProps<T>;
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Carousel/Carousel.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import { ActionIconImpl } from "../ActionIcon/ActionIcon.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { styles } from "./style.mjs";
 import { Children, createElement, isValidElement, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import useControlledState from "use-merge-value";
 //#region src/Carousel/Carousel.tsx
 const DEFAULT_INTERVAL = 5e3;
 const SWIPE_THRESHOLD = 40;

package/es/Carousel/Carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.mjs","names":["ActionIcon"],"sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { CarouselProps } from './type';\n\nconst DEFAULT_INTERVAL = 5000;\nconst SWIPE_THRESHOLD = 40;\nconst ARROW_SIZE = { blockSize: 28, borderRadius: '50%', size: 16 };\n\nconst Carousel = memo<CarouselProps>(\n  ({\n    adaptiveHeight = false,\n    arrows = false,\n    autoplay = false,\n    children,\n    className,\n    defaultIndex = 0,\n    dots = true,\n    index,\n    loop = true,\n    onIndexChange,\n    onPointerEnter,\n    onPointerLeave,\n    pauseOnHover = true,\n    ref,\n    ...rest\n  }) => {\n    const slides = Children.toArray(children);\n    const count = slides.length;\n    const keys = slides.map((slide, slideIndex) =>\n      isValidElement(slide) && slide.key !== null ? slide.key : slideIndex,\n    );\n    const [mergedIndex, setMergedIndex] = useControlledState(defaultIndex, {\n      onChange: onIndexChange,\n      value: index,\n    });\n    const current = Math.min(Math.max(mergedIndex, 0), Math.max(count - 1, 0));\n\n    const [hovered, setHovered] = useState(false);\n    const [height, setHeight] = useState<number>();\n    const slidesRef = useRef<(HTMLDivElement | null)[]>([]);\n    const swipeStartXRef = useRef<number | null>(null);\n\n    const goTo = useEventCallback((target: number) => {\n      if (count === 0) return;\n      const next = loop\n        ? ((target % count) + count) % count\n        : Math.min(Math.max(target, 0), count - 1);\n      if (next !== current) setMergedIndex(next);\n    });\n    const next = useEventCallback(() => goTo(current + 1));\n    const prev = useEventCallback(() => goTo(current - 1));\n\n    useImperativeHandle(ref, () => ({ goTo, next, prev }), [goTo, next, prev]);\n\n    const interval = autoplay === true ? DEFAULT_INTERVAL : autoplay || 0;\n    const paused = pauseOnHover && hovered;\n    const atEnd = !loop && current >= count - 1;\n\n    useEffect(() => {\n      if (!interval || paused || count < 2 || atEnd) return;\n      const timer = setTimeout(next, interval);\n      return () => clearTimeout(timer);\n    }, [interval, paused, count, atEnd, current, next]);\n\n    useLayoutEffect(() => {\n      const slide = slidesRef.current[current];\n      if (!adaptiveHeight || !slide) return;\n      setHeight(slide.offsetHeight);\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => setHeight(slide.offsetHeight));\n      observer.observe(slide);\n      return () => observer.disconnect();\n    }, [adaptiveHeight, current, count]);\n\n    return (\n      <div\n        aria-roledescription=\"carousel\"\n        className={styleProps(styles.root, className).className}\n        role=\"region\"\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          setHovered(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHovered(false);\n        }}\n        {...rest}\n      >\n        <div\n          {...stylex.props(styles.viewport)}\n          style={adaptiveHeight && height !== undefined ? { height } : undefined}\n          onPointerCancel={() => {\n            swipeStartXRef.current = null;\n          }}\n          onPointerDown={(event) => {\n            if (event.pointerType !== 'mouse') swipeStartXRef.current = event.clientX;\n          }}\n          onPointerUp={(event) => {\n            if (swipeStartXRef.current === null) return;\n            const delta = event.clientX - swipeStartXRef.current;\n            swipeStartXRef.current = null;\n            if (Math.abs(delta) < SWIPE_THRESHOLD) return;\n            if (delta < 0) next();\n            else prev();\n          }}\n        >\n          <div\n            aria-live={interval && !paused ? 'off' : 'polite'}\n            {...stylex.props(styles.track, adaptiveHeight && styles.trackAdaptive)}\n            style={{ transform: `translateX(-${current * 100}%)` }}\n          >\n            {slides.map((slide, slideIndex) => {\n              const active = slideIndex === current;\n              return (\n                <div\n                  aria-hidden={!active || undefined}\n                  aria-label={`${slideIndex + 1} of ${count}`}\n                  aria-roledescription=\"slide\"\n                  {...stylex.props(styles.slide)}\n                  inert={!active}\n                  key={keys[slideIndex]}\n                  role=\"group\"\n                  ref={(node) => {\n                    slidesRef.current[slideIndex] = node;\n                  }}\n                >\n                  {slide}\n                </div>\n              );\n            })}\n          </div>\n          {arrows && count > 1 && (\n            <>\n              <ActionIcon\n                aria-label=\"Previous slide\"\n                disabled={!loop && current === 0}\n                icon={ChevronLeft}\n                size={ARROW_SIZE}\n                style={{ insetInlineStart: 8 }}\n                xstyle={styles.arrow}\n                onClick={prev}\n              />\n              <ActionIcon\n                aria-label=\"Next slide\"\n                disabled={atEnd}\n                icon={ChevronRight}\n                size={ARROW_SIZE}\n                style={{ insetInlineEnd: 8 }}\n                xstyle={styles.arrow}\n                onClick={next}\n              />\n            </>\n          )}\n        </div>\n        {dots && count > 1 && (\n          <div {...stylex.props(styles.dots)}>\n            {slides.map((_, dotIndex) => (\n              <button\n                aria-current={dotIndex === current || undefined}\n                aria-label={`Go to slide ${dotIndex + 1}`}\n                {...stylex.props(styles.dot)}\n                key={keys[dotIndex]}\n                type=\"button\"\n                onClick={() => goTo(dotIndex)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.mjs","names":["ActionIcon"],"sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { CarouselProps } from './type';\n\nconst DEFAULT_INTERVAL = 5000;\nconst SWIPE_THRESHOLD = 40;\nconst ARROW_SIZE = { blockSize: 28, borderRadius: '50%', size: 16 };\n\nconst Carousel = memo<CarouselProps>(\n  ({\n    adaptiveHeight = false,\n    arrows = false,\n    autoplay = false,\n    children,\n    className,\n    defaultIndex = 0,\n    dots = true,\n    index,\n    loop = true,\n    onIndexChange,\n    onPointerEnter,\n    onPointerLeave,\n    pauseOnHover = true,\n    ref,\n    ...rest\n  }) => {\n    const slides = Children.toArray(children);\n    const count = slides.length;\n    const keys = slides.map((slide, slideIndex) =>\n      isValidElement(slide) && slide.key !== null ? slide.key : slideIndex,\n    );\n    const [mergedIndex, setMergedIndex] = useControlledState(defaultIndex, {\n      onChange: onIndexChange,\n      value: index,\n    });\n    const current = Math.min(Math.max(mergedIndex, 0), Math.max(count - 1, 0));\n\n    const [hovered, setHovered] = useState(false);\n    const [height, setHeight] = useState<number>();\n    const slidesRef = useRef<(HTMLDivElement | null)[]>([]);\n    const swipeStartXRef = useRef<number | null>(null);\n\n    const goTo = useEventCallback((target: number) => {\n      if (count === 0) return;\n      const next = loop\n        ? ((target % count) + count) % count\n        : Math.min(Math.max(target, 0), count - 1);\n      if (next !== current) setMergedIndex(next);\n    });\n    const next = useEventCallback(() => goTo(current + 1));\n    const prev = useEventCallback(() => goTo(current - 1));\n\n    useImperativeHandle(ref, () => ({ goTo, next, prev }), [goTo, next, prev]);\n\n    const interval = autoplay === true ? DEFAULT_INTERVAL : autoplay || 0;\n    const paused = pauseOnHover && hovered;\n    const atEnd = !loop && current >= count - 1;\n\n    useEffect(() => {\n      if (!interval || paused || count < 2 || atEnd) return;\n      const timer = setTimeout(next, interval);\n      return () => clearTimeout(timer);\n    }, [interval, paused, count, atEnd, current, next]);\n\n    useLayoutEffect(() => {\n      const slide = slidesRef.current[current];\n      if (!adaptiveHeight || !slide) return;\n      setHeight(slide.offsetHeight);\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => setHeight(slide.offsetHeight));\n      observer.observe(slide);\n      return () => observer.disconnect();\n    }, [adaptiveHeight, current, count]);\n\n    return (\n      <div\n        aria-roledescription=\"carousel\"\n        className={styleProps(styles.root, className).className}\n        role=\"region\"\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          setHovered(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHovered(false);\n        }}\n        {...rest}\n      >\n        <div\n          {...stylex.props(styles.viewport)}\n          style={adaptiveHeight && height !== undefined ? { height } : undefined}\n          onPointerCancel={() => {\n            swipeStartXRef.current = null;\n          }}\n          onPointerDown={(event) => {\n            if (event.pointerType !== 'mouse') swipeStartXRef.current = event.clientX;\n          }}\n          onPointerUp={(event) => {\n            if (swipeStartXRef.current === null) return;\n            const delta = event.clientX - swipeStartXRef.current;\n            swipeStartXRef.current = null;\n            if (Math.abs(delta) < SWIPE_THRESHOLD) return;\n            if (delta < 0) next();\n            else prev();\n          }}\n        >\n          <div\n            aria-live={interval && !paused ? 'off' : 'polite'}\n            {...stylex.props(styles.track, adaptiveHeight && styles.trackAdaptive)}\n            style={{ transform: `translateX(-${current * 100}%)` }}\n          >\n            {slides.map((slide, slideIndex) => {\n              const active = slideIndex === current;\n              return (\n                <div\n                  aria-hidden={!active || undefined}\n                  aria-label={`${slideIndex + 1} of ${count}`}\n                  aria-roledescription=\"slide\"\n                  {...stylex.props(styles.slide)}\n                  inert={!active}\n                  key={keys[slideIndex]}\n                  role=\"group\"\n                  ref={(node) => {\n                    slidesRef.current[slideIndex] = node;\n                  }}\n                >\n                  {slide}\n                </div>\n              );\n            })}\n          </div>\n          {arrows && count > 1 && (\n            <>\n              <ActionIcon\n                aria-label=\"Previous slide\"\n                disabled={!loop && current === 0}\n                icon={ChevronLeft}\n                size={ARROW_SIZE}\n                style={{ insetInlineStart: 8 }}\n                xstyle={styles.arrow}\n                onClick={prev}\n              />\n              <ActionIcon\n                aria-label=\"Next slide\"\n                disabled={atEnd}\n                icon={ChevronRight}\n                size={ARROW_SIZE}\n                style={{ insetInlineEnd: 8 }}\n                xstyle={styles.arrow}\n                onClick={next}\n              />\n            </>\n          )}\n        </div>\n        {dots && count > 1 && (\n          <div {...stylex.props(styles.dots)}>\n            {slides.map((_, dotIndex) => (\n              <button\n                aria-current={dotIndex === current || undefined}\n                aria-label={`Go to slide ${dotIndex + 1}`}\n                {...stylex.props(styles.dot)}\n                key={keys[dotIndex]}\n                type=\"button\"\n                onClick={() => goTo(dotIndex)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"mappings":"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"}

package/es/Checkbox/Checkbox.mjs

@@ -5,7 +5,7 @@ import Text from "../Text/Text.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { CheckIcon, Minus } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
@@ -24,7 +24,7 @@ const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, childre
 		indeterminate,
 		onCheckedChange: onChange,
 		...rest,
-		...styleProps([styles.root, focusRing.info], clsx(children ? classNames?.checkbox : className, classNames?.checkbox), boxStyle),
+		...styleProps([styles.root, focusRing.info], clsx$1(children ? classNames?.checkbox : className, classNames?.checkbox), boxStyle),
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			...stylex.props(styles.indicator),
 			children: indeterminate ? /* @__PURE__ */ jsx(Minus, {
@@ -40,7 +40,7 @@ const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, childre
 	});
 	if (!children) return box;
 	return /* @__PURE__ */ jsxs("label", {
-		...styleProps(styles.label, clsx(className, classNames?.wrapper), {
+		...styleProps(styles.label, clsx$1(className, classNames?.wrapper), {
 			gap: Math.floor(size / 2),
 			...style,
 			...customStyles?.wrapper

package/es/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Checkbox","BaseCheckbox"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport { type CSSProperties, memo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox = memo<CheckboxProps>(\n  ({\n    size = 16,\n    shape = 'square',\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    textProps,\n    onChange,\n    disabled,\n    indeterminate,\n    ...rest\n  }) => {\n    const boxStyle: CSSProperties = {\n      borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n      height: size,\n      width: size,\n      ...(backgroundColor ? { '--lobe-checkbox-bg': backgroundColor } : {}),\n      ...(children ? {} : style),\n      ...customStyles?.checkbox,\n    };\n\n    const box = (\n      <BaseCheckbox.Root\n        disabled={disabled}\n        indeterminate={indeterminate}\n        onCheckedChange={onChange}\n        {...rest}\n        {...styleProps(\n          [styles.root, focusRing.info],\n          clsx(children ? classNames?.checkbox : className, classNames?.checkbox),\n          boxStyle,\n        )}\n      >\n        <BaseCheckbox.Indicator {...stylex.props(styles.indicator)}>\n          {indeterminate ? (\n            <Minus\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          ) : (\n            <CheckIcon\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          )}\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n    );\n\n    if (!children) return box;\n\n    return (\n      <label\n        {...styleProps(styles.label, clsx(className, classNames?.wrapper), {\n          gap: Math.floor(size / 2),\n          ...style,\n          ...customStyles?.wrapper,\n        })}\n      >\n        {box}\n        <Text\n          as={'span'}\n          className={classNames?.text}\n          style={customStyles?.text}\n          {...textProps}\n          type={disabled ? 'secondary' : textProps?.type}\n        >\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Object.assign(Checkbox, { formBinding: { valueProp: 'checked' } as const });\n"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,aAAW,MAAqB,EACpC,OAAO,IACP,QAAQ,UACR,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,UACA,eACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EACpB,sBAAsB,gBACxB,IAAI,CAAC;EACL,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CACA,MAAM,MAAM,oBAACC,SAAa,MAAd;EAA6B;EAAyB;EAAe,iBAAiB;EAAU,GAAI;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,IAAI,GAAG,KAAK,WAAW,YAAY,WAAW,WAAW,YAAY,QAAQ,GAAG,QAAQ;EAC/O,UAAA,oBAACA,SAAa,WAAd;GAAwB,GAAI,OAAO,MAAM,OAAO,SAAS;GACtD,UAAA,gBAAgB,oBAAC,OAAD;IAAa;IAAM,aAAa;IAAG,OAAO,EAC7D,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA,IAAI,oBAAC,WAAD;IAAiB;IAAM,aAAa;IAAG,OAAO,EACpD,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA;EACsB,CAAA;CACP,CAAA;CACvB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,qBAAC,SAAD;EAAO,GAAI,WAAW,OAAO,OAAO,KAAK,WAAW,YAAY,OAAO,GAAG;GAC/E,KAAK,KAAK,MAAM,OAAO,CAAC;GACxB,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EAJM,UAAA,CAKA,KACD,oBAAC,MAAD;GAAM,IAAI;GAAQ,WAAW,YAAY;GAAM,OAAO,cAAc;GAAM,GAAI;GAAW,MAAM,WAAW,cAAc,WAAW;GAChI;EACG,CAAA,CACD;;AACb,CAAC;AACD,WAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAOD,YAAU,EACrC,aAAa,EACX,WAAW,UACb,EACF,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","BaseCheckbox","clsx"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport { type CSSProperties, memo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox = memo<CheckboxProps>(\n  ({\n    size = 16,\n    shape = 'square',\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    textProps,\n    onChange,\n    disabled,\n    indeterminate,\n    ...rest\n  }) => {\n    const boxStyle: CSSProperties = {\n      borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n      height: size,\n      width: size,\n      ...(backgroundColor ? { '--lobe-checkbox-bg': backgroundColor } : {}),\n      ...(children ? {} : style),\n      ...customStyles?.checkbox,\n    };\n\n    const box = (\n      <BaseCheckbox.Root\n        disabled={disabled}\n        indeterminate={indeterminate}\n        onCheckedChange={onChange}\n        {...rest}\n        {...styleProps(\n          [styles.root, focusRing.info],\n          clsx(children ? classNames?.checkbox : className, classNames?.checkbox),\n          boxStyle,\n        )}\n      >\n        <BaseCheckbox.Indicator {...stylex.props(styles.indicator)}>\n          {indeterminate ? (\n            <Minus\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          ) : (\n            <CheckIcon\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          )}\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n    );\n\n    if (!children) return box;\n\n    return (\n      <label\n        {...styleProps(styles.label, clsx(className, classNames?.wrapper), {\n          gap: Math.floor(size / 2),\n          ...style,\n          ...customStyles?.wrapper,\n        })}\n      >\n        {box}\n        <Text\n          as={'span'}\n          className={classNames?.text}\n          style={customStyles?.text}\n          {...textProps}\n          type={disabled ? 'secondary' : textProps?.type}\n        >\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Object.assign(Checkbox, { formBinding: { valueProp: 'checked' } as const });\n"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,aAAW,MAAqB,EACpC,OAAO,IACP,QAAQ,UACR,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,UACA,eACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EACpB,sBAAsB,gBACxB,IAAI,CAAC;EACL,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CACA,MAAM,MAAM,oBAACC,SAAa,MAAd;EAA6B;EAAyB;EAAe,iBAAiB;EAAU,GAAI;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,IAAI,GAAGC,OAAK,WAAW,YAAY,WAAW,WAAW,YAAY,QAAQ,GAAG,QAAQ;EAC/O,UAAA,oBAACD,SAAa,WAAd;GAAwB,GAAI,OAAO,MAAM,OAAO,SAAS;GACtD,UAAA,gBAAgB,oBAAC,OAAD;IAAa;IAAM,aAAa;IAAG,OAAO,EAC7D,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA,IAAI,oBAAC,WAAD;IAAiB;IAAM,aAAa;IAAG,OAAO,EACpD,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA;EACsB,CAAA;CACP,CAAA;CACvB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,qBAAC,SAAD;EAAO,GAAI,WAAW,OAAO,OAAOC,OAAK,WAAW,YAAY,OAAO,GAAG;GAC/E,KAAK,KAAK,MAAM,OAAO,CAAC;GACxB,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EAJM,UAAA,CAKA,KACD,oBAAC,MAAD;GAAM,IAAI;GAAQ,WAAW,YAAY;GAAM,OAAO,cAAc;GAAM,GAAI;GAAW,MAAM,WAAW,cAAc,WAAW;GAChI;EACG,CAAA,CACD;;AACb,CAAC;AACD,WAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAOF,YAAU,EACrC,aAAa,EACX,WAAW,UACb,EACF,CAAC"}

package/es/Checkbox/type.d.mts

@@ -49,4 +49,5 @@ export interface CheckboxGroupProps extends BaseCheckboxGroupProps, Pick<Flexbox
   textProps?: CheckboxProps['textProps'];
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/CodeDiff/CodeDiff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDiff.mjs","names":[],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { CodeDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"code-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,IAAI;CACtC,MAAM,WAAW,WAAW,MAAM,IAAI;CAEtC,MAAM,SAAS,IAAI,IAAI,QAAQ;CAC/B,MAAM,SAAS,IAAI,IAAI,QAAQ;CAE/B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,UAAU,GAChD,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAY;CAAU,CAAC;CAE1C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAAC,eAAD;GAAwB;GAAkB;GAAkB;EAAU,CAAA;EACjE;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"CodeDiff.mjs","names":[],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { CodeDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string, undefined>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"code-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,IAAI;CACtC,MAAM,WAAW,WAAW,MAAM,IAAI;CAEtC,MAAM,SAAS,IAAI,IAAI,QAAQ;CAC/B,MAAM,SAAS,IAAI,IAAI,QAAQ;CAE/B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,UAAU,GAChD,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAY;CAAU,CAAC;CAE1C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAAC,eAAD;GAAwB;GAAkB;GAAkB;EAAU,CAAA;EACjE;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

package/es/CodeDiff/DiffPanel.mjs

@@ -9,7 +9,7 @@ import { stopPropagation } from "../utils/dom.mjs";
 import { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from "./style.mjs";
 import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/CodeDiff/DiffPanel.tsx
@@ -23,7 +23,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 		"data-code-type": dataCodeType,
 		width: "100%",
 		...rest,
-		...styleProps(rootStyles, clsx(prefix, className), rest.style),
+		...styleProps(rootStyles, clsx$1(prefix, className), rest.style),
 		children: [
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
@@ -47,7 +47,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 		"data-code-type": dataCodeType,
 		width: "100%",
 		...rest,
-		...styleProps(rootStyles, clsx(prefix, className), rest.style),
+		...styleProps(rootStyles, clsx$1(prefix, className), rest.style),
 		children: [showHeader && /* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
@@ -116,7 +116,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 				!expand && styles.bodyCollapsed,
 				styles.body,
 				showHeader && variant !== "borderless" && styles.bodyDivider
-			], clsx(`${prefix}-body`, classNames?.body), customStyles?.body),
+			], clsx$1(`${prefix}-body`, classNames?.body), customStyles?.body),
 			children: body
 		})]
 	});