@mw-kit/mw-ui 1.10.0 → 1.10.2

package/dist/components/Select/styles.d.ts

@@ -1,8 +1,10 @@
 export declare const FloatingWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type TriggerProps = {
     $empty: boolean;
-    $open: boolean;
+    $rotate: boolean;
     $viewMode: boolean | undefined;
+    $borderless: boolean | undefined;
+    $paddingless: boolean | undefined;
 };
 export declare const Trigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TriggerProps>> & string;
 export declare const TriggerValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Select/types.d.ts

@@ -43,6 +43,8 @@ export type CommonSelectProps<Option> = SelectButtonProps & {
     clearable?: boolean;
     readOnly?: boolean;
     viewMode?: boolean;
+    borderless?: boolean;
+    paddingless?: boolean;
     /**
      * The number of items to render above and below the visible area.
      * The default is 2.

package/dist/index.d.mts

@@ -3193,6 +3193,8 @@ type CommonSelectProps<Option> = SelectButtonProps & {
     clearable?: boolean;
     readOnly?: boolean;
     viewMode?: boolean;
+    borderless?: boolean;
+    paddingless?: boolean;
     /**
      * The number of items to render above and below the visible area.
      * The default is 2.

package/dist/index.js

@@ -9568,8 +9568,8 @@ var SVGContainer = import_styled_components7.default.div`
 
   > svg,
   > svg * {
-    stroke: ${({ theme: theme4 }) => `var(--color, ${theme4.colors.grey})`};
-    color: ${({ theme: theme4 }) => `var(--color, ${theme4.colors.grey})`};
+    stroke: ${({ theme: theme4 }) => `var(--icon-color, ${theme4.colors.grey})`};
+    color: ${({ theme: theme4 }) => `var(--icon-color, ${theme4.colors.grey})`};
 
     ${({ $hasStrokeWidth: hasStrokeWidth }) => hasStrokeWidth && import_styled_components7.css`
         stroke-width: var(--stroke-width, unset);
@@ -9587,7 +9587,7 @@ var SVGContainer = import_styled_components7.default.div`
 // src/components/Icon/index.tsx
 var import_jsx_runtime293 = require("react/jsx-runtime");
 var getColor2 = (c) => {
-  if (!c) return c;
+  if (!c) return theme3.colors.grey;
   if (Array.isArray(c)) return theme3.getColor(...c);
   return isKeyOf(theme3.colors, c) ? theme3.colors[c] : c;
 };
@@ -9616,7 +9616,7 @@ var Icon = import_react8.default.forwardRef((props, ref) => {
       $hasHeight: commonProps.height !== void 0,
       $hasStrokeWidth: strokeWidth !== void 0,
       style: {
-        "--color": getColor2(color),
+        "--icon-color": getColor2(color),
         ...getSizes({
           width: DEFAULT_WIDTH,
           ...props
@@ -19987,6 +19987,8 @@ var useMultiSelect = ({
   clearable,
   readOnly,
   viewMode,
+  borderless,
+  paddingless,
   overscan,
   estimateSize,
   height,
@@ -20124,6 +20126,8 @@ var useSingleSelect = ({
   clearable,
   readOnly,
   viewMode,
+  borderless,
+  paddingless,
   overscan,
   estimateSize,
   height,
@@ -20205,17 +20209,30 @@ var Trigger = import_styled_components77.default.button`
   transition-timing-function: linear;
   transition-duration: 0.25s;
 
-  ${({ $viewMode: viewMode }) => viewMode ? import_styled_components77.css`
+  ${({
+  theme: theme4,
+  $viewMode: viewMode,
+  $borderless: borderless,
+  $paddingless: paddingless
+}) => viewMode ? import_styled_components77.css`
           padding: 0;
 
           border: none;
         ` : import_styled_components77.css`
-          min-height: 35px;
-          padding: 0 ${({ theme: theme4 }) => theme4.spacings.s3};
-
-          border-style: solid;
-          border-width: 1px;
-          border-radius: 4px;
+          ${paddingless ? import_styled_components77.css`
+                padding: 0;
+              ` : import_styled_components77.css`
+                min-height: 35px;
+                padding: 0 ${theme4.spacings.s3};
+              `}
+
+          ${borderless ? import_styled_components77.css`
+                border: none;
+              ` : import_styled_components77.css`
+                border-style: solid;
+                border-width: 1px;
+                border-radius: 4px;
+              `}
         `}
 
   outline: none !important;
@@ -20259,11 +20276,11 @@ var Trigger = import_styled_components77.default.button`
     pointer-events: none;
   }
 
-  > i {
+  > div:nth-child(2) > svg {
     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.25s;
-    transform: rotate(${({ $open: open }) => open ? "180deg" : "0deg"});
+    transform: rotate(${({ $rotate: rotate }) => rotate ? "180deg" : "0deg"});
   }
 `;
 var TriggerValue = import_styled_components77.default.div`
@@ -20348,6 +20365,7 @@ var Select2 = import_react80.default.forwardRef(
       }
     };
     const { isEmpty, placeholder, Component: Component5, onClear, buttonProps } = instances_default(props);
+    const clearEnabled = !isEmpty && props.clearable && !props.disabled && !props.readOnly;
     return /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(import_react80.default.Fragment, { children: [
       props.label !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(Label11, { htmlFor: id, $viewMode: viewMode, children: props.label }),
       /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(
@@ -20359,9 +20377,11 @@ var Select2 = import_react80.default.forwardRef(
           "aria-haspopup": "listbox",
           "aria-expanded": open,
           "aria-controls": menuId,
-          $open: open,
+          $rotate: open && !clearEnabled,
           $empty: isEmpty,
           $viewMode: viewMode,
+          $borderless: props.borderless,
+          $paddingless: props.paddingless,
           "aria-readonly": props.readOnly || viewMode,
           "aria-invalid": invalid,
           "aria-required": required && !viewMode,
@@ -20394,7 +20414,7 @@ var Select2 = import_react80.default.forwardRef(
               {
                 width: "14px",
                 color: props.invalid ? ["warningRed"] : ["darkGrey"],
-                ...!isEmpty && props.clearable && !props.disabled && !props.readOnly ? {
+                ...clearEnabled ? {
                   type: "feather",
                   icon: "x",
                   onClick: (e) => {

package/dist/index.mjs

@@ -9508,8 +9508,8 @@ var SVGContainer = styled4.div`
 
   > svg,
   > svg * {
-    stroke: ${({ theme: theme4 }) => `var(--color, ${theme4.colors.grey})`};
-    color: ${({ theme: theme4 }) => `var(--color, ${theme4.colors.grey})`};
+    stroke: ${({ theme: theme4 }) => `var(--icon-color, ${theme4.colors.grey})`};
+    color: ${({ theme: theme4 }) => `var(--icon-color, ${theme4.colors.grey})`};
 
     ${({ $hasStrokeWidth: hasStrokeWidth }) => hasStrokeWidth && css6`
         stroke-width: var(--stroke-width, unset);
@@ -9527,7 +9527,7 @@ var SVGContainer = styled4.div`
 // src/components/Icon/index.tsx
 import { jsx as jsx293 } from "react/jsx-runtime";
 var getColor2 = (c) => {
-  if (!c) return c;
+  if (!c) return theme3.colors.grey;
   if (Array.isArray(c)) return theme3.getColor(...c);
   return isKeyOf(theme3.colors, c) ? theme3.colors[c] : c;
 };
@@ -9556,7 +9556,7 @@ var Icon = React290.forwardRef((props, ref) => {
       $hasHeight: commonProps.height !== void 0,
       $hasStrokeWidth: strokeWidth !== void 0,
       style: {
-        "--color": getColor2(color),
+        "--icon-color": getColor2(color),
         ...getSizes({
           width: DEFAULT_WIDTH,
           ...props
@@ -19948,6 +19948,8 @@ var useMultiSelect = ({
   clearable,
   readOnly,
   viewMode,
+  borderless,
+  paddingless,
   overscan,
   estimateSize,
   height,
@@ -20085,6 +20087,8 @@ var useSingleSelect = ({
   clearable,
   readOnly,
   viewMode,
+  borderless,
+  paddingless,
   overscan,
   estimateSize,
   height,
@@ -20166,17 +20170,30 @@ var Trigger = styled74.button`
   transition-timing-function: linear;
   transition-duration: 0.25s;
 
-  ${({ $viewMode: viewMode }) => viewMode ? css49`
+  ${({
+  theme: theme4,
+  $viewMode: viewMode,
+  $borderless: borderless,
+  $paddingless: paddingless
+}) => viewMode ? css49`
           padding: 0;
 
           border: none;
         ` : css49`
-          min-height: 35px;
-          padding: 0 ${({ theme: theme4 }) => theme4.spacings.s3};
-
-          border-style: solid;
-          border-width: 1px;
-          border-radius: 4px;
+          ${paddingless ? css49`
+                padding: 0;
+              ` : css49`
+                min-height: 35px;
+                padding: 0 ${theme4.spacings.s3};
+              `}
+
+          ${borderless ? css49`
+                border: none;
+              ` : css49`
+                border-style: solid;
+                border-width: 1px;
+                border-radius: 4px;
+              `}
         `}
 
   outline: none !important;
@@ -20220,11 +20237,11 @@ var Trigger = styled74.button`
     pointer-events: none;
   }
 
-  > i {
+  > div:nth-child(2) > svg {
     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.25s;
-    transform: rotate(${({ $open: open }) => open ? "180deg" : "0deg"});
+    transform: rotate(${({ $rotate: rotate }) => rotate ? "180deg" : "0deg"});
   }
 `;
 var TriggerValue = styled74.div`
@@ -20309,6 +20326,7 @@ var Select2 = React348.forwardRef(
       }
     };
     const { isEmpty, placeholder, Component: Component5, onClear, buttonProps } = instances_default(props);
+    const clearEnabled = !isEmpty && props.clearable && !props.disabled && !props.readOnly;
     return /* @__PURE__ */ jsxs188(React348.Fragment, { children: [
       props.label !== void 0 && /* @__PURE__ */ jsx366(Label11, { htmlFor: id, $viewMode: viewMode, children: props.label }),
       /* @__PURE__ */ jsxs188(
@@ -20320,9 +20338,11 @@ var Select2 = React348.forwardRef(
           "aria-haspopup": "listbox",
           "aria-expanded": open,
           "aria-controls": menuId,
-          $open: open,
+          $rotate: open && !clearEnabled,
           $empty: isEmpty,
           $viewMode: viewMode,
+          $borderless: props.borderless,
+          $paddingless: props.paddingless,
           "aria-readonly": props.readOnly || viewMode,
           "aria-invalid": invalid,
           "aria-required": required && !viewMode,
@@ -20355,7 +20375,7 @@ var Select2 = React348.forwardRef(
               {
                 width: "14px",
                 color: props.invalid ? ["warningRed"] : ["darkGrey"],
-                ...!isEmpty && props.clearable && !props.disabled && !props.readOnly ? {
+                ...clearEnabled ? {
                   type: "feather",
                   icon: "x",
                   onClick: (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mw-kit/mw-ui",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Made with create-react-library",
   "author": "fmgusmao",
   "license": "MIT",