x-ui-design 1.0.30 → 1.0.31-gamma.1

package/lib/components/DatePicker/style.css

@@ -1,318 +0,0 @@
-.xUi-datepicker-container {
-    position: relative;
-    font-family: Arial, sans-serif;
-    height: max-content;
-}
-
-.xUi-datepicker-input {
-    gap: 8px;
-    padding: 3px 7px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid var(--xui-border-color);
-    border-radius: 6px;
-    background-color: transparent;
-    color: var(--xui-text-color);
-    cursor: pointer;
-    transition: all 0.3s;
-}
-
-.xUi-datepicker-input.noBordered {
-    border: none !important;
-}
-
-.xUi-datepicker-input input {
-    font-size: var(--xui-font-size-sm);
-    border: none;
-    outline: none;
-    padding: 0;
-    color: var(--xui-text-color);
-}
-
-.xUi-datepicker-input:placeholder-shown {
-    text-overflow: ellipsis;
-}
-
-.xUi-datepicker-input:hover {
-    border-color: var(--xui-primary-color);
-}
-
-.xUi-datepicker-icon {
-    cursor: pointer;
-    opacity: 0.6;
-    width: 16px;
-    height: 16px;
-    transition: .3s ease;
-    color: var(--xui-text-color);
-}
-
-.xUi-datepicker-icon:hover {
-    opacity: 1;
-    color: var(--xui-primary-color);
-}
-
-.xUi-datepicker-selected-date {
-    border: none;
-    outline: none;
-    letter-spacing: 0.8px;
-    font-size: var(--xui-font-size-md);
-    color: var(--xui-text-color);
-}
-
-.xUi-datepicker-disabled {
-    background-color: var(--xui-color-disabled);
-    cursor: not-allowed;
-    opacity: 0.5;
-    border-color: var(--xui-border-color) !important;
-}
-
-.xUi-datepicker-disabled .xUi-datepicker-selected-date {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.xUi-datepicker-disabled .xUi-datepicker-icon {
-    cursor: not-allowed;
-}
-
-.xUi-datepicker-icon {
-    font-size: 16px;
-    color: #8c8c8c;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.xUi-datepicker-error {
-    border-color: var(--xui-error-color);
-}
-
-.xUi-datepicker-error .xUi-datepicker-icon,
-.xUi-datepicker-icon .error-svg-icon,
-.xUi-datepicker-error .error-svg-icon {
-    color: var(--xui-error-color);
-}
-
-.xUi-datepicker-input.sm {
-    padding: 4px 8px;
-    font-size: var(--xui-font-size-sm);
-}
-
-.xUi-datepicker-input.md {
-    padding: 8px 12px;
-    font-size: var(--xui-font-size-md);
-}
-
-.xUi-datepicker-input.lg {
-    padding: 10px 16px;
-    font-size: var(--xui-font-size-lg);
-}
-
-.xUi-datepicker-dropdown-wrapper {
-    transition:
-        opacity 0.3s ease,
-        transform 0.01s ease;
-    position: absolute;
-    z-index: 1000;
-}
-
-.xUi-datepicker-dropdown-wrapper.bottomLeft {
-    top: 100%;
-    left: 0;
-    margin-top: 4px;
-}
-.xUi-datepicker-dropdown-wrapper.bottomRight {
-    top: 100%;
-    right: 0;
-    margin-top: 4px;
-}
-
-.xUi-datepicker-dropdown-wrapper.topLeft {
-    bottom: 100%;
-    left: 0;
-    margin-bottom: 4px;
-}
-
-.xUi-datepicker-dropdown-wrapper.topRight {
-    bottom: 100%;
-    right: 0;
-    margin-bottom: 4px;
-}
-
-.xUi-datepicker-dropdown {
-    min-width: 250px;
-    padding: 12px;
-    background: var(--xui-background-color);
-    border: 1px solid var(--xui-border-color);
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.xUi-datepicker-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--xui-border-color);
-}
-
-.xUi-datepicker-day-footer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 8px;
-    padding-top: 12px;
-    border-top: 1px solid var(--xui-border-color);
-}
-
-.xUi-datepicker-nav-buttons {
-    display: flex;
-    gap: 4px;
-}
-
-.xUi-datepicker-nav-buttons button {
-    padding: 2px 6px;
-    border: none;
-    background: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.3s;
-    font-size: 20px;
-    opacity: 0.7;
-    color: var(--xui-text-color);
-}
-
-.xUi-datepicker-nav-buttons button:not(:disabled):hover {
-    color: var(--xui-primary-color);
-}
-
-.xUi-datepicker-dropdown-selects {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-}
-
-.xUi-datepicker-select,
-.xUi-datepicker-dropdown-selects button {
-    padding: 4px 8px;
-    border-radius: 4px;
-    background: var(--xui-background-color);
-    color: var(--xui-text-color);
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s;
-    border: none;
-}
-
-.xUi-datepicker-select:not(:disabled):hover,
-.xUi-datepicker-dropdown-selects button:hover {
-    color: var(--xui-primary-color);
-}
-
-.xUi-datepicker-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 2px;
-    text-align: center;
-}
-
-.xUi-datepicker-grid.day {
-    grid-template-columns: repeat(7, 1fr);
-}
-
-.xUi-datepicker-day-header {
-    font-size: 14px;
-    user-select: none;
-    margin: 4px 0;
-    color: var(--xui-text-color);
-}
-
-.xUi-datepicker-day,
-.xUi-datepicker-month,
-.xUi-datepicker-year {
-    height: 30px;
-    min-width: 30px;
-    line-height: 30px;
-    border-radius: 4px;
-    background: none;
-    border: none;
-    color: var(--xui-text-color);
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.xUi-datepicker-month,
-.xUi-datepicker-year {
-    margin: 7px;
-}
-
-.xUi-datepicker-select:disabled,
-.xUi-datepicker-day:disabled,
-.xUi-datepicker-month:disabled,
-.xUi-datepicker-year:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    background-color: var(--xui-color-disabled);
-}
-
-.xUi-datepicker-day:not(:disabled):hover,
-.xUi-datepicker-month:not(:disabled):hover,
-.xUi-datepicker-year:not(:disabled):hover {
-    background: var(--xui-primary-color-light);
-    color: #fff;
-}
-
-.xUi-datepicker-selected {
-    background: var(--xui-primary-color) !important;
-    color: #fff !important;
-    font-weight: bold;
-}
-
-.xUi-datepicker-other-month {
-    opacity: 0.4;
-    color: var(--xui-text-color);
-}
-
-.xUi-datepicker-other-month:not(:disabled):hover {
-    color: var(--xui-text-color);
-    user-select: none;
-    background-color: var(--xui-color-hover);
-}
-
-.xUi-datepicker-footer {
-    margin-top: 12px;
-    text-align: right;
-}
-
-.xUi-datepicker-footer-today-btn {
-    padding: 4px 8px;
-    font-size: 13px;
-    background: none;
-    border-radius: 4px;
-    border: 1px solid var(--xui-border-color);
-    color: var(--xui-primary-color);
-    cursor: pointer;
-    transition: all 0.3s;
-}
-
-.xUi-datepicker-footer-today-btn:not(:disabled):hover {
-    background-color: var(--xui-primary-color-light);
-    color: white;
-}
-
-.xUi-datepicker-large .xUi-datepicker-selected-date {
-    font-size: 16px;
-}
-
-.xUi-datepicker-large .xUi-datepicker-input {
-    padding: 11px;
-}
-
-.xUi-datepicker-middle .xUi-datepicker-input {
-    padding: 6px 11px;
-}

package/lib/components/Dropdown/Dropdown.tsx

@@ -1,234 +0,0 @@
-import React, {
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-import {
-    DropdownProps,
-    DropdownMenuInnerProps
-} from '../../types/dropdown';
-import { prefixClsDropdown } from '../../utils';
-import { clsx } from '../../helpers';
-import { usePosition } from '../../hooks/usePosition';
-import { ConditionalWrapper } from '../ConditionalWrapper';
-import { createPortal } from 'react-dom';
-import './style.css';
-
-const Dropdown = ({
-    children,
-    menu,
-    open: controlledOpen,
-    defaultOpen = false,
-    onVisibleChange,
-    trigger = 'hover',
-    placement = 'bottomLeft',
-    overlayClassName = '',
-    overlayStyle,
-    getPopupContainer,
-    destroyOnHidden = false,
-    disabled = false,
-    arrow = false,
-    autoFocus = false,
-    popupRender,
-    className = '',
-    overlay,
-    prefixCls = prefixClsDropdown,
-}: DropdownProps) => {
-    const [open, setOpen] = useState<boolean>(controlledOpen ?? defaultOpen);
-    const [_hover, setHover] = useState<boolean>(controlledOpen ?? defaultOpen);
-    const isControlled = controlledOpen !== undefined;
-
-    const triggerRef = useRef<HTMLDivElement | null>(null);
-    const popupRef = useRef<HTMLDivElement | null>(null);
-    const menuRef = useRef<HTMLUListElement | null>(null);
-
-    const { showPlacement, dropdownPosition } = usePosition({
-        popupRef,
-        placement,
-        offset: 8,
-        isOpen: open,
-        triggerRef,
-        getPopupContainer: getPopupContainer?.(triggerRef.current as HTMLElement)
-    })
-
-    useEffect(() => {
-        if (isControlled) {
-            setOpen(Boolean(controlledOpen));
-            onVisibleChange?.(Boolean(controlledOpen))
-        }
-    }, [controlledOpen]);
-
-    useEffect(() => {
-        if (open && autoFocus) {
-            requestAnimationFrame(() => {
-                const first = menuRef.current?.querySelector(
-                    "[role='menuitem']:not([aria-disabled='true'])"
-                ) as HTMLElement | null;
-
-                first?.focus();
-            });
-        }
-    }, [open]);
-
-    const setOpenInternal = (next: boolean) => {
-        if (disabled) {
-            return;
-        }
-
-        if (!isControlled) {
-            setOpen(next);
-        }
-
-        onVisibleChange?.(next);
-        onVisibleChange?.(next)
-    };
-
-    useEffect(() => {
-        const handleClick = (e: MouseEvent) => {
-            if (!open) {
-                return;
-            }
-
-            const target = e.target as Node;
-
-            if (
-                triggerRef.current &&
-                !triggerRef.current.contains(target) &&
-                !popupRef.current?.contains(target)
-            ) {
-                setOpenInternal(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClick);
-
-        return () => document.removeEventListener('mousedown', handleClick);
-    }, [open]);
-
-    const triggers = Array.isArray(trigger) ? trigger : [trigger];
-
-    const onTriggerClick = () => {
-        if (triggers.includes('click')) {
-            setOpenInternal(!open);
-        }
-    };
-
-    const onTriggerMouseEnter = () => {
-        setHover(true);
-
-        if (triggers.includes('hover')) {
-            setOpenInternal(true);
-        }
-    };
-
-    const onTriggerMouseLeave = () => {
-        setHover(false);
-
-        if (triggers.includes('hover')) {
-            setOpenInternal(false);
-        }
-    };
-
-    const popup = (
-        <ConditionalWrapper
-            condition={getPopupContainer !== undefined}
-            wrapper={(element) => getPopupContainer ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement)) : <>{element}</>}>
-            <div
-                ref={popupRef}
-                className={`${prefixCls}-overlay ${prefixCls}-${placement} ${overlayClassName}`}
-                style={{
-                    zIndex: _hover ? 1000 : 0,
-                    ...overlayStyle,
-                    ...dropdownPosition
-                }}
-            >
-                {arrow && <div className={`${prefixCls}-arrow ${showPlacement ? 'bottom' : ''}`} />}
-
-                {overlay ? typeof overlay === 'function' ? overlay() : overlay : popupRender ? (
-                    popupRender(
-                        menu ? (
-                            <MenuInner
-                                prefixCls={prefixCls}
-                                items={menu.items}
-                                menuRef={menuRef}
-                                onClose={() => setOpenInternal(false)}
-                            />
-                        ) : (
-                            <div style={{ padding: 8 }}>Empty menu</div>
-                        )
-                    )
-                ) : menu ? (
-                    <MenuInner
-                        prefixCls={prefixCls}
-                        items={menu.items}
-                        menuRef={menuRef}
-                        onClose={() => setOpenInternal(false)}
-                    />
-                ) : (
-                    <div style={{ padding: 8 }}>Empty menu</div>
-                )}
-            </div>
-        </ConditionalWrapper>
-    );
-
-    return (
-        <div
-            ref={triggerRef}
-            className={className}
-        >
-            <div
-                onClick={onTriggerClick}
-                onMouseEnter={onTriggerMouseEnter}
-                onMouseLeave={onTriggerMouseLeave}
-                tabIndex={disabled ? -1 : 0}
-                aria-haspopup='menu'
-                style={{ width: 'fit-content' }}
-                aria-expanded={open}
-            >
-                {children}
-
-                {open && popup}
-                {!open && !destroyOnHidden && null}
-            </div>
-        </div>
-    );
-};
-
-function MenuInner({
-    items,
-    menuRef,
-    onClose,
-    prefixCls,
-}: DropdownMenuInnerProps) {
-    return (
-        <ul className={`${prefixCls}-menu`} ref={menuRef} role='menu'>
-            {items.map((it) => (
-                <li
-                    key={it.key}
-                    role='menuitem'
-                    tabIndex={it.disabled ? -1 : 0}
-                    aria-disabled={it.disabled ?? false}
-                    onClick={(e) => {
-                        if (it.disabled) {
-                            return;
-                        }
-
-                        it.onClick?.(e as any);
-                        onClose();
-                    }}
-                    className={clsx([
-                        `${prefixCls}-item`,
-                        {
-                            'disabled': it.disabled,
-                            'danger': it.danger
-                        }
-                    ])}
-                >
-                    {it.label ?? it.key}
-                </li>
-            ))}
-        </ul>
-    );
-}
-
-export default Dropdown;

package/lib/components/Dropdown/index.ts

@@ -1 +0,0 @@
-export { default as Dropdown } from '../Dropdown/Dropdown'

package/lib/components/Dropdown/style.css

@@ -1,124 +0,0 @@
-.xUi-dropdown-overlay {
-    background: var(--xui-menu-inline-bg);
-    border-radius: 8px;
-    border: 1px solid var(--xui-border-color);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    padding: 4px 0;
-    min-width: 160px;
-    position: absolute;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: -15px;
-        width: 100%;
-        height: 10px;
-        z-index: 1;
-    }
-}
-
-.xUi-dropdown-overlay > ul,
-.xUi-dropdown-overlay > div,
-.xUi-dropdown-overlay > select {
-    box-shadow: unset;
-}
-
-.xUi-dropdown-overlay .xUi-dropdown-menu {
-    padding: 0 4px;
-    margin: 0;
-    position: relative;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: -15px;
-        width: 100%;
-        height: 10px;
-        z-index: 1;
-    }
-}
-
-.xUi-dropdown-overlay .xUi-dropdown-item {
-    padding: 8px 12px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    user-select: none;
-    list-style: none;
-    color: var(--xui-text-color);
-}
-
-.xUi-dropdown-overlay .xUi-dropdown-item:hover,
-.xUi-dropdown-overlay .xUi-dropdown-item:focus {
-    background: var(--xui-color-hover);
-    outline: none;
-}
-
-.xUi-dropdown-overlay .xUi-dropdown-item.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.xUi-dropdown-overlay .xUi-dropdown-item.danger {
-    color: var(--xui-error-color-light);
-
-    &:hover {
-        color: var(--xui-background-color);
-        background-color: var(--xui-error-color-light);
-    }
-}
-
-.xUi-dropdown-arrow {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    background: var(--xui-background-color);
-    border-left: 0.5px solid var(--xui-border-color);
-    border-top: 0.5px solid var(--xui-border-color);
-    transform: rotate(45deg);
-}
-
-.xUi-dropdown-arrow.bottom {
-    top: unset;
-    bottom: -6px;
-    border-left: unset;
-    border-top: unset;
-    border-right: 0.5px solid var(--xui-border-color);
-    border-bottom: 0.5px solid var(--xui-border-color);
-}
-
-.xUi-dropdown-arrow {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    background: var(--xui-background-color);
-    border-left: 0.5px solid var(--xui-border-color);
-    border-top: 0.5px solid var(--xui-border-color);
-    transform: rotate(45deg);
-}
-
-.xUi-dropdown-right .xUi-dropdown-arrow,
-.xUi-dropdown-topRight .xUi-dropdown-arrow,
-.xUi-dropdown-bottomRight .xUi-dropdown-arrow {
-    left: unset;
-    right: 12px;
-}
-
-.xUi-dropdown-arrow.bottom {
-    top: unset;
-    bottom: -6px;
-    border-left: unset;
-    border-top: unset;
-    border-right: 0.5px solid var(--xui-border-color);
-    border-bottom: 0.5px solid var(--xui-border-color);
-}
-
-.xUi-dropdown-arrow.center {
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-}

package/lib/components/Empty/Empty.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { EmptyContentProps } from '../../types/empty';
-import { prefixClsEmpty, prefixClsEmptyV3 } from '../../utils';
-import './style.css';
-
-const EmptyContent = ({
-  icon,
-  style = {},
-  className = '',
-  title = 'No Data',
-  description = 'No data',
-  prefixCls = prefixClsEmpty,
-  prefixClsV3 = prefixClsEmptyV3
-}: EmptyContentProps) => (
-  <div
-    style={style}
-    className={`${prefixCls} ${prefixClsV3} ${prefixCls}-normal ${prefixClsV3}--normal ${prefixCls}-small ${prefixClsV3}-small ${className}`}
-  >
-    <div className={`${prefixCls}-image`}>
-      {icon || (
-        <svg
-          width="64"
-          height="41"
-          viewBox="0 0 64 41"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>{title}</title>
-          <g transform="translate(0 1)" fill="none">
-            <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
-            <g stroke="#d9d9d9">
-              <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
-              <path
-                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                fill="#fafafa"
-              ></path>
-            </g>
-          </g>
-        </svg>
-      )}
-    </div>
-    <div className={`${prefixCls}-description`}>{description}</div>
-  </div>
-);
-
-export default EmptyContent;