@jinmi/ui 0.0.0-stage → 6.0.2

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

@@ -0,0 +1,421 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Alert/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	action: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    min-height: 32px;
+    margin-inline-start: auto;
+  `,
+	centered: css`
+    align-items: center;
+  `,
+	close: css`
+    cursor: pointer;
+
+    position: relative;
+    scale: 1;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: transparent;
+
+    transition:
+      color 160ms ${cssVar.motionEaseOut},
+      background-color 160ms ${cssVar.motionEaseOut},
+      scale 160ms ${cssVar.motionEaseOut};
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      translate: -50% -50%;
+
+      width: 40px;
+      height: 40px;
+    }
+
+    &:hover:not(:disabled) {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &:active:not(:disabled) {
+      scale: 0.96;
+    }
+
+    ${focusRing};
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	colorfulText: css`
+    color: var(--jinmi-alert-accent);
+  `,
+	container: css`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+  `,
+	content: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  `,
+	description: css`
+    font-size: 13px;
+    line-height: 20px;
+    color: ${cssVar.colorTextSecondary};
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+  `,
+	detailed: css`
+    padding-block: 12px;
+    padding-inline: 14px;
+  `,
+	extra: css`
+    position: relative;
+    max-width: 100%;
+    color: ${cssVar.colorText};
+  `,
+	extraBanner: css`
+    border-radius: 0;
+  `,
+	extraContent: css`
+    overflow: hidden;
+
+    margin-block: 0 12px;
+    margin-inline: 12px;
+    padding: 8px;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    font-size: 12px;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	extraHeader: css`
+    cursor: pointer;
+    user-select: none;
+
+    display: flex;
+    gap: 6px;
+    align-items: center;
+
+    min-height: 40px;
+    padding-block: 8px;
+    padding-inline: 14px;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 0;
+
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+    color: ${cssVar.colorTextSecondary};
+
+    background: transparent;
+
+    transition:
+      color 160ms ${cssVar.motionEaseOut},
+      background-color 160ms ${cssVar.motionEaseOut};
+
+    &::marker,
+    &::-webkit-details-marker {
+      content: '';
+      display: none;
+    }
+
+    &:hover {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillQuaternary};
+    }
+
+    ${focusRing};
+  `,
+	extraHeaderPlain: css`
+    margin-block-start: 6px;
+    padding-inline: 0;
+    border-block-start-color: ${cssVar.colorBorderSecondary};
+  `,
+	extraIndicator: css`
+    flex-shrink: 0;
+    color: ${cssVar.colorTextTertiary};
+    transition: transform 160ms ${cssVar.motionEaseOut};
+
+    details[open] > summary > & {
+      transform: rotate(90deg);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+	extraPlain: css`
+    background: transparent;
+  `,
+	icon: css`
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    height: 20px;
+
+    color: var(--jinmi-alert-accent);
+  `,
+	integrated: css`
+    overflow: hidden;
+    border-radius: ${cssVar.borderRadius};
+  `,
+	neutralText: css`
+    color: ${cssVar.colorText};
+  `,
+	root: css`
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: flex-start;
+
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    padding-block: 10px;
+    padding-inline: 12px;
+    border: none;
+    border-radius: ${cssVar.borderRadius};
+
+    font-size: 14px;
+    color: ${cssVar.colorText};
+
+    background: var(--jinmi-alert-background);
+    box-shadow: inset 0 0 0 1px var(--jinmi-alert-soft-border);
+
+    @media (width <= 480px) {
+      flex-wrap: wrap;
+    }
+  `,
+	soft: css`
+    background: var(--jinmi-alert-background);
+    box-shadow: inset 0 0 0 1px var(--jinmi-alert-soft-border);
+  `,
+	outlined: css`
+    background: transparent;
+    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};
+  `,
+	plain: css`
+    padding-block: 2px;
+    padding-inline: 0;
+    background: transparent;
+    box-shadow: none;
+  `,
+	title: css`
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: inherit;
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+  `,
+	titleDetailed: css`
+    font-weight: 500;
+  `,
+	toneError: css`
+    --jinmi-alert-accent: ${cssVar.colorError};
+    --jinmi-alert-background: color-mix(
+      in srgb,
+      ${cssVar.colorError} 5%,
+      ${cssVar.colorBgContainer}
+    );
+    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorError} 14%, transparent);
+  `,
+	toneInfo: css`
+    --jinmi-alert-accent: ${cssVar.colorInfo};
+    --jinmi-alert-background: color-mix(
+      in srgb,
+      ${cssVar.colorInfo} 5%,
+      ${cssVar.colorBgContainer}
+    );
+    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorInfo} 14%, transparent);
+  `,
+	toneSecondary: css`
+    --jinmi-alert-accent: ${cssVar.colorTextSecondary};
+    --jinmi-alert-background: color-mix(
+      in srgb,
+      ${cssVar.colorTextSecondary} 4%,
+      ${cssVar.colorBgContainer}
+    );
+    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorTextSecondary} 12%, transparent);
+  `,
+	toneSuccess: css`
+    --jinmi-alert-accent: ${cssVar.colorSuccess};
+    --jinmi-alert-background: color-mix(
+      in srgb,
+      ${cssVar.colorSuccess} 5%,
+      ${cssVar.colorBgContainer}
+    );
+    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorSuccess} 14%, transparent);
+  `,
+	toneWarning: css`
+    --jinmi-alert-accent: ${cssVar.colorWarning};
+    --jinmi-alert-background: color-mix(
+      in srgb,
+      ${cssVar.colorWarning} 5%,
+      ${cssVar.colorBgContainer}
+    );
+    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorWarning} 14%, transparent);
+  `,
+	unifiedRoot: css`
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  `,
+	banner: css`
+    border-radius: 0;
+    box-shadow: none;
+  `,
+	wrappedAction: css`
+    @media (width <= 480px) {
+      order: 4;
+      width: calc(100% - 30px);
+      margin-block-start: -2px;
+      margin-inline-start: 30px;
+    }
+  `
+}));
+const toneVariants = cva("", {
+	defaultVariants: { type: "info" },
+	variants: { type: {
+		error: styles.toneError,
+		info: styles.toneInfo,
+		secondary: styles.toneSecondary,
+		success: styles.toneSuccess,
+		warning: styles.toneWarning
+	} }
+});
+const rootVariants = cva(styles.root, {
+	compoundVariants: [{
+		class: styles.unifiedRoot,
+		hasExtra: true
+	}],
+	defaultVariants: {
+		banner: false,
+		colorfulText: false,
+		glass: false,
+		hasDescription: false,
+		hasExtra: false,
+		variant: "soft"
+	},
+	variants: {
+		banner: {
+			false: null,
+			true: styles.banner
+		},
+		colorfulText: {
+			false: styles.neutralText,
+			true: styles.colorfulText
+		},
+		glass: {
+			false: null,
+			true: staticStylish.blur
+		},
+		hasDescription: {
+			false: styles.centered,
+			true: styles.detailed
+		},
+		hasExtra: {
+			false: null,
+			true: null
+		},
+		variant: {
+			borderless: styles.plain,
+			filled: styles.soft,
+			outlined: styles.outlined,
+			plain: styles.plain,
+			soft: styles.soft
+		}
+	}
+});
+const integratedVariants = cva(styles.integrated, {
+	defaultVariants: {
+		banner: false,
+		glass: false,
+		variant: "soft"
+	},
+	variants: {
+		banner: {
+			false: null,
+			true: styles.banner
+		},
+		glass: {
+			false: null,
+			true: staticStylish.blur
+		},
+		variant: {
+			borderless: styles.extraPlain,
+			filled: styles.soft,
+			outlined: styles.outlined,
+			plain: styles.extraPlain,
+			soft: styles.soft
+		}
+	}
+});
+const extraVariants = cva(styles.extra, {
+	defaultVariants: {
+		banner: false,
+		variant: "soft"
+	},
+	variants: {
+		banner: {
+			false: null,
+			true: styles.extraBanner
+		},
+		variant: {
+			borderless: styles.extraPlain,
+			filled: null,
+			outlined: null,
+			plain: styles.extraPlain,
+			soft: null
+		}
+	}
+});
+const extraHeaderVariants = cva(styles.extraHeader, {
+	defaultVariants: { variant: "soft" },
+	variants: { variant: {
+		borderless: styles.extraHeaderPlain,
+		filled: null,
+		outlined: null,
+		plain: styles.extraHeaderPlain,
+		soft: null
+	} }
+});
+//#endregion
+export { extraHeaderVariants, extraVariants, integratedVariants, rootVariants, styles, toneVariants };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    min-height: 32px;\n    margin-inline-start: auto;\n  `,\n  centered: css`\n    align-items: center;\n  `,\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n    scale: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut},\n      scale 160ms ${cssVar.motionEaseOut};\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      translate: -50% -50%;\n\n      width: 40px;\n      height: 40px;\n    }\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active:not(:disabled) {\n      scale: 0.96;\n    }\n\n    ${focusRing};\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  colorfulText: css`\n    color: var(--jinmi-alert-accent);\n  `,\n  container: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 100%;\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n  description: css`\n    font-size: 13px;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  detailed: css`\n    padding-block: 12px;\n    padding-inline: 14px;\n  `,\n  extra: css`\n    position: relative;\n    max-width: 100%;\n    color: ${cssVar.colorText};\n  `,\n  extraBanner: css`\n    border-radius: 0;\n  `,\n  extraContent: css`\n    overflow: hidden;\n\n    margin-block: 0 12px;\n    margin-inline: 12px;\n    padding: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  extraHeader: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    min-height: 40px;\n    padding-block: 8px;\n    padding-inline: 14px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 0;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut};\n\n    &::marker,\n    &::-webkit-details-marker {\n      content: '';\n      display: none;\n    }\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillQuaternary};\n    }\n\n    ${focusRing};\n  `,\n  extraHeaderPlain: css`\n    margin-block-start: 6px;\n    padding-inline: 0;\n    border-block-start-color: ${cssVar.colorBorderSecondary};\n  `,\n  extraIndicator: css`\n    flex-shrink: 0;\n    color: ${cssVar.colorTextTertiary};\n    transition: transform 160ms ${cssVar.motionEaseOut};\n\n    details[open] > summary > & {\n      transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  extraPlain: css`\n    background: transparent;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 20px;\n\n    color: var(--jinmi-alert-accent);\n  `,\n  integrated: css`\n    overflow: hidden;\n    border-radius: ${cssVar.borderRadius};\n  `,\n  neutralText: css`\n    color: ${cssVar.colorText};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n    padding-block: 10px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: var(--jinmi-alert-background);\n    box-shadow: inset 0 0 0 1px var(--jinmi-alert-soft-border);\n\n    @media (width <= 480px) {\n      flex-wrap: wrap;\n    }\n  `,\n  soft: css`\n    background: var(--jinmi-alert-background);\n    box-shadow: inset 0 0 0 1px var(--jinmi-alert-soft-border);\n  `,\n  outlined: css`\n    background: transparent;\n    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  plain: css`\n    padding-block: 2px;\n    padding-inline: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  title: css`\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: inherit;\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  titleDetailed: css`\n    font-weight: 500;\n  `,\n  toneError: css`\n    --jinmi-alert-accent: ${cssVar.colorError};\n    --jinmi-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorError} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorError} 14%, transparent);\n  `,\n  toneInfo: css`\n    --jinmi-alert-accent: ${cssVar.colorInfo};\n    --jinmi-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorInfo} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorInfo} 14%, transparent);\n  `,\n  toneSecondary: css`\n    --jinmi-alert-accent: ${cssVar.colorTextSecondary};\n    --jinmi-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorTextSecondary} 4%,\n      ${cssVar.colorBgContainer}\n    );\n    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorTextSecondary} 12%, transparent);\n  `,\n  toneSuccess: css`\n    --jinmi-alert-accent: ${cssVar.colorSuccess};\n    --jinmi-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorSuccess} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorSuccess} 14%, transparent);\n  `,\n  toneWarning: css`\n    --jinmi-alert-accent: ${cssVar.colorWarning};\n    --jinmi-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorWarning} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --jinmi-alert-soft-border: color-mix(in srgb, ${cssVar.colorWarning} 14%, transparent);\n  `,\n  unifiedRoot: css`\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  banner: css`\n    border-radius: 0;\n    box-shadow: none;\n  `,\n  wrappedAction: css`\n    @media (width <= 480px) {\n      order: 4;\n      width: calc(100% - 30px);\n      margin-block-start: -2px;\n      margin-inline-start: 30px;\n    }\n  `,\n}));\n\nexport const toneVariants = cva('', {\n  defaultVariants: { type: 'info' },\n  variants: {\n    type: {\n      error: styles.toneError,\n      info: styles.toneInfo,\n      secondary: styles.toneSecondary,\n      success: styles.toneSuccess,\n      warning: styles.toneWarning,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [{ class: styles.unifiedRoot, hasExtra: true }],\n  defaultVariants: {\n    banner: false,\n    colorfulText: false,\n    glass: false,\n    hasDescription: false,\n    hasExtra: false,\n    variant: 'soft',\n  },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    colorfulText: { false: styles.neutralText, true: styles.colorfulText },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    hasDescription: { false: styles.centered, true: styles.detailed },\n    hasExtra: { false: null, true: null },\n    variant: {\n      borderless: styles.plain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.plain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const integratedVariants = cva(styles.integrated, {\n  defaultVariants: { banner: false, glass: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.extraPlain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const extraVariants = cva(styles.extra, {\n  defaultVariants: { banner: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.extraBanner },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraPlain,\n      soft: null,\n    },\n  },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n  defaultVariants: { variant: 'soft' },\n  variants: {\n    variant: {\n      borderless: styles.extraHeaderPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraHeaderPlain,\n      soft: null,\n    },\n  },\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+import { IconProps } from "../../Icon/type.mjs";
+import "../../Icon/index.mjs";
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, MouseEventHandler, ReactNode, Ref } from "react";
+//#region src/base-ui/Alert/type.d.ts
+type AlertType = 'success' | 'info' | 'warning' | 'error' | 'secondary';
+type AlertVariant = 'soft' | 'outlined' | 'plain' |
+/** @deprecated Use `soft` instead. */
+'filled' |
+/** @deprecated Use `plain` instead. */
+'borderless';
+type AlertRef = HTMLDivElement;
+interface AlertCloseConfig extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'type'> {
+  /** Called after the alert has been removed from the document. */
+  afterClose?: () => void;
+  /** Custom close affordance. */
+  closeIcon?: ReactNode;
+  /** Called when the close affordance is activated. */
+  onClose?: MouseEventHandler<HTMLButtonElement>;
+}
+interface AlertClassNames {
+  action?: string;
+  /** @deprecated Use `root` instead. */
+  alert?: string;
+  close?: string;
+  container?: string;
+  content?: string;
+  description?: string;
+  extra?: string;
+  extraContent?: string;
+  extraHeader?: string;
+  extraIndicator?: string;
+  icon?: string;
+  root?: string;
+  /** Alias for `content`, matching the former antd semantic part. */
+  section?: string;
+  title?: string;
+}
+interface AlertStyles {
+  action?: CSSProperties;
+  /** @deprecated Use `root` instead. */
+  alert?: CSSProperties;
+  close?: CSSProperties;
+  container?: CSSProperties;
+  content?: CSSProperties;
+  description?: CSSProperties;
+  extra?: CSSProperties;
+  extraContent?: CSSProperties;
+  extraHeader?: CSSProperties;
+  extraIndicator?: CSSProperties;
+  icon?: CSSProperties;
+  root?: CSSProperties;
+  /** Alias for `content`, matching the former antd semantic part. */
+  section?: CSSProperties;
+  title?: CSSProperties;
+}
+interface AlertOwnProps {
+  /** Optional action rendered after the message content. */
+  action?: ReactNode;
+  /** @deprecated Use `closable.afterClose` instead. */
+  afterClose?: () => void;
+  /** Removes the side border and radius for full-width notices. */
+  banner?: boolean;
+  classNames?: AlertClassNames;
+  /** Whether the alert can be dismissed. */
+  closable?: AlertCloseConfig | boolean;
+  /** @deprecated Use `closable.closeIcon` instead. */
+  closeIcon?: ReactNode;
+  /** @deprecated Use `closable.closeIcon` instead. */
+  closeText?: ReactNode;
+  /** Whether the title adopts the semantic color. Neutral text is used by default. */
+  colorfulText?: boolean;
+  /** Supporting detail displayed beneath the title. */
+  description?: ReactNode;
+  /** Optional expandable or isolated detail content. */
+  extra?: ReactNode;
+  /** Whether expandable detail content starts open. */
+  extraDefaultExpand?: boolean;
+  /** Renders detail content as an independent sibling instead of a disclosure. */
+  extraIsolate?: boolean;
+  /** Enables backdrop blur for translucent host surfaces. */
+  glass?: boolean;
+  /** Custom semantic icon. */
+  icon?: IconProps['icon'];
+  /** Props forwarded to the Icon component. */
+  iconProps?: Omit<IconProps, 'icon'>;
+  /** @deprecated Use `title` instead. */
+  message?: ReactNode;
+  /** @deprecated Use `closable.onClose` instead. */
+  onClose?: MouseEventHandler<HTMLButtonElement>;
+  ref?: Ref<AlertRef>;
+  /** Alias for `className`, retained for migration compatibility. */
+  rootClassName?: string;
+  /** Whether the semantic icon is rendered. */
+  showIcon?: boolean;
+  styles?: AlertStyles;
+  text?: {
+    detail?: string;
+  };
+  /** Primary message content. */
+  title?: ReactNode;
+  /** Semantic tone. */
+  type?: AlertType;
+  /** Surface treatment. `filled` and `borderless` remain as migration aliases. */
+  variant?: AlertVariant;
+}
+type NativeAlertProps = Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps | 'children' | 'title'>;
+type AlertProps = AlertOwnProps & NativeAlertProps;
+//#endregion
+export { AlertClassNames, AlertCloseConfig, AlertProps, AlertRef, AlertStyles, AlertType, AlertVariant };
+//# sourceMappingURL=type.d.mts.map

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

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

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

@@ -0,0 +1,141 @@
+"use client";
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { useMergeRefs } from "react-merge-refs";
+//#region src/base-ui/Anchor/Anchor.tsx
+const SCROLL_LOCK_FALLBACK_MS = 1e3;
+const flatten = (items) => items.flatMap((item) => [item, ...flatten(item.children ?? [])]);
+const getTarget = (href) => {
+	const hash = href.split("#")[1];
+	if (!hash) return null;
+	try {
+		return document.getElementById(decodeURIComponent(hash));
+	} catch {
+		return document.getElementById(hash);
+	}
+};
+const isWindow = (container) => container === window;
+const getRelativeTop = (element, container) => element.getBoundingClientRect().top - (isWindow(container) ? 0 : container.getBoundingClientRect().top);
+const getScrollTop = (container) => isWindow(container) ? window.scrollY : container.scrollTop;
+const getActiveKey = (items, container, offset) => {
+	let activeKey = null;
+	let activeTop = -Infinity;
+	for (const item of flatten(items)) {
+		const target = getTarget(item.href);
+		if (!target) continue;
+		const top = getRelativeTop(target, container);
+		if (top <= offset + 1 && top >= activeTop) {
+			activeKey = item.key;
+			activeTop = top;
+		}
+	}
+	return activeKey;
+};
+const Anchor = memo(({ activeKey, className, getContainer, items, offset = 0, onChange, onClick, ref, ...rest }) => {
+	const [mergedActiveKey, setMergedActiveKey] = useMergeState(null, {
+		onChange,
+		value: activeKey
+	});
+	const scrollLockRef = useRef(false);
+	const navRef = useRef(null);
+	const mergedRef = useMergeRefs([ref, navRef]);
+	const [marker, setMarker] = useState();
+	const lockTimerRef = useRef(void 0);
+	const resolveContainer = useEventCallback(() => getContainer?.() ?? window);
+	const setActive = useEventCallback(setMergedActiveKey);
+	const spy = useEventCallback(() => {
+		if (scrollLockRef.current) return;
+		setActive(getActiveKey(items, resolveContainer(), offset));
+	});
+	useEffect(() => {
+		const container = resolveContainer();
+		let frame = 0;
+		const handleScroll = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(spy);
+		};
+		spy();
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			cancelAnimationFrame(frame);
+			container.removeEventListener("scroll", handleScroll);
+		};
+	}, [
+		items,
+		offset,
+		resolveContainer,
+		spy
+	]);
+	useEffect(() => () => clearTimeout(lockTimerRef.current), []);
+	useLayoutEffect(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		const place = () => {
+			const link = [...nav.querySelectorAll("a[data-key]")].find((element) => element.dataset.key === mergedActiveKey);
+			setMarker(link ? {
+				height: link.offsetHeight,
+				insetBlockStart: link.offsetTop
+			} : void 0);
+		};
+		place();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(place);
+		observer.observe(nav);
+		return () => observer.disconnect();
+	}, [items, mergedActiveKey]);
+	const handleClick = (event, item) => {
+		onClick?.(event, item);
+		if (event.defaultPrevented || event.button !== 0) return;
+		if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		const target = getTarget(item.href);
+		if (!target) return;
+		event.preventDefault();
+		const container = resolveContainer();
+		const top = getRelativeTop(target, container) + getScrollTop(container) - offset;
+		const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const release = () => {
+			scrollLockRef.current = false;
+		};
+		scrollLockRef.current = true;
+		setActive(item.key);
+		clearTimeout(lockTimerRef.current);
+		lockTimerRef.current = setTimeout(release, SCROLL_LOCK_FALLBACK_MS);
+		container.addEventListener("scrollend", release, { once: true });
+		container.scrollTo({
+			behavior: reduceMotion ? "auto" : "smooth",
+			top
+		});
+	};
+	const renderList = (list) => /* @__PURE__ */ jsx("ul", {
+		className: styles.list,
+		children: list.map((item) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+			"aria-current": item.key === mergedActiveKey ? "location" : void 0,
+			className: styles.link,
+			"data-key": item.key,
+			href: item.href,
+			title: typeof item.title === "string" ? item.title : void 0,
+			onClick: (event) => handleClick(event, item),
+			children: item.title
+		}), item.children && item.children.length > 0 && renderList(item.children)] }, item.key))
+	});
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cx(styles.root, className),
+		ref: mergedRef,
+		...rest,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: styles.marker,
+			hidden: !marker,
+			style: marker
+		}), renderList(items)]
+	});
+});
+Anchor.displayName = "Anchor";
+//#endregion
+export { Anchor as default };
+
+//# sourceMappingURL=Anchor.mjs.map