sonance-brand-mcp 1.3.110 → 1.3.112

package/dist/assets/components/navbar.tsx

@@ -13,14 +13,30 @@ interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
 export const Navbar = forwardRef<HTMLElement, NavbarProps>(
   ({ className, variant = "default", sticky = false, bordered = true, children, ...props }, ref) => {
     const variantClasses = {
-      default: "bg-background",
+      default: "bg-white/70 dark:bg-white/[0.03] backdrop-blur-lg",
       dark: "bg-sonance-charcoal text-sonance-white",
       transparent: "bg-transparent",
-      blur: "bg-backdrop backdrop-blur-md",
+      blur: "bg-white/60 dark:bg-black/40 backdrop-blur-xl",
+    };
+
+    const borderClasses = {
+      default: "border-b border-black/8 dark:border-white/8",
+      dark: "border-b border-white/10",
+      transparent: "",
+      blur: "border-b border-black/8 dark:border-white/8",
     };
 
     return (
-      <nav data-sonance-name="navbar"
+      <nav
+        ref={ref}
+        data-sonance-name="navbar"
+        className={cn(
+          "w-full px-4 md:px-6 py-3",
+          variantClasses[variant],
+          bordered && borderClasses[variant],
+          sticky && "sticky top-0 z-50",
+          className
+        )}
         {...props}
       >
         {children}
@@ -133,7 +149,8 @@ export function NavbarMobileMenu({ isOpen, children, className }: NavbarMobileMe
     <div
       className={cn(
         "md:hidden absolute left-0 right-0 top-full",
-        "bg-background border-b border-border shadow-lg",
+        "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+        "border-b border-black/10 dark:border-white/10 shadow-xl",
         "animate-in slide-in-from-top-2 duration-200",
         className
       )}
@@ -198,7 +215,7 @@ export function ResponsiveNavbar({
             {item.label}
           </a>
         ))}
-        {actions && <div className="pt-4 border-t border-border">{actions}</div>}
+        {actions && <div className="pt-4 border-t border-black/8 dark:border-white/8">{actions}</div>}
       </NavbarMobileMenu>
     </Navbar>
   );

package/dist/assets/components/navigation-menu.tsx

@@ -12,6 +12,7 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
+    data-sonance-name="navigation-menu"
     className={cn(
       "relative z-10 flex max-w-max flex-1 items-center justify-center",
       className
@@ -42,7 +43,16 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-sm bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-secondary-hover hover:text-foreground focus:bg-secondary-hover focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary-hover/50 data-[state=open]:bg-secondary-hover/50"
+  cn(
+    "group inline-flex h-10 w-max items-center justify-center rounded-xl px-4 py-2 text-sm font-medium",
+    "transition-all duration-150",
+    "bg-transparent backdrop-blur-sm",
+    "hover:bg-white/60 dark:hover:bg-white/10 hover:text-foreground",
+    "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground focus:outline-none",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "data-[active]:bg-white/50 dark:data-[active]:bg-white/8",
+    "data-[state=open]:bg-white/60 dark:data-[state=open]:bg-white/10"
+  )
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -70,7 +80,12 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      "left-0 top-0 w-full",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+      "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+      "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+      "md:absolute md:w-auto",
       className
     )}
     {...props}
@@ -84,10 +99,18 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div data-sonance-name="navigation-menu" className={cn("absolute left-0 top-full flex justify-center")}>
+  <div
+    data-sonance-name="navigation-menu"
+    className={cn("absolute left-0 top-full flex justify-center")}
+  >
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-sm border border-border bg-card text-foreground shadow-lg",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
+        "rounded-xl backdrop-blur-xl",
+        "bg-white/90 dark:bg-black/80",
+        "border border-black/10 dark:border-white/10",
+        "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+        "text-foreground",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
@@ -115,7 +138,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-white/80 dark:bg-white/10 shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =
@@ -132,4 +155,3 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
 };
-

package/dist/assets/components/pagination.tsx

@@ -8,14 +8,14 @@ import { cn } from "@/lib/utils";
 export type PaginationButtonState = "default" | "hover" | "focus" | "active" | "disabled";
 
 const paginationButtonVariants = cva(
-  "flex items-center justify-center font-medium border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2",
+  "flex items-center justify-center font-medium border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30 focus:ring-offset-2 backdrop-blur-sm",
   {
     variants: {
       size: {
-        xs: "h-6 min-w-6 px-1.5 text-[10px] rounded-md",
-        sm: "h-7 min-w-7 px-2 text-xs rounded-lg",
-        md: "h-8 min-w-8 px-2.5 text-sm rounded-lg",
-        lg: "h-9 min-w-9 px-3 text-sm rounded-xl",
+        xs: "h-6 min-w-6 px-1.5 text-[10px] rounded-lg",
+        sm: "h-7 min-w-7 px-2 text-xs rounded-xl",
+        md: "h-8 min-w-8 px-2.5 text-sm rounded-xl",
+        lg: "h-9 min-w-9 px-3 text-sm rounded-2xl",
       },
     },
     defaultVariants: {
@@ -29,9 +29,9 @@ const getButtonStateStyles = (state?: PaginationButtonState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "bg-secondary-hover",
-    focus: "ring-2 ring-primary/20 ring-offset-2",
-    active: "bg-primary text-primary-foreground border-primary",
+    hover: "bg-white/50 dark:bg-white/10",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2",
+    active: "bg-[color:var(--sonance-blue)] text-white border-[color:var(--sonance-blue)]",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -194,10 +194,10 @@ const PaginationButton = forwardRef<HTMLButtonElement, PaginationButtonProps>(
         className={cn(
           paginationButtonVariants({ size }),
           isActive
-            ? "bg-primary text-primary-foreground border-primary"
+            ? "bg-[color:var(--sonance-blue)] text-white border-[color:var(--sonance-blue)]"
             : isDisabled
             ? "bg-transparent text-foreground-subtle border-transparent cursor-not-allowed"
-            : "bg-transparent text-foreground border-border hover:bg-secondary-hover",
+            : "bg-white/60 dark:bg-white/5 text-foreground border-black/8 dark:border-white/8 hover:bg-white/70 dark:hover:bg-white/10 hover:border-black/12 dark:hover:border-white/12",
           getButtonStateStyles(state),
           className
         )} data-sonance-name="pagination"

package/dist/assets/components/popover.tsx

@@ -16,18 +16,20 @@ const popoverVariants = cva(
   {
     variants: {
       size: {
-        compact: "rounded-lg",
-        default: "rounded-xl",
-        spacious: "rounded-2xl",
+        compact: "rounded-xl",
+        default: "rounded-2xl",
+        spacious: "rounded-3xl",
       },
       popoverVariant: {
-        default: "bg-card border-border",
-        glass: "bg-card/95 border-border/50 backdrop-blur-xl",
+        // Glass morphism - default style
+        default: "bg-white/90 dark:bg-black/70 border-black/10 dark:border-white/10 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+        // Non-glass solid variant
+        solid: "bg-card border-border backdrop-blur-none",
       },
     },
     defaultVariants: {
       size: "default",
-      popoverVariant: "glass",
+      popoverVariant: "default",
     },
   }
 );
@@ -58,7 +60,7 @@ export function Popover({
   triggerOn = "click",
   className,
   size = "default",
-  popoverVariant = "glass",
+  popoverVariant = "default",
 }: PopoverProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [portalPosition, setPortalPosition] = useState<PortalPosition>({ top: 0, left: 0 });
@@ -178,7 +180,7 @@ export function Popover({
   };
 
   return (
-    <PopoverContext.Provider value={{ size }}>
+    <PopoverContext.Provider value={{ size: size ?? "default" }}>
       <div data-sonance-name="popover"
         ref={containerRef}
         className="relative inline-block"

package/dist/assets/components/progress.tsx

@@ -42,12 +42,14 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
           aria-valuemax={max}
           aria-valuenow={value}
           className={cn(
-            "w-full overflow-hidden rounded-full bg-background-secondary",
+            "w-full overflow-hidden rounded-full",
+            "bg-white/60 dark:bg-white/[0.05] backdrop-blur-sm",
+            "border border-black/5 dark:border-white/5",
             heightClasses[size]
           )}
         >
           <div
-            className="h-full bg-primary transition-all duration-300 ease-out"
+            className="h-full bg-[color:var(--sonance-blue)] transition-all duration-300 ease-out"
             style={{ width: `${percentage}%` }}
           />
         </div>
@@ -99,7 +101,7 @@ export function CircularProgress({
           fill="none"
           stroke="currentColor"
           strokeWidth={strokeWidth}
-          className="text-background-secondary"
+          className="text-black/10 dark:text-white/10"
         />
         {/* Progress circle */}
         <circle
@@ -112,7 +114,7 @@ export function CircularProgress({
           strokeLinecap="round"
           strokeDasharray={circumference}
           strokeDashoffset={strokeDashoffset}
-          className="text-primary transition-all duration-300 ease-out"
+          className="text-[color:var(--sonance-blue)] transition-all duration-300 ease-out"
         />
       </svg>
       {showValue && (

package/dist/assets/components/radio-group.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 export type RadioGroupItemState = "default" | "hover" | "focus" | "checked" | "disabled";
 
 const radioItemVariants = cva(
-  "peer shrink-0 appearance-none rounded-full border border-border bg-input transition-all duration-150 hover:border-border-hover checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+  "peer shrink-0 appearance-none rounded-full border transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30 focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 backdrop-blur-sm bg-white/60 dark:bg-white/5 border-black/8 dark:border-white/8 hover:border-black/15 dark:hover:border-white/15 checked:border-[color:var(--sonance-blue)]",
   {
     variants: {
       size: {
@@ -35,9 +35,9 @@ const getStateStyles = (state?: RadioGroupItemState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "border-border-hover",
-    focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
-    checked: "border-primary",
+    hover: "border-black/15 dark:border-white/15",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    checked: "border-[color:var(--sonance-blue)]",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -142,7 +142,7 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
           />
           <div data-sonance-name="radio-group"
             className={cn(
-              "pointer-events-none absolute rounded-full bg-primary",
+              "pointer-events-none absolute rounded-full bg-[color:var(--sonance-blue)]",
               "scale-0 transition-all duration-150",
               radioIndicatorSizes[size],
               isChecked && "scale-100"

package/dist/assets/components/select.tsx

@@ -8,18 +8,22 @@ import { cn } from "@/lib/utils";
 export type SelectState = "default" | "hover" | "focus" | "open" | "error" | "disabled";
 
 const selectTriggerVariants = cva(
-  "flex w-full items-center justify-between border border-input-border bg-input text-left text-foreground transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full items-center justify-between text-left text-foreground transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 backdrop-blur-sm",
   {
     variants: {
       size: {
-        xs: "h-7 px-2.5 text-xs rounded-md",
-        sm: "h-8 px-3 text-sm rounded-lg",
-        md: "h-9 px-3.5 text-sm rounded-lg",
-        lg: "h-10 px-4 text-sm rounded-xl",
+        xs: "h-7 px-3 text-xs rounded-lg",
+        sm: "h-8 px-3.5 text-sm rounded-xl",
+        md: "h-9 px-4 text-sm rounded-xl",
+        lg: "h-10 px-4 text-sm rounded-2xl",
       },
       selectVariant: {
-        default: "hover:border-border-hover focus:border-input-focus focus:ring-2 focus:ring-primary/10",
-        glass: "bg-input/80 backdrop-blur-sm hover:border-border-hover focus:border-input-focus focus:ring-2 focus:ring-primary/20",
+        // Glass morphism - default style
+        default:
+          "bg-white/60 dark:bg-white/[0.03] border border-black/8 dark:border-white/8 hover:border-black/12 dark:hover:border-white/12 focus:border-[color:var(--sonance-blue)] focus:shadow-[0_0_20px_var(--glow-primary)] focus:ring-0",
+        // Non-glass solid variant for fallback
+        solid:
+          "bg-input border border-input-border hover:border-border-hover focus:border-input-focus focus:ring-2 focus:ring-primary/10 backdrop-blur-none",
       },
     },
     defaultVariants: {
@@ -30,14 +34,26 @@ const selectTriggerVariants = cva(
 );
 
 // State styles for Storybook/Figma visualization
-const getStateStyles = (state?: SelectState) => {
+const getStateStyles = (state?: SelectState, selectVariant?: string | null) => {
   if (!state || state === "default") return "";
 
+  if (selectVariant === "solid") {
+    const stateMap: Record<string, string> = {
+      hover: "border-border-hover",
+      focus: "border-input-focus ring-2 ring-primary/10",
+      open: "border-input-focus ring-2 ring-primary/10",
+      error: "border-error ring-2 ring-error/10",
+      disabled: "opacity-50 cursor-not-allowed",
+    };
+    return stateMap[state] || "";
+  }
+
+  // Glass variant states
   const stateMap: Record<string, string> = {
-    hover: "border-border-hover",
-    focus: "border-input-focus ring-2 ring-primary/10",
-    open: "border-input-focus ring-2 ring-primary/10",
-    error: "border-error ring-2 ring-error/10",
+    hover: "border-black/12 dark:border-white/12",
+    focus: "border-[color:var(--sonance-blue)] shadow-[0_0_20px_var(--glow-primary)]",
+    open: "border-[color:var(--sonance-blue)] shadow-[0_0_20px_var(--glow-primary)]",
+    error: "border-error shadow-[0_0_15px_rgba(198,40,40,0.2)]",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -139,9 +155,9 @@ export function Select({
           style={style}
           className={cn(
             selectTriggerVariants({ size, selectVariant }),
-            hasError && "border-error ring-2 ring-error/10",
-            (isOpen || isOpenState) && "border-input-focus ring-2 ring-primary/10",
-            getStateStyles(state)
+            hasError && (selectVariant === "solid" ? "border-error ring-2 ring-error/10" : "border-error shadow-[0_0_15px_rgba(198,40,40,0.2)]"),
+            (isOpen || isOpenState) && (selectVariant === "solid" ? "border-input-focus ring-2 ring-primary/10" : "border-[color:var(--sonance-blue)] shadow-[0_0_20px_var(--glow-primary)]"),
+            getStateStyles(state, selectVariant)
           )}
         >
           <span id="span-selectedoptionlabel-" className={cn(!selectedOption && "text-input-placeholder")}>
@@ -158,8 +174,11 @@ export function Select({
         {isOpen && (
           <div
             className={cn(
-              "absolute z-50 mt-1.5 w-full rounded-xl border border-border bg-card/95 backdrop-blur-md shadow-xl",
-              "max-h-60 overflow-auto p-1",
+              "absolute z-50 mt-2 w-full rounded-2xl backdrop-blur-xl",
+              "bg-white/90 dark:bg-black/80",
+              "border border-black/10 dark:border-white/10",
+              "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+              "max-h-60 overflow-auto p-1.5",
               "animate-in fade-in-0 zoom-in-95 duration-150"
             )}
           >
@@ -170,11 +189,11 @@ export function Select({
                 onClick={() => !option.disabled && handleSelect(option.value)}
                 disabled={option.disabled}
                 className={cn(
-                  "flex w-full items-center justify-between px-3 py-2 text-left text-sm rounded-lg",
-                  "transition-colors duration-150",
+                  "flex w-full items-center justify-between px-3 py-2 text-left text-sm rounded-xl",
+                  "transition-all duration-150",
                   option.value === value
-                    ? "bg-primary text-primary-foreground"
-                    : "text-foreground hover:bg-secondary-hover",
+                    ? "bg-[color:var(--sonance-blue)] text-white"
+                    : "text-foreground hover:bg-white/50 dark:hover:bg-white/10",
                   option.disabled && "cursor-not-allowed opacity-50"
                 )}
               >
@@ -223,10 +242,10 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     const hasError = error || state === "error";
 
     const sizeClasses = {
-      xs: "h-7 px-2.5 pr-8 text-xs rounded-md",
-      sm: "h-8 px-3 pr-9 text-sm rounded-lg",
-      md: "h-9 px-3.5 pr-9 text-sm rounded-lg",
-      lg: "h-10 px-4 pr-10 text-sm rounded-xl",
+      xs: "h-7 px-3 pr-8 text-xs rounded-lg",
+      sm: "h-8 px-3.5 pr-9 text-sm rounded-xl",
+      md: "h-9 px-4 pr-9 text-sm rounded-xl",
+      lg: "h-10 px-4 pr-10 text-sm rounded-2xl",
     };
 
     return (
@@ -241,13 +260,14 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             ref={ref}
             disabled={isDisabled}
             className={cn(
-              "w-full appearance-none border border-input-border bg-input",
+              "w-full appearance-none backdrop-blur-sm",
+              "bg-white/60 dark:bg-white/[0.03] border border-black/8 dark:border-white/8",
               sizeClasses[size],
               "text-foreground transition-all duration-200",
-              "hover:border-border-hover",
-              "focus:border-input-focus focus:outline-none focus:ring-2 focus:ring-primary/10",
+              "hover:border-black/12 dark:hover:border-white/12",
+              "focus:border-[color:var(--sonance-blue)] focus:outline-none focus:shadow-[0_0_20px_var(--glow-primary)]",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              hasError && "border-error ring-2 ring-error/10",
+              hasError && "border-error shadow-[0_0_15px_rgba(198,40,40,0.2)]",
               getNativeSelectStateStyles(state),
               className
             )} data-sonance-name="select"

package/dist/assets/components/separator.tsx

@@ -13,12 +13,13 @@ const Separator = React.forwardRef<
     { className, orientation = "horizontal", decorative = true, ...props },
     ref
   ) => (
-    <SeparatorPrimitive.Root data-sonance-name="separator"
+    <SeparatorPrimitive.Root
+      data-sonance-name="separator"
       ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
+        "shrink-0 bg-black/8 dark:bg-white/8",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}
@@ -29,4 +30,3 @@ const Separator = React.forwardRef<
 Separator.displayName = SeparatorPrimitive.Root.displayName
 
 export { Separator }
-

package/dist/assets/components/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-white/90 dark:bg-black/80 backdrop-blur-xl p-6 shadow-xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-black/10 dark:border-white/10",
   {
     variants: {
       side: {
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-xl p-1.5 opacity-70 transition-all hover:opacity-100 hover:bg-white/50 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span id="sheet-content-span-close" className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -116,7 +116,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-foreground-muted", className)}
     {...props}
   />
 ))

package/dist/assets/components/sidebar.tsx

@@ -240,7 +240,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:border group-data-[variant=floating]:border-black/8 dark:group-data-[variant=floating]:border-white/8 group-data-[variant=floating]:shadow-xl group-data-[variant=floating]:backdrop-blur-lg"
           >
             {children}
           </div>
@@ -433,7 +433,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-sm px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "duration-200 flex h-8 shrink-0 items-center rounded-xl px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -454,7 +454,7 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-sm p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-all hover:bg-white/50 dark:hover:bg-white/10 hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -506,13 +506,13 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-sm p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding,background-color] hover:bg-white/50 dark:hover:bg-white/10 hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 active:bg-white/60 dark:active:bg-white/15 active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-white/50 dark:data-[active=true]:bg-white/10 data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-white/50 dark:data-[state=open]:hover:bg-white/10 data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: "hover:bg-white/50 dark:hover:bg-white/10 hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-border))]",
+          "bg-white/60 dark:bg-white/5 border border-black/8 dark:border-white/8 hover:bg-white/70 dark:hover:bg-white/10 hover:text-sidebar-accent-foreground",
       },
       size: {
         default: "h-8 text-sm",
@@ -600,7 +600,7 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-sm p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-all hover:bg-white/50 dark:hover:bg-white/10 hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -684,7 +684,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-black/8 dark:border-white/8 px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className
     )} data-sonance-name="sidebar"
@@ -716,8 +716,8 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-sm px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-xl px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-white/50 dark:hover:bg-white/10 hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 active:bg-white/60 dark:active:bg-white/15 active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-white/50 dark:data-[active=true]:bg-white/10 data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",

package/dist/assets/components/skeleton.tsx

@@ -15,16 +15,18 @@ export function Skeleton({
   ...props
 }: SkeletonProps) {
   const variantClasses = {
-    text: "rounded",
+    text: "rounded-lg",
     circular: "rounded-full",
-    rectangular: "rounded-sm",
+    rectangular: "rounded-xl",
   };
 
   return (
     <div
       data-sonance-name="skeleton"
       className={cn(
-        "animate-pulse bg-background-secondary",
+        "animate-pulse",
+        "bg-white/50 dark:bg-white/[0.03]",
+        "backdrop-blur-sm",
         variantClasses[variant],
         className
       )}
@@ -74,7 +76,13 @@ export function SkeletonAvatar({
 
 export function SkeletonCard({ className }: { className?: string }) {
   return (
-    <div className={cn("border border-border p-4 space-y-4", className)}>
+    <div
+      className={cn(
+        "border border-black/8 dark:border-white/8 rounded-2xl p-4 space-y-4",
+        "bg-white/30 dark:bg-white/[0.02] backdrop-blur-sm",
+        className
+      )}
+    >
       <Skeleton className="h-40 w-full" />
       <div className="space-y-2">
         <Skeleton className="h-4 w-3/4" />
@@ -96,7 +104,7 @@ export function SkeletonTable({
   return (
     <div className={cn("w-full space-y-2", className)}>
       {/* Header */}
-      <div className="flex gap-4 border-b border-border pb-2">
+      <div className="flex gap-4 border-b border-black/8 dark:border-white/8 pb-2">
         {Array.from({ length: columns }).map((_, i) => (
           <Skeleton key={i} className="h-4 flex-1" />
         ))}