@wwog/react 1.2.4 → 1.2.5

package/README.md

@@ -312,6 +312,47 @@ function Layout() {
 }
 ```
 
+#### `<ClassName>` (v1.2.5+)
+
+用于将 CSS 类名分类编写的组件，内置类似`clsx`的功能，并且可以去除重复的 className。支持基础类、悬停态、激活态等多种状态的类名管理。
+
+```tsx
+import { ClassName } from "@wwog/react";
+
+function Example() {
+  return (
+    <ClassName
+      className={{
+        base: "p-2 bg-white",
+        hover: "hover:bg-gray-100",
+        active: "active:bg-gray-200",
+        focus: "focus:ring-2",
+      }}
+    >
+      <button>点击我</button>
+    </ClassName>
+  );
+}
+```
+
+还可以使用容器包装元素：
+
+```tsx
+<ClassName
+  className={{
+    base: ["p-2", { "bg-red-500": isError }],
+    hover: { "hover:bg-blue-500": true },
+  }}
+  asWrapper="span"
+>
+  内容
+</ClassName>
+```
+
+- `className`：分类的类名对象，支持各种状态的类名（base, hover, active, focus, disabled 等）
+- `asWrapper`：是否生成包含所有 className 的 wrapper，默认 false，传递标签名如'div'或'span'
+- `children`：子元素，通常是一个 React 元素
+
 ### hooks
 
 - 一些常用的 hooks 的封装
@@ -324,11 +365,45 @@ function Layout() {
 
 - 用于部分组件的内部函数,如需要也可使用
 
-formatDate 比较标准的格式化时间函数
+#### `formatDate`
+
+比较标准的格式化时间函数
+
+#### `childrenLoop`
+
+可以中断的子节点遍历，让一些分支流程拥有极致性能
+
+#### `Counter`
+
+计数器
+
+#### `cn` (v1.2.5+)
+
+一个高效的 CSS 类名合并工具函数，类似于`clsx`或`classnames`，但能自动去除重复的类名。
+
+```tsx
+import { cn } from "@wwog/react";
+
+function Example({ isActive, isDisabled }) {
+  return (
+    <div
+      className={cn("base-class", ["array-class-1", "array-class-2"], {
+        "active-class": isActive,
+        "disabled-class": isDisabled,
+      })}
+    >
+      内容
+    </div>
+  );
+}
+```
 
-childrenLoop 可以中断的子节点遍历，让一些分支流程拥有极致性能
+支持多种参数类型：
 
-Counter 计数器
+- 字符串: `"class1 class2"`
+- 字符串数组: `["class1", "class2"]`
+- 对象: `{ "class1": true, "class2": false }`
+- 以上类型的任意组合
 
 ## License
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, FC, Dispatch } from 'react';
+import React$1, { ReactNode, FC, HTMLElementType, Dispatch } from 'react';
 
 interface SwitchProps<T> {
     value: T;
@@ -190,46 +190,6 @@ interface PipeProps {
  */
 declare const Pipe: FC<PipeProps>;
 
-interface ToggleProps<T = boolean> {
-    /**
-     * @description_en The initial value to toggle.
-     * @description_zh 初始切换值。
-     * @default 0
-     */
-    index?: number;
-    /**
-     * @description_en Array of values to toggle between.
-     * @description_zh 可切换的值数组。
-     */
-    options: T[];
-    /**
-     * @description_en Function to determine the next value index in the toggle sequence.
-     * @description_zh 确定切换序列中下一个值索引的函数。
-     * @optional
-     */
-    next?: (curIndex: number, options: T[]) => number;
-    /**
-     * @description_en Render function, receiving the toggled value and toggle function.
-     * @description_zh 渲染函数，接收切换后的值和切换函数。
-     */
-    render: (value: T, toggle: () => void) => ReactNode;
-}
-/**
- * @description_zh 一个声明式组件，用于在预定义选项中切换值并通过 render 函数传递给子组件，支持自定义切换逻辑。
- * @description_en A declarative component for toggling between predefined values and passing them to children via a render function, supporting custom toggle logic.
- * @component
- * @example
- * ```tsx
- * <Toggle
- *   options={["light", "dark"]}
- *   render={(theme, toggleTheme) => (
- *     <div onClick={toggleTheme}>当前主题: {theme}</div>
- *   )}
- * />
- * ```
- */
-declare const Toggle: <T>(props: ToggleProps<T>) => React$1.ReactNode;
-
 interface SizeBoxProps {
     size?: number | string;
     height?: number | string;
@@ -244,13 +204,6 @@ interface SizeBoxProps {
  */
 declare const SizeBox: FC<SizeBoxProps>;
 
-interface ArrayRenderProps<T> {
-    items: T[];
-    renderItem: (item: T, index: number) => React$1.ReactNode;
-    filter?: (item: T) => boolean;
-}
-declare function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode;
-
 /**
  * Props for the `Scope` component.
  *
@@ -306,49 +259,6 @@ interface ScopeProps {
  */
 declare const Scope: FC<ScopeProps>;
 
-interface DateRenderProps<T = string> {
-    /**
-     * @description_en The input date to render (Date object, ISO string, or timestamp).
-     * @description_zh 要渲染的输入日期（Date 对象、ISO 字符串或时间戳）。
-     */
-    source: Date | string | number;
-    /**
-     * @description_en Function to format the date.
-     * @description_zh 格式化日期的函数。
-     * @optional
-     * @default toLocaleString
-     */
-    format?: (date: Date) => T;
-    /**
-     * @description_en Function to render the formatted date.
-     * @description_zh 渲染格式化后日期的函数。
-     */
-    children: (formatted: T) => React$1.ReactNode;
-}
-/**
- * @description_zh 一个声明式组件，用于格式化并渲染日期，简单易用且支持自定义格式化。
- * @description_en A declarative component for formatting and rendering dates, simple to use with support for custom formatting.
- * @component
- * @template T - The type of the formatted date value
- * @example
- * ```tsx
- * <DateRender source="2025-05-06">
- *   {(formatted) => <div>日期: {formatted}</div>}
- * </DateRender>
- * ```
- *
- * @example
- * ```tsx
- * <DateRender<string>
- *   source={new Date()}
- *   format={(date) => date.toLocaleDateString("zh-CN")}
- * >
- *   {(formatted) => <div>日期: {formatted}</div>}
- * </DateRender>
- * ```
- */
-declare function DateRender<T = string>({ source, format, children, }: DateRenderProps<T>): React$1.JSX.Element | null;
-
 /**
  * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
  * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
@@ -392,6 +302,140 @@ declare class Counter {
      */
     next(): number;
 }
+type CxInput = string | string[] | Record<string, boolean> | undefined | null | false;
+declare function cx(...args: CxInput[]): string;
+
+interface ClassNameProps {
+    className?: {
+        base?: CxInput;
+        hover?: CxInput;
+        active?: CxInput;
+        focus?: CxInput;
+        disabled?: CxInput;
+        [key: string]: CxInput;
+    };
+    /**
+     * @description 传入容器标签名.是否生成包含所有 `className` 的 `wrapper`, 默认 false, 传递 `true` 为 `div。`
+     * @description_en Whether to generate a `wrapper` containing all `className`, default is false, and pass the container tag name, if `true` will be `div`.
+     */
+    asWrapper?: boolean | HTMLElementType;
+    children?: React$1.ReactNode;
+}
+/**
+ * @description 用于将 `className` 分类编写的组件，内置了类似`clsx`的功能,并且去除重复的 className。
+ * @description_en A component for `className` classification, built-in similar to `clsx` functionality, and removes duplicate className.
+ * @component
+ * @example
+ * ```tsx
+ * <ClassName className={{ base: "p-2 bg-red", hover: ["hover:bg-blue", { "hover:text-white": true }] }}>
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ClassName
+ *   className={{
+ *     base: ["p-2", { "bg-red": condition }],
+ *     hover: { "hover:bg-blue": true },
+ *   }}
+ *   asWrapper="span"
+ * >
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ */
+declare const ClassName: FC<ClassNameProps>;
+
+interface ToggleProps<T = boolean> {
+    /**
+     * @description_en The initial value to toggle.
+     * @description_zh 初始切换值。
+     * @default 0
+     */
+    index?: number;
+    /**
+     * @description_en Array of values to toggle between.
+     * @description_zh 可切换的值数组。
+     */
+    options: T[];
+    /**
+     * @description_en Function to determine the next value index in the toggle sequence.
+     * @description_zh 确定切换序列中下一个值索引的函数。
+     * @optional
+     */
+    next?: (curIndex: number, options: T[]) => number;
+    /**
+     * @description_en Render function, receiving the toggled value and toggle function.
+     * @description_zh 渲染函数，接收切换后的值和切换函数。
+     */
+    render: (value: T, toggle: () => void) => ReactNode;
+}
+/**
+ * @description_zh 一个声明式组件，用于在预定义选项中切换值并通过 render 函数传递给子组件，支持自定义切换逻辑。
+ * @description_en A declarative component for toggling between predefined values and passing them to children via a render function, supporting custom toggle logic.
+ * @component
+ * @example
+ * ```tsx
+ * <Toggle
+ *   options={["light", "dark"]}
+ *   render={(theme, toggleTheme) => (
+ *     <div onClick={toggleTheme}>当前主题: {theme}</div>
+ *   )}
+ * />
+ * ```
+ */
+declare const Toggle: <T>(props: ToggleProps<T>) => React$1.ReactNode;
+
+interface ArrayRenderProps<T> {
+    items: T[];
+    renderItem: (item: T, index: number) => React$1.ReactNode;
+    filter?: (item: T) => boolean;
+}
+declare function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode;
+
+interface DateRenderProps<T = string> {
+    /**
+     * @description_en The input date to render (Date object, ISO string, or timestamp).
+     * @description_zh 要渲染的输入日期（Date 对象、ISO 字符串或时间戳）。
+     */
+    source: Date | string | number;
+    /**
+     * @description_en Function to format the date.
+     * @description_zh 格式化日期的函数。
+     * @optional
+     * @default toLocaleString
+     */
+    format?: (date: Date) => T;
+    /**
+     * @description_en Function to render the formatted date.
+     * @description_zh 渲染格式化后日期的函数。
+     */
+    children: (formatted: T) => React$1.ReactNode;
+}
+/**
+ * @description_zh 一个声明式组件，用于格式化并渲染日期，简单易用且支持自定义格式化。
+ * @description_en A declarative component for formatting and rendering dates, simple to use with support for custom formatting.
+ * @component
+ * @template T - The type of the formatted date value
+ * @example
+ * ```tsx
+ * <DateRender source="2025-05-06">
+ *   {(formatted) => <div>日期: {formatted}</div>}
+ * </DateRender>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <DateRender<string>
+ *   source={new Date()}
+ *   format={(date) => date.toLocaleDateString("zh-CN")}
+ * >
+ *   {(formatted) => <div>日期: {formatted}</div>}
+ * </DateRender>
+ * ```
+ */
+declare function DateRender<T = string>({ source, format, children, }: DateRenderProps<T>): React$1.JSX.Element | null;
 
 interface UseControlledOptions<T> {
     /**
@@ -420,5 +464,5 @@ interface UseControlledOptions<T> {
 }
 declare function useControlled<T>(options: UseControlledOptions<T>): [T, Dispatch<React.SetStateAction<T>>];
 
-export { ArrayRender, Counter, DateRender, False, If, Pipe, Scope, SizeBox, Switch, Toggle, True, When, childrenLoop, formatDate, useControlled };
-export type { ArrayRenderProps, DateRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, PipeProps, ScopeProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, TrueProps, UseControlledOptions, WhenProps };
+export { ArrayRender, ClassName, Counter, DateRender, False, If, Pipe, Scope, SizeBox, Switch, Toggle, True, When, childrenLoop, cx, formatDate, useControlled };
+export type { ArrayRenderProps, ClassNameProps, CxInput, DateRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, PipeProps, ScopeProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, TrueProps, UseControlledOptions, WhenProps };

package/dist/index.js

@@ -1 +1 @@
-import r,{useMemo as p,useEffect as J,useState as b,Fragment as O,useCallback as H}from"react";function I(e,t){if(e===void 0)return;let n=0;if(Array.isArray(e)){for(const l of e)if(t(l,n++)===!1)break}else t(e,n)}function R(e,t){const n=t||new Date,l=n.getFullYear(),a=n.getMonth()+1,o=n.getDate(),i=n.getHours(),c=n.getMinutes(),u=n.getSeconds(),d=n.getMilliseconds(),s=n.getDay(),f=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],T=["January","February","March","April","May","June","July","August","September","October","November","December"],M=s===0?6:s-1,C=m[M],v=f[M],D=a-1,Y=T[D],x=y[D],A={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:x,MMMM:Y,D:o.toString(),DD:o.toString().padStart(2,"0"),d:s.toString(),dd:v,ddd:v,dddd:C,H:i.toString(),HH:i.toString().padStart(2,"0"),h:(i%12).toString(),hh:(i%12).toString().padStart(2,"0"),m:c.toString(),mm:c.toString().padStart(2,"0"),s:u.toString(),ss:u.toString().padStart(2,"0"),SSS:d.toString().padStart(3,"0"),Z:"+08:00",ZZ:"+0800",A:i<12?"AM":"PM",a:i<12?"am":"pm"};return e.replace(/YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,k=>A[k])}class _{count=0;next(){return this.count++}}const B=(e,t)=>e===t,S=e=>r.createElement(r.Fragment,null,e.children);S.displayName="Switch_Case";const E=e=>r.createElement(r.Fragment,null,e.children);E.displayName="Switch_Default";const g=e=>{const{value:t,compare:n=B,children:l,strict:a=!1}=e,o=new Set;let i=null,c=null,u=!1;return I(l,(d,s)=>{if(!r.isValidElement(d))throw new Error(`Switch Children only accepts valid React elements at index ${s}`);const f=d.type;if(f.displayName===S.displayName){const m=d.props;if(o.has(m.value))throw new Error(`Switch found duplicate Case value at index ${s}: ${JSON.stringify(m.value)}${a?" (detected in strict mode)":""}`);if(o.add(m.value),!i&&n(t,m.value)&&(i=m.children,a===!1))return!1}else if(f.displayName===E.displayName){if(u)throw new Error(`Switch can only have one Default child at index ${s}`);if(u=!0,c=d.props.children,!a&&i)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${s}`)}),r.createElement(r.Fragment,null,i??c)};g.displayName="Switch",g.Case=S,g.Default=E,g.createTyped=function(){return{Switch:g,Case:S,Default:E}};const w=e=>r.createElement(r.Fragment,null,e.children),N=({children:e})=>r.createElement(r.Fragment,null,e),F=e=>r.createElement(r.Fragment,null,e.children);w.displayName="If_Then",N.displayName="If_Else",F.displayName="If_ElseIf";const h=({condition:e,children:t})=>{let n=null,l=null;const a=[];if(r.Children.forEach(t,o=>{if(!r.isValidElement(o))throw new Error("If component only accepts valid React elements");const i=o.type;if(i.displayName===w.displayName){if(n)throw new Error("If component can only have one Then child");n=o}else if(i.displayName===F.displayName)a.push(o);else if(i.displayName===N.displayName){if(l)throw new Error("If component can only have one Else child");l=o}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(i.displayName||i.name||i)}`)}),e)return n?r.createElement(r.Fragment,null,n.props.children):null;for(const o of a)if(o.props.condition)return r.createElement(r.Fragment,null,o.props.children);return l?r.createElement(r.Fragment,null,l.props.children):null};h.displayName="If",h.Then=w,h.ElseIf=F,h.Else=N,h.createTyped=function(){return{If:h,Then:w,ElseIf:F,Else:N}};const P=({condition:e,children:t})=>e?r.createElement(r.Fragment,null,t):null,W=({condition:e,children:t})=>e===!1?r.createElement(r.Fragment,null,t):null,Z=({all:e,any:t,none:n,children:l,fallback:a})=>p(()=>(e&&(t||n)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(e&&e.length>0&&e.every(Boolean)||t&&t.length>0&&t.some(Boolean)||n&&n.length>0&&n.every(o=>!o))),[e,t,n])?r.createElement(r.Fragment,null,l):r.createElement(r.Fragment,null,a||null),V=({data:e,transform:t,render:n,fallback:l})=>{const a=p(()=>t.reduce((o,i)=>i(o),e),[e,t]);return a==null?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,n(a))},$=e=>{const{index:t=0,options:n,next:l,render:a}=e;J(()=>{if(n.length<t+1)throw new Error(`Index ${t} is out of bounds for options array of length ${n.length}. Defaulting to first option.`)},[t,n]);const[o,i]=b(t),c=()=>{i(u=>n.length?l?l(u,n):(u+1)%n.length:u)};return a(n[o],c)},j=e=>{const{children:t,h:n,w:l,size:a,height:o,width:i,className:c}=e;return r.createElement("div",{style:{width:a||l||i,height:a||n||o,flexShrink:0},className:c},t)};function z(e){const{items:t,renderItem:n,filter:l}=e;return t?r.createElement(O,null,t.map((a,o)=>l&&!l(a)?null:n(a,o))):(console.error("ArrayRender: items is null"),null)}const L=({let:e,props:t,children:n,fallback:l})=>{const a=p(()=>typeof e=="function"?e(t):e,[e,t]);return!n||!Object.keys(a).length?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,n(a))};function q({source:e,format:t,children:n}){const l=p(()=>{if(e instanceof Date)return e;if(typeof e=="string"||typeof e=="number"){const o=new Date(e);return isNaN(o.getTime())?null:o}return null},[e]),a=p(()=>l?t?t(l):l.toLocaleString():null,[l,t]);return!a||!n?null:r.createElement(r.Fragment,null,n(a))}const G="onChange",K="value";function Q(e){const{defaultValue:t,onBeforeChange:n,trigger:l=G,valuePropName:a=K,props:o}=e,i=Object.prototype.hasOwnProperty.call(o,a),[c,u]=b(t),d=i?o[a]:c,s=p(()=>o[l],[o,l]),f=H(m=>{const y=typeof m=="function"?m(d):m;n&&n(y,d)===!1||(i||u(y),s&&s(y))},[i,n,l,d,s]);return[d,f]}export{z as ArrayRender,_ as Counter,q as DateRender,W as False,h as If,V as Pipe,L as Scope,j as SizeBox,g as Switch,$ as Toggle,P as True,Z as When,I as childrenLoop,R as formatDate,Q as useControlled};
+import r,{useMemo as h,useEffect as I,isValidElement as T,Fragment as M,cloneElement as H,useState as A,useCallback as P}from"react";function Y(t,n){if(t===void 0)return;let e=0;if(Array.isArray(t)){for(const l of t)if(n(l,e++)===!1)break}else n(t,e)}function W(t,n){const e=n||new Date,l=e.getFullYear(),a=e.getMonth()+1,o=e.getDate(),s=e.getHours(),c=e.getMinutes(),u=e.getSeconds(),d=e.getMilliseconds(),i=e.getDay(),f=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],x=["January","February","March","April","May","June","July","August","September","October","November","December"],D=i===0?6:i-1,k=m[D],b=f[D],C=a-1,O=x[C],J=y[C],j={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:J,MMMM:O,D:o.toString(),DD:o.toString().padStart(2,"0"),d:i.toString(),dd:b,ddd:b,dddd:k,H:s.toString(),HH:s.toString().padStart(2,"0"),h:(s%12).toString(),hh:(s%12).toString().padStart(2,"0"),m:c.toString(),mm:c.toString().padStart(2,"0"),s:u.toString(),ss:u.toString().padStart(2,"0"),SSS:d.toString().padStart(3,"0"),Z:"+08:00",ZZ:"+0800",A:s<12?"AM":"PM",a:s<12?"am":"pm"};return t.replace(/YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,R=>j[R])}class _{count=0;next(){return this.count++}}function v(...t){const n=new Set;for(const e of t)if(e){if(typeof e=="string")n.add(e);else if(Array.isArray(e))e.forEach(l=>n.add(l));else if(typeof e=="object")for(const[l,a]of Object.entries(e))a&&n.add(l)}return Array.from(n).join(" ")}const B=(t,n)=>t===n,S=t=>r.createElement(r.Fragment,null,t.children);S.displayName="Switch_Case";const E=t=>r.createElement(r.Fragment,null,t.children);E.displayName="Switch_Default";const g=t=>{const{value:n,compare:e=B,children:l,strict:a=!1}=t,o=new Set;let s=null,c=null,u=!1;return Y(l,(d,i)=>{if(!r.isValidElement(d))throw new Error(`Switch Children only accepts valid React elements at index ${i}`);const f=d.type;if(f.displayName===S.displayName){const m=d.props;if(o.has(m.value))throw new Error(`Switch found duplicate Case value at index ${i}: ${JSON.stringify(m.value)}${a?" (detected in strict mode)":""}`);if(o.add(m.value),!s&&e(n,m.value)&&(s=m.children,a===!1))return!1}else if(f.displayName===E.displayName){if(u)throw new Error(`Switch can only have one Default child at index ${i}`);if(u=!0,c=d.props.children,!a&&s)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${i}`)}),r.createElement(r.Fragment,null,s??c)};g.displayName="Switch",g.Case=S,g.Default=E,g.createTyped=function(){return{Switch:g,Case:S,Default:E}};const w=t=>r.createElement(r.Fragment,null,t.children),N=({children:t})=>r.createElement(r.Fragment,null,t),F=t=>r.createElement(r.Fragment,null,t.children);w.displayName="If_Then",N.displayName="If_Else",F.displayName="If_ElseIf";const p=({condition:t,children:n})=>{let e=null,l=null;const a=[];if(r.Children.forEach(n,o=>{if(!r.isValidElement(o))throw new Error("If component only accepts valid React elements");const s=o.type;if(s.displayName===w.displayName){if(e)throw new Error("If component can only have one Then child");e=o}else if(s.displayName===F.displayName)a.push(o);else if(s.displayName===N.displayName){if(l)throw new Error("If component can only have one Else child");l=o}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(s.displayName||s.name||s)}`)}),t)return e?r.createElement(r.Fragment,null,e.props.children):null;for(const o of a)if(o.props.condition)return r.createElement(r.Fragment,null,o.props.children);return l?r.createElement(r.Fragment,null,l.props.children):null};p.displayName="If",p.Then=w,p.ElseIf=F,p.Else=N,p.createTyped=function(){return{If:p,Then:w,ElseIf:F,Else:N}};const V=({condition:t,children:n})=>t?r.createElement(r.Fragment,null,n):null,Z=({condition:t,children:n})=>t===!1?r.createElement(r.Fragment,null,n):null,$=({all:t,any:n,none:e,children:l,fallback:a})=>h(()=>(t&&(n||e)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(t&&t.length>0&&t.every(Boolean)||n&&n.length>0&&n.some(Boolean)||e&&e.length>0&&e.every(o=>!o))),[t,n,e])?r.createElement(r.Fragment,null,l):r.createElement(r.Fragment,null,a||null),z=({data:t,transform:n,render:e,fallback:l})=>{const a=h(()=>n.reduce((o,s)=>s(o),t),[t,n]);return a==null?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))},L=t=>{const{children:n,h:e,w:l,size:a,height:o,width:s,className:c}=t;return r.createElement("div",{style:{width:a||l||s,height:a||e||o,flexShrink:0},className:c},n)},q=({let:t,props:n,children:e,fallback:l})=>{const a=h(()=>typeof t=="function"?t(n):t,[t,n]);return!e||!Object.keys(a).length?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))},G=t=>{const{className:n,children:e,asWrapper:l}=t;if(I(()=>{T(e)===!1&&console.warn("<ClassName>: children is not a valid React element. Please check your code.")},[e]),!e)return null;if(!n)return r.createElement(M,null,e);const a=v(...Object.values(n));return l?r.createElement(typeof l=="string"?l:"div",{className:a},e):T(e)?H(e,{className:v(e.props.className,a)}):r.createElement(M,null,e)},K=t=>{const{index:n=0,options:e,next:l,render:a}=t;I(()=>{if(e.length<n+1)throw new Error(`Index ${n} is out of bounds for options array of length ${e.length}. Defaulting to first option.`)},[n,e]);const[o,s]=A(n),c=()=>{s(u=>e.length?l?l(u,e):(u+1)%e.length:u)};return a(e[o],c)};function Q(t){const{items:n,renderItem:e,filter:l}=t;return n?r.createElement(M,null,n.map((a,o)=>l&&!l(a)?null:e(a,o))):(console.error("ArrayRender: items is null"),null)}function U({source:t,format:n,children:e}){const l=h(()=>{if(t instanceof Date)return t;if(typeof t=="string"||typeof t=="number"){const o=new Date(t);return isNaN(o.getTime())?null:o}return null},[t]),a=h(()=>l?n?n(l):l.toLocaleString():null,[l,n]);return!a||!e?null:r.createElement(r.Fragment,null,e(a))}const X="onChange",ee="value";function te(t){const{defaultValue:n,onBeforeChange:e,trigger:l=X,valuePropName:a=ee,props:o}=t,s=Object.prototype.hasOwnProperty.call(o,a),[c,u]=A(n),d=s?o[a]:c,i=h(()=>o[l],[o,l]),f=P(m=>{const y=typeof m=="function"?m(d):m;e&&e(y,d)===!1||(s||u(y),i&&i(y))},[s,e,l,d,i]);return[d,f]}export{Q as ArrayRender,G as ClassName,_ as Counter,U as DateRender,Z as False,p as If,z as Pipe,q as Scope,L as SizeBox,g as Switch,K as Toggle,V as True,$ as When,Y as childrenLoop,v as cx,W as formatDate,te as useControlled};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "",
   "keywords": [],
   "author": "wwog",

package/src/{ProcessControl → components/ProcessControl}/Switch.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { childrenLoop } from "../utils";
+import { childrenLoop } from "../../utils";
 
 export interface SwitchProps<T> {
   value: T;

package/src/{ProcessControl → components/ProcessControl}/index.ts

@@ -2,4 +2,3 @@ export * from "./Switch";
 export * from "./If";
 export * from "./When";
 export * from "./Pipe";
-export * from "./Toggle";

package/src/{Common → components/Struct}/index.ts

@@ -1,4 +1,2 @@
-export * from "./SizeBox";
 export * from "./ArrayRender";
-export * from "./Scope";
 export * from "./DateRender";

package/src/components/Sundry/ClassName.tsx

@@ -0,0 +1,86 @@
+import React, {
+  cloneElement,
+  FC,
+  Fragment,
+  isValidElement,
+  useEffect,
+  type HTMLElementType,
+} from "react";
+import { cx, type CxInput } from "../../utils";
+
+export interface ClassNameProps {
+  className?: {
+    base?: CxInput;
+    hover?: CxInput;
+    active?: CxInput;
+    focus?: CxInput;
+    disabled?: CxInput;
+    [key: string]: CxInput;
+  };
+  /**
+   * @description 传入容器标签名.是否生成包含所有 `className` 的 `wrapper`, 默认 false, 传递 `true` 为 `div。`
+   * @description_en Whether to generate a `wrapper` containing all `className`, default is false, and pass the container tag name, if `true` will be `div`.
+   */
+  asWrapper?: boolean | HTMLElementType;
+  children?: React.ReactNode;
+}
+
+/**
+ * @description 用于将 `className` 分类编写的组件，内置了类似`clsx`的功能,并且去除重复的 className。
+ * @description_en A component for `className` classification, built-in similar to `clsx` functionality, and removes duplicate className.
+ * @component
+ * @example
+ * ```tsx
+ * <ClassName className={{ base: "p-2 bg-red", hover: ["hover:bg-blue", { "hover:text-white": true }] }}>
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ClassName
+ *   className={{
+ *     base: ["p-2", { "bg-red": condition }],
+ *     hover: { "hover:bg-blue": true },
+ *   }}
+ *   asWrapper="span"
+ * >
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ */
+export const ClassName: FC<ClassNameProps> = (props) => {
+  const { className, children, asWrapper } = props;
+
+  useEffect(() => {
+    if (isValidElement(children) === false) {
+      console.warn(
+        "<ClassName>: children is not a valid React element. Please check your code."
+      );
+    }
+  }, [children]);
+
+  if (!children) {
+    return null;
+  }
+
+  if (!className) {
+    return <Fragment>{children}</Fragment>;
+  }
+
+  const generatedCls = cx(...Object.values(className));
+
+  if (asWrapper) {
+    const Wrapper = typeof asWrapper === "string" ? asWrapper : "div";
+    return <Wrapper className={generatedCls}>{children}</Wrapper>;
+  }
+
+  if (isValidElement(children)) {
+    return cloneElement(children, {
+      //@ts-expect-error type error
+      className: cx(children.props.className, generatedCls),
+    } as any);
+  }
+
+  return <Fragment>{children}</Fragment>;
+};

package/src/components/Sundry/index.ts

@@ -0,0 +1,4 @@
+export * from "./SizeBox";
+export * from "./Scope";
+export * from "./ClassName";
+export * from "./Toggle";

package/src/index.ts

@@ -1,4 +1,5 @@
-export * from "./ProcessControl";
-export * from "./Common";
+export * from "./components/ProcessControl";
+export * from "./components/Sundry";
+export * from "./components/Struct";
 export * from "./utils";
 export * from "./hooks";

package/src/utils/index.ts

@@ -151,3 +151,35 @@ export class Counter {
     return this.count++;
   }
 }
+
+export type CxInput =
+  | string
+  | string[]
+  | Record<string, boolean>
+  | undefined
+  | null
+  | false;
+
+export function cx(...args: CxInput[]): string {
+  const classes = new Set<string>();
+
+  for (const arg of args) {
+    if (!arg) {
+      continue;
+    }
+
+    if (typeof arg === "string") {
+      classes.add(arg);
+    } else if (Array.isArray(arg)) {
+      arg.forEach((item) => classes.add(item));
+    } else if (typeof arg === "object") {
+      for (const [key, value] of Object.entries(arg)) {
+        if (value) {
+          classes.add(key);
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).join(" ");
+}