@superad/ui 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SuperAd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# SuperAd UI
+
+可扩展的 React 组件库。技术栈为 **React 19 + Ant Design 6 + antd-style**，文档站由 `docs.config.ts` + `src/*/index.mdx` + `demos/` 驱动。
+
+## 快速开始
+
+```bash
+pnpm install
+pnpm dev # 文档站
+pnpm test:run
+pnpm type-check
+pnpm build
+```
+
+业务项目中：
+
+```tsx
+import { Button, Flexbox, ThemeProvider } from '@superad/ui';
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <Flexbox gap={12} horizontal>
+        <Button type="primary">确认</Button>
+        <Button>取消</Button>
+      </Flexbox>
+    </ThemeProvider>
+  );
+}
+```
+
+## 文档站
+
+`pnpm dev` 会启动组件文档站：
+
+- `docs.config.ts` 声明 `atomDirs: [{ dir: 'src' }]`
+- 每个组件的 `index.mdx` 自动变成 `/components/<kebab-name>`
+- 侧栏按 frontmatter 的 `category` 分组
+- MDX 里用 `<Demo of={...} />`、`<Api name="Button" />`
+- 可交互 demo 用 `@superad/ui/storybook` 的 `StoryBook` + `useControls`（Leva）
+
+新增组件：复制 `templates/Component`，写好 `index.mdx` 后刷新文档站即可看到。详见 [docs/add-component.mdx](./docs/add-component.mdx)。

package/es/Button/Button.d.mts

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

package/es/Button/Button.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { variants } from "./style.mjs";
+import { Button } from "antd";
+import { cx, useThemeMode } from "antd-style";
+import { jsx } from "react/jsx-runtime";
+//#region src/Button/Button.tsx
+const Button$1 = ({ icon, variant, glass, shadow, className, type, color, children, ref, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const resolvedVariant = type ? void 0 : variant || (isDarkMode ? "filled" : "outlined");
+	const resolvedColor = color || (resolvedVariant === "filled" ? "default" : void 0);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		className: cx(variants({
+			glass,
+			shadow
+		}), className),
+		color: resolvedColor,
+		icon,
+		ref,
+		type,
+		variant: resolvedVariant,
+		children
+	});
+};
+Button$1.displayName = "SuperadButton";
+//#endregion
+export { Button$1 as default };
+
+//# sourceMappingURL=Button.mjs.map

package/es/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":["Button","AntdButton"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { Button as AntdButton } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { variants } from './style';\nimport type { ButtonProps } from './type';\n\nconst Button: FC<ButtonProps> = ({\n  icon,\n  variant,\n  glass,\n  shadow,\n  className,\n  type,\n  color,\n  children,\n  ref,\n  ...rest\n}) => {\n  const { isDarkMode } = useThemeMode();\n  // 未显式给 type 时按外观派生默认变体：暗色 filled、亮色 outlined\n  const resolvedVariant = type ? undefined : variant || (isDarkMode ? 'filled' : 'outlined');\n  const resolvedColor = color || (resolvedVariant === 'filled' ? 'default' : undefined);\n\n  return (\n    <AntdButton\n      {...rest}\n      className={cx(variants({ glass, shadow }), className)}\n      color={resolvedColor}\n      icon={icon}\n      ref={ref}\n      type={type}\n      variant={resolvedVariant}\n    >\n      {children}\n    </AntdButton>\n  );\n};\n\nButton.displayName = 'SuperadButton';\n\nexport default Button;\n"],"mappings":";;;;;;AASA,MAAMA,YAA2B,EAC/B,MACA,SACA,OACA,QACA,WACA,MACA,OACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,kBAAkB,OAAO,KAAA,IAAY,YAAY,aAAa,WAAW;CAC/E,MAAM,gBAAgB,UAAU,oBAAoB,WAAW,YAAY,KAAA;CAE3E,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,WAAW,GAAG,SAAS;GAAE;GAAO;EAAO,CAAC,GAAG,SAAS;EACpD,OAAO;EACD;EACD;EACC;EACN,SAAS;EAER;CACS,CAAA;AAEhB;AAEA,SAAO,cAAc"}

package/es/Button/index.d.mts

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

package/es/Button/index.d.ts

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

package/es/Button/index.js

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

package/es/Button/index.mjs

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

package/es/Button/style.mjs

@@ -0,0 +1,33 @@
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/Button/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	glass: staticStylish.blur,
+	root: css`
+    &[class*='ant-btn'] > [class*='ant-btn-icon'] {
+      display: flex;
+    }
+  `,
+	shadow: css`
+    box-shadow: ${cssVar.boxShadowTertiary} !important;
+  `
+}));
+const flag = (active) => ({
+	false: null,
+	true: active
+});
+const variants = cva(styles.root, {
+	defaultVariants: {
+		glass: false,
+		shadow: false
+	},
+	variants: {
+		glass: flag(styles.glass),
+		shadow: flag(styles.shadow)
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/Button/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["superadStaticStylish"],"sources":["../../src/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { superadStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  // 毛玻璃直接复用全局 stylish\n  glass: superadStaticStylish.blur,\n  // antd 按钮的图标容器默认不是 flex，图标会偏；这里修齐\n  root: css`\n    &[class*='ant-btn'] > [class*='ant-btn-icon'] {\n      display: flex;\n    }\n  `,\n  shadow: css`\n    box-shadow: ${cssVar.boxShadowTertiary} !important;\n  `,\n}));\n\nconst flag = (active: string) => ({ false: null, true: active });\n\nexport const variants = cva(styles.root, {\n  defaultVariants: { glass: false, shadow: false },\n  variants: {\n    glass: flag(styles.glass),\n    shadow: flag(styles.shadow),\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAE7D,OAAOA,cAAqB;CAE5B,MAAM,GAAG;;;;;CAKT,QAAQ,GAAG;kBACK,OAAO,kBAAkB;;AAE3C,EAAE;AAEF,MAAM,QAAQ,YAAoB;CAAE,OAAO;CAAM,MAAM;AAAO;AAE9D,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EAAE,OAAO;EAAO,QAAQ;CAAM;CAC/C,UAAU;EACR,OAAO,KAAK,OAAO,KAAK;EACxB,QAAQ,KAAK,OAAO,MAAM;CAC5B;AACF,CAAC"}

package/es/Button/type.d.mts

@@ -0,0 +1,21 @@
+import { ButtonProps } from "antd";
+import { ReactNode, Ref } from "react";
+//#region src/Button/type.d.ts
+/** SuperAd button, extending Ant Design Button. */
+interface ButtonProps$1 extends ButtonProps {
+  /**
+   * Frosted glass surface.
+   * @default false
+   */
+  glass?: boolean;
+  icon?: ReactNode;
+  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+  /**
+   * Elevated shadow.
+   * @default false
+   */
+  shadow?: boolean;
+}
+//#endregion
+export { ButtonProps$1 as ButtonProps };
+//# sourceMappingURL=type.d.mts.map

package/es/ConfigProvider/index.d.mts

@@ -0,0 +1,9 @@
+import { I18nContextValue } from "../i18n/types.mjs";
+import { CdnFn, Config, ConfigProviderProps } from "./type.mjs";
+//#region src/ConfigProvider/index.d.ts
+declare const ConfigProvider: import("react").NamedExoticComponent<ConfigProviderProps>;
+declare const useCdnFn: () => CdnFn;
+declare const useI18n: () => I18nContextValue;
+//#endregion
+export { type Config, ConfigProvider as default, useCdnFn, useI18n };
+//# sourceMappingURL=index.d.mts.map

package/es/ConfigProvider/index.d.ts

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

package/es/ConfigProvider/index.js

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

package/es/ConfigProvider/index.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { installGlobalFocusRing } from "../GlobalFocusRing/index.mjs";
+import common_default from "../i18n/resources/en/common.mjs";
+import { genCdnUrl } from "../utils/genCdnUrl.mjs";
+import { jsx } from "react/jsx-runtime";
+import { createContext, memo, use, useEffect, useMemo, useRef, useState } from "react";
+//#region src/ConfigProvider/index.tsx
+const ConfigContext = createContext(null);
+const I18nContext = createContext({
+	locale: "en",
+	t: (key) => key
+});
+const isThenable = (value) => typeof value?.then === "function";
+const defaultResources = [common_default];
+const ConfigProvider = memo(({ children, config, locale, resources }) => {
+	useEffect(() => {
+		if (config?.globalFocusRing === false) return;
+		return installGlobalFocusRing();
+	}, [config?.globalFocusRing]);
+	const fallbackLocale = locale ?? "en";
+	const inputResources = resources ?? defaultResources;
+	const [resolvedResources, setResolvedResources] = useState(() => inputResources && !isThenable(inputResources) ? inputResources : void 0);
+	const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);
+	const latestRequestIdRef = useRef(0);
+	useEffect(() => {
+		const requestId = ++latestRequestIdRef.current;
+		if (isThenable(inputResources)) {
+			const targetLocale = fallbackLocale;
+			inputResources.then((nextResources) => {
+				if (latestRequestIdRef.current !== requestId) return;
+				setResolvedResources(nextResources);
+				setResolvedLocale(targetLocale);
+			}).catch(() => {
+				if (latestRequestIdRef.current !== requestId) return;
+			});
+			return;
+		}
+		setResolvedResources(inputResources);
+		setResolvedLocale(fallbackLocale);
+	}, [fallbackLocale, inputResources]);
+	const currentResources = isThenable(inputResources) ? resolvedResources : inputResources;
+	const currentLocale = isThenable(inputResources) ? resolvedLocale : fallbackLocale;
+	const i18nValue = useMemo(() => {
+		const resourceList = Array.isArray(currentResources) ? currentResources : currentResources ? Object.values(currentResources) : [];
+		const mergedResources = Object.assign({}, ...resourceList);
+		const t = (key) => mergedResources[key] || key;
+		return {
+			locale: currentLocale,
+			t
+		};
+	}, [currentLocale, currentResources]);
+	return /* @__PURE__ */ jsx(I18nContext, {
+		value: i18nValue,
+		children: /* @__PURE__ */ jsx(ConfigContext, {
+			value: config ?? null,
+			children
+		})
+	});
+});
+ConfigProvider.displayName = "SuperadConfigProvider";
+const cdnFallback = ({ pkg, version, path }) => genCdnUrl({
+	path,
+	pkg,
+	proxy: "aliyun",
+	version
+});
+const useCdnFn = () => {
+	const config = use(ConfigContext);
+	if (!config) return cdnFallback;
+	if (config.proxy !== "custom") return ({ pkg, version, path }) => genCdnUrl({
+		path,
+		pkg,
+		proxy: config.proxy,
+		version
+	});
+	return config.customCdnFn || cdnFallback;
+};
+const useI18n = () => use(I18nContext);
+//#endregion
+export { ConfigContext, I18nContext, ConfigProvider as default, useCdnFn, useI18n };
+
+//# sourceMappingURL=index.mjs.map

package/es/ConfigProvider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["en.common"],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, use, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { installGlobalFocusRing } from '@/GlobalFocusRing';\nimport { en } from '@/i18n/resources';\nimport {\n  type I18nContextValue,\n  type TranslationKey,\n  type TranslationResourcesMap,\n} from '@/i18n/types';\nimport { type CDN, genCdnUrl } from '@/utils/genCdnUrl';\n\nimport type { CdnFn, Config, ConfigProviderProps } from './type';\n\nexport type { CdnFn, Config, ConfigProviderProps } from './type';\n\nexport const ConfigContext = createContext<Config | null>(null);\n\nconst I18nContext = createContext<I18nContextValue>({\n  locale: 'en',\n  t: (key: TranslationKey) => key,\n});\n\nconst isThenable = (value: unknown): value is Promise<TranslationResourcesMap> =>\n  typeof (value as { then?: unknown })?.then === 'function';\n\nconst defaultResources: TranslationResourcesMap = [en.common];\n\nconst ConfigProvider = memo<ConfigProviderProps>(({ children, config, locale, resources }) => {\n  useEffect(() => {\n    if (config?.globalFocusRing === false) return;\n    return installGlobalFocusRing();\n  }, [config?.globalFocusRing]);\n\n  const fallbackLocale = locale ?? 'en';\n  const inputResources = resources ?? defaultResources;\n  const [resolvedResources, setResolvedResources] = useState<TranslationResourcesMap | undefined>(\n    () => (inputResources && !isThenable(inputResources) ? inputResources : undefined),\n  );\n  const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);\n  const latestRequestIdRef = useRef(0);\n\n  useEffect(() => {\n    const requestId = ++latestRequestIdRef.current;\n\n    if (isThenable(inputResources)) {\n      const targetLocale = fallbackLocale;\n      inputResources\n        .then((nextResources) => {\n          if (latestRequestIdRef.current !== requestId) return;\n          setResolvedResources(nextResources);\n          setResolvedLocale(targetLocale);\n        })\n        .catch(() => {\n          if (latestRequestIdRef.current !== requestId) return;\n        });\n      return;\n    }\n\n    // 非 thenable 时这两个写入对本次渲染不可见（currentResources / currentLocale 会直接\n    // 由 props 推导），但保留它们能让随后到达的 thenable 先显示上一份资源而不是空白。\n    /* eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n    setResolvedResources(inputResources);\n    /* eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n    setResolvedLocale(fallbackLocale);\n  }, [fallbackLocale, inputResources]);\n\n  const currentResources = isThenable(inputResources) ? resolvedResources : inputResources;\n  const currentLocale = isThenable(inputResources) ? resolvedLocale : fallbackLocale;\n\n  const i18nValue = useMemo((): I18nContextValue => {\n    const resourceList = Array.isArray(currentResources)\n      ? currentResources\n      : currentResources\n        ? Object.values(currentResources)\n        : [];\n    const mergedResources = Object.assign({}, ...resourceList);\n    const t = (key: TranslationKey): string => mergedResources[key] || key;\n    return { locale: currentLocale, t };\n  }, [currentLocale, currentResources]);\n\n  return (\n    <I18nContext value={i18nValue}>\n      <ConfigContext value={config ?? null}>{children}</ConfigContext>\n    </I18nContext>\n  );\n});\n\nConfigProvider.displayName = 'SuperadConfigProvider';\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n  genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n  const config = use(ConfigContext);\n  if (!config) return cdnFallback;\n  if (config.proxy !== 'custom') {\n    return ({ pkg, version, path }) =>\n      genCdnUrl({ path, pkg, proxy: config.proxy as CDN, version });\n  }\n  return config.customCdnFn || cdnFallback;\n};\n\nexport const useI18n = () => use(I18nContext);\n\nexport { I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;;AAiBA,MAAa,gBAAgB,cAA6B,IAAI;AAE9D,MAAM,cAAc,cAAgC;CAClD,QAAQ;CACR,IAAI,QAAwB;AAC9B,CAAC;AAED,MAAM,cAAc,UAClB,OAAQ,OAA8B,SAAS;AAEjD,MAAM,mBAA4C,CAACA,cAAS;AAE5D,MAAM,iBAAiB,MAA2B,EAAE,UAAU,QAAQ,QAAQ,gBAAgB;CAC5F,gBAAgB;EACd,IAAI,QAAQ,oBAAoB,OAAO;EACvC,OAAO,uBAAuB;CAChC,GAAG,CAAC,QAAQ,eAAe,CAAC;CAE5B,MAAM,iBAAiB,UAAU;CACjC,MAAM,iBAAiB,aAAa;CACpC,MAAM,CAAC,mBAAmB,wBAAwB,eACzC,kBAAkB,CAAC,WAAW,cAAc,IAAI,iBAAiB,KAAA,CAC1E;CACA,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,cAAc;CACnE,MAAM,qBAAqB,OAAO,CAAC;CAEnC,gBAAgB;EACd,MAAM,YAAY,EAAE,mBAAmB;EAEvC,IAAI,WAAW,cAAc,GAAG;GAC9B,MAAM,eAAe;GACrB,eACG,MAAM,kBAAkB;IACvB,IAAI,mBAAmB,YAAY,WAAW;IAC9C,qBAAqB,aAAa;IAClC,kBAAkB,YAAY;GAChC,CAAC,CAAC,CACD,YAAY;IACX,IAAI,mBAAmB,YAAY,WAAW;GAChD,CAAC;GACH;EACF;EAKA,qBAAqB,cAAc;EAEnC,kBAAkB,cAAc;CAClC,GAAG,CAAC,gBAAgB,cAAc,CAAC;CAEnC,MAAM,mBAAmB,WAAW,cAAc,IAAI,oBAAoB;CAC1E,MAAM,gBAAgB,WAAW,cAAc,IAAI,iBAAiB;CAEpE,MAAM,YAAY,cAAgC;EAChD,MAAM,eAAe,MAAM,QAAQ,gBAAgB,IAC/C,mBACA,mBACE,OAAO,OAAO,gBAAgB,IAC9B,CAAC;EACP,MAAM,kBAAkB,OAAO,OAAO,CAAC,GAAG,GAAG,YAAY;EACzD,MAAM,KAAK,QAAgC,gBAAgB,QAAQ;EACnE,OAAO;GAAE,QAAQ;GAAe;EAAE;CACpC,GAAG,CAAC,eAAe,gBAAgB,CAAC;CAEpC,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,oBAAC,eAAD;GAAe,OAAO,UAAU;GAAO;EAAwB,CAAA;CACpD,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc;AAE7B,MAAM,eAAsB,EAAE,KAAK,SAAS,WAC1C,UAAU;CAAE;CAAM;CAAK,OAAO;CAAU;AAAQ,CAAC;AAEnD,MAAa,iBAAwB;CACnC,MAAM,SAAS,IAAI,aAAa;CAChC,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,OAAO,UAAU,UACnB,QAAQ,EAAE,KAAK,SAAS,WACtB,UAAU;EAAE;EAAM;EAAK,OAAO,OAAO;EAAc;CAAQ,CAAC;CAEhE,OAAO,OAAO,eAAe;AAC/B;AAEA,MAAa,gBAAgB,IAAI,WAAW"}

package/es/ConfigProvider/type.d.mts

@@ -0,0 +1,24 @@
+import { TranslationResourcesInput } from "../i18n/types.mjs";
+import { CDN, CdnApi } from "../utils/genCdnUrl.mjs";
+import { ElementType, ReactNode } from "react";
+//#region src/ConfigProvider/type.d.ts
+type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+interface Config {
+  aAs?: ElementType;
+  customCdnFn?: CdnFn;
+  /** @default true */
+  globalFocusRing?: boolean;
+  imgAs?: ElementType;
+  imgUnoptimized?: boolean;
+  proxy?: CDN | 'custom';
+}
+interface ConfigProviderProps {
+  children: ReactNode;
+  config?: Config;
+  /** @default en */
+  locale?: string;
+  resources?: TranslationResourcesInput;
+}
+//#endregion
+export { CdnFn, Config, ConfigProviderProps };
+//# sourceMappingURL=type.d.mts.map

package/es/DraggablePanel/DraggablePanel.d.mts

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

package/es/DraggablePanel/DraggablePanel.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { styles } from "./style.mjs";
+import { cx } from "antd-style";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useState } from "react";
+import { Resizable } from "re-resizable";
+//#region src/DraggablePanel/DraggablePanel.tsx
+const chevronRotate = {
+	bottom: {
+		collapsed: 90,
+		expanded: -90
+	},
+	left: {
+		collapsed: 0,
+		expanded: 180
+	},
+	right: {
+		collapsed: 180,
+		expanded: 0
+	},
+	top: {
+		collapsed: -90,
+		expanded: 90
+	}
+};
+const Chevron = ({ rotate }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": true,
+	fill: "none",
+	height: "14",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "2",
+	style: { transform: `rotate(${rotate}deg)` },
+	viewBox: "0 0 24 24",
+	width: "14",
+	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+});
+const DraggablePanel = memo(({ children, className, defaultExpand = true, defaultSize, expandable = true, maxWidth = 480, minHeight = 180, minWidth = 280, onExpandChange, onSizeChange, placement = "right", style }) => {
+	const isVertical = placement === "top" || placement === "bottom";
+	const [expand, setExpand] = useState(defaultExpand);
+	const [size, setSize] = useState({
+		height: defaultSize?.height ?? minHeight,
+		width: defaultSize?.width ?? minWidth
+	});
+	const toggle = useCallback(() => {
+		setExpand((current) => {
+			const next = !current;
+			onExpandChange?.(next);
+			return next;
+		});
+	}, [onExpandChange]);
+	const handleClass = placement === "bottom" ? styles.handleBottom : placement === "top" ? styles.handleTop : placement === "left" ? styles.handleLeft : styles.handleRight;
+	const panelSize = {
+		height: isVertical ? expand ? size.height : 0 : "100%",
+		width: isVertical ? "100%" : expand ? size.width : 0
+	};
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cx(styles.root, isVertical && styles.rootBottom, className),
+		"data-expand": expand,
+		"data-placement": placement,
+		children: [expandable ? /* @__PURE__ */ jsx("button", {
+			"aria-expanded": expand,
+			"aria-label": expand ? "Collapse panel" : "Expand panel",
+			className: cx(styles.handle, handleClass),
+			type: "button",
+			onClick: toggle,
+			children: /* @__PURE__ */ jsx(Chevron, { rotate: expand ? chevronRotate[placement].expanded : chevronRotate[placement].collapsed })
+		}) : null, /* @__PURE__ */ jsx(Resizable, {
+			className: styles.panel,
+			maxWidth: isVertical ? "100%" : maxWidth,
+			minHeight: isVertical ? expand ? minHeight : 0 : void 0,
+			minWidth: isVertical ? void 0 : expand ? minWidth : 0,
+			size: panelSize,
+			style,
+			enable: {
+				bottom: placement === "top" && expand,
+				bottomLeft: false,
+				bottomRight: false,
+				left: placement === "right" && expand,
+				right: placement === "left" && expand,
+				top: placement === "bottom" && expand,
+				topLeft: false,
+				topRight: false
+			},
+			onResizeStop: (_event, _direction, element, delta) => {
+				setSize({
+					height: element.offsetHeight,
+					width: element.offsetWidth
+				});
+				onSizeChange?.(delta, {
+					height: element.style.height,
+					width: element.style.width
+				});
+			},
+			children: expand ? children : null
+		})]
+	});
+});
+DraggablePanel.displayName = "DraggablePanel";
+//#endregion
+export { DraggablePanel as default };
+
+//# sourceMappingURL=DraggablePanel.mjs.map

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanel.mjs","names":[],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Resizable } from 're-resizable';\nimport { type CSSProperties, memo, useCallback, useState } from 'react';\n\nimport { styles } from './style';\nimport type { DraggablePanelPlacement, DraggablePanelProps } from './type';\n\nconst chevronRotate: Record<DraggablePanelPlacement, { collapsed: number; expanded: number }> = {\n  bottom: { collapsed: 90, expanded: -90 },\n  left: { collapsed: 0, expanded: 180 },\n  right: { collapsed: 180, expanded: 0 },\n  top: { collapsed: -90, expanded: 90 },\n};\n\nconst Chevron = ({ rotate }: { rotate: number }) => (\n  <svg\n    aria-hidden\n    fill=\"none\"\n    height=\"14\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth=\"2\"\n    style={{ transform: `rotate(${rotate}deg)` }}\n    viewBox=\"0 0 24 24\"\n    width=\"14\"\n  >\n    <path d=\"m15 18-6-6 6-6\" />\n  </svg>\n);\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    children,\n    className,\n    defaultExpand = true,\n    defaultSize,\n    expandable = true,\n    maxWidth = 480,\n    minHeight = 180,\n    minWidth = 280,\n    onExpandChange,\n    onSizeChange,\n    placement = 'right',\n    style,\n  }) => {\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const [expand, setExpand] = useState(defaultExpand);\n    const [size, setSize] = useState({\n      height: defaultSize?.height ?? minHeight,\n      width: defaultSize?.width ?? minWidth,\n    });\n\n    const toggle = useCallback(() => {\n      setExpand((current) => {\n        const next = !current;\n        onExpandChange?.(next);\n        return next;\n      });\n    }, [onExpandChange]);\n\n    const handleClass =\n      placement === 'bottom'\n        ? styles.handleBottom\n        : placement === 'top'\n          ? styles.handleTop\n          : placement === 'left'\n            ? styles.handleLeft\n            : styles.handleRight;\n\n    const panelSize = {\n      height: isVertical ? (expand ? size.height : 0) : '100%',\n      width: isVertical ? '100%' : expand ? size.width : 0,\n    } as CSSProperties;\n\n    return (\n      <aside\n        className={cx(styles.root, isVertical && styles.rootBottom, className)}\n        data-expand={expand}\n        data-placement={placement}\n      >\n        {expandable ? (\n          <button\n            aria-expanded={expand}\n            aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n            className={cx(styles.handle, handleClass)}\n            type=\"button\"\n            onClick={toggle}\n          >\n            <Chevron\n              rotate={\n                expand ? chevronRotate[placement].expanded : chevronRotate[placement].collapsed\n              }\n            />\n          </button>\n        ) : null}\n        <Resizable\n          className={styles.panel}\n          maxWidth={isVertical ? '100%' : maxWidth}\n          minHeight={isVertical ? (expand ? minHeight : 0) : undefined}\n          minWidth={isVertical ? undefined : expand ? minWidth : 0}\n          size={panelSize}\n          style={style}\n          enable={{\n            bottom: placement === 'top' && expand,\n            bottomLeft: false,\n            bottomRight: false,\n            left: placement === 'right' && expand,\n            right: placement === 'left' && expand,\n            top: placement === 'bottom' && expand,\n            topLeft: false,\n            topRight: false,\n          }}\n          onResizeStop={(_event, _direction, element, delta) => {\n            setSize({\n              height: element.offsetHeight,\n              width: element.offsetWidth,\n            });\n            onSizeChange?.(delta, {\n              height: element.style.height,\n              width: element.style.width,\n            });\n          }}\n        >\n          {expand ? children : null}\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":";;;;;;;AASA,MAAM,gBAA0F;CAC9F,QAAQ;EAAE,WAAW;EAAI,UAAU;CAAI;CACvC,MAAM;EAAE,WAAW;EAAG,UAAU;CAAI;CACpC,OAAO;EAAE,WAAW;EAAK,UAAU;CAAE;CACrC,KAAK;EAAE,WAAW;EAAK,UAAU;CAAG;AACtC;AAEA,MAAM,WAAW,EAAE,aACjB,oBAAC,OAAD;CACE,eAAA;CACA,MAAK;CACL,QAAO;CACP,QAAO;CACP,eAAc;CACd,gBAAe;CACf,aAAY;CACZ,OAAO,EAAE,WAAW,UAAU,OAAO,MAAM;CAC3C,SAAQ;CACR,OAAM;CAEN,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;AACvB,CAAA;AAGP,MAAM,iBAAiB,MACpB,EACC,UACA,WACA,gBAAgB,MAChB,aACA,aAAa,MACb,WAAW,KACX,YAAY,KACZ,WAAW,KACX,gBACA,cACA,YAAY,SACZ,YACI;CACJ,MAAM,aAAa,cAAc,SAAS,cAAc;CACxD,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,CAAC,MAAM,WAAW,SAAS;EAC/B,QAAQ,aAAa,UAAU;EAC/B,OAAO,aAAa,SAAS;CAC/B,CAAC;CAED,MAAM,SAAS,kBAAkB;EAC/B,WAAW,YAAY;GACrB,MAAM,OAAO,CAAC;GACd,iBAAiB,IAAI;GACrB,OAAO;EACT,CAAC;CACH,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,cACJ,cAAc,WACV,OAAO,eACP,cAAc,QACZ,OAAO,YACP,cAAc,SACZ,OAAO,aACP,OAAO;CAEjB,MAAM,YAAY;EAChB,QAAQ,aAAc,SAAS,KAAK,SAAS,IAAK;EAClD,OAAO,aAAa,SAAS,SAAS,KAAK,QAAQ;CACrD;CAEA,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,OAAO,MAAM,cAAc,OAAO,YAAY,SAAS;EACrE,eAAa;EACb,kBAAgB;EAHlB,UAAA,CAKG,aACC,oBAAC,UAAD;GACE,iBAAe;GACf,cAAY,SAAS,mBAAmB;GACxC,WAAW,GAAG,OAAO,QAAQ,WAAW;GACxC,MAAK;GACL,SAAS;GAET,UAAA,oBAAC,SAAD,EACE,QACE,SAAS,cAAc,UAAU,CAAC,WAAW,cAAc,UAAU,CAAC,UAEzE,CAAA;EACK,CAAA,IACN,MACJ,oBAAC,WAAD;GACE,WAAW,OAAO;GAClB,UAAU,aAAa,SAAS;GAChC,WAAW,aAAc,SAAS,YAAY,IAAK,KAAA;GACnD,UAAU,aAAa,KAAA,IAAY,SAAS,WAAW;GACvD,MAAM;GACC;GACP,QAAQ;IACN,QAAQ,cAAc,SAAS;IAC/B,YAAY;IACZ,aAAa;IACb,MAAM,cAAc,WAAW;IAC/B,OAAO,cAAc,UAAU;IAC/B,KAAK,cAAc,YAAY;IAC/B,SAAS;IACT,UAAU;GACZ;GACA,eAAe,QAAQ,YAAY,SAAS,UAAU;IACpD,QAAQ;KACN,QAAQ,QAAQ;KAChB,OAAO,QAAQ;IACjB,CAAC;IACD,eAAe,OAAO;KACpB,QAAQ,QAAQ,MAAM;KACtB,OAAO,QAAQ,MAAM;IACvB,CAAC;GACH;GAEC,UAAA,SAAS,WAAW;EACZ,CAAA,CACN;;AAEX,CACF;AAEA,eAAe,cAAc"}

package/es/DraggablePanel/index.d.mts

@@ -0,0 +1,3 @@
+import { DraggablePanelPlacement, DraggablePanelProps } from "./type.mjs";
+import DraggablePanel from "./DraggablePanel.mjs";
+export { type DraggablePanelPlacement, type DraggablePanelProps, DraggablePanel as default };

package/es/DraggablePanel/index.d.ts

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

package/es/DraggablePanel/index.js

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

package/es/DraggablePanel/index.mjs

@@ -0,0 +1,3 @@
+"use client";
+import DraggablePanel from "./DraggablePanel.mjs";
+export { DraggablePanel as default };

package/es/DraggablePanel/style.mjs

@@ -0,0 +1,86 @@
+import { createStaticStyles } from "antd-style";
+//#region src/DraggablePanel/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	handle: css`
+    cursor: pointer;
+
+    position: absolute;
+    z-index: 10;
+
+    display: grid;
+    place-items: center;
+
+    width: 1rem;
+    height: 3.375rem;
+    padding: 0;
+    border: 0;
+    border-radius: 0.5rem;
+
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorBgElevated};
+    box-shadow: ${cssVar.boxShadowTertiary};
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	handleBottom: css`
+    inset-block-start: -0.5rem;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    width: 3.375rem;
+    height: 1rem;
+  `,
+	handleLeft: css`
+    inset-block-start: 0.75rem;
+    inset-inline-end: 0.25rem;
+    height: 2rem;
+  `,
+	handleRight: css`
+    inset-block-start: 0.75rem;
+    inset-inline-start: 0.25rem;
+    height: 2rem;
+  `,
+	handleTop: css`
+    inset-block-end: -0.5rem;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    width: 3.375rem;
+    height: 1rem;
+  `,
+	panel: css`
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    background: ${cssVar.colorBgLayout};
+  `,
+	root: css`
+    position: relative;
+
+    display: flex;
+    flex: none;
+
+    min-width: 0;
+    height: 100%;
+
+    &[data-expand='false'][data-placement='right'] button {
+      inset-inline-start: -0.5rem;
+    }
+
+    &[data-expand='false'][data-placement='left'] button {
+      inset-inline-end: -0.5rem;
+    }
+  `,
+	rootBottom: css`
+    width: 100%;
+    height: auto;
+    min-height: 0;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/DraggablePanel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  handle: css`\n    cursor: pointer;\n\n    position: absolute;\n    z-index: 10;\n\n    display: grid;\n    place-items: center;\n\n    width: 1rem;\n    height: 3.375rem;\n    padding: 0;\n    border: 0;\n    border-radius: 0.5rem;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  handleBottom: css`\n    inset-block-start: -0.5rem;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 3.375rem;\n    height: 1rem;\n  `,\n  handleLeft: css`\n    inset-block-start: 0.75rem;\n    inset-inline-end: 0.25rem;\n    height: 2rem;\n  `,\n  handleRight: css`\n    inset-block-start: 0.75rem;\n    inset-inline-start: 0.25rem;\n    height: 2rem;\n  `,\n  handleTop: css`\n    inset-block-end: -0.5rem;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 3.375rem;\n    height: 1rem;\n  `,\n  panel: css`\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n    background: ${cssVar.colorBgLayout};\n  `,\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex: none;\n\n    min-width: 0;\n    height: 100%;\n\n    &[data-expand='false'][data-placement='right'] button {\n      inset-inline-start: -0.5rem;\n    }\n\n    &[data-expand='false'][data-placement='left'] button {\n      inset-inline-end: -0.5rem;\n    }\n  `,\n  rootBottom: css`\n    width: 100%;\n    height: auto;\n    min-height: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;;;;;aAeA,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;eAG5B,OAAO,UAAU;;;CAG9B,cAAc,GAAG;;;;;;;;CAQjB,YAAY,GAAG;;;;;CAKf,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;;;;CAQd,OAAO,GAAG;;;;kBAIM,OAAO,cAAc;;CAErC,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBT,YAAY,GAAG;;;;;AAKjB,EAAE"}

package/es/DraggablePanel/type.d.mts

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from "react";
+import { NumberSize, Size } from "re-resizable";
+//#region src/DraggablePanel/type.d.ts
+type DraggablePanelPlacement = 'right' | 'left' | 'top' | 'bottom';
+/** Resizable side panel used by StoryBook and layout chrome. */
+interface DraggablePanelProps {
+  children?: ReactNode;
+  className?: string;
+  /** @default true */
+  defaultExpand?: boolean;
+  defaultSize?: Partial<Size>;
+  /** @default true */
+  expandable?: boolean;
+  maxWidth?: number | string;
+  /** @default 180 */
+  minHeight?: number;
+  /** @default 280 */
+  minWidth?: number;
+  onExpandChange?: (expand: boolean) => void;
+  onSizeChange?: (delta: NumberSize, size?: Size) => void;
+  /** @default right */
+  placement?: DraggablePanelPlacement;
+  style?: CSSProperties;
+}
+//#endregion
+export { DraggablePanelPlacement, DraggablePanelProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Flex/Center.d.mts

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

package/es/Flex/Center.mjs

@@ -0,0 +1,14 @@
+import FlexBasic_default from "./FlexBasic.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Flex/Center.tsx
+const Center = ({ children, ref, ...props }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	...props,
+	align: "center",
+	justify: "center",
+	ref,
+	children
+});
+//#endregion
+export { Center as default };
+
+//# sourceMappingURL=Center.mjs.map

package/es/Flex/Center.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.mjs","names":["FlexBasic"],"sources":["../../src/Flex/Center.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport FlexBasic from './FlexBasic';\nimport type { CenterProps } from './type';\n\nconst Center: FC<CenterProps> = ({ children, ref, ...props }) => (\n  <FlexBasic {...props} align=\"center\" justify=\"center\" ref={ref}>\n    {children}\n  </FlexBasic>\n);\n\nexport default Center;\n"],"mappings":";;;AAKA,MAAM,UAA2B,EAAE,UAAU,KAAK,GAAG,YACnD,oBAACA,mBAAD;CAAW,GAAI;CAAO,OAAM;CAAS,SAAQ;CAAc;CACxD;AACQ,CAAA"}

package/es/Flex/FlexBasic.d.mts

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