@lobehub/ui 5.36.3 → 5.36.4
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/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/{Skeleton → base-ui/Skeleton}/SkeletonAvatar.d.mts +1 -1
- package/es/base-ui/Skeleton/SkeletonAvatar.mjs +16 -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 +77 -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 -5
- package/es/hooks/useNativeButton.mjs.map +1 -1
- package/es/index.d.mts +5 -9
- package/es/index.mjs +4 -8
- package/es/static-css/baseline.mjs +0 -1
- package/es/static-css/baseline.mjs.map +1 -1
- package/package.json +1 -1
- package/es/Skeleton/Skeleton.mjs +0 -69
- package/es/Skeleton/Skeleton.mjs.map +0 -1
- package/es/Skeleton/SkeletonAvatar.mjs +0 -29
- package/es/Skeleton/SkeletonAvatar.mjs.map +0 -1
- package/es/Skeleton/SkeletonBlock.d.mts +0 -7
- package/es/Skeleton/SkeletonBlock.mjs +0 -20
- package/es/Skeleton/SkeletonBlock.mjs.map +0 -1
- package/es/Skeleton/SkeletonButton.d.mts +0 -7
- package/es/Skeleton/SkeletonButton.mjs +0 -37
- package/es/Skeleton/SkeletonButton.mjs.map +0 -1
- package/es/Skeleton/SkeletonParagraph.d.mts +0 -7
- package/es/Skeleton/SkeletonParagraph.mjs +0 -40
- package/es/Skeleton/SkeletonParagraph.mjs.map +0 -1
- package/es/Skeleton/SkeletonTags.d.mts +0 -7
- package/es/Skeleton/SkeletonTags.mjs +0 -54
- package/es/Skeleton/SkeletonTags.mjs.map +0 -1
- package/es/Skeleton/SkeletonTitle.d.mts +0 -7
- package/es/Skeleton/SkeletonTitle.mjs +0 -27
- package/es/Skeleton/SkeletonTitle.mjs.map +0 -1
- package/es/Skeleton/index.d.mts +0 -22
- package/es/Skeleton/index.d.ts +0 -1
- package/es/Skeleton/index.js +0 -1
- package/es/Skeleton/index.mjs +0 -19
- package/es/Skeleton/index.mjs.map +0 -1
- package/es/Skeleton/style.mjs +0 -47
- package/es/Skeleton/style.mjs.map +0 -1
- package/es/Skeleton/type.d.mts +0 -59
|
@@ -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
|
|
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 SkeletonText: 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,cAAc;CACd,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.d.mts
CHANGED
|
@@ -192,6 +192,10 @@ import PreviewGroup from "./Image/PreviewGroup.mjs";
|
|
|
192
192
|
import Image from "./Image/index.mjs";
|
|
193
193
|
import A from "./A/index.mjs";
|
|
194
194
|
import { styles } from "./base-ui/DropdownMenu/sharedStyle.mjs";
|
|
195
|
+
import { SkeletonAvatarProps, SkeletonProps, SkeletonTextProps } from "./base-ui/Skeleton/type.mjs";
|
|
196
|
+
import SkeletonAvatar from "./base-ui/Skeleton/SkeletonAvatar.mjs";
|
|
197
|
+
import SkeletonText from "./base-ui/Skeleton/SkeletonText.mjs";
|
|
198
|
+
import Skeleton from "./base-ui/Skeleton/index.mjs";
|
|
195
199
|
import { MotionComponent, MotionComponentType, MotionProvider, useMotionComponent } from "./MotionProvider/index.mjs";
|
|
196
200
|
import { CDN, genCdnUrl } from "./utils/genCdnUrl.mjs";
|
|
197
201
|
import ConfigProvider, { Config, useCdnFn } from "./ConfigProvider/index.mjs";
|
|
@@ -261,14 +265,6 @@ import "./Select/index.mjs";
|
|
|
261
265
|
import { SideNavProps } from "./SideNav/type.mjs";
|
|
262
266
|
import SideNav from "./SideNav/SideNav.mjs";
|
|
263
267
|
import "./SideNav/index.mjs";
|
|
264
|
-
import { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps } from "./Skeleton/type.mjs";
|
|
265
|
-
import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
|
|
266
|
-
import SkeletonBlock from "./Skeleton/SkeletonBlock.mjs";
|
|
267
|
-
import SkeletonButton from "./Skeleton/SkeletonButton.mjs";
|
|
268
|
-
import SkeletonParagraph from "./Skeleton/SkeletonParagraph.mjs";
|
|
269
|
-
import SkeletonTags from "./Skeleton/SkeletonTags.mjs";
|
|
270
|
-
import SkeletonTitle from "./Skeleton/SkeletonTitle.mjs";
|
|
271
|
-
import Skeleton from "./Skeleton/index.mjs";
|
|
272
268
|
import { SliderWithInputProps } from "./SliderWithInput/type.mjs";
|
|
273
269
|
import SliderWithInput from "./SliderWithInput/SliderWithInput.mjs";
|
|
274
270
|
import "./SliderWithInput/index.mjs";
|
|
@@ -310,4 +306,4 @@ import { LayoutToc } from "./Layout/components/LayoutToc.mjs";
|
|
|
310
306
|
import Layout from "./Layout/index.mjs";
|
|
311
307
|
import { rehypeStreamAnimated } from "@lobehub/streamdown";
|
|
312
308
|
import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
|
|
313
|
-
export { A, type AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, type ColorPalettes, type ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, type DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, 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, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, type LobeCustomStylish, type LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeuralNetworkLoading, type NeuralNetworkLoadingProps, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps,
|
|
309
|
+
export { A, type AProps, Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionIcon, ActionIconGroup, type ActionIconGroupEvent, type MenuItemType as ActionIconGroupItemType, type ActionIconGroupProps, type ActionIconProps, type ActionIconSize, Alert, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BaseMenuItemType, Block, type BlockProps, Burger, type BurgerProps, Button, type ButtonProps, type CDN, CLASSNAMES, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CodeDiff, type CodeDiffProps, CodeEditor, type CodeEditorProps, Collapse, type CollapseItemType, type CollapseProps, type ColorPalettes, type ColorPalettesAlpha, ColorSwatches, type ColorSwatchesProps, type ColorToken, type Config, ConfigProvider, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DiffViewMode, type DivProps, DownloadButton, type DownloadButtonProps, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelProps, DraggableSideNav, type DraggableSideNavProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type MenuItemType as DropdownMenuItemType, 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, DropdownMenuTrigger, type DropdownMenuTriggerProps, type DropdownProps, EditableText, type EditableTextProps, EditorSlashMenu, type EditorSlashMenuGroup, type EditorSlashMenuItems, type EditorSlashMenuOption, EmojiPicker, type EmojiPickerProps, Empty, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, FileTypeIcon, type FileTypeIconProps, _default as FlexBasic, type FlexBasicProps, _default as Flexbox, type FlexboxProps, FluentEmoji, type FluentEmojiProps, FontLoader, type FontLoaderProps, Footer, type FooterProps, Form, FormGroup, type FormGroupItemType, type FormGroupProps, type FormInstance, FormItem, type FormItemProps, FormModal, type FormModalProps, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, Freeze, type FreezeProps, type GenericItemType, Grid, type GridProps, GroupAvatar, type GroupAvatarProps, GuideCard, type GuideCardProps, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, type HeaderProps, Highlighter, type HighlighterProps, Hotkey, HotkeyInput, type HotkeyInputProps, type HotkeyProps, HtmlPreview, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, I18nProvider, type I18nProviderProps, Icon, type IconProps, IconProvider, type IconSize, Image, type ImagePreviewOptions, type ImageProps, ImageSelect, type ImageSelectItem, type ImageSelectProps, type ImgProps, type ImperativeModalProps, Input, InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, type ItemType, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, List, ListItem, type ListItemProps, type ListProps, type LobeCustomStylish, type LobeCustomToken, I18nProvider as LobeUIProvider, Markdown, type MarkdownProps, MaskShadow, type MaskShadowProps, MaterialFileTypeIcon, type MaterialFileTypeIconProps, Menu, type MenuCheckboxItemType, type MenuInfo, type MenuItemType, type MenuProps, Mermaid, type MermaidProps, Meta, type MetaProps, Modal, ModalHost, type ModalHostProps, type ModalInstance, type ModalProps, ModalProvider, MotionComponent, type MotionComponentType, MotionProvider, NeuralNetworkLoading, type NeuralNetworkLoadingProps, NeutralColors, NeutralColorsObj, PatchDiff, type PatchDiffProps, type Placement, type PlacementConfig, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, PopoverPortal, type PopoverPortalAtomProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, type PresetColorKey, type PresetColorType, type PresetSystemColorKey, type PresetSystemColorType, PreviewGroup, type PreviewGroupProps, PrimaryColors, PrimaryColorsObj, type RawModalComponent, type RawModalComponentProps, type RawModalInstance, type RawModalKeyOptions, type RawModalOptions, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchResultCards, type SearchResultCardsProps, Segmented, type SegmentedProps, Select, type SelectProps, _default$1 as ShikiLobeTheme, SideNav, type SideNavProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, SliderWithInput, type SliderWithInputProps, Snippet, type SnippetProps, SortableList, type SortableListProps, type SpanProps, type SvgProps, SyntaxHighlighter, type SyntaxHighlighterProps, SyntaxMermaid, type SyntaxMermaidProps, type SystemColorToken, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, type TextProps, ThemeProvider, type ThemeProviderProps, ThemeSwitch, type ThemeSwitchProps, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, Toc, type TocProps, Tooltip, TooltipGroup, type TooltipProps, type Trigger, Typography, type TypographyProps, Video, type VideoProps, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useToast, useTranslation };
|
package/es/index.mjs
CHANGED
|
@@ -40,6 +40,9 @@ import AutoComplete from "./AutoComplete/Select.mjs";
|
|
|
40
40
|
import FluentEmoji from "./FluentEmoji/FluentEmoji.mjs";
|
|
41
41
|
import AvatarGroup from "./Avatar/AvatarGroup/index.mjs";
|
|
42
42
|
import Avatar from "./Avatar/index.mjs";
|
|
43
|
+
import SkeletonAvatar from "./base-ui/Skeleton/SkeletonAvatar.mjs";
|
|
44
|
+
import SkeletonText from "./base-ui/Skeleton/SkeletonText.mjs";
|
|
45
|
+
import Skeleton from "./base-ui/Skeleton/index.mjs";
|
|
43
46
|
import Burger from "./Burger/Burger.mjs";
|
|
44
47
|
import Button from "./Button/Button.mjs";
|
|
45
48
|
import CheckboxGroup from "./Checkbox/CheckboxGroup.mjs";
|
|
@@ -113,13 +116,6 @@ import Segmented from "./Segmented/Segmented.mjs";
|
|
|
113
116
|
import { AUTO_HEIGHT_MESSAGE_TYPE } from "./HtmlPreview/injectAutoHeightScript.mjs";
|
|
114
117
|
import { HtmlPreviewIframe } from "./HtmlPreview/Iframe.mjs";
|
|
115
118
|
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
119
|
import PreviewGroup from "./Image/PreviewGroup.mjs";
|
|
124
120
|
import { ToastHost, toast, useToast } from "./base-ui/Toast/imperative.mjs";
|
|
125
121
|
import Image from "./Image/index.mjs";
|
|
@@ -161,4 +157,4 @@ import ThemeSwitch from "./ThemeSwitch/ThemeSwitch.mjs";
|
|
|
161
157
|
import Toc from "./Toc/Toc.mjs";
|
|
162
158
|
import { rehypeStreamAnimated } from "@lobehub/streamdown";
|
|
163
159
|
import { ErrorBoundary } from "react-error-boundary";
|
|
164
|
-
export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, NeuralNetworkLoading, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar,
|
|
160
|
+
export { A, Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, AutoComplete, Avatar, AvatarGroup, Block, Burger, Button, CLASSNAMES, Center, Checkbox, CheckboxGroup, CodeDiff, CodeEditor, Collapse, ColorSwatches, ConfigProvider, ContextMenuHost, ContextMenuTrigger, CopyButton, DatePicker, DownloadButton, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggableSideNav, Drawer, Dropdown, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EditableText, EditorSlashMenu, EmojiPicker, Empty, ErrorBoundary, FileTypeIcon, FlexBasic_default as FlexBasic, FlexBasic_default as Flexbox, FluentEmoji, FontLoader, Footer, Form, FormGroup, FormItem, FormModal, FormSubmitFooter, FormTitle, Freeze, Grid, GroupAvatar, GuideCard, DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, Header, Highlighter, Hotkey, HotkeyInput, HtmlPreview, HtmlPreviewIframe, I18nProvider, Icon, IconProvider, Image, ImageSelect, Input, InputNumber, InputOPT, InputPassword, KeyMapEnum, LOBE_THEME_APP_ID, Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc, List, ListItem, I18nProvider as LobeUIProvider, Markdown, MaskShadow, MaterialFileTypeIcon, Menu, Mermaid, Meta, Modal, ModalHost, ModalProvider, MotionComponent, MotionProvider, NeuralNetworkLoading, PatchDiff, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, PreviewGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollShadow, SearchBar, SearchResultCards, Segmented, Select, lobe_theme_default as ShikiLobeTheme, SideNav, Skeleton, SkeletonAvatar, SkeletonText, SliderWithInput, Snippet, SortableList, SyntaxHighlighter, SyntaxMermaid, Tabs, Tag, Text, TextArea, ThemeProvider, ThemeSwitch, ToastHost, Toc, Tooltip, TooltipGroup, Typography, Video, closeContextMenu, combineKeys, copyToClipboard, createModal, createRawModal, findCustomThemeName, genCdnUrl, generateColorNeutralPalette, generateColorPalette, highlighterThemes, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed, generateCustomStylish as lobeCustomStylish, generateCustomToken as lobeCustomToken, staticStylish as lobeStaticStylish, styles as menuSharedStyles, mermaidThemes, neutralColors, neutralColorsSwatches, placementMap, preprocessMarkdownContent, preventDefault, preventDefaultAndStopPropagation, primaryColors, primaryColorsSwatches, rehypeCustomFootnotes, rehypeKatexDir, rehypeStreamAnimated, remarkBr, remarkColor, remarkCustomFootnotes, remarkGfmPlus, remarkVideo, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, stopPropagation, toFloatingUIPlacement, toast, updateContextMenuItems, useAppElement, useCdnFn, useModalContext, useMotionComponent, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useToast, useTranslation };
|
|
@@ -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"}
|
package/package.json
CHANGED
package/es/Skeleton/Skeleton.mjs
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
-
import { styles } from "./style.mjs";
|
|
4
|
-
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
5
|
-
import SkeletonParagraph from "./SkeletonParagraph.mjs";
|
|
6
|
-
import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { cx } from "antd-style";
|
|
9
|
-
//#region src/Skeleton/Skeleton.tsx
|
|
10
|
-
const Skeleton = ({ active, avatar = false, title = true, paragraph = true, className, classNames, styles: customStyles, style, width, height, gap = 16, ...rest }) => {
|
|
11
|
-
const showAvatar = Boolean(avatar);
|
|
12
|
-
const showTitle = Boolean(title);
|
|
13
|
-
const showParagraph = Boolean(paragraph);
|
|
14
|
-
const avatarProps = typeof avatar === "object" ? avatar : void 0;
|
|
15
|
-
const titleProps = typeof title === "object" ? title : void 0;
|
|
16
|
-
const paragraphProps = typeof paragraph === "object" ? paragraph : void 0;
|
|
17
|
-
const rootStyle = {
|
|
18
|
-
...style,
|
|
19
|
-
...customStyles?.root,
|
|
20
|
-
...width !== void 0 ? { width } : {},
|
|
21
|
-
...height !== void 0 ? { height } : {}
|
|
22
|
-
};
|
|
23
|
-
const avatarActive = avatarProps?.active ?? active;
|
|
24
|
-
const titleActive = titleProps?.active ?? active;
|
|
25
|
-
const paragraphActive = paragraphProps?.active ?? active;
|
|
26
|
-
return /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
27
|
-
horizontal: true,
|
|
28
|
-
align: showParagraph ? "flex-start" : "center",
|
|
29
|
-
className: cx(className, classNames?.root),
|
|
30
|
-
gap,
|
|
31
|
-
style: rootStyle,
|
|
32
|
-
width: "100%",
|
|
33
|
-
...rest,
|
|
34
|
-
children: [showAvatar && /* @__PURE__ */ jsx(SkeletonAvatar, {
|
|
35
|
-
...avatarProps,
|
|
36
|
-
active: avatarActive,
|
|
37
|
-
className: cx(styles.avatar, classNames?.avatar, avatarProps?.className),
|
|
38
|
-
style: {
|
|
39
|
-
...avatarProps?.style,
|
|
40
|
-
...customStyles?.avatar
|
|
41
|
-
}
|
|
42
|
-
}), /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
43
|
-
gap,
|
|
44
|
-
width: "100%",
|
|
45
|
-
children: [showTitle && /* @__PURE__ */ jsx(SkeletonTitle, {
|
|
46
|
-
...titleProps,
|
|
47
|
-
active: titleActive,
|
|
48
|
-
className: cx(classNames?.title, titleProps?.className),
|
|
49
|
-
style: {
|
|
50
|
-
...titleProps?.style,
|
|
51
|
-
...customStyles?.title
|
|
52
|
-
}
|
|
53
|
-
}), showParagraph && /* @__PURE__ */ jsx(SkeletonParagraph, {
|
|
54
|
-
...paragraphProps,
|
|
55
|
-
active: paragraphActive,
|
|
56
|
-
className: cx(classNames?.paragraph, paragraphProps?.className),
|
|
57
|
-
style: {
|
|
58
|
-
...paragraphProps?.style,
|
|
59
|
-
...customStyles?.paragraph
|
|
60
|
-
}
|
|
61
|
-
})]
|
|
62
|
-
})]
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
Skeleton.displayName = "Skeleton";
|
|
66
|
-
//#endregion
|
|
67
|
-
export { Skeleton as default };
|
|
68
|
-
|
|
69
|
-
//# sourceMappingURL=Skeleton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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":";;;;;;;;;AAaA,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,29 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { styles } from "./style.mjs";
|
|
3
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { cssVar, cx } from "antd-style";
|
|
6
|
-
//#region src/Skeleton/SkeletonAvatar.tsx
|
|
7
|
-
const DEFAULT_SIZE = 40;
|
|
8
|
-
const SkeletonAvatar = ({ active, shape = "square", size, width, height, style, className, ...rest }) => {
|
|
9
|
-
const defaultSize = size ?? DEFAULT_SIZE;
|
|
10
|
-
const finalWidth = width ?? defaultSize;
|
|
11
|
-
const finalHeight = height ?? defaultSize;
|
|
12
|
-
const borderRadius = shape === "circle" ? "50%" : cssVar.borderRadius;
|
|
13
|
-
return /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
14
|
-
active,
|
|
15
|
-
className: cx(styles.avatar, className),
|
|
16
|
-
height: finalHeight,
|
|
17
|
-
style: {
|
|
18
|
-
borderRadius,
|
|
19
|
-
...style
|
|
20
|
-
},
|
|
21
|
-
width: finalWidth,
|
|
22
|
-
...rest
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
26
|
-
//#endregion
|
|
27
|
-
export { SkeletonAvatar as default };
|
|
28
|
-
|
|
29
|
-
//# sourceMappingURL=SkeletonAvatar.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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;AAErB,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,7 +0,0 @@
|
|
|
1
|
-
import { SkeletonBlockProps } from "./type.mjs";
|
|
2
|
-
import { FC } from "react";
|
|
3
|
-
//#region src/Skeleton/SkeletonBlock.d.ts
|
|
4
|
-
declare const SkeletonBlock: FC<SkeletonBlockProps>;
|
|
5
|
-
//#endregion
|
|
6
|
-
export { SkeletonBlock as default };
|
|
7
|
-
//# sourceMappingURL=SkeletonBlock.d.mts.map
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import Block from "../Block/Block.mjs";
|
|
3
|
-
import { styles } from "./style.mjs";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { cx } from "antd-style";
|
|
6
|
-
//#region src/Skeleton/SkeletonBlock.tsx
|
|
7
|
-
const SkeletonBlock = ({ width = "100%", height = "1em", active, style, className }) => {
|
|
8
|
-
return /* @__PURE__ */ jsx(Block, {
|
|
9
|
-
className: cx(styles.base, active && styles.active, className),
|
|
10
|
-
height,
|
|
11
|
-
style,
|
|
12
|
-
variant: "filled",
|
|
13
|
-
width
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
SkeletonBlock.displayName = "SkeletonBlock";
|
|
17
|
-
//#endregion
|
|
18
|
-
export { SkeletonBlock as default };
|
|
19
|
-
|
|
20
|
-
//# sourceMappingURL=SkeletonBlock.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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":";;;;;;AAUA,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,7 +0,0 @@
|
|
|
1
|
-
import { SkeletonButtonProps } from "./type.mjs";
|
|
2
|
-
import { FC } from "react";
|
|
3
|
-
//#region src/Skeleton/SkeletonButton.d.ts
|
|
4
|
-
declare const SkeletonButton: FC<SkeletonButtonProps>;
|
|
5
|
-
//#endregion
|
|
6
|
-
export { SkeletonButton as default };
|
|
7
|
-
//# sourceMappingURL=SkeletonButton.d.mts.map
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
import { cssVar } from "antd-style";
|
|
5
|
-
//#region src/Skeleton/SkeletonButton.tsx
|
|
6
|
-
const HEIGHT_MAP = {
|
|
7
|
-
default: 36,
|
|
8
|
-
large: 46,
|
|
9
|
-
small: 28
|
|
10
|
-
};
|
|
11
|
-
const SkeletonButton = ({ active, block = false, shape = "default", size = "default", width, height, style, className, ...rest }) => {
|
|
12
|
-
const resolvedSize = size ?? "default";
|
|
13
|
-
const baseHeight = height ?? HEIGHT_MAP[resolvedSize];
|
|
14
|
-
const finalWidth = width ?? (block ? "100%" : shape === "circle" ? baseHeight : 80);
|
|
15
|
-
const RADIUS_MAP = {
|
|
16
|
-
default: cssVar.borderRadius,
|
|
17
|
-
large: cssVar.borderRadiusLG,
|
|
18
|
-
small: cssVar.borderRadiusSM
|
|
19
|
-
};
|
|
20
|
-
const borderRadius = shape === "circle" ? "50%" : shape === "round" ? `calc(${cssVar.borderRadius} * 2)` : RADIUS_MAP[resolvedSize];
|
|
21
|
-
return /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
22
|
-
active,
|
|
23
|
-
className,
|
|
24
|
-
height: baseHeight,
|
|
25
|
-
style: {
|
|
26
|
-
borderRadius,
|
|
27
|
-
...style
|
|
28
|
-
},
|
|
29
|
-
width: finalWidth,
|
|
30
|
-
...rest
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
SkeletonButton.displayName = "SkeletonButton";
|
|
34
|
-
//#endregion
|
|
35
|
-
export { SkeletonButton as default };
|
|
36
|
-
|
|
37
|
-
//# sourceMappingURL=SkeletonButton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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;AAEA,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,7 +0,0 @@
|
|
|
1
|
-
import { SkeletonParagraphProps } from "./type.mjs";
|
|
2
|
-
import { FC } from "react";
|
|
3
|
-
//#region src/Skeleton/SkeletonParagraph.d.ts
|
|
4
|
-
declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
|
|
5
|
-
//#endregion
|
|
6
|
-
export { SkeletonParagraph as default };
|
|
7
|
-
//# sourceMappingURL=SkeletonParagraph.d.mts.map
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
//#region src/Skeleton/SkeletonParagraph.tsx
|
|
6
|
-
const DEFAULT_ROWS = 3;
|
|
7
|
-
const SkeletonParagraph = ({ active, rows = DEFAULT_ROWS, gap, width, height, fontSize, lineHeight, style, className, ...rest }) => {
|
|
8
|
-
const rowGap = gap;
|
|
9
|
-
const rowCount = Math.max(rows, 1);
|
|
10
|
-
const baseFontSize = fontSize ?? 14;
|
|
11
|
-
const marginBlock = (height ? height : Math.round(baseFontSize * (lineHeight ?? 1.6))) - baseFontSize;
|
|
12
|
-
const widthList = Array.isArray(width) ? width : null;
|
|
13
|
-
const getRowWidth = (index) => {
|
|
14
|
-
if (widthList) return widthList[index] ?? widthList.at(-1) ?? "100%";
|
|
15
|
-
if (width !== void 0) return width;
|
|
16
|
-
if (index === rowCount - 1) return "66%";
|
|
17
|
-
return "100%";
|
|
18
|
-
};
|
|
19
|
-
const containerStyle = {
|
|
20
|
-
gap: rowGap,
|
|
21
|
-
...style
|
|
22
|
-
};
|
|
23
|
-
return /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
24
|
-
className,
|
|
25
|
-
gap: gap || marginBlock,
|
|
26
|
-
style: containerStyle,
|
|
27
|
-
width: "100%",
|
|
28
|
-
...rest,
|
|
29
|
-
children: Array.from({ length: rowCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
30
|
-
active,
|
|
31
|
-
height: baseFontSize,
|
|
32
|
-
width: getRowWidth(index)
|
|
33
|
-
}, index))
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
SkeletonParagraph.displayName = "SkeletonParagraph";
|
|
37
|
-
//#endregion
|
|
38
|
-
export { SkeletonParagraph as default };
|
|
39
|
-
|
|
40
|
-
//# sourceMappingURL=SkeletonParagraph.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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;AAErB,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,7 +0,0 @@
|
|
|
1
|
-
import { SkeletonTagsProps } from "./type.mjs";
|
|
2
|
-
import { FC } from "react";
|
|
3
|
-
//#region src/Skeleton/SkeletonTags.d.ts
|
|
4
|
-
declare const SkeletonTags: FC<SkeletonTagsProps>;
|
|
5
|
-
//#endregion
|
|
6
|
-
export { SkeletonTags as default };
|
|
7
|
-
//# sourceMappingURL=SkeletonTags.d.mts.map
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import FlexBasic_default from "../Flex/FlexBasic.mjs";
|
|
3
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { cssVar } from "antd-style";
|
|
6
|
-
//#region src/Skeleton/SkeletonTags.tsx
|
|
7
|
-
const DEFAULT_COUNT = 1;
|
|
8
|
-
const HEIGHT_MAP = {
|
|
9
|
-
large: 28,
|
|
10
|
-
middle: 22,
|
|
11
|
-
small: 20
|
|
12
|
-
};
|
|
13
|
-
const DEFAULT_WIDTH_MAP = {
|
|
14
|
-
large: 64,
|
|
15
|
-
middle: 48,
|
|
16
|
-
small: 36
|
|
17
|
-
};
|
|
18
|
-
const SkeletonTags = ({ active, className, count = DEFAULT_COUNT, gap, height, size = "middle", style, width, ...rest }) => {
|
|
19
|
-
const resolvedGap = gap !== void 0 ? `${gap}px` : cssVar.paddingXS;
|
|
20
|
-
const resolvedCount = Math.max(count, 1);
|
|
21
|
-
const resolvedHeight = height ?? HEIGHT_MAP[size];
|
|
22
|
-
const widthList = Array.isArray(width) ? width : null;
|
|
23
|
-
const defaultWidth = DEFAULT_WIDTH_MAP[size];
|
|
24
|
-
const RADIUS_MAP = {
|
|
25
|
-
large: cssVar.borderRadius,
|
|
26
|
-
middle: cssVar.borderRadiusSM,
|
|
27
|
-
small: cssVar.borderRadiusXS
|
|
28
|
-
};
|
|
29
|
-
const getWidth = (index) => {
|
|
30
|
-
if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;
|
|
31
|
-
if (width !== void 0) return width;
|
|
32
|
-
return defaultWidth;
|
|
33
|
-
};
|
|
34
|
-
return /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
35
|
-
horizontal: true,
|
|
36
|
-
className,
|
|
37
|
-
style: {
|
|
38
|
-
gap: resolvedGap,
|
|
39
|
-
...style
|
|
40
|
-
},
|
|
41
|
-
...rest,
|
|
42
|
-
children: Array.from({ length: resolvedCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
43
|
-
active,
|
|
44
|
-
height: resolvedHeight,
|
|
45
|
-
width: getWidth(index),
|
|
46
|
-
style: { borderRadius: RADIUS_MAP[size] }
|
|
47
|
-
}, index))
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
SkeletonTags.displayName = "SkeletonTags";
|
|
51
|
-
//#endregion
|
|
52
|
-
export { SkeletonTags as default };
|
|
53
|
-
|
|
54
|
-
//# sourceMappingURL=SkeletonTags.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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;AAEA,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,7 +0,0 @@
|
|
|
1
|
-
import { SkeletonTitleProps } from "./type.mjs";
|
|
2
|
-
import { FC } from "react";
|
|
3
|
-
//#region src/Skeleton/SkeletonTitle.d.ts
|
|
4
|
-
declare const SkeletonTitle: FC<SkeletonTitleProps>;
|
|
5
|
-
//#endregion
|
|
6
|
-
export { SkeletonTitle as default };
|
|
7
|
-
//# sourceMappingURL=SkeletonTitle.d.mts.map
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
import { cssVar } from "antd-style";
|
|
5
|
-
//#region src/Skeleton/SkeletonTitle.tsx
|
|
6
|
-
const SkeletonTitle = ({ active, fontSize, lineHeight, height, width = "60%", style, className, ...rest }) => {
|
|
7
|
-
const resolvedLineHeight = lineHeight ?? 1.6;
|
|
8
|
-
const baseFontSize = fontSize !== void 0 ? `${fontSize}px` : cssVar.fontSize;
|
|
9
|
-
const heightMultiplier = 1 + (resolvedLineHeight - 1) * .5;
|
|
10
|
-
const marginMultiplier = (resolvedLineHeight - 1) * .25;
|
|
11
|
-
return /* @__PURE__ */ jsx(SkeletonBlock, {
|
|
12
|
-
active,
|
|
13
|
-
className,
|
|
14
|
-
height: height ?? `round(calc(${baseFontSize} * ${heightMultiplier}), 1px)`,
|
|
15
|
-
width,
|
|
16
|
-
style: {
|
|
17
|
-
marginBlock: `round(calc(${baseFontSize} * ${marginMultiplier}), 1px)`,
|
|
18
|
-
...style
|
|
19
|
-
},
|
|
20
|
-
...rest
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
SkeletonTitle.displayName = "SkeletonTitle";
|
|
24
|
-
//#endregion
|
|
25
|
-
export { SkeletonTitle as default };
|
|
26
|
-
|
|
27
|
-
//# sourceMappingURL=SkeletonTitle.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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":";;;;;AAQA,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/Skeleton/index.d.mts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { SkeletonAvatarProps, SkeletonBlockProps, SkeletonButtonProps, SkeletonParagraphProps, SkeletonProps, SkeletonTagsProps, SkeletonTitleProps } from "./type.mjs";
|
|
2
|
-
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
3
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
4
|
-
import SkeletonButton from "./SkeletonButton.mjs";
|
|
5
|
-
import SkeletonParagraph from "./SkeletonParagraph.mjs";
|
|
6
|
-
import SkeletonTags from "./SkeletonTags.mjs";
|
|
7
|
-
import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
8
|
-
import { ReactNode } from "react";
|
|
9
|
-
//#region src/Skeleton/index.d.ts
|
|
10
|
-
interface ISkeleton {
|
|
11
|
-
(props: SkeletonProps): ReactNode;
|
|
12
|
-
Avatar: typeof SkeletonAvatar;
|
|
13
|
-
Block: typeof SkeletonBlock;
|
|
14
|
-
Button: typeof SkeletonButton;
|
|
15
|
-
Paragraph: typeof SkeletonParagraph;
|
|
16
|
-
Tags: typeof SkeletonTags;
|
|
17
|
-
Title: typeof SkeletonTitle;
|
|
18
|
-
}
|
|
19
|
-
declare const Skeleton: ISkeleton;
|
|
20
|
-
//#endregion
|
|
21
|
-
export { SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, Skeleton as default };
|
|
22
|
-
//# sourceMappingURL=index.d.mts.map
|
package/es/Skeleton/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './index.d.mts';
|
package/es/Skeleton/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './index.mjs';
|
package/es/Skeleton/index.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import SkeletonBlock from "./SkeletonBlock.mjs";
|
|
2
|
-
import SkeletonAvatar from "./SkeletonAvatar.mjs";
|
|
3
|
-
import SkeletonParagraph from "./SkeletonParagraph.mjs";
|
|
4
|
-
import SkeletonTitle from "./SkeletonTitle.mjs";
|
|
5
|
-
import Skeleton$1 from "./Skeleton.mjs";
|
|
6
|
-
import SkeletonButton from "./SkeletonButton.mjs";
|
|
7
|
-
import SkeletonTags from "./SkeletonTags.mjs";
|
|
8
|
-
//#region src/Skeleton/index.ts
|
|
9
|
-
const Skeleton = Skeleton$1;
|
|
10
|
-
Skeleton.Block = SkeletonBlock;
|
|
11
|
-
Skeleton.Avatar = SkeletonAvatar;
|
|
12
|
-
Skeleton.Title = SkeletonTitle;
|
|
13
|
-
Skeleton.Paragraph = SkeletonParagraph;
|
|
14
|
-
Skeleton.Button = SkeletonButton;
|
|
15
|
-
Skeleton.Tags = SkeletonTags;
|
|
16
|
-
//#endregion
|
|
17
|
-
export { SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle, Skeleton as default };
|
|
18
|
-
|
|
19
|
-
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["SkeletonParent"],"sources":["../../src/Skeleton/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { SkeletonProps } from '@/Skeleton/type';\n\nimport SkeletonParent from './Skeleton';\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonBlock from './SkeletonBlock';\nimport SkeletonButton from './SkeletonButton';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTags from './SkeletonTags';\nimport SkeletonTitle from './SkeletonTitle';\n\ninterface ISkeleton {\n (props: SkeletonProps): ReactNode;\n Avatar: typeof SkeletonAvatar;\n Block: typeof SkeletonBlock;\n Button: typeof SkeletonButton;\n Paragraph: typeof SkeletonParagraph;\n Tags: typeof SkeletonTags;\n Title: typeof SkeletonTitle;\n}\n\nconst Skeleton = SkeletonParent as unknown as ISkeleton;\nSkeleton.Block = SkeletonBlock;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Title = SkeletonTitle;\nSkeleton.Paragraph = SkeletonParagraph;\nSkeleton.Button = SkeletonButton;\nSkeleton.Tags = SkeletonTags;\n\nexport default Skeleton;\n\nexport { default as SkeletonAvatar } from './SkeletonAvatar';\nexport { default as SkeletonBlock } from './SkeletonBlock';\nexport { default as SkeletonButton } from './SkeletonButton';\nexport { default as SkeletonParagraph } from './SkeletonParagraph';\nexport { default as SkeletonTags } from './SkeletonTags';\nexport { default as SkeletonTitle } from './SkeletonTitle';\nexport type * from './type';\n"],"mappings":";;;;;;;;AAsBA,MAAM,WAAWA;AACjB,SAAS,QAAQ;AACjB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,YAAY;AACrB,SAAS,SAAS;AAClB,SAAS,OAAO"}
|