@lobehub/ui 5.36.3 → 5.36.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Image/Image.mjs +2 -3
- package/es/Image/Image.mjs.map +1 -1
- package/es/Skeleton/Skeleton.mjs +3 -0
- package/es/Skeleton/Skeleton.mjs.map +1 -1
- package/es/Skeleton/SkeletonAvatar.d.mts +3 -0
- package/es/Skeleton/SkeletonAvatar.mjs +3 -0
- package/es/Skeleton/SkeletonAvatar.mjs.map +1 -1
- package/es/Skeleton/SkeletonBlock.d.mts +3 -0
- package/es/Skeleton/SkeletonBlock.mjs +3 -0
- package/es/Skeleton/SkeletonBlock.mjs.map +1 -1
- package/es/Skeleton/SkeletonButton.d.mts +3 -0
- package/es/Skeleton/SkeletonButton.mjs +3 -0
- package/es/Skeleton/SkeletonButton.mjs.map +1 -1
- package/es/Skeleton/SkeletonParagraph.d.mts +3 -0
- package/es/Skeleton/SkeletonParagraph.mjs +3 -0
- package/es/Skeleton/SkeletonParagraph.mjs.map +1 -1
- package/es/Skeleton/SkeletonTags.d.mts +3 -0
- package/es/Skeleton/SkeletonTags.mjs +3 -0
- package/es/Skeleton/SkeletonTags.mjs.map +1 -1
- package/es/Skeleton/SkeletonTitle.d.mts +3 -0
- package/es/Skeleton/SkeletonTitle.mjs +3 -0
- package/es/Skeleton/SkeletonTitle.mjs.map +1 -1
- package/es/Video/index.mjs +3 -4
- package/es/Video/index.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +2 -2
- package/es/base-ui/Skeleton/Skeleton.mjs +20 -0
- package/es/base-ui/Skeleton/Skeleton.mjs.map +1 -0
- package/es/base-ui/Skeleton/SkeletonAvatar.d.mts +7 -0
- package/es/base-ui/Skeleton/SkeletonAvatar.mjs +19 -0
- package/es/base-ui/Skeleton/SkeletonAvatar.mjs.map +1 -0
- package/es/base-ui/Skeleton/SkeletonText.d.mts +7 -0
- package/es/base-ui/Skeleton/SkeletonText.mjs +36 -0
- package/es/base-ui/Skeleton/SkeletonText.mjs.map +1 -0
- package/es/base-ui/Skeleton/index.d.mts +13 -0
- package/es/base-ui/Skeleton/index.mjs +11 -0
- package/es/base-ui/Skeleton/index.mjs.map +1 -0
- package/es/base-ui/Skeleton/style.mjs +79 -0
- package/es/base-ui/Skeleton/style.mjs.map +1 -0
- package/es/base-ui/Skeleton/type.d.mts +23 -0
- package/es/base-ui/index.d.mts +5 -1
- package/es/base-ui/index.mjs +4 -1
- package/es/eslint/index.mjs +27 -1
- package/es/eslint/index.mjs.map +1 -1
- package/es/hooks/useNativeButton.mjs +1 -0
- package/es/hooks/useNativeButton.mjs.map +1 -1
- package/es/index.mjs +7 -7
- package/es/static-css/baseline.mjs +0 -1
- package/es/static-css/baseline.mjs.map +1 -1
- package/package.json +1 -1
package/es/Image/Image.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
-
import
|
|
3
|
+
import Skeleton from "../base-ui/Skeleton/index.mjs";
|
|
4
4
|
import { usePreviewGroupContext } from "./PreviewGroup.mjs";
|
|
5
5
|
import { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from "./style.mjs";
|
|
6
6
|
import { openPreview } from "./viewer/registry.mjs";
|
|
@@ -105,8 +105,7 @@ const Image = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWid
|
|
|
105
105
|
const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;
|
|
106
106
|
if (isLoading) return /* @__PURE__ */ jsx("div", {
|
|
107
107
|
onClick,
|
|
108
|
-
children: /* @__PURE__ */ jsx(
|
|
109
|
-
active: true,
|
|
108
|
+
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
110
109
|
height: resolvedHeight,
|
|
111
110
|
style: {
|
|
112
111
|
maxHeight,
|
package/es/Image/Image.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.mjs","names":["Flexbox"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n memo,\n type MouseEvent,\n type PointerEvent,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"Image.mjs","names":["Flexbox"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n memo,\n type MouseEvent,\n type PointerEvent,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport { Flexbox } from '@/Flex';\n\nimport { usePreviewGroupContext } from './PreviewGroup';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImagePreviewOptions, ImageProps } from './type';\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type PreviewEntry } from './viewer/registry';\n\nconst resolvePreview = (\n groupPreview: boolean | ImagePreviewOptions | undefined,\n imagePreview: boolean | ImagePreviewOptions | undefined,\n): ImagePreviewOptions | false => {\n if (imagePreview === false) return false;\n if (imagePreview === undefined && groupPreview === false) return false;\n\n const groupOptions = typeof groupPreview === 'object' ? groupPreview : undefined;\n const imageOptions = typeof imagePreview === 'object' ? imagePreview : undefined;\n\n return { ...groupOptions, ...imageOptions };\n};\n\nconst Image = memo<ImageProps>(\n ({\n ref,\n style,\n preview,\n isLoading,\n maxHeight = '100%',\n maxWidth = '100%',\n minHeight,\n minWidth,\n actions,\n className,\n alwaysShowActions,\n variant = 'filled',\n objectFit = 'cover',\n classNames,\n styles: customStyles,\n onClick,\n onError,\n onPointerDown,\n width,\n height,\n size,\n src,\n alt,\n loading = 'lazy',\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const [hasError, setHasError] = useState(false);\n const lastSrcRef = useRef(src);\n const imgRef = useRef<HTMLImageElement>(null);\n const preOpenFocusRef = useRef<HTMLElement | null>(null);\n const id = useId();\n const group = usePreviewGroupContext();\n\n if (lastSrcRef.current !== src) {\n lastSrcRef.current = src;\n if (hasError) setHasError(false);\n }\n\n const resolvedWidth = width ?? size;\n const resolvedHeight = height ?? size;\n\n const resolvedPreview = resolvePreview(group?.preview, preview);\n const previewEnabled = resolvedPreview !== false;\n const resolvedOptions = useMemo(\n () =>\n previewEnabled\n ? {\n autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n defaultZoom: 'auto' as const,\n maxScale: DEFAULT_MAX_SCALE,\n ...resolvedPreview,\n }\n : undefined,\n [previewEnabled, resolvedPreview],\n );\n const previewSrc = resolvedOptions?.src;\n\n useEffect(() => {\n if (!group) return;\n return group.register({\n getElement: () => imgRef.current,\n id,\n options: resolvedOptions,\n previewSrc,\n src: src ?? '',\n });\n }, [group, id, src, previewSrc, resolvedOptions]);\n\n const handleError = useCallback(\n (event: SyntheticEvent<HTMLImageElement>) => {\n setHasError(true);\n onError?.(event);\n },\n [onError],\n );\n\n const handlePointerDown = useCallback(\n (event: PointerEvent<HTMLImageElement>) => {\n onPointerDown?.(event);\n const active = document.activeElement;\n preOpenFocusRef.current =\n active instanceof HTMLElement &&\n active !== document.body &&\n active !== document.documentElement\n ? active\n : null;\n },\n [onPointerDown],\n );\n\n const handleClick = useCallback(\n (event: MouseEvent<HTMLImageElement>) => {\n onClick?.(event);\n if (!previewEnabled || !imgRef.current || !resolvedOptions) return;\n const clickedEntry: PreviewEntry = {\n element: imgRef.current,\n options: resolvedOptions,\n previewSrc,\n src: imgRef.current.currentSrc || imgRef.current.src,\n };\n const openerFocusElement = preOpenFocusRef.current;\n\n if (!group) {\n openPreview(clickedEntry, undefined, 0, openerFocusElement);\n return;\n }\n\n const galleryEntries: PreviewEntry[] = [];\n let clickedIndex = -1;\n for (const groupEntry of group.getEntries()) {\n const element = groupEntry.getElement();\n if (!element || !groupEntry.options) continue;\n if (element === imgRef.current) clickedIndex = galleryEntries.length;\n galleryEntries.push({\n element,\n options: groupEntry.options,\n previewSrc: groupEntry.previewSrc,\n src: element.currentSrc || element.src,\n });\n }\n openPreview(\n clickedEntry,\n galleryEntries,\n clickedIndex >= 0 ? clickedIndex : 0,\n openerFocusElement,\n );\n },\n [onClick, previewEnabled, resolvedOptions, previewSrc, group],\n );\n\n const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n\n if (isLoading)\n return (\n <div onClick={onClick}>\n <Skeleton\n height={resolvedHeight}\n style={{ maxHeight, maxWidth, minHeight, minWidth }}\n width={resolvedWidth}\n />\n </div>\n );\n\n return (\n <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n {actions && (\n <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n {actions}\n </div>\n )}\n <div className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n <img\n alt={alt}\n className={cx(styles.image, previewEnabled && styles.previewable, classNames?.image)}\n height={resolvedHeight}\n loading={loading}\n ref={imgRef}\n src={hasError ? (isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT) : src}\n width={resolvedWidth}\n style={{\n height: resolvedHeight,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n objectFit,\n width: resolvedWidth,\n ...customStyles?.image,\n }}\n onClick={handleClick}\n onError={handleError}\n onPointerDown={handlePointerDown}\n {...rest}\n />\n </div>\n {previewEnabled && <PreviewOutlet elementRef={imgRef} />}\n </Flexbox>\n );\n },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;;;AA0BA,MAAM,kBACJ,cACA,iBACgC;CAChC,IAAI,iBAAiB,OAAO,OAAO;CACnC,IAAI,iBAAiB,KAAA,KAAa,iBAAiB,OAAO,OAAO;CAEjE,MAAM,eAAe,OAAO,iBAAiB,WAAW,eAAe,KAAA;CACvE,MAAM,eAAe,OAAO,iBAAiB,WAAW,eAAe,KAAA;CAEvE,OAAO;EAAE,GAAG;EAAc,GAAG;CAAa;AAC5C;AAEA,MAAM,QAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,SACA,eACA,OACA,QACA,MACA,KACA,KACA,UAAU,QACV,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,aAAa,OAAO,GAAG;CAC7B,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,kBAAkB,OAA2B,IAAI;CACvD,MAAM,KAAK,MAAM;CACjB,MAAM,QAAQ,uBAAuB;CAErC,IAAI,WAAW,YAAY,KAAK;EAC9B,WAAW,UAAU;EACrB,IAAI,UAAU,YAAY,KAAK;CACjC;CAEA,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,UAAU;CAEjC,MAAM,kBAAkB,eAAe,OAAO,SAAS,OAAO;CAC9D,MAAM,iBAAiB,oBAAoB;CAC3C,MAAM,kBAAkB,cAEpB,iBACI;EACE,mBAAA;EACA,aAAa;EACb,UAAA;EACA,GAAG;CACL,IACA,KAAA,GACN,CAAC,gBAAgB,eAAe,CAClC;CACA,MAAM,aAAa,iBAAiB;CAEpC,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,SAAS;GACpB,kBAAkB,OAAO;GACzB;GACA,SAAS;GACT;GACA,KAAK,OAAO;EACd,CAAC;CACH,GAAG;EAAC;EAAO;EAAI;EAAK;EAAY;CAAe,CAAC;CAEhD,MAAM,cAAc,aACjB,UAA4C;EAC3C,YAAY,IAAI;EAChB,UAAU,KAAK;CACjB,GACA,CAAC,OAAO,CACV;CAEA,MAAM,oBAAoB,aACvB,UAA0C;EACzC,gBAAgB,KAAK;EACrB,MAAM,SAAS,SAAS;EACxB,gBAAgB,UACd,kBAAkB,eAClB,WAAW,SAAS,QACpB,WAAW,SAAS,kBAChB,SACA;CACR,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,cAAc,aACjB,UAAwC;EACvC,UAAU,KAAK;EACf,IAAI,CAAC,kBAAkB,CAAC,OAAO,WAAW,CAAC,iBAAiB;EAC5D,MAAM,eAA6B;GACjC,SAAS,OAAO;GAChB,SAAS;GACT;GACA,KAAK,OAAO,QAAQ,cAAc,OAAO,QAAQ;EACnD;EACA,MAAM,qBAAqB,gBAAgB;EAE3C,IAAI,CAAC,OAAO;GACV,YAAY,cAAc,KAAA,GAAW,GAAG,kBAAkB;GAC1D;EACF;EAEA,MAAM,iBAAiC,CAAC;EACxC,IAAI,eAAe;EACnB,KAAK,MAAM,cAAc,MAAM,WAAW,GAAG;GAC3C,MAAM,UAAU,WAAW,WAAW;GACtC,IAAI,CAAC,WAAW,CAAC,WAAW,SAAS;GACrC,IAAI,YAAY,OAAO,SAAS,eAAe,eAAe;GAC9D,eAAe,KAAK;IAClB;IACA,SAAS,WAAW;IACpB,YAAY,WAAW;IACvB,KAAK,QAAQ,cAAc,QAAQ;GACrC,CAAC;EACH;EACA,YACE,cACA,gBACA,gBAAgB,IAAI,eAAe,GACnC,kBACF;CACF,GACA;EAAC;EAAS;EAAgB;EAAiB;EAAY;CAAK,CAC9D;CAEA,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAE5E,IAAI,WACF,OACE,oBAAC,OAAD;EAAc;EACZ,UAAA,oBAAC,UAAD;GACE,QAAQ;GACR,OAAO;IAAE;IAAW;IAAU;IAAW;GAAS;GAClD,OAAO;EACR,CAAA;CACE,CAAA;CAGT,OACE,qBAACA,mBAAD;EAAS,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAQ;EAAY;EAA3E,UAAA;GACG,WACC,oBAAC,OAAD;IAAK,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,gBAAgB;IAC3E,UAAA;GACE,CAAA;GAEP,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IAAG,OAAO,cAAc;IAC5E,UAAA,oBAAC,OAAD;KACO;KACL,WAAW,GAAG,OAAO,OAAO,kBAAkB,OAAO,aAAa,YAAY,KAAK;KACnF,QAAQ;KACC;KACT,KAAK;KACL,KAAK,WAAY,aAAa,gBAAgB,iBAAkB;KAChE,OAAO;KACP,OAAO;MACL,QAAQ;MACR;MACA;MACA;MACA;MACA;MACA,OAAO;MACP,GAAG,cAAc;KACnB;KACA,SAAS;KACT,SAAS;KACT,eAAe;KACf,GAAI;IACL,CAAA;GACE,CAAA;GACJ,kBAAkB,oBAAC,eAAD,EAAe,YAAY,OAAS,CAAA;EAChD;;AAEb,CACF;AAEA,MAAM,cAAc"}
|
package/es/Skeleton/Skeleton.mjs
CHANGED
|
@@ -7,6 +7,9 @@ import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { cx } from "antd-style";
|
|
9
9
|
//#region src/Skeleton/Skeleton.tsx
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.
|
|
12
|
+
*/
|
|
10
13
|
const Skeleton = ({ active, avatar = false, title = true, paragraph = true, className, classNames, styles: customStyles, style, width, height, gap = 16, ...rest }) => {
|
|
11
14
|
const showAvatar = Boolean(avatar);
|
|
12
15
|
const showTitle = Boolean(title);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\nconst Skeleton: FC<SkeletonProps> = ({\n active,\n avatar = false,\n title = true,\n paragraph = true,\n className,\n classNames,\n styles: customStyles,\n style,\n width,\n height,\n gap = 16,\n ...rest\n}) => {\n const showAvatar = Boolean(avatar);\n const showTitle = Boolean(title);\n const showParagraph = Boolean(paragraph);\n const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n const titleProps = typeof title === 'object' ? title : undefined;\n const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n const rootStyle = {\n ...style,\n ...customStyles?.root,\n ...(width !== undefined ? { width } : {}),\n ...(height !== undefined ? { height } : {}),\n };\n\n const avatarActive = avatarProps?.active ?? active;\n const titleActive = titleProps?.active ?? active;\n const paragraphActive = paragraphProps?.active ?? active;\n\n return (\n <Flexbox\n horizontal\n align={showParagraph ? 'flex-start' : 'center'}\n className={cx(className, classNames?.root)}\n gap={gap}\n style={rootStyle}\n width={'100%'}\n {...rest}\n >\n {showAvatar && (\n <SkeletonAvatar\n {...avatarProps}\n active={avatarActive}\n className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n style={{\n ...avatarProps?.style,\n ...customStyles?.avatar,\n }}\n />\n )}\n <Flexbox gap={gap} width={'100%'}>\n {showTitle && (\n <SkeletonTitle\n {...titleProps}\n active={titleActive}\n className={cx(classNames?.title, titleProps?.className)}\n style={{\n ...titleProps?.style,\n ...customStyles?.title,\n }}\n />\n )}\n {showParagraph && (\n <SkeletonParagraph\n {...paragraphProps}\n active={paragraphActive}\n className={cx(classNames?.paragraph, paragraphProps?.className)}\n style={{\n ...paragraphProps?.style,\n ...customStyles?.paragraph,\n }}\n />\n )}\n </Flexbox>\n </Flexbox>\n );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Skeleton.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\n/**\n * @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.\n */\nconst Skeleton: FC<SkeletonProps> = ({\n active,\n avatar = false,\n title = true,\n paragraph = true,\n className,\n classNames,\n styles: customStyles,\n style,\n width,\n height,\n gap = 16,\n ...rest\n}) => {\n const showAvatar = Boolean(avatar);\n const showTitle = Boolean(title);\n const showParagraph = Boolean(paragraph);\n const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n const titleProps = typeof title === 'object' ? title : undefined;\n const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n const rootStyle = {\n ...style,\n ...customStyles?.root,\n ...(width !== undefined ? { width } : {}),\n ...(height !== undefined ? { height } : {}),\n };\n\n const avatarActive = avatarProps?.active ?? active;\n const titleActive = titleProps?.active ?? active;\n const paragraphActive = paragraphProps?.active ?? active;\n\n return (\n <Flexbox\n horizontal\n align={showParagraph ? 'flex-start' : 'center'}\n className={cx(className, classNames?.root)}\n gap={gap}\n style={rootStyle}\n width={'100%'}\n {...rest}\n >\n {showAvatar && (\n <SkeletonAvatar\n {...avatarProps}\n active={avatarActive}\n className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n style={{\n ...avatarProps?.style,\n ...customStyles?.avatar,\n }}\n />\n )}\n <Flexbox gap={gap} width={'100%'}>\n {showTitle && (\n <SkeletonTitle\n {...titleProps}\n active={titleActive}\n className={cx(classNames?.title, titleProps?.className)}\n style={{\n ...titleProps?.style,\n ...customStyles?.title,\n }}\n />\n )}\n {showParagraph && (\n <SkeletonParagraph\n {...paragraphProps}\n active={paragraphActive}\n className={cx(classNames?.paragraph, paragraphProps?.className)}\n style={{\n ...paragraphProps?.style,\n ...customStyles?.paragraph,\n }}\n />\n )}\n </Flexbox>\n </Flexbox>\n );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,aAAa,QAAQ,MAAM;CACjC,MAAM,YAAY,QAAQ,KAAK;CAC/B,MAAM,gBAAgB,QAAQ,SAAS;CACvC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS,KAAA;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ,KAAA;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY,KAAA;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC3C;CAEA,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;CAElD,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,IAAI;EACpC;EACL,OAAO;EACP,OAAO;EACP,GAAI;EAPN,UAAA,CASG,cACC,oBAAC,gBAAD;GACE,GAAI;GACJ,QAAQ;GACR,WAAW,GAAG,OAAO,QAAQ,YAAY,QAAQ,aAAa,SAAS;GACvE,OAAO;IACL,GAAG,aAAa;IAChB,GAAG,cAAc;GACnB;EACD,CAAA,GAEH,qBAACA,mBAAD;GAAc;GAAK,OAAO;GAA1B,UAAA,CACG,aACC,oBAAC,eAAD;IACE,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,OAAO,YAAY,SAAS;IACtD,OAAO;KACL,GAAG,YAAY;KACf,GAAG,cAAc;IACnB;GACD,CAAA,GAEF,iBACC,oBAAC,mBAAD;IACE,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,WAAW,gBAAgB,SAAS;IAC9D,OAAO;KACL,GAAG,gBAAgB;KACnB,GAAG,cAAc;IACnB;GACD,CAAA,CAEI;EACF,CAAA,CAAA;;AAEb;AAEA,SAAS,cAAc"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SkeletonAvatarProps } from "./type.mjs";
|
|
2
2
|
import { FC } from "react";
|
|
3
3
|
//#region src/Skeleton/SkeletonAvatar.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton.Avatar` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
4
7
|
declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
|
|
5
8
|
//#endregion
|
|
6
9
|
export { SkeletonAvatar as default };
|
|
@@ -5,6 +5,9 @@ import { jsx } from "react/jsx-runtime";
|
|
|
5
5
|
import { cssVar, cx } from "antd-style";
|
|
6
6
|
//#region src/Skeleton/SkeletonAvatar.tsx
|
|
7
7
|
const DEFAULT_SIZE = 40;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `Skeleton.Avatar` from `@lobehub/ui/base-ui` instead.
|
|
10
|
+
*/
|
|
8
11
|
const SkeletonAvatar = ({ active, shape = "square", size, width, height, style, className, ...rest }) => {
|
|
9
12
|
const defaultSize = size ?? DEFAULT_SIZE;
|
|
10
13
|
const finalWidth = width ?? defaultSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../src/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n active,\n shape = 'square',\n size,\n width,\n height,\n style,\n className,\n ...rest\n}) => {\n const defaultSize = size ?? DEFAULT_SIZE;\n const finalWidth = width ?? defaultSize;\n const finalHeight = height ?? defaultSize;\n const borderRadius = shape === 'circle' ? '50%' : cssVar.borderRadius;\n\n return (\n <SkeletonBlock\n active={active}\n className={cx(styles.avatar, className)}\n height={finalHeight}\n style={{ borderRadius, ...style }}\n width={finalWidth}\n {...rest}\n />\n );\n};\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;AASA,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../src/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\n/**\n * @deprecated Use `Skeleton.Avatar` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n active,\n shape = 'square',\n size,\n width,\n height,\n style,\n className,\n ...rest\n}) => {\n const defaultSize = size ?? DEFAULT_SIZE;\n const finalWidth = width ?? defaultSize;\n const finalHeight = height ?? defaultSize;\n const borderRadius = shape === 'circle' ? '50%' : cssVar.borderRadius;\n\n return (\n <SkeletonBlock\n active={active}\n className={cx(styles.avatar, className)}\n height={finalHeight}\n style={{ borderRadius, ...style }}\n width={finalWidth}\n {...rest}\n />\n );\n};\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;AASA,MAAM,eAAe;;;;AAKrB,MAAM,kBAA2C,EAC/C,QACA,QAAQ,UACR,MACA,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ;CAC5B,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc,UAAU;CAC9B,MAAM,eAAe,UAAU,WAAW,QAAQ,OAAO;CAEzD,OACE,oBAAC,eAAD;EACU;EACR,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;EAAM;EAChC,OAAO;EACP,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SkeletonBlockProps } from "./type.mjs";
|
|
2
2
|
import { FC } from "react";
|
|
3
3
|
//#region src/Skeleton/SkeletonBlock.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
4
7
|
declare const SkeletonBlock: FC<SkeletonBlockProps>;
|
|
5
8
|
//#endregion
|
|
6
9
|
export { SkeletonBlock as default };
|
|
@@ -4,6 +4,9 @@ import { styles } from "./style.mjs";
|
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { cx } from "antd-style";
|
|
6
6
|
//#region src/Skeleton/SkeletonBlock.tsx
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.
|
|
9
|
+
*/
|
|
7
10
|
const SkeletonBlock = ({ width = "100%", height = "1em", active, style, className }) => {
|
|
8
11
|
return /* @__PURE__ */ jsx(Block, {
|
|
9
12
|
className: cx(styles.base, active && styles.active, className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonBlock.mjs","names":[],"sources":["../../src/Skeleton/SkeletonBlock.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport type { SkeletonBlockProps } from '@/Skeleton/type';\n\nimport { styles } from './style';\n\nconst SkeletonBlock: FC<SkeletonBlockProps> = ({\n width = '100%',\n height = '1em',\n active,\n style,\n className,\n}) => {\n return (\n <Block\n className={cx(styles.base, active && styles.active, className)}\n height={height}\n style={style}\n variant={'filled'}\n width={width}\n />\n );\n};\n\nSkeletonBlock.displayName = 'SkeletonBlock';\n\nexport default SkeletonBlock;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SkeletonBlock.mjs","names":[],"sources":["../../src/Skeleton/SkeletonBlock.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport type { SkeletonBlockProps } from '@/Skeleton/type';\n\nimport { styles } from './style';\n\n/**\n * @deprecated Use `Skeleton` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonBlock: FC<SkeletonBlockProps> = ({\n width = '100%',\n height = '1em',\n active,\n style,\n className,\n}) => {\n return (\n <Block\n className={cx(styles.base, active && styles.active, className)}\n height={height}\n style={style}\n variant={'filled'}\n width={width}\n />\n );\n};\n\nSkeletonBlock.displayName = 'SkeletonBlock';\n\nexport default SkeletonBlock;\n"],"mappings":";;;;;;;;;AAaA,MAAM,iBAAyC,EAC7C,QAAQ,QACR,SAAS,OACT,QACA,OACA,gBACI;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,SAAS;EACrD;EACD;EACP,SAAS;EACF;CACR,CAAA;AAEL;AAEA,cAAc,cAAc"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SkeletonButtonProps } from "./type.mjs";
|
|
2
2
|
import { FC } from "react";
|
|
3
3
|
//#region src/Skeleton/SkeletonButton.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton` with an explicit `height` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
4
7
|
declare const SkeletonButton: FC<SkeletonButtonProps>;
|
|
5
8
|
//#endregion
|
|
6
9
|
export { SkeletonButton as default };
|
|
@@ -8,6 +8,9 @@ const HEIGHT_MAP = {
|
|
|
8
8
|
large: 46,
|
|
9
9
|
small: 28
|
|
10
10
|
};
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `Skeleton` with an explicit `height` from `@lobehub/ui/base-ui` instead.
|
|
13
|
+
*/
|
|
11
14
|
const SkeletonButton = ({ active, block = false, shape = "default", size = "default", width, height, style, className, ...rest }) => {
|
|
12
15
|
const resolvedSize = size ?? "default";
|
|
13
16
|
const baseHeight = height ?? HEIGHT_MAP[resolvedSize];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonButton.mjs","names":[],"sources":["../../src/Skeleton/SkeletonButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonButtonProps } from './type';\n\nconst HEIGHT_MAP: Record<'large' | 'small' | 'default', number> = {\n default: 36,\n large: 46,\n small: 28,\n};\n\nconst SkeletonButton: FC<SkeletonButtonProps> = ({\n active,\n block = false,\n shape = 'default',\n size = 'default',\n width,\n height,\n style,\n className,\n ...rest\n}) => {\n const resolvedSize = size ?? 'default';\n const baseHeight = height ?? HEIGHT_MAP[resolvedSize];\n const defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;\n const finalWidth = width ?? defaultWidth;\n\n const RADIUS_MAP: Record<'large' | 'small' | 'default', string> = {\n default: cssVar.borderRadius,\n large: cssVar.borderRadiusLG,\n small: cssVar.borderRadiusSM,\n };\n\n const borderRadius =\n shape === 'circle'\n ? '50%'\n : shape === 'round'\n ? `calc(${cssVar.borderRadius} * 2)`\n : RADIUS_MAP[resolvedSize];\n\n return (\n <SkeletonBlock\n active={active}\n className={className}\n height={baseHeight}\n style={{ borderRadius, ...style }}\n width={finalWidth}\n {...rest}\n />\n );\n};\n\nSkeletonButton.displayName = 'SkeletonButton';\n\nexport default SkeletonButton;\n"],"mappings":";;;;;AAQA,MAAM,aAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;AACT
|
|
1
|
+
{"version":3,"file":"SkeletonButton.mjs","names":[],"sources":["../../src/Skeleton/SkeletonButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonButtonProps } from './type';\n\nconst HEIGHT_MAP: Record<'large' | 'small' | 'default', number> = {\n default: 36,\n large: 46,\n small: 28,\n};\n\n/**\n * @deprecated Use `Skeleton` with an explicit `height` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonButton: FC<SkeletonButtonProps> = ({\n active,\n block = false,\n shape = 'default',\n size = 'default',\n width,\n height,\n style,\n className,\n ...rest\n}) => {\n const resolvedSize = size ?? 'default';\n const baseHeight = height ?? HEIGHT_MAP[resolvedSize];\n const defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;\n const finalWidth = width ?? defaultWidth;\n\n const RADIUS_MAP: Record<'large' | 'small' | 'default', string> = {\n default: cssVar.borderRadius,\n large: cssVar.borderRadiusLG,\n small: cssVar.borderRadiusSM,\n };\n\n const borderRadius =\n shape === 'circle'\n ? '50%'\n : shape === 'round'\n ? `calc(${cssVar.borderRadius} * 2)`\n : RADIUS_MAP[resolvedSize];\n\n return (\n <SkeletonBlock\n active={active}\n className={className}\n height={baseHeight}\n style={{ borderRadius, ...style }}\n width={finalWidth}\n {...rest}\n />\n );\n};\n\nSkeletonButton.displayName = 'SkeletonButton';\n\nexport default SkeletonButton;\n"],"mappings":";;;;;AAQA,MAAM,aAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;AACT;;;;AAKA,MAAM,kBAA2C,EAC/C,QACA,QAAQ,OACR,QAAQ,WACR,OAAO,WACP,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,eAAe,QAAQ;CAC7B,MAAM,aAAa,UAAU,WAAW;CAExC,MAAM,aAAa,UADE,QAAQ,SAAS,UAAU,WAAW,aAAa;CAGxE,MAAM,aAA4D;EAChE,SAAS,OAAO;EAChB,OAAO,OAAO;EACd,OAAO,OAAO;CAChB;CAEA,MAAM,eACJ,UAAU,WACN,QACA,UAAU,UACR,QAAQ,OAAO,aAAa,SAC5B,WAAW;CAEnB,OACE,oBAAC,eAAD;EACU;EACG;EACX,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;EAAM;EAChC,OAAO;EACP,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SkeletonParagraphProps } from "./type.mjs";
|
|
2
2
|
import { FC } from "react";
|
|
3
3
|
//#region src/Skeleton/SkeletonParagraph.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
4
7
|
declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
|
|
5
8
|
//#endregion
|
|
6
9
|
export { SkeletonParagraph as default };
|
|
@@ -4,6 +4,9 @@ import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
//#region src/Skeleton/SkeletonParagraph.tsx
|
|
6
6
|
const DEFAULT_ROWS = 3;
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
9
|
+
*/
|
|
7
10
|
const SkeletonParagraph = ({ active, rows = DEFAULT_ROWS, gap, width, height, fontSize, lineHeight, style, className, ...rest }) => {
|
|
8
11
|
const rowGap = gap;
|
|
9
12
|
const rowCount = Math.max(rows, 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonParagraph.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/SkeletonParagraph.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonParagraphProps } from './type';\n\nconst DEFAULT_ROWS = 3;\n\nconst SkeletonParagraph: FC<SkeletonParagraphProps> = ({\n active,\n rows = DEFAULT_ROWS,\n gap,\n width,\n height,\n fontSize,\n lineHeight,\n style,\n className,\n ...rest\n}) => {\n const rowGap = gap;\n const rowCount = Math.max(rows, 1);\n const baseFontSize = fontSize ?? 14;\n const resolvedLineHeight = lineHeight ?? 1.6;\n const computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);\n const marginBlock = computedHeight - baseFontSize;\n const widthList = Array.isArray(width) ? width : null;\n\n const getRowWidth = (index: number): string | number => {\n if (widthList) return widthList[index] ?? widthList.at(-1) ?? '100%';\n if (width !== undefined) return width as string | number;\n if (index === rowCount - 1) return '66%';\n return '100%';\n };\n\n const containerStyle = { gap: rowGap, ...style };\n\n return (\n <Flexbox\n className={className}\n gap={gap || marginBlock}\n style={containerStyle}\n width={'100%'}\n {...rest}\n >\n {Array.from({ length: rowCount }).map((_, index) => (\n <SkeletonBlock\n active={active}\n height={baseFontSize}\n key={index}\n width={getRowWidth(index)}\n />\n ))}\n </Flexbox>\n );\n};\n\nSkeletonParagraph.displayName = 'SkeletonParagraph';\n\nexport default SkeletonParagraph;\n"],"mappings":";;;;;AASA,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"SkeletonParagraph.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/SkeletonParagraph.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonParagraphProps } from './type';\n\nconst DEFAULT_ROWS = 3;\n\n/**\n * @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonParagraph: FC<SkeletonParagraphProps> = ({\n active,\n rows = DEFAULT_ROWS,\n gap,\n width,\n height,\n fontSize,\n lineHeight,\n style,\n className,\n ...rest\n}) => {\n const rowGap = gap;\n const rowCount = Math.max(rows, 1);\n const baseFontSize = fontSize ?? 14;\n const resolvedLineHeight = lineHeight ?? 1.6;\n const computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);\n const marginBlock = computedHeight - baseFontSize;\n const widthList = Array.isArray(width) ? width : null;\n\n const getRowWidth = (index: number): string | number => {\n if (widthList) return widthList[index] ?? widthList.at(-1) ?? '100%';\n if (width !== undefined) return width as string | number;\n if (index === rowCount - 1) return '66%';\n return '100%';\n };\n\n const containerStyle = { gap: rowGap, ...style };\n\n return (\n <Flexbox\n className={className}\n gap={gap || marginBlock}\n style={containerStyle}\n width={'100%'}\n {...rest}\n >\n {Array.from({ length: rowCount }).map((_, index) => (\n <SkeletonBlock\n active={active}\n height={baseFontSize}\n key={index}\n width={getRowWidth(index)}\n />\n ))}\n </Flexbox>\n );\n};\n\nSkeletonParagraph.displayName = 'SkeletonParagraph';\n\nexport default SkeletonParagraph;\n"],"mappings":";;;;;AASA,MAAM,eAAe;;;;AAKrB,MAAM,qBAAiD,EACrD,QACA,OAAO,cACP,KACA,OACA,QACA,UACA,YACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS;CACf,MAAM,WAAW,KAAK,IAAI,MAAM,CAAC;CACjC,MAAM,eAAe,YAAY;CAGjC,MAAM,eADiB,SAAS,SAAS,KAAK,MAAM,gBADzB,cAAc,IAC4C,KAChD;CACrC,MAAM,YAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ;CAEjD,MAAM,eAAe,UAAmC;EACtD,IAAI,WAAW,OAAO,UAAU,UAAU,UAAU,GAAG,EAAE,KAAK;EAC9D,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,IAAI,UAAU,WAAW,GAAG,OAAO;EACnC,OAAO;CACT;CAEA,MAAM,iBAAiB;EAAE,KAAK;EAAQ,GAAG;CAAM;CAE/C,OACE,oBAACA,mBAAD;EACa;EACX,KAAK,OAAO;EACZ,OAAO;EACP,OAAO;EACP,GAAI;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,UACxC,oBAAC,eAAD;GACU;GACR,QAAQ;GAER,OAAO,YAAY,KAAK;EACzB,GAFM,KAEN,CACF;CACM,CAAA;AAEb;AAEA,kBAAkB,cAAc"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SkeletonTagsProps } from "./type.mjs";
|
|
2
2
|
import { FC } from "react";
|
|
3
3
|
//#region src/Skeleton/SkeletonTags.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton` blocks in a `Flexbox horizontal` instead.
|
|
6
|
+
*/
|
|
4
7
|
declare const SkeletonTags: FC<SkeletonTagsProps>;
|
|
5
8
|
//#endregion
|
|
6
9
|
export { SkeletonTags as default };
|
|
@@ -15,6 +15,9 @@ const DEFAULT_WIDTH_MAP = {
|
|
|
15
15
|
middle: 48,
|
|
16
16
|
small: 36
|
|
17
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Use `Skeleton` blocks in a `Flexbox horizontal` instead.
|
|
20
|
+
*/
|
|
18
21
|
const SkeletonTags = ({ active, className, count = DEFAULT_COUNT, gap, height, size = "middle", style, width, ...rest }) => {
|
|
19
22
|
const resolvedGap = gap !== void 0 ? `${gap}px` : cssVar.paddingXS;
|
|
20
23
|
const resolvedCount = Math.max(count, 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonTags.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTagsProps } from './type';\n\nconst DEFAULT_COUNT = 1;\n\nconst HEIGHT_MAP: Record<'small' | 'middle' | 'large', number> = {\n large: 28,\n middle: 22,\n small: 20,\n};\n\nconst DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number> = {\n large: 64,\n middle: 48,\n small: 36,\n};\n\nconst SkeletonTags: FC<SkeletonTagsProps> = ({\n active,\n className,\n count = DEFAULT_COUNT,\n gap,\n height,\n size = 'middle',\n style,\n width,\n ...rest\n}) => {\n const resolvedGap = gap !== undefined ? `${gap}px` : cssVar.paddingXS;\n const resolvedCount = Math.max(count, 1);\n const resolvedHeight = height ?? HEIGHT_MAP[size];\n const widthList = Array.isArray(width) ? width : null;\n const defaultWidth = DEFAULT_WIDTH_MAP[size];\n\n const RADIUS_MAP: Record<'large' | 'small' | 'middle', string> = {\n large: cssVar.borderRadius,\n middle: cssVar.borderRadiusSM,\n small: cssVar.borderRadiusXS,\n };\n\n const getWidth = (index: number) => {\n if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;\n if (width !== undefined) return width as string | number;\n return defaultWidth;\n };\n\n return (\n <Flexbox horizontal className={className} style={{ gap: resolvedGap, ...style }} {...rest}>\n {Array.from({ length: resolvedCount }).map((_, index) => (\n <SkeletonBlock\n active={active}\n height={resolvedHeight}\n key={index}\n width={getWidth(index)}\n style={{\n borderRadius: RADIUS_MAP[size],\n }}\n />\n ))}\n </Flexbox>\n );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAM,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;AACT
|
|
1
|
+
{"version":3,"file":"SkeletonTags.mjs","names":["Flexbox"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTagsProps } from './type';\n\nconst DEFAULT_COUNT = 1;\n\nconst HEIGHT_MAP: Record<'small' | 'middle' | 'large', number> = {\n large: 28,\n middle: 22,\n small: 20,\n};\n\nconst DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number> = {\n large: 64,\n middle: 48,\n small: 36,\n};\n\n/**\n * @deprecated Use `Skeleton` blocks in a `Flexbox horizontal` instead.\n */\nconst SkeletonTags: FC<SkeletonTagsProps> = ({\n active,\n className,\n count = DEFAULT_COUNT,\n gap,\n height,\n size = 'middle',\n style,\n width,\n ...rest\n}) => {\n const resolvedGap = gap !== undefined ? `${gap}px` : cssVar.paddingXS;\n const resolvedCount = Math.max(count, 1);\n const resolvedHeight = height ?? HEIGHT_MAP[size];\n const widthList = Array.isArray(width) ? width : null;\n const defaultWidth = DEFAULT_WIDTH_MAP[size];\n\n const RADIUS_MAP: Record<'large' | 'small' | 'middle', string> = {\n large: cssVar.borderRadius,\n middle: cssVar.borderRadiusSM,\n small: cssVar.borderRadiusXS,\n };\n\n const getWidth = (index: number) => {\n if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;\n if (width !== undefined) return width as string | number;\n return defaultWidth;\n };\n\n return (\n <Flexbox horizontal className={className} style={{ gap: resolvedGap, ...style }} {...rest}>\n {Array.from({ length: resolvedCount }).map((_, index) => (\n <SkeletonBlock\n active={active}\n height={resolvedHeight}\n key={index}\n width={getWidth(index)}\n style={{\n borderRadius: RADIUS_MAP[size],\n }}\n />\n ))}\n </Flexbox>\n );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAM,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;AACT;;;;AAKA,MAAM,gBAAuC,EAC3C,QACA,WACA,QAAQ,eACR,KACA,QACA,OAAO,UACP,OACA,OACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,IAAI,MAAM,OAAO;CAC5D,MAAM,gBAAgB,KAAK,IAAI,OAAO,CAAC;CACvC,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,YAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ;CACjD,MAAM,eAAe,kBAAkB;CAEvC,MAAM,aAA2D;EAC/D,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,OAAO,OAAO;CAChB;CAEA,MAAM,YAAY,UAAkB;EAClC,IAAI,WAAW,OAAO,UAAU,UAAU,UAAU,GAAG,EAAE,KAAK;EAC9D,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,OAAO;CACT;CAEA,OACE,oBAACA,mBAAD;EAAS,YAAA;EAAsB;EAAW,OAAO;GAAE,KAAK;GAAa,GAAG;EAAM;EAAG,GAAI;EAClF,UAAA,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,UAC7C,oBAAC,eAAD;GACU;GACR,QAAQ;GAER,OAAO,SAAS,KAAK;GACrB,OAAO,EACL,cAAc,WAAW,MAC3B;EACD,GALM,KAKN,CACF;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SkeletonTitleProps } from "./type.mjs";
|
|
2
2
|
import { FC } from "react";
|
|
3
3
|
//#region src/Skeleton/SkeletonTitle.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
6
|
+
*/
|
|
4
7
|
declare const SkeletonTitle: FC<SkeletonTitleProps>;
|
|
5
8
|
//#endregion
|
|
6
9
|
export { SkeletonTitle as default };
|
|
@@ -3,6 +3,9 @@ import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { cssVar } from "antd-style";
|
|
5
5
|
//#region src/Skeleton/SkeletonTitle.tsx
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.
|
|
8
|
+
*/
|
|
6
9
|
const SkeletonTitle = ({ active, fontSize, lineHeight, height, width = "60%", style, className, ...rest }) => {
|
|
7
10
|
const resolvedLineHeight = lineHeight ?? 1.6;
|
|
8
11
|
const baseFontSize = fontSize !== void 0 ? `${fontSize}px` : cssVar.fontSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonTitle.mjs","names":[],"sources":["../../src/Skeleton/SkeletonTitle.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTitleProps } from './type';\n\nconst SkeletonTitle: FC<SkeletonTitleProps> = ({\n active,\n fontSize,\n lineHeight,\n height,\n width = '60%',\n style,\n className,\n ...rest\n}) => {\n const resolvedLineHeight = lineHeight ?? 1.6;\n const baseFontSize = fontSize !== undefined ? `${fontSize}px` : cssVar.fontSize;\n\n // height = baseFontSize * (1 + (lineHeight - 1) * 0.5)\n const heightMultiplier = 1 + (resolvedLineHeight - 1) * 0.5;\n // marginBlock = baseFontSize * (lineHeight - 1) * 0.25\n const marginMultiplier = (resolvedLineHeight - 1) * 0.25;\n\n return (\n <SkeletonBlock\n active={active}\n className={className}\n height={height ?? `round(calc(${baseFontSize} * ${heightMultiplier}), 1px)`}\n width={width}\n style={{\n marginBlock: `round(calc(${baseFontSize} * ${marginMultiplier}), 1px)`,\n ...style,\n }}\n {...rest}\n />\n );\n};\n\nSkeletonTitle.displayName = 'SkeletonTitle';\n\nexport default SkeletonTitle;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SkeletonTitle.mjs","names":[],"sources":["../../src/Skeleton/SkeletonTitle.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTitleProps } from './type';\n\n/**\n * @deprecated Use `Skeleton.Text` from `@lobehub/ui/base-ui` instead.\n */\nconst SkeletonTitle: FC<SkeletonTitleProps> = ({\n active,\n fontSize,\n lineHeight,\n height,\n width = '60%',\n style,\n className,\n ...rest\n}) => {\n const resolvedLineHeight = lineHeight ?? 1.6;\n const baseFontSize = fontSize !== undefined ? `${fontSize}px` : cssVar.fontSize;\n\n // height = baseFontSize * (1 + (lineHeight - 1) * 0.5)\n const heightMultiplier = 1 + (resolvedLineHeight - 1) * 0.5;\n // marginBlock = baseFontSize * (lineHeight - 1) * 0.25\n const marginMultiplier = (resolvedLineHeight - 1) * 0.25;\n\n return (\n <SkeletonBlock\n active={active}\n className={className}\n height={height ?? `round(calc(${baseFontSize} * ${heightMultiplier}), 1px)`}\n width={width}\n style={{\n marginBlock: `round(calc(${baseFontSize} * ${marginMultiplier}), 1px)`,\n ...style,\n }}\n {...rest}\n />\n );\n};\n\nSkeletonTitle.displayName = 'SkeletonTitle';\n\nexport default SkeletonTitle;\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAyC,EAC7C,QACA,UACA,YACA,QACA,QAAQ,OACR,OACA,WACA,GAAG,WACC;CACJ,MAAM,qBAAqB,cAAc;CACzC,MAAM,eAAe,aAAa,KAAA,IAAY,GAAG,SAAS,MAAM,OAAO;CAGvE,MAAM,mBAAmB,KAAK,qBAAqB,KAAK;CAExD,MAAM,oBAAoB,qBAAqB,KAAK;CAEpD,OACE,oBAAC,eAAD;EACU;EACG;EACX,QAAQ,UAAU,cAAc,aAAa,KAAK,iBAAiB;EAC5D;EACP,OAAO;GACL,aAAa,cAAc,aAAa,KAAK,iBAAiB;GAC9D,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}
|
package/es/Video/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
3
|
import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
|
|
4
|
+
import Skeleton from "../base-ui/Skeleton/index.mjs";
|
|
4
5
|
import { styles, variants } from "./style.mjs";
|
|
5
6
|
import { memo, useMemo, useState } from "react";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { Skeleton } from "antd";
|
|
8
8
|
import { cssVar, cx } from "antd-style";
|
|
9
9
|
import { PlayIcon } from "lucide-react";
|
|
10
10
|
//#region src/Video/index.tsx
|
|
@@ -24,10 +24,9 @@ const Video = memo(({ ref, preload = "auto", src, style, classNames, className,
|
|
|
24
24
|
minHeight,
|
|
25
25
|
minWidth
|
|
26
26
|
]);
|
|
27
|
-
if (isLoading) return /* @__PURE__ */ jsx(Skeleton
|
|
28
|
-
|
|
27
|
+
if (isLoading) return /* @__PURE__ */ jsx(Skeleton, {
|
|
28
|
+
radius: cssVar.borderRadiusLG,
|
|
29
29
|
style: {
|
|
30
|
-
borderRadius: cssVar.borderRadiusLG,
|
|
31
30
|
height,
|
|
32
31
|
maxHeight,
|
|
33
32
|
maxWidth,
|
package/es/Video/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, memo, type Ref, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Skeleton from '@/base-ui/Skeleton';\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport { type VideoProps as VProps } from '@/types';\n\nimport { styles, variants } from './style';\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n autoPlay?: boolean;\n classNames?: {\n mask?: string;\n video?: string;\n wrapper?: string;\n };\n isLoading?: boolean;\n loop?: boolean;\n maxHeight?: number | string;\n maxWidth?: number | string;\n minHeight?: number | string;\n minWidth?: number | string;\n muted?: HTMLVideoElement['muted'];\n onEnded?: VProps['onEnded'];\n onMouseEnter?: VProps['onMouseEnter'];\n onMouseLeave?: VProps['onMouseLeave'];\n onPause?: VProps['onPause'];\n onPlay?: VProps['onPlay'];\n onPlaying?: VProps['onPlaying'];\n onProgress?: VProps['onProgress'];\n poster?: string;\n preload?: HTMLVideoElement['preload'];\n preview?: boolean;\n ref?: Ref<HTMLDivElement>;\n size?: number | string;\n src: string;\n styles?: {\n mask?: CSSProperties;\n video?: CSSProperties;\n wrapper?: CSSProperties;\n };\n variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n ({\n ref,\n preload = 'auto',\n src,\n style,\n classNames,\n className,\n maxHeight = '100%',\n maxWidth = '100%',\n minHeight,\n minWidth,\n onEnded,\n onPause,\n onPlay,\n onPlaying,\n width,\n height,\n onMouseEnter,\n styles: customStyles,\n onMouseLeave,\n preview = true,\n isLoading,\n variant = 'filled',\n autoPlay,\n ...rest\n }) => {\n const [isPlaying, setIsPlaying] = useState(false);\n const [showControls, setShowControls] = useState(false);\n\n // Convert props to CSS variables\n const cssVariables = useMemo<Record<string, string>>(() => {\n const vars: Record<string, string> = {};\n if (maxHeight !== undefined) {\n vars['--video-max-height'] = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n }\n if (maxWidth !== undefined) {\n vars['--video-max-width'] = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n }\n if (minHeight !== undefined) {\n vars['--video-min-height'] = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n }\n if (minWidth !== undefined) {\n vars['--video-min-width'] = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n }\n return vars;\n }, [maxHeight, maxWidth, minHeight, minWidth]);\n\n if (isLoading)\n return (\n <Skeleton\n radius={cssVar.borderRadiusLG}\n style={{\n height,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n width,\n }}\n />\n );\n\n return (\n <Flexbox\n className={cx(variants({ variant }), className, classNames?.wrapper)}\n height={height}\n ref={ref}\n width={width}\n style={{\n ...cssVariables,\n ...style,\n ...customStyles?.wrapper,\n }}\n >\n {preview && !isPlaying && (\n <Flexbox\n align={'center'}\n className={cx(styles.mask, classNames?.mask)}\n justify={'center'}\n style={customStyles?.mask}\n >\n <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n </Flexbox>\n )}\n <video\n autoPlay={autoPlay}\n className={cx(styles.video, classNames?.video)}\n controls={showControls}\n height={height}\n preload={preload}\n width={width}\n style={{\n height: 'auto',\n maxWidth: '100%',\n ...customStyles?.video,\n }}\n onEnded={(e) => {\n setIsPlaying(false);\n onEnded?.(e);\n }}\n onMouseEnter={(e) => {\n setShowControls(true);\n onMouseEnter?.(e);\n }}\n onMouseLeave={(e) => {\n setShowControls(false);\n onMouseLeave?.(e);\n }}\n onPause={(e) => {\n setIsPlaying(false);\n onPause?.(e);\n }}\n onPlay={(e) => {\n setIsPlaying(true);\n onPlay?.(e);\n }}\n onPlaying={(e) => {\n setIsPlaying(true);\n onPlaying?.(e);\n }}\n {...rest}\n >\n <source src={src} />\n </video>\n </Flexbox>\n );\n },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;AAgDA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAGtD,MAAM,eAAe,cAAsC;EACzD,MAAM,OAA+B,CAAC;EACtC,IAAI,cAAc,KAAA,GAChB,KAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;EAElF,IAAI,aAAa,KAAA,GACf,KAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAE/E,IAAI,cAAc,KAAA,GAChB,KAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;EAElF,IAAI,aAAa,KAAA,GACf,KAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAE/E,OAAO;CACT,GAAG;EAAC;EAAW;EAAU;EAAW;CAAQ,CAAC;CAE7C,IAAI,WACF,OACE,oBAAC,UAAD;EACE,QAAQ,OAAO;EACf,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;CACD,CAAA;CAGL,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,WAAW,YAAY,OAAO;EAC3D;EACH;EACE;EACP,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG,cAAc;EACnB;EATF,UAAA,CAWG,WAAW,CAAC,aACX,oBAACA,mBAAD;GACE,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;GAC3C,SAAS;GACT,OAAO,cAAc;GAErB,UAAA,oBAAC,YAAD;IAAY,OAAO;IAAQ,MAAM;IAAU,SAAS;GAAW,CAAA;EACxD,CAAA,GAEX,oBAAC,SAAD;GACY;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAC7C,UAAU;GACF;GACC;GACF;GACP,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;GACnB;GACA,UAAU,MAAM;IACd,aAAa,KAAK;IAClB,UAAU,CAAC;GACb;GACA,eAAe,MAAM;IACnB,gBAAgB,IAAI;IACpB,eAAe,CAAC;GAClB;GACA,eAAe,MAAM;IACnB,gBAAgB,KAAK;IACrB,eAAe,CAAC;GAClB;GACA,UAAU,MAAM;IACd,aAAa,KAAK;IAClB,UAAU,CAAC;GACb;GACA,SAAS,MAAM;IACb,aAAa,IAAI;IACjB,SAAS,CAAC;GACZ;GACA,YAAY,MAAM;IAChB,aAAa,IAAI;IACjB,YAAY,CAAC;GACf;GACA,GAAI;GAEJ,UAAA,oBAAC,UAAD,EAAa,IAAM,CAAA;EACd,CAAA,CACA;;AAEb,CACF;AAEA,MAAM,cAAc"}
|
|
@@ -23,8 +23,8 @@ declare const styles: {
|
|
|
23
23
|
};
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
|
-
size?: "
|
|
27
|
-
variant?: "filled" | "
|
|
26
|
+
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
+
variant?: "filled" | "borderless" | "outlined" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cx } from "antd-style";
|
|
5
|
+
//#region src/base-ui/Skeleton/Skeleton.tsx
|
|
6
|
+
const Skeleton = ({ animated = true, width = "100%", height = "1em", radius, className, style, ...rest }) => /* @__PURE__ */ jsx("div", {
|
|
7
|
+
style: {
|
|
8
|
+
borderRadius: radius,
|
|
9
|
+
height,
|
|
10
|
+
width,
|
|
11
|
+
...style
|
|
12
|
+
},
|
|
13
|
+
className: cx(styles.base, animated && styles[animated === true ? "fade" : animated], className),
|
|
14
|
+
...rest
|
|
15
|
+
});
|
|
16
|
+
Skeleton.displayName = "Skeleton";
|
|
17
|
+
//#endregion
|
|
18
|
+
export { Skeleton as default };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=Skeleton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\nconst Skeleton: FC<SkeletonProps> = ({\n animated = true,\n width = '100%',\n height = '1em',\n radius,\n className,\n style,\n ...rest\n}) => (\n <div\n style={{ borderRadius: radius, height, width, ...style }}\n className={cx(\n styles.base,\n animated && styles[animated === true ? 'fade' : animated],\n className,\n )}\n {...rest}\n />\n);\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;AAQA,MAAM,YAA+B,EACnC,WAAW,MACX,QAAQ,QACR,SAAS,OACT,QACA,WACA,OACA,GAAG,WAEH,oBAAC,OAAD;CACE,OAAO;EAAE,cAAc;EAAQ;EAAQ;EAAO,GAAG;CAAM;CACvD,WAAW,GACT,OAAO,MACP,YAAY,OAAO,aAAa,OAAO,SAAS,WAChD,SACF;CACA,GAAI;AACL,CAAA;AAGH,SAAS,cAAc"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SkeletonAvatarProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/base-ui/Skeleton/SkeletonAvatar.d.ts
|
|
4
|
+
declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { SkeletonAvatar as default };
|
|
7
|
+
//# sourceMappingURL=SkeletonAvatar.d.mts.map
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
3
|
+
import Skeleton from "./Skeleton.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cx } from "antd-style";
|
|
6
|
+
//#region src/base-ui/Skeleton/SkeletonAvatar.tsx
|
|
7
|
+
const DEFAULT_SIZE = 40;
|
|
8
|
+
const SkeletonAvatar = ({ shape = "square", size = DEFAULT_SIZE, width, height, className, ...rest }) => /* @__PURE__ */ jsx(Skeleton, {
|
|
9
|
+
className: cx(styles.avatar, className),
|
|
10
|
+
height: height ?? size,
|
|
11
|
+
radius: shape === "circle" ? "50%" : void 0,
|
|
12
|
+
width: width ?? size,
|
|
13
|
+
...rest
|
|
14
|
+
});
|
|
15
|
+
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
16
|
+
//#endregion
|
|
17
|
+
export { SkeletonAvatar as default };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=SkeletonAvatar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Skeleton from './Skeleton';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n shape = 'square',\n size = DEFAULT_SIZE,\n width,\n height,\n className,\n ...rest\n}) => (\n <Skeleton\n className={cx(styles.avatar, className)}\n height={height ?? size}\n radius={shape === 'circle' ? '50%' : undefined}\n width={width ?? size}\n {...rest}\n />\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;AASA,MAAM,eAAe;AAErB,MAAM,kBAA2C,EAC/C,QAAQ,UACR,OAAO,cACP,OACA,QACA,WACA,GAAG,WAEH,oBAAC,UAAD;CACE,WAAW,GAAG,OAAO,QAAQ,SAAS;CACtC,QAAQ,UAAU;CAClB,QAAQ,UAAU,WAAW,QAAQ,KAAA;CACrC,OAAO,SAAS;CAChB,GAAI;AACL,CAAA;AAGH,eAAe,cAAc"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SkeletonTextProps } from "./type.mjs";
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
//#region src/base-ui/Skeleton/SkeletonText.d.ts
|
|
4
|
+
declare const SkeletonText: FC<SkeletonTextProps>;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { SkeletonText as default };
|
|
7
|
+
//# sourceMappingURL=SkeletonText.d.mts.map
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
3
|
+
import Skeleton from "./Skeleton.mjs";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cssVar, cx } from "antd-style";
|
|
6
|
+
//#region src/base-ui/Skeleton/SkeletonText.tsx
|
|
7
|
+
const SkeletonText = ({ rows = 1, fontSize, lineHeight = 1.6, gap, width, className, style, ...rest }) => {
|
|
8
|
+
const rowCount = Math.max(rows, 1);
|
|
9
|
+
const base = fontSize === void 0 ? cssVar.fontSize : `${fontSize}px`;
|
|
10
|
+
const rowHeight = `round(calc(${base} * ${1 + (lineHeight - 1) * .5}), 1px)`;
|
|
11
|
+
const halfLeading = gap === void 0 ? `round(calc(${base} * ${(lineHeight - 1) * .25}), 1px)` : void 0;
|
|
12
|
+
const widths = Array.isArray(width) ? width : void 0;
|
|
13
|
+
const rowWidth = (index) => {
|
|
14
|
+
if (widths) return widths[index] ?? widths.at(-1) ?? "100%";
|
|
15
|
+
if (width !== void 0) return width;
|
|
16
|
+
return index === rowCount - 1 && rowCount > 1 ? "66%" : "100%";
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: cx(styles.text, className),
|
|
20
|
+
style: {
|
|
21
|
+
gap,
|
|
22
|
+
...style
|
|
23
|
+
},
|
|
24
|
+
children: Array.from({ length: rowCount }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, {
|
|
25
|
+
height: rowHeight,
|
|
26
|
+
style: { marginBlock: halfLeading },
|
|
27
|
+
width: rowWidth(index),
|
|
28
|
+
...rest
|
|
29
|
+
}, index))
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
SkeletonText.displayName = "SkeletonText";
|
|
33
|
+
//#endregion
|
|
34
|
+
export { SkeletonText as default };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=SkeletonText.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonText.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/SkeletonText.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Skeleton from './Skeleton';\nimport { styles } from './style';\nimport type { SkeletonTextProps } from './type';\n\nconst SkeletonText: FC<SkeletonTextProps> = ({\n rows = 1,\n fontSize,\n lineHeight = 1.6,\n gap,\n width,\n className,\n style,\n ...rest\n}) => {\n const rowCount = Math.max(rows, 1);\n const base = fontSize === undefined ? cssVar.fontSize : `${fontSize}px`;\n const rowHeight = `round(calc(${base} * ${1 + (lineHeight - 1) * 0.5}), 1px)`;\n const halfLeading =\n gap === undefined ? `round(calc(${base} * ${(lineHeight - 1) * 0.25}), 1px)` : undefined;\n const widths = Array.isArray(width) ? width : undefined;\n\n const rowWidth = (index: number) => {\n if (widths) return widths[index] ?? widths.at(-1) ?? '100%';\n if (width !== undefined) return width as number | string;\n return index === rowCount - 1 && rowCount > 1 ? '66%' : '100%';\n };\n\n return (\n <div className={cx(styles.text, className)} style={{ gap, ...style }}>\n {Array.from({ length: rowCount }).map((_, index) => (\n <Skeleton\n height={rowHeight}\n key={index}\n style={{ marginBlock: halfLeading }}\n width={rowWidth(index)}\n {...rest}\n />\n ))}\n </div>\n );\n};\n\nSkeletonText.displayName = 'SkeletonText';\n\nexport default SkeletonText;\n"],"mappings":";;;;;;AASA,MAAM,gBAAuC,EAC3C,OAAO,GACP,UACA,aAAa,KACb,KACA,OACA,WACA,OACA,GAAG,WACC;CACJ,MAAM,WAAW,KAAK,IAAI,MAAM,CAAC;CACjC,MAAM,OAAO,aAAa,KAAA,IAAY,OAAO,WAAW,GAAG,SAAS;CACpE,MAAM,YAAY,cAAc,KAAK,KAAK,KAAK,aAAa,KAAK,GAAI;CACrE,MAAM,cACJ,QAAQ,KAAA,IAAY,cAAc,KAAK,MAAM,aAAa,KAAK,IAAK,WAAW,KAAA;CACjF,MAAM,SAAS,MAAM,QAAQ,KAAK,IAAI,QAAQ,KAAA;CAE9C,MAAM,YAAY,UAAkB;EAClC,IAAI,QAAQ,OAAO,OAAO,UAAU,OAAO,GAAG,EAAE,KAAK;EACrD,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,OAAO,UAAU,WAAW,KAAK,WAAW,IAAI,QAAQ;CAC1D;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,OAAO;GAAE;GAAK,GAAG;EAAM;EAChE,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,UACxC,oBAAC,UAAD;GACE,QAAQ;GAER,OAAO,EAAE,aAAa,YAAY;GAClC,OAAO,SAAS,KAAK;GACrB,GAAI;EACL,GAJM,KAIN,CACF;CACE,CAAA;AAET;AAEA,aAAa,cAAc"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SkeletonAnimation, SkeletonAvatarProps, SkeletonProps, SkeletonTextProps } from "./type.mjs";
|
|
2
|
+
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
3
|
+
import SkeletonText from "./SkeletonText.mjs";
|
|
4
|
+
import { FC } from "react";
|
|
5
|
+
//#region src/base-ui/Skeleton/index.d.ts
|
|
6
|
+
interface ISkeleton extends FC<SkeletonProps> {
|
|
7
|
+
Avatar: typeof SkeletonAvatar;
|
|
8
|
+
Text: typeof SkeletonText;
|
|
9
|
+
}
|
|
10
|
+
declare const Skeleton: ISkeleton;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { type SkeletonAnimation, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Skeleton as default };
|
|
13
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Skeleton$1 from "./Skeleton.mjs";
|
|
2
|
+
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
3
|
+
import SkeletonText from "./SkeletonText.mjs";
|
|
4
|
+
//#region src/base-ui/Skeleton/index.ts
|
|
5
|
+
const Skeleton = Skeleton$1;
|
|
6
|
+
Skeleton.Avatar = SkeletonAvatar;
|
|
7
|
+
Skeleton.Text = SkeletonText;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { SkeletonAvatar, SkeletonText, Skeleton as default };
|
|
10
|
+
|
|
11
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["SkeletonRoot"],"sources":["../../../src/base-ui/Skeleton/index.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport SkeletonRoot from './Skeleton';\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonText from './SkeletonText';\nimport type { SkeletonProps } from './type';\n\ninterface ISkeleton extends FC<SkeletonProps> {\n Avatar: typeof SkeletonAvatar;\n Text: typeof SkeletonText;\n}\n\nconst Skeleton = SkeletonRoot as ISkeleton;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Text = SkeletonText;\n\nexport default Skeleton;\n\nexport { default as SkeletonAvatar } from './SkeletonAvatar';\nexport { default as SkeletonText } from './SkeletonText';\nexport type * from './type';\n"],"mappings":";;;;AAYA,MAAM,WAAWA;AACjB,SAAS,SAAS;AAClB,SAAS,OAAO"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { createStaticStyles, keyframes } from "antd-style";
|
|
2
|
+
//#region src/base-ui/Skeleton/style.ts
|
|
3
|
+
const sweep = keyframes`
|
|
4
|
+
0% {
|
|
5
|
+
translate: -100% 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
100% {
|
|
9
|
+
translate: 100% 0;
|
|
10
|
+
}
|
|
11
|
+
`;
|
|
12
|
+
const fade = keyframes`
|
|
13
|
+
0%,
|
|
14
|
+
100% {
|
|
15
|
+
opacity: 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
50% {
|
|
19
|
+
opacity: .5;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
22
|
+
const styles = createStaticStyles(({ css, cssVar }) => {
|
|
23
|
+
return {
|
|
24
|
+
avatar: css`
|
|
25
|
+
flex: none;
|
|
26
|
+
`,
|
|
27
|
+
base: css`
|
|
28
|
+
user-select: none;
|
|
29
|
+
|
|
30
|
+
position: relative;
|
|
31
|
+
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
|
|
34
|
+
border-radius: ${cssVar.borderRadius};
|
|
35
|
+
|
|
36
|
+
background: ${cssVar.colorFillContent};
|
|
37
|
+
|
|
38
|
+
@media (prefers-reduced-motion: reduce) {
|
|
39
|
+
animation: none;
|
|
40
|
+
|
|
41
|
+
&::after {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
`,
|
|
46
|
+
fade: css`
|
|
47
|
+
will-change: opacity;
|
|
48
|
+
animation: ${fade} 1.6s ease-in-out infinite;
|
|
49
|
+
`,
|
|
50
|
+
sweep: css`
|
|
51
|
+
&::after {
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
will-change: transform;
|
|
54
|
+
content: '';
|
|
55
|
+
|
|
56
|
+
position: absolute;
|
|
57
|
+
inset: 0;
|
|
58
|
+
|
|
59
|
+
background: linear-gradient(
|
|
60
|
+
90deg,
|
|
61
|
+
transparent 0%,
|
|
62
|
+
${cssVar.colorFill} 50%,
|
|
63
|
+
transparent 100%
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
animation: ${sweep} 1.4s ease infinite;
|
|
67
|
+
}
|
|
68
|
+
`,
|
|
69
|
+
text: css`
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-direction: column;
|
|
72
|
+
width: 100%;
|
|
73
|
+
`
|
|
74
|
+
};
|
|
75
|
+
});
|
|
76
|
+
//#endregion
|
|
77
|
+
export { styles };
|
|
78
|
+
|
|
79
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst sweep = keyframes`\n 0% {\n translate: -100% 0;\n }\n\n 100% {\n translate: 100% 0;\n }\n`;\n\nconst fade = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: .5;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n avatar: css`\n flex: none;\n `,\n\n base: css`\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorFillContent};\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n\n &::after {\n display: none;\n }\n }\n `,\n\n fade: css`\n will-change: opacity;\n animation: ${fade} 1.6s ease-in-out infinite;\n `,\n\n sweep: css`\n &::after {\n pointer-events: none;\n will-change: transform;\n content: '';\n\n position: absolute;\n inset: 0;\n\n background: linear-gradient(\n 90deg,\n transparent 0%,\n ${cssVar.colorFill} 50%,\n transparent 100%\n );\n\n animation: ${sweep} 1.4s ease infinite;\n }\n `,\n\n text: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;;;;;AAUvB,MAAM,OAAO,SAAS;;;;;;;;;;AAWtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;;EAIX,MAAM,GAAG;;;;;;;uBAOU,OAAO,aAAa;;oBAEvB,OAAO,iBAAiB;;;;;;;;;;EAWxC,MAAM,GAAG;;mBAEM,KAAK;;EAGpB,OAAO,GAAG;;;;;;;;;;;;YAYF,OAAO,UAAU;;;;qBAIR,MAAM;;;EAIvB,MAAM,GAAG;;;;;CAKX;AACF,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
//#region src/base-ui/Skeleton/type.d.ts
|
|
3
|
+
type SkeletonAnimation = 'fade' | 'sweep';
|
|
4
|
+
interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
5
|
+
animated?: boolean | SkeletonAnimation;
|
|
6
|
+
height?: number | string;
|
|
7
|
+
radius?: number | string;
|
|
8
|
+
width?: number | string;
|
|
9
|
+
}
|
|
10
|
+
interface SkeletonTextProps extends Omit<SkeletonProps, 'width' | 'height'> {
|
|
11
|
+
fontSize?: number;
|
|
12
|
+
gap?: number;
|
|
13
|
+
lineHeight?: number;
|
|
14
|
+
rows?: number;
|
|
15
|
+
width?: number | string | (number | string)[];
|
|
16
|
+
}
|
|
17
|
+
interface SkeletonAvatarProps extends Omit<SkeletonProps, 'radius'> {
|
|
18
|
+
shape?: 'circle' | 'square';
|
|
19
|
+
size?: number | string;
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
export { SkeletonAnimation, SkeletonAvatarProps, SkeletonProps, SkeletonTextProps };
|
|
23
|
+
//# sourceMappingURL=type.d.mts.map
|
package/es/base-ui/index.d.mts
CHANGED
|
@@ -110,6 +110,10 @@ import { SelectBehaviorVariant, SelectClassNames, SelectIndicatorVariant, Select
|
|
|
110
110
|
import { SelectArrow, SelectArrowProps, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectRoot, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./Select/atoms.mjs";
|
|
111
111
|
import Select from "./Select/Select.mjs";
|
|
112
112
|
import "./Select/index.mjs";
|
|
113
|
+
import { SkeletonAnimation, SkeletonAvatarProps, SkeletonProps, SkeletonTextProps } from "./Skeleton/type.mjs";
|
|
114
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
115
|
+
import SkeletonText from "./Skeleton/SkeletonText.mjs";
|
|
116
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
113
117
|
import { SliderProps, SliderWithInputProps } from "./Slider/type.mjs";
|
|
114
118
|
import Slider from "./Slider/Slider.mjs";
|
|
115
119
|
import SliderWithInput from "./Slider/SliderWithInput.mjs";
|
|
@@ -138,4 +142,4 @@ import { styles as styles$12 } from "./ToggleGroup/style.mjs";
|
|
|
138
142
|
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps } from "./ToggleGroup/atoms.mjs";
|
|
139
143
|
import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
|
|
140
144
|
import "./ToggleGroup/index.mjs";
|
|
141
|
-
export { Accordion, type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, ActionIcon, type ActionIconClassNames, type ActionIconProps, type ActionIconSize, type ActionIconStyles, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, type BaseModalProps, Button, type ButtonIconPosition, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, type IconSpaceMode, type ImperativeModalProps, Input, type InputClassNames, InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemsType, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
|
|
145
|
+
export { Accordion, type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, ActionIcon, type ActionIconClassNames, type ActionIconProps, type ActionIconSize, type ActionIconStyles, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, type BaseModalProps, Button, type ButtonIconPosition, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, type IconSpaceMode, type ImperativeModalProps, Input, type InputClassNames, InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemsType, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, Skeleton, type SkeletonAnimation, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
|
package/es/base-ui/index.mjs
CHANGED
|
@@ -23,6 +23,9 @@ import { PopoverProvider, usePopoverContext } from "./Popover/context.mjs";
|
|
|
23
23
|
import { usePopoverGroupHandle } from "./Popover/groupContext.mjs";
|
|
24
24
|
import Popover from "./Popover/Popover.mjs";
|
|
25
25
|
import PopoverGroup from "./Popover/PopoverGroup.mjs";
|
|
26
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
27
|
+
import SkeletonText from "./Skeleton/SkeletonText.mjs";
|
|
28
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
26
29
|
import { ToastHost, toast, useToast } from "./Toast/imperative.mjs";
|
|
27
30
|
import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ScrollArea/atoms.mjs";
|
|
28
31
|
import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
|
|
@@ -83,4 +86,4 @@ import Text from "./Text/Text.mjs";
|
|
|
83
86
|
import { styles as styles$12 } from "./ToggleGroup/style.mjs";
|
|
84
87
|
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot } from "./ToggleGroup/atoms.mjs";
|
|
85
88
|
import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
|
|
86
|
-
export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, Alert, AutoComplete, Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, ContextMenuHost, ContextMenuTrigger, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, FloatingPanel, FloatingSheet, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Input, InputNumber, InputOTP, InputPassword, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, Radio, RadioGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderWithInput, SplitButton, Switch, SwitchIcon, SwitchRoot, SwitchThumb, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
|
|
89
|
+
export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, Alert, AutoComplete, Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, ContextMenuHost, ContextMenuTrigger, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, FloatingPanel, FloatingSheet, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Input, InputNumber, InputOTP, InputPassword, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, Radio, RadioGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonAvatar, SkeletonText, Slider, SliderWithInput, SplitButton, Switch, SwitchIcon, SwitchRoot, SwitchThumb, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
|
package/es/eslint/index.mjs
CHANGED
|
@@ -8,6 +8,10 @@ const DEPRECATED_UI_COMPONENTS = [
|
|
|
8
8
|
"Checkbox",
|
|
9
9
|
"CheckboxGroup",
|
|
10
10
|
"Drawer",
|
|
11
|
+
"Dropdown",
|
|
12
|
+
"FormSubmitFooter",
|
|
13
|
+
"FormTitle",
|
|
14
|
+
"InputOPT",
|
|
11
15
|
"Modal",
|
|
12
16
|
"Radio",
|
|
13
17
|
"RadioGroup",
|
|
@@ -15,6 +19,7 @@ const DEPRECATED_UI_COMPONENTS = [
|
|
|
15
19
|
"Select",
|
|
16
20
|
"Slider",
|
|
17
21
|
"SliderWithInput",
|
|
22
|
+
"Switch",
|
|
18
23
|
"Tabs",
|
|
19
24
|
"Tag",
|
|
20
25
|
"Text"
|
|
@@ -35,6 +40,11 @@ const restrictedImports = { rules: { "no-restricted-imports": ["error", {
|
|
|
35
40
|
importNames: DEPRECATED_UI_COMPONENTS,
|
|
36
41
|
message: "Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.",
|
|
37
42
|
name: "antd"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
importNames: ["message", "notification"],
|
|
46
|
+
message: "antd feedback APIs are deprecated. Use `toast` from \"@lobehub/ui/base-ui\".",
|
|
47
|
+
name: "antd"
|
|
38
48
|
}
|
|
39
49
|
],
|
|
40
50
|
patterns: [{
|
|
@@ -45,20 +55,36 @@ const restrictedImports = { rules: { "no-restricted-imports": ["error", {
|
|
|
45
55
|
"antd/es/auto-complete/*",
|
|
46
56
|
"antd/es/checkbox",
|
|
47
57
|
"antd/es/checkbox/*",
|
|
58
|
+
"antd/es/dropdown",
|
|
59
|
+
"antd/es/dropdown/*",
|
|
60
|
+
"antd/es/message",
|
|
61
|
+
"antd/es/message/*",
|
|
62
|
+
"antd/es/notification",
|
|
63
|
+
"antd/es/notification/*",
|
|
48
64
|
"antd/es/radio",
|
|
49
65
|
"antd/es/radio/*",
|
|
50
66
|
"antd/es/slider",
|
|
51
67
|
"antd/es/slider/*",
|
|
68
|
+
"antd/es/switch",
|
|
69
|
+
"antd/es/switch/*",
|
|
52
70
|
"antd/lib/alert",
|
|
53
71
|
"antd/lib/alert/*",
|
|
54
72
|
"antd/lib/auto-complete",
|
|
55
73
|
"antd/lib/auto-complete/*",
|
|
56
74
|
"antd/lib/checkbox",
|
|
57
75
|
"antd/lib/checkbox/*",
|
|
76
|
+
"antd/lib/dropdown",
|
|
77
|
+
"antd/lib/dropdown/*",
|
|
78
|
+
"antd/lib/message",
|
|
79
|
+
"antd/lib/message/*",
|
|
80
|
+
"antd/lib/notification",
|
|
81
|
+
"antd/lib/notification/*",
|
|
58
82
|
"antd/lib/radio",
|
|
59
83
|
"antd/lib/radio/*",
|
|
60
84
|
"antd/lib/slider",
|
|
61
|
-
"antd/lib/slider/*"
|
|
85
|
+
"antd/lib/slider/*",
|
|
86
|
+
"antd/lib/switch",
|
|
87
|
+
"antd/lib/switch/*"
|
|
62
88
|
],
|
|
63
89
|
message: "Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead."
|
|
64
90
|
}]
|
package/es/eslint/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n 'ActionIcon',\n 'Alert',\n 'AutoComplete',\n 'Avatar',\n 'Button',\n 'Checkbox',\n 'CheckboxGroup',\n 'Drawer',\n 'Modal',\n 'Radio',\n 'RadioGroup',\n 'Segmented',\n 'Select',\n 'Slider',\n 'SliderWithInput',\n 'Tabs',\n 'Tag',\n 'Text',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n 'antd/es/alert',\n 'antd/es/alert/*',\n 'antd/es/auto-complete',\n 'antd/es/auto-complete/*',\n 'antd/es/checkbox',\n 'antd/es/checkbox/*',\n 'antd/es/radio',\n 'antd/es/radio/*',\n 'antd/es/slider',\n 'antd/es/slider/*',\n 'antd/lib/alert',\n 'antd/lib/alert/*',\n 'antd/lib/auto-complete',\n 'antd/lib/auto-complete/*',\n 'antd/lib/checkbox',\n 'antd/lib/checkbox/*',\n 'antd/lib/radio',\n 'antd/lib/radio/*',\n 'antd/lib/slider',\n 'antd/lib/slider/*',\n];\n\nexport const restrictedImports = {\n rules: {\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: '@lobehub/ui',\n },\n {\n importNames: ['createStyles'],\n message:\n '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n name: 'antd-style',\n },\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: 'antd',\n },\n ],\n patterns: [\n {\n group: DEPRECATED_ANTD_COMPONENT_PATHS,\n message:\n 'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n },\n ],\n },\n ],\n },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n 'ActionIcon',\n 'Alert',\n 'AutoComplete',\n 'Avatar',\n 'Button',\n 'Checkbox',\n 'CheckboxGroup',\n 'Drawer',\n 'Dropdown',\n 'FormSubmitFooter',\n 'FormTitle',\n 'InputOPT',\n 'Modal',\n 'Radio',\n 'RadioGroup',\n 'Segmented',\n 'Select',\n 'Slider',\n 'SliderWithInput',\n 'Switch',\n 'Tabs',\n 'Tag',\n 'Text',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n 'antd/es/alert',\n 'antd/es/alert/*',\n 'antd/es/auto-complete',\n 'antd/es/auto-complete/*',\n 'antd/es/checkbox',\n 'antd/es/checkbox/*',\n 'antd/es/dropdown',\n 'antd/es/dropdown/*',\n 'antd/es/message',\n 'antd/es/message/*',\n 'antd/es/notification',\n 'antd/es/notification/*',\n 'antd/es/radio',\n 'antd/es/radio/*',\n 'antd/es/slider',\n 'antd/es/slider/*',\n 'antd/es/switch',\n 'antd/es/switch/*',\n 'antd/lib/alert',\n 'antd/lib/alert/*',\n 'antd/lib/auto-complete',\n 'antd/lib/auto-complete/*',\n 'antd/lib/checkbox',\n 'antd/lib/checkbox/*',\n 'antd/lib/dropdown',\n 'antd/lib/dropdown/*',\n 'antd/lib/message',\n 'antd/lib/message/*',\n 'antd/lib/notification',\n 'antd/lib/notification/*',\n 'antd/lib/radio',\n 'antd/lib/radio/*',\n 'antd/lib/slider',\n 'antd/lib/slider/*',\n 'antd/lib/switch',\n 'antd/lib/switch/*',\n];\n\nexport const restrictedImports = {\n rules: {\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: '@lobehub/ui',\n },\n {\n importNames: ['createStyles'],\n message:\n '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n name: 'antd-style',\n },\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: 'antd',\n },\n {\n importNames: ['message', 'notification'],\n message: 'antd feedback APIs are deprecated. Use `toast` from \"@lobehub/ui/base-ui\".',\n name: 'antd',\n },\n ],\n patterns: [\n {\n group: DEPRECATED_ANTD_COMPONENT_PATHS,\n message:\n 'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n },\n ],\n },\n ],\n },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAyCA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;EACA;GACE,aAAa,CAAC,WAAW,cAAc;GACvC,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GArEjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EAkCiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNativeButton.mjs","names":[],"sources":["../../src/hooks/useNativeButton.ts"],"sourcesContent":["import { isValidElement, type ReactElement, type ReactNode, useMemo } from 'react';\n\nexport interface UseNativeButtonOptions {\n /**\n * The children element that will be used as the trigger\n */\n children: ReactNode;\n /**\n * User-provided nativeButton prop\n */\n nativeButton?: boolean;\n /**\n * Additional nativeButton from trigger props (for DropdownMenu)\n */\n triggerNativeButton?: boolean;\n}\n\nexport interface UseNativeButtonResult {\n /**\n * Whether the trigger element is a native button\n */\n isNativeButtonTriggerElement: boolean;\n /**\n * The resolved nativeButton value to pass to Base UI components\n */\n resolvedNativeButton: boolean | undefined;\n}\n\n/**\n * Map of component displayNames to their nativeButton values.\n * Components that render native <button> elements should be true,\n * components that render non-button elements should be false.\n */\nconst NATIVE_BUTTON_MAP: Record<string, boolean> = {\n A: false,\n ActionIcon: false,\n ActionIconGroup: false,\n Alert: false,\n Avatar: false,\n AvatarGroup: false,\n BaseActionIcon: true,\n BaseButton: true,\n Block: false,\n BottomGradientButton: true,\n Burger: false,\n Button: true,\n Center: false,\n Checkbox: false,\n CheckboxGroup: false,\n Collapse: false,\n ColorSwatches: false,\n CopyButton: false,\n DownloadButton: false,\n EditableText: false,\n Empty: false,\n FileTypeIcon: false,\n Flexbox: false,\n FluentEmoji: false,\n GradientButton: true,\n Highlighter: false,\n Hotkey: false,\n Icon: false,\n Image: false,\n Img: false,\n Input: false,\n InputNumber: false,\n InputPassword: false,\n List: false,\n ListItem: false,\n Select: false,\n Switch: false,\n Markdown: false,\n MaterialFileTypeIcon: false,\n Segmented: false,\n Skeleton: false,\n SkeletonAvatar: false,\n SkeletonBlock: false,\n SkeletonButton: false,\n SkeletonParagraph: false,\n SkeletonTags: false,\n SkeletonTitle: false,\n Snippet: false,\n Tag: false,\n Text: false,\n TextArea: false,\n ThemeSwitch: false,\n Video: false,\n};\n\n/**\n * Get the displayName of a React component from an element.\n * Handles function components, forwardRef, memo, etc.\n */\nfunction getComponentDisplayName(element: ReactElement): string | undefined {\n const type = element.type;\n\n if (typeof type === 'string') return undefined;\n\n if (typeof type === 'function') {\n return (type as any).displayName || type.name;\n }\n\n if (typeof type === 'object' && type !== null) {\n // Handle forwardRef, memo, etc.\n const displayName =\n (type as any).displayName ||\n (type as any).render?.displayName ||\n (type as any).render?.name ||\n (type as any).type?.displayName ||\n (type as any).type?.name;\n return displayName;\n }\n\n return undefined;\n}\n\n/**\n * Hook to resolve nativeButton prop for Base UI trigger components.\n *\n * When using `render`, Base UI expects the rendered element to be a native <button> by default.\n * If we can infer it's not, we opt out to avoid warnings (users can still override via `nativeButton`).\n */\nexport function useNativeButton({\n children,\n nativeButton,\n triggerNativeButton,\n}: UseNativeButtonOptions): UseNativeButtonResult {\n const isNativeButtonTriggerElement = useMemo(() => {\n if (!isValidElement(children)) return false;\n return typeof children.type === 'string' && children.type === 'button';\n }, [children]);\n\n const resolvedNativeButton = useMemo(() => {\n // User-provided nativeButton takes highest priority\n if (nativeButton !== undefined) return nativeButton;\n // Trigger props nativeButton (for DropdownMenu) takes second priority\n if (triggerNativeButton !== undefined) return triggerNativeButton;\n // If it's a native button element, return true\n if (isNativeButtonTriggerElement) return true;\n // If children is not a valid element, let Base UI decide\n if (!isValidElement(children)) return undefined;\n // If it's a string type but not a button (e.g., 'div'), return false\n if (typeof children.type === 'string') return false;\n\n // Check if it's a known component from the library\n const displayName = getComponentDisplayName(children);\n if (displayName && displayName in NATIVE_BUTTON_MAP) {\n return NATIVE_BUTTON_MAP[displayName];\n }\n\n // For unknown React components, default to false to avoid warnings\n // since most custom components don't render native buttons\n return false;\n }, [children, isNativeButtonTriggerElement, nativeButton, triggerNativeButton]);\n\n return {\n isNativeButtonTriggerElement,\n resolvedNativeButton,\n };\n}\n"],"mappings":";;;;;;;AAiCA,MAAM,oBAA6C;CACjD,GAAG;CACH,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,sBAAsB;CACtB,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,eAAe;CACf,UAAU;CACV,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,cAAc;CACd,SAAS;CACT,aAAa;CACb,gBAAgB;CAChB,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,aAAa;CACb,eAAe;CACf,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,sBAAsB;CACtB,WAAW;CACX,UAAU;CACV,gBAAgB;CAChB,eAAe;CACf,gBAAgB;CAChB,mBAAmB;CACnB,cAAc;CACd,eAAe;CACf,SAAS;CACT,KAAK;CACL,MAAM;CACN,UAAU;CACV,aAAa;CACb,OAAO;AACT;;;;;AAMA,SAAS,wBAAwB,SAA2C;CAC1E,MAAM,OAAO,QAAQ;CAErB,IAAI,OAAO,SAAS,UAAU,OAAO,KAAA;CAErC,IAAI,OAAO,SAAS,YAClB,OAAQ,KAAa,eAAe,KAAK;CAG3C,IAAI,OAAO,SAAS,YAAY,SAAS,MAQvC,OALG,KAAa,eACb,KAAa,QAAQ,eACrB,KAAa,QAAQ,QACrB,KAAa,MAAM,eACnB,KAAa,MAAM;AAK1B;;;;;;;AAQA,SAAgB,gBAAgB,EAC9B,UACA,cACA,uBACgD;CAChD,MAAM,+BAA+B,cAAc;EACjD,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,OAAO,OAAO,SAAS,SAAS,YAAY,SAAS,SAAS;CAChE,GAAG,CAAC,QAAQ,CAAC;CAyBb,OAAO;EACL;EACA,sBAzB2B,cAAc;GAEzC,IAAI,iBAAiB,KAAA,GAAW,OAAO;GAEvC,IAAI,wBAAwB,KAAA,GAAW,OAAO;GAE9C,IAAI,8BAA8B,OAAO;GAEzC,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO,KAAA;GAEtC,IAAI,OAAO,SAAS,SAAS,UAAU,OAAO;GAG9C,MAAM,cAAc,wBAAwB,QAAQ;GACpD,IAAI,eAAe,eAAe,mBAChC,OAAO,kBAAkB;GAK3B,OAAO;EACT,GAAG;GAAC;GAAU;GAA8B;GAAc;EAAmB,CAIxD;CACrB;AACF"}
|
|
1
|
+
{"version":3,"file":"useNativeButton.mjs","names":[],"sources":["../../src/hooks/useNativeButton.ts"],"sourcesContent":["import { isValidElement, type ReactElement, type ReactNode, useMemo } from 'react';\n\nexport interface UseNativeButtonOptions {\n /**\n * The children element that will be used as the trigger\n */\n children: ReactNode;\n /**\n * User-provided nativeButton prop\n */\n nativeButton?: boolean;\n /**\n * Additional nativeButton from trigger props (for DropdownMenu)\n */\n triggerNativeButton?: boolean;\n}\n\nexport interface UseNativeButtonResult {\n /**\n * Whether the trigger element is a native button\n */\n isNativeButtonTriggerElement: boolean;\n /**\n * The resolved nativeButton value to pass to Base UI components\n */\n resolvedNativeButton: boolean | undefined;\n}\n\n/**\n * Map of component displayNames to their nativeButton values.\n * Components that render native <button> elements should be true,\n * components that render non-button elements should be false.\n */\nconst NATIVE_BUTTON_MAP: Record<string, boolean> = {\n A: false,\n ActionIcon: false,\n ActionIconGroup: false,\n Alert: false,\n Avatar: false,\n AvatarGroup: false,\n BaseActionIcon: true,\n BaseButton: true,\n Block: false,\n BottomGradientButton: true,\n Burger: false,\n Button: true,\n Center: false,\n Checkbox: false,\n CheckboxGroup: false,\n Collapse: false,\n ColorSwatches: false,\n CopyButton: false,\n DownloadButton: false,\n EditableText: false,\n Empty: false,\n FileTypeIcon: false,\n Flexbox: false,\n FluentEmoji: false,\n GradientButton: true,\n Highlighter: false,\n Hotkey: false,\n Icon: false,\n Image: false,\n Img: false,\n Input: false,\n InputNumber: false,\n InputPassword: false,\n List: false,\n ListItem: false,\n Select: false,\n Switch: false,\n Markdown: false,\n MaterialFileTypeIcon: false,\n Segmented: false,\n Skeleton: false,\n SkeletonAvatar: false,\n SkeletonBlock: false,\n SkeletonButton: false,\n SkeletonParagraph: false,\n SkeletonTags: false,\n SkeletonText: false,\n SkeletonTitle: false,\n Snippet: false,\n Tag: false,\n Text: false,\n TextArea: false,\n ThemeSwitch: false,\n Video: false,\n};\n\n/**\n * Get the displayName of a React component from an element.\n * Handles function components, forwardRef, memo, etc.\n */\nfunction getComponentDisplayName(element: ReactElement): string | undefined {\n const type = element.type;\n\n if (typeof type === 'string') return undefined;\n\n if (typeof type === 'function') {\n return (type as any).displayName || type.name;\n }\n\n if (typeof type === 'object' && type !== null) {\n // Handle forwardRef, memo, etc.\n const displayName =\n (type as any).displayName ||\n (type as any).render?.displayName ||\n (type as any).render?.name ||\n (type as any).type?.displayName ||\n (type as any).type?.name;\n return displayName;\n }\n\n return undefined;\n}\n\n/**\n * Hook to resolve nativeButton prop for Base UI trigger components.\n *\n * When using `render`, Base UI expects the rendered element to be a native <button> by default.\n * If we can infer it's not, we opt out to avoid warnings (users can still override via `nativeButton`).\n */\nexport function useNativeButton({\n children,\n nativeButton,\n triggerNativeButton,\n}: UseNativeButtonOptions): UseNativeButtonResult {\n const isNativeButtonTriggerElement = useMemo(() => {\n if (!isValidElement(children)) return false;\n return typeof children.type === 'string' && children.type === 'button';\n }, [children]);\n\n const resolvedNativeButton = useMemo(() => {\n // User-provided nativeButton takes highest priority\n if (nativeButton !== undefined) return nativeButton;\n // Trigger props nativeButton (for DropdownMenu) takes second priority\n if (triggerNativeButton !== undefined) return triggerNativeButton;\n // If it's a native button element, return true\n if (isNativeButtonTriggerElement) return true;\n // If children is not a valid element, let Base UI decide\n if (!isValidElement(children)) return undefined;\n // If it's a string type but not a button (e.g., 'div'), return false\n if (typeof children.type === 'string') return false;\n\n // Check if it's a known component from the library\n const displayName = getComponentDisplayName(children);\n if (displayName && displayName in NATIVE_BUTTON_MAP) {\n return NATIVE_BUTTON_MAP[displayName];\n }\n\n // For unknown React components, default to false to avoid warnings\n // since most custom components don't render native buttons\n return false;\n }, [children, isNativeButtonTriggerElement, nativeButton, triggerNativeButton]);\n\n return {\n isNativeButtonTriggerElement,\n resolvedNativeButton,\n };\n}\n"],"mappings":";;;;;;;AAiCA,MAAM,oBAA6C;CACjD,GAAG;CACH,YAAY;CACZ,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,sBAAsB;CACtB,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,eAAe;CACf,UAAU;CACV,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,cAAc;CACd,SAAS;CACT,aAAa;CACb,gBAAgB;CAChB,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,aAAa;CACb,eAAe;CACf,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,sBAAsB;CACtB,WAAW;CACX,UAAU;CACV,gBAAgB;CAChB,eAAe;CACf,gBAAgB;CAChB,mBAAmB;CACnB,cAAc;CACd,cAAc;CACd,eAAe;CACf,SAAS;CACT,KAAK;CACL,MAAM;CACN,UAAU;CACV,aAAa;CACb,OAAO;AACT;;;;;AAMA,SAAS,wBAAwB,SAA2C;CAC1E,MAAM,OAAO,QAAQ;CAErB,IAAI,OAAO,SAAS,UAAU,OAAO,KAAA;CAErC,IAAI,OAAO,SAAS,YAClB,OAAQ,KAAa,eAAe,KAAK;CAG3C,IAAI,OAAO,SAAS,YAAY,SAAS,MAQvC,OALG,KAAa,eACb,KAAa,QAAQ,eACrB,KAAa,QAAQ,QACrB,KAAa,MAAM,eACnB,KAAa,MAAM;AAK1B;;;;;;;AAQA,SAAgB,gBAAgB,EAC9B,UACA,cACA,uBACgD;CAChD,MAAM,+BAA+B,cAAc;EACjD,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,OAAO,OAAO,SAAS,SAAS,YAAY,SAAS,SAAS;CAChE,GAAG,CAAC,QAAQ,CAAC;CAyBb,OAAO;EACL;EACA,sBAzB2B,cAAc;GAEzC,IAAI,iBAAiB,KAAA,GAAW,OAAO;GAEvC,IAAI,wBAAwB,KAAA,GAAW,OAAO;GAE9C,IAAI,8BAA8B,OAAO;GAEzC,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO,KAAA;GAEtC,IAAI,OAAO,SAAS,SAAS,UAAU,OAAO;GAG9C,MAAM,cAAc,wBAAwB,QAAQ;GACpD,IAAI,eAAe,eAAe,mBAChC,OAAO,kBAAkB;GAK3B,OAAO;EACT,GAAG;GAAC;GAAU;GAA8B;GAAc;EAAmB,CAIxD;CACrB;AACF"}
|
package/es/index.mjs
CHANGED
|
@@ -113,13 +113,6 @@ import Segmented from "./Segmented/Segmented.mjs";
|
|
|
113
113
|
import { AUTO_HEIGHT_MESSAGE_TYPE } from "./HtmlPreview/injectAutoHeightScript.mjs";
|
|
114
114
|
import { HtmlPreviewIframe } from "./HtmlPreview/Iframe.mjs";
|
|
115
115
|
import HtmlPreview from "./HtmlPreview/HtmlPreview.mjs";
|
|
116
|
-
import SkeletonBlock from "./Skeleton/SkeletonBlock.mjs";
|
|
117
|
-
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
118
|
-
import SkeletonParagraph from "./Skeleton/SkeletonParagraph.mjs";
|
|
119
|
-
import SkeletonTitle from "./Skeleton/SkeletonTitle.mjs";
|
|
120
|
-
import SkeletonButton from "./Skeleton/SkeletonButton.mjs";
|
|
121
|
-
import SkeletonTags from "./Skeleton/SkeletonTags.mjs";
|
|
122
|
-
import Skeleton from "./Skeleton/index.mjs";
|
|
123
116
|
import PreviewGroup from "./Image/PreviewGroup.mjs";
|
|
124
117
|
import { ToastHost, toast, useToast } from "./base-ui/Toast/imperative.mjs";
|
|
125
118
|
import Image from "./Image/index.mjs";
|
|
@@ -155,6 +148,13 @@ import { ScrollArea } from "./base-ui/ScrollArea/ScrollArea.mjs";
|
|
|
155
148
|
import SearchBar from "./SearchBar/SearchBar.mjs";
|
|
156
149
|
import Select from "./Select/Select.mjs";
|
|
157
150
|
import SideNav from "./SideNav/SideNav.mjs";
|
|
151
|
+
import SkeletonBlock from "./Skeleton/SkeletonBlock.mjs";
|
|
152
|
+
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
153
|
+
import SkeletonParagraph from "./Skeleton/SkeletonParagraph.mjs";
|
|
154
|
+
import SkeletonTitle from "./Skeleton/SkeletonTitle.mjs";
|
|
155
|
+
import SkeletonButton from "./Skeleton/SkeletonButton.mjs";
|
|
156
|
+
import SkeletonTags from "./Skeleton/SkeletonTags.mjs";
|
|
157
|
+
import Skeleton from "./Skeleton/index.mjs";
|
|
158
158
|
import SliderWithInput from "./SliderWithInput/SliderWithInput.mjs";
|
|
159
159
|
import SortableList from "./SortableList/SortableList.mjs";
|
|
160
160
|
import ThemeSwitch from "./ThemeSwitch/ThemeSwitch.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"baseline.mjs","names":[],"sources":["../../src/static-css/baseline.ts"],"sourcesContent":["import type { AntdProbeName } from './registry';\n\n// The antd components @lobehub/ui internals can render. Kept in sync with the\n// source tree by baseline.test.ts — a failure there means this list must change.\nexport const lobeUiAntdBaseline: AntdProbeName[] = [\n 'alert',\n 'anchor',\n 'app',\n 'auto-complete',\n 'avatar',\n 'button',\n 'collapse',\n 'color-picker',\n 'date-picker',\n 'divider',\n 'drawer',\n 'dropdown',\n 'empty',\n 'form',\n 'input',\n 'input-number',\n 'input-textarea',\n 'menu',\n 'modal',\n 'popover',\n 'progress',\n 'segmented',\n 'select',\n '
|
|
1
|
+
{"version":3,"file":"baseline.mjs","names":[],"sources":["../../src/static-css/baseline.ts"],"sourcesContent":["import type { AntdProbeName } from './registry';\n\n// The antd components @lobehub/ui internals can render. Kept in sync with the\n// source tree by baseline.test.ts — a failure there means this list must change.\nexport const lobeUiAntdBaseline: AntdProbeName[] = [\n 'alert',\n 'anchor',\n 'app',\n 'auto-complete',\n 'avatar',\n 'button',\n 'collapse',\n 'color-picker',\n 'date-picker',\n 'divider',\n 'drawer',\n 'dropdown',\n 'empty',\n 'form',\n 'input',\n 'input-number',\n 'input-textarea',\n 'menu',\n 'modal',\n 'popover',\n 'progress',\n 'segmented',\n 'select',\n 'slider',\n 'space',\n 'tabs',\n 'tag',\n 'tag-preset',\n 'tag-status',\n 'upload',\n];\n"],"mappings":";AAIA,MAAa,qBAAsC;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
|