@contractspec/lib.ui-kit-web 3.7.5 → 3.8.0

package/dist/ui/progress.js

@@ -2,8 +2,8 @@
 var __require = import.meta.require;
 
 // ui/progress.tsx
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Progress({
@@ -13,11 +13,11 @@ function Progress({
 }) {
   return /* @__PURE__ */ jsxDEV(ProgressPrimitive.Root, {
     "data-slot": "progress",
-    className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
     ...props,
     children: /* @__PURE__ */ jsxDEV(ProgressPrimitive.Indicator, {
       "data-slot": "progress-indicator",
-      className: "bg-primary h-full w-full flex-1 transition-all",
+      className: "h-full w-full flex-1 bg-primary transition-all",
       style: { transform: `translateX(-${100 - (value || 0)}%)` }
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);

package/dist/ui/radio-group.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
 declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/ui/radio-group.js

@@ -2,9 +2,9 @@
 var __require = import.meta.require;
 
 // ui/radio-group.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function RadioGroup({
@@ -23,13 +23,13 @@ function RadioGroupItem({
 }) {
   return /* @__PURE__ */ jsxDEV(RadioGroupPrimitive.Item, {
     "data-slot": "radio-group-item",
-    className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+    className: cn("aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
     ...props,
     children: /* @__PURE__ */ jsxDEV(RadioGroupPrimitive.Indicator, {
       "data-slot": "radio-group-indicator",
       className: "relative flex items-center justify-center",
       children: /* @__PURE__ */ jsxDEV(CircleIcon, {
-        className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+        className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary"
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);

package/dist/ui/resizable.d.ts

@@ -1,8 +1,8 @@
-import { Panel } from 'react-resizable-panels';
 import type { GroupProps, SeparatorProps } from 'react-resizable-panels';
+import { Panel } from 'react-resizable-panels';
 declare const ResizablePanelGroup: ({ className, ...props }: GroupProps) => import("react/jsx-runtime").JSX.Element;
 declare const ResizablePanel: typeof Panel;
 declare const ResizableHandle: ({ withHandle, className, ...props }: SeparatorProps & {
     withHandle?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/resizable.js

@@ -2,9 +2,9 @@
 var __require = import.meta.require;
 
 // ui/resizable.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { GripVertical } from "lucide-react";
 import { Group, Panel, Separator } from "react-resizable-panels";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsxDEV(Group, {
@@ -17,10 +17,10 @@ var ResizableHandle = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsxDEV(Separator, {
-  className: cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90", className),
+  className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90", className),
   ...props,
   children: withHandle && /* @__PURE__ */ jsxDEV("div", {
-    className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",
+    className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border",
     children: /* @__PURE__ */ jsxDEV(GripVertical, {
       className: "h-2.5 w-2.5"
     }, undefined, false, undefined, this)

package/dist/ui/scroll-area.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
 export { ScrollArea, ScrollBar };

package/dist/ui/scroll-area.js

@@ -2,8 +2,8 @@
 var __require = import.meta.require;
 
 // ui/scroll-area.tsx
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function ScrollArea({
@@ -18,7 +18,7 @@ function ScrollArea({
     children: [
       /* @__PURE__ */ jsxDEV(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
-        className: "focus-visible:ring-ring/50 size-full rounded-[inherit] outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+        className: "size-full rounded-[inherit] outline-hidden transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50",
         children
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(ScrollBar, {}, undefined, false, undefined, this),
@@ -34,11 +34,11 @@ function ScrollBar({
   return /* @__PURE__ */ jsxDEV(ScrollAreaPrimitive.ScrollAreaScrollbar, {
     "data-slot": "scroll-area-scrollbar",
     orientation,
-    className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+    className: cn("flex touch-none select-none p-px transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
     ...props,
     children: /* @__PURE__ */ jsxDEV(ScrollAreaPrimitive.ScrollAreaThumb, {
       "data-slot": "scroll-area-thumb",
-      className: "bg-border relative flex-1 rounded-full"
+      className: "relative flex-1 rounded-full bg-border"
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }

package/dist/ui/section.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 declare const sectionVariants: (props?: ({
     width?: "container" | "narrow" | "wide" | "fluid" | null | undefined;
     px?: "none" | "sm" | "lg" | "md" | null | undefined;

package/dist/ui/section.js

@@ -2,8 +2,8 @@
 var __require = import.meta.require;
 
 // ui/section.tsx
-import { cva } from "class-variance-authority";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
 import { jsxDEV } from "react/jsx-dev-runtime";
 var sectionVariants = cva("", {
   variants: {

package/dist/ui/select.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/select.js

@@ -2,9 +2,9 @@
 var __require = import.meta.require;
 
 // ui/select.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Select({
@@ -40,7 +40,7 @@ function SelectTrigger({
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
-    className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input focus-visible:border-ring focus-visible:ring-ring/50 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    className: cn("flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
     ...props,
     children: [
       children,
@@ -62,7 +62,7 @@ function SelectContent({
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Portal, {
     children: /* @__PURE__ */ jsxDEV(SelectPrimitive.Content, {
       "data-slot": "select-content",
-      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-32 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", className),
+      className: cn("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-32 origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
       position,
       ...props,
       children: [
@@ -82,7 +82,7 @@ function SelectLabel({
 }) {
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Label, {
     "data-slot": "select-label",
-    className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+    className: cn("px-2 py-1.5 text-muted-foreground text-xs", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -93,7 +93,7 @@ function SelectItem({
 }) {
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Item, {
     "data-slot": "select-item",
-    className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+    className: cn("relative flex w-full cursor-default select-none items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
     ...props,
     children: [
       /* @__PURE__ */ jsxDEV("span", {
@@ -116,7 +116,7 @@ function SelectSeparator({
 }) {
   return /* @__PURE__ */ jsxDEV(SelectPrimitive.Separator, {
     "data-slot": "select-separator",
-    className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+    className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/separator.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
 declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Separator };

package/dist/ui/separator.js

@@ -2,8 +2,8 @@
 var __require = import.meta.require;
 
 // ui/separator.tsx
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Separator({
@@ -16,7 +16,7 @@ function Separator({
     "data-slot": "separator",
     decorative,
     orientation,
-    className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+    className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/sheet.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
 declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
@@ -10,4 +10,4 @@ declare function SheetHeader({ className, ...props }: React.ComponentPropsWithou
 declare function SheetFooter({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
 declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
-export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };

package/dist/ui/sheet.js

@@ -2,9 +2,9 @@
 var __require = import.meta.require;
 
 // ui/sheet.tsx
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { cn } from "@contractspec/lib.ui-kit-core/utils";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Sheet({ ...props }) {
@@ -43,7 +43,7 @@ function SheetOverlay({
 }) {
   return /* @__PURE__ */ jsxDEV(SheetPrimitive.Overlay, {
     "data-slot": "sheet-overlay",
-    className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in", className),
     ...props
   }, undefined, false, undefined, this);
 }
@@ -58,12 +58,12 @@ function SheetContent({
       /* @__PURE__ */ jsxDEV(SheetOverlay, {}, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(SheetPrimitive.Content, {
         "data-slot": "sheet-content",
-        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", 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", 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", 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", className),
+        className: cn("fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in 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", 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", 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", 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", className),
         ...props,
         children: [
           children,
           /* @__PURE__ */ jsxDEV(SheetPrimitive.Close, {
-            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+            className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
             children: [
               /* @__PURE__ */ jsxDEV(XIcon, {
                 className: "size-4"
@@ -105,7 +105,7 @@ function SheetTitle({
 }) {
   return /* @__PURE__ */ jsxDEV(SheetPrimitive.Title, {
     "data-slot": "sheet-title",
-    className: cn("text-foreground font-semibold", className),
+    className: cn("font-semibold text-foreground", className),
     ...props
   }, undefined, false, undefined, this);
 }

package/dist/ui/sidebar.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { Button } from './button';
 import { Input } from './input';
 import { Separator } from './separator';