@momo-webplatform/mobase 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "scripts": {
     "dev": "next dev",
@@ -64,7 +64,7 @@
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "cmdk": "^0.2.0",
+    "cmdk": "^0.2.1",
     "color": "^4.2.3",
     "date-fns": "^3.2.0",
     "deepmerge": "^4.3.1",

package/publish/cjs/lib/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+const clsx_1 = require("clsx");
+const tailwind_merge_1 = require("tailwind-merge");
+function cn(...inputs) {
+    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+}
+exports.cn = cn;

package/publish/cjs/src/components/Combobox/Combobox.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = exports.ComboboxContent = exports.ComboboxTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../helpers/utils");
+const solid_1 = require("@heroicons/react/16/solid");
+const Popover_1 = require("../Popover");
+const ComboboxTrigger = ({ className, value, label, children, placeholder, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)(Popover_1.PopoverTrigger, { className: (0, utils_1.cn)("focus-visible:outline-none w-72 focus-visible:ring-0 focus-visible:ring-offset-0 focus:ring-0 select-mobase-button bg-white ring-0 transition-all  rounded-md border border-gray-400 data-[placeholder]:text-gray-500 p-3 disabled:bg-gray-50 disabled:border-gray-300  disabled:pointer-events-none flex items-center justify-between data-[state=open]:border-pink-500 data-[state=open]:ring-1 hover:ring-1 hover:ring-gray-400 data-[state=open]:ring-pink-500 text-gray-900 h-11 ring-inset text-sm", className), children: [value || children || placeholder, (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" })] }), label && ((0, jsx_runtime_1.jsx)("span", { className: "absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500 z-[1]", children: label }))] }));
+};
+exports.ComboboxTrigger = ComboboxTrigger;
+const ComboboxContent = ({ children, className, }) => {
+    return ((0, jsx_runtime_1.jsx)(Popover_1.PopoverContent, { className: (0, utils_1.cn)("!p-0 border-none", className), children: children }));
+};
+exports.ComboboxContent = ComboboxContent;
+const Combobox = ({ open, onOpenChange, children }) => {
+    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: open, onOpenChange: onOpenChange, children: children }));
+};
+exports.Combobox = Combobox;

package/publish/cjs/src/components/Combobox/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = exports.ComboboxContent = exports.ComboboxTrigger = void 0;
+var Combobox_1 = require("./Combobox");
+Object.defineProperty(exports, "ComboboxTrigger", { enumerable: true, get: function () { return Combobox_1.ComboboxTrigger; } });
+Object.defineProperty(exports, "ComboboxContent", { enumerable: true, get: function () { return Combobox_1.ComboboxContent; } });
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return Combobox_1.Combobox; } });

package/publish/cjs/src/components/Command/Command.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cmdk_1 = require("cmdk");
+const utils_1 = require("../../helpers/utils");
+const Dialog_1 = require("../Dialog");
+const solid_1 = require("@heroicons/react/16/solid");
+const Command = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command, { ref: ref, className: (0, utils_1.cn)("flex text-gray-900 border border-gray-300 shadow-lg bg-white h-full w-full flex-col overflow-hidden rounded-md", className), ...props })));
+exports.Command = Command;
+Command.displayName = cmdk_1.Command.displayName;
+const CommandDialog = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsx)(Dialog_1.DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: (0, jsx_runtime_1.jsx)(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) }) }));
+};
+exports.CommandDialog = CommandDialog;
+const CommandInput = React.forwardRef(({ className, onClickClear, ...props }, ref) => {
+    const divRef = React.useRef(null);
+    const [search, setSearch] = React.useState("");
+    const handleClearInput = () => {
+        if (!search || search?.length <= 0)
+            return;
+        setSearch("");
+        onClickClear?.(search);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: divRef, className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [(0, jsx_runtime_1.jsx)(solid_1.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0  text-gray-500" }), (0, jsx_runtime_1.jsx)(cmdk_1.Command.Input, { ref: ref, className: (0, utils_1.cn)("flex  h-10 text-gray-900 w-full rounded-md focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:ring-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className), value: search, onValueChange: setSearch, ...props }), (0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { onClick: handleClearInput, className: (0, utils_1.cn)("ml-2 transition-all cursor-pointer h-4 w-4 duration-75 shrink-0 text-gray-500", search?.length > 0 ? "opacity-100" : "opacity-0") })] }));
+});
+exports.CommandInput = CommandInput;
+CommandInput.displayName = cmdk_1.Command.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.List, { ref: ref, className: (0, utils_1.cn)("max-h-[300px]  text-gray-900 overflow-y-auto overflow-x-hidden", className), ...props })));
+exports.CommandList = CommandList;
+CommandList.displayName = cmdk_1.Command.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Empty, { ref: ref, className: "py-6 text-gray-900 text-center text-sm", ...props })));
+exports.CommandEmpty = CommandEmpty;
+CommandEmpty.displayName = cmdk_1.Command.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Group, { ref: ref, className: (0, utils_1.cn)("overflow-hidden text-gray-900 p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className), ...props })));
+exports.CommandGroup = CommandGroup;
+CommandGroup.displayName = cmdk_1.Command.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Separator, { ref: ref, className: (0, utils_1.cn)("-mx-1 text-gray-900 h-px bg-border", className), ...props })));
+exports.CommandSeparator = CommandSeparator;
+CommandSeparator.displayName = cmdk_1.Command.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, children, isActive, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(cmdk_1.Command.Item, { ref: ref, className: (0, utils_1.cn)("relative cursor-pointer text-gray-900 flex rounded-md select-none hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:text-gray-900 items-center px-2 py-1.5 text-sm outline-none  data-[disabled]:pointer-events-none data-[disabled]:opacity-50", isActive ? "bg-gray-100" : "", className), ...props, children: [(0, jsx_runtime_1.jsx)(solid_1.CheckIcon, { className: (0, utils_1.cn)("h-4 w-4 mr-2", isActive ? "opacity-100" : "opacity-0") }), children] }));
+});
+exports.CommandItem = CommandItem;
+CommandItem.displayName = cmdk_1.Command.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("ml-auto text-xs text-gray-900 tracking-widest text-muted-foreground", className), ...props }));
+};
+exports.CommandShortcut = CommandShortcut;
+CommandShortcut.displayName = "CommandShortcut";

package/publish/cjs/src/components/Command/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = void 0;
+var Command_1 = require("./Command");
+Object.defineProperty(exports, "Command", { enumerable: true, get: function () { return Command_1.Command; } });
+Object.defineProperty(exports, "CommandDialog", { enumerable: true, get: function () { return Command_1.CommandDialog; } });
+Object.defineProperty(exports, "CommandInput", { enumerable: true, get: function () { return Command_1.CommandInput; } });
+Object.defineProperty(exports, "CommandList", { enumerable: true, get: function () { return Command_1.CommandList; } });
+Object.defineProperty(exports, "CommandEmpty", { enumerable: true, get: function () { return Command_1.CommandEmpty; } });
+Object.defineProperty(exports, "CommandGroup", { enumerable: true, get: function () { return Command_1.CommandGroup; } });
+Object.defineProperty(exports, "CommandItem", { enumerable: true, get: function () { return Command_1.CommandItem; } });
+Object.defineProperty(exports, "CommandShortcut", { enumerable: true, get: function () { return Command_1.CommandShortcut; } });
+Object.defineProperty(exports, "CommandSeparator", { enumerable: true, get: function () { return Command_1.CommandSeparator; } });

package/publish/cjs/{components → src/components}/Select/Select.js

@@ -28,18 +28,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const solid_1 = require("@heroicons/react/16/solid");
 const outline_1 = require("@heroicons/react/24/outline");
-const solid_2 = require("@heroicons/react/24/solid");
 const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
 const utils_1 = require("../../helpers/utils");
 const Select = React.forwardRef(({ className, children, label, message, size, isError, disabled, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("select-mobase relative", className, disabled ? "disabled" : "", isError
         ? "[&>.select-mobase-button]:border-red-500 [&>.select-mobase-button]:ring-red-500 [&>.select-mobase-button]:ring-1"
         : "", size === 2
         ? "[&>.select-mobase-button]:text-base [&>.select-mobase-button]:h-12"
-        : ""), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-select-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500 z-[1]", size === 2 && "text-sm -top-2.5", isError && "text-red-500"), children: label })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mobase-select-message flex space-x-1 items-center mt-1 text-gray-500", isError && "text-red-500"), children: [isError ? ((0, jsx_runtime_1.jsx)(solid_2.XCircleIcon, { width: 16, height: 16 })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16 })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(size === 2 ? "text-sm" : "text-xs"), children: message })] }))] })));
+        : ""), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-select-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500 z-[1]", size === 2 && "text-sm -top-2.5", isError && "text-red-500"), children: label })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mobase-select-message flex space-x-1 items-center mt-1 text-gray-500", isError && "text-red-500"), children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16 })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16 })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(size === 2 ? "text-sm" : "text-xs"), children: message })] }))] })));
 exports.Select = Select;
 const SelectValue = SelectPrimitive.Value;
 exports.SelectValue = SelectValue;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("select-mobase-button bg-white w-full ring-0 transition-all focus-visible:border-pink-500 focus-visible:ring-offset-0 focus-visible:ring-offset-transparent focus-visible:ring-1 focus-visible:!ring-pink-500 rounded-md border border-gray-400 data-[placeholder]:text-gray-500 p-3 disabled:bg-gray-50 disabled:border-gray-300  disabled:pointer-events-none flex items-center justify-between data-[state=open]:border-pink-500 data-[state=open]:ring-1 hover:ring-1 hover:ring-gray-400 data-[state=open]:ring-pink-500 text-gray-900 h-11 ring-inset text-sm", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "line-clamp-1 text-left", children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("select-mobase-button bg-white w-full ring-0 transition-all focus-visible:border-pink-500 focus-visible:ring-offset-0 focus-visible:ring-offset-transparent focus-visible:ring-1 focus-visible:!ring-pink-500 rounded-md border border-gray-400 data-[placeholder]:text-gray-500 p-3 disabled:bg-gray-50 disabled:border-gray-300  disabled:pointer-events-none flex items-center justify-between data-[state=open]:border-pink-500 data-[state=open]:ring-1 hover:ring-1 hover:ring-gray-400 data-[state=open]:ring-pink-500 text-gray-900 h-11 ring-inset text-sm", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "line-clamp-1 text-left", children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-500 flex-none" }) })] })));
 exports.SelectTrigger = SelectTrigger;
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronUpIcon, { className: "h-5 w-5" }) })));

package/publish/cjs/src/components/Stepper/Stepper.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const outline_1 = require("@heroicons/react/24/outline");
+const IconButton_1 = require("../IconButton");
+const react_1 = require("react");
+const utils_1 = require("~/lib/utils");
+exports.Stepper = (0, react_1.forwardRef)(({ value = 0, min = 0, max = 999, disabled = false, disabledInput = false, step = 1, inputClassName = "", stepperClassName = "", className = "", onChange = () => { }, onChangeInputStepper, onDecrement, onIncrement, ...restProps }, ref) => {
+    const rootRef = (0, react_1.useRef)(null);
+    const [isDisablePlus, setIsDisablePlus] = (0, react_1.useState)(false);
+    const [isDisableMinus, setIsDisableMinus] = (0, react_1.useState)(false);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const spanRef = (0, react_1.useRef)(null);
+    const handleDisable = (inputValue) => {
+        if (Number(inputValue) >= max) {
+            setIsDisablePlus(true);
+        }
+        else {
+            setIsDisablePlus(false);
+        }
+        if (Number(inputValue) > min) {
+            setIsDisableMinus(false);
+        }
+        else {
+            setIsDisableMinus(true);
+        }
+    };
+    const onIncrementChange = () => {
+        if (disabled || isDisablePlus)
+            return;
+        const inputTarget = rootRef?.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        let newValue = 0;
+        newValue = Math.min(Number(inputTarget.value) + step, max);
+        handleDisable(newValue);
+        inputTarget.value = String(newValue);
+        setInputValue(inputTarget.value || "");
+        onChangeInputStepper?.(inputTarget.value);
+        onIncrement?.(inputTarget.value);
+    };
+    const onDecrementChange = () => {
+        if (disabled || isDisableMinus)
+            return;
+        const inputTarget = rootRef?.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        let newValue = 0;
+        newValue = Math.max(Number(inputTarget.value) - step, 0);
+        handleDisable(newValue);
+        inputTarget.value = String(newValue);
+        setInputValue(inputTarget.value || "");
+        onChangeInputStepper?.(inputTarget.value);
+        onDecrement?.(inputTarget.value);
+    };
+    const onStepperInputChange = (e) => {
+        if (!e)
+            return;
+        let inputValue = e?.target?.value;
+        if (!inputValue?.match(/^[0-9]*$/)) {
+            inputValue = inputValue.replace(/[^0-9]/g, "");
+        }
+        handleDisable(inputValue);
+        const numericValue = parseInt(inputValue, 10);
+        if (Number.isNaN(numericValue) || numericValue < min) {
+            e.target.value = String(min);
+        }
+        else if (numericValue >= max) {
+            e.target.value = String(max);
+        }
+        else {
+            e.target.value = String(numericValue);
+        }
+        setInputValue(e?.target?.value || "");
+        onChangeInputStepper?.(e.target.value);
+        onChange?.(e);
+    };
+    (0, react_1.useEffect)(() => {
+        const inputTarget = rootRef?.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        handleDisable(inputTarget?.value);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const inputTarget = rootRef?.current?.querySelector("input");
+        if (inputTarget && spanRef?.current) {
+            inputTarget.style.width = `${spanRef.current.offsetWidth + 10}px`;
+        }
+    }, [inputValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: "flex items-center space-x-1", children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { id: "btn-minus", className: (0, utils_1.cn)(!isDisableMinus && !disabled
+                    ? "cursor-pointer text-pink-500"
+                    : "text-gray-400 cursor-default", stepperClassName), variant: "transparent", onClick: onDecrementChange, children: (0, jsx_runtime_1.jsx)(outline_1.MinusCircleIcon, { className: "w-8 h-8 " }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { pattern: "[0-9]*", inputMode: "numeric", defaultValue: value, ref: ref, min: min, max: max, onChange: (e) => onStepperInputChange(e), id: "numberInput", disabled: disabled || disabledInput, autoComplete: "off", ...restProps, className: (0, utils_1.cn)("text-gray-800 min-w-7 border-gray-400 border transition-width duration-100 focus-visible:outline-none focus-visible:ring-0 focus:ring-0 shadow-none focus-visible:ring-offset-0 w-7 h-7 rounded-md text-center bg-white", inputClassName) }), (0, jsx_runtime_1.jsx)("span", { ref: spanRef, style: {
+                            visibility: "hidden",
+                            position: "absolute",
+                            whiteSpace: "pre",
+                        }, children: inputValue || " " })] }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { id: "btn-plus", className: (0, utils_1.cn)(!isDisablePlus && !disabled
+                    ? "cursor-pointer text-pink-500"
+                    : "text-gray-400 cursor-default", stepperClassName), variant: "transparent", onClick: onIncrementChange, children: (0, jsx_runtime_1.jsx)(outline_1.PlusCircleIcon, { className: "w-8 h-8 " }) })] }));
+});

package/publish/cjs/src/components/Stepper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = void 0;
+var Stepper_1 = require("./Stepper");
+Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return Stepper_1.Stepper; } });

package/publish/cjs/{index.js → src/index.js}

@@ -27,6 +27,7 @@ __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/TextArea"), exports);
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/TextInput"), exports);
+__exportStar(require("./components/Stepper"), exports);
 __exportStar(require("./components/Select"), exports);
 __exportStar(require("./components/NavigationMenu"), exports);
 __exportStar(require("./components/Switch"), exports);
@@ -34,5 +35,7 @@ __exportStar(require("./components/RadioGroup"), exports);
 __exportStar(require("./components/Header"), exports);
 __exportStar(require("./components/Footer"), exports);
 __exportStar(require("./components/Card"), exports);
+__exportStar(require("./components/Command"), exports);
+__exportStar(require("./components/Combobox"), exports);
 __exportStar(require("./mobase-tw-plugin"), exports);
 __exportStar(require("./site"), exports);