@vuer-ai/vuer-uikit 0.0.26 → 0.0.28

package/dist/ui/theme/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+require('../../chunk-Y2QBWXB4.js');
+var chunk3ZFILFNB_js = require('../../chunk-3ZFILFNB.js');
+var chunkEMHRYI5O_js = require('../../chunk-EMHRYI5O.js');
+
+
+
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () { return chunk3ZFILFNB_js.ThemeProvider; }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () { return chunk3ZFILFNB_js.useTheme; }
+});
+Object.defineProperty(exports, "ThemeScript", {
+  enumerable: true,
+  get: function () { return chunkEMHRYI5O_js.ThemeScript; }
+});

package/dist/ui/theme/index.mjs

@@ -0,0 +1,3 @@
+import '../../chunk-AMB2H6WS.mjs';
+export { ThemeProvider, useTheme } from '../../chunk-4QERYDMC.mjs';
+export { ThemeScript } from '../../chunk-YIBD2FEV.mjs';

package/dist/ui/{theme-context/theme-script.d.ts → theme/themeScript.d.mts}

@@ -1,13 +1,19 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeProviderProps, Attribute } from './theme-types.js';
+import { Attribute } from './types.mjs';
 
-interface ThemeScriptProps extends ThemeProviderProps {
+interface ThemeScriptProps {
     themes: string[];
     storageKey: string;
     defaultTheme: string;
     attribute: Attribute | Attribute[];
+    forcedTheme?: string;
+    enableSystem?: boolean;
+    enableColorScheme?: boolean;
+    value?: Record<string, string>;
+    nonce?: string;
+    scriptProps?: any;
 }
-declare const ThemeScript: react.MemoExoticComponent<({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, themes, nonce, scriptProps, }: ThemeScriptProps) => react_jsx_runtime.JSX.Element>;
+declare const ThemeScript: React.MemoExoticComponent<({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, themes, nonce, scriptProps, }: ThemeScriptProps) => react_jsx_runtime.JSX.Element>;
 
 export { ThemeScript };

package/dist/ui/{theme-context/theme-script.d.mts → theme/themeScript.d.ts}

@@ -1,13 +1,19 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeProviderProps, Attribute } from './theme-types.mjs';
+import { Attribute } from './types.js';
 
-interface ThemeScriptProps extends ThemeProviderProps {
+interface ThemeScriptProps {
     themes: string[];
     storageKey: string;
     defaultTheme: string;
     attribute: Attribute | Attribute[];
+    forcedTheme?: string;
+    enableSystem?: boolean;
+    enableColorScheme?: boolean;
+    value?: Record<string, string>;
+    nonce?: string;
+    scriptProps?: any;
 }
-declare const ThemeScript: react.MemoExoticComponent<({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, themes, nonce, scriptProps, }: ThemeScriptProps) => react_jsx_runtime.JSX.Element>;
+declare const ThemeScript: React.MemoExoticComponent<({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, themes, nonce, scriptProps, }: ThemeScriptProps) => react_jsx_runtime.JSX.Element>;
 
 export { ThemeScript };

package/dist/ui/theme/themeScript.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunkEMHRYI5O_js = require('../../chunk-EMHRYI5O.js');
+
+
+
+Object.defineProperty(exports, "ThemeScript", {
+  enumerable: true,
+  get: function () { return chunkEMHRYI5O_js.ThemeScript; }
+});

package/dist/ui/theme/themeScript.mjs

@@ -0,0 +1 @@
+export { ThemeScript } from '../../chunk-YIBD2FEV.mjs';

package/dist/ui/{theme-context/theme-types.d.mts → theme/types.d.mts}

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, ScriptHTMLAttributes, Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, DetailedHTMLProps, ScriptHTMLAttributes } from 'react';
 
 type DataAttribute = `data-${string}`;
 interface ScriptProps extends DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {

package/dist/ui/{theme-context/theme-types.d.ts → theme/types.d.ts}

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, ScriptHTMLAttributes, Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, DetailedHTMLProps, ScriptHTMLAttributes } from 'react';
 
 type DataAttribute = `data-${string}`;
 interface ScriptProps extends DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {

package/dist/ui/timeline.js

@@ -3,7 +3,8 @@
 var chunkQ42CNAC4_js = require('../chunk-Q42CNAC4.js');
 require('../chunk-TOXM5BPM.js');
 require('../chunk-KJV7RR25.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 

package/dist/ui/timeline.mjs

@@ -1,6 +1,7 @@
 export { Timeline } from '../chunk-6YJ6IBWC.mjs';
 import '../chunk-DD7FIYSP.mjs';
 import '../chunk-6SBHQBFL.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/ui/toggle-group.js

@@ -2,7 +2,8 @@
 
 var chunkSAM2YZFC_js = require('../chunk-SAM2YZFC.js');
 require('../chunk-JSMQMGST.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 

package/dist/ui/toggle-group.mjs

@@ -1,5 +1,6 @@
 export { ToggleGroup, ToggleGroupItem } from '../chunk-2WJW572X.mjs';
 import '../chunk-66FC5NST.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/ui/toggle.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var chunkJSMQMGST_js = require('../chunk-JSMQMGST.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 

package/dist/ui/toggle.mjs

@@ -1,4 +1,5 @@
 export { Toggle, toggleVariants } from '../chunk-66FC5NST.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/ui/tooltip.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var chunkKJV7RR25_js = require('../chunk-KJV7RR25.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 

package/dist/ui/tooltip.mjs

@@ -1,4 +1,5 @@
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../chunk-6SBHQBFL.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/ui/tree-view-v2.js

@@ -2,7 +2,8 @@
 
 var chunkTOXM5BPM_js = require('../chunk-TOXM5BPM.js');
 require('../chunk-KJV7RR25.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 

package/dist/ui/tree-view-v2.mjs

@@ -1,5 +1,6 @@
 export { TreeView as TreeViewV2 } from '../chunk-DD7FIYSP.mjs';
 import '../chunk-6SBHQBFL.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/ui/tree-view.d.mts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import { HTMLAttributes, ComponentType, SVGProps, ReactNode } from 'react';
 
 type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
@@ -15,7 +15,7 @@ interface TreeDataItem {
     droppable?: boolean;
     disabled?: boolean;
 }
-declare const TreeView: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const TreeView: React.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     data: TreeDataItem[] | TreeDataItem;
     initialSelectedItemId?: string;
     onSelectChange?: (item: TreeDataItem | undefined) => void;
@@ -23,6 +23,6 @@ declare const TreeView: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
     defaultNodeIcon?: IconComponent;
     defaultLeafIcon?: IconComponent;
     onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void;
-} & react.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;
 
 export { type TreeDataItem, TreeView };

package/dist/ui/tree-view.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import { HTMLAttributes, ComponentType, SVGProps, ReactNode } from 'react';
 
 type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
@@ -15,7 +15,7 @@ interface TreeDataItem {
     droppable?: boolean;
     disabled?: boolean;
 }
-declare const TreeView: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const TreeView: React.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     data: TreeDataItem[] | TreeDataItem;
     initialSelectedItemId?: string;
     onSelectChange?: (item: TreeDataItem | undefined) => void;
@@ -23,6 +23,6 @@ declare const TreeView: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
     defaultNodeIcon?: IconComponent;
     defaultLeafIcon?: IconComponent;
     onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void;
-} & react.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;
 
 export { type TreeDataItem, TreeView };

package/dist/ui/tree-view.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var chunkXPPJVYYS_js = require('../chunk-XPPJVYYS.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 

package/dist/ui/tree-view.mjs

@@ -1,4 +1,5 @@
 export { TreeView } from '../chunk-YGIU2WQY.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/ui/version-badge.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var chunkRTURVQIP_js = require('../chunk-RTURVQIP.js');
+var chunkZ3LP6DAV_js = require('../chunk-Z3LP6DAV.js');
 require('../chunk-EFIRD3FN.js');
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+require('../chunk-7DRJLKR6.js');
 require('../chunk-ZX6K2A3O.js');
 require('../chunk-XXWQ4RVP.js');
 
@@ -10,5 +11,5 @@ require('../chunk-XXWQ4RVP.js');
 
 Object.defineProperty(exports, "VersionBadge", {
   enumerable: true,
-  get: function () { return chunkRTURVQIP_js.VersionBadge; }
+  get: function () { return chunkZ3LP6DAV_js.VersionBadge; }
 });

package/dist/ui/version-badge.mjs

@@ -1,5 +1,6 @@
-export { VersionBadge } from '../chunk-ZRJ5JCVG.mjs';
+export { VersionBadge } from '../chunk-7LDFQGYF.mjs';
 import '../chunk-WO3WHXDP.mjs';
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+import '../chunk-SBHPTJE4.mjs';
 import '../chunk-GXZZGOXX.mjs';
 import '../chunk-KTNZSZ5Y.mjs';

package/dist/utils/client-only.d.mts

@@ -0,0 +1,27 @@
+import React__default from 'react';
+
+/**
+ * Executes a function only on the client side (when window is defined)
+ * @param fn - Function to execute on client side
+ * @returns Result of the function or undefined if on server side
+ */
+declare function clientOnly<T>(fn: () => T): T | undefined;
+/**
+ * Creates a React component that only renders on the client side after hydration
+ * @param Component - The component to render client-side
+ * @param fallback - Optional fallback to render server-side
+ * @returns A component that avoids hydration mismatches
+ */
+declare function createClientOnlyComponent<P extends Record<string, any>>(Component: React__default.ComponentType<P>, fallback?: React__default.ComponentType<P>): React__default.ComponentType<P>;
+/**
+ * Checks if code is running on the client side
+ * @returns true if running on client, false if on server
+ */
+declare function isClient(): boolean;
+/**
+ * Checks if code is running on the server side
+ * @returns true if running on server, false if on client
+ */
+declare function isServer(): boolean;
+
+export { clientOnly, createClientOnlyComponent, isClient, isServer };

package/dist/utils/client-only.d.ts

@@ -0,0 +1,27 @@
+import React__default from 'react';
+
+/**
+ * Executes a function only on the client side (when window is defined)
+ * @param fn - Function to execute on client side
+ * @returns Result of the function or undefined if on server side
+ */
+declare function clientOnly<T>(fn: () => T): T | undefined;
+/**
+ * Creates a React component that only renders on the client side after hydration
+ * @param Component - The component to render client-side
+ * @param fallback - Optional fallback to render server-side
+ * @returns A component that avoids hydration mismatches
+ */
+declare function createClientOnlyComponent<P extends Record<string, any>>(Component: React__default.ComponentType<P>, fallback?: React__default.ComponentType<P>): React__default.ComponentType<P>;
+/**
+ * Checks if code is running on the client side
+ * @returns true if running on client, false if on server
+ */
+declare function isClient(): boolean;
+/**
+ * Checks if code is running on the server side
+ * @returns true if running on server, false if on client
+ */
+declare function isServer(): boolean;
+
+export { clientOnly, createClientOnlyComponent, isClient, isServer };

package/dist/utils/client-only.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var chunk7DRJLKR6_js = require('../chunk-7DRJLKR6.js');
+
+
+
+Object.defineProperty(exports, "clientOnly", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.clientOnly; }
+});
+Object.defineProperty(exports, "createClientOnlyComponent", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.createClientOnlyComponent; }
+});
+Object.defineProperty(exports, "isClient", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.isClient; }
+});
+Object.defineProperty(exports, "isServer", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.isServer; }
+});

package/dist/utils/client-only.mjs

@@ -0,0 +1 @@
+export { clientOnly, createClientOnlyComponent, isClient, isServer } from '../chunk-SBHPTJE4.mjs';

package/dist/utils/index.d.mts

@@ -1,3 +1,5 @@
 export { cn } from './cn.mjs';
 export { useLocalStorage } from './use-local-storage.mjs';
+export { clientOnly, createClientOnlyComponent, isClient, isServer } from './client-only.mjs';
 import 'clsx';
+import 'react';

package/dist/utils/index.d.ts

@@ -1,3 +1,5 @@
 export { cn } from './cn.js';
 export { useLocalStorage } from './use-local-storage.js';
+export { clientOnly, createClientOnlyComponent, isClient, isServer } from './client-only.js';
 import 'clsx';
+import 'react';

package/dist/utils/index.js

@@ -1,11 +1,28 @@
 'use strict';
 
-require('../chunk-XWS4SIB5.js');
+require('../chunk-IJ7QXNIJ.js');
+var chunk7DRJLKR6_js = require('../chunk-7DRJLKR6.js');
 var chunkZX6K2A3O_js = require('../chunk-ZX6K2A3O.js');
 var chunkXXWQ4RVP_js = require('../chunk-XXWQ4RVP.js');
 
 
 
+Object.defineProperty(exports, "clientOnly", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.clientOnly; }
+});
+Object.defineProperty(exports, "createClientOnlyComponent", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.createClientOnlyComponent; }
+});
+Object.defineProperty(exports, "isClient", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.isClient; }
+});
+Object.defineProperty(exports, "isServer", {
+  enumerable: true,
+  get: function () { return chunk7DRJLKR6_js.isServer; }
+});
 Object.defineProperty(exports, "useLocalStorage", {
   enumerable: true,
   get: function () { return chunkZX6K2A3O_js.useLocalStorage; }

package/dist/utils/index.mjs

@@ -1,3 +1,4 @@
-import '../chunk-M4IVLZIH.mjs';
+import '../chunk-CMYR6AOY.mjs';
+export { clientOnly, createClientOnlyComponent, isClient, isServer } from '../chunk-SBHPTJE4.mjs';
 export { useLocalStorage } from '../chunk-GXZZGOXX.mjs';
 export { cn } from '../chunk-KTNZSZ5Y.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuer-ai/vuer-uikit",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "React UI Kit components",
   "keywords": [
     "react",
@@ -57,7 +57,8 @@
     "framer-motion": "^11.15.0",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "vike-react": "^0.6.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

package/src/index.css

@@ -1,4 +1,4 @@
-@import "tw-animate-css";
+ @import "tw-animate-css";
 
 @import "./styles/variables.css";
 @import "./styles/theme.css";

package/src/ui/avatar.tsx

@@ -1,49 +1,86 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import React, { ComponentProps } from "react";
 
-import { cn } from "../utils";
+import { cn, createClientOnlyComponent } from "../utils";
 
-function Avatar({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
-      {...props}
-    />
-  );
-}
+export const AvatarRoot = ({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Root>) => (
+  <AvatarPrimitive.Root
+    data-slot="avatar"
+    className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+);
 
-function AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
-}
+export const AvatarSSRFallback = ({ className }: { className?: string }) => (
+  <span
+    data-slot="avatar"
+    className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
+  />
+);
 
-function AvatarFallback({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+export const Avatar = createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
+
+export const AvatarImageRoot = ({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Image>) => (
+  <AvatarPrimitive.Image
+    data-slot="avatar-image"
+    className={cn("aspect-square size-full", className)}
+    {...props}
+  />
+);
+
+export const AvatarImageFallback = ({ className }: { className?: string }) => (
+  <span data-slot="avatar-image" className={cn("aspect-square size-full", className)} />
+);
+
+export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImageFallback);
+
+export const AvatarFallbackRoot = ({
+  className,
+  ...props
+}: ComponentProps<typeof AvatarPrimitive.Fallback>) => (
+  <AvatarPrimitive.Fallback
+    data-slot="avatar-fallback"
+    className={cn(
+      "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
+      className,
+    )}
+    {...props}
+  />
+);
 
-interface AvatarGroupProps {
+export const AvatarFallbackSSR = ({
+  className,
+  ...props
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) => (
+  <span
+    data-slot="avatar-fallback"
+    className={cn(
+      "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const AvatarFallback = createClientOnlyComponent(AvatarFallbackRoot, AvatarFallbackSSR);
+
+export interface AvatarGroupProps {
   children: React.ReactNode;
   className?: string;
   spacing?: "tight" | "normal" | "loose";
   max?: number;
 }
 
-function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGroupProps) {
+export function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGroupProps) {
   const spacingClasses = {
     tight: "-space-x-1.5",
     normal: "-space-x-1",
@@ -59,7 +96,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGro
       {remainingCount > 0 && (
         <Avatar
           className={cn(
-            "ring-background hover:scale-120 relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100]",
+            "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120",
           )}
         >
           <AvatarFallback>+{remainingCount}</AvatarFallback>
@@ -74,7 +111,7 @@ function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGro
             }>,
             {
               className: cn(
-                `ring-background hover:scale-120 relative ring-2 transition-all duration-200 ease-in-out hover:z-[100]`,
+                `ring-background relative ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
                 (child.props as { className?: string })?.className,
               ),
             },
@@ -85,5 +122,3 @@ function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGro
     </div>
   );
 }
-
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };

package/src/ui/checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 import { type ComponentProps } from "react";
 
-import { cn } from "../utils";
+import { cn, isClient } from "../utils";
 
 interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "className"> {
   checkall?: boolean;
@@ -10,6 +10,23 @@ interface CheckboxProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Roo
 }
 
 function Checkbox({ className, checkall, ...props }: CheckboxProps) {
+  if (!isClient()) {
+    return (
+      <div
+        data-slot="checkbox"
+        className={cn(
+          "w-[16px]",
+          "h-[16px]",
+          "rounded-[3px]",
+          "border-[1.5px]",
+          "border-solid",
+          "border-bg-tertiary",
+          className,
+        )}
+      />
+    );
+  }
+
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"

package/src/ui/index.ts

@@ -29,4 +29,4 @@ export * from "./slider";
 export * from "./layout";
 export * from "./version-badge";
 
-export * from "./theme-context";
+export * from "./theme";