@arch-cadre/ui 0.0.23 → 0.0.24

package/dist/shared/page-loader.mjs

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Logo } from "../logo.mjs";
-import { Loader } from "./loader.mjs";
+import { Logo } from "../logo.js";
+import { Loader } from "./loader.js";
 export function PageLoader({ withLogo = true, text }) {
   return /* @__PURE__ */ React.createElement("div", { className: "bg-background absolute inset-0 flex flex-col items-center justify-center space-y-6" }, withLogo && /* @__PURE__ */ React.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React.createElement(Logo, null)), /* @__PURE__ */ React.createElement(Loader, null), text && /* @__PURE__ */ React.createElement("div", { className: "text-xs lowercase" }, text));
 }

package/dist/shared/scroll-fade-effect.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollFadeEffect = ScrollFadeEffect;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../lib/utils.cjs");
+var _utils = require("../lib/utils.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ScrollFadeEffect({

package/dist/shared/scroll-fade-effect.mjs

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../lib/utils.mjs";
+import { cn } from "../lib/utils.js";
 export function ScrollFadeEffect({
   className,
   orientation = "vertical",

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@arch-cadre/ui",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "type": "module",
+  "main": "./dist/index.mjs",
   "exports": {
     "./package.json": "./package.json",
     "./globals.css": "./dist/styles/globals.css",
@@ -52,8 +53,8 @@
     "dev": "unbuild --stub"
   },
   "dependencies": {
-    "@arch-cadre/core": "0.0.23",
-    "@arch-cadre/intl": "0.0.23",
+    "@arch-cadre/core": "^0.0.24",
+    "@arch-cadre/intl": "^0.0.24",
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/solar": "^1.2.2",
     "@iconify/react": "^6.0.0",
@@ -87,6 +88,5 @@
     "tailwindcss": "^4.1.11",
     "typescript": "^5.9.2",
     "unbuild": "^3.6.1"
-  },
-  "main": "./dist/index.mjs"
+  }
 }

package/src/components/accordion.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Accordion as AccordionPrimitive } from "radix-ui";
 import { ChevronDownIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Accordion({
   ...props

package/src/components/alert-dialog.tsx

@@ -3,8 +3,8 @@
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
-import { buttonVariants } from "./button";
+import { cn } from "../lib/utils.js";
+import { buttonVariants } from "./button.js";
 
 function AlertDialog({
   ...props

package/src/components/alert.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",

package/src/components/avatar.tsx

@@ -3,7 +3,7 @@
 import { Avatar as AvatarPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Avatar({
   className,

package/src/components/badge.tsx

@@ -1,8 +1,8 @@
-import { Slot as SlotPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",

package/src/components/breadcrumb.tsx

@@ -1,8 +1,8 @@
-import { Slot as SlotPrimitive } from "radix-ui";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;

package/src/components/button-group.tsx

@@ -1,10 +1,11 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: <explanation> */
-import { Slot as SlotPrimitive } from "radix-ui";
+
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
+import { cn } from "../lib/utils.js";
+import { Separator } from "./separator.js";
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",

package/src/components/button.tsx

@@ -1,8 +1,8 @@
-import { Slot as SlotPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

package/src/components/calendar.tsx

@@ -12,8 +12,8 @@ import {
   getDefaultClassNames,
 } from "react-day-picker";
 
-import { cn } from "../lib/utils";
-import { Button, buttonVariants } from "./button";
+import { cn } from "../lib/utils.js";
+import { Button, buttonVariants } from "./button.js";
 
 function Calendar({
   className,

package/src/components/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/checkbox.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Checkbox({
   className,

package/src/components/command.tsx

@@ -4,14 +4,14 @@ import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "./dialog";
+} from "./dialog.js";
 
 function Command({
   className,

package/src/components/context-menu.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function ContextMenu({
   ...props

package/src/components/dialog.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Dialog as DialogPrimitive } from "radix-ui";
 import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Dialog({
   ...props

package/src/components/drawer.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Drawer({
   ...props

package/src/components/dropdown-menu.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function DropdownMenu({
   ...props

package/src/components/empty.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/field.tsx

@@ -6,9 +6,9 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { useMemo } from "react";
 
-import { cn } from "../lib/utils";
-import { Label } from "./label";
-import { Separator } from "./separator";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (

package/src/components/form.tsx

@@ -13,8 +13,8 @@ import {
   useFormState,
 } from "react-hook-form";
 
-import { cn } from "../lib/utils";
-import { Label } from "./label";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
 
 const Form = FormProvider;
 

package/src/components/hover-card.tsx

@@ -3,7 +3,7 @@
 import { HoverCard as HoverCardPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function HoverCard({
   ...props

package/src/components/input-group.tsx

@@ -3,10 +3,10 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/input-otp.tsx

@@ -4,7 +4,7 @@ import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function InputOTP({
   className,

package/src/components/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (

package/src/components/item.tsx

@@ -1,9 +1,9 @@
-import { Slot as SlotPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
+import { cn } from "../lib/utils.js";
+import { Separator } from "./separator.js";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/kbd.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (

package/src/components/label.tsx

@@ -3,7 +3,7 @@
 import { Label as LabelPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Label({
   className,

package/src/components/language-switcher.tsx

@@ -4,13 +4,13 @@ import { LOCALES, useLocale, useTranslation } from "@arch-cadre/intl";
 import { Languages } from "lucide-react";
 import { useRouter } from "next/navigation";
 import * as React from "react";
-import { Button } from "./button";
+import { Button } from "./button.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "./dropdown-menu";
+} from "./dropdown-menu.js";
 
 export function LanguageSwitcher() {
   const locale = useLocale();

package/src/components/menubar.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Menubar as MenubarPrimitive } from "radix-ui";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Menubar({
   className,

package/src/components/navigation-menu.tsx

@@ -1,9 +1,9 @@
-import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 import { cva } from "class-variance-authority";
 import { ChevronDownIcon } from "lucide-react";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function NavigationMenu({
   className,

package/src/components/pagination.tsx

@@ -8,8 +8,8 @@ import {
 } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
-import { type Button, buttonVariants } from "./button";
+import { cn } from "../lib/utils.js";
+import { type Button, buttonVariants } from "./button.js";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (

package/src/components/popover.tsx

@@ -3,7 +3,7 @@
 import { Popover as PopoverPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Popover({
   ...props

package/src/components/progress.tsx

@@ -3,7 +3,7 @@
 import { Progress as ProgressPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Progress({
   className,

package/src/components/radio-group.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { CircleIcon } from "lucide-react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function RadioGroup({
   className,

package/src/components/scroll-area.tsx

@@ -3,7 +3,7 @@
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function ScrollArea({
   className,
@@ -49,9 +49,9 @@ function ScrollBar({
       className={cn(
         "flex touch-none p-px transition-colors select-none",
         orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
+        "h-full w-2.5 border-l border-l-transparent",
         orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+        "h-2.5 flex-col border-t border-t-transparent",
         className,
       )}
       {...props}

package/src/components/select.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Select as SelectPrimitive } from "radix-ui";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Select({
   ...props
@@ -64,7 +64,7 @@ function SelectContent({
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
         )}
         position={position}
@@ -76,7 +76,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}

package/src/components/separator.tsx

@@ -3,7 +3,7 @@
 import { Separator as SeparatorPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Separator({
   className,

package/src/components/sheet.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Dialog as SheetPrimitive } from "radix-ui";
 import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
@@ -60,13 +60,13 @@ function SheetContent({
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
           className,
         )}
         {...props}

package/src/components/sidebar.tsx

@@ -1,29 +1,29 @@
 /** biome-ignore-all lint/correctness/useExhaustiveDependencies: <any> */
 "use client";
 
-import { Slot as SlotPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
+import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
-import { useIsMobile } from "../hooks/use-mobile";
-import { cn } from "../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Separator } from "./separator";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "./sheet";
-import { Skeleton } from "./skeleton";
+} from "./sheet.js";
+import { Skeleton } from "./skeleton.js";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "./tooltip";
+} from "./tooltip.js";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -569,7 +569,7 @@ function SidebarMenuAction({
         "peer-data-[size=lg]/menu-button:top-3",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
         className,
       )}
       {...props}

package/src/components/skeleton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/slider.tsx

@@ -3,7 +3,7 @@
 import { Slider as SliderPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { cn } from "../lib/utils";
+import { cn } from "../lib/utils.js";
 
 function Slider({
   className,