@lobehub/ui 1.171.0 → 2.0.0

package/es/Image/style.d.ts

@@ -1,12 +1,18 @@
 export declare const useStyles: (props?: {
     alwaysShowActions?: boolean | undefined;
-    borderless?: boolean | undefined;
-    minSize?: string | number | undefined;
+    maxHeight?: string | number | undefined;
+    maxWidth?: string | number | undefined;
+    minHeight?: string | number | undefined;
+    minWidth?: string | number | undefined;
     objectFit?: string | undefined;
-    size?: string | number | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
     actions: string;
+    borderless: string;
+    filled: string;
     image: import("antd-style").SerializedStyles;
-    imageWrapper: string;
+    mask: string;
+    outlined: string;
+    preview: import("antd-style").SerializedStyles;
+    root: import("antd-style").SerializedStyles;
     toolbar: string;
 }>;

package/es/Image/style.js

@@ -3,23 +3,32 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
+  var cx = _ref.cx,
+    css = _ref.css,
     token = _ref.token,
-    cx = _ref.cx,
-    stylish = _ref.stylish;
+    stylish = _ref.stylish,
+    prefixCls = _ref.prefixCls;
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    minSize = _ref2.minSize,
-    size = _ref2.size,
+    maxHeight = _ref2.maxHeight,
+    maxWidth = _ref2.maxWidth,
+    minWidth = _ref2.minWidth,
+    minHeight = _ref2.minHeight,
     alwaysShowActions = _ref2.alwaysShowActions,
-    objectFit = _ref2.objectFit,
-    borderless = _ref2.borderless;
-  var SIZE = typeof size === 'number' ? "".concat(size, "px") : size;
-  var MIN_SIZE = typeof minSize === 'number' ? "".concat(minSize, "px") : minSize;
+    objectFit = _ref2.objectFit;
+  var MAX_HEIGHT = typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight;
+  var MAX_WIDTH = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
+  var MIN_HEIGHT = typeof minHeight === 'number' ? "".concat(minHeight, "px") : minHeight;
+  var MIN_WIDTH = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
   var actions = cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: ", ";\n    "])), alwaysShowActions ? 1 : 0));
   return {
     actions: actions,
-    image: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100% !important;\n        height: auto !important;\n\n        img {\n          width: 100% !important;\n          min-width: ", " !important;\n          max-width: ", " !important;\n          height: auto !important;\n          min-height: ", " !important;\n          max-height: ", " !important;\n\n          object-fit: ", ";\n        }\n      "])), MIN_SIZE, SIZE, MIN_SIZE, SIZE, objectFit || 'cover'),
-    imageWrapper: cx(borderless ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              box-shadow: inset 0 0 0 1px ", ";\n            "])), token.colorBorderSecondary) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              box-shadow: 0 0 0 1px ", ";\n            "])), token.colorBorderSecondary), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          overflow: hidden;\n\n          min-width: ", ";\n          max-width: ", ";\n          min-height: ", ";\n          max-height: ", ";\n          margin-block: 0 1em;\n\n          background: ", ";\n          border-radius: ", "px;\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n          }\n        "])), MIN_SIZE, SIZE, MIN_SIZE, SIZE, token.colorFillTertiary, token.borderRadiusLG, actions)),
-    toolbar: cx(stylish.blur, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding: 4px;\n          background: ", ";\n          border-radius: ", "px;\n        "])), rgba(token.colorBgMask, 0.1), token.borderRadiusLG))
+    borderless: stylish.variantBorderlessWithoutHover,
+    filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
+    image: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n        height: auto;\n\n        .", "-image-img {\n          width: 100%;\n          min-width: ", ";\n          max-width: ", ";\n          height: auto;\n          min-height: ", ";\n          max-height: ", ";\n\n          object-fit: ", ";\n        }\n      "])), prefixCls, MIN_WIDTH, MAX_WIDTH, MIN_HEIGHT, MAX_HEIGHT, objectFit || 'cover'),
+    mask: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          backdrop-filter: blur(8px);\n        "])))),
+    outlined: stylish.variantOutlinedWithoutHover,
+    preview: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        img {\n          width: 100%;\n        }\n      "]))),
+    root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        cursor: pointer;\n        user-select: none;\n\n        position: relative;\n\n        overflow: hidden;\n\n        border-radius: ", "px;\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n        }\n      "])), token.borderRadius, actions),
+    toolbar: cx(stylish.blur, stylish.variantOutlinedWithoutHover, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding: 4px;\n          background: ", ";\n          border-radius: ", "px;\n        "])), rgba(token.colorBgMask, 0.5), token.borderRadiusLG))
   };
 });

package/es/Image/type.d.ts

@@ -0,0 +1,38 @@
+import type { ImageProps as AntdImageProps } from 'antd';
+import type { ImagePreviewType } from 'rc-image';
+import type { GroupConsumerProps as AntdPreviewGroupProps, PreviewGroupPreview } from 'rc-image/lib/PreviewGroup';
+import type { CSSProperties, ReactNode, Ref } from 'react';
+export interface PreviewGroupPreviewOptions extends PreviewGroupPreview {
+    toolbarAddon?: ReactNode;
+}
+export interface PreviewGroupProps extends AntdPreviewGroupProps {
+    enable?: boolean;
+    items?: string[];
+    preview?: PreviewGroupPreviewOptions;
+}
+export interface ImagePreviewOptions extends ImagePreviewType {
+    toolbarAddon?: ReactNode;
+}
+export interface ImageProps extends Omit<AntdImageProps, 'preview'> {
+    actions?: ReactNode;
+    alwaysShowActions?: boolean;
+    classNames?: {
+        image?: string;
+        wrapper?: string;
+    };
+    isLoading?: boolean;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    objectFit?: 'cover' | 'contain';
+    preview?: boolean | ImagePreviewOptions;
+    ref?: Ref<HTMLDivElement>;
+    size?: number | string;
+    styles?: {
+        image?: CSSProperties;
+        wrapper?: CSSProperties;
+    };
+    toolbarAddon?: ReactNode;
+    variant?: 'borderless' | 'filled' | 'outlined';
+}

package/es/Image/type.js

@@ -0,0 +1 @@
+export {};

package/es/ImageSelect/ImageSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ImageSelectProps } from './type';
+declare const ImageSelect: import("react").NamedExoticComponent<ImageSelectProps>;
+export default ImageSelect;

package/es/{SelectWithImg/index.js → ImageSelect/ImageSelect.js}

@@ -1,6 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["ref", "className", "style", "value", "defaultValue", "onChange", "options", "width", "height", "styles", "classNames", "unoptimized"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -12,6 +13,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
@@ -20,8 +23,9 @@ import Img from "../Img";
 import { useStyles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
+var ImageSelect = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    className = _ref.className,
     style = _ref.style,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
@@ -31,11 +35,10 @@ var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
     width = _ref$width === void 0 ? 144 : _ref$width,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 86 : _ref$height,
-    _ref$styles = _ref.styles,
-    outStyles = _ref$styles === void 0 ? {} : _ref$styles,
-    _ref$classNames = _ref.classNames,
-    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-    unoptimized = _ref.unoptimized;
+    customStyles = _ref.styles,
+    classNames = _ref.classNames,
+    unoptimized = _ref.unoptimized,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControlledState = useControlledState(defaultValue, {
       defaultValue: defaultValue,
       onChange: onChange,
@@ -47,11 +50,13 @@ var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx(Flexbox, {
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: className,
     gap: 16,
     horizontal: true,
-    style: style,
+    ref: ref,
+    style: style
+  }, rest), {}, {
     children: options === null || options === void 0 ? void 0 : options.map(function (item) {
       var isActive = item.value === currentValue;
       return /*#__PURE__*/_jsxs(Flexbox, {
@@ -61,22 +66,17 @@ var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
         onClick: function onClick() {
           return setCurrentValue(item.value);
         },
-        children: [/*#__PURE__*/_jsx("div", {
-          className: cx(styles.imgCtn, isActive && styles.imgActive, classNames.img),
-          style: _objectSpread(_objectSpread({}, outStyles.img), {}, {
+        children: [/*#__PURE__*/_jsx(Img, {
+          alt: item.alt || item.value,
+          className: cx(styles.img, isActive && styles.imgActive, classNames === null || classNames === void 0 ? void 0 : classNames.img),
+          height: height,
+          src: item.img,
+          style: _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.img), {}, {
             height: height,
             width: width
           }),
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles.img,
-            children: /*#__PURE__*/_jsx(Img, {
-              alt: typeof item.label === 'string' ? item.label : item.ariaLabel,
-              height: height,
-              src: item.img,
-              unoptimized: unoptimized,
-              width: width
-            })
-          })
+          unoptimized: unoptimized,
+          width: width
         }), /*#__PURE__*/_jsxs(Flexbox, {
           align: 'center',
           gap: 4,
@@ -87,6 +87,7 @@ var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
         })]
       }, item.value);
     })
-  });
+  }));
 });
-export default SelectWithImg;
+ImageSelect.displayName = 'ImageSelect';
+export default ImageSelect;

package/es/ImageSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImageSelect';
+export * from './type';

package/es/ImageSelect/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ImageSelect";
+export * from "./type";

package/es/{SelectWithImg → ImageSelect}/styles.d.ts

@@ -2,6 +2,5 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     active: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
     img: string;
-    imgActive: import("antd-style").SerializedStyles;
-    imgCtn: import("antd-style").SerializedStyles;
+    imgActive: string;
 }>;

package/es/ImageSelect/styles.js

@@ -0,0 +1,15 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var cx = _ref.cx,
+    stylish = _ref.stylish,
+    css = _ref.css,
+    token = _ref.token;
+  return {
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorText),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n    "])), token.colorTextDescription),
+    img: cx(stylish.variantFilled, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        border-radius: ", "px;\n\n        &:hover {\n          box-shadow: 0 0 0 2px ", ";\n        }\n      "])), token.borderRadius, token.colorText)),
+    imgActive: cx(stylish.active, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        box-shadow: 0 0 0 2px ", ";\n      "])), token.colorTextTertiary))
+  };
+});

package/es/{SelectWithImg/index.d.ts → ImageSelect/type.d.ts}

@@ -1,14 +1,15 @@
-import { SelectProps } from 'antd';
-import { type CSSProperties, ReactNode } from 'react';
-import { IconProps } from "../Icon";
-export interface SelectWithImgOptionItem {
-    ariaLabel?: string;
+import type { SelectProps } from 'antd';
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import type { FlexboxProps } from 'react-layout-kit';
+import type { IconProps } from "../Icon";
+export interface ImageSelectItem {
+    alt?: string;
     icon?: IconProps['icon'];
     img: string;
     label: ReactNode;
     value: string;
 }
-export interface SelectWithImgProps {
+export interface ImageSelectProps extends FlexboxProps {
     className?: string;
     classNames?: {
         img?: string;
@@ -16,7 +17,8 @@ export interface SelectWithImgProps {
     defaultValue?: SelectProps['defaultValue'];
     height?: number;
     onChange?: (value: this['value']) => void;
-    options?: SelectWithImgOptionItem[];
+    options?: ImageSelectItem[];
+    ref?: Ref<HTMLDivElement>;
     style?: CSSProperties;
     styles?: {
         img?: CSSProperties;
@@ -25,5 +27,3 @@ export interface SelectWithImgProps {
     value?: SelectProps['value'];
     width?: number;
 }
-declare const SelectWithImg: import("react").NamedExoticComponent<SelectWithImgProps>;
-export default SelectWithImg;

package/es/ImageSelect/type.js

@@ -0,0 +1 @@
+export {};

package/es/Img/index.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
-import { ImageProps } from 'antd';
-import { ImgProps } from "../types";
-declare const Img: import("react").ForwardRefExoticComponent<ImgProps & ImageProps & {
+import type { ImageProps } from 'antd';
+import { Ref } from 'react';
+import type { ImgProps } from "../types";
+declare const Img: import("react").NamedExoticComponent<ImgProps & ImageProps & {
+    ref?: Ref<HTMLImageElement> | undefined;
     unoptimized?: boolean | undefined;
-} & import("react").RefAttributes<any>>;
+}>;
 export default Img;

package/es/Img/index.js

@@ -1,35 +1,33 @@
 'use client';
 
-var _excluded = ["unoptimized"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["unoptimized"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { createElement, forwardRef, useContext, useMemo } from 'react';
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { createElement, memo, use, useMemo } from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 var createContainer = function createContainer(as) {
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
-      ref: ref
-    }));
+  return /*#__PURE__*/memo(function (props) {
+    return /*#__PURE__*/createElement(as, props);
   });
 };
-var Img = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Img = /*#__PURE__*/memo(function (_ref) {
   var unoptimized = _ref.unoptimized,
-    res = _objectWithoutProperties(_ref, _excluded);
-  var config = useContext(ConfigContext);
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var config = use(ConfigContext);
   var render = (config === null || config === void 0 ? void 0 : config.imgAs) || 'img';
   var ImgContainer = useMemo(function () {
     return createContainer(render);
   }, [render]);
   return /*#__PURE__*/_jsx(ImgContainer, _objectSpread({
-    ref: ref,
     unoptimized: unoptimized === undefined ? config === null || config === void 0 ? void 0 : config.imgUnoptimized : unoptimized
-  }, res));
+  }, rest));
 });
+Img.displayName = 'Img';
 export default Img;

package/es/Input/Input.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputProps } from './type';
+declare const Input: import("react").NamedExoticComponent<InputProps>;
+export default Input;

package/es/Input/Input.js

@@ -0,0 +1,58 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["ref", "variant", "shadow", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Input as AntInput } from 'antd';
+import { cva } from 'class-variance-authority';
+import { memo, useMemo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Input = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    variant = _ref.variant,
+    shadow = _ref.shadow,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        shadow: false
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: styles.filled,
+          outlined: styles.outlined,
+          borderless: styles.borderless,
+          underlined: null
+        },
+        shadow: {
+          false: null,
+          true: styles.shadow
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
+  return /*#__PURE__*/_jsx(AntInput, _objectSpread({
+    className: cx(variants({
+      shadow: shadow,
+      variant: variant || (theme.isDarkMode ? 'filled' : 'outlined')
+    }), className),
+    ref: ref,
+    variant: variant || (theme.isDarkMode ? 'filled' : 'outlined')
+  }, rest));
+});
+Input.displayName = 'Input';
+export default Input;

package/es/Input/InputNumber.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputNumberProps } from './type';
+declare const InputNumber: import("react").NamedExoticComponent<InputNumberProps>;
+export default InputNumber;

package/es/Input/InputNumber.js

@@ -0,0 +1,58 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["ref", "variant", "shadow", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { InputNumber as AntInputNumber } from 'antd';
+import { cva } from 'class-variance-authority';
+import { memo, useMemo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var InputNumber = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    variant = _ref.variant,
+    shadow = _ref.shadow,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        shadow: false
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: styles.filled,
+          outlined: styles.outlined,
+          borderless: styles.borderless,
+          underlined: null
+        },
+        shadow: {
+          false: null,
+          true: styles.shadow
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
+  return /*#__PURE__*/_jsx(AntInputNumber, _objectSpread({
+    className: cx(variants({
+      shadow: shadow,
+      variant: variant || (theme.isDarkMode ? 'filled' : 'outlined')
+    }), className),
+    ref: ref,
+    variant: variant || (theme.isDarkMode ? 'filled' : 'outlined')
+  }, rest));
+});
+InputNumber.displayName = 'InputNumber';
+export default InputNumber;

package/es/Input/InputOPT.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputOPTProps } from './type';
+declare const InputOPT: import("react").NamedExoticComponent<InputOPTProps>;
+export default InputOPT;

package/es/Input/InputOPT.js

@@ -0,0 +1,58 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["ref", "variant", "shadow", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Input as AntInput } from 'antd';
+import { cva } from 'class-variance-authority';
+import { memo, useMemo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var InputOPT = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    variant = _ref.variant,
+    shadow = _ref.shadow,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var variants = useMemo(function () {
+    return cva(styles.rootOPT, {
+      defaultVariants: {
+        shadow: false
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: styles.filledOPT,
+          outlined: styles.outlinedOPT,
+          borderless: styles.borderlessOPT,
+          underlined: null
+        },
+        shadow: {
+          false: null,
+          true: styles.shadowOPT
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
+  return /*#__PURE__*/_jsx(AntInput.OTP, _objectSpread({
+    className: cx(variants({
+      shadow: shadow,
+      variant: variant || (theme.isDarkMode ? 'filled' : 'outlined')
+    }), className),
+    ref: ref,
+    variant: variant || (theme.isDarkMode ? 'filled' : 'outlined')
+  }, rest));
+});
+InputOPT.displayName = 'InputOPT';
+export default InputOPT;

package/es/Input/InputPassword.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { InputPasswordProps } from './type';
+declare const InputPassword: import("react").NamedExoticComponent<InputPasswordProps>;
+export default InputPassword;