x-ui-design 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "scripts": {
@@ -10,7 +10,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "classcat": "^5.0.5",
     "next": "15.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/xUiDesign/components/Checkbox/index.tsx

@@ -8,11 +8,11 @@ import {
   useEffect,
   useState
 } from 'react';
-import cc from 'classcat';
 import { SyntheticBaseEvent } from '@/xUiDesign/types';
 import { CheckboxProps } from '@/xUiDesign/types/checkbox';
 import { prefixClsCheckbox } from '@/xUiDesign/utils';
 import './style.css';
+import { clsx } from '@/xUiDesign/helpers';
 
 const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
   prefixCls = prefixClsCheckbox,
@@ -68,7 +68,7 @@ const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
       ref={ref}
       style={style}
       onClick={handleClick}
-      className={cc([
+      className={clsx([
         prefixCls,
         className,
         {

package/src/xUiDesign/components/DatePicker/RangePicker/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import cc from 'classcat';
 import { TRangePickerProps } from '@/xUiDesign/types/datepicker';
 import { prefixClsRangePicker } from '@/xUiDesign/utils';
 import './style.css';
 import { MONTH_LENGTH, NEXT_DAYS_COUNT_AS_CURRENT_MUNTH, NUMBER_SIX } from '..';
 import { CalendarIcon, ClearIcon, DateDistanceIcon } from '../../icons';
+import { clsx } from '@/xUiDesign/helpers';
 
 const RangePicker = ({
   prefixCls = prefixClsRangePicker,
@@ -248,7 +248,7 @@ const RangePicker = ({
                   })}
                   onClick={() => day && handleSelect(day)}
                   onMouseEnter={() => day && setHoveredDate(day)}
-                  className={cc([
+                  className={clsx([
                     `${prefixCls}-day`,
                     {
                       [`${prefixCls}-selected`]: isSelected,
@@ -322,7 +322,7 @@ const RangePicker = ({
     <div
       ref={containerRef}
       style={style}
-      className={cc([
+      className={clsx([
         `${prefixCls}-range-container`,
         { 
           [`${prefixCls}-${size}`]: size,
@@ -333,7 +333,7 @@ const RangePicker = ({
       <div className={`${prefixCls}-range-input-wrapper`}>
         <button
           type="button"
-          className={cc([
+          className={clsx([
             `${prefixCls}-input`,
             {
               noBordered: !bordered,

package/src/xUiDesign/components/DatePicker/TimePicker/index.tsx

@@ -11,10 +11,10 @@ import {
   useRef,
   useState
 } from 'react';
-import cc from 'classcat';
 import { RuleType } from '@/xUiDesign/types';
 import { TimePickerProps } from '@/xUiDesign/types/datepicker';
 import { prefixClsTimePicker } from '@/xUiDesign/utils';
+import { clsx } from '@/xUiDesign/helpers';
 import './style.css';
 import { ClearIcon, TimeIcon } from '../../icons';
 
@@ -301,7 +301,7 @@ const TimePicker: FC<TimePickerProps> = ({
               ) : (
                 <div
                   key={h}
-                  className={cc([
+                  className={clsx([
                     `${prefixCls}-cell`,
                     {
                       [`${prefixCls}-cell-disabled`]:
@@ -331,7 +331,7 @@ const TimePicker: FC<TimePickerProps> = ({
               ) : (
                 <div
                   key={m}
-                  className={cc([
+                  className={clsx([
                     `${prefixCls}-cell`,
                     {
                       [`${prefixCls}-cell-disabled`]: getDisabled(
@@ -364,7 +364,7 @@ const TimePicker: FC<TimePickerProps> = ({
               ) : (
                 <div
                   key={s}
-                  className={cc([
+                  className={clsx([
                     `${prefixCls}-cell`,
                     {
                       [`${prefixCls}-cell-disabled`]: getDisabled(
@@ -412,7 +412,7 @@ const TimePicker: FC<TimePickerProps> = ({
   };
 
   return (
-    <div className={cc([`${prefixCls}-wrapper`, className])} style={style}>
+    <div className={clsx([`${prefixCls}-wrapper`, className])} style={style}>
       <div
         className={`${prefixCls}-input-wrapper`}
         onClick={() => setOpen(true)}

package/src/xUiDesign/components/DatePicker/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { CSSProperties, useEffect, useRef, useState } from 'react';
-import cc from 'classcat';
 import { TDatePickerProps } from '@/xUiDesign/types/datepicker';
 import { prefixClsDatePicker } from '@/xUiDesign/utils';
 import RangePicker from './RangePicker';
 import './style.css';
 import { CalendarIcon, ClearIcon, ErrorIcon } from '../icons';
+import { clsx } from '@/xUiDesign/helpers';
 
 const INPUT_SIZE = 12;
 const CONTENT_PADDING = 6;
@@ -256,7 +256,7 @@ const DatePickerComponent = ({
   return (
     <div
       ref={containerRef}
-      className={cc([
+      className={clsx([
         `${prefixCls}-container`,
         {
           noStyle,
@@ -267,7 +267,7 @@ const DatePickerComponent = ({
       <div className={`${prefixCls}-input-wrapper`}>
         <button
           type="button"
-          className={cc([
+          className={clsx([
             `${prefixCls}-input`,
             {
               noBordered: !bordered,
@@ -308,7 +308,7 @@ const DatePickerComponent = ({
 
       <div
         style={popupContainerRef.current ? { position: 'absolute' } : {}}
-        className={cc([
+        className={clsx([
           placement,
           `${prefixCls}-dropdown-wrapper`,
           {
@@ -386,7 +386,7 @@ const DatePickerComponent = ({
                   return (
                     <button
                       key={`${year}-${month}-${day}-${idx}`}
-                      className={cc([
+                      className={clsx([
                         `${prefixCls}-day`,
                         {
                           [`${prefixCls}-selected`]: isSelected,

package/src/xUiDesign/components/Form/Item/index.tsx

@@ -10,7 +10,6 @@ import {
   useRef,
   useState
 } from 'react';
-import cc from 'classcat';
 import { RuleType, SyntheticBaseEvent } from '@/xUiDesign/types';
 import {
   FormItemChildComponentProps,
@@ -20,6 +19,7 @@ import { OptionProps } from '@/xUiDesign/types/select';
 import { prefixClsFormItem } from '@/xUiDesign/utils';
 import { FormContext } from '..';
 import './style.css';
+import { clsx } from '@/xUiDesign/helpers';
 
 const REF_CLIENT_HEIGHT = 24;
 
@@ -106,7 +106,7 @@ export const FormItem = ({
   return (
     <div
       style={style}
-      className={cc([
+      className={clsx([
         `${prefixCls}`,
         {
           [layout]: layout,

package/src/xUiDesign/components/Input/Textarea/index.tsx

@@ -10,10 +10,10 @@ import {
   useRef,
   useState
 } from 'react';
-import cc from 'classcat';
 import { TextareaProps } from '@/xUiDesign/types/input';
 import { prefixClsTextArea } from '@/xUiDesign/utils';
 import './style.css';
+import { clsx } from '@/xUiDesign/helpers';
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
@@ -90,7 +90,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           style={{ ...styles?.textarea, ...style }}
-          className={cc([
+          className={clsx([
             `${prefixCls} ${prefixCls}-${size} ${prefixCls}-${variant} ${className}`,
             {
               [`${prefixCls}-bordered`]: bordered,

package/src/xUiDesign/components/Input/index.tsx

@@ -9,13 +9,13 @@ import {
   useRef,
   useState
 } from 'react';
-import cc from 'classcat';
 import { SyntheticBaseEvent, TargetProps } from '@/xUiDesign/types';
 import { InputProps } from '@/xUiDesign/types/input';
 import { prefixClsInput } from '@/xUiDesign/utils';
 import './style.css';
 import { Textarea } from './Textarea';
 import { ErrorIcon } from '../icons';
+import { clsx } from '@/xUiDesign/helpers';
 
 const InputComponent = forwardRef(
   (
@@ -79,7 +79,7 @@ const InputComponent = forwardRef(
 
     return (
       <div
-        className={cc([
+        className={clsx([
           `${prefixCls}-container`,
           {
             [`${prefixCls}-error`]: error,
@@ -112,7 +112,7 @@ const InputComponent = forwardRef(
             value={internalValue}
             onChange={handleChange}
             onKeyDown={handleOnKeyDown}
-            className={cc([prefixCls, className])}
+            className={clsx([prefixCls, className])}
           />
 
           <span className={`${prefixCls}-clear`} onClick={handleClear}>

package/src/xUiDesign/components/Radio/Button/index.tsx

@@ -1,12 +1,12 @@
 "use client"
 
 import { ReactNode } from 'react';
-import cc from 'classcat';
 import { SizeType } from '@/xUiDesign/types';
 import { RadioProps } from '@/xUiDesign/types/radio';
 import { prefixClsRadio } from '@/xUiDesign/utils';
 import { Radio } from '..';
 import './style.css';
+import { clsx } from '@/xUiDesign/helpers';
 
 interface RadioButtonProps extends RadioProps {
   children?: ReactNode;
@@ -27,7 +27,7 @@ const RadioButton = ({
       {...props}
       checked={checked}
       disabled={disabled}
-      className={cc([
+      className={clsx([
         `${prefixCls}-button`,
         {
           disabled,

package/src/xUiDesign/components/Radio/Group/index.tsx

@@ -7,13 +7,13 @@ import {
   ReactElement,
   useMemo
 } from 'react';
-import cc from 'classcat';
 import { RuleType } from '@/xUiDesign/types';
 import { RadioGroupProps } from '@/xUiDesign/types/radio';
 import { prefixClsRadio } from '@/xUiDesign/utils';
 import { RadioButton } from '../Button';
 import { Radio } from '..';
 import './style.css';
+import { clsx } from '@/xUiDesign/helpers';
 
 const RadioGroup = ({
   defaultValue,
@@ -83,7 +83,7 @@ const RadioGroup = ({
     <div
       id={id}
       style={style}
-      className={cc([
+      className={clsx([
         `${prefixCls}-group`,
         {
           block,

package/src/xUiDesign/components/Radio/index.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import { ForwardedRef, forwardRef, useEffect } from 'react';
-import cc from 'classcat';
-import { parseValue } from '@/xUiDesign/helpers';
+import { clsx, parseValue } from '@/xUiDesign/helpers';
 import { RadioProps } from '@/xUiDesign/types/radio';
 import { prefixClsRadio } from '@/xUiDesign/utils';
 import { RadioButton } from './Button';
@@ -50,7 +49,7 @@ const RadioComponent = forwardRef<HTMLLabelElement, RadioProps>(
         title={title}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className={cc([
+        className={clsx([
           `${prefixCls}-label`,
           {
             disabled,
@@ -69,7 +68,7 @@ const RadioComponent = forwardRef<HTMLLabelElement, RadioProps>(
           onFocus={e => onFocus?.(e)}
         />
         <span
-          className={cc([
+          className={clsx([
             `${prefixCls} ${prefixCls}-${disabled ? 'disabled' : 'enabled'}`
           ])}
         />

package/src/xUiDesign/components/Select/Option/index.tsx

@@ -1,8 +1,8 @@
 import { FC, MouseEventHandler } from 'react';
-import cc from 'classcat';
 import { OptionProps } from '@/xUiDesign/types/select';
 import { prefixClsSelect } from '@/xUiDesign/utils';
 import './style.css';
+import { clsx } from '@/xUiDesign/helpers';
 
 const Option: FC<OptionProps> = ({
   value,
@@ -25,7 +25,7 @@ const Option: FC<OptionProps> = ({
 
   return (
     <div
-      className={cc([
+      className={clsx([
         `${prefixCls}-option ${className} `,
         {
           selected: selected,

package/src/xUiDesign/components/Select/index.tsx

@@ -14,7 +14,6 @@ import {
   useState
 } from 'react';
 import { createPortal } from 'react-dom';
-import cc from 'classcat';
 import { EmptyContent } from '@/xUiDesign/components/Empty';
 import {
   ArrowIcon,
@@ -27,6 +26,7 @@ import {
 import { MouseEventHandlerSelect, SyntheticBaseEvent } from '@/xUiDesign/types';
 import { OptionType, SelectProps } from '@/xUiDesign/types/select';
 import { prefixClsSelect } from '@/xUiDesign/utils';
+import { clsx } from '@/xUiDesign/helpers';
 import { Option } from './Option';
 import { Tag } from './Tag';
 import './style.css';
@@ -405,7 +405,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>((
             key={`${props.value}`}
             {...props}
             selected={isSelected}
-            className={cc([
+            className={clsx([
               className,
               {
                 [`${prefixCls}-focused`]: hasMode
@@ -451,7 +451,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>((
 
   const dropdownContent = !loading && isOpen && (
     <div
-      className={cc([
+      className={clsx([
         `${prefixCls}-dropdown`,
         {
           [placement]: placement,
@@ -512,7 +512,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>((
       id={id}
       ref={selectRef}
       style={style}
-      className={cc([
+      className={clsx([
         {
           [size]: size,
           'noStyle': noStyle,

package/src/xUiDesign/components/Upload/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useRef, useState } from 'react';
-import cc from 'classcat';
 import { RuleType } from '@/xUiDesign/types';
 import {
   RcFile,
@@ -12,6 +11,7 @@ import {
 import { prefixClsUpload } from '@/xUiDesign/utils';
 import './style.css';
 import { StampleIcon, TrashIcon } from '../icons';
+import { clsx } from '@/xUiDesign/helpers';
 
 const IMAGE_SIZE = 40;
 const IMAGE_PROGRESS_PERCENT = 100;
@@ -194,7 +194,7 @@ const Upload = ({
 
   return (
     <div
-      className={cc([
+      className={clsx([
         `${prefixCls}-wrapper`,
         className,
         rootClassName,
@@ -206,7 +206,7 @@ const Upload = ({
       style={style}
     >
       <span
-        className={cc([`${prefixCls}`, `${prefixCls}-${listType}`])}
+        className={clsx([`${prefixCls}`, `${prefixCls}-${listType}`])}
         onClick={handleClick}
       >
         {children}

package/src/xUiDesign/helpers/index.ts

@@ -15,3 +15,34 @@ export const parseValue = (value: RuleType): RuleType => {
 
   return value;
 };
+
+export function clsx(...args: RuleType[]): string {
+  return args
+    .flatMap(arg => {
+      if (!arg) {
+        return [];
+      }
+
+      if (typeof arg === 'string') {
+        return [arg];
+      }
+
+      if (typeof arg === 'number') {
+        return [String(arg)];
+      }
+
+      if (Array.isArray(arg)) {
+        return clsx(...arg).split(' ');
+      }
+
+      if (typeof arg === 'object') {
+        return Object.entries(arg)
+          .filter(([, value]) => Boolean(value))
+          .map(([key]) => key);
+      }
+
+      return [];
+    })
+    .filter(Boolean)
+    .join(' ');
+}