@momo-webplatform/mobase 0.0.12 → 0.0.14

package/publish/esm/components/AlertDialog/AlertDialog.js

@@ -21,6 +21,6 @@ AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;
 const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants(), "", className), ...props })));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props })));
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: "secondary" }), "mt-2 sm:mt-0", className), ...props })));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/publish/esm/components/Button/Button.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../helpers/utils";
-import SpinerIcon from "../..//foundation/SpinerIcon";
+import SpinerIcon from "../../foundation/SpinerIcon";
 // /dwd
 const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed border border-transparent", {
     variants: {

package/publish/esm/components/Select/Select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ChevronDownIcon, ChevronUpIcon, CheckIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon, ChevronUpIcon, CheckIcon, } from "@heroicons/react/16/solid";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../../helpers/utils";
 const Select = SelectPrimitive.Root;

package/publish/esm/components/Tabs/Tabs.d.ts

@@ -5,7 +5,7 @@ declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsL
     /**
      * Control the size of the tabs list..
      */
-    size?: "base" | "sm" | undefined;
+    size?: "sm" | "base" | undefined;
     /**
      * The direction of navigation between toolbar items.
      */

package/publish/esm/components/TextArea/TextArea.d.ts

@@ -0,0 +1,8 @@
+import { TextareaHTMLAttributes } from "react";
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    message?: string;
+    isError?: boolean;
+    inputClassName?: string;
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/publish/esm/components/TextArea/TextArea.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { XCircleIcon } from "@heroicons/react/24/solid";
+import { cn } from "../../helpers/utils";
+export const TextArea = forwardRef(({ disabled, isError, message, label, className, inputClassName, rows = 3, ...restProps }, ref) => {
+    return (_jsxs("div", { className: cn("relative", className, isError && "mobase-text-area-error"), children: [label && (_jsx("span", { className: cn("mobase-text-area-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), _jsx("textarea", { disabled: disabled, ref: ref, className: cn("mobase-text-area-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 outline-none block", inputClassName), rows: rows, ...restProps }), message && (_jsxs("div", { className: "mobase-text-area-message flex space-x-1 items-center mt-0.5", children: [isError ? (_jsx(XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), _jsx("span", { className: "text-gray-500 text-sm", children: message })] })), _jsx("style", { children: `
+            .mobase-text-area-box:hover {
+              box-shadow: 0px 0px 0px 1px var(--gray-500) inset;
+            }
+
+            .mobase-text-area-box:focus {
+              box-shadow: 0px 0px 0px 1px rgb(235, 47, 150) inset;
+            }
+
+            .mobase-text-area-box:disabled {
+              box-shadow: none;
+            }
+
+            .mobase-text-area-error {
+              .mobase-text-area-label {
+                color: #f74e57;
+              }
+
+              .mobase-text-area-box {
+                box-shadow: 0px 0px 0px 1px #f74e57 inset;
+                border-color: #f74e57;
+              }
+
+              .mobase-text-area-message span {
+                color: #f74e57;
+              }
+            }
+          ` })] }));
+});

package/publish/esm/components/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea } from "./TextArea";
+export type { TextAreaProps } from "./TextArea";

package/publish/esm/components/TextArea/index.js

@@ -0,0 +1 @@
+export { TextArea } from "./TextArea";

package/publish/esm/components/TextInput/TextInput.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from "react";
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    message?: string;
+    isError?: boolean;
+    inputClassName?: string;
+    withClearButton?: boolean;
+    onClickClear?: (inputValue: string) => void;
+}
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/publish/esm/components/TextInput/TextInput.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState, } from "react";
+import { QuestionMarkCircleIcon, XCircleIcon, } from "@heroicons/react/24/outline";
+import { XCircleIcon as XCircleIconSolid } from "@heroicons/react/24/solid";
+import { cn } from "../../helpers/utils";
+export const TextInput = forwardRef(({ disabled, isError, message, label, className, inputClassName, withClearButton, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+    const [clearable, setClearable] = useState(false);
+    const rootRef = useRef(null);
+    const handleShowClearButton = (inputValue) => {
+        if (inputValue && !clearable) {
+            setClearable(true);
+        }
+        if (!inputValue && clearable) {
+            setClearable(false);
+        }
+    };
+    const onChangeFactory = (event) => {
+        if (withClearButton)
+            handleShowClearButton(event.target.value);
+        onChange?.(event);
+    };
+    const onFocusFactory = (event) => {
+        if (withClearButton)
+            handleShowClearButton(event.target.value);
+        onFocus?.(event);
+    };
+    const handleClear = () => {
+        const inputTarget = rootRef.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        onClickClear?.(inputTarget.value);
+        inputTarget.value = "";
+        inputTarget.focus();
+        setClearable(false);
+    };
+    useEffect(() => {
+        handleShowClearButton(defaultValue || value);
+    }, [value, defaultValue]);
+    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.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), _jsx("input", { disabled: disabled, type: type, ref: ref, className: cn("mobase-text-input-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 h-12 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block", 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: "text-gray-500 text-sm", children: message })] })), _jsx("style", { children: `
+            .mobase-text-input-box:hover {
+                box-shadow: 0px 0px 0px 1px var(--gray-500) inset;
+            }
+
+            .mobase-text-input-box:focus {
+                box-shadow: 0px 0px 0px 1px rgb(235, 47, 150) inset;
+            }
+
+            .mobase-text-input-error {
+              .mobase-text-input-label {
+                color: #f74e57;
+              }
+
+              .mobase-text-input-box {
+                box-shadow: 0px 0px 0px 1px #f74e57 inset;
+                border-color: #f74e57;
+              }
+
+              .mobase-text-input-message span {
+                color: #f74e57;
+              }
+            }
+          ` })] }));
+});

package/publish/esm/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from "./TextInput";
+export type { TextInputProps } from "./TextInput";

package/publish/esm/components/TextInput/index.js

@@ -0,0 +1 @@
+export { TextInput } from "./TextInput";

package/publish/esm/index.d.ts

@@ -1,34 +1 @@
-export * from "./components/Accordion";
-export * from "./components/Breadcrumb";
 export * from "./components/Button";
-export * from "./components/Checkbox";
-export * from "./components/RadioGroup";
-export * from "./components/AlertDialog";
-export * from "./components/Avatar";
-export * from "./components/Alert";
-export * from "./components/Badge";
-export * from "./components/Calendar";
-export * from "./components/Card";
-export * from "./components/Collapsible";
-export * from "./components/Command";
-export * from "./components/Dialog";
-export * from "./components/Drawer";
-export * from "./components/DropdownMenu";
-export * from "./components/HoverCard";
-export * from "./components/IconButton";
-export * from "./components/Input";
-export * from "./components/Label";
-export * from "./components/Menubar";
-export * from "./components/NavigationMenu";
-export * from "./components/Popover";
-export * from "./components/Progress";
-export * from "./components/Select";
-export * from "./components/Sheet";
-export * from "./components/Skeleton";
-export * from "./components/Switch";
-export * from "./components/Table";
-export * from "./components/Tabs";
-export * from "./components/Textarea";
-export * from "./components/Toast";
-export * from "./components/Tooltip";
-export * from "./components/Slider";

package/publish/esm/index.js

@@ -1,34 +1 @@
-export * from "./components/Accordion";
-export * from "./components/Breadcrumb";
 export * from "./components/Button";
-export * from "./components/Checkbox";
-export * from "./components/RadioGroup";
-export * from "./components/AlertDialog";
-export * from "./components/Avatar";
-export * from "./components/Alert";
-export * from "./components/Badge";
-export * from "./components/Calendar";
-export * from "./components/Card";
-export * from "./components/Collapsible";
-export * from "./components/Command";
-export * from "./components/Dialog";
-export * from "./components/Drawer";
-export * from "./components/DropdownMenu";
-export * from "./components/HoverCard";
-export * from "./components/IconButton";
-export * from "./components/Input";
-export * from "./components/Label";
-export * from "./components/Menubar";
-export * from "./components/NavigationMenu";
-export * from "./components/Popover";
-export * from "./components/Progress";
-export * from "./components/Select";
-export * from "./components/Sheet";
-export * from "./components/Skeleton";
-export * from "./components/Switch";
-export * from "./components/Table";
-export * from "./components/Tabs";
-export * from "./components/Textarea";
-export * from "./components/Toast";
-export * from "./components/Tooltip";
-export * from "./components/Slider";