gladvn 0.2.16 → 0.2.18

package/src/components/micro/aspect-ratio.tsx

@@ -5,9 +5,10 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { cn } from "../../lib/utils";
 import * as React from "react";
 
+import { cn } from "../../lib/utils";
+
 /**
  * @description Displays content within a desired ratio.
  * @example

package/src/components/micro/avatar.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import * as React from "react";
 
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 

package/src/components/micro/badge.tsx

@@ -5,9 +5,11 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
+import * as React from "react";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 
@@ -169,8 +171,6 @@ const badgeVariants = cva(
   },
 );
 
-import * as React from "react";
-
 /**
  * @description Displays a badge or a component that looks like a badge.
  * @example

package/src/components/micro/breadcrumb.tsx

@@ -5,12 +5,13 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
+import * as React from "react";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 
 /**
  * @description Displays the path to the current resource using a hierarchy of links.

package/src/components/micro/button.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { Button } from "./button";
 
 describe("Button", () => {

package/src/components/micro/button.tsx

@@ -5,10 +5,12 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
+import * as React from "react";
+
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 
@@ -291,8 +293,6 @@ const buttonVariants = cva(
   },
 );
 
-import * as React from "react";
-
 /**
  * @description Displays a button or a component that looks like a button.
  * @example

package/src/components/micro/calendar.tsx

@@ -7,14 +7,19 @@
  */
 "use client";
 
-import { type Size } from "../../lib/types";
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
+
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
 import {
-  DayPicker,
-  getDefaultClassNames,
   type DayButton,
+  DayPicker,
   type Locale,
+  getDefaultClassNames,
 } from "react-day-picker";
 
 import { buttonVariants } from "../../components/micro/button";
@@ -24,12 +29,8 @@ import {
   SelectItem,
   SelectTrigger,
 } from "../../components/micro/select";
+import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
 
 function getDropdownLabel(
   options: Array<{ value: number | string; label: string }> | undefined,

package/src/components/micro/carousel.tsx

@@ -7,13 +7,14 @@
  */
 "use client";
 
+import * as React from "react";
+
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react";
-import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

package/src/components/micro/chart.tsx

@@ -8,6 +8,7 @@
 "use client";
 
 import * as React from "react";
+
 import type { TooltipValueType } from "recharts";
 import * as RechartsPrimitive from "recharts";
 

package/src/components/micro/checkbox.tsx

@@ -7,10 +7,10 @@
  */
 "use client";
 
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import * as React from "react";
 
-import { cva, type VariantProps } from "class-variance-authority";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";

package/src/components/micro/collapsible.tsx

@@ -7,10 +7,12 @@
  */
 "use client";
 
-import { cn } from "../../lib/utils";
-import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
 import * as React from "react";
 
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+import { cn } from "../../lib/utils";
+
 /**
  * @description An interactive component which expands/collapses a panel.
  * @requires CollapsibleTrigger, CollapsibleContent

package/src/components/micro/combobox.tsx

@@ -14,13 +14,14 @@
  */
 "use client";
 
-import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 import * as React from "react";
 
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+
 import { InputGroupButton } from "../../components/micro/input-group";
-import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { cn } from "../../lib/utils";
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 
 const ComboboxContext = React.createContext<{
   anchor: Element | null;
@@ -78,6 +79,12 @@ function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
       data-slot="combobox-input"
       className={cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        // Clear standalone styles when inside InputGroup
+        "group-data-[slot=input-group]/input-group:border-0",
+        "group-data-[slot=input-group]/input-group:shadow-none",
+        "group-data-[slot=input-group]/input-group:h-auto",
+        "group-data-[slot=input-group]/input-group:rounded-none",
+        "group-data-[slot=input-group]/input-group:focus-visible:ring-0",
         className,
       )}
       {...props}
@@ -92,30 +99,43 @@ const ComboboxContent = React.forwardRef<
       ComboboxPrimitive.Positioner.Props,
       "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
     >
->(({ className, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, anchor, ...props }, ref) => {
-  const { anchor: contextAnchor } = React.useContext(ComboboxContext);
-  return (
-    <ComboboxPrimitive.Positioner
-      side={side}
-      sideOffset={sideOffset}
-      align={align}
-      alignOffset={alignOffset}
-      anchor={anchor || contextAnchor}
-      className="isolate z-50"
-    >
-      <ComboboxPrimitive.Popup
-        ref={ref}
-        data-slot="combobox-content"
-        data-chips={!!anchor}
-        className={cn(
-          "group/combobox-content relative max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 p-1 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 [&_[data-slot=input-group]]:mb-1 [&_[data-slot=input-group]]:w-full [&_[data-slot=input-group]]:border-input/30 [&_[data-slot=input-group]]:bg-input/30 [&_[data-slot=input-group]]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className,
-        )}
-        {...props}
-      />
-    </ComboboxPrimitive.Positioner>
-  );
-});
+>(
+  (
+    {
+      className,
+      side = "bottom",
+      sideOffset = 4,
+      align = "start",
+      alignOffset = 0,
+      anchor,
+      ...props
+    },
+    ref,
+  ) => {
+    const { anchor: contextAnchor } = React.useContext(ComboboxContext);
+    return (
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor || contextAnchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          ref={ref}
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "group/combobox-content relative max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 p-1 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 [&_[data-slot=input-group]]:mb-1 [&_[data-slot=input-group]]:w-full [&_[data-slot=input-group]]:border-input/30 [&_[data-slot=input-group]]:bg-input/30 [&_[data-slot=input-group]]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    );
+  },
+);
 ComboboxContent.displayName = "ComboboxContent";
 
 function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
@@ -214,8 +234,6 @@ function ComboboxSeparator({
 
 const ComboboxPortal = ComboboxPrimitive.Portal;
 
-import { cva, type VariantProps } from "class-variance-authority";
-
 const comboboxChipsVariants = cva(
   "group/combobox-chips flex flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:focus-within:ring-3 has-aria-invalid:focus-within:ring-destructive/20 has-[[data-slot=combobox-chip]]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:focus-within:ring-destructive/40 has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:pointer-events-none",
   {

package/src/components/micro/command.tsx

@@ -7,14 +7,18 @@
  */
 "use client";
 
-import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 
-import { InputGroup, InputGroupAddon } from "../../components/micro/input-group";
-import { cn } from "../../lib/utils";
+import { cva } from "class-variance-authority";
+import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "../../components/micro/input-group";
 import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
 
 const CommandContext = React.createContext<{ size: Size }>({ size: "md" });
 
@@ -38,7 +42,6 @@ const Command = React.forwardRef<
 ));
 Command.displayName = "Command";
 
-
 const commandInputVariants = cva(
   "w-full outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
   {
@@ -52,7 +55,7 @@ const commandInputVariants = cva(
     defaultVariants: {
       size: "md",
     },
-  }
+  },
 );
 
 const CommandInput = React.forwardRef<
@@ -61,21 +64,21 @@ const CommandInput = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const { size } = React.useContext(CommandContext);
   return (
-    <div 
-      data-slot="command-input-wrapper" 
+    <div
+      data-slot="command-input-wrapper"
       className={cn(
         "pb-0",
         size === "sm" && "p-1",
         size === "md" && "p-2",
-        size === "lg" && "p-3"
+        size === "lg" && "p-3",
       )}
     >
-      <InputGroup 
+      <InputGroup
         className={cn(
           "rounded-lg border-input/30 bg-input/30 shadow-none",
           size === "sm" && "h-8",
           size === "md" && "h-10",
-          size === "lg" && "h-11"
+          size === "lg" && "h-11",
         )}
       >
         <CommandPrimitive.Input
@@ -84,8 +87,12 @@ const CommandInput = React.forwardRef<
           className={cn(commandInputVariants({ size }), className)}
           {...props}
         />
-        <InputGroupAddon className={cn("shrink-0", size === "lg" ? "pl-3" : "pl-2")}>
-          <SearchIcon className={cn("opacity-50", size === "lg" ? "size-5" : "size-4")} />
+        <InputGroupAddon
+          className={cn("shrink-0", size === "lg" ? "pl-3" : "pl-2")}
+        >
+          <SearchIcon
+            className={cn("opacity-50", size === "lg" ? "size-5" : "size-4")}
+          />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -123,7 +130,7 @@ const CommandEmpty = React.forwardRef<
         size === "sm" && "py-4 text-xs",
         size === "md" && "py-6 text-sm",
         size === "lg" && "py-8 text-base",
-        className
+        className,
       )}
       {...props}
     />
@@ -144,7 +151,7 @@ const commandGroupVariants = cva(
     defaultVariants: {
       size: "md",
     },
-  }
+  },
 );
 
 const CommandGroup = React.forwardRef<
@@ -189,7 +196,7 @@ const commandItemVariants = cva(
     defaultVariants: {
       size: "md",
     },
-  }
+  },
 );
 
 const CommandItem = React.forwardRef<

package/src/components/micro/context-menu.tsx

@@ -7,12 +7,13 @@
  */
 "use client";
 
-import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
+import { cn } from "../../lib/utils";
+
 type ContextMenuVariant = "destructive";
 
 /**

package/src/components/micro/dialog.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import * as React from "react";
 
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+
 import { cn } from "../../lib/utils";
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {

package/src/components/micro/drawer.tsx

@@ -8,9 +8,10 @@
 "use client";
 
 import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
+
 // Fix TS2883: The inferred type cannot be named without a reference to @radix-ui/react-dialog
 import type {} from "@radix-ui/react-dialog";
+import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "../../lib/utils";
 

package/src/components/micro/dropdown-menu.tsx

@@ -7,12 +7,13 @@
  */
 "use client";
 
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
+import { cn } from "../../lib/utils";
+
 export type DropdownMenuVariant = "destructive";
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {

package/src/components/micro/empty.tsx

@@ -5,9 +5,10 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { type VariantProps, cva } from "class-variance-authority";
+
 import { cn } from "../../lib/utils";
 
 /**

package/src/components/micro/field.tsx

@@ -7,10 +7,11 @@
  */
 "use client";
 
-import { cva, type VariantProps } from "class-variance-authority";
-import { AlertCircleIcon } from "lucide-react";
 import * as React from "react";
 
+import { type VariantProps, cva } from "class-variance-authority";
+import { AlertCircleIcon } from "lucide-react";
+
 import { Label } from "../../components/micro/label";
 import { Separator } from "../../components/micro/separator";
 import { cn } from "../../lib/utils";
@@ -112,7 +113,7 @@ const fieldVariants = cva("group/field flex min-w-fit", {
 const Field = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
-  VariantProps<typeof fieldVariants> & { error?: boolean | string }
+    VariantProps<typeof fieldVariants> & { error?: boolean | string }
 >(
   (
     { className, orientation = "vertical", size = "md", error, ...props },

package/src/components/micro/hover-card.tsx

@@ -8,6 +8,7 @@
 "use client";
 
 import * as React from "react";
+
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
 
 import { cn } from "../../lib/utils";
@@ -60,27 +61,27 @@ const HoverCardContent = React.forwardRef<
   ) => {
     return (
       <PreviewCardPrimitive.Positioner
-            align={align}
-            alignOffset={alignOffset}
-            side={side}
-            sideOffset={sideOffset}
-            className="isolate"
-          >
-            <PreviewCardPrimitive.Popup
-              ref={ref}
-              data-slot="hover-card-content"
-              className={cn(
-                "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100",
-                "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
-                "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none motion-reduce:transition-none",
-                className,
-              )}
-              {...props}
-            />
-          </PreviewCardPrimitive.Positioner>
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate"
+      >
+        <PreviewCardPrimitive.Popup
+          ref={ref}
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100",
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none motion-reduce:transition-none",
+            className,
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
     );
   },
 );
 HoverCardContent.displayName = "HoverCardContent";
 
-export { HoverCard, HoverCardContent, HoverCardTrigger, HoverCardPortal };
+export { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger };

package/src/components/micro/input-group.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { type VariantProps, cva } from "class-variance-authority";
+
 import { cn } from "../../lib/utils";
 
 /* ── InputGroup ─────────────────────────────────────────────────
@@ -224,9 +225,9 @@ const InputGroupInput = React.forwardRef<
       data-slot="input-group-control"
       className={cn(
         "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
-        "group-data-[size=sm]/input-group:h-7 group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:py-0.5 group-data-[size=sm]/input-group:text-xs",
-        "group-data-[size=md]/input-group:h-8 group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:py-1 group-data-[size=md]/input-group:text-sm",
-        "group-data-[size=lg]/input-group:h-9 group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-sm",
+        "group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:py-0.5 group-data-[size=sm]/input-group:text-xs",
+        "group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:py-1 group-data-[size=md]/input-group:text-sm",
+        "group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-sm",
         className,
       )}
       {...props}

package/src/components/micro/input-otp.tsx

@@ -7,10 +7,11 @@
  */
 "use client";
 
-import { cva, type VariantProps } from "class-variance-authority";
-import { OTPInput, OTPInputContext } from "input-otp";
 import * as React from "react";
 
+import { type VariantProps, cva } from "class-variance-authority";
+import { OTPInput, OTPInputContext } from "input-otp";
+
 import { cn } from "../../lib/utils";
 
 const inputOTPVariants = cva(

package/src/components/micro/input.tsx

@@ -5,10 +5,11 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { type VariantProps, cva } from "class-variance-authority";
+
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 

package/src/components/micro/item.tsx

@@ -6,6 +6,7 @@
  * - CSS Delegated Logic
  */
 import * as React from "react";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";

package/src/components/micro/label.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { type VariantProps, cva } from "class-variance-authority";
+
 import { cn } from "../../lib/utils";
 
 const labelVariants = cva(

package/src/components/micro/menubar.tsx

@@ -8,8 +8,10 @@
 "use client";
 
 import * as React from "react";
+
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+import { CheckIcon } from "lucide-react";
 
 import {
   DropdownMenu,
@@ -27,7 +29,6 @@ import {
   DropdownMenuTrigger,
 } from "../../components/micro/dropdown-menu";
 import { cn } from "../../lib/utils";
-import { CheckIcon } from "lucide-react";
 
 /**
  * @description A visually persistent menu common in desktop applications.