sonance-brand-mcp 1.3.111 → 1.3.112

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" />
         ))}

package/dist/assets/components/slider.tsx

@@ -11,7 +11,7 @@ const getTrackStateStyles = (state?: SliderState) => {
 
   const stateMap: Record<string, string> = {
     hover: "",
-    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
     active: "",
     disabled: "opacity-50 cursor-not-allowed",
   };
@@ -23,9 +23,9 @@ const getThumbStateStyles = (state?: SliderState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "scale-110",
-    focus: "",
-    active: "scale-110",
+    hover: "scale-110 shadow-[0_0_12px_var(--glow-primary)]",
+    focus: "shadow-[0_0_12px_var(--glow-primary)]",
+    active: "scale-110 shadow-[0_0_12px_var(--glow-primary)]",
     disabled: "hover:scale-100",
   };
 
@@ -158,24 +158,26 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
           onMouseDown={handleMouseDown}
           onKeyDown={handleKeyDown}
           className={cn(
-            "relative h-2 w-full cursor-pointer rounded-full bg-background-secondary",
-            "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2 focus:ring-offset-background",
+            "relative h-2 w-full cursor-pointer rounded-full",
+            "bg-white/60 dark:bg-white/[0.05] backdrop-blur-sm",
+            "border border-black/5 dark:border-white/5",
+            "focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30 focus:ring-offset-2 focus:ring-offset-background",
             isDisabled && "cursor-not-allowed opacity-50",
             getTrackStateStyles(state)
           )}
         >
           {/* Filled track */}
           <div
-            className="absolute left-0 top-0 h-full rounded-full bg-primary transition-all"
+            className="absolute left-0 top-0 h-full rounded-full bg-[color:var(--sonance-blue)] transition-all"
             style={{ width: `${percentage}%` }}
           />
           {/* Thumb */}
           <div data-sonance-name="slider"
             className={cn(
               "absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full",
-              "border-2 border-primary bg-background shadow-sm transition-all",
-              "hover:scale-110",
-              isDisabled && "hover:scale-100",
+              "border-2 border-[color:var(--sonance-blue)] bg-white dark:bg-white/90 shadow-md transition-all",
+              "hover:scale-110 hover:shadow-[0_0_12px_var(--glow-primary)]",
+              isDisabled && "hover:scale-100 hover:shadow-md",
               getThumbStateStyles(state)
             )}
             style={{ left: `${percentage}%` }}

package/dist/assets/components/switch.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 export type SwitchState = "default" | "hover" | "focus" | "checked" | "disabled";
 
 const switchTrackVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border bg-input transition-all duration-200 has-[:checked]:border-primary has-[:checked]:bg-primary has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:ring-2 has-[:focus]:ring-primary/20 has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
+  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-all duration-200 backdrop-blur-sm bg-white/60 dark:bg-white/5 border-black/8 dark:border-white/8 has-[:checked]:border-[color:var(--sonance-blue)] has-[:checked]:bg-[color:var(--sonance-blue)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:ring-2 has-[:focus]:ring-[color:var(--sonance-blue)]/30 has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
   {
     variants: {
       size: {
@@ -43,9 +43,9 @@ const getTrackStateStyles = (state?: SwitchState) => {
   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 bg-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)] bg-[color:var(--sonance-blue)]",
     disabled: "opacity-50 cursor-not-allowed",
   };
 

package/dist/assets/components/table.tsx

@@ -20,7 +20,7 @@ export const TableHeader = forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} data-sonance-name="table" {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b [&_tr]:border-black/8 dark:[&_tr]:border-white/8 bg-white/50 dark:bg-white/[0.02]", className)} data-sonance-name="table" {...props} />
 ));
 
 TableHeader.displayName = "TableHeader";
@@ -45,7 +45,7 @@ export const TableFooter = forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t border-border bg-background-secondary font-medium",
+      "border-t border-black/8 dark:border-white/8 bg-white/50 dark:bg-white/[0.02] font-medium",
       className
     )} data-sonance-name="table"
     {...props}
@@ -61,9 +61,9 @@ export const TableRow = forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b border-border transition-colors",
-      "hover:bg-card-hover",
-      "data-[state=selected]:bg-secondary-hover",
+      "border-b border-black/8 dark:border-white/8 transition-colors",
+      "hover:bg-white/50 dark:hover:bg-white/[0.03]",
+      "data-[state=selected]:bg-white/60 dark:data-[state=selected]:bg-white/[0.05]",
       className
     )} data-sonance-name="table"
     {...props}

package/dist/assets/components/tabs.tsx

@@ -7,14 +7,14 @@ import { cn } from "@/lib/utils";
 export type TabsTriggerState = "default" | "hover" | "focus" | "active" | "disabled";
 
 const tabsTriggerVariants = cva(
-  "relative font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/20",
+  "relative font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30",
   {
     variants: {
       size: {
-        xs: "px-2.5 py-1 text-[10px] rounded-md",
-        sm: "px-3 py-1.5 text-xs rounded-lg",
-        md: "px-3.5 py-2 text-sm rounded-lg",
-        lg: "px-4 py-2.5 text-sm rounded-xl",
+        xs: "px-2.5 py-1 text-[10px] rounded-lg",
+        sm: "px-3 py-1.5 text-xs rounded-xl",
+        md: "px-3.5 py-2 text-sm rounded-xl",
+        lg: "px-4 py-2.5 text-sm rounded-2xl",
       },
     },
     defaultVariants: {
@@ -88,7 +88,7 @@ export function TabsList({ className, children }: TabsListProps) {
     <div data-sonance-name="tabs"
       role="tablist"
       className={cn(
-        "inline-flex items-center gap-1 rounded-lg bg-muted/50 p-1",
+        "inline-flex items-center gap-1 rounded-xl bg-white/50 dark:bg-white/5 backdrop-blur-sm border border-black/5 dark:border-white/5 p-1",
         className
       )}
     >
@@ -129,8 +129,8 @@ export function TabsTrigger({
       className={cn(
         tabsTriggerVariants({ size: context.size }),
         isActive
-          ? "text-foreground bg-background shadow-sm"
-          : "text-foreground-muted hover:text-foreground hover:bg-background/50",
+          ? "text-foreground bg-white/80 dark:bg-white/10 shadow-sm backdrop-blur-sm"
+          : "text-foreground-muted hover:text-foreground hover:bg-white/50 dark:hover:bg-white/5",
         isDisabled && "cursor-not-allowed opacity-50",
         getStateStyles(state, isActive),
         className