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

package/package.json

@@ -1,47 +1,49 @@
 {
   "name": "x-ui-design",
-  "version": "1.0.29",
+  "version": "1.0.31-gamma.1",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
+    "dev": "vite",
+    "build": "vite build && npm run build:types",
     "build:types": "tsc --emitDeclarationOnly",
     "build:rollup": "rollup -c --bundleConfigAsCjs",
     "rollup": "npm run build:types && npm run build:rollup"
   },
-  "dependencies": {
-    "next": "15.2.0"
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@eslint/eslintrc": "^3",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^20",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^9",
-    "eslint-config-next": "15.2.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4",
+    "path": "^0.12.7",
     "postcss": "^8.5.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rollup": "^3.0.0",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^5.8.3"
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^5"
   },
-  "peerDependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+  "dependencies": {
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5"
   }
 }

package/.github/workflows/x-ui-design.yml

@@ -1,14 +0,0 @@
-name: xUIDesign
-
-on: push
-
-jobs:
-  super-lint:
-    name: X UI Design
-    runs-on: ubuntu-latest
-    steps:
-      - name: Run xUIDesign
-        uses: gabboyajyan/xUIDesign@master
-        env:
-          DEFAULT_BRANCH: master
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/compile.sh

@@ -1,15 +0,0 @@
-rm -rf .history
-rm -rf .rollup.cache
-rm -rf dist
-
-yarn rollup
-
-git add .
-git commit -m  "Push command from compile"
-
-npm version patch
-
-git push origin master
-git push spring-origin main
-
-npm publish

package/dist/esm/types/components/Icons/Icons.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ResultStatusType } from '../../types/result';
-declare const ClearIcon: () => React.JSX.Element;
-declare const ArrowIcon: ({ isOpen }: {
-    isOpen: boolean;
-}) => React.JSX.Element;
-declare const LoadingIcon: () => React.JSX.Element;
-declare const CheckIcon: () => React.JSX.Element;
-declare const SearchIcon: () => React.JSX.Element;
-declare const CalendarIcon: () => React.JSX.Element;
-declare const SuccessIcon: () => React.JSX.Element;
-declare const ErrorIcon: () => React.JSX.Element;
-declare const DateDistanceIcon: () => React.JSX.Element;
-declare const TimeIcon: () => React.JSX.Element;
-declare const StampleIcon: () => React.JSX.Element;
-declare const TrashIcon: () => React.JSX.Element;
-declare const SpinerIcon: () => React.JSX.Element;
-declare const renderDefaultIcon: (status: ResultStatusType) => React.JSX.Element | null;
-export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon, renderDefaultIcon };

package/eslint.config.mjs

@@ -1,16 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
-
-export default eslintConfig;

package/lib/components/Button/Button.tsx

@@ -1,136 +0,0 @@
-import React, { ReactElement, useEffect, useMemo, useState } from 'react';
-import { clsx } from '../../helpers';
-import { ButtonProps } from '../../types/button';
-import { prefixClsButton, prefixClsButtonV3 } from '../../utils';
-import './style.css';
-
-const ButtonComponent = ({
-  type = 'default',
-  variant = 'solid',
-  color = 'default',
-  shape = 'default',
-  size = 'middle',
-  htmlType = 'button',
-  className,
-  rootClassName,
-  classNames: customClassNames = {},
-  styles = {},
-  prefixCls = prefixClsButton,
-  prefixClsV3 = prefixClsButtonV3,
-  icon,
-  iconPosition = 'start',
-  loading = false,
-  disabled = false,
-  ghost = false,
-  danger = false,
-  block = false,
-  children,
-  href,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  __injected,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  child,
-  ...restProps
-}: ButtonProps): ReactElement => {
-  const [innerLoading, setInnerLoading] = useState(false);
-
-  useEffect(() => {
-    if (typeof loading === 'boolean') {
-      setInnerLoading(loading);
-    } else if (typeof loading === 'object' && loading.delay) {
-      const timeout = setTimeout(() => setInnerLoading(true), loading.delay);
-
-      return () => clearTimeout(timeout);
-    } else {
-      setInnerLoading(!!loading);
-    }
-  }, [loading]);
-
-  const classes = useMemo(() => {
-    return clsx([...new Set([
-      prefixCls,
-      prefixClsV3,
-      rootClassName,
-      `${prefixCls}-${type}`,
-      `${prefixCls}-variant-${variant}`,
-      `${prefixCls}-color-${color}`,
-      `${prefixCls}-shape-${shape}`,
-      `${prefixCls}-size-${size}`,
-      `${prefixClsV3}-${type}`,
-      `${prefixClsV3}-variant-${variant}`,
-      `${prefixClsV3}-color-${color}`,
-      `${prefixClsV3}-shape-${shape}`,
-      `${prefixClsV3}-size-${size}`,
-      {
-        [`${prefixCls}-block`]: block,
-        [`${prefixCls}-ghost`]: ghost,
-        [`${prefixCls}-danger`]: danger,
-        [`${prefixCls}-loading`]: innerLoading,
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixClsV3}-block`]: block,
-        [`${prefixClsV3}-ghost`]: ghost,
-        [`${prefixClsV3}-danger`]: danger,
-        [`${prefixClsV3}-loading`]: innerLoading,
-        [`${prefixClsV3}-disabled`]: disabled
-      },
-      className
-    ])])
-  }, [block, className, color, danger, disabled, ghost, innerLoading, prefixCls, prefixClsV3, rootClassName, shape, size, type, variant]);
-
-  const iconNode = innerLoading
-    ? (typeof loading === 'object' && loading.icon) || (
-      <span className={`${prefixCls}-spinner ${prefixClsV3}-spinner`} />
-    )
-    : icon;
-
-  const content = (
-    <>
-      {iconNode && iconPosition === 'start' && (
-        <span
-          className={clsx(`${prefixCls}-icon ${prefixClsV3}-icon`, customClassNames.icon)}
-          style={styles.icon}
-        >
-          {iconNode}
-        </span>
-      )}
-      <span className={`${prefixCls}-content ${prefixClsV3}-content`}>{children}</span>
-      {iconNode && iconPosition === 'end' && (
-        <span
-          className={clsx(`${prefixCls}-icon ${prefixClsV3}-icon`, customClassNames.icon)}
-          style={styles.icon}
-        >
-          {iconNode}
-        </span>
-      )}
-    </>
-  );
-
-  const mergedDisabled = disabled || innerLoading;
-
-  if (href) {
-    return (
-      <a
-        className={classes}
-        href={mergedDisabled ? undefined : href}
-        aria-disabled={mergedDisabled}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <button
-      type={htmlType}
-      className={classes}
-      disabled={mergedDisabled}
-      {...restProps}
-    >
-      {content}
-    </button>
-  );
-};
-
-export default ButtonComponent

package/lib/components/Button/index.ts

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

package/lib/components/Button/style.css

@@ -1,197 +0,0 @@
-html .xUi-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 400;
-    white-space: nowrap;
-    vertical-align: middle;
-    user-select: none;
-    border: 1px solid transparent;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    border-radius: 6px;
-    line-height: 1.5715;
-}
-
-html .xUi-button-content {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-html .xUi-button-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-    margin-right: 0.5em;
-}
-
-html .xUi-button-icon:last-child {
-    margin-right: 0;
-    margin-left: 0.5em;
-}
-
-html .xUi-button-spinner {
-    width: 1em;
-    height: 1em;
-    border: 1px solid transparent;
-    border-top-color: var(--xui-text-color);
-    border-radius: 50%;
-    animation: xUi-spin 1s linear infinite;
-}
-
-@keyframes xUi-spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-html .xUi-button-size-small {
-    padding: 4px 12px;
-    font-size: 12px;
-    height: 24px;
-}
-
-html .xUi-button-size-middle {
-    padding: 0 16px;
-    font-size: 14px;
-    height: 32px;
-}
-
-html .xUi-button-size-large {
-    padding: 8px 20px;
-    font-size: 16px;
-    height: 44px;
-}
-
-html .xUi-button-shape-circle {
-    padding: 0;
-    border-radius: 50%;
-    justify-content: center;
-}
-
-html .xUi-button-shape-circle .xUi-button-size-small {
-    width: 24px;
-    height: 24px;
-}
-
-html .xUi-button-shape-circle .xUi-button-size-large {
-    width: 44px;
-    height: 44px;
-}
-
-html .xUi-button-shape-round {
-    border-radius: 9999px;
-}
-
-html .xUi-button-default {
-    background-color: #fff;
-    border-color: var(--xui-border-color);
-    color: rgba(0, 0, 0, 0.85);
-}
-
-html .xUi-button-default:hover {
-    border-color: var(--xui-primary-color);
-    color: var(--xui-primary-color);
-}
-
-html .xUi-button-primary {
-    background-color: var(--xui-primary-color);
-    border-color: var(--xui-primary-color);
-    color: #fff;
-}
-
-html .xUi-button-primary:hover {
-    background-color: var(--xui-primary-color-hover);
-    border-color: var(--xui-primary-color-hover);
-    color: #fff;
-}
-
-html .xUi-button-variant-dashed {
-    border-style: dashed;
-    background-color: #fff;
-    color: rgba(0, 0, 0, 0.85);
-    border-color: var(--xui-border-color);
-}
-
-html .xUi-button-variant-dashed:hover {
-    border-color: var(--xui-primary-color);
-    color: var(--xui-primary-color);
-}
-
-html .xUi-button-variant-text {
-    background-color: transparent;
-    border-color: transparent !important;
-    color: rgba(0, 0, 0, 0.88);
-}
-
-html .xUi-button-variant-text:hover {
-    color: rgba(0, 0, 0, 0.88);
-    border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.04);
-}
-
-html .xUi-button-variant-link {
-    background-color: transparent;
-    border-color: transparent !important;
-    color: var(--xui-primary-color);
-}
-
-html .xUi-button-variant-link:hover {
-    border-color: transparent;
-    color: var(--xui-primary-color-light);
-}
-
-html .xUi-button-variant-outlined {
-    background-color: transparent;
-    border-color: var(--xui-border-color);
-    color: #fff;
-}
-
-html .xUi-button-variant-filled {
-    background-color: transparent;
-    color: var(--xui-text-color);
-    border-color: var(--xui-border-color);
-}
-
-html .xUi-button-danger {
-    background-color: transparent;
-    border-color: var(--xui-error-color);
-    color: var(--xui-error-color);
-}
-
-html .xUi-button-danger:hover {
-    color: var(--xui-error-color-light);
-    border-color: var(--xui-error-color-light);
-}
-
-html .xUi-button-ghost {
-    opacity: 0;
-}
-
-html .xUi-button-ghost:hover {
-    opacity: 1;
-}
-
-html .xUi-button-block {
-    display: flex;
-    width: 100%;
-}
-
-html .xUi-button-disabled,
-html .xUi-button-loading {
-    cursor: not-allowed;
-    opacity: 0.5;
-    color: var(--xui-text-color);
-    border-color: var(--xui-border-color);
-    background-color: var(--xui-color-disabled);
-    pointer-events: none;
-}
-
-html .xUi-button-loading {
-    background-color: transparent
-}

package/lib/components/Checkbox/Checkbox.tsx

@@ -1,131 +0,0 @@
-"use client"
-
-import React, {
-  MouseEvent,
-  ReactElement,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-import { clsx } from '../../../lib/helpers';
-import { SyntheticBaseEvent } from '../../types';
-import { CheckboxProps } from '../../types/checkbox';
-import { prefixClsCheckbox, prefixClsCheckboxV3 } from '../../../lib/utils';
-import './style.css';
-
-const Checkbox = ({
-  prefixCls = prefixClsCheckbox,
-  prefixClsV3 = prefixClsCheckboxV3,
-  className = '',
-  defaultChecked = false,
-  checked,
-  style,
-  disabled = false,
-  onChange,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  onKeyPress,
-  onKeyDown,
-  tabIndex,
-  name,
-  children,
-  id,
-  autoFocus,
-  type = 'checkbox',
-  value = false,
-  required = false,
-  noStyle,
-  titleClick,
-  ref,
-  controlled = false
-}: CheckboxProps,
-): ReactElement => {
-  const isChecked = checked !== undefined ? checked : defaultChecked || value;
-  const [internalChecked, setInternalChecked] = useState(isChecked);
-
-  const checkboxRef = useRef<HTMLInputElement | null>(null);
-
-  const handleClick = (
-    e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
-  ) => {
-    if (disabled) {
-      e.stopPropagation();
-
-      return;
-    }
-
-    if (checkboxRef.current) {
-      if (!controlled) {
-        e.target.value = !internalChecked;
-        setInternalChecked(!internalChecked);
-        checkboxRef.current.checked = !internalChecked
-      } else {
-        e.target.value = !checked;
-        checkboxRef.current.checked = !checked
-      }
-    }
-
-    onClick?.(e);
-    onChange?.(e);
-  };
-
-  useEffect(() => {
-    if (checked !== undefined) {
-      setInternalChecked(checked);
-    }
-  }, [checked]);
-
-  return (
-    <div className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper`}>
-      <div
-        ref={ref}
-        tabIndex={0}
-        role="button"
-        style={style}
-        onClick={handleClick}
-        className={clsx([
-          prefixCls,
-          prefixClsV3,
-          className,
-          {
-            noStyle: noStyle,
-            [`${prefixCls}-disabled ${prefixClsV3}-disabled`]: disabled,
-            [`${prefixCls}-checked ${prefixClsV3}-checked`]: internalChecked
-          }
-        ])}
-      >
-        <input
-          id={id}
-          type={type}
-          name={name}
-          ref={checkboxRef}
-          disabled={disabled}
-          tabIndex={tabIndex}
-          required={required}
-          autoFocus={autoFocus}
-          onKeyDown={onKeyDown}
-          onKeyPress={onKeyPress}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-        />
-
-        <span className={`${prefixCls}-box ${prefixClsV3}-box`}>
-          <span
-            className={`${prefixCls}-check ${prefixClsV3}-check`}
-            style={{ opacity: internalChecked ? 1 : 0 }}
-          />
-        </span>
-      </div>
-
-      {titleClick
-        ? <div onClick={handleClick}>{children}</div>
-        : children && <span className={`${prefixCls}-label ${prefixClsV3}-label`}>{children}</span>
-      }
-    </div>
-  );
-};
-
-Checkbox.displayName = 'Checkbox';
-
-export default Checkbox;

package/lib/components/Checkbox/index.ts

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

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;
-}