@hsu-react/ui 0.0.1 → 0.0.3

package/lib/components/Checkbox/index.module.less

@@ -2,8 +2,8 @@
   align-items: center;
 
   &.outline {
-    .ant-checkbox {
-      .ant-checkbox-inner {
+    :global(.ant-checkbox) {
+      :global(.ant-checkbox-inner) {
         border-color: rgba(204, 204, 204, 1) !important;
 
         background: transparent !important;
@@ -14,16 +14,16 @@
         }
       }
 
-      &.ant-checkbox-checked {
-        .ant-checkbox-inner {
+      &:global(.ant-checkbox-checked) {
+        :global(.ant-checkbox-inner) {
           background: rgba(255, 255, 255, 1) !important;
         }
       }
     }
 
-    &.ant-checkbox-wrapper-disabled {
-      .ant-checkbox {
-        .ant-checkbox-inner {
+    &:global(.ant-checkbox-wrapper-disabled) {
+      :global(.ant-checkbox) {
+        :global(.ant-checkbox-inner) {
           background: rgba(0, 0, 0, 0.04) !important;
 
           &::after {
@@ -31,8 +31,8 @@
           }
         }
 
-        &.ant-checkbox-checked {
-          .ant-checkbox-inner {
+        &:global(.ant-checkbox-checked) {
+          :global(.ant-checkbox-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
           }
         }
@@ -40,7 +40,7 @@
     }
   }
 
-  .ant-checkbox {
+  :global(.ant-checkbox) {
     width: 16px;
     min-width: 16px;
     height: 16px;
@@ -48,12 +48,12 @@
 
     border-radius: 2px;
 
-    input[type="checkbox"].ant-checkbox-input {
+    input[type="checkbox"]:global(.ant-checkbox-input) {
       width: 100%;
       height: 100%;
     }
 
-    .ant-checkbox-inner {
+    :global(.ant-checkbox-inner) {
       width: 100%;
       height: 100%;
 
@@ -70,7 +70,7 @@
     }
 
     &-indeterminate {
-      .ant-checkbox-inner {
+      :global(.ant-checkbox-inner) {
         &::after {
           left: 50%;
           top: 50%;

package/lib/components/CodeMirror/index.module.less

@@ -7,17 +7,17 @@
 
   overflow: hidden;
 
-  .cm-line {
+  :global(.cm-line) {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   }
 
-  .cm-focused {
+  :global(.cm-focused) {
     outline: none;
   }
 
-  .cm-lintRange-error {
+  :global(.cm-lintRange-error) {
     background-size: auto auto;
   }
 
@@ -28,7 +28,7 @@
       border-color: #ff4d4f;
     }
 
-    .cm-focused {
+    :global(.cm-focused) {
       border-color: #ff4d4f;
       box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
     }

package/lib/components/DatePicker/RangePicker/index.module.less

@@ -25,7 +25,7 @@
   color: inherit;
   text-align: inherit;
 
-  .ant-picker-input {
+  :global(.ant-picker-input) {
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;

package/lib/components/DatePicker/StepPicker/index.module.less

@@ -5,7 +5,7 @@
   column-gap: 5px;
 
   .icon {
-    &.ant-btn-icon-only {
+    &:global(.ant-btn-icon-only) {
       width: 32px;
       height: 32px;
     }

package/lib/components/DatePicker/index.module.less

@@ -5,6 +5,7 @@
 
   width: 100%;
   height: 100%;
+  min-height: 32px;
   max-height: max-content;
 
   border-radius: 6px;
@@ -20,7 +21,7 @@
     min-width: 80px;
   }
 
-  .ant-picker {
+  :global(.ant-picker) {
     height: 100%;
     width: 100%;
 

package/lib/components/Form/DrawerForm/index.module.less

@@ -1,5 +1,5 @@
 .DrawerForm {
-  .ant-drawer-title {
+  :global(.ant-drawer-title) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -43,7 +43,7 @@
       align-items: center;
       column-gap: 10px;
 
-      .ant-btn-icon {
+      :global(.ant-btn-icon) {
         font-size: 16px;
       }
     }

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.js

@@ -20,7 +20,8 @@ const PasswordStrength = props => {
     ...inputConfig
   } = props;
   const [fraction, setFraction] = (0, _react.useState)(0);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _indexModule.default.passwordStrength,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Password, {
       ...inputConfig,
       placeholder: placeholder ?? "请输入",

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.module.less

@@ -1,3 +1,15 @@
+.passwordStrength {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  width: 100%;
+
+  .passwordInput {
+    width: 100%;
+  }
+}
+
 .strengthBar {
   position: relative;
 

package/lib/components/FormItem/FormRadio/index.module.less

@@ -18,7 +18,7 @@
 
   &.rect {
     > label {
-      > span.ant-radio {
+      > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
         height: 24px;
@@ -26,12 +26,12 @@
 
         border-radius: 2px;
 
-        input[type="radio"].ant-radio-input {
+        input[type="radio"]:global(.ant-radio-input) {
           width: 100%;
           height: 100%;
         }
 
-        .ant-radio-inner {
+        :global(.ant-radio-inner) {
           width: 100%;
           height: 100%;
 
@@ -65,8 +65,8 @@
           }
         }
 
-        &.ant-radio-checked {
-          .ant-radio-inner {
+        &:global(.ant-radio-checked) {
+          :global(.ant-radio-inner) {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -77,8 +77,8 @@
           }
         }
 
-        &.ant-radio-disabled {
-          .ant-radio-inner {
+        &:global(.ant-radio-disabled) {
+          :global(.ant-radio-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
@@ -86,8 +86,8 @@
             }
           }
 
-          &.ant-radio-checked {
-            .ant-radio-inner {
+          &:global(.ant-radio-checked) {
+            :global(.ant-radio-inner) {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

package/lib/components/FormItem/FormSegmented/index.module.less

@@ -3,7 +3,7 @@
 
   color: var(--cf-text);
 
-  .ant-segmented-group {
+  :global(.ant-segmented-group) {
     height: 100%;
 
     font-family: inherit;
@@ -17,7 +17,7 @@
       font-weight: inherit;
       color: inherit;
 
-      .ant-segmented-item-label {
+      :global(.ant-segmented-item-label) {
         display: flex;
         align-items: center;
         justify-content: center;

package/lib/components/FormItem/FormUpload/index.module.less

@@ -1,7 +1,7 @@
 .upload {
   height: 100%;
 
-  .ant-upload {
+  :global(.ant-upload) {
     height: max-content;
 
     .upBtn {
@@ -15,7 +15,7 @@
     column-gap: 10px;
   }
 
-  .ant-upload-disabled {
+  :global(.ant-upload-disabled) {
     .singleFile {
       cursor: not-allowed;
 
@@ -97,7 +97,7 @@
     }
   }
 
-  &.ant-upload-drag {
+  &:global(.ant-upload-drag) {
     height: 180px;
 
     border-radius: 8px;
@@ -134,7 +134,7 @@
 }
 
 .FormUpload {
-  .ant-form-item-control-input-content {
+  :global(.ant-form-item-control-input-content) {
     > span {
       width: 100%;
     }

package/lib/components/FormItem/ItemContainer/index.module.less

@@ -19,15 +19,15 @@
     cursor: pointer;
   }
 
-  .ant-picker {
+  :global(.ant-picker) {
     width: 100%;
   }
 
-  .ant-form-item-row {
+  :global(.ant-form-item-row) {
     width: 100%;
     height: 100%;
 
-    .ant-form-item-control {
+    :global(.ant-form-item-control) {
       display: flex;
       flex-direction: column;
       row-gap: 5px;
@@ -35,11 +35,11 @@
       width: var(--input-width) !important;
       max-width: 100%;
 
-      .ant-form-item-control-input {
+      :global(.ant-form-item-control-input) {
         height: var(--input-height);
         min-height: var(--input-min-height);
 
-        .ant-form-item-control-input-content {
+        :global(.ant-form-item-control-input-content) {
           display: flex;
           align-items: center;
 
@@ -54,7 +54,7 @@
     }
   }
 
-  .ant-form-item-label {
+  :global(.ant-form-item-label) {
     flex: 0 1 auto !important;
     display: inline-flex;
     align-items: center;
@@ -156,7 +156,7 @@
         cursor: pointer;
       }
 
-      &.ant-form-item-no-colon {
+      &:global(.ant-form-item-no-colon) {
         .label {
           &::after {
             content: none;
@@ -175,7 +175,7 @@
         content: none !important;
       }
 
-      &.ant-form-item-required {
+      &:global(.ant-form-item-required) {
         .label {
           &::before {
             content: "*";
@@ -212,7 +212,7 @@
   }
 
   &.after {
-    label.ant-form-item-required {
+    label:global(.ant-form-item-required) {
       .label {
         &::before {
           content: none !important;
@@ -241,7 +241,7 @@
     }
 
     &.hasLabelContent {
-      label.ant-form-item-required {
+      label:global(.ant-form-item-required) {
         &::after {
           content: none;
         }
@@ -266,7 +266,7 @@
   }
 
   &.hideRequired {
-    label.ant-form-item-required {
+    label:global(.ant-form-item-required) {
       .label {
         &::before {
           content: none !important;
@@ -281,7 +281,7 @@
     }
 
     &.after {
-      label.ant-form-item-required {
+      label:global(.ant-form-item-required) {
         .label {
           &::after {
             content: none !important;
@@ -292,11 +292,11 @@
   }
 
   &.horizontal {
-    .ant-form-item-row {
+    :global(.ant-form-item-row) {
       flex-wrap: nowrap;
       column-gap: 5px;
 
-      .ant-form-item-control {
+      :global(.ant-form-item-control) {
         flex: 1 !important;
         flex-grow: var(--input-horizontal-flex-grow) !important;
 
@@ -305,13 +305,13 @@
     }
 
     &.start {
-      .ant-form-item-control-input-content {
+      :global(.ant-form-item-control-input-content) {
         text-align: left;
       }
     }
 
     &.between {
-      .ant-form-item-control-input-content {
+      :global(.ant-form-item-control-input-content) {
         text-align: right;
       }
     }
@@ -320,13 +320,13 @@
   &.vertical {
     --label-height: max-content;
 
-    .ant-form-item-row {
+    :global(.ant-form-item-row) {
       flex-direction: column;
       row-gap: 5px;
 
       height: max-content;
 
-      .ant-form-item-label {
+      :global(.ant-form-item-label) {
         text-align: start;
 
         width: 100%;
@@ -353,7 +353,7 @@
         }
       }
 
-      .ant-form-item-control {
+      :global(.ant-form-item-control) {
         flex: 0 1 auto !important;
         display: flex;
         flex-direction: column;
@@ -364,8 +364,8 @@
   }
 
   &.legacyHasLabelExtra {
-    .ant-form-item-row {
-      .ant-form-item-label {
+    :global(.ant-form-item-row) {
+      :global(.ant-form-item-label) {
         label {
           flex-direction: column;
           flex-wrap: nowrap;
@@ -380,7 +380,7 @@
   }
 
   &.hideAdditiona {
-    .ant-form-item-additional {
+    :global(.ant-form-item-additional) {
       display: none;
     }
   }

package/lib/components/Icon/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@iconify/react");
-var _icons = _interopRequireWildcard(require("@ant-design/icons"));
-var AntdIcons = _icons;
+var AntdIcons = _interopRequireWildcard(require("@ant-design/icons"));
 var _react2 = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.less"));
@@ -51,37 +50,20 @@ const Icon = props => {
       ref: ref
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default, {
+
+  // iconify 图标：直接用 span 承载 Iconify 自带的 svg，避免把它嵌套进 antd Icon
+  // 的 svg（其 viewBox 会把内层 svg 缩放成极小值导致图标不可见）。
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...iconConfig,
-    // 与 antd 缺省值一致；显式传入以消除开发态 viewBox 告警（子节点是 Iconify 自带 viewBox 的 svg）
-    viewBox: "0 0 1024 1024",
-    className: (0, _classnames.default)([_indexModule.default.icon, className]),
-    style: mergedStyle,
+    role: "img",
     ref: ref,
+    className: (0, _classnames.default)(["anticon", _indexModule.default.icon, className]),
+    style: mergedStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
       ...iconProps,
       icon: icon,
       width: "1em",
-      height: "1em",
-      onLoad: () => {
-        setTimeout(() => {
-          if (ref.current) {
-            const svg = ref.current.childNodes[0];
-            const svg_i = svg.childNodes[0];
-            const {
-              height
-            } = svg.getBoundingClientRect();
-            const {
-              height: height_i
-            } = svg_i.getBoundingClientRect();
-            const viewBox_i = svg_i.getAttribute("viewBox");
-            const viewBox_i_height = viewBox_i?.split(" ")[3];
-            if (Number(viewBox_i_height) <= 24) return;
-            const y_i = Number(viewBox_i_height) - (Number(height) - Number(height_i));
-            svg_i.setAttribute("viewBox", `0 0 ${viewBox_i?.split(" ")[2]} ${y_i.toFixed(0)}`);
-          }
-        }, 1);
-      }
+      height: "1em"
     })
   });
 };

package/lib/components/Input/Number/index.module.less

@@ -10,22 +10,22 @@
     width: 100%;
     height: 100%;
 
-    .ant-input-number-wrapper {
+    :global(.ant-input-number-wrapper) {
       height: 100%;
       min-height: inherit;
 
-      > .ant-input-number,
-      > .ant-input-number-affix-wrapper {
+      > :global(.ant-input-number),
+      > :global(.ant-input-number-affix-wrapper) {
         height: 100%;
         min-height: inherit;
       }
 
-      > .ant-input-number {
-        > .ant-input-number-input-wrap {
+      > :global(.ant-input-number) {
+        > :global(.ant-input-number-input-wrap) {
           height: 100%;
           min-height: inherit;
 
-          > .ant-input-number-input {
+          > :global(.ant-input-number-input) {
             height: 100%;
             min-height: inherit;
           }
@@ -33,11 +33,11 @@
       }
     }
 
-    > .ant-input-number-input-wrap {
+    > :global(.ant-input-number-input-wrap) {
       height: 100%;
       min-height: inherit;
 
-      > .ant-input-number-input {
+      > :global(.ant-input-number-input) {
         height: 100%;
       }
     }
@@ -66,7 +66,7 @@
   }
 
   // 当存在 addonAfter 时，调整清除图标位置
-  // Ant Design 的 addonAfter 会生成 .ant-input-number-group-addon
+  // Ant Design 的 addonAfter 会生成 :global(.ant-input-number-group-addon)
   // 清除图标需要向左偏移，避免与 addon 重叠
   // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
   // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖

package/lib/components/Input/Password/index.module.less

@@ -2,12 +2,12 @@
   width: 100%;
   height: 100%;
 
-  .ant-input-wrapper {
+  :global(.ant-input-wrapper) {
     height: 100%;
     min-height: inherit;
 
-    > .ant-input,
-    > .ant-input-affix-wrapper {
+    > :global(.ant-input),
+    > :global(.ant-input-affix-wrapper) {
       height: 100%;
       min-height: inherit;
     }

package/lib/components/Input/Range/index.module.less

@@ -31,14 +31,14 @@
     .RangeInput {
       display: flex;
       align-items: center;
+      column-gap: 5px;
 
       width: 100%;
       height: 100%;
 
-      border-radius: 6px;
-      border: 1px solid var(--cf-border);
-
-      transition: border-color 0.3s, box-shadow 0.3s;
+      transition:
+        border-color 0.3s,
+        box-shadow 0.3s;
 
       [class*="antdInput-"] {
         border: none !important;

package/lib/components/Input/Search/index.module.less

@@ -2,18 +2,18 @@
   width: 100%;
   height: 100%;
 
-  .ant-input-wrapper {
+  :global(.ant-input-wrapper) {
     height: 100%;
     min-height: inherit;
 
-    > .ant-input,
-    > .ant-input-affix-wrapper {
+    > :global(.ant-input),
+    > :global(.ant-input-affix-wrapper) {
       height: 100%;
       min-height: inherit;
     }
 
-    > .ant-input-group-addon {
-      > .ant-btn {
+    > :global(.ant-input-group-addon) {
+      > :global(.ant-btn) {
         height: 100%;
         min-height: inherit;
       }

package/lib/components/Input/TextArea/index.module.less

@@ -61,7 +61,7 @@
 
     background-color: transparent !important;
 
-    &.ant-input-textarea-affix-wrapper {
+    &:global(.ant-input-textarea-affix-wrapper) {
       position: relative;
 
       padding: 0px;
@@ -76,13 +76,13 @@
         font-family: inherit;
       }
 
-      .ant-input-suffix {
+      :global(.ant-input-suffix) {
         position: absolute;
         top: 50%;
         right: 10px;
         transform: translateY(-50%);
 
-        .ant-input-data-count {
+        :global(.ant-input-data-count) {
           position: relative;
           bottom: auto;
 
@@ -90,7 +90,7 @@
           font-size: 14px;
         }
 
-        .ant-input-clear-icon {
+        :global(.ant-input-clear-icon) {
           position: relative;
 
           inset-inline-end: 0;
@@ -121,7 +121,7 @@
 
     box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
 
-    .ant-input-status-error {
+    :global(.ant-input-status-error) {
       border: none !important;
 
       box-shadow: none !important;