@momo-webplatform/mobase 0.0.37 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/publish/cjs/components/TextArea/TextArea.js +1 -1
  3. package/publish/cjs/components/TextInput/TextInput.js +3 -4
  4. package/publish/cjs/mobase-tw-plugin/plugin.js +1 -0
  5. package/publish/cjs/mobase-tw-plugin/utilities/custom.js +3 -0
  6. package/publish/cjs/tsconfig.lib.tsbuildinfo +1 -1
  7. package/publish/esm/components/TextArea/TextArea.js +1 -1
  8. package/publish/esm/components/TextInput/TextInput.js +3 -4
  9. package/publish/esm/mobase-tw-plugin/plugin.js +1 -0
  10. package/publish/esm/mobase-tw-plugin/utilities/custom.d.ts +3 -0
  11. package/publish/esm/mobase-tw-plugin/utilities/custom.js +3 -0
  12. package/publish/esm/mobase-tw-plugin/utilities/index.d.ts +3 -0
  13. package/publish/esm/tsconfig.lib.tsbuildinfo +1 -1
package/publish/esm/components/TextArea/TextArea.js CHANGED
@@ -9,7 +9,7 @@ export const TextArea = forwardRef(({ disabled, isError, message, label, classNa
9
9
  box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
10
10
  }
11
11
 
12
- .mobase-text-area-box:focus {
12
+ .mobase-text-area-box:focus, .mobase-text-area-box:focus-visible {
13
13
  box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
14
14
  }
15
15
 
package/publish/esm/components/TextInput/TextInput.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useEffect, useRef, useState, } from "react";
3
- import { QuestionMarkCircleIcon, XCircleIcon, } from "@heroicons/react/24/outline";
4
- import { XCircleIcon as XCircleIconSolid } from "@heroicons/react/24/solid";
3
+ import { QuestionMarkCircleIcon, XCircleIcon, XCircleIcon as XCircleIconSolid, } from "@heroicons/react/16/solid";
5
4
  import { cn } from "../../helpers/utils";
6
5
  export const TextInput = forwardRef(({ disabled, isError, message, label, className, inputClassName, withClearButton, size, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
7
6
  const [clearable, setClearable] = useState(false);
@@ -36,12 +35,12 @@ export const TextInput = forwardRef(({ disabled, isError, message, label, classN
36
35
  useEffect(() => {
37
36
  handleShowClearButton(defaultValue || value);
38
37
  }, [value, defaultValue]);
39
- return (_jsxs("div", { className: cn(className, isError && "mobase-text-input-error"), ref: rootRef, children: [_jsxs("div", { className: "relative", children: [label && (_jsx("span", { className: cn("mobase-text-input-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500", size === 2 && " -top-2.5 text-sm"), children: label })), _jsx("input", { disabled: disabled, type: type, ref: ref, className: cn("mobase-text-input-box bg-white w-full transition-all text-sm rounded-md border border-gray-400 placeholder:text-gray-500 p-3 text-gray-900 h-11 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block", size === 2 && "h-12 text-base", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), withClearButton && clearable && (_jsx("button", { "aria-label": "button", type: "button", className: "absolute right-3 top-1/2 -translate-y-1/2 shrink-0 cursor-pointer text-gray-500 duration-200 hover:opacity-70 disabled:pointer-events-none", disabled: disabled, onClick: handleClear, children: _jsx(XCircleIcon, { strokeWidth: 2, width: 20, height: 20 }) }))] }), message && (_jsxs("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? (_jsx(XCircleIconSolid, { width: 16, height: 16, className: "text-red-500" })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), _jsx("span", { className: cn("text-gray-500 ", size === 2 ? "text-sm" : "text-xs"), children: message })] })), _jsx("style", { children: `
38
+ return (_jsxs("div", { className: cn(className, isError && "mobase-text-input-error"), ref: rootRef, children: [_jsxs("div", { className: "relative", children: [label && (_jsx("span", { className: cn("mobase-text-input-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500", size === 2 && " -top-2.5 text-sm"), children: label })), _jsx("input", { disabled: disabled, type: type, ref: ref, className: cn("mobase-text-input-box bg-white w-full transition-all text-sm rounded-md border border-gray-400 placeholder:text-gray-500 p-3 text-gray-900 h-11 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block outline-none", size === 2 && "h-12 text-base", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), withClearButton && clearable && (_jsx("button", { "aria-label": "button", type: "button", className: "absolute right-3 top-1/2 -translate-y-1/2 shrink-0 cursor-pointer text-gray-500 duration-200 hover:opacity-70 disabled:pointer-events-none", disabled: disabled, onClick: handleClear, children: _jsx(XCircleIcon, { strokeWidth: 2, width: 20, height: 20 }) }))] }), message && (_jsxs("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? (_jsx(XCircleIconSolid, { width: 16, height: 16, className: "text-red-500" })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), _jsx("span", { className: cn("text-gray-500 ", size === 2 ? "text-sm" : "text-xs"), children: message })] })), _jsx("style", { children: `
40
39
  .mobase-text-input-box:hover {
41
40
  box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
42
41
  }
43
42
 
44
- .mobase-text-input-box:focus {
43
+ .mobase-text-input-box:focus , .mobase-text-input-box:focus-visible {
45
44
  box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
46
45
  }
47
46
 
package/publish/esm/mobase-tw-plugin/plugin.js CHANGED
@@ -159,6 +159,7 @@ export const mobaseTW = () => {
159
159
  colors: {
160
160
  ...listColors,
161
161
  ...resolved?.colors,
162
+ border: "rgba(var(--border))",
162
163
  },
163
164
  boxShadow: {
164
165
  small: `var(--${prefix}-box-shadow-small)`,
package/publish/esm/mobase-tw-plugin/utilities/custom.d.ts CHANGED
@@ -17,5 +17,8 @@ declare const _default: {
17
17
  ".tap-highlight-transparent": {
18
18
  "-webkit-tap-highlight-color": string;
19
19
  };
20
+ "*": {
21
+ "border-color": string;
22
+ };
20
23
  };
21
24
  export default _default;
package/publish/esm/mobase-tw-plugin/utilities/custom.js CHANGED
@@ -17,4 +17,7 @@ export default {
17
17
  ".tap-highlight-transparent": {
18
18
  "-webkit-tap-highlight-color": "transparent",
19
19
  },
20
+ "*": {
21
+ "border-color": "rgb(var(--mobase-gray-300))",
22
+ },
20
23
  };
package/publish/esm/mobase-tw-plugin/utilities/index.d.ts CHANGED
@@ -108,4 +108,7 @@ export declare const utilities: {
108
108
  ".tap-highlight-transparent": {
109
109
  "-webkit-tap-highlight-color": string;
110
110
  };
111
+ "*": {
112
+ "border-color": string;
113
+ };
111
114
  };