@windrun-huaiin/base-ui 3.2.4 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/base-ui",
-  "version": "3.2.4",
+  "version": "3.4.0",
   "description": "Base UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -16,10 +16,15 @@
       "import": "./dist/ui/*.mjs",
       "require": "./dist/ui/*.js"
     },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.mjs",
-      "require": "./dist/components/*.js"
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./components/client": {
+      "types": "./dist/components/client/index.d.ts",
+      "import": "./dist/components/client/index.mjs",
+      "require": "./dist/components/client/index.js"
     },
     "./lib/*": {
       "types": "./dist/lib/*.d.ts",
@@ -37,49 +42,17 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.10",
     "@radix-ui/react-alert-dialog": "^1.1.13",
-    "@radix-ui/react-aspect-ratio": "^1.1.6",
-    "@radix-ui/react-avatar": "^1.1.9",
-    "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-collapsible": "^1.1.10",
-    "@radix-ui/react-context-menu": "^2.2.14",
-    "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
-    "@radix-ui/react-hover-card": "^1.1.13",
     "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-menubar": "^1.1.14",
-    "@radix-ui/react-navigation-menu": "^1.2.12",
-    "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-progress": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.3.6",
-    "@radix-ui/react-scroll-area": "^1.2.8",
-    "@radix-ui/react-select": "^2.2.4",
-    "@radix-ui/react-separator": "^1.1.6",
-    "@radix-ui/react-slider": "^1.3.4",
     "@radix-ui/react-slot": "^1.2.2",
-    "@radix-ui/react-switch": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.11",
-    "@radix-ui/react-toast": "^1.2.13",
-    "@radix-ui/react-toggle": "^1.1.8",
-    "@radix-ui/react-toggle-group": "^1.1.9",
-    "@radix-ui/react-tooltip": "^1.2.6",
     "class-variance-authority": "^0.7.1",
-    "cmdk": "1.0.4",
-    "embla-carousel-react": "8.5.1",
-    "input-otp": "1.4.2",
     "lucide-react": "^0.511.0",
     "next": "15.3.2",
     "next-intl": "^3.26.5",
     "next-themes": "^0.4.6",
     "react": "19.1.0",
-    "react-day-picker": "8.10.1",
     "react-dom": "19.1.0",
-    "react-hook-form": "^7.56.3",
-    "react-resizable-panels": "^2.1.9",
-    "recharts": "2.15.3",
-    "sonner": "^1.7.4",
-    "vaul": "^0.9.9",
     "@windrun-huaiin/lib": "^3.2.2"
   },
   "peerDependencies": {
@@ -91,6 +64,7 @@
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {
+    "@types/node": "^22.15.33",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.3",
     "tsup": "^8.3.5",

package/src/components/404-page.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import { NotFoundIcon } from "@base-ui/components/global-icon";
 import { SiteIcon } from "@base-ui/lib/site-icon";

package/src/components/client/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+// Client Components Only
+// These components use 'use client' directive and should be imported separately
+// to avoid contaminating server components in the main index.ts
+
+// Base Client Components
+export * from '../404-page';
+export * from '../go-to-top';
+export * from '../language-detector';
+export * from '../language-switcher';
+
+// Script Components (All Client-side)
+export * from '../script/google-analytics-script';
+export * from '../script/microsoft-clarity-script'; 

package/src/components/global-icon.tsx

@@ -147,7 +147,7 @@ export function getGlobalIcon(
   
   const Icon = globalLucideIcons[iconKey as keyof typeof globalLucideIcons];
   if (!Icon) {
-    if (process.env.NODE_ENV !== 'production') {
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
       // only show in dev|test
       // eslint-disable-next-line no-console
       console.warn(

package/src/components/index.ts

@@ -1,10 +1,17 @@
-// Base Components
-export * from './404-page';
+// Server Components and Universal Components
+// ⚠️ IMPORTANT: To avoid client/server component mixing issues in Next.js bundling,
+// client components with 'use client' directive are exported separately.
+//
+// Usage:
+// - Server components: import from '@base-ui/components' (this file)
+// - Client components: import from '@base-ui/components/client'
+//
+// Example:
+// import { globalLucideIcons, getGlobalIcon } from '@base-ui/components'
+// import { NotFoundPage, GoToTop } from '@base-ui/components/client'
+
+// Main server/universal components
 export * from './global-icon';
-export * from './go-to-top';
-export * from './language-detector';
-export * from './language-switcher';
 
-// Script Components
-export * from './script/google-analytics-script';
-export * from './script/microsoft-clarity-script'; 
+// For client components, please use:
+// import { ... } from '@base-ui/components/client' 

package/src/index.ts

@@ -1,4 +1,7 @@
 // Re-export everything from sub-modules for convenience
+// ⚠️ IMPORTANT: Client components are NOT exported here to avoid server component contamination
+// For client components, use: import { ... } from '@base-ui/components/client'
+
 export * from './ui';
-export * from './components';
+export * from './components'; // Only server/universal components
 export * from './lib'; 

package/src/ui/index.ts

@@ -1,52 +1,6 @@
-// UI Components
-export * from './accordion';
+// UI Components - Only actively used components
 export * from './alert-dialog';
-export * from './alert';
-export * from './aspect-ratio';
-export * from './avatar';
-export * from './badge';
-export * from './breadcrumb';
 export { Button, buttonVariants, type ButtonProps } from './button';
-export * from './calendar';
-export * from './card';
-export * from './carousel';
-export * from './chart';
-export * from './checkbox';
-export * from './collapsible';
-export * from './command';
-export * from './context-menu';
-export * from './dialog';
-export * from './drawer';
 export * from './dropdown-menu';
-export * from './form';
-export * from './hover-card';
-export * from './input-otp';
-export * from './input';
 export * from './label';
-export { LanguageButton, type LanguageButtonProps } from './language-button';
-export * from './menubar';
-export * from './navigation-menu';
-export * from './pagination';
-export * from './popover';
-export * from './progress';
-export * from './radio-group';
-export * from './resizable';
-export * from './scroll-area';
-export * from './select';
-export * from './separator';
-export * from './sheet';
-export * from './sidebar';
-export * from './skeleton';
-export * from './slider';
-export { Toaster as SonnerToaster } from './sonner';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './textarea';
-export * from './toast';
-export { Toaster as ToastToaster } from './toaster';
-export * from './toggle-group';
-export * from './toggle';
-export * from './tooltip';
-export * from './use-mobile';
-export * from './use-toast'; 
+export { LanguageButton, type LanguageButtonProps } from './language-button'; 

package/src/ui/accordion.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
-
-import { cn } from "@lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <icons.ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

package/src/ui/aspect-ratio.tsx

@@ -1,7 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-const AspectRatio = AspectRatioPrimitive.Root
-
-export { AspectRatio }

package/src/ui/avatar.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@lib/utils"
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

package/src/ui/badge.tsx

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof badgeVariants> { }
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

package/src/ui/breadcrumb.tsx

@@ -1,115 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
-
-import { cn } from "@lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <icons.ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <icons.MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

package/src/ui/calendar.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
-import { DayPicker } from "react-day-picker"
-
-import { cn } from "@lib/utils"
-import { buttonVariants } from "@base-ui/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ..._props }) => <icons.ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ..._props }) => <icons.ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  )
-}
-Calendar.displayName = "Calendar"
-
-export { Calendar }