@hairy/react-lib 1.9.0 → 1.10.0

package/dist/index.cjs

@@ -74,50 +74,95 @@ __export(index_exports, {
   useMounted: () => useMounted,
   useStore: () => useStore,
   useWatch: () => useWatch,
-  useWhenever: () => useWhenever
+  useWhenever: () => useWhenever,
+  wrapper: () => wrapper
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/utils/cls.ts
+var hasOwn = {}.hasOwnProperty;
+function cls(...args) {
+  let classes = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg)
+      classes = cls.append(classes, cls.parse(arg));
+  }
+  return classes;
+}
+cls.parse = function(arg) {
+  if (typeof arg === "string")
+    return arg;
+  if (typeof arg !== "object")
+    return "";
+  if (Array.isArray(arg))
+    return cls.apply(null, arg);
+  if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]"))
+    return cls.toString();
+  let classes = "";
+  for (const key in arg) {
+    if (hasOwn.call(arg, key) && arg[key])
+      classes = cls.append(classes, key);
+  }
+  return classes;
+};
+cls.append = function(value, newClass) {
+  if (!newClass)
+    return value;
+  return value ? `${value} ${newClass}` : newClass;
+};
+
+// src/utils/wrapper.ts
+var import_react = require("react");
+function wrapper(tag, props, children) {
+  return tag ? (0, import_react.createElement)(tag, props, children) : children;
+}
+
 // src/components/condition/Case.ts
 function Case(props) {
-  return props.children;
+  const { cond, children, tag, ...attrs } = props;
+  return wrapper(tag, attrs, children);
 }
 
 // src/components/condition/Default.ts
 function Default(props) {
-  return props.children;
-}
-
-// src/components/condition/Else.ts
-function Else(props) {
-  return props.children;
+  const { children, tag, ...attrs } = props;
+  return wrapper(tag, attrs, children);
 }
 
 // src/components/condition/If.ts
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/components/condition/Then.ts
 function Then(props) {
-  return props.children;
+  const { children, cond, else: _else, then, tag, ...attrs } = props;
+  return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag, attrs, children);
 }
 
 // src/components/condition/If.ts
 function If(props) {
-  const children = props.then || props.children;
-  const elements = import_react.Children.toArray(children);
+  const { then, cond, else: _else, children = props.then, tag, ...attrs } = props;
+  const elements = import_react2.Children.toArray(children);
   const thenChild = elements.find((c) => c.type === Then);
   const elseChild = elements.find((c) => c.type === Else);
-  return thenChild || elseChild ? props.cond ? thenChild : elseChild : props.cond ? children : props.else;
+  const child = thenChild || elseChild ? cond ? thenChild : elseChild : cond ? children : _else;
+  return wrapper(tag, attrs, child);
+}
+
+// src/components/condition/Else.ts
+function Else(props) {
+  const { children, tag, ...attrs } = props;
+  return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag, attrs, children);
 }
 
 // src/components/condition/Switch.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function Switch(props) {
   const isUseValue = props.value !== void 0;
   let matchingCase;
   let defaultCase;
-  import_react2.Children.forEach(props.children, (child) => {
-    if (!(0, import_react2.isValidElement)(child) || matchingCase)
+  import_react3.Children.forEach(props.children, (child) => {
+    if (!(0, import_react3.isValidElement)(child) || matchingCase)
       return;
     if (child.type === Case) {
       const cond = child.props.cond;
@@ -133,24 +178,25 @@ function Switch(props) {
 }
 
 // src/components/condition/Unless.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function Unless(props) {
-  const children = props.then || props.children;
-  const elements = import_react3.Children.toArray(children);
+  const { cond, then, else: _else, tag, children = props.then, ...attrs } = props;
+  const elements = import_react4.Children.toArray(children);
   const thenChild = elements.find((c) => c.type === Then);
   const elseChild = elements.find((c) => c.type === Else);
-  return thenChild || elseChild ? !props.cond ? elseChild : thenChild : !props.cond ? props.children : props.else;
+  const child = thenChild || elseChild ? !cond ? elseChild : thenChild : !cond ? children : _else;
+  return wrapper(tag, attrs, child);
 }
 
 // src/components/utils/Injector.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function Injector(props) {
-  const installs = (0, import_react4.useMemo)(
+  const installs = (0, import_react5.useMemo)(
     () => props.install.map(repack).reverse(),
     [props.install]
   );
   return installs.reduce(
-    (child, { component: Component, props: props2 }) => (0, import_react4.createElement)(Component, props2, child),
+    (child, { component: Component, props: props2 }) => (0, import_react5.createElement)(Component, props2, child),
     props.children
   );
 }
@@ -160,7 +206,7 @@ function repack(c) {
 
 // src/components/utils/Trans.ts
 var import_html_parse_stringify = __toESM(require("html-parse-stringify"), 1);
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_i18next = require("react-i18next");
 function Trans({ i18nKey, ...additionalProps }) {
   const translation = (0, import_react_i18next.useTranslation)().t(i18nKey, additionalProps);
@@ -173,15 +219,15 @@ function renderNodes(tokens, values) {
       return token.content;
     index++;
     const props = { ...token.attrs, key: index };
-    return token.voidElement ? values[token.name] ? (0, import_react5.createElement)("span", { key: index }, values[token.name]) : (0, import_react5.createElement)(token.name, props) : (0, import_react5.createElement)(token.name, props, renderNodes(token.children, {}));
+    return token.voidElement ? values[token.name] ? (0, import_react6.createElement)("span", { key: index }, values[token.name]) : (0, import_react6.createElement)(token.name, props) : (0, import_react6.createElement)(token.name, props, renderNodes(token.children, {}));
   });
 }
 
 // src/hooks/useAsyncCallback.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useAsyncCallback(fun) {
-  const [error, setError] = (0, import_react6.useState)();
-  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react7.useState)();
+  const [loading, setLoading] = (0, import_react7.useState)(false);
   async function execute(...args) {
     try {
       setLoading(true);
@@ -199,16 +245,16 @@ function useAsyncCallback(fun) {
 
 // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useAsyncFn.js
 init_tslib_es6();
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMountedState.js
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useMountedState() {
-  var mountedRef = (0, import_react7.useRef)(false);
-  var get = (0, import_react7.useCallback)(function() {
+  var mountedRef = (0, import_react8.useRef)(false);
+  var get = (0, import_react8.useCallback)(function() {
     return mountedRef.current;
   }, []);
-  (0, import_react7.useEffect)(function() {
+  (0, import_react8.useEffect)(function() {
     mountedRef.current = true;
     return function() {
       mountedRef.current = false;
@@ -225,10 +271,10 @@ function useAsyncFn(fn, deps, initialState) {
   if (initialState === void 0) {
     initialState = { loading: false };
   }
-  var lastCallId = (0, import_react8.useRef)(0);
+  var lastCallId = (0, import_react9.useRef)(0);
   var isMounted = useMountedState();
-  var _a = (0, import_react8.useState)(initialState), state = _a[0], set = _a[1];
-  var callback = (0, import_react8.useCallback)(function() {
+  var _a = (0, import_react9.useState)(initialState), state = _a[0], set = _a[1];
+  var callback = (0, import_react9.useCallback)(function() {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
       args[_i] = arguments[_i];
@@ -251,9 +297,9 @@ function useAsyncFn(fn, deps, initialState) {
 }
 
 // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useEffectOnce = function(effect) {
-  (0, import_react9.useEffect)(effect, []);
+  (0, import_react10.useEffect)(effect, []);
 };
 var useEffectOnce_default = useEffectOnce;
 
@@ -273,10 +319,10 @@ function useAsyncState(fn, deps, options) {
 }
 
 // src/hooks/useDebounce.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react10.useState)(value);
-  (0, import_react10.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react11.useState)(value);
+  (0, import_react11.useEffect)(() => {
     const handler = setTimeout(() => setDebouncedValue(value), delay);
     return () => clearTimeout(handler);
   }, [value, delay]);
@@ -285,14 +331,14 @@ function useDebounce(value, delay) {
 
 // src/hooks/useEventBus.ts
 var import_mitt = __toESM(require("mitt"), 1);
-var import_react11 = require("react");
+var import_react12 = require("react");
 var emitter = (0, import_mitt.default)();
 function useEventBus(key) {
-  const onRef = (0, import_react11.useRef)();
+  const onRef = (0, import_react12.useRef)();
   function on(listener) {
     emitter.on(key, listener);
     onRef.current = listener;
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (!onRef.current)
         return;
       emitter.off(key, onRef.current);
@@ -338,23 +384,23 @@ function fetchRequestIntercept(intercept) {
 }
 
 // src/hooks/useMounted.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useMounted() {
-  const [mounted, setMounted] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => setMounted(true), []);
+  const [mounted, setMounted] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => setMounted(true), []);
   return mounted;
 }
 
 // src/hooks/useWatch.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useWatch(source, callback, options = {}) {
-  const firstUpdate = (0, import_react13.useRef)(false);
-  const then = (0, import_react13.useRef)();
-  const deps = (0, import_react13.useMemo)(
+  const firstUpdate = (0, import_react14.useRef)(false);
+  const then = (0, import_react14.useRef)();
+  const deps = (0, import_react14.useMemo)(
     () => Array.isArray(source) ? source : [source],
     [source]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!firstUpdate.current)
       recordFirst();
     else
@@ -484,39 +530,6 @@ function defineAsyncStorePlain(fn, options = {}) {
     persistant: options.persistant
   });
 }
-
-// src/utils/index.ts
-var hasOwn = {}.hasOwnProperty;
-function cls(...args) {
-  let classes = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (arg)
-      classes = cls.append(classes, cls.parse(arg));
-  }
-  return classes;
-}
-cls.parse = function(arg) {
-  if (typeof arg === "string")
-    return arg;
-  if (typeof arg !== "object")
-    return "";
-  if (Array.isArray(arg))
-    return cls.apply(null, arg);
-  if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]"))
-    return cls.toString();
-  let classes = "";
-  for (const key in arg) {
-    if (hasOwn.call(arg, key) && arg[key])
-      classes = cls.append(classes, key);
-  }
-  return classes;
-};
-cls.append = function(value, newClass) {
-  if (!newClass)
-    return value;
-  return value ? `${value} ${newClass}` : newClass;
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Case,
@@ -542,5 +555,6 @@ cls.append = function(value, newClass) {
   useMounted,
   useStore,
   useWatch,
-  useWhenever
+  useWhenever,
+  wrapper
 });

package/dist/index.d.ts

@@ -1,41 +1,67 @@
 import { BooleanLike } from '@hairy/utils';
 import * as react from 'react';
-import { ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, DependencyList, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { JSX, ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, DependencyList, DetailedHTMLProps, HTMLAttributes } from 'react';
 import { FunctionReturningPromise as FunctionReturningPromise$1, PromiseType as PromiseType$1 } from './misc/types';
 import * as valtio from 'valtio';
 
-interface CaseProps {
-    cond?: BooleanLike;
-    children?: ReactNode;
+type Value = string | boolean | undefined | null;
+type Mapping = Record<string, any>;
+interface ArgumentArray extends Array<Argument> {
+}
+interface ReadonlyArgumentArray extends ReadonlyArray<Argument> {
+}
+type Argument = Value | Mapping | ArgumentArray | ReadonlyArgumentArray;
+/**
+ * A simple JavaScript utility for conditionally joining classNames together.
+ */
+declare function cls(...args: ArgumentArray): string;
+declare namespace cls {
+    var parse: (arg: any) => string;
+    var append: (value: any, newClass: any) => any;
 }
-declare function Case(props: CaseProps): ReactNode;
 
-declare function Default(props: PropsWithChildren): react.ReactNode;
+type WrapperProps<K extends keyof JSX.IntrinsicElements | unknown, P = unknown> = {
+    tag?: K | React.FC<P>;
+} & (K extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[K] : unknown) & P;
+declare function wrapper(tag: any, props: unknown, children?: React.ReactNode): react.ReactNode;
 
-declare function Else(props: PropsWithChildren): react.ReactNode;
+type CaseProps<K, P> = WrapperProps<K, P> & {
+    cond?: BooleanLike;
+    children?: ReactNode;
+};
+declare function Case<K, P>(props: CaseProps<K, P>): ReactNode;
+
+type DefaultProps<K, P> = WrapperProps<K, P> & {
+    children?: ReactNode;
+};
+declare function Default<K, P>(props: DefaultProps<K, P>): ReactNode;
 
-interface IfProps {
+type IfProps<K, P> = WrapperProps<K, P> & {
     cond?: BooleanLike;
     then?: ReactNode;
     else?: ReactNode;
     children?: ReactNode;
-}
-declare function If(props: IfProps): ReactNode;
+};
+declare function If<K, P>(props: IfProps<K, P>): ReactNode;
+
+type ElseProps<K, P> = IfProps<K, P>;
+declare function Else<K, P>(props: ElseProps<K, P>): react.ReactNode;
 
 interface SwitchProps extends PropsWithChildren {
     value?: BooleanLike;
 }
 declare function Switch(props: SwitchProps): ReactElement<any, string | react.JSXElementConstructor<any>> | null;
 
-declare function Then(props: PropsWithChildren): react.ReactNode;
+type ThenProps<K, P> = IfProps<K, P>;
+declare function Then<K, P>(props: ThenProps<K, P>): react.ReactNode;
 
-interface UnlessProps {
+type UnlessProps<K, P> = WrapperProps<K, P> & {
     cond?: BooleanLike;
     then?: ReactNode;
     else?: ReactNode;
     children?: ReactNode;
-}
-declare function Unless(props: UnlessProps): ReactNode;
+};
+declare function Unless<K, P>(props: UnlessProps<K, P>): ReactNode;
 
 interface InjectComponent<P> {
     component: FC<P> | ComponentClass<P>;
@@ -182,20 +208,4 @@ declare function useStore<S extends object, A extends Actions<S>>(store: Store<S
 
 type PropsWithDetailedHTML<T = HTMLDivElement> = DetailedHTMLProps<HTMLAttributes<T>, T>;
 
-type Value = string | boolean | undefined | null;
-type Mapping = Record<string, any>;
-interface ArgumentArray extends Array<Argument> {
-}
-interface ReadonlyArgumentArray extends ReadonlyArray<Argument> {
-}
-type Argument = Value | Mapping | ArgumentArray | ReadonlyArgumentArray;
-/**
- * A simple JavaScript utility for conditionally joining classNames together.
- */
-declare function cls(...args: ArgumentArray): string;
-declare namespace cls {
-    var parse: (arg: any) => string;
-    var append: (value: any, newClass: any) => any;
-}
-
-export { type Actions, type ActionsOmitThisParameter, type Argument, type ArgumentArray, type AsyncStoreOptions, type AsyncStorePlainOptions, Case, type CaseProps, Default, Else, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type StateFromFunctionReturningPromise, type Store, type StoreDefine, type StoreOptions, Switch, type SwitchProps, Then, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, cls, defineAsyncStore, defineAsyncStorePlain, defineStore, proxyWithPersistant, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStore, useWatch, useWhenever };
+export { type Actions, type ActionsOmitThisParameter, type Argument, type ArgumentArray, type AsyncStoreOptions, type AsyncStorePlainOptions, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type StateFromFunctionReturningPromise, type Store, type StoreDefine, type StoreOptions, Switch, type SwitchProps, Then, type ThenProps, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, type WrapperProps, cls, defineAsyncStore, defineAsyncStorePlain, defineStore, proxyWithPersistant, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStore, useWatch, useWhenever, wrapper };

package/dist/index.global.js

@@ -117,49 +117,94 @@ var LibReact = (() => {
     useMounted: () => useMounted,
     useStore: () => useStore,
     useWatch: () => useWatch,
-    useWhenever: () => useWhenever
+    useWhenever: () => useWhenever,
+    wrapper: () => wrapper
   });
 
+  // src/utils/cls.ts
+  var hasOwn = {}.hasOwnProperty;
+  function cls(...args) {
+    let classes = "";
+    for (let i2 = 0; i2 < args.length; i2++) {
+      const arg = args[i2];
+      if (arg)
+        classes = cls.append(classes, cls.parse(arg));
+    }
+    return classes;
+  }
+  cls.parse = function(arg) {
+    if (typeof arg === "string")
+      return arg;
+    if (typeof arg !== "object")
+      return "";
+    if (Array.isArray(arg))
+      return cls.apply(null, arg);
+    if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]"))
+      return cls.toString();
+    let classes = "";
+    for (const key in arg) {
+      if (hasOwn.call(arg, key) && arg[key])
+        classes = cls.append(classes, key);
+    }
+    return classes;
+  };
+  cls.append = function(value, newClass) {
+    if (!newClass)
+      return value;
+    return value ? `${value} ${newClass}` : newClass;
+  };
+
+  // src/utils/wrapper.ts
+  var import_react = __toESM(require_react(), 1);
+  function wrapper(tag, props, children) {
+    return tag ? (0, import_react.createElement)(tag, props, children) : children;
+  }
+
   // src/components/condition/Case.ts
   function Case(props) {
-    return props.children;
+    const { cond, children, tag, ...attrs } = props;
+    return wrapper(tag, attrs, children);
   }
 
   // src/components/condition/Default.ts
   function Default(props) {
-    return props.children;
-  }
-
-  // src/components/condition/Else.ts
-  function Else(props) {
-    return props.children;
+    const { children, tag, ...attrs } = props;
+    return wrapper(tag, attrs, children);
   }
 
   // src/components/condition/If.ts
-  var import_react = __toESM(require_react(), 1);
+  var import_react2 = __toESM(require_react(), 1);
 
   // src/components/condition/Then.ts
   function Then(props) {
-    return props.children;
+    const { children, cond, else: _else, then, tag, ...attrs } = props;
+    return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag, attrs, children);
   }
 
   // src/components/condition/If.ts
   function If(props) {
-    const children = props.then || props.children;
-    const elements = import_react.Children.toArray(children);
+    const { then, cond, else: _else, children = props.then, tag, ...attrs } = props;
+    const elements = import_react2.Children.toArray(children);
     const thenChild = elements.find((c2) => c2.type === Then);
     const elseChild = elements.find((c2) => c2.type === Else);
-    return thenChild || elseChild ? props.cond ? thenChild : elseChild : props.cond ? children : props.else;
+    const child = thenChild || elseChild ? cond ? thenChild : elseChild : cond ? children : _else;
+    return wrapper(tag, attrs, child);
+  }
+
+  // src/components/condition/Else.ts
+  function Else(props) {
+    const { children, tag, ...attrs } = props;
+    return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag, attrs, children);
   }
 
   // src/components/condition/Switch.ts
-  var import_react2 = __toESM(require_react(), 1);
+  var import_react3 = __toESM(require_react(), 1);
   function Switch(props) {
     const isUseValue = props.value !== void 0;
     let matchingCase;
     let defaultCase;
-    import_react2.Children.forEach(props.children, (child) => {
-      if (!(0, import_react2.isValidElement)(child) || matchingCase)
+    import_react3.Children.forEach(props.children, (child) => {
+      if (!(0, import_react3.isValidElement)(child) || matchingCase)
         return;
       if (child.type === Case) {
         const cond = child.props.cond;
@@ -175,24 +220,25 @@ var LibReact = (() => {
   }
 
   // src/components/condition/Unless.ts
-  var import_react3 = __toESM(require_react(), 1);
+  var import_react4 = __toESM(require_react(), 1);
   function Unless(props) {
-    const children = props.then || props.children;
-    const elements = import_react3.Children.toArray(children);
+    const { cond, then, else: _else, tag, children = props.then, ...attrs } = props;
+    const elements = import_react4.Children.toArray(children);
     const thenChild = elements.find((c2) => c2.type === Then);
     const elseChild = elements.find((c2) => c2.type === Else);
-    return thenChild || elseChild ? !props.cond ? elseChild : thenChild : !props.cond ? props.children : props.else;
+    const child = thenChild || elseChild ? !cond ? elseChild : thenChild : !cond ? children : _else;
+    return wrapper(tag, attrs, child);
   }
 
   // src/components/utils/Injector.ts
-  var import_react4 = __toESM(require_react(), 1);
+  var import_react5 = __toESM(require_react(), 1);
   function Injector(props) {
-    const installs = (0, import_react4.useMemo)(
+    const installs = (0, import_react5.useMemo)(
       () => props.install.map(repack).reverse(),
       [props.install]
     );
     return installs.reduce(
-      (child, { component: Component, props: props2 }) => (0, import_react4.createElement)(Component, props2, child),
+      (child, { component: Component, props: props2 }) => (0, import_react5.createElement)(Component, props2, child),
       props.children
     );
   }
@@ -263,7 +309,7 @@ var LibReact = (() => {
   var html_parse_stringify_module_default = c;
 
   // src/components/utils/Trans.ts
-  var import_react5 = __toESM(require_react(), 1);
+  var import_react6 = __toESM(require_react(), 1);
   var import_react_i18next = __toESM(require_react_i18next(), 1);
   function Trans({ i18nKey, ...additionalProps }) {
     const translation = (0, import_react_i18next.useTranslation)().t(i18nKey, additionalProps);
@@ -276,15 +322,15 @@ var LibReact = (() => {
         return token.content;
       index++;
       const props = { ...token.attrs, key: index };
-      return token.voidElement ? values[token.name] ? (0, import_react5.createElement)("span", { key: index }, values[token.name]) : (0, import_react5.createElement)(token.name, props) : (0, import_react5.createElement)(token.name, props, renderNodes(token.children, {}));
+      return token.voidElement ? values[token.name] ? (0, import_react6.createElement)("span", { key: index }, values[token.name]) : (0, import_react6.createElement)(token.name, props) : (0, import_react6.createElement)(token.name, props, renderNodes(token.children, {}));
     });
   }
 
   // src/hooks/useAsyncCallback.ts
-  var import_react6 = __toESM(require_react(), 1);
+  var import_react7 = __toESM(require_react(), 1);
   function useAsyncCallback(fun) {
-    const [error, setError] = (0, import_react6.useState)();
-    const [loading, setLoading] = (0, import_react6.useState)(false);
+    const [error, setError] = (0, import_react7.useState)();
+    const [loading, setLoading] = (0, import_react7.useState)(false);
     async function execute(...args) {
       try {
         setLoading(true);
@@ -302,16 +348,16 @@ var LibReact = (() => {
 
   // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useAsyncFn.js
   init_tslib_es6();
-  var import_react8 = __toESM(require_react());
+  var import_react9 = __toESM(require_react());
 
   // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMountedState.js
-  var import_react7 = __toESM(require_react());
+  var import_react8 = __toESM(require_react());
   function useMountedState() {
-    var mountedRef = (0, import_react7.useRef)(false);
-    var get = (0, import_react7.useCallback)(function() {
+    var mountedRef = (0, import_react8.useRef)(false);
+    var get = (0, import_react8.useCallback)(function() {
       return mountedRef.current;
     }, []);
-    (0, import_react7.useEffect)(function() {
+    (0, import_react8.useEffect)(function() {
       mountedRef.current = true;
       return function() {
         mountedRef.current = false;
@@ -328,10 +374,10 @@ var LibReact = (() => {
     if (initialState === void 0) {
       initialState = { loading: false };
     }
-    var lastCallId = (0, import_react8.useRef)(0);
+    var lastCallId = (0, import_react9.useRef)(0);
     var isMounted = useMountedState();
-    var _a = (0, import_react8.useState)(initialState), state = _a[0], set = _a[1];
-    var callback = (0, import_react8.useCallback)(function() {
+    var _a = (0, import_react9.useState)(initialState), state = _a[0], set = _a[1];
+    var callback = (0, import_react9.useCallback)(function() {
       var args = [];
       for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
@@ -354,9 +400,9 @@ var LibReact = (() => {
   }
 
   // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
-  var import_react9 = __toESM(require_react());
+  var import_react10 = __toESM(require_react());
   var useEffectOnce = function(effect) {
-    (0, import_react9.useEffect)(effect, []);
+    (0, import_react10.useEffect)(effect, []);
   };
   var useEffectOnce_default = useEffectOnce;
 
@@ -376,10 +422,10 @@ var LibReact = (() => {
   }
 
   // src/hooks/useDebounce.ts
-  var import_react10 = __toESM(require_react(), 1);
+  var import_react11 = __toESM(require_react(), 1);
   function useDebounce(value, delay) {
-    const [debouncedValue, setDebouncedValue] = (0, import_react10.useState)(value);
-    (0, import_react10.useEffect)(() => {
+    const [debouncedValue, setDebouncedValue] = (0, import_react11.useState)(value);
+    (0, import_react11.useEffect)(() => {
       const handler = setTimeout(() => setDebouncedValue(value), delay);
       return () => clearTimeout(handler);
     }, [value, delay]);
@@ -405,14 +451,14 @@ var LibReact = (() => {
   }
 
   // src/hooks/useEventBus.ts
-  var import_react11 = __toESM(require_react(), 1);
+  var import_react12 = __toESM(require_react(), 1);
   var emitter = mitt_default();
   function useEventBus(key) {
-    const onRef = (0, import_react11.useRef)();
+    const onRef = (0, import_react12.useRef)();
     function on(listener) {
       emitter.on(key, listener);
       onRef.current = listener;
-      (0, import_react11.useEffect)(() => {
+      (0, import_react12.useEffect)(() => {
         if (!onRef.current)
           return;
         emitter.off(key, onRef.current);
@@ -458,23 +504,23 @@ var LibReact = (() => {
   }
 
   // src/hooks/useMounted.ts
-  var import_react12 = __toESM(require_react(), 1);
+  var import_react13 = __toESM(require_react(), 1);
   function useMounted() {
-    const [mounted, setMounted] = (0, import_react12.useState)(false);
-    (0, import_react12.useEffect)(() => setMounted(true), []);
+    const [mounted, setMounted] = (0, import_react13.useState)(false);
+    (0, import_react13.useEffect)(() => setMounted(true), []);
     return mounted;
   }
 
   // src/hooks/useWatch.ts
-  var import_react13 = __toESM(require_react(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   function useWatch(source, callback, options = {}) {
-    const firstUpdate = (0, import_react13.useRef)(false);
-    const then = (0, import_react13.useRef)();
-    const deps = (0, import_react13.useMemo)(
+    const firstUpdate = (0, import_react14.useRef)(false);
+    const then = (0, import_react14.useRef)();
+    const deps = (0, import_react14.useMemo)(
       () => Array.isArray(source) ? source : [source],
       [source]
     );
-    (0, import_react13.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (!firstUpdate.current)
         recordFirst();
       else
@@ -932,27 +978,27 @@ var LibReact = (() => {
   }
 
   // ../../node_modules/.pnpm/valtio@2.1.4_@types+react@18.3.18_react@18.3.1/node_modules/valtio/esm/react.mjs
-  var import_react14 = __toESM(require_react(), 1);
+  var import_react15 = __toESM(require_react(), 1);
   var import_meta2 = {};
   var useAffectedDebugValue = (state, affected) => {
-    const pathList = (0, import_react14.useRef)(void 0);
-    (0, import_react14.useEffect)(() => {
+    const pathList = (0, import_react15.useRef)(void 0);
+    (0, import_react15.useEffect)(() => {
       pathList.current = affectedToPathList(state, affected, true);
     });
-    (0, import_react14.useDebugValue)(pathList.current);
+    (0, import_react15.useDebugValue)(pathList.current);
   };
   var condUseAffectedDebugValue = useAffectedDebugValue;
   var targetCache = /* @__PURE__ */ new WeakMap();
   function useSnapshot(proxyObject, options) {
     const notifyInSync = options == null ? void 0 : options.sync;
-    const affected = (0, import_react14.useMemo)(
+    const affected = (0, import_react15.useMemo)(
       () => proxyObject && /* @__PURE__ */ new WeakMap(),
       [proxyObject]
     );
-    const lastSnapshot = (0, import_react14.useRef)(void 0);
+    const lastSnapshot = (0, import_react15.useRef)(void 0);
     let inRender = true;
-    const currSnapshot = (0, import_react14.useSyncExternalStore)(
-      (0, import_react14.useCallback)(
+    const currSnapshot = (0, import_react15.useSyncExternalStore)(
+      (0, import_react15.useCallback)(
         (callback) => {
           const unsub = subscribe(proxyObject, callback, notifyInSync);
           callback();
@@ -978,13 +1024,13 @@ var LibReact = (() => {
       () => snapshot(proxyObject)
     );
     inRender = false;
-    (0, import_react14.useLayoutEffect)(() => {
+    (0, import_react15.useLayoutEffect)(() => {
       lastSnapshot.current = currSnapshot;
     });
     if ((import_meta2.env ? import_meta2.env.MODE : void 0) !== "production") {
       condUseAffectedDebugValue(currSnapshot, affected);
     }
-    const proxyCache2 = (0, import_react14.useMemo)(() => /* @__PURE__ */ new WeakMap(), []);
+    const proxyCache2 = (0, import_react15.useMemo)(() => /* @__PURE__ */ new WeakMap(), []);
     return createProxy(currSnapshot, affected, proxyCache2, targetCache);
   }
 
@@ -1092,38 +1138,5 @@ var LibReact = (() => {
       persistant: options.persistant
     });
   }
-
-  // src/utils/index.ts
-  var hasOwn = {}.hasOwnProperty;
-  function cls(...args) {
-    let classes = "";
-    for (let i2 = 0; i2 < args.length; i2++) {
-      const arg = args[i2];
-      if (arg)
-        classes = cls.append(classes, cls.parse(arg));
-    }
-    return classes;
-  }
-  cls.parse = function(arg) {
-    if (typeof arg === "string")
-      return arg;
-    if (typeof arg !== "object")
-      return "";
-    if (Array.isArray(arg))
-      return cls.apply(null, arg);
-    if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]"))
-      return cls.toString();
-    let classes = "";
-    for (const key in arg) {
-      if (hasOwn.call(arg, key) && arg[key])
-        classes = cls.append(classes, key);
-    }
-    return classes;
-  };
-  cls.append = function(value, newClass) {
-    if (!newClass)
-      return value;
-    return value ? `${value} ${newClass}` : newClass;
-  };
   return __toCommonJS(index_exports);
 })();

package/dist/index.js

@@ -21,19 +21,55 @@ var init_tslib_es6 = __esm({
   }
 });
 
+// src/utils/cls.ts
+var hasOwn = {}.hasOwnProperty;
+function cls(...args) {
+  let classes = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg)
+      classes = cls.append(classes, cls.parse(arg));
+  }
+  return classes;
+}
+cls.parse = function(arg) {
+  if (typeof arg === "string")
+    return arg;
+  if (typeof arg !== "object")
+    return "";
+  if (Array.isArray(arg))
+    return cls.apply(null, arg);
+  if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]"))
+    return cls.toString();
+  let classes = "";
+  for (const key in arg) {
+    if (hasOwn.call(arg, key) && arg[key])
+      classes = cls.append(classes, key);
+  }
+  return classes;
+};
+cls.append = function(value, newClass) {
+  if (!newClass)
+    return value;
+  return value ? `${value} ${newClass}` : newClass;
+};
+
+// src/utils/wrapper.ts
+import { createElement } from "react";
+function wrapper(tag, props, children) {
+  return tag ? createElement(tag, props, children) : children;
+}
+
 // src/components/condition/Case.ts
 function Case(props) {
-  return props.children;
+  const { cond, children, tag, ...attrs } = props;
+  return wrapper(tag, attrs, children);
 }
 
 // src/components/condition/Default.ts
 function Default(props) {
-  return props.children;
-}
-
-// src/components/condition/Else.ts
-function Else(props) {
-  return props.children;
+  const { children, tag, ...attrs } = props;
+  return wrapper(tag, attrs, children);
 }
 
 // src/components/condition/If.ts
@@ -41,16 +77,24 @@ import { Children } from "react";
 
 // src/components/condition/Then.ts
 function Then(props) {
-  return props.children;
+  const { children, cond, else: _else, then, tag, ...attrs } = props;
+  return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag, attrs, children);
 }
 
 // src/components/condition/If.ts
 function If(props) {
-  const children = props.then || props.children;
+  const { then, cond, else: _else, children = props.then, tag, ...attrs } = props;
   const elements = Children.toArray(children);
   const thenChild = elements.find((c) => c.type === Then);
   const elseChild = elements.find((c) => c.type === Else);
-  return thenChild || elseChild ? props.cond ? thenChild : elseChild : props.cond ? children : props.else;
+  const child = thenChild || elseChild ? cond ? thenChild : elseChild : cond ? children : _else;
+  return wrapper(tag, attrs, child);
+}
+
+// src/components/condition/Else.ts
+function Else(props) {
+  const { children, tag, ...attrs } = props;
+  return Object.keys(props).includes("cond") ? wrapper(If, props, children) : wrapper(tag, attrs, children);
 }
 
 // src/components/condition/Switch.ts
@@ -78,22 +122,23 @@ function Switch(props) {
 // src/components/condition/Unless.ts
 import { Children as Children3 } from "react";
 function Unless(props) {
-  const children = props.then || props.children;
+  const { cond, then, else: _else, tag, children = props.then, ...attrs } = props;
   const elements = Children3.toArray(children);
   const thenChild = elements.find((c) => c.type === Then);
   const elseChild = elements.find((c) => c.type === Else);
-  return thenChild || elseChild ? !props.cond ? elseChild : thenChild : !props.cond ? props.children : props.else;
+  const child = thenChild || elseChild ? !cond ? elseChild : thenChild : !cond ? children : _else;
+  return wrapper(tag, attrs, child);
 }
 
 // src/components/utils/Injector.ts
-import { createElement, useMemo } from "react";
+import { createElement as createElement2, useMemo } from "react";
 function Injector(props) {
   const installs = useMemo(
     () => props.install.map(repack).reverse(),
     [props.install]
   );
   return installs.reduce(
-    (child, { component: Component, props: props2 }) => createElement(Component, props2, child),
+    (child, { component: Component, props: props2 }) => createElement2(Component, props2, child),
     props.children
   );
 }
@@ -103,7 +148,7 @@ function repack(c) {
 
 // src/components/utils/Trans.ts
 import HTML from "html-parse-stringify";
-import { createElement as createElement2 } from "react";
+import { createElement as createElement3 } from "react";
 import { useTranslation } from "react-i18next";
 function Trans({ i18nKey, ...additionalProps }) {
   const translation = useTranslation().t(i18nKey, additionalProps);
@@ -116,7 +161,7 @@ function renderNodes(tokens, values) {
       return token.content;
     index++;
     const props = { ...token.attrs, key: index };
-    return token.voidElement ? values[token.name] ? createElement2("span", { key: index }, values[token.name]) : createElement2(token.name, props) : createElement2(token.name, props, renderNodes(token.children, {}));
+    return token.voidElement ? values[token.name] ? createElement3("span", { key: index }, values[token.name]) : createElement3(token.name, props) : createElement3(token.name, props, renderNodes(token.children, {}));
   });
 }
 
@@ -427,39 +472,6 @@ function defineAsyncStorePlain(fn, options = {}) {
     persistant: options.persistant
   });
 }
-
-// src/utils/index.ts
-var hasOwn = {}.hasOwnProperty;
-function cls(...args) {
-  let classes = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (arg)
-      classes = cls.append(classes, cls.parse(arg));
-  }
-  return classes;
-}
-cls.parse = function(arg) {
-  if (typeof arg === "string")
-    return arg;
-  if (typeof arg !== "object")
-    return "";
-  if (Array.isArray(arg))
-    return cls.apply(null, arg);
-  if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]"))
-    return cls.toString();
-  let classes = "";
-  for (const key in arg) {
-    if (hasOwn.call(arg, key) && arg[key])
-      classes = cls.append(classes, key);
-  }
-  return classes;
-};
-cls.append = function(value, newClass) {
-  if (!newClass)
-    return value;
-  return value ? `${value} ${newClass}` : newClass;
-};
 export {
   Case,
   Default,
@@ -484,5 +496,6 @@ export {
   useMounted,
   useStore,
   useWatch,
-  useWhenever
+  useWhenever,
+  wrapper
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib",
   "type": "module",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Library for react",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-use": "^17.6.0",
-    "@hairy/utils": "1.9.0"
+    "@hairy/utils": "1.10.0"
   },
   "scripts": {
     "build": "tsup",