@jinmi/ui 0.0.0-stage → 6.0.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { focusRing } from '@/base-ui/focusRing';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  action: css`\r\n    display: flex;\r\n    flex-shrink: 0;\r\n    gap: 4px;\r\n    align-items: center;\r\n\r\n    opacity: 0;\r\n\r\n    transition: opacity 150ms ${cssVar.motionEaseOut};\r\n  `,\r\n  actionAlwaysVisible: css`\r\n    opacity: 1;\r\n  `,\r\n  actionBorderless: css`\r\n    padding-inline-end: var(--accordion-hover-inset, 8px);\r\n  `,\r\n  actionOutlined: css`\r\n    padding-inline-end: 16px;\r\n  `,\r\n  content: css`\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    transition:\r\n      opacity 200ms ${cssVar.motionEaseOut},\r\n      translate 200ms ${cssVar.motionEaseOut};\r\n\r\n    [data-starting-style] & {\r\n      translate: 0 6px;\r\n      opacity: 0;\r\n    }\r\n\r\n    [data-ending-style] & {\r\n      translate: 0 -6px;\r\n      opacity: 0;\r\n    }\r\n\r\n    /* Base UI sets animation-name: none on initially-open panels */\r\n    [style*='animation-name: none'] &,\r\n    [style*='animation-name:none'] & {\r\n      translate: none;\r\n      opacity: 1;\r\n      transition: none;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition-duration: 0s;\r\n    }\r\n  `,\r\n  contentBorderless: css`\r\n    padding-block: 0 12px;\r\n  `,\r\n  contentIndent: css`\r\n    padding-inline-start: 24px;\r\n  `,\r\n  contentIndentOutlined: css`\r\n    padding-inline-start: 40px;\r\n  `,\r\n  contentOutlined: css`\r\n    padding-block: 4px 14px;\r\n    padding-inline: 16px;\r\n  `,\r\n  header: css`\r\n    position: relative;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    margin: 0;\r\n\r\n    font-size: inherit;\r\n    font-weight: inherit;\r\n\r\n    transition: background 150ms ${cssVar.motionEaseOut};\r\n\r\n    &:hover:not(:has([data-disabled])) {\r\n      background: ${cssVar.colorFillTertiary};\r\n    }\r\n\r\n    &:hover .accordion-action,\r\n    &:focus-within .accordion-action {\r\n      opacity: 1;\r\n    }\r\n  `,\r\n  headerBorderless: css`\r\n    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\r\n    border-radius: ${cssVar.borderRadius};\r\n  `,\r\n  headerFilled: css`\r\n    border-radius: ${cssVar.borderRadius};\r\n    background: ${cssVar.colorFillTertiary};\r\n\r\n    &:hover:not(:has([data-disabled])) {\r\n      background: ${cssVar.colorFillSecondary};\r\n    }\r\n  `,\r\n  headerInline: css`\r\n    margin-inline: 0;\r\n\r\n    > .accordion-action {\r\n      padding-block: 4px;\r\n    }\r\n  `,\r\n  contentInline: css`\r\n    padding-block: 0;\r\n  `,\r\n  indicator: css`\r\n    display: flex;\r\n    flex-shrink: 0;\r\n    align-items: center;\r\n\r\n    color: ${cssVar.colorTextDescription};\r\n\r\n    transition: transform 200ms ${cssVar.motionEaseOut};\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition-duration: 0s;\r\n    }\r\n  `,\r\n  indicatorInline: css`\r\n    justify-content: center;\r\n    width: 18px;\r\n    height: 18px;\r\n    margin-inline-start: -6px;\r\n\r\n    [data-panel-open] & {\r\n      transform: rotate(90deg);\r\n    }\r\n  `,\r\n  indicatorEnd: css`\r\n    margin-inline-start: auto;\r\n\r\n    [data-panel-open] & {\r\n      transform: rotate(180deg);\r\n    }\r\n  `,\r\n  indicatorStart: css`\r\n    [data-panel-open] & {\r\n      transform: rotate(90deg);\r\n    }\r\n  `,\r\n  item: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n  `,\r\n  itemOutlined: css`\r\n    & + & {\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    }\r\n  `,\r\n  panel: css`\r\n    overflow: hidden;\r\n    height: auto;\r\n    transition: height 200ms ${cssVar.motionEaseOut};\r\n\r\n    interpolate-size: allow-keywords;\r\n\r\n    &[data-starting-style],\r\n    &[data-ending-style] {\r\n      height: 0;\r\n    }\r\n\r\n    &[data-starting-style][style*='animation-name: none'],\r\n    &[data-starting-style][style*='animation-name:none'] {\r\n      height: auto;\r\n      transition: none;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition-duration: 0s;\r\n    }\r\n  `,\r\n  root: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n  `,\r\n  rootOutlined: css`\r\n    overflow: hidden;\r\n    border: 1px solid ${cssVar.colorBorderSecondary};\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n  `,\r\n  trigger: css`\r\n    cursor: pointer;\r\n    user-select: none;\r\n\r\n    display: flex;\r\n    flex: 1;\r\n    gap: 8px;\r\n    align-items: center;\r\n\r\n    min-width: 0;\r\n    border: 0;\r\n    border-radius: inherit;\r\n\r\n    font: inherit;\r\n    font-size: 14px;\r\n    color: ${cssVar.colorText};\r\n    text-align: start;\r\n\r\n    background: none;\r\n    outline: none;\r\n\r\n    ${focusRing};\r\n\r\n    &[data-disabled] {\r\n      cursor: not-allowed;\r\n      color: ${cssVar.colorTextDisabled};\r\n    }\r\n  `,\r\n  triggerBorderless: css`\r\n    padding-block: 8px;\r\n    padding-inline: var(--accordion-hover-inset, 8px);\r\n  `,\r\n  triggerFilled: css`\r\n    padding-block: 8px;\r\n    padding-inline: 16px;\r\n  `,\r\n  triggerOutlined: css`\r\n    padding-block: 12px;\r\n    padding-inline: 16px;\r\n\r\n    &[data-panel-open] {\r\n      padding-block-end: 8px;\r\n    }\r\n  `,\r\n}));\r\n\r\nexport const rootVariants = cva(styles.root, {\r\n  defaultVariants: { variant: 'borderless' },\r\n  variants: {\r\n    variant: {\r\n      borderless: null,\r\n      filled: null,\r\n      outlined: styles.rootOutlined,\r\n    },\r\n  },\r\n});\r\n\r\nexport const itemVariants = cva(styles.item, {\r\n  defaultVariants: { variant: 'borderless' },\r\n  variants: {\r\n    variant: {\r\n      borderless: null,\r\n      filled: null,\r\n      outlined: styles.itemOutlined,\r\n    },\r\n  },\r\n});\r\n\r\nexport const headerVariants = cva(styles.header, {\r\n  compoundVariants: [\r\n    { class: styles.headerInline, inline: true, variant: 'borderless' },\r\n    { class: styles.headerInline, inline: true, variant: 'filled' },\r\n  ],\r\n  defaultVariants: { inline: false, variant: 'borderless' },\r\n  variants: {\r\n    inline: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n    variant: {\r\n      borderless: styles.headerBorderless,\r\n      filled: styles.headerFilled,\r\n      outlined: null,\r\n    },\r\n  },\r\n});\r\n\r\nexport const triggerVariants = cva(styles.trigger, {\r\n  defaultVariants: { variant: 'borderless' },\r\n  variants: {\r\n    variant: {\r\n      borderless: styles.triggerBorderless,\r\n      filled: styles.triggerFilled,\r\n      outlined: styles.triggerOutlined,\r\n    },\r\n  },\r\n});\r\n\r\nexport const indicatorVariants = cva(styles.indicator, {\r\n  defaultVariants: { placement: 'start' },\r\n  variants: {\r\n    placement: {\r\n      end: styles.indicatorEnd,\r\n      inline: styles.indicatorInline,\r\n      start: styles.indicatorStart,\r\n    },\r\n  },\r\n});\r\n\r\nexport const contentVariants = cva(styles.content, {\r\n  compoundVariants: [\r\n    {\r\n      class: styles.contentInline,\r\n      inline: true,\r\n      variant: 'borderless',\r\n    },\r\n    {\r\n      class: styles.contentIndent,\r\n      indent: true,\r\n      variant: 'borderless',\r\n    },\r\n    {\r\n      class: styles.contentIndent,\r\n      indent: true,\r\n      variant: 'filled',\r\n    },\r\n    {\r\n      class: styles.contentIndentOutlined,\r\n      indent: true,\r\n      variant: 'outlined',\r\n    },\r\n  ],\r\n  defaultVariants: { indent: true, inline: false, variant: 'borderless' },\r\n  variants: {\r\n    indent: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n    inline: {\r\n      false: null,\r\n      true: null,\r\n    },\r\n    variant: {\r\n      borderless: styles.contentBorderless,\r\n      filled: styles.contentBorderless,\r\n      outlined: styles.contentOutlined,\r\n    },\r\n  },\r\n});\r\n\r\nexport const actionVariants = cva(styles.action, {\r\n  defaultVariants: { alwaysVisible: false, variant: 'borderless' },\r\n  variants: {\r\n    alwaysVisible: {\r\n      false: null,\r\n      true: styles.actionAlwaysVisible,\r\n    },\r\n    variant: {\r\n      borderless: styles.actionBorderless,\r\n      filled: styles.actionOutlined,\r\n      outlined: styles.actionOutlined,\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,7 @@
+import { ActionIconProps, ActionIconVariant } from "./type.mjs";
+import { ReactElement } from "react";
+//#region src/base-ui/ActionIcon/ActionIcon.d.ts
+declare const ActionIcon: <V extends ActionIconVariant = "borderless">(props: ActionIconProps<V>) => ReactElement;
+//#endregion
+export { ActionIcon as default };
+//# sourceMappingURL=ActionIcon.d.mts.map

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

@@ -0,0 +1,93 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import Button from "../Button/Button.mjs";
+import { variants } from "./style.mjs";
+import { calcOutdent, calcSize } from "./utils.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/ActionIcon/ActionIcon.tsx
+const resolveButtonType = (variant) => {
+	if (variant === "filled") return "fill";
+	if (variant === "outlined") return "default";
+	return "text";
+};
+const resolveButtonSize = (size) => {
+	if (size === "small") return "small";
+	if (size === "large") return "large";
+	return "middle";
+};
+const ActionIconImpl = memo(({ active, className, classNames, color, danger, disabled, fill, fillOpacity, fillRule, focusable, glass, icon, loading, onClick, outdent, ref, shadow, size = "middle", spin: iconSpinning, style, styles: slotStyles, title, tooltipProps, variant = "borderless", ...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 = (event) => {
+		onClick?.(event);
+	};
+	const iconNode = icon ? /* @__PURE__ */ jsx(Icon, {
+		className: classNames?.icon,
+		color,
+		fill,
+		fillOpacity,
+		fillRule,
+		focusable,
+		icon,
+		size,
+		spin: iconSpinning,
+		style: {
+			pointerEvents: "none",
+			...slotStyles?.icon
+		}
+	}) : void 0;
+	const outdentAmount = variant === "borderless" && outdent ? calcOutdent(size) : void 0;
+	const outdentMargin = outdentAmount ? outdent === "end" ? { marginInlineEnd: `-${outdentAmount}` } : { marginInlineStart: `-${outdentAmount}` } : void 0;
+	const node = /* @__PURE__ */ jsx(Button, {
+		...rest,
+		"aria-label": popupTriggerLabel,
+		className: cx(variants({
+			active,
+			danger,
+			glass,
+			shadow
+		}), classNames?.root, className),
+		danger,
+		disabled,
+		htmlType: "button",
+		icon: iconNode,
+		loading,
+		ref,
+		size: resolveButtonSize(size),
+		tabIndex: disabled ? -1 : 0,
+		type: resolveButtonType(variant),
+		style: {
+			...outdentMargin,
+			borderRadius,
+			height: blockSize,
+			width: blockSize,
+			...slotStyles?.root,
+			...style
+		},
+		onClick: handleClick
+	});
+	if (!title) return node;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title,
+		...tooltipProps,
+		styles: {
+			...tooltipProps?.styles,
+			container: {
+				pointerEvents: "none",
+				...tooltipProps?.styles?.container
+			}
+		},
+		children: node
+	});
+});
+ActionIconImpl.displayName = "BaseActionIcon";
+const ActionIcon = ActionIconImpl;
+//#endregion
+export { ActionIcon as default };
+
+//# sourceMappingURL=ActionIcon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport type { MouseEvent, ReactElement, Ref } from 'react';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport type { ButtonProps } from '@/base-ui/Button';\r\nimport Button from '@/base-ui/Button';\r\nimport Tooltip from '@/base-ui/Tooltip';\r\nimport Icon from '@/Icon';\r\n\r\nimport { variants } from './style';\r\nimport type { ActionIconOutdent, ActionIconProps, ActionIconVariant } from './type';\r\nimport { calcOutdent, calcSize } from './utils';\r\n\r\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\r\n  if (variant === 'filled') return 'fill' as const;\r\n  if (variant === 'outlined') return 'default' as const;\r\n  return 'text' as const;\r\n};\r\n\r\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\r\n  if (size === 'small') return 'small' as const;\r\n  if (size === 'large') return 'large' as const;\r\n  return 'middle' as const;\r\n};\r\n\r\ntype ActionIconImplProps = Omit<ActionIconProps, 'outdent' | 'variant'> & {\r\n  outdent?: ActionIconOutdent;\r\n  variant?: ActionIconVariant;\r\n};\r\n\r\nconst ActionIconImpl = memo<ActionIconImplProps>(\r\n  ({\r\n    active,\r\n    className,\r\n    classNames,\r\n    color,\r\n    danger,\r\n    disabled,\r\n    fill,\r\n    fillOpacity,\r\n    fillRule,\r\n    focusable,\r\n    glass,\r\n    icon,\r\n    loading,\r\n    onClick,\r\n    outdent,\r\n    ref,\r\n    shadow,\r\n    size = 'middle',\r\n    spin: iconSpinning,\r\n    style,\r\n    styles: slotStyles,\r\n    title,\r\n    tooltipProps,\r\n    variant = 'borderless',\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: ButtonProps['onClick'] = (event) => {\r\n      onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\r\n    };\r\n\r\n    const iconNode = icon ? (\r\n      <Icon\r\n        className={classNames?.icon}\r\n        color={color}\r\n        fill={fill}\r\n        fillOpacity={fillOpacity}\r\n        fillRule={fillRule}\r\n        focusable={focusable}\r\n        icon={icon}\r\n        size={size}\r\n        spin={iconSpinning}\r\n        style={{ pointerEvents: 'none', ...slotStyles?.icon }}\r\n      />\r\n    ) : undefined;\r\n\r\n    const outdentAmount = variant === 'borderless' && outdent ? calcOutdent(size) : undefined;\r\n    const outdentMargin = outdentAmount\r\n      ? outdent === 'end'\r\n        ? { marginInlineEnd: `-${outdentAmount}` }\r\n        : { marginInlineStart: `-${outdentAmount}` }\r\n      : undefined;\r\n\r\n    const node = (\r\n      <Button\r\n        {...(rest as unknown as ButtonProps)}\r\n        aria-label={popupTriggerLabel}\r\n        className={cx(variants({ active, danger, glass, shadow }), classNames?.root, className)}\r\n        danger={danger}\r\n        disabled={disabled}\r\n        htmlType=\"button\"\r\n        icon={iconNode}\r\n        loading={loading}\r\n        ref={ref as unknown as Ref<HTMLButtonElement>}\r\n        size={resolveButtonSize(size)}\r\n        tabIndex={disabled ? -1 : 0}\r\n        type={resolveButtonType(variant)}\r\n        style={{\r\n          ...outdentMargin,\r\n          borderRadius,\r\n          height: blockSize,\r\n          width: blockSize,\r\n          ...slotStyles?.root,\r\n          ...style,\r\n        }}\r\n        onClick={handleClick}\r\n      />\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          ...tooltipProps?.styles,\r\n          container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\r\n        }}\r\n      >\r\n        {node}\r\n      </Tooltip>\r\n    );\r\n  },\r\n);\r\n\r\nActionIconImpl.displayName = 'BaseActionIcon';\r\n\r\nconst ActionIcon = ActionIconImpl as unknown as <V extends ActionIconVariant = 'borderless'>(\r\n  props: ActionIconProps<V>,\r\n) => ReactElement;\r\n\r\nexport default ActionIcon;\r\n"],"mappings":";;;;;;;;;;AAeA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAOA,MAAM,iBAAiB,MACpB,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QAAQ,YACR,OACA,cACA,UAAU,cACV,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,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,YAAY;EAAK;CACrD,CAAA,IACC,KAAA;CAEJ,MAAM,gBAAgB,YAAY,gBAAgB,UAAU,YAAY,IAAI,IAAI,KAAA;CAChF,MAAM,gBAAgB,gBAClB,YAAY,QACV,EAAE,iBAAiB,IAAI,gBAAgB,IACvC,EAAE,mBAAmB,IAAI,gBAAgB,IAC3C,KAAA;CAEJ,MAAM,OACJ,oBAAC,QAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAQ;GAAO;EAAO,CAAC,GAAG,YAAY,MAAM,SAAS;EAC9E;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL,GAAG;GACH;GACA,QAAQ;GACR,OAAO;GACP,GAAG,YAAY;GACf,GAAG;EACL;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,aAAa"}

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

@@ -0,0 +1,4 @@
+import { ActionIconClassNames, ActionIconOutdent, ActionIconProps, ActionIconSize, ActionIconStyles, ActionIconVariant } from "./type.mjs";
+import ActionIcon from "./ActionIcon.mjs";
+import { styles } from "./style.mjs";
+export { type ActionIconClassNames, type ActionIconOutdent, type ActionIconProps, type ActionIconSize, type ActionIconStyles, type ActionIconVariant, styles as actionIconStyles, ActionIcon as default };

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

@@ -0,0 +1,11 @@
+//#region src/base-ui/ActionIcon/style.d.ts
+declare const styles: {
+  active: string;
+  dangerRoot: string;
+  glass: string;
+  root: string;
+  shadow: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,63 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/ActionIcon/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		active: staticStylish.active,
+		dangerRoot: css`
+      &&:hover {
+        color: ${cssVar.colorError};
+      }
+
+      &&:active {
+        color: ${cssVar.colorErrorActive};
+      }
+    `,
+		glass: staticStylish.blur,
+		root: css`
+      && {
+        color: ${cssVar.colorTextTertiary};
+      }
+
+      &&:hover {
+        color: ${cssVar.colorTextSecondary};
+      }
+
+      &&:active {
+        color: ${cssVar.colorText};
+      }
+    `,
+		shadow: staticStylish.shadow
+	};
+});
+const variants = cva(styles.root, {
+	defaultVariants: {
+		active: false,
+		danger: false,
+		glass: false,
+		shadow: false
+	},
+	variants: {
+		active: {
+			false: null,
+			true: styles.active
+		},
+		danger: {
+			false: null,
+			true: styles.dangerRoot
+		},
+		glass: {
+			false: null,
+			true: styles.glass
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/ActionIcon/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  return {\r\n    active: lobeStaticStylish.active,\r\n    // && outranks base-ui Button's variant classes regardless of style insertion order\r\n    dangerRoot: css`\r\n      &&:hover {\r\n        color: ${cssVar.colorError};\r\n      }\r\n\r\n      &&:active {\r\n        color: ${cssVar.colorErrorActive};\r\n      }\r\n    `,\r\n    glass: lobeStaticStylish.blur,\r\n    root: css`\r\n      && {\r\n        color: ${cssVar.colorTextTertiary};\r\n      }\r\n\r\n      &&:hover {\r\n        color: ${cssVar.colorTextSecondary};\r\n      }\r\n\r\n      &&:active {\r\n        color: ${cssVar.colorText};\r\n      }\r\n    `,\r\n    shadow: lobeStaticStylish.shadow,\r\n  };\r\n});\r\n\r\nexport const variants = cva(styles.root, {\r\n  defaultVariants: {\r\n    active: false,\r\n    danger: false,\r\n    glass: false,\r\n    shadow: false,\r\n  },\r\n\r\n  variants: {\r\n    active: {\r\n      false: null,\r\n      true: styles.active,\r\n    },\r\n    danger: {\r\n      false: null,\r\n      true: styles.dangerRoot,\r\n    },\r\n    glass: {\r\n      false: null,\r\n      true: styles.glass,\r\n    },\r\n    shadow: {\r\n      false: null,\r\n      true: styles.shadow,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQA,cAAkB;EAE1B,YAAY,GAAG;;iBAEF,OAAO,WAAW;;;;iBAIlB,OAAO,iBAAiB;;;EAGrC,OAAOA,cAAkB;EACzB,MAAM,GAAG;;iBAEI,OAAO,kBAAkB;;;;iBAIzB,OAAO,mBAAmB;;;;iBAI1B,OAAO,UAAU;;;EAG9B,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;CACV;CAEA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}