@jinmi/ui 0.0.0-stage → 6.0.1

package/es/Accordion/AccordionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.mjs","names":["Flexbox"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { AnimatePresence } from 'motion/react';\r\nimport {\r\n  type ComponentPropsWithoutRef,\r\n  type CSSProperties,\r\n  type KeyboardEvent,\r\n  memo,\r\n  type ReactNode,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n} from 'react';\r\nimport useMergeState from 'use-merge-value';\r\n\r\nimport Block from '@/Block';\r\nimport { Flexbox } from '@/Flex';\r\nimport { type MotionComponentType, useMotionComponent } from '@/MotionProvider';\r\nimport Text from '@/Text';\r\nimport { stopPropagation } from '@/utils/dom';\r\n\r\nimport ArrowIcon from './ArrowIcon';\r\nimport { useAccordionConfig, useAccordionItemState } from './context';\r\nimport { styles } from './style';\r\nimport { type AccordionItemProps } from './type';\r\n\r\ntype AccordionContentBaseProps = {\r\n  children?: ReactNode;\r\n  className?: string;\r\n  contentInnerClassName: string;\r\n  style?: CSSProperties;\r\n};\r\n\r\ntype AccordionStaticContentProps = AccordionContentBaseProps & {\r\n  isOpen: boolean;\r\n  keepContentMounted: boolean;\r\n};\r\n\r\ntype MotionDivProps = ComponentPropsWithoutRef<MotionComponentType['div']>;\r\n\r\ntype AccordionMotionContentProps = AccordionContentBaseProps & {\r\n  contextMotionProps?: MotionDivProps;\r\n  isOpen: boolean;\r\n  skipInitialAnimation: boolean;\r\n};\r\n\r\ntype AccordionItemContentProps = AccordionContentBaseProps & {\r\n  contextMotionProps?: MotionDivProps;\r\n  disableAnimation: boolean;\r\n  isOpen: boolean;\r\n  keepContentMounted: boolean;\r\n  skipInitialAnimation: boolean;\r\n};\r\n\r\nconst motionContainerStyle: CSSProperties = { overflow: 'hidden' };\r\n\r\nconst AccordionStaticContent = memo<AccordionStaticContentProps>(\r\n  ({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {\r\n    if (keepContentMounted) {\r\n      return (\r\n        <div\r\n          className={className}\r\n          role=\"region\"\r\n          style={{\r\n            display: isOpen ? 'block' : 'none',\r\n            ...style,\r\n          }}\r\n        >\r\n          <div className={contentInnerClassName}>{children}</div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (!isOpen) return null;\r\n\r\n    return (\r\n      <div className={className} role=\"region\" style={style}>\r\n        <div className={contentInnerClassName}>{children}</div>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nAccordionStaticContent.displayName = 'AccordionStaticContent';\r\n\r\nconst AccordionMotionContent = memo<AccordionMotionContentProps>(\r\n  ({\r\n    contextMotionProps,\r\n    className,\r\n    style,\r\n    children,\r\n    contentInnerClassName,\r\n    isOpen,\r\n    skipInitialAnimation,\r\n  }) => {\r\n    const Motion = useMotionComponent();\r\n\r\n    const motionProps = useMemo(\r\n      () => ({\r\n        animate: 'enter',\r\n        exit: 'exit',\r\n        initial: skipInitialAnimation ? false : 'exit',\r\n        variants: {\r\n          enter: {\r\n            height: 'auto',\r\n            opacity: 1,\r\n            transition: {\r\n              duration: 0.2,\r\n              ease: [0.4, 0, 0.2, 1],\r\n            },\r\n          },\r\n          exit: {\r\n            height: 0,\r\n            opacity: 0,\r\n            transition: {\r\n              duration: 0.2,\r\n              ease: [0.4, 0, 0.2, 1],\r\n            },\r\n          },\r\n        },\r\n        ...contextMotionProps,\r\n      }),\r\n      [contextMotionProps, skipInitialAnimation],\r\n    );\r\n\r\n    return (\r\n      <AnimatePresence initial={false}>\r\n        {isOpen ? (\r\n          <Motion.div {...(motionProps as any)} style={motionContainerStyle}>\r\n            <div className={className} role=\"region\" style={style}>\r\n              <div className={contentInnerClassName}>{children}</div>\r\n            </div>\r\n          </Motion.div>\r\n        ) : null}\r\n      </AnimatePresence>\r\n    );\r\n  },\r\n);\r\n\r\nAccordionMotionContent.displayName = 'AccordionMotionContent';\r\n\r\nconst AccordionItemContent = memo<AccordionItemContentProps>(\r\n  ({\r\n    disableAnimation,\r\n    isOpen,\r\n    keepContentMounted,\r\n    className,\r\n    style,\r\n    children,\r\n    contentInnerClassName,\r\n    contextMotionProps,\r\n    skipInitialAnimation,\r\n  }) => {\r\n    if (disableAnimation || !keepContentMounted) {\r\n      return (\r\n        <AccordionStaticContent\r\n          className={className}\r\n          contentInnerClassName={contentInnerClassName}\r\n          isOpen={isOpen}\r\n          keepContentMounted={keepContentMounted}\r\n          style={style}\r\n        >\r\n          {children}\r\n        </AccordionStaticContent>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <AccordionMotionContent\r\n        className={className}\r\n        contentInnerClassName={contentInnerClassName}\r\n        contextMotionProps={contextMotionProps}\r\n        isOpen={isOpen}\r\n        skipInitialAnimation={skipInitialAnimation}\r\n        style={style}\r\n      >\r\n        {children}\r\n      </AccordionMotionContent>\r\n    );\r\n  },\r\n);\r\n\r\nAccordionItemContent.displayName = 'AccordionItemContent';\r\n\r\nconst AccordionItem = memo<AccordionItemProps>(\r\n  ({\r\n    itemKey,\r\n    title,\r\n    children,\r\n    action,\r\n    alwaysShowAction = false,\r\n    disabled = false,\r\n    allowExpand = true,\r\n    hideIndicator: itemHideIndicator,\r\n    indicatorPlacement: itemIndicatorPlacement,\r\n    indicator: customIndicator,\r\n    classNames,\r\n    paddingInline = 16,\r\n    paddingBlock = 8,\r\n    padding,\r\n    ref,\r\n    variant: customVariant,\r\n    styles: customStyles,\r\n    headerWrapper,\r\n    defaultExpand,\r\n    expand,\r\n    onExpandChange,\r\n  }) => {\r\n    // Per-item state context: only this item's provider re-emits when its\r\n    // own isOpen flips, so siblings stay stable across toggles.\r\n    const itemStateContext = useAccordionItemState();\r\n    const configContext = useAccordionConfig();\r\n\r\n    // Determine if using standalone mode (has expand or defaultExpand props)\r\n    const isStandalone = expand !== undefined || defaultExpand !== undefined;\r\n\r\n    // Standalone state management\r\n    const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState<boolean>(\r\n      defaultExpand ?? false,\r\n      {\r\n        onChange: onExpandChange,\r\n        value: expand,\r\n      },\r\n    );\r\n\r\n    const contextHideIndicator = configContext?.hideIndicator;\r\n    const contextIndicatorPlacement = configContext?.indicatorPlacement;\r\n    const contextKeepContentMounted = configContext?.keepContentMounted;\r\n    const contextDisableAnimation = configContext?.disableAnimation;\r\n    const contextMotionProps = configContext?.motionProps;\r\n    const contextVariant = configContext?.variant ?? 'borderless';\r\n\r\n    const isInitialRenderRef = useRef(true);\r\n\r\n    useEffect(() => {\r\n      isInitialRenderRef.current = false;\r\n    }, []);\r\n\r\n    const isDirectContextItem = itemStateContext?.itemKey === itemKey;\r\n\r\n    // Determine expanded state\r\n    let isOpen = false;\r\n    if (isStandalone) {\r\n      isOpen = isExpandedStandalone;\r\n    } else if (itemStateContext) {\r\n      isOpen = isDirectContextItem\r\n        ? itemStateContext.isOpen\r\n        : itemStateContext.isOpen || itemStateContext.isOpenKey(itemKey);\r\n    }\r\n\r\n    // Determine other props with fallbacks\r\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\r\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\r\n    const keepContentMounted = contextKeepContentMounted ?? true;\r\n    const disableAnimation = contextDisableAnimation ?? false;\r\n    const variant = customVariant || contextVariant;\r\n\r\n    const contextOnToggle = useCallback(() => {\r\n      if (!itemStateContext) return;\r\n      if (itemStateContext.itemKey === itemKey) {\r\n        itemStateContext.onToggle();\r\n        return;\r\n      }\r\n      itemStateContext.onToggleNestedKey(itemKey);\r\n    }, [itemStateContext, itemKey]);\r\n\r\n    const handleToggle = useCallback(() => {\r\n      // If allowExpand is false, only allow controlled expansion via expand prop\r\n      if (!allowExpand) return;\r\n\r\n      if (!disabled) {\r\n        if (isStandalone) {\r\n          setIsExpandedStandalone(!isExpandedStandalone);\r\n        } else if (contextOnToggle) {\r\n          contextOnToggle();\r\n        }\r\n      }\r\n    }, [\r\n      allowExpand,\r\n      disabled,\r\n      isStandalone,\r\n      setIsExpandedStandalone,\r\n      isExpandedStandalone,\r\n      contextOnToggle,\r\n    ]);\r\n\r\n    const handleKeyDown = useCallback(\r\n      (e: KeyboardEvent) => {\r\n        // If allowExpand is false, disable keyboard toggle\r\n        if (!allowExpand || disabled) return;\r\n\r\n        switch (e.key) {\r\n          case 'Enter':\r\n          case ' ': {\r\n            e.preventDefault();\r\n            handleToggle();\r\n            break;\r\n          }\r\n        }\r\n      },\r\n      [allowExpand, disabled, handleToggle],\r\n    );\r\n\r\n    const preventTitleTextSelection = useCallback((e: any) => {\r\n      // Prevent browser from creating a selection range on double/multi click,\r\n      // which can accidentally select the content region.\r\n      if (e?.detail > 1) e.preventDefault();\r\n    }, []);\r\n\r\n    // Build indicator\r\n    const indicator = useMemo(() => {\r\n      if (!allowExpand || hideIndicatorFinal) return null;\r\n\r\n      if (customIndicator) {\r\n        if (typeof customIndicator === 'function') {\r\n          return (\r\n            <span\r\n              aria-hidden=\"true\"\r\n              className={cx(styles.indicator, classNames?.indicator)}\r\n              style={customStyles?.indicator}\r\n            >\r\n              {customIndicator({ isDisabled: disabled, isOpen })}\r\n            </span>\r\n          );\r\n        }\r\n        return (\r\n          <span\r\n            aria-hidden=\"true\"\r\n            className={cx(styles.indicator, classNames?.indicator)}\r\n            style={customStyles?.indicator}\r\n          >\r\n            {customIndicator}\r\n          </span>\r\n        );\r\n      }\r\n\r\n      return (\r\n        <span\r\n          aria-hidden=\"true\"\r\n          className={cx(styles.indicator, classNames?.indicator)}\r\n          style={customStyles?.indicator}\r\n        >\r\n          <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\r\n        </span>\r\n      );\r\n    }, [\r\n      allowExpand,\r\n      hideIndicatorFinal,\r\n      customIndicator,\r\n      disabled,\r\n      isOpen,\r\n      classNames,\r\n      customStyles,\r\n    ]);\r\n\r\n    const skipInitialAnimation = isInitialRenderRef.current && isOpen;\r\n\r\n    const contentClassName = useMemo(\r\n      () => cx('accordion-content', styles.content, classNames?.content),\r\n      [classNames?.content],\r\n    );\r\n\r\n    const titleNode = useMemo(\r\n      () =>\r\n        typeof title === 'string' ? (\r\n          <Text ellipsis className={classNames?.title} style={customStyles?.title}>\r\n            {title}\r\n          </Text>\r\n        ) : (\r\n          title\r\n        ),\r\n      [title, classNames?.title, customStyles?.title],\r\n    );\r\n\r\n    const actionNode = useMemo(\r\n      () =>\r\n        action && (\r\n          <Flexbox\r\n            horizontal\r\n            align={'center'}\r\n            flex={'none'}\r\n            gap={4}\r\n            style={customStyles?.action}\r\n            className={cx(\r\n              'accordion-action',\r\n              styles.action,\r\n              alwaysShowAction && styles.actionVisible,\r\n              classNames?.action,\r\n            )}\r\n            onClick={stopPropagation}\r\n          >\r\n            {action}\r\n          </Flexbox>\r\n        ),\r\n      [action, alwaysShowAction, classNames?.action, customStyles?.action],\r\n    );\r\n\r\n    const headerElement = useMemo(() => {\r\n      const header = (\r\n        <Block\r\n          horizontal\r\n          className={cx('accordion-header', styles.header, classNames?.header)}\r\n          clickable={!disabled && allowExpand}\r\n          gap={4}\r\n          justify={'space-between'}\r\n          padding={padding}\r\n          paddingBlock={paddingBlock}\r\n          paddingInline={paddingInline}\r\n          ref={ref}\r\n          variant={customVariant || variant}\r\n          style={{\r\n            alignItems: 'center',\r\n            cursor: disabled ? 'not-allowed' : allowExpand ? 'pointer' : 'default',\r\n            opacity: disabled ? 0.5 : undefined,\r\n            overflow: 'hidden',\r\n            width: '100%',\r\n            ...customStyles?.header,\r\n          }}\r\n          onClick={handleToggle}\r\n          onKeyDown={handleKeyDown}\r\n        >\r\n          {indicatorPlacementFinal === 'start' ? (\r\n            <>\r\n              <Flexbox\r\n                horizontal\r\n                align={'center'}\r\n                className={styles.titleWrapper}\r\n                flex={1}\r\n                gap={2}\r\n                style={{\r\n                  overflow: 'hidden',\r\n                }}\r\n                onDoubleClick={preventTitleTextSelection}\r\n                onMouseDown={preventTitleTextSelection}\r\n              >\r\n                {titleNode}\r\n                {indicator}\r\n              </Flexbox>\r\n              <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\r\n                {actionNode}\r\n              </Flexbox>\r\n            </>\r\n          ) : (\r\n            <>\r\n              <Flexbox\r\n                horizontal\r\n                align={'center'}\r\n                className={styles.titleWrapper}\r\n                flex={1}\r\n                gap={2}\r\n                style={{\r\n                  overflow: 'hidden',\r\n                }}\r\n                onDoubleClick={preventTitleTextSelection}\r\n                onMouseDown={preventTitleTextSelection}\r\n              >\r\n                {titleNode}\r\n              </Flexbox>\r\n              <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\r\n                {actionNode}\r\n                {indicator}\r\n              </Flexbox>\r\n            </>\r\n          )}\r\n        </Block>\r\n      );\r\n      if (headerWrapper) {\r\n        return headerWrapper(header);\r\n      }\r\n      return header;\r\n    }, [\r\n      classNames?.header,\r\n      disabled,\r\n      allowExpand,\r\n      padding,\r\n      paddingBlock,\r\n      paddingInline,\r\n      ref,\r\n      customVariant,\r\n      variant,\r\n      customStyles?.header,\r\n      handleToggle,\r\n      handleKeyDown,\r\n      indicatorPlacementFinal,\r\n      preventTitleTextSelection,\r\n      titleNode,\r\n      indicator,\r\n      actionNode,\r\n      headerWrapper,\r\n    ]);\r\n\r\n    return (\r\n      <div\r\n        className={cx('accordion-item', styles.item, classNames?.base)}\r\n        style={customStyles?.base}\r\n      >\r\n        {headerElement}\r\n        <AccordionItemContent\r\n          className={contentClassName}\r\n          contentInnerClassName={styles.contentInner}\r\n          contextMotionProps={contextMotionProps}\r\n          disableAnimation={!!disableAnimation}\r\n          isOpen={isOpen}\r\n          keepContentMounted={!!keepContentMounted}\r\n          skipInitialAnimation={skipInitialAnimation}\r\n          style={customStyles?.content}\r\n        >\r\n          {children}\r\n        </AccordionItemContent>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nAccordionItem.displayName = 'AccordionItem';\r\n\r\nexport default AccordionItem;\r\n"],"mappings":"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"}

package/es/Accordion/ArrowIcon.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Accordion/ArrowIcon.tsx
+const ArrowIcon = memo(({ size = "1em", style, ...rest }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		height: size,
+		style: {
+			flex: "none",
+			lineHeight: 1,
+			...style
+		},
+		viewBox: "0 0 16 16",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: /* @__PURE__ */ jsx("path", { d: "M7.002 10.624a.5.5 0 01-.752-.432V5.808a.5.5 0 01.752-.432l3.758 2.192a.5.5 0 010 .864l-3.758 2.192z" })
+	});
+});
+//#endregion
+export { ArrowIcon as default };
+
+//# sourceMappingURL=ArrowIcon.mjs.map

package/es/Accordion/ArrowIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowIcon.mjs","names":[],"sources":["../../src/Accordion/ArrowIcon.tsx"],"sourcesContent":["'use client';\r\n\r\nimport type { IconType } from '@lobehub/icons';\r\nimport { memo } from 'react';\r\n\r\nconst ArrowIcon: IconType = memo(({ size = '1em', style, ...rest }) => {\r\n  return (\r\n    <svg\r\n      fill=\"currentColor\"\r\n      fillRule=\"evenodd\"\r\n      height={size}\r\n      style={{ flex: 'none', lineHeight: 1, ...style }}\r\n      viewBox=\"0 0 16 16\"\r\n      width={size}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...rest}\r\n    >\r\n      <path d=\"M7.002 10.624a.5.5 0 01-.752-.432V5.808a.5.5 0 01.752-.432l3.758 2.192a.5.5 0 010 .864l-3.758 2.192z\" />\r\n    </svg>\r\n  );\r\n});\r\n\r\nexport default ArrowIcon;\r\n"],"mappings":";;;;AAKA,MAAM,YAAsB,MAAM,EAAE,OAAO,OAAO,OAAO,GAAG,WAAW;CACrE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,UAAS;EACT,QAAQ;EACR,OAAO;GAAE,MAAM;GAAQ,YAAY;GAAG,GAAG;EAAM;EAC/C,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;EAEJ,UAAA,oBAAC,QAAD,EAAM,GAAE,uGAAwG,CAAA;CAC7G,CAAA;AAET,CAAC"}

package/es/Accordion/context.mjs

@@ -0,0 +1,43 @@
+import { createContext, memo, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Accordion/context.tsx
+/**
+* Per-item context: each AccordionItem gets its own provider, so a toggle
+* only invalidates the value seen by that single item. Sibling items keep
+* the same context value identity and skip re-render.
+*/
+const AccordionItemStateContext = createContext(null);
+/**
+* Static config shared by all items. Identity changes only when the user
+* changes config props on <Accordion>, which is rare.
+*/
+const AccordionConfigContext = createContext(null);
+const useAccordionItemState = () => use(AccordionItemStateContext);
+const useAccordionConfig = () => use(AccordionConfigContext);
+const AccordionItemStateProvider = memo(({ children, expandedKeys, isOpenKey, isOpen, itemKey, onToggleKey, onToggleKeys, preferProviderKeyForNestedItems }) => {
+	const value = useMemo(() => ({
+		isOpenKey,
+		isOpen,
+		itemKey,
+		onToggle: () => onToggleKey(itemKey),
+		onToggleKey,
+		onToggleNestedKey: (key) => onToggleKeys([itemKey, key], preferProviderKeyForNestedItems ? itemKey : key)
+	}), [
+		expandedKeys,
+		isOpenKey,
+		isOpen,
+		itemKey,
+		onToggleKey,
+		onToggleKeys,
+		preferProviderKeyForNestedItems
+	]);
+	return /* @__PURE__ */ jsx(AccordionItemStateContext, {
+		value,
+		children
+	});
+});
+AccordionItemStateProvider.displayName = "AccordionItemStateProvider";
+//#endregion
+export { AccordionConfigContext, AccordionItemStateContext, AccordionItemStateProvider, useAccordionConfig, useAccordionItemState };
+
+//# sourceMappingURL=context.mjs.map

package/es/Accordion/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Accordion/context.tsx"],"sourcesContent":["import type { Key, ReactNode } from 'react';\r\nimport { createContext, memo, use, useMemo } from 'react';\r\n\r\ninterface AccordionItemStateValue {\r\n  isOpen: boolean;\r\n  isOpenKey: (key: Key) => boolean;\r\n  itemKey: Key;\r\n  onToggle: () => void;\r\n  onToggleKey: (key: Key) => void;\r\n  onToggleNestedKey: (key: Key) => void;\r\n}\r\n\r\ninterface AccordionConfigValue {\r\n  disableAnimation?: boolean;\r\n  hideIndicator?: boolean;\r\n  indicatorPlacement?: 'end' | 'start';\r\n  keepContentMounted?: boolean;\r\n  motionProps?: any;\r\n  showDivider?: boolean;\r\n  variant?: 'filled' | 'outlined' | 'borderless';\r\n}\r\n\r\n/**\r\n * Per-item context: each AccordionItem gets its own provider, so a toggle\r\n * only invalidates the value seen by that single item. Sibling items keep\r\n * the same context value identity and skip re-render.\r\n */\r\nexport const AccordionItemStateContext = createContext<AccordionItemStateValue | null>(null);\r\n\r\n/**\r\n * Static config shared by all items. Identity changes only when the user\r\n * changes config props on <Accordion>, which is rare.\r\n */\r\nexport const AccordionConfigContext = createContext<AccordionConfigValue | null>(null);\r\n\r\nexport const useAccordionItemState = () => use(AccordionItemStateContext);\r\nexport const useAccordionConfig = () => use(AccordionConfigContext);\r\n\r\ninterface AccordionItemStateProviderProps {\r\n  children: ReactNode;\r\n  // Used only to refresh the memoized context for wrapper children when\r\n  // controlled expanded keys change; direct children use `isOpen`.\r\n  expandedKeys?: Key[];\r\n  isOpen: boolean;\r\n  isOpenKey: (key: Key) => boolean;\r\n  itemKey: Key;\r\n  onToggleKey: (key: Key) => void;\r\n  onToggleKeys: (keys: Key[], preferredKey: Key) => void;\r\n  preferProviderKeyForNestedItems: boolean;\r\n}\r\n\r\nexport const AccordionItemStateProvider = memo<AccordionItemStateProviderProps>(\r\n  ({\r\n    children,\r\n    expandedKeys,\r\n    isOpenKey,\r\n    isOpen,\r\n    itemKey,\r\n    onToggleKey,\r\n    onToggleKeys,\r\n    preferProviderKeyForNestedItems,\r\n  }) => {\r\n    const value = useMemo(\r\n      () => ({\r\n        isOpenKey,\r\n        isOpen,\r\n        itemKey,\r\n        onToggle: () => onToggleKey(itemKey),\r\n        onToggleKey,\r\n        onToggleNestedKey: (key: Key) =>\r\n          onToggleKeys([itemKey, key], preferProviderKeyForNestedItems ? itemKey : key),\r\n      }),\r\n      [\r\n        expandedKeys,\r\n        isOpenKey,\r\n        isOpen,\r\n        itemKey,\r\n        onToggleKey,\r\n        onToggleKeys,\r\n        preferProviderKeyForNestedItems,\r\n      ],\r\n    );\r\n    return <AccordionItemStateContext value={value}>{children}</AccordionItemStateContext>;\r\n  },\r\n);\r\n\r\nAccordionItemStateProvider.displayName = 'AccordionItemStateProvider';\r\n"],"mappings":";;;;;;;;AA2BA,MAAa,4BAA4B,cAA8C,IAAI;;;;;AAM3F,MAAa,yBAAyB,cAA2C,IAAI;AAErF,MAAa,8BAA8B,IAAI,yBAAyB;AACxE,MAAa,2BAA2B,IAAI,sBAAsB;AAelE,MAAa,6BAA6B,MACvC,EACC,UACA,cACA,WACA,QACA,SACA,aACA,cACA,sCACI;CACJ,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA,gBAAgB,YAAY,OAAO;EACnC;EACA,oBAAoB,QAClB,aAAa,CAAC,SAAS,GAAG,GAAG,kCAAkC,UAAU,GAAG;CAChF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CACA,OAAO,oBAAC,2BAAD;EAAkC;EAAQ;CAAoC,CAAA;AACvF,CACF;AAEA,2BAA2B,cAAc"}

package/es/Accordion/index.d.mts

@@ -0,0 +1,4 @@
+import { AccordionItemProps, AccordionProps } from "./type.mjs";
+import Accordion from "./Accordion.mjs";
+import AccordionItem from "./AccordionItem.mjs";
+export { Accordion, AccordionItem, AccordionItemProps, AccordionProps };

package/es/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Accordion/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Accordion/index.mjs

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

package/es/Accordion/style.mjs

@@ -0,0 +1,66 @@
+import { createStaticStyles } from "antd-style";
+//#region src/Accordion/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		action: css`
+      opacity: 0;
+      transition: opacity 150ms ${cssVar.motionEaseOut};
+    `,
+		actionVisible: css`
+      opacity: 1;
+    `,
+		base: css`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    `,
+		content: css`
+      overflow: hidden;
+    `,
+		contentInner: css`
+      /* Content wrapper for animation */
+    `,
+		divider: css`
+      margin-block: 0;
+    `,
+		header: css`
+      &:hover .accordion-action {
+        opacity: 1;
+      }
+
+      &:focus-visible {
+        border-radius: ${cssVar.borderRadiusLG};
+        outline: 2px solid ${cssVar.colorPrimary};
+        outline-offset: 2px;
+      }
+    `,
+		icon: css`
+      transition: transform 200ms ${cssVar.motionEaseOut};
+    `,
+		iconRotate: css`
+      transform: rotate(90deg);
+    `,
+		indicator: css`
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+
+      font-size: 18px;
+      color: ${cssVar.colorTextDescription};
+
+      transition: transform 200ms ${cssVar.motionEaseOut};
+    `,
+		item: css`
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    `,
+		titleWrapper: css`
+      user-select: none;
+    `
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Accordion/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  return {\r\n    action: css`\r\n      opacity: 0;\r\n      transition: opacity 150ms ${cssVar.motionEaseOut};\r\n    `,\r\n    actionVisible: css`\r\n      opacity: 1;\r\n    `,\r\n    base: css`\r\n      display: flex;\r\n      flex-direction: column;\r\n      width: 100%;\r\n    `,\r\n    content: css`\r\n      overflow: hidden;\r\n    `,\r\n    contentInner: css`\r\n      /* Content wrapper for animation */\r\n    `,\r\n    divider: css`\r\n      margin-block: 0;\r\n    `,\r\n    header: css`\r\n      &:hover .accordion-action {\r\n        opacity: 1;\r\n      }\r\n\r\n      &:focus-visible {\r\n        border-radius: ${cssVar.borderRadiusLG};\r\n        outline: 2px solid ${cssVar.colorPrimary};\r\n        outline-offset: 2px;\r\n      }\r\n    `,\r\n    icon: css`\r\n      transition: transform 200ms ${cssVar.motionEaseOut};\r\n    `,\r\n    iconRotate: css`\r\n      transform: rotate(90deg);\r\n    `,\r\n    indicator: css`\r\n      display: flex;\r\n      flex-shrink: 0;\r\n      align-items: center;\r\n\r\n      font-size: 18px;\r\n      color: ${cssVar.colorTextDescription};\r\n\r\n      transition: transform 200ms ${cssVar.motionEaseOut};\r\n    `,\r\n    item: css`\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n    `,\r\n    titleWrapper: css`\r\n      user-select: none;\r\n    `,\r\n  };\r\n});\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;kCAEmB,OAAO,cAAc;;EAEnD,eAAe,GAAG;;;EAGlB,MAAM,GAAG;;;;;EAKT,SAAS,GAAG;;;EAGZ,cAAc,GAAG;;;EAGjB,SAAS,GAAG;;;EAGZ,QAAQ,GAAG;;;;;;yBAMU,OAAO,eAAe;6BAClB,OAAO,aAAa;;;;EAI7C,MAAM,GAAG;oCACuB,OAAO,cAAc;;EAErD,YAAY,GAAG;;;EAGf,WAAW,GAAG;;;;;;eAMH,OAAO,qBAAqB;;oCAEP,OAAO,cAAc;;EAErD,MAAM,GAAG;;;;;EAKT,cAAc,GAAG;;;CAGnB;AACF,CAAC"}

package/es/Accordion/type.d.mts

@@ -0,0 +1,159 @@
+import { BlockProps } from "../Block/type.mjs";
+import "../Block/index.mjs";
+import { CSSProperties, HTMLAttributes, Key, ReactNode } from "react";
+//#region src/Accordion/type.d.ts
+interface AccordionItemProps extends Pick<BlockProps, 'padding' | 'paddingBlock' | 'paddingInline' | 'variant' | 'ref'> {
+  /**
+   * Action component that appears on hover
+   */
+  action?: ReactNode;
+  /**
+   * Whether to allow expanding (hide indicator when false)
+   * @default true
+   */
+  allowExpand?: boolean;
+  /**
+   * Whether to always show the action (not only on hover)
+   * @default false
+   */
+  alwaysShowAction?: boolean;
+  /**
+   * Content of the accordion item
+   */
+  children?: ReactNode;
+  /**
+   * Custom classNames for child elements
+   */
+  classNames?: {
+    action?: string;
+    base?: string;
+    content?: string;
+    header?: string;
+    indicator?: string;
+    title?: string;
+  };
+  /**
+   * Default expanded state (uncontrolled)
+   */
+  defaultExpand?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Controlled expanded state
+   */
+  expand?: boolean;
+  headerWrapper?: (header: ReactNode) => ReactNode;
+  /**
+   * Whether to hide the chevron indicator
+   * @default false
+   */
+  hideIndicator?: boolean;
+  /**
+   * Custom indicator component or function
+   */
+  indicator?: ReactNode | ((props: {
+    isDisabled?: boolean;
+    isOpen: boolean;
+  }) => ReactNode);
+  /**
+   * Indicator placement
+   * @default 'start'
+   */
+  indicatorPlacement?: 'end' | 'start';
+  /**
+   * Unique identifier for the item (use as React key)
+   */
+  itemKey: Key;
+  /**
+   * Callback when expanded state changes
+   */
+  onExpandChange?: (expanded: boolean) => void;
+  /**
+   * Custom styles for child elements
+   */
+  styles?: {
+    action?: CSSProperties;
+    base?: CSSProperties;
+    content?: CSSProperties;
+    header?: CSSProperties;
+    indicator?: CSSProperties;
+    title?: CSSProperties;
+  };
+  /**
+   * Title of the accordion item
+   */
+  title: ReactNode;
+}
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<BlockProps, 'variant' | 'ref'> {
+  /**
+   * Whether only one item can be expanded at a time
+   * @default false
+   */
+  accordion?: boolean;
+  /**
+   * Accordion items
+   */
+  children?: ReactNode;
+  /**
+   * Custom classNames for child elements
+   */
+  classNames?: {
+    base?: string;
+  };
+  /**
+   * Default expanded keys (uncontrolled)
+   */
+  defaultExpandedKeys?: Key[];
+  /**
+   * Disable animation
+   * @default false
+   */
+  disableAnimation?: boolean;
+  /**
+   * Controlled expanded keys
+   */
+  expandedKeys?: Key[];
+  /**
+   * Gap between accordion items
+   */
+  gap?: number;
+  /**
+   * Whether to hide the chevron indicator for all items
+   * @default false
+   */
+  hideIndicator?: boolean;
+  /**
+   * Indicator placement for all items
+   * @default 'start'
+   */
+  indicatorPlacement?: 'end' | 'start';
+  /**
+   * Keep content mounted when collapsed
+   * @default true
+   */
+  keepContentMounted?: boolean;
+  /**
+   * Motion props for motion animation
+   */
+  motionProps?: any;
+  /**
+   * Callback when expanded keys change
+   */
+  onExpandedChange?: (keys: Key[]) => void;
+  /**
+   * Whether to show dividers between items
+   * @default false
+   */
+  showDivider?: boolean;
+  /**
+   * Custom styles for child elements
+   */
+  styles?: {
+    base?: CSSProperties;
+  };
+}
+//#endregion
+export { AccordionItemProps, AccordionProps };
+//# sourceMappingURL=type.d.mts.map

package/es/ActionIcon/ActionIcon.d.mts

@@ -0,0 +1,9 @@
+import { ActionIconProps } from "./type.mjs";
+//#region src/ActionIcon/ActionIcon.d.ts
+/**
+ * @deprecated Use `ActionIcon` from `@jinmi/ui/base-ui` instead.
+ */
+declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
+//#endregion
+export { ActionIcon as default };
+//# sourceMappingURL=ActionIcon.d.mts.map

package/es/ActionIcon/ActionIcon.mjs

@@ -0,0 +1,81 @@
+"use client";
+import Center from "../Flex/Center.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { Tooltip } from "../base-ui/Tooltip/Tooltip.mjs";
+import { calcSize } from "./components/utils.mjs";
+import { variants } from "./style.mjs";
+import { memo, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Loader2 } from "lucide-react";
+//#region src/ActionIcon/ActionIcon.tsx
+/**
+* @deprecated Use `ActionIcon` from `@jinmi/ui/base-ui` instead.
+*/
+const ActionIcon = memo(({ color, fill, className, active, icon, size = "middle", variant = "borderless", style, glass, title, onClick, loading, fillOpacity, fillRule, focusable, shadow, disabled, spin: iconSpinning, tooltipProps, danger, ref, ...rest }) => {
+	const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
+	const popupTriggerAria = rest;
+	const isPopupTrigger = popupTriggerAria["aria-haspopup"] !== void 0 || popupTriggerAria["aria-expanded"] !== void 0;
+	const popupTriggerLabel = popupTriggerAria["aria-label"] ?? (isPopupTrigger && typeof title === "string" ? title : void 0);
+	const handleClick = useCallback((event) => {
+		if (loading || disabled) return;
+		onClick?.(event);
+	}, [
+		loading,
+		disabled,
+		onClick
+	]);
+	const node = /* @__PURE__ */ jsx(Center, {
+		horizontal: true,
+		className: cx(variants({
+			active,
+			danger,
+			disabled,
+			glass,
+			shadow,
+			variant
+		}), className),
+		flex: "none",
+		ref,
+		role: "button",
+		style: {
+			borderRadius,
+			height: blockSize,
+			width: blockSize,
+			...style
+		},
+		tabIndex: disabled ? -1 : 0,
+		onClick: handleClick,
+		...rest,
+		"aria-label": popupTriggerLabel,
+		children: icon && /* @__PURE__ */ jsx(Icon, {
+			color,
+			fill,
+			fillOpacity,
+			fillRule,
+			focusable,
+			icon: loading ? Loader2 : icon,
+			size,
+			spin: loading ? true : iconSpinning,
+			style: { pointerEvents: "none" }
+		})
+	});
+	if (!title) return node;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title,
+		...tooltipProps,
+		styles: typeof tooltipProps?.styles === "function" ? tooltipProps.styles : {
+			...tooltipProps?.styles,
+			container: {
+				pointerEvents: "none",
+				...tooltipProps?.styles?.container
+			}
+		},
+		children: node
+	});
+});
+ActionIcon.displayName = "ActionIcon";
+//#endregion
+export { ActionIcon as default };
+
+//# sourceMappingURL=ActionIcon.mjs.map

package/es/ActionIcon/ActionIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../src/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { Loader2 } from 'lucide-react';\r\nimport { memo, type MouseEventHandler, useCallback, useMemo } from 'react';\r\n\r\nimport { Center } from '@/Flex';\r\nimport Icon from '@/Icon';\r\nimport Tooltip from '@/Tooltip';\r\n\r\nimport { calcSize } from './components/utils';\r\nimport { variants } from './style';\r\nimport { type ActionIconProps } from './type';\r\n\r\n/**\r\n * @deprecated Use `ActionIcon` from `@jinmi/ui/base-ui` instead.\r\n */\r\nconst ActionIcon = memo<ActionIconProps>(\r\n  ({\r\n    color,\r\n    fill,\r\n    className,\r\n    active,\r\n    icon,\r\n    size = 'middle',\r\n    variant = 'borderless',\r\n    style,\r\n    glass,\r\n    title,\r\n    onClick,\r\n    loading,\r\n    fillOpacity,\r\n    fillRule,\r\n    focusable,\r\n    shadow,\r\n    disabled,\r\n    spin: iconSpinning,\r\n    tooltipProps,\r\n    danger,\r\n    ref,\r\n    ...rest\r\n  }) => {\r\n    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\r\n    const popupTriggerAria = rest as {\r\n      'aria-expanded'?: unknown;\r\n      'aria-haspopup'?: unknown;\r\n      'aria-label'?: string;\r\n    };\r\n    const isPopupTrigger =\r\n      popupTriggerAria['aria-haspopup'] !== undefined ||\r\n      popupTriggerAria['aria-expanded'] !== undefined;\r\n    const popupTriggerLabel =\r\n      popupTriggerAria['aria-label'] ??\r\n      (isPopupTrigger && typeof title === 'string' ? title : undefined);\r\n\r\n    const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\r\n      (event) => {\r\n        if (loading || disabled) return;\r\n        onClick?.(event);\r\n      },\r\n      [loading, disabled, onClick],\r\n    );\r\n\r\n    const node = (\r\n      <Center\r\n        horizontal\r\n        className={cx(variants({ active, danger, disabled, glass, shadow, variant }), className)}\r\n        flex={'none'}\r\n        ref={ref}\r\n        role=\"button\"\r\n        style={{ borderRadius, height: blockSize, width: blockSize, ...style }}\r\n        tabIndex={disabled ? -1 : 0}\r\n        onClick={handleClick}\r\n        {...rest}\r\n        aria-label={popupTriggerLabel}\r\n      >\r\n        {icon && (\r\n          <Icon\r\n            color={color}\r\n            fill={fill}\r\n            fillOpacity={fillOpacity}\r\n            fillRule={fillRule}\r\n            focusable={focusable}\r\n            icon={loading ? Loader2 : icon}\r\n            size={size}\r\n            spin={loading ? true : iconSpinning}\r\n            style={{\r\n              pointerEvents: 'none',\r\n            }}\r\n          />\r\n        )}\r\n      </Center>\r\n    );\r\n\r\n    if (!title) return node;\r\n\r\n    return (\r\n      <Tooltip\r\n        title={title}\r\n        {...tooltipProps}\r\n        styles={\r\n          typeof tooltipProps?.styles === 'function'\r\n            ? tooltipProps.styles\r\n            : {\r\n                ...tooltipProps?.styles,\r\n                container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\r\n              }\r\n        }\r\n      >\r\n        {node}\r\n      </Tooltip>\r\n    );\r\n  },\r\n);\r\n\r\nActionIcon.displayName = 'ActionIcon';\r\n\r\nexport default ActionIcon;\r\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aAAa,MAChB,EACC,OACA,MACA,WACA,QACA,MACA,OAAO,UACP,UAAU,cACV,OACA,OACA,OACA,SACA,SACA,aACA,UACA,WACA,QACA,UACA,MAAM,cACN,cACA,QACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,cAAc,aACjB,UAAU;EACT,IAAI,WAAW,UAAU;EACzB,UAAU,KAAK;CACjB,GACA;EAAC;EAAS;EAAU;CAAO,CAC7B;CAEA,MAAM,OACJ,oBAAC,QAAD;EACE,YAAA;EACA,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAQ;GAAU;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACvF,MAAM;EACD;EACL,MAAK;EACL,OAAO;GAAE;GAAc,QAAQ;GAAW,OAAO;GAAW,GAAG;EAAM;EACrE,UAAU,WAAW,KAAK;EAC1B,SAAS;EACT,GAAI;EACJ,cAAY;EAEX,UAAA,QACC,oBAAC,MAAD;GACS;GACD;GACO;GACH;GACC;GACX,MAAM,UAAU,UAAU;GACpB;GACN,MAAM,UAAU,OAAO;GACvB,OAAO,EACL,eAAe,OACjB;EACD,CAAA;CAEG,CAAA;CAGV,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QACE,OAAO,cAAc,WAAW,aAC5B,aAAa,SACb;GACE,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAGL,UAAA;CACM,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}

package/es/ActionIcon/components/utils.mjs

@@ -0,0 +1,42 @@
+import { isNumber } from "es-toolkit/compat";
+//#region src/ActionIcon/components/utils.ts
+const calcSize = (iconSize) => {
+	let blockSize;
+	let borderRadius;
+	if (isNumber(iconSize)) {
+		const blockSize = iconSize * 1.8;
+		return {
+			blockSize,
+			borderRadius: Math.floor(blockSize / 6)
+		};
+	}
+	switch (iconSize) {
+		case "large":
+			blockSize = 44;
+			borderRadius = 8;
+			break;
+		case "middle":
+			blockSize = 36;
+			borderRadius = 6;
+			break;
+		case "small":
+			blockSize = 24;
+			borderRadius = 4;
+			break;
+		default: if (iconSize) {
+			blockSize = iconSize?.blockSize || 36;
+			borderRadius = iconSize?.borderRadius || 6;
+		} else {
+			blockSize = "1.8em";
+			borderRadius = "0.3em";
+		}
+	}
+	return {
+		blockSize,
+		borderRadius
+	};
+};
+//#endregion
+export { calcSize };
+
+//# sourceMappingURL=utils.mjs.map

package/es/ActionIcon/components/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/ActionIcon/components/utils.ts"],"sourcesContent":["import { isNumber } from 'es-toolkit/compat';\r\n\r\nimport type { ActionIconSize } from '@/ActionIcon';\r\n\r\nexport const calcSize = (iconSize?: ActionIconSize) => {\r\n  let blockSize: number | string;\r\n  let borderRadius: number | string;\r\n\r\n  if (isNumber(iconSize)) {\r\n    const blockSize = iconSize * 1.8;\r\n    return {\r\n      blockSize,\r\n      borderRadius: Math.floor(blockSize / 6),\r\n    };\r\n  }\r\n\r\n  switch (iconSize) {\r\n    case 'large': {\r\n      blockSize = 44;\r\n      borderRadius = 8;\r\n      break;\r\n    }\r\n    case 'middle': {\r\n      blockSize = 36;\r\n      borderRadius = 6;\r\n      break;\r\n    }\r\n    case 'small': {\r\n      blockSize = 24;\r\n      borderRadius = 4;\r\n      break;\r\n    }\r\n    default: {\r\n      if (iconSize) {\r\n        blockSize = iconSize?.blockSize || 36;\r\n        borderRadius = iconSize?.borderRadius || 6;\r\n      } else {\r\n        blockSize = '1.8em';\r\n        borderRadius = '0.3em';\r\n      }\r\n\r\n      break;\r\n    }\r\n  }\r\n\r\n  return {\r\n    blockSize,\r\n    borderRadius,\r\n  };\r\n};\r\n"],"mappings":";;AAIA,MAAa,YAAY,aAA8B;CACrD,IAAI;CACJ,IAAI;CAEJ,IAAI,SAAS,QAAQ,GAAG;EACtB,MAAM,YAAY,WAAW;EAC7B,OAAO;GACL;GACA,cAAc,KAAK,MAAM,YAAY,CAAC;EACxC;CACF;CAEA,QAAQ,UAAR;EACE,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,SACE,IAAI,UAAU;GACZ,YAAY,UAAU,aAAa;GACnC,eAAe,UAAU,gBAAgB;EAC3C,OAAO;GACL,YAAY;GACZ,eAAe;EACjB;CAIJ;CAEA,OAAO;EACL;EACA;CACF;AACF"}

package/es/ActionIcon/index.d.mts

@@ -0,0 +1,3 @@
+import { ActionIconProps, ActionIconSize } from "./type.mjs";
+import ActionIcon from "./ActionIcon.mjs";
+export { type ActionIconProps, type ActionIconSize, ActionIcon as default };

package/es/ActionIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/ActionIcon/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/ActionIcon/index.mjs

@@ -0,0 +1,2 @@
+import ActionIcon from "./ActionIcon.mjs";
+export { ActionIcon as default };

package/es/ActionIcon/style.mjs

@@ -0,0 +1,106 @@
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/ActionIcon/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		active: staticStylish.active,
+		borderless: staticStylish.variantBorderless,
+		dangerBorderless: staticStylish.variantBorderlessDanger,
+		dangerFilled: staticStylish.variantFilledDanger,
+		dangerOutlined: staticStylish.variantOutlinedDanger,
+		dangerRoot: css`
+      &:hover {
+        color: ${cssVar.colorError};
+      }
+
+      &:active {
+        color: ${cssVar.colorErrorActive};
+      }
+    `,
+		disabled: staticStylish.disabled,
+		filled: staticStylish.variantFilled,
+		glass: staticStylish.blur,
+		outlined: staticStylish.variantOutlined,
+		root: css`
+      cursor: pointer;
+
+      position: relative;
+
+      overflow: hidden;
+
+      color: ${cssVar.colorTextTertiary};
+
+      transition:
+        color 400ms ${cssVar.motionEaseOut},
+        background 100ms ${cssVar.motionEaseOut};
+
+      &:hover {
+        color: ${cssVar.colorTextSecondary};
+      }
+
+      &:active {
+        color: ${cssVar.colorText};
+      }
+    `,
+		shadow: staticStylish.shadow
+	};
+});
+const variants = cva(styles.root, {
+	compoundVariants: [
+		{
+			className: styles.dangerFilled,
+			danger: true,
+			variant: "filled"
+		},
+		{
+			className: styles.dangerBorderless,
+			danger: true,
+			variant: "borderless"
+		},
+		{
+			className: styles.dangerOutlined,
+			danger: true,
+			variant: "outlined"
+		}
+	],
+	defaultVariants: {
+		active: false,
+		danger: false,
+		disabled: false,
+		glass: false,
+		shadow: false,
+		variant: "borderless"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		active: {
+			false: null,
+			true: styles.active
+		},
+		danger: {
+			false: null,
+			true: styles.dangerRoot
+		},
+		disabled: {
+			false: null,
+			true: styles.disabled
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map