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

package/lib/components/Radio/Button/Button.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import React from 'react';
-import { clsx } from '../../../helpers';
-import { RadioButtonProps } from '../../../types/radio';
-import { prefixClsRadio, prefixClsRadioV3 } from '../../../utils';
-import Radio from '../Radio';
-import './style.css';
-
-const RadioButton = ({
-  prefixCls = prefixClsRadio,
-  prefixClsV3 = prefixClsRadioV3,
-  className = '',
-  checked,
-  disabled,
-  children,
-  size = 'large',
-  ...props
-}: RadioButtonProps) => {
-  return (
-    <Radio
-      {...props}
-      checked={checked}
-      disabled={disabled}
-      className={clsx([
-        `${prefixCls}-button ${prefixClsV3}-button`,
-        {
-          disabled,
-          [className]: className,
-          [`${prefixCls}-button-${size} ${prefixClsV3}-button-${size}`]: size,
-          [`${prefixCls}-button-checked ${prefixClsV3}-button-checked`]: checked
-        }
-      ])}
-    >
-      <span className={`${prefixCls}-button-content ${prefixClsV3}-button-content`}>
-        {children ?? props.value}
-      </span>
-    </Radio>
-  );
-};
-
-export default RadioButton;

package/lib/components/Radio/Button/index.ts

@@ -1 +0,0 @@
-export { default as RadioButton } from '../../Radio/Button/Button'

package/lib/components/Radio/Button/style.css

@@ -1,43 +0,0 @@
-.xUi-radio-button {
-    margin: -1px;
-    cursor: pointer;
-    padding: 8px 16px;
-    align-items: center;
-    display: inline-flex;
-    transition: all 0.3s;
-    justify-content: center;
-    height: -webkit-fill-available;
-    background: var(--xui-background-color);
-    border: 1px solid var(--xui-border-color);
-    border-radius: var(--xui-border-radius-sm);
-}
-
-.xUi-radio-button .xUi-radio {
-    display: none
-}
-
-.xUi-radio-button.xUi-radio-button-middle {
-    border-radius: var(--xui-border-radius-md);
-}
-
-.xUi-radio-button.xUi-radio-button-large {
-    border-radius: var(--xui-border-radius-lg);
-}
-
-.xUi-radio-button-checked {
-    z-index: 1;
-    background: var(--xui-primary-color);
-    border-color: var(--xui-primary-color);
-    color: var(--xui-background-color);
-}
-
-.xUi-radio-button-content {
-    font-size: 14px;
-}
-
-.xUi-radio-button.disabled {
-    cursor: not-allowed;
-    color:  var(--xui-color-disabled);
-    background: var(--xui-color-disabled);
-    border-color: var(--xui-border-color);
-}

package/lib/components/Radio/Group/Group.tsx

@@ -1,105 +0,0 @@
-'use client';
-
-import React, {
-  Children,
-  isValidElement,
-  useMemo
-} from 'react';
-import { clsx } from '../../../helpers';
-import { RuleType } from '../../../types';
-import { RadioGroupProps } from '../../../types/radio';
-import { prefixClsRadio, prefixClsRadioV3 } from '../../../utils';
-import Radio from '../Radio';
-import RadioButton from '../Button/Button';
-import './style.css';
-
-const RadioGroup = ({
-  defaultValue,
-  value,
-  size = 'large',
-  disabled,
-  name,
-  id,
-  style = {},
-  buttonStyle = 'outline',
-  block,
-  prefixCls = prefixClsRadio,
-  prefixClsV3 = prefixClsRadioV3,
-  className = '',
-  options = [],
-  children,
-  ...props
-}: RadioGroupProps) => {
-  const selectedValue = useMemo(
-    () => (value !== undefined ? value : defaultValue),
-    [value, defaultValue]
-  );
-
-  const renderChildren = () => {
-    if (options.length > 0) {
-      return options.map((option, key) => {
-        const optionValue = typeof option === 'object' ? option.value : option;
-        const optionLabel = typeof option === 'object' ? option.label : option;
-
-        return (
-          <Radio
-            value={optionValue}
-            key={`${key}_${optionValue}`}
-            checked={selectedValue === optionValue}
-            disabled={
-              disabled || (typeof option === 'object' && option.disabled)
-            }
-            {...props}
-          >
-            {optionLabel}
-          </Radio>
-        );
-      });
-    }
-
-    return Children.map(children, child => {
-      if (
-        isValidElement(child) &&
-        (child.type === Radio || child.type === RadioButton)
-      ) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          const { ...childProps } = child.props;
-
-          return (
-            <child.type
-              {...props}
-              {...childProps}
-              {...(child.type === RadioButton ? { size, buttonStyle } : {})}
-              defaultValue={defaultValue}
-              disabled={disabled ?? (child.props as { disabled: boolean }).disabled}
-              checked={selectedValue === (child.props as { value: RuleType }).value}
-              name={name ?? prefixClsRadio}
-            />
-          );
-        }
-
-        return child;
-    });
-  };
-
-  return (
-    <div
-      id={id}
-      style={style}
-      className={clsx([
-        `${prefixCls}-group ${prefixClsV3}-group`,
-        {
-          block,
-          className,
-          [`${prefixCls}-group-${size} ${prefixClsV3}-group-${size}`]: size,
-          [`${prefixCls}-group-solid ${prefixClsV3}-group-solid`]: buttonStyle === 'solid'
-        }
-      ])}
-    >
-      {renderChildren()}
-    </div>
-  );
-};
-
-export default RadioGroup;

package/lib/components/Radio/Group/index.ts

@@ -1 +0,0 @@
-export { default as RadioGroup } from '../../Radio/Group/Group'

package/lib/components/Radio/Group/style.css

@@ -1,53 +0,0 @@
-.xUi-radio-group.xUi-radio-group-small {
-    height: 24px;
-}
-
-.xUi-radio-group.xUi-radio-group-small .xUi-radio-button:first-child {
-    border-radius: var(--xui-border-radius-sm) 0 0 var(--xui-border-radius-sm);
-}
-
-.xUi-radio-group.xUi-radio-group-small .xUi-radio-button:last-child {
-    border-radius: 0 var(--xui-border-radius-sm) var(--xui-border-radius-sm) 0;
-}
-
-.xUi-radio-group.xUi-radio-group-middle {
-    height: 32px;
-}
-
-.xUi-radio-group.xUi-radio-group-middle .xUi-radio-button:first-child {
-    border-radius: var(--xui-border-radius-md) 0 0 var(--xui-border-radius-md);
-}
-
-.xUi-radio-group.xUi-radio-group-middle .xUi-radio-button:last-child {
-    border-radius: 0 var(--xui-border-radius-md) var(--xui-border-radius-md) 0;
-}
-
-.xUi-radio-group.xUi-radio-group-large {
-    height: 44px;
-}
-
-.xUi-radio-group.xUi-radio-group-large .xUi-radio-button:first-child {
-    border-radius: var(--xui-border-radius-lg) 0 0 var(--xui-border-radius-lg);
-}
-
-.xUi-radio-group.xUi-radio-group-large .xUi-radio-button:last-child {
-    border-radius: 0 var(--xui-border-radius-lg) var(--xui-border-radius-lg) 0;
-}
-
-.xUi-radio-group .xUi-radio-button:not(:first-child) {
-    border-radius: 0px;
-}
-
-.xUi-radio-group.block {
-    display: inline-flex;
-    width: 100%;
-}
-
-.xUi-radio-group.block .xUi-radio-button {
-    width: 100%;
-}
-
-.xUi-radio-group:not(.xUi-radio-group-solid) .xUi-radio-button-checked {
-    background-color: var(--xui-background-color);
-    color: var(--xui-primary-color);
-}

package/lib/components/Radio/Radio.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import React, { useEffect } from 'react';
-import { clsx, parseValue } from '../../helpers';
-import { RadioProps } from '../../types/radio';
-import { prefixClsRadio } from '../../utils';
-import './style.css';
-
-const Radio = ({
-  prefixCls = prefixClsRadio,
-  className = '',
-  value,
-  onChange,
-  onClick,
-  disabled,
-  children,
-  name,
-  title,
-  defaultChecked,
-  checked,
-  onBlur,
-  onFocus,
-  onMouseEnter,
-  onMouseLeave,
-  noStyle,
-  ref
-}: RadioProps
-) => {
-  const handleChange = () => {
-    if (!disabled) {
-      onClick?.(parseValue(title ?? value));
-      onChange?.(parseValue(title ?? value));
-    }
-  };
-
-  useEffect(() => {
-    if (defaultChecked ?? checked) {
-      onChange?.(parseValue(value));
-    }
-  }, [defaultChecked, checked]);
-
-  return (
-    <label
-      ref={ref}
-      title={title}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      className={clsx([
-        `${prefixCls}-label`,
-        {
-          disabled,
-          noStyle: noStyle,
-          [className]: className
-        }
-      ])}
-    >
-      <input
-        name={name}
-        type="radio"
-        tabIndex={0}
-        role="button"
-        onClick={onClick}
-        disabled={disabled}
-        onChange={handleChange}
-        onBlur={e => onBlur?.(e)}
-        onFocus={e => onFocus?.(e)}
-        checked={checked ?? defaultChecked}
-      />
-      <span
-        className={clsx([
-          `${prefixCls} ${prefixCls}-${disabled ? 'disabled' : 'enabled'}`
-        ])}
-      />
-      <span className={`${prefixCls}-title`}>
-        {children ?? title ?? value}
-      </span>
-    </label>
-  );
-};
-
-Radio.displayName = 'Radio';
-
-export default Radio;

package/lib/components/Radio/index.ts

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

package/lib/components/Radio/style.css

@@ -1,73 +0,0 @@
-.xUi-radio-label {
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    font-size: var(--xui-font-size-md);
-    margin: 16px 0;
-}
-
-.xUi-radio-label input {
-    display: none;
-}
-
-.xUi-radio {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    position: relative;
-    transition: all 0.3s;
-    border: 1px solid var(--xui-border-color);
-
-    &:has([tabindex="0"]:focus-visible) {
-        border-color: var(--xui-primary-color);
-    }
-}
-
-.xUi-radio-error:not(.xUi-radio-disabled) {
-    border: 1px solid var(--xui-error-color);
-}
-
-.xUi-radio-label input:checked + .xUi-radio-error:not(.xUi-radio-disabled) {
-    background: var(--xui-error-color);
-}
-
-.xUi-radio-group {
-    display: flex;
-}
-
-.xUi-radio-label .xUi-radio-enabled:not(.xUi-radio-error):hover {
-    border: 1px solid var(--xui-primary-color-light) !important;
-}
-
-.xUi-radio-disabled {
-    background-color: var(--xui-color-disabled);
-}
-
-.xUi-radio-title {
-    padding-inline-start: 8px;
-    padding-inline-end: 8px;
-    color: var(--xui-text-color);
-}
-
-.xUi-radio-label input:checked + .xUi-radio {
-    background: var(--xui-primary-color);
-}
-
-.xUi-radio-label input:checked + .xUi-radio::after {
-    content: "";
-    width: 6px;
-    height: 6px;
-    background-color: white;
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.xUi-radio-label.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-}

package/lib/components/Result/Result.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { ResultProps } from "../../types/result";
-import { prefixClsResult } from "../../utils";
-import './style.css';
-import { renderDefaultIcon } from "../Icons/Icons";
-
-const Result = ({
-    icon,
-    status = "info",
-    title,
-    subTitle,
-    extra,
-    prefixCls = prefixClsResult,
-    className = "",
-    style,
-    children,
-}: ResultProps) => {
-    const renderIcon = () => {
-        if (icon) {
-            return <div className={`${prefixCls}-icon`}>{icon}</div>;
-        }
-
-        return <div className={`${prefixCls}-icon`}>{renderDefaultIcon(status)}</div>;
-    };
-
-    return (
-        <div className={`${prefixCls} ${prefixCls}-${status} ${className}`} style={style}>
-            {renderIcon()}
-
-            {title && <div className={`${prefixCls}-title`}>{title}</div>}
-            {subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
-            {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
-
-            {children && <div className={`${prefixCls}-content`}>{children}</div>}
-        </div>
-    );
-};
-
-export default Result;

package/lib/components/Result/index.ts

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

package/lib/components/Result/style.css

@@ -1,173 +0,0 @@
-.xUi-result {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    background: var(--xui-result-bg);
-    color: var(--xui-result-color);
-    padding: var(--xui-padding);
-    border-radius: var(--xui-border-radius-lg);
-    gap: var(--xui-gap);
-    max-width: var(--xui-max-width);
-    margin: 0 auto;
-}
-
-.xUi-result-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--xui-icon-size);
-    height: var(--xui-icon-size);
-    border-radius: 50%;
-    font-size: 32px;
-    line-height: 1;
-}
-
-.xUi-result-icon.xUi-result-icon-success {
-    background: #f6ffed;
-    color: #52c41a;
-    border: 1px solid #b7eb8f;
-}
-.xUi-result-icon.xUi-result-icon-error {
-    background: #fff2f0;
-    color: #ff4d4f;
-    border: 1px solid #ffccc7;
-}
-.xUi-result-icon.xUi-result-icon-info {
-    background: #e6f7ff;
-    color: #1890ff;
-    border: 1px solid #91d5ff;
-}
-.xUi-result-icon.xUi-result-icon-warning {
-    background: #fffbe6;
-    color: #faad14;
-    border: 1px solid #ffe58f;
-}
-
-.xUi-result
-    > .xUi-result-icon:not(.xUi-result-icon-success):not(.xUi-result-icon-error):not(.xUi-result-icon-info):not(
-        .xUi-result-icon-warning
-    ) {
-    width: auto;
-    height: auto;
-    border-radius: 0;
-    background: transparent;
-}
-
-.xUi-result-title {
-    font-family: var(--xui-font-family);
-    font-size: 24px;
-    font-weight: 600;
-    color: var(--xui-result-color);
-    margin-top: 4px;
-}
-
-.xUi-result-subtitle {
-    font-family: var(--xui-font-family);
-    font-size: 14px;
-    color: var(--xui-subtle-color);
-    margin-top: 6px;
-    max-width: 100%;
-}
-
-.xUi-result-extra {
-    margin-top: 12px;
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.xUi-result-content {
-    width: 100%;
-    margin-top: 12px;
-}
-
-.xUi-result-success {
-    --xui-accent: #52c41a;
-}
-.xUi-result-error {
-    --xui-accent: #ff4d4f;
-}
-.xUi-result-info {
-    --xui-accent: #1890ff;
-}
-.xUi-result-warning {
-    --xui-accent: #faad14;
-}
-
-.xUi-result-403 .xUi-result-icon,
-.xUi-result-404 .xUi-result-icon,
-.xUi-result-500 .xUi-result-icon {
-    width: 160px;
-    height: 110px;
-    border-radius: 8px;
-    background: none;
-    color: var(--xui-subtle-color);
-    font-size: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-@media (max-width: 480px) {
-    .xUi-result {
-        padding: 16px;
-        gap: 12px;
-    }
-    .xUi-result-title {
-        font-size: 18px;
-    }
-    .xUi-result-icon {
-        width: 56px;
-        height: 56px;
-        font-size: 24px;
-    }
-    .xUi-result-404 .xUi-result-icon,
-    .xUi-result-500 .xUi-result-icon,
-    .xUi-result-403 .xUi-result-icon {
-        width: 120px;
-        height: 84px;
-        font-size: 40px;
-    }
-}
-
-.xUi-result-extra :is(button, a) {
-    outline: none;
-    text-decoration: none;
-}
-.xUi-result-extra :is(button, a):focus {
-    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12);
-    border-radius: 6px;
-}
-
-.xUi-result-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.xUi-result-bordered {
-    border: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.xUi-result[data-bg] {
-    background: var(--xui-result-bg);
-}
-
-.xUi-result.full-width {
-    max-width: 100%;
-}
-
-.xUi-result-extra .xUi-btn {
-    padding: 6px 14px;
-    border-radius: 6px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    background: #fff;
-    cursor: pointer;
-}
-.xUi-result-extra .xUi-btn:hover {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-}

package/lib/components/Select/Option/Option.tsx

@@ -1,49 +0,0 @@
-import React, { FC, MouseEventHandler } from 'react';
-import { clsx } from '../../../helpers';
-import { OptionProps } from '../../../types/select';
-import { prefixClsSelect, prefixClsSelectV3 } from '../../../utils';
-import './style.css';
-
-const Option: FC<OptionProps> = ({
-  value,
-  children,
-  disabled,
-  className = '',
-  style,
-  onClick,
-  render,
-  prefixCls = prefixClsSelect,
-  prefixClsV3 = prefixClsSelectV3,
-  selected,
-  title
-}) => {
-  const handleClick: MouseEventHandler<HTMLDivElement> = e => {
-    if (disabled) {
-      return;
-    }
-
-    onClick?.(e);
-  };
-
-  return (
-    <div
-      tabIndex={0}
-      role="button"
-      className={clsx([
-        `${prefixCls}-option ${prefixClsV3}-option ${className} `,
-        {
-          selected: selected,
-          disabled: disabled
-        }
-      ])}
-      style={style}
-      onClick={handleClick}
-      data-testid={value || children}
-      {...(title ? { title } : {})}
-    >
-      {render ? render(value as string) : children || value}
-    </div>
-  );
-};
-
-export default Option;

package/lib/components/Select/Option/index.ts

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