@mlw-packages/react-components 1.4.8 → 1.5.1

package/dist/index.mjs

@@ -926,7 +926,7 @@ function BadgeBase({
 
 // src/components/ui/BreadcrumbBase.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { CaretRight, DotsThree } from "phosphor-react";
+import { CaretRight, DotsThree } from "@phosphor-icons/react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function BreadcrumbBase({ ...props }) {
   return /* @__PURE__ */ jsx5("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
@@ -1020,7 +1020,7 @@ function BreadcrumbEllipsisBase({
 }
 
 // src/components/ui/CalendarBase.tsx
-import { CaretLeft, CaretRight as CaretRight2 } from "phosphor-react";
+import { CaretLeft, CaretRight as CaretRight2 } from "@phosphor-icons/react";
 import { DayPicker } from "react-day-picker";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function CalendarBase({
@@ -1136,7 +1136,7 @@ CardFooterBase.displayName = "CardFooter";
 // src/components/ui/CarouselBase.tsx
 import * as React5 from "react";
 import useEmblaCarousel from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "phosphor-react";
+import { ArrowLeft, ArrowRight } from "@phosphor-icons/react";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var CarouselContext = React5.createContext(null);
 function useCarousel() {
@@ -1327,7 +1327,7 @@ function CarouselNextBase({
 // src/components/ui/CheckBoxBase.tsx
 import * as React6 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "phosphor-react";
+import { Check } from "@phosphor-icons/react";
 import { motion } from "framer-motion";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var CheckboxBase = React6.forwardRef(({ className, testid: dataTestId = "checkbox-base", ...props }, ref) => /* @__PURE__ */ jsx9(
@@ -1358,13 +1358,13 @@ CheckboxBase.displayName = CheckboxPrimitive.Root.displayName;
 // src/components/ui/CommandBase.tsx
 import * as React8 from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { MagnifyingGlass } from "phosphor-react";
+import { MagnifyingGlass } from "@phosphor-icons/react";
 import { motion as motion2, AnimatePresence } from "framer-motion";
 
 // src/components/ui/DialogBase.tsx
 import * as React7 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "phosphor-react";
+import { X } from "@phosphor-icons/react";
 import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var DialogBase = DialogPrimitive.Root;
 var DialogTriggerBase = DialogPrimitive.Trigger;
@@ -1545,7 +1545,7 @@ CommandShortcutBase.displayName = "CommandShortcut";
 
 // src/components/ui/ContextMenuBase.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CaretRight as CaretRight3, Check as Check2, Circle } from "phosphor-react";
+import { CaretRight as CaretRight3, Check as Check2, Circle } from "@phosphor-icons/react";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function ContextMenuBase(props) {
   return /* @__PURE__ */ jsx12(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
@@ -1881,7 +1881,7 @@ function DrawerDescriptionBase({
 // src/components/ui/DropDownMenuBase.tsx
 import * as React9 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check as Check3, CaretRight as CaretRight4, Circle as Circle2 } from "phosphor-react";
+import { Check as Check3, CaretRight as CaretRight4, Circle as Circle2 } from "@phosphor-icons/react";
 import { motion as motion3, AnimatePresence as AnimatePresence2 } from "framer-motion";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var DropDownMenuBase = DropdownMenuPrimitive.Root;
@@ -2138,7 +2138,7 @@ var PopoverContentBase = React12.forwardRef(({ className, align = "center", side
 PopoverContentBase.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/selects/ComboboxBase.tsx
-import { CaretDown, Check as Check4 } from "phosphor-react";
+import { CaretDown, Check as Check4 } from "@phosphor-icons/react";
 import { useState as useState2 } from "react";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function ComboboxBase({
@@ -2294,7 +2294,7 @@ function Combobox({
 
 // src/components/selects/MultiCombobox.tsx
 import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
-import { X as X2 } from "phosphor-react";
+import { X as X2 } from "@phosphor-icons/react";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function MultiCombobox({
   items,
@@ -2418,7 +2418,7 @@ TooltipContentBase.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/ui/FilterBase.tsx
 var import_colors = __toESM(require_colors2());
-import { FunnelSimple, Plus, Trash } from "phosphor-react";
+import { FunnelSimple, Plus, Trash } from "@phosphor-icons/react";
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // src/components/ui/HoverCardBase.tsx
@@ -2460,7 +2460,7 @@ function HoverCardContentBase({
 // src/components/ui/Input-OTP-Base.tsx
 import * as React14 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "phosphor-react";
+import { Minus } from "@phosphor-icons/react";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function InputOTPBase({
   className,
@@ -2521,7 +2521,7 @@ function InputOTPSeparatorBase({ ...props }) {
 // src/components/ui/NavigationMenuBase.tsx
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva as cva3 } from "class-variance-authority";
-import { CaretDown as CaretDown2 } from "phosphor-react";
+import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function NavigationMenuBase({
   className,
@@ -2535,7 +2535,7 @@ function NavigationMenuBase({
       "data-slot": "navigation-menu",
       "data-viewport": viewport,
       className: cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center z-[999]",
         className
       ),
       ...props,
@@ -2850,7 +2850,7 @@ ScrollBarBase.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 // src/components/ui/SelectBase.tsx
 import * as React17 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check as Check5, CaretDown as CaretDown3, CaretUp } from "phosphor-react";
+import { Check as Check5, CaretDown as CaretDown3, CaretUp } from "@phosphor-icons/react";
 import { motion as motion4, AnimatePresence as AnimatePresence3 } from "framer-motion";
 import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var SelectBase = SelectPrimitive.Root;
@@ -3018,7 +3018,7 @@ SeparatorBase.displayName = SeparatorPrimitive.Root.displayName;
 import * as React19 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva as cva4 } from "class-variance-authority";
-import { X as X3 } from "phosphor-react";
+import { X as X3 } from "@phosphor-icons/react";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var SheetBase = SheetPrimitive.Root;
 var SheetTriggerBase = SheetPrimitive.Trigger;
@@ -3156,7 +3156,7 @@ function SkeletonBase({
 }
 
 // src/components/ui/SidebarBase.tsx
-import { SidebarSimple } from "phosphor-react";
+import { SidebarSimple } from "@phosphor-icons/react";
 import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar:state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -3808,12 +3808,12 @@ SlideBase.displayName = "SlideBase";
 
 // src/components/ui/SonnerBase.tsx
 import {
-  CheckCircle,
-  XCircle,
-  Info,
-  Warning,
-  Spinner
-} from "phosphor-react";
+  CheckCircleIcon,
+  XCircleIcon,
+  InfoIcon,
+  WarningIcon,
+  SpinnerIcon
+} from "@phosphor-icons/react";
 import { Toaster as Sonner, toast as sonnertoast } from "sonner";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var iconBaseClass = "w-5 h-auto";
@@ -3835,8 +3835,8 @@ var Toaster = ({ testId, ...props }) => {
             flex items-center gap-3
             data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800 data-[type=success]:border-green-500
             data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800 data-[type=error]:border-red-500
-            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 data-[type=warning]:text-yellow-800 data-[type=warning]:border-yellow-500
-            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500
+            data-[type=WarningIcon]:border-l-yellow-500 data-[type=WarningIcon]:bg-yellow-50 data-[type=WarningIcon]:text-yellow-800 data-[type=WarningIcon]:border-yellow-500
+            data-[type=InfoIcon]:border-l-blue-500 data-[type=InfoIcon]:bg-blue-50 data-[type=InfoIcon]:text-blue-800 data-[type=InfoIcon]:border-blue-500
           `,
           description: `
             text-sm
@@ -3865,23 +3865,23 @@ var Toaster = ({ testId, ...props }) => {
 };
 var toast = {
   success: (message) => sonnertoast.success(message, {
-    icon: /* @__PURE__ */ jsx34(CheckCircle, { className: `${iconBaseClass} text-green-600`, weight: "fill" }),
+    icon: /* @__PURE__ */ jsx34(CheckCircleIcon, { className: `${iconBaseClass} text-green-600`, weight: "fill" }),
     className: "sonner-success"
   }),
   error: (message) => sonnertoast.error(message, {
-    icon: /* @__PURE__ */ jsx34(XCircle, { className: `${iconBaseClass} text-red-600`, weight: "fill" }),
+    icon: /* @__PURE__ */ jsx34(XCircleIcon, { className: `${iconBaseClass} text-red-600`, weight: "fill" }),
     className: "sonner-error"
   }),
   warning: (message) => sonnertoast.warning(message, {
-    icon: /* @__PURE__ */ jsx34(Warning, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" }),
-    className: "sonner-warning"
+    icon: /* @__PURE__ */ jsx34(WarningIcon, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" }),
+    className: "sonner-WarningIcon"
   }),
   info: (message) => sonnertoast.info(message, {
-    icon: /* @__PURE__ */ jsx34(Info, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
-    className: "sonner-info"
+    icon: /* @__PURE__ */ jsx34(InfoIcon, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
+    className: "sonner-InfoIcon"
   }),
   loading: (message) => sonnertoast(message, {
-    icon: /* @__PURE__ */ jsx34(Spinner, { className: `${iconBaseClass} animate-spin text-neutral-500`, weight: "fill" }),
+    icon: /* @__PURE__ */ jsx34(SpinnerIcon, { className: `${iconBaseClass} animate-spin text-neutral-500`, weight: "fill" }),
     className: "sonner-loading"
   })
 };
@@ -4067,7 +4067,7 @@ var TextAreaBase = React26.forwardRef(({ className, ...props }, ref) => {
 TextAreaBase.displayName = "TextAreaBase";
 
 // src/components/mode-toggle.tsx
-import { Check as Check6, Moon, Sun } from "phosphor-react";
+import { Check as Check6, Moon, Sun } from "@phosphor-icons/react";
 
 // src/components/theme-provider.tsx
 import { createContext as createContext3, useContext as useContext4, useEffect as useEffect5, useState as useState6 } from "react";
@@ -4080,7 +4080,7 @@ var ThemeProviderContext = createContext3(initialState);
 function ThemeProviderBase({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  storageKey = "app-ui-theme",
   ...props
 }) {
   const [theme, setTheme] = useState6(() => {
@@ -4156,7 +4156,7 @@ function ModeToggleBase({
         children: [
           /* @__PURE__ */ jsxs22(Fragment3, { children: [
             /* @__PURE__ */ jsx40(Sun, { className: `h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-90 scale-0" : "rotate-0 scale-100"}` }),
-            /* @__PURE__ */ jsx40(Moon, { className: `absolute top-0 left-0 h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"}` })
+            /* @__PURE__ */ jsx40(Moon, { className: `absolute h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"}` })
           ] }),
           /* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Toggle theme" })
         ]
@@ -4183,7 +4183,7 @@ import { add, format } from "date-fns";
 // src/components/date-time-picker/calendar.tsx
 import * as React27 from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
-import { CaretLeft as CaretLeft2, CaretRight as CaretRight5, X as X4, Calendar } from "phosphor-react";
+import { CaretLeft as CaretLeft2, CaretRight as CaretRight5, X as X4, Calendar } from "@phosphor-icons/react";
 import { motion as motion6 } from "framer-motion";
 import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 var variants = {
@@ -4295,12 +4295,11 @@ function CalendarBase2({
 CalendarBase2.displayName = "CalendarBase";
 
 // src/components/date-time-picker/DateTimePicker.tsx
-import { Calendar as Calendar2 } from "phosphor-react";
 import { ptBR } from "date-fns/locale";
 import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // src/components/date-time-picker/TimePicker.tsx
-import { Clock } from "phosphor-react";
+import { Clock } from "@phosphor-icons/react";
 import * as React29 from "react";
 
 // src/components/date-time-picker/TimePickerInput.tsx
@@ -4585,6 +4584,7 @@ function TimePicker({ date, setDate, hideSeconds }) {
 }
 
 // src/components/date-time-picker/DateTimePicker.tsx
+import { Calendar as Calendar2 } from "@phosphor-icons/react";
 import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 function DateTimePicker({
   label,
@@ -4836,6 +4836,7 @@ export {
   InputOTPGroupBase,
   InputOTPSeparatorBase,
   InputOTPSlotBase,
+  LabelBase_default as LabelBase,
   ModeToggleBase,
   MultiCombobox,
   NavigationMenuBase,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlw-packages/react-components",
-  "version": "1.4.8",
+  "version": "1.5.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -8,28 +8,24 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-hook-form": "^7.0.0"
-  },
   "scripts": {
     "dev": "vite",
     "build": "npm run build-css && tsup",
     "build-css": "npx tailwindcss -i ./src/style/global.css -o ./dist/index.css --config ./tailwind.config.js",
-    "lint": "eslint .",
+    "lint": "tsc --noEmit && eslint .",
     "preview": "vite preview",
     "deploy:patch": "npm version patch && npm publish",
     "deploy:minor": "npm version minor && npm publish",
     "deploy:major": "npm version major && npm publish",
-    "prepare": "if [ \"$CI\" != \"true\" ]; then husky install; fi",
-    "test": "echo \"No tests yet\" && exit 0"
+    "test": "echo \"No tests yet\" && exit 0",
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --max-warnings=0"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-alert-dialog": "^1.1.5",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
@@ -48,9 +44,7 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.1.7",
-    "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -58,26 +52,20 @@
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.15.0",
     "input-otp": "^1.4.2",
-    "next-themes": "^0.4.4",
-    "phosphor-icons": "^1.4.2",
-    "phosphor-react": "^1.4.1",
-    "playwright": "^1.53.1",
-    "react": "^18.3.1",
     "react-day-picker": "^8.10.0",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
     "react-router-dom": "6.4",
-    "react-toastify": "^11.0.5",
     "recharts": "^2.15.3",
     "sonner": "^1.7.4",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1"
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@playwright/test": "^1.53.1",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
@@ -85,20 +73,31 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
-    "css-loader": "^7.1.2",
     "eslint": "^9.19.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-storybook": "^9.1.2",
     "globals": "^15.14.0",
     "husky": "^8.0.0",
     "lint-staged": "^16.1.2",
-    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.5.1",
+    "storybook": "^9.1.2",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.4.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0"
+    "vite": "^6.1.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-musl": "4.9.5"
   }
 }