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

package/lib/components/Checkbox/style.css

@@ -1,95 +0,0 @@
-.xUi-checkbox-wrapper {
-    cursor: pointer;
-    font-size: var(--xui-font-size-md);
-    align-items: center;
-    display: inline-flex;
-    color: var(--xui-main-color);
-    margin: 16px 0;
-
-    &:has([tabindex="0"]:focus-visible) {
-        border-color: var(--xui-primary-color);
-    }
-}
-
-.xUi-checkbox {
-    width: 14px;
-    height: 14px;
-    position: relative;
-    border-radius: var(--xui-border-radius-sm);
-    transition: all 0.3s;
-    display: inline-block;
-    background-color: transparent;
-    border: 1px solid var(--xui-border-color);
-}
-
-.xUi-checkbox.xUi-checkbox-checked {
-    border-color: var(--xui-primary-color);
-    background-color: #f0f5ff;
-}
-
-.xUi-checkbox input {
-    inset: 0;
-    opacity: 0;
-    cursor: pointer;
-    position: absolute;
-}
-
-.xUi-checkbox-inner {
-    top: 50%;
-    left: 50%;
-    width: 10px;
-    height: 6px;
-    border-top: 0;
-    border-left: 0;
-    position: absolute;
-    border: 2px solid var(--xui-background-color);
-    transform: rotate(45deg) scale(0);
-    transition: transform 0.2s ease-in-out;
-}
-
-.xUi-checkbox-check {
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: relative;
-    transition: 0.1s ease;
-    border-color: var(--xui-primary-color);
-    background-color: var(--xui-primary-color);
-}
-
-.xUi-checkbox-check::after {
-    top: 1px;
-    left: 3px;
-    width: 5px;
-    height: 8px;
-    content: "";
-    position: absolute;
-    border: solid white;
-    transform: rotate(45deg);
-    border-width: 0 2px 2px 0;
-}
-
-.xUi-checkbox-disabled,
-.xUi-checkbox-disabled .xUi-checkbox-check {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background-color: var(--xui-color-disabled);
-    border-color: var(--xui-border-color) !important;
-}
-
-.xUi-checkbox-label {
-    margin-left: 8px;
-    user-select: none;
-    font-size: 14px;
-}
-
-.xUi-checkbox:hover:not(.disabled),
-.xUi-checkbox:focus:not(.disabled) {
-    border-color: var(--xui-primary-color);
-    cursor: pointer;
-}
-
-.xUi-checkbox.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}

package/lib/components/ConditionalWrapper/index.tsx

@@ -1,12 +0,0 @@
-import { FC, PropsWithChildren, ReactElement } from 'react';
-
-type Props = {
-  condition: boolean;
-  wrapper: (children: PropsWithChildren['children']) => ReactElement;
-} & PropsWithChildren;
-
-export const ConditionalWrapper: FC<Props> = ({
-  condition,
-  wrapper,
-  children
-}) => (condition ? wrapper(children) : children);

package/lib/components/DatePicker/DatePicker.tsx

@@ -1,526 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import { clsx } from '../../helpers';
-import { TDatePickerProps } from '../../types/datepicker';
-import { prefixClsDatePicker } from '../../utils';
-import { CalendarIcon, ClearIcon, ErrorIcon } from '../Icons/Icons';
-import { ConditionalWrapper } from '../ConditionalWrapper';
-import { createPortal } from 'react-dom';
-import { usePosition } from '../../hooks/usePosition';
-import './style.css';
-
-const INPUT_SIZE = 12;
-export const NUMBER_SIX = 6;
-export const MONTH_LENGTH = 11;
-export const NEXT_DAYS_COUNT_AS_CURRENT_MUNTH = 35;
-
-const monthNames = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec'
-];
-
-const DatePicker = ({
-  value,
-  onChange,
-  onCalendarChange,
-  disabled,
-  error,
-  placeholder = 'Select date',
-  prefixCls = prefixClsDatePicker,
-  noStyle,
-  feedbackIcons,
-  locale,
-  className = '',
-  placement = 'bottomLeft',
-  defaultValue,
-  size = 'large',
-  format = 'YYYY-MM-DD',
-  getPopupContainer,
-  showToday = true,
-  allowClear = false,
-  disabledDate,
-  suffixIcon,
-  picker = 'date',
-  prefix,
-  defaultOpen = false,
-  inputReadOnly = false,
-  bordered = true,
-  defaultPickerValue
-}: TDatePickerProps) => {
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const initialDate = value || defaultValue;
-  const initialPickerDate = defaultPickerValue || initialDate;
-
-  const popupRef = useRef<HTMLDivElement>(null);
-  const popuptriggerRef = useRef<HTMLElement | null>(null);
-
-  const DateNow = new Date();
-
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
-    initialDate
-  );
-
-  const [selectedDatePlaceholder, setSelectedDatePlaceholder] = useState<
-    string | undefined
-  >(initialDate ? formatDate(initialDate, format as string) : undefined);
-
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const [currentYear, setCurrentYear] = useState(
-    initialPickerDate ? new Date(initialPickerDate).getFullYear() : DateNow.getFullYear()
-  );
-
-  const [currentMonth, setCurrentMonth] = useState(
-    initialPickerDate ? new Date(initialPickerDate).getMonth() : DateNow.getMonth()
-  );
-
-  const [viewMode, setViewMode] = useState<'day' | 'month' | 'year'>(
-    picker === 'month' ? 'month' : picker === 'year' ? 'year' : 'day'
-  );
-
-  const localeMonths =
-    locale?.shortMonths ||
-    Array.from({ length: 12 }, (_, i) =>
-      new Date(0, i).toLocaleString(locale?.locale || 'default', {
-        month: 'short'
-      })
-    );
-
-  const localeWeekdays = locale?.shortWeekDays || [
-    'Su',
-    'Mo',
-    'Tu',
-    'We',
-    'Th',
-    'Fr',
-    'Sa'
-  ];
-
-  const { dropdownPosition } = usePosition({
-    isOpen,
-    popupRef,
-    placement,
-    triggerRef,
-    getPopupContainer: getPopupContainer?.(triggerRef.current as HTMLElement)
-  })
-
-  useEffect(() => {
-    const _date = value || defaultValue;
-
-    setSelectedDate(_date);
-    setSelectedDatePlaceholder(_date ? formatDate(_date, format as string) : undefined);
-  }, [value])
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popupRef.current &&
-        !popupRef.current.contains(event.target as Node) &&
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    const controller = new AbortController();
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside, {
-        signal: controller.signal
-      });
-    }
-
-    return () => {
-      controller.abort();
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (getPopupContainer && triggerRef.current) {
-      popuptriggerRef.current = getPopupContainer(triggerRef.current);
-    }
-  }, [getPopupContainer]);
-
-  const daysInMonth = (year: number, month: number) =>
-    new Date(year, month + 1, 0).getDate();
-
-  const firstDayOfMonth = (year: number, month: number) =>
-    new Date(year, month, 1).getDay();
-
-  function formatDate(date: Date, format?: string | ((d: Date) => string)): string {
-    if (typeof format === 'function') {
-      return format(date);
-    }
-
-    if (typeof format === 'string') {
-      date = new Date(date);
-
-      return format
-        .replace(/YYYY/, date.getFullYear().toString())
-        .replace(/MMM/, monthNames[date.getMonth()])
-        .replace(/MM/, (date.getMonth() + 1).toString().padStart(2, '0'))
-        .replace(/DD/, date.getDate().toString().padStart(2, '0'));
-    }
-
-    return `${date.getFullYear()}-${(date.getMonth() + 1)
-      .toString()
-      .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
-  }
-
-
-  const handleSelect = (day: number, month: number, year: number) => {
-    if (disabled) {
-      return;
-    }
-
-    const date = new Date(year, month, day);
-
-    if (disabledDate?.(date, { from: undefined, to: undefined })) {
-      return;
-    }
-
-    setCurrentMonth(month);
-    setCurrentYear(year);
-    setSelectedDate(date);
-
-    const formatted = formatDate(date, format as string);
-    setSelectedDatePlaceholder(formatted);
-    onChange?.(date.toUTCString(), formatted);
-    onCalendarChange?.(date.toUTCString(), formatted, { range: undefined });
-    setIsOpen(false);
-  };
-
-  const clearSelection = () => {
-    setSelectedDate(undefined);
-    setSelectedDatePlaceholder(undefined);
-    onChange?.(null, '');
-  };
-
-  const isMonthDisabled = (month: number) => {
-    const date = new Date(currentYear, month + 1, 1);
-
-    return disabledDate?.(date, { from: undefined, to: undefined });
-  };
-
-  const isYearDisabled = (year: number) => {
-    const date = new Date(year + 1, currentMonth, 1);
-
-    return disabledDate?.(date, { from: undefined, to: undefined });
-  };
-
-  const prevMonth = currentMonth === 0 ? MONTH_LENGTH : currentMonth - 1;
-  const nextMonth = currentMonth === MONTH_LENGTH ? 0 : currentMonth + 1;
-  const prevMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;
-  const nextMonthYear =
-    currentMonth === MONTH_LENGTH ? currentYear + 1 : currentYear;
-
-  const totalDays = daysInMonth(currentYear, currentMonth);
-  const firstDay = firstDayOfMonth(currentYear, currentMonth);
-  const prevMonthDays = daysInMonth(prevMonthYear, prevMonth);
-  const nextDaysCount =
-    NEXT_DAYS_COUNT_AS_CURRENT_MUNTH - (firstDay + totalDays);
-
-  const days = [
-    ...Array.from({ length: firstDay }, (_, i) => ({
-      day: prevMonthDays - firstDay + i + 1,
-      current: false,
-      month: prevMonth,
-      year: prevMonthYear
-    })),
-    ...Array.from({ length: totalDays }, (_, i) => ({
-      day: i + 1,
-      current: true,
-      month: currentMonth,
-      year: currentYear
-    })),
-    ...Array.from({ length: nextDaysCount }, (_, i) => ({
-      day: i + 1,
-      current: false,
-      month: nextMonth,
-      year: nextMonthYear
-    }))
-  ];
-
-  return (
-    <div
-
-      className={clsx([
-        `${prefixCls}-container`,
-        {
-          noStyle,
-          [`${prefixCls}-${size}`]: size
-        }
-      ])}
-    >
-      <div className={`${prefixCls}-input-wrapper`} ref={triggerRef}>
-        <button
-          type="button"
-          className={clsx([
-            `${prefixCls}-input ${className}`,
-            {
-              noBordered: !bordered,
-              [`${prefixCls}-error`]: error,
-              [`${prefixCls}-${size}`]: size,
-              [`${prefixCls}-disabled`]: disabled
-            }
-          ])}
-          disabled={disabled}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIsOpen(!isOpen)
-          }}
-        >
-          {prefix || null}
-          <input
-            key={selectedDate?.toString()}
-            size={INPUT_SIZE}
-            disabled={disabled}
-            readOnly={inputReadOnly}
-            className={`${prefixCls}-selected-date globalEllipsis`}
-            placeholder={placeholder}
-            style={{ opacity: isOpen ? '0.6' : 1 }}
-            defaultValue={selectedDatePlaceholder}
-          />
-          <span className={`${prefixCls}-icon`}>
-            {allowClear && selectedDate ? (
-              <span className={`${prefixCls}-clear`} onClick={clearSelection}>
-                {typeof allowClear === 'object' && allowClear.clearIcon ? (
-                  allowClear.clearIcon
-                ) : (
-                  <ClearIcon />
-                )}
-              </span>
-            ) : (
-              suffixIcon || <CalendarIcon />
-            )}
-            {error && feedbackIcons ? <ErrorIcon /> : null}
-          </span>
-        </button>
-      </div>
-
-      {isOpen && (
-        <ConditionalWrapper
-          condition={getPopupContainer !== undefined}
-          wrapper={(element) => getPopupContainer ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement)) : <>{element}</>}>
-          <div
-            ref={popupRef}
-            className={`${prefixCls}-dropdown-wrapper`}
-            style={dropdownPosition}
-          >
-            <div className={`${prefixCls}-dropdown`}>
-              <div className={`${prefixCls}-header`}>
-                <div className={`${prefixCls}-nav-buttons`}>
-                  <button onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    setCurrentYear((y: number) => y - 1)
-                  }}>
-                    &laquo;
-                  </button>
-                  <button
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-
-                      setCurrentMonth((m: number) =>
-                        m === 0
-                          ? (setCurrentYear((y: number) => y - 1), MONTH_LENGTH)
-                          : m - 1
-                      )
-                    }}
-                  >
-                    &lsaquo;
-                  </button>
-                </div>
-                <div className={`${prefixCls}-dropdown-selects`}>
-                  <button
-                    type="button"
-                    className={`${prefixCls}-select`}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-
-                      setViewMode('year')
-                    }}
-                  >
-                    {currentYear}
-                  </button>
-                  <button
-                    type="button"
-                    className={`${prefixCls}-select`}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-
-                      setViewMode('month')
-                    }}
-                  >
-                    {localeMonths[currentMonth]}
-                  </button>
-                </div>
-                <div className={`${prefixCls}-nav-buttons`}>
-                  <button
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-
-                      setCurrentMonth((m: number) =>
-                        m === MONTH_LENGTH
-                          ? (setCurrentYear((y: number) => y + 1), 0)
-                          : m + 1
-                      )
-                    }}
-                  >
-                    &rsaquo;
-                  </button>
-                  <button onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    setCurrentYear((y: number) => y + 1)
-                  }}>
-                    &raquo;
-                  </button>
-                </div>
-              </div>
-
-              {viewMode === 'day' && (
-                <div className={`${prefixCls}-grid day`}>
-                  {localeWeekdays.map(day => (
-                    <div key={day} className={`${prefixCls}-day-header`}>
-                      {day}
-                    </div>
-                  ))}
-                  {days.map(({ day, current, month, year }, idx) => {
-                    const isSelected =
-                      selectedDate &&
-                      selectedDate.getDate() === day &&
-                      selectedDate.getMonth() === month &&
-                      selectedDate.getFullYear() === year;
-
-                    return (
-                      <button
-                        key={`${year}-${month}-${day}-${idx}`}
-                        className={clsx([
-                          `${prefixCls}-day`,
-                          {
-                            [`${prefixCls}-selected`]: isSelected,
-                            [`${prefixCls}-other-month`]: !current
-                          }
-                        ])}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-
-                          handleSelect(day, month, year)
-                        }}
-                        disabled={disabledDate?.(new Date(year, month, day), {
-                          from: undefined,
-                          to: undefined
-                        })}
-                      >
-                        {day}
-                      </button>
-                    );
-                  })}
-                </div>
-              )}
-
-              {viewMode === 'month' && (
-                <div className={`${prefixCls}-grid`}>
-                  {localeMonths.map((m, i) => (
-                    <button
-                      key={i}
-                      className={`${prefixCls}-month`}
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-
-                        setCurrentMonth(i);
-                        setViewMode('day');
-                      }}
-                      disabled={isMonthDisabled(i)}
-                    >
-                      {m}
-                    </button>
-                  ))}
-                </div>
-              )}
-
-              {viewMode === 'year' && (
-                <div className={`${prefixCls}-grid`}>
-                  {Array.from({ length: 12 }, (_, i) => {
-                    const year = currentYear - NUMBER_SIX + i;
-
-                    return (
-                      <button
-                        key={year}
-                        className={`${prefixCls}-year`}
-                        disabled={isYearDisabled(year)}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-
-                          setCurrentYear(year);
-                          setViewMode('month');
-                        }}
-                      >
-                        {year}
-                      </button>
-                    );
-                  })}
-                </div>
-              )}
-
-              {showToday && (
-                <div
-                  className={`${prefixCls}-day-footer`}
-                  style={{ gridColumn: 'span 7' }}
-                >
-                  <button
-                    className={`${prefixCls}-select`}
-                    disabled={disabledDate?.(
-                      new Date(
-                        DateNow.getDate(),
-                        DateNow.getMonth(),
-                        DateNow.getFullYear()
-                      ),
-                      { from: undefined, to: undefined }
-                    )}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-
-                      handleSelect(
-                        DateNow.getDate(),
-                        DateNow.getMonth(),
-                        DateNow.getFullYear()
-                      );
-                    }}
-                  >
-                    {locale?.today || 'Today'}
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </ConditionalWrapper>
-      )}
-    </div>
-  );
-};
-
-export default DatePicker;