@canlooks/can-ui 0.0.1

package/dist/cjs/components/dateTimePicker/dateTimePicker.style.d.ts

@@ -0,0 +1,20 @@
+export declare const classes: {
+    container: string;
+    input: string;
+    calendarHead: string;
+    calendarHeadSide: string;
+    calendarHeadControl: string;
+    calendarHeadCenter: string;
+    calendarHeadButton: string;
+    calendarBody: string;
+    dateItem: string;
+    calendar: string;
+    inputGroup: string;
+    inputUnit: string;
+    dateTimeIcon: string;
+    calendarDays: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const datePickerPopperStyle: () => import("@emotion/react").SerializedStyles[];

package/dist/cjs/components/dateTimePicker/dateTimePicker.style.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerPopperStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const input_style_1 = require("../input/input.style");
+const calendar_style_1 = require("./calendar.style");
+const timer_style_1 = require("./timer.style");
+const popper_style_1 = require("../popper/popper.style");
+exports.classes = (0, utils_1.defineClasses)('date-time-picker', [
+    'input',
+    'container',
+    'inputGroup',
+    'inputUnit',
+    'dateTimeIcon',
+    'calendar',
+    'calendarHead',
+    'calendarHeadSide',
+    'calendarHeadControl',
+    'calendarHeadCenter',
+    'calendarHeadButton',
+    'calendarBody',
+    'calendarDays',
+    'dateItem'
+]);
+exports.style = (0, utils_1.defineCss)(({ text }) => (0, react_1.css) `
+    .${exports.classes.container} {
+        display: flex;
+        align-items: center;
+
+        .${exports.classes.input} {
+            ${input_style_1.commonNativeInputStyle}
+        }
+    
+        .${exports.classes.dateTimeIcon} {
+            color: ${text.secondary};
+        }
+    }
+`);
+exports.datePickerPopperStyle = (0, utils_1.defineCss)(theme => [
+    (0, popper_style_1.popperStyleCallback)(theme),
+    (0, react_1.css) `
+        flex-direction: row;
+        padding: 0;
+        
+        .${calendar_style_1.classes.root} + .${timer_style_1.classes.root} {
+            border-left: 1px solid ${theme.divider};
+        }
+    `
+]);

package/dist/cjs/components/dateTimePicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './calendar';
+export * from './dateTimePicker';
+export * from './timer';

package/dist/cjs/components/dateTimePicker/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./calendar"), exports);
+tslib_1.__exportStar(require("./dateTimePicker"), exports);
+tslib_1.__exportStar(require("./timer"), exports);

package/dist/cjs/components/dateTimePicker/timer.d.ts

@@ -0,0 +1,8 @@
+import { Dayjs } from 'dayjs';
+export declare const Timer: import("react").MemoExoticComponent<({ showHours, showMinutes, showSeconds, value, onChange }: {
+    showHours: boolean;
+    showMinutes: boolean;
+    showSeconds: boolean;
+    value: Dayjs;
+    onChange(value: Dayjs): void;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/timer.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const timer_style_1 = require("./timer.style");
+const menuItem_1 = require("../menuItem");
+const dateTimePicker_1 = require("./dateTimePicker");
+const popper_1 = require("../popper");
+exports.Timer = (0, react_1.memo)(({ showHours, showMinutes, showSeconds, value, onChange }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: timer_style_1.style, className: timer_style_1.classes.root, children: [showHours && (0, jsx_runtime_1.jsx)(TimerItem, { type: "hour", value: value, onChange: onChange }), showMinutes && (0, jsx_runtime_1.jsx)(TimerItem, { type: "minute", value: value, onChange: onChange }), showSeconds && (0, jsx_runtime_1.jsx)(TimerItem, { type: "second", value: value, onChange: onChange })] }));
+});
+function TimerItem({ type, value, onChange }) {
+    const { min, max, disabledHours, disabledMinutes, disabledSeconds } = (0, dateTimePicker_1.useDateTimePickerContext)();
+    const currentNum = type === 'hour' ? value.hour()
+        : type === 'minute' ? value.minute()
+            : value.second();
+    const isDisabled = (num) => {
+        if (type === 'hour') {
+            if (disabledHours && !disabledHours(value, num)) {
+                return true;
+            }
+        }
+        else if (type === 'minute') {
+            if (disabledMinutes && !disabledMinutes(value, num)) {
+                return true;
+            }
+        }
+        else {
+            if (disabledSeconds && !disabledSeconds(value, num)) {
+                return true;
+            }
+        }
+        if (min && min.isSame(value, 'date') && min.get(type) > num) {
+            return true;
+        }
+        if (max && max.isSame(value, 'date') && max.get(type) < num) {
+            return true;
+        }
+        return false;
+    };
+    const selectedItemRef = (0, popper_1.useScrollToSelected)();
+    const renderItems = (count) => {
+        const ret = [];
+        for (let i = 0; i < count; i++) {
+            ret.push((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ref: i === currentNum ? selectedItemRef : void 0, className: timer_style_1.classes.timerItem, label: i.toString().padStart(2, '0'), selected: i === currentNum, onClick: () => i !== currentNum && onChange(value.set(type, i)), disabled: isDisabled(i) }, i));
+        }
+        return ret;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: timer_style_1.classes.selectItem, children: [(0, jsx_runtime_1.jsx)("div", { className: timer_style_1.classes.selectItemTitle, children: type === 'hour' ? '时'
+                    : type === 'minute' ? '分'
+                        : '秒' }), (0, jsx_runtime_1.jsx)("div", { className: timer_style_1.classes.selectItemBody, children: renderItems(type === 'hour' ? 24 : 60) })] }));
+}

package/dist/cjs/components/dateTimePicker/timer.style.d.ts

@@ -0,0 +1,9 @@
+export declare const classes: {
+    selectItem: string;
+    selectItemTitle: string;
+    selectItemBody: string;
+    timerItem: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dateTimePicker/timer.style.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const menuItem_style_1 = require("../menuItem/menuItem.style");
+exports.classes = (0, utils_1.defineClasses)('timer', [
+    'selectItem',
+    'selectItemTitle',
+    'selectItemBody',
+    'timerItem'
+]);
+exports.style = (0, utils_1.defineCss)(({ divider }) => (0, react_1.css) `
+    display: flex;
+    padding-left: ${menuItem_style_1.menuListPadding}px;
+    
+    .${exports.classes.selectItem} {
+        width: 56px;
+        height: 351px;
+        display: flex;
+        flex-direction: column;
+        margin-right: ${menuItem_style_1.menuListPadding}px;
+    
+        .${exports.classes.selectItemTitle} {
+            line-height: 40px;
+            padding-left: 12px;
+            border-bottom: 1px solid ${divider};
+        }
+    
+        .${exports.classes.selectItemBody} {
+            flex: 1;
+            overflow: hidden;
+            font-size: ${13 / 14}em;
+    
+            &:hover {
+                overflow-y: auto;
+            }
+    
+            .${exports.classes.timerItem} {
+                width: 56px;
+
+                &[data-disabled=true] {
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+`);

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker';
+import { Dayjs } from 'dayjs';
+type DateValueType = [Dayjs | null, Dayjs | null] | null;
+export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    startPickerProps?: DateTimePickerProps;
+    endPickerProps?: DateTimePickerProps;
+    format?: string;
+    defaultValue?: DateValueType;
+    value?: DateValueType;
+    onChange?(value: DateValueType): void;
+    defaultOpenPicker?: 'start' | 'end' | 'closed';
+    openPicker?: 'start' | 'end' | 'closed';
+    onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
+    autoClose?: boolean;
+    separator?: ReactNode;
+    variant?: 'outlined' | 'underlined' | 'plain';
+    size?: Size;
+    color?: ColorPropsValue;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+}
+export declare const DateTimeRangePicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DateTimeRangePickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimeRangePicker = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dateTimeRangePicker_style_1 = require("./dateTimeRangePicker.style");
+const utils_1 = require("../../utils");
+const dateTimePicker_1 = require("../dateTimePicker");
+exports.DateTimeRangePicker = (0, react_1.memo)((0, react_1.forwardRef)(({ startPickerProps, endPickerProps, format = 'YYYY-MM-DD', defaultValue, value, onChange, defaultOpenPicker = 'closed', openPicker, onOpenPickerChange, autoClose = !/[Hms]/.test(format), separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, 
+// 以下属性除autoFocus外，原样转发，autoFocus只对开始选择器生效
+variant, size, color, disabled, readOnly, autoFocus, ...props }, ref) => {
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpenPicker, openPicker, onOpenPickerChange);
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const endPickerInputRef = (0, react_1.useRef)(null);
+    const commonProps = {
+        format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
+        variant, size, color, disabled, readOnly
+    };
+    const showTimer = /[Hms]/.test(format);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.classnames)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
+                    startPickerProps?.onOpenChange?.(open);
+                    setInnerOpen(open ? 'start' : 'closed');
+                }, onChange: startValue => {
+                    startPickerProps?.onChange?.(startValue);
+                    setInnerValue(o => [startValue, o?.[1] || null]);
+                    if (startValue && !showTimer) {
+                        endPickerInputRef.current.focus();
+                        innerOpen.current === 'start' && setInnerOpen('end');
+                    }
+                } }), separator ?? (0, jsx_runtime_1.jsx)("span", { children: "-" }), (0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputRef: (0, utils_1.cloneRef)(endPickerInputRef, endPickerProps?.inputRef), onOpenChange: open => {
+                    startPickerProps?.onOpenChange?.(open);
+                    setInnerOpen(open ? 'end' : 'closed');
+                }, onChange: endValue => {
+                    endPickerProps?.onChange?.(endValue);
+                    setInnerValue(o => [o?.[0] || null, endValue]);
+                }, popperProps: {
+                    ...endPickerProps?.popperProps,
+                    placement: 'bottomRight'
+                } })] }));
+}));

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.style.d.ts

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.style.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const dateTimePicker_style_1 = require("../dateTimePicker/dateTimePicker.style");
+exports.classes = (0, utils_1.defineClasses)('date-time-rage-picker');
+exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    display: flex;
+    align-items: center;
+    gap: ${spacing[1]}px;
+
+    .${dateTimePicker_style_1.classes.root} {
+        flex: 1;
+    }
+`);

package/dist/cjs/components/dateTimeRangePicker/index.d.ts

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

package/dist/cjs/components/dateTimeRangePicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./dateTimeRangePicker"), exports);

package/dist/cjs/components/descriptions/descriptionItem.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { DescriptionsSharedProps } from './descriptions';
+import { GridItemProps } from '../grid';
+import { ResponsiveProp } from '../../../types';
+interface DescriptionItemBaseProps extends DescriptionsSharedProps {
+    label?: ReactNode;
+}
+interface DescriptionGridItemProps extends DescriptionItemBaseProps, GridItemProps {
+}
+interface DescriptionTableItemProps extends DescriptionItemBaseProps {
+    span?: ResponsiveProp;
+    className?: string;
+    children?: ReactNode;
+}
+export type DescriptionItemProps = DescriptionGridItemProps | DescriptionTableItemProps;
+export declare const DescriptionItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(DescriptionTableItemProps | Omit<DescriptionGridItemProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/cjs/components/descriptions/descriptionItem.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const descriptions_1 = require("./descriptions");
+const app_1 = require("../app");
+const grid_1 = require("../grid");
+const utils_1 = require("../../utils");
+const descriptions_style_1 = require("./descriptions.style");
+exports.DescriptionItem = (0, react_1.memo)((0, react_1.forwardRef)(({ label, 
+// 以下属性从DescriptionsSharedProps继承
+size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = { xs: 1 }, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    const { variant = 'grid', ...context } = (0, descriptions_1.useDescriptionsContext)();
+    size ??= context.size ?? theme.size;
+    labelWidth ??= context.labelWidth;
+    colon ??= context.colon ?? ':';
+    labelPlacement ??= context.labelPlacement ?? 'left';
+    disableMargin ??= context.disableMargin;
+    disablePadding ??= context.disablePadding;
+    const spanNum = (0, utils_1.useResponsiveValue)(span);
+    return variant === 'grid'
+        ? (0, jsx_runtime_1.jsxs)(grid_1.GridItem, { ...props, ref: ref, css: descriptions_style_1.gridItemStyle, className: (0, utils_1.classnames)(descriptions_style_1.classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.label, style: { width: labelWidth }, children: [label, !!colon && (labelPlacement === 'left' || labelPlacement === 'right') &&
+                                (0, jsx_runtime_1.jsx)("div", { className: descriptions_style_1.classes.colon, children: colon })] }), (0, jsx_runtime_1.jsx)("div", { className: descriptions_style_1.classes.content, children: props.children })] })
+        : labelPlacement === 'top'
+            ? (0, jsx_runtime_1.jsx)("td", { className: descriptions_style_1.classes.vertical, colSpan: spanNum, children: (0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.verticalColWrap, children: [(0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: props.children })] }) })
+            : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!label &&
+                        (0, jsx_runtime_1.jsx)("td", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("td", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, colSpan: spanNum * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: props.children })] });
+}));

package/dist/cjs/components/descriptions/descriptions.d.ts

@@ -0,0 +1,41 @@
+import { ReactElement, ReactNode } from 'react';
+import { Obj, ResponsiveProp, Size } from '../../../types';
+import { GridProps } from '../grid';
+import { DescriptionItem, DescriptionItemProps } from './descriptionItem';
+export type DescriptionsSharedProps = {
+    size?: Size;
+    /** 标签的宽度,grid模式有效 */
+    labelWidth?: string | number;
+    colon?: ReactNode;
+    /** 标签的位置，table模式下仅支持'left'与'top', @default 'left' */
+    labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    /** 是否禁用margin,{@link DescriptionsGridProps.variant}为grid有效  */
+    disableMargin?: boolean;
+    /** 是否禁用padding,{@link DescriptionsTableProps.variant}为table有效 */
+    disablePadding?: boolean;
+};
+export interface DescriptionsBaseProps extends DescriptionsSharedProps {
+    items?: (DescriptionItemProps & Obj)[];
+    /**
+     * @private 用于渲染item的组件，通常为内部使用
+     * @default DescriptionItem {@link DescriptionItem}
+     */
+    itemComponent?: any;
+}
+export interface DescriptionsGridProps extends DescriptionsBaseProps, GridProps {
+    variant?: 'grid';
+}
+export interface DescriptionsTableProps extends DescriptionsBaseProps, Partial<JSX.IntrinsicElements['table']> {
+    variant: 'table';
+    columnCount?: ResponsiveProp;
+}
+export type DescriptionsProps = DescriptionsGridProps | DescriptionsTableProps;
+interface DescriptionsContext extends DescriptionsSharedProps {
+    variant?: 'grid' | 'table';
+}
+export declare function useDescriptionsContext(): DescriptionsContext;
+export declare const Descriptions: {
+    (props: DescriptionsProps): ReactElement;
+    Item: typeof DescriptionItem;
+};
+export {};

package/dist/cjs/components/descriptions/descriptions.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Descriptions = void 0;
+exports.useDescriptionsContext = useDescriptionsContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const grid_1 = require("../grid");
+const descriptionItem_1 = require("./descriptionItem");
+const utils_1 = require("../../utils");
+const descriptions_style_1 = require("./descriptions.style");
+const app_1 = require("../app");
+function useDescriptionsContext() {
+    return (0, react_1.useContext)(descriptionsContext);
+}
+const descriptionsContext = (0, react_1.createContext)({});
+exports.Descriptions = (0, react_1.memo)((0, react_1.forwardRef)(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = descriptionItem_1.DescriptionItem, variant = 'grid', columnCount = 3, ...props }, ref) => {
+    const contextValue = (0, react_1.useMemo)(() => ({
+        size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
+    }), [
+        size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
+    ]);
+    const renderGridItems = () => {
+        return items?.map((itemProps, i) => (0, jsx_runtime_1.jsx)(ItemComponent, { 
+            // 最后一项沾满剩余行空间
+            flex: i === items.length - 1 ? 1 : void 0, ...itemProps }, i)) || props.children;
+    };
+    const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
+    const renderTableItems = () => {
+        const actualItems = items || react_1.Children.map(props.children, c => (0, react_1.isValidElement)(c) ? c.props : c);
+        if (actualItems?.length) {
+            const rows = [];
+            for (let i = 0, { length } = actualItems; i < length; i++) {
+                const cols = rows[Math.floor(i / columnCountNum)] ||= [];
+                const itemProps = actualItems[i];
+                cols.push((0, jsx_runtime_1.jsx)(ItemComponent, { ...itemProps, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.classnames)(descriptions_style_1.classes.col, itemProps) }, i));
+            }
+            return rows.map((r, i) => (0, jsx_runtime_1.jsx)("tr", { children: r }, i));
+        }
+        return null;
+    };
+    const { spacing } = (0, app_1.useTheme)();
+    const style = (0, descriptions_style_1.tableStyle)();
+    return variant === 'grid'
+        ? (0, jsx_runtime_1.jsx)(grid_1.Grid, { columnGap: spacing[6], ...props, ref: ref, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), columnCount: columnCount, "data-variant": variant, children: (0, jsx_runtime_1.jsx)(descriptionsContext.Provider, { value: contextValue, children: renderGridItems() }) })
+        : (0, jsx_runtime_1.jsx)("table", { ...props, ref: ref, css: style, className: (0, utils_1.classnames)(descriptions_style_1.classes.root, props.className), "data-size": size, "data-variant": variant, children: (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(descriptionsContext.Provider, { value: contextValue, children: renderTableItems() }) }) });
+}));
+exports.Descriptions.Item = descriptionItem_1.DescriptionItem;

package/dist/cjs/components/descriptions/descriptions.style.d.ts

@@ -0,0 +1,15 @@
+export declare const classes: {
+    vertical: string;
+    content: string;
+    col: string;
+    label: string;
+    item: string;
+    colon: string;
+    labelCol: string;
+    contentCol: string;
+    verticalColWrap: string;
+} & {
+    root: string;
+};
+export declare const tableStyle: () => import("@emotion/react").SerializedStyles;
+export declare const gridItemStyle: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/descriptions/descriptions.style.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridItemStyle = exports.tableStyle = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('descriptions', [
+    'item',
+    'label',
+    'colon',
+    'content',
+    'col',
+    'labelCol',
+    'contentCol',
+    'vertical',
+    'verticalColWrap'
+]);
+exports.tableStyle = (0, utils_1.defineCss)(({ divider, spacing, background }) => (0, react_1.css) `
+    width: 100%;
+    border-collapse: collapse;
+
+    td {
+        padding: 0;
+        border: 1px solid ${divider};
+    }
+
+    .${exports.classes.col} {
+        &:not([data-disable-padding=true]) {
+            padding: 12px ${spacing[5]}px;
+
+            &[data-size=small] {
+                padding: 7px ${spacing[4]}px;
+            }
+            
+            &[data-size=large] {
+                padding: 17px ${spacing[6]}px;
+            }
+        }
+    }
+
+    .${exports.classes.labelCol} {
+        background-color: ${background.fixed};
+    }
+
+    .${exports.classes.vertical} {
+        vertical-align: top;
+    }
+
+    .${exports.classes.verticalColWrap} {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .${exports.classes.labelCol} {
+            flex: 1;
+            border-bottom: 1px solid ${divider};
+        }
+    }
+`);
+exports.gridItemStyle = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
+    display: flex;
+    gap: 4px 0;
+
+    &[data-label-placement=top] {
+        flex-direction: column;
+    }
+
+    &[data-label-placement=bottom] {
+        flex-direction: column-reverse;
+    }
+
+    &[data-label-placement=right] {
+        flex-direction: row-reverse;
+    }
+
+    &:not([data-label-placement=top]):not([data-label-placement=bottom]) {
+        align-items: baseline;
+    }
+
+    &:not([data-disable-margin=true]) {
+        margin-bottom: ${spacing[4]}px;
+
+        &[data-size=small] {
+            margin-bottom: ${spacing[2]}px;
+        }
+
+        &[data-size=large] {
+            margin-bottom: ${spacing[6]}px;
+        }
+    }
+
+    .${exports.classes.label} {
+        display: flex;
+        color: ${text.secondary};
+
+        .${exports.classes.colon} {
+            margin-left: 1px;
+        }
+    }
+
+    .${exports.classes.content} {
+        flex: 1;
+    }
+
+    &[data-label-placement=left] {
+        .${exports.classes.label} {
+            justify-content: flex-end;
+        }
+
+        .${exports.classes.content} {
+            margin-left: ${spacing[2]}px;
+        }
+    }
+
+    &[data-label-placement=right] {
+        .${exports.classes.content} {
+            text-align: right;
+            margin-right: ${spacing[2]}px;
+            justify-content: flex-end;
+        }
+    }
+`);

package/dist/cjs/components/descriptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './descriptions';
+export * from './descriptionItem';

package/dist/cjs/components/descriptions/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./descriptions"), exports);
+tslib_1.__exportStar(require("./descriptionItem"), exports);

package/dist/cjs/components/dialog/dialog.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode, Ref } from 'react';
+import { ModalProps } from '../modal';
+import { ButtonProps } from '../button';
+import { DrawerCloseReason } from '../drawer';
+export type DialogCloseReason = DrawerCloseReason | 'canceled' | 'confirmed';
+export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    footer?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    showClose?: ReactNode;
+    closeProps?: ButtonProps;
+    showConfirm?: boolean;
+    confirmText?: ReactNode;
+    confirmProps?: ButtonProps;
+    confirmRef?: Ref<HTMLButtonElement>;
+    onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
+    confirmLoading?: boolean;
+    showCancel?: boolean;
+    cancelText?: ReactNode;
+    cancelProps?: ButtonProps;
+    cancelRef?: Ref<HTMLButtonElement>;
+    onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
+    draggable?: boolean;
+    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    maskClosable?: boolean;
+    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    escapeClosable?: boolean;
+    defaultOpen?: boolean;
+    onClose?(closeReason: DialogCloseReason): void;
+}
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;