@moontra/moonui 2.1.9 → 2.2.1

package/src/components/ui/data-table.tsx

@@ -292,7 +292,7 @@ export function DataTable<TData, TValue>({
   const selectedRows = table.getFilteredSelectedRowModel().rows;
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-theme", "space-y-4", className)}>
       {/* Header */}
       {(title || description) && (
         <div className="space-y-1">
@@ -302,13 +302,13 @@ export function DataTable<TData, TValue>({
       )}
 
       {/* Toolbar */}
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 items-center gap-2">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex-1 max-w-sm">
           {/* Search/Filter */}
           {enableFiltering && (
             <>
               {customFilter || (
-                <div className="relative flex-1 max-w-sm">
+                <div className="relative">
                   <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                   <Input
                     placeholder={filterPlaceholder}
@@ -348,17 +348,17 @@ export function DataTable<TData, TValue>({
               )}
             </>
           )}
+        </div>
 
+        {/* Actions */}
+        <div className="flex items-center gap-2">
           {/* Selection info */}
           {enableRowSelection && selectedRows.length > 0 && (
             <Badge variant="secondary" className="whitespace-nowrap">
               {selectedRows.length} selected
             </Badge>
           )}
-        </div>
-
-        {/* Actions */}
-        <div className="flex items-center gap-2">
+          
           {toolbarActions}
           
           {/* Export */}

package/src/components/ui/date-picker.stories.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { DatePicker, DateRangePicker, DateTimePicker, MonthPicker } from './date-picker';
 import { Label } from './label';

package/src/components/ui/date-picker.tsx

@@ -13,7 +13,12 @@ import {
 } from "./popover";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, AnimatePresence } from "framer-motion";
-import { microInteractionVariants } from "@/lib/micro-interactions";
+// Define pageTransitions locally since micro-interactions might not exist
+const pageTransitions = {
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -20 }
+};
 
 /**
  * DatePicker Component
@@ -29,7 +34,6 @@ const datePickerVariants = cva(
         default: "",
         outline: "border-2",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        minimal: "h-auto p-0 border-0 shadow-none",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -147,10 +151,14 @@ export function DatePicker({
     setInternalDate(value);
   }, [value]);
 
-  const handleSelect = (date: Date | undefined) => {
-    setInternalDate(date);
-    onChange?.(date);
-    if (date) {
+  const handleSelect = (date: Date | Date[] | { from?: Date; to?: Date } | undefined) => {
+    // Handle single date selection for now
+    const singleDate = Array.isArray(date) ? date[0] : 
+                       (date && typeof date === 'object' && 'from' in date) ? date.from :
+                       date as Date | undefined;
+    setInternalDate(singleDate);
+    onChange?.(singleDate);
+    if (singleDate) {
       setOpen(false);
     }
   };
@@ -180,10 +188,11 @@ export function DatePicker({
   const iconElement = icon || <CalendarIcon className="h-4 w-4" />;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <div className="moonui-theme">
+      <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant={variant === "minimal" ? "ghost" : variant || "outline"}
+          variant={variant === "ghost" ? "ghost" : "outline"}
           className={cn(
             datePickerVariants({ variant, size, state }),
             !displayValue && "text-muted-foreground",
@@ -246,12 +255,12 @@ export function DatePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent 
-        className="w-[360px] p-0 shadow-xl rounded-2xl border-0 bg-background/95 backdrop-blur-sm" 
+        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]" 
         align="start"
         sideOffset={12}
       >
         <motion.div
-          {...microInteractionVariants.fadeIn}
+          {...pageTransitions}
           className="rounded-2xl bg-background overflow-hidden"
         >
           <Calendar
@@ -278,6 +287,7 @@ export function DatePicker({
         </motion.div>
       </PopoverContent>
     </Popover>
+    </div>
   );
 }
 
@@ -342,7 +352,7 @@ export function DateRangePicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant={props.variant === "minimal" ? "ghost" : props.variant || "outline"}
+          variant={props.variant === "ghost" ? "ghost" : "outline"}
           className={cn(
             datePickerVariants({ 
               variant: props.variant, 
@@ -360,7 +370,7 @@ export function DateRangePicker({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0 shadow-xl rounded-2xl border-0 bg-background/95 backdrop-blur-sm" align="start" sideOffset={12}>
+      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]" align="start" sideOffset={12}>
         <Calendar
           mode="range"
           defaultMonth={internalRange?.from}
@@ -540,7 +550,7 @@ export function MonthPicker({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
-          variant={props.variant || "outline"}
+          variant={props.variant === "default" ? "outline" : (props.variant || "outline")}
           className={cn(
             datePickerVariants({ 
               variant: props.variant, 
@@ -556,7 +566,7 @@ export function MonthPicker({
           {displayValue || placeholder}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-64 p-0" align="start">
+      <PopoverContent className="w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background z-[1000]" align="start">
         <div className="p-3">
           <div className="flex items-center justify-between mb-3">
             <Button
@@ -581,7 +591,7 @@ export function MonthPicker({
             {months.map((month, index) => (
               <Button
                 key={month}
-                variant={value && value.getMonth() === index ? "default" : "outline"}
+                variant={value && value.getMonth() === index ? "primary" : "outline"}
                 size="sm"
                 onClick={() => handleMonthSelect(index)}
                 className="h-8 text-xs"

package/src/components/ui/dialog.tsx

@@ -53,7 +53,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, variant, animation, ...props }, ref) => (
     <DialogPrimitive.Overlay
         ref={ref}
-        className={cn(overlayVariants({ variant, animation }), className)}
+        className={cn("moonui-theme", overlayVariants({ variant, animation }), className)}
         {...props}
     />
 ));
@@ -313,7 +313,7 @@ const DialogForm = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <form
         ref={ref}
-        className={cn("flex flex-col gap-4", className)}
+        className={cn("moonui-theme", "flex flex-col gap-4", className)}
         {...props}
     />
 ));

package/src/components/ui/draggable-list.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 // Basic Draggable List - Free Version
 "use client"
 
@@ -57,7 +59,7 @@ export function DraggableList<T>({
   }
 
   return (
-    <div className={cn("space-y-2", className)}>
+    <div className={cn("moonui-theme", "space-y-2", className)}>
       {items.map((item, index) => (
         <div
           key={keyExtractor(item)}

package/src/components/ui/dropdown-menu.tsx

@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("moonui-theme", "-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ))
@@ -174,7 +174,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("moonui-theme", "ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   )

package/src/components/ui/file-upload.tsx

@@ -111,7 +111,7 @@ const FileItem = ({
             </Badge>
           )}
           {status === 'success' && (
-            <Badge variant="default" className="h-5 bg-green-500">
+            <Badge variant="success" className="h-5">
               <CheckCircle className="h-3 w-3 mr-1" />
               Done
             </Badge>
@@ -302,7 +302,7 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
     }, [onRemove])
 
     return (
-      <div ref={ref} className={cn("space-y-4", className)} {...props}>
+      <div ref={ref} className={cn("moonui-theme", "space-y-4", className)} {...props}>
         {/* Upload Area */}
         <motion.div
           className={cn(

package/src/components/ui/github-stars.tsx

@@ -178,7 +178,7 @@ export function GitHubStarButton({
     <Button
       variant="outline"
       size={size}
-      className={cn("group", className)}
+      className={cn("moonui-theme", "group", className)}
       asChild
     >
       <a

package/src/components/ui/index.ts

@@ -1,45 +1,357 @@
-// Core UI Components Export
-// Premium components with advanced features
-
-export * from "./accordion"
-export * from "./alert"
-export * from "./aspect-ratio"
-export * from "./avatar"
-export * from "./badge"
-export * from "./breadcrumb"
-export * from "./button"
-export * from "./card"
-export * from "./checkbox"
-export * from "./collapsible"
-export * from "./color-picker"
-export * from "./command"
-export * from "./data-table"
-export * from "./date-picker"
-export * from "./dialog"
-export * from "./draggable-list"
-export * from "./dropdown-menu"
-export * from "./file-upload"
-export * from "./gesture-drawer"
-export * from "./github-stars"
-export * from "./input"
-export * from "./label"
-export * from "./locked-component"
-export * from "./moon-logo"
-export * from "./pagination"
-export * from "./popover"
-export * from "./progress"
-export * from "./radio-group"
-export * from "./rich-text-editor"
-export * from "./select"
-export * from "./separator"
-export * from "./simple-editor"
-export * from "./skeleton"
-export * from "./slider"
-export * from "./swipeable-card"
-export * from "./switch"
-export * from "./table"
-export * from "./tabs"
-export * from "./textarea"
-export * from "./toast"
-export * from "./toggle"
-export * from "./tooltip"
+// Free Components Export - Local Files
+// This is the index for packages/moonui/src/components/ui/
+// All exports use MoonUI prefix for consistency
+
+// Accordion
+export {
+    Accordion as MoonUIAccordion,
+    AccordionItem as MoonUIAccordionItem,
+    AccordionTrigger as MoonUIAccordionTrigger,
+    AccordionContent as MoonUIAccordionContent,
+} from "./accordion";
+
+// Alert
+export {
+    Alert as MoonUIAlert,
+    AlertTitle as MoonUIAlertTitle,
+    AlertDescription as MoonUIAlertDescription,
+} from "./alert";
+
+// AspectRatio
+export { AspectRatio as MoonUIAspectRatio } from "./aspect-ratio";
+
+// Avatar
+export {
+    Avatar as MoonUIAvatar,
+    AvatarImage as MoonUIAvatarImage,
+    AvatarFallback as MoonUIAvatarFallback,
+    AvatarGroup as MoonUIAvatarGroup,
+} from "./avatar";
+
+// Badge
+export {
+    Badge as MoonUIBadge,
+    badgeVariants as moonUIBadgeVariants,
+} from "./badge";
+
+// Breadcrumb
+export {
+    Breadcrumb as MoonUIBreadcrumb,
+    BreadcrumbList as MoonUIBreadcrumbList,
+    BreadcrumbItem as MoonUIBreadcrumbItem,
+    BreadcrumbLink as MoonUIBreadcrumbLink,
+    BreadcrumbPage as MoonUIBreadcrumbPage,
+    BreadcrumbSeparator as MoonUIBreadcrumbSeparator,
+    BreadcrumbEllipsis as MoonUIBreadcrumbEllipsis,
+} from "./breadcrumb";
+
+// Button
+export {
+    Button as MoonUIButton,
+    buttonVariants as moonUIButtonVariants,
+} from "./button";
+
+// Card
+export {
+    Card as MoonUICard,
+    CardHeader as MoonUICardHeader,
+    CardFooter as MoonUICardFooter,
+    CardTitle as MoonUICardTitle,
+    CardDescription as MoonUICardDescription,
+    CardContent as MoonUICardContent,
+} from "./card";
+
+// Card Input
+export {
+    CardNumberInput as MoonUICardNumberInput,
+    CardExpiryInput as MoonUICardExpiryInput,
+    CardCVCInput as MoonUICardCVCInput,
+    CardZipInput as MoonUICardZipInput,
+} from "./card-input";
+
+// Checkbox
+export {
+    Checkbox as MoonUICheckbox,
+    CheckboxWithLabel as MoonUICheckboxWithLabel,
+    CheckboxGroup as MoonUICheckboxGroup,
+    CheckboxLabel as MoonUICheckboxLabel,
+} from "./checkbox";
+
+// Collapsible
+export {
+    Collapsible as MoonUICollapsible,
+    CollapsibleTrigger as MoonUICollapsibleTrigger,
+    CollapsibleContent as MoonUICollapsibleContent,
+} from "./collapsible";
+
+// ColorPicker
+export {
+    ColorPicker as MoonUIColorPicker,
+    SimpleColorPicker as MoonUISimpleColorPicker,
+    GradientPicker as MoonUIGradientPicker,
+} from "./color-picker";
+
+// Command
+export {
+    Command as MoonUICommand,
+    CommandDialog as MoonUICommandDialog,
+    CommandInput as MoonUICommandInput,
+    CommandList as MoonUICommandList,
+    CommandEmpty as MoonUICommandEmpty,
+    CommandGroup as MoonUICommandGroup,
+    CommandItem as MoonUICommandItem,
+    CommandShortcut as MoonUICommandShortcut,
+    CommandSeparator as MoonUICommandSeparator,
+} from "./command";
+
+// DataTable
+export { DataTable as MoonUIDataTable } from "./data-table";
+
+// DatePicker
+export {
+    DatePicker as MoonUIDatePicker,
+    DateRangePicker as MoonUIDateRangePicker,
+    DateTimePicker as MoonUIDateTimePicker,
+    MonthPicker as MoonUIMonthPicker,
+} from "./date-picker";
+
+// Dialog
+export {
+    Dialog as MoonUIDialog,
+    DialogClose as MoonUIDialogClose,
+    DialogTrigger as MoonUIDialogTrigger,
+    DialogContent as MoonUIDialogContent,
+    DialogHeader as MoonUIDialogHeader,
+    DialogFooter as MoonUIDialogFooter,
+    DialogTitle as MoonUIDialogTitle,
+    DialogDescription as MoonUIDialogDescription,
+} from "./dialog";
+
+// DraggableList
+export { DraggableList as MoonUIDraggableList } from "./draggable-list";
+
+// DropdownMenu
+export {
+    DropdownMenu as MoonUIDropdownMenu,
+    DropdownMenuTrigger as MoonUIDropdownMenuTrigger,
+    DropdownMenuContent as MoonUIDropdownMenuContent,
+    DropdownMenuItem as MoonUIDropdownMenuItem,
+    DropdownMenuCheckboxItem as MoonUIDropdownMenuCheckboxItem,
+    DropdownMenuRadioItem as MoonUIDropdownMenuRadioItem,
+    DropdownMenuLabel as MoonUIDropdownMenuLabel,
+    DropdownMenuSeparator as MoonUIDropdownMenuSeparator,
+    DropdownMenuShortcut as MoonUIDropdownMenuShortcut,
+    DropdownMenuGroup as MoonUIDropdownMenuGroup,
+    DropdownMenuPortal as MoonUIDropdownMenuPortal,
+    DropdownMenuSub as MoonUIDropdownMenuSub,
+    DropdownMenuSubContent as MoonUIDropdownMenuSubContent,
+    DropdownMenuSubTrigger as MoonUIDropdownMenuSubTrigger,
+    DropdownMenuRadioGroup as MoonUIDropdownMenuRadioGroup,
+} from "./dropdown-menu";
+
+// FileUpload
+export { FileUpload as MoonUIFileUpload } from "./file-upload";
+
+// GestureDrawer
+export { GestureDrawer as MoonUIGestureDrawer } from "./gesture-drawer";
+
+// GitHubStars
+export { GitHubStars as MoonUIGitHubStars } from "./github-stars";
+
+// Input
+export { Input as MoonUIInput } from "./input";
+
+// Label
+export { Label as MoonUILabel } from "./label";
+
+// LockedComponent
+export {
+    LockedComponent as MoonUILockedComponent,
+    ProComponentWrapper as MoonUIProComponentWrapper,
+    ProBadge as MoonUIProBadge,
+    FreeBadge as MoonUIFreeBadge,
+} from "./locked-component";
+
+// MoonLogo
+export { MoonLogo as MoonUIMoonLogo } from "./moon-logo";
+
+// Pagination
+export {
+    Pagination as MoonUIPagination,
+    PaginationContent as MoonUIPaginationContent,
+    PaginationEllipsis as MoonUIPaginationEllipsis,
+    PaginationItem as MoonUIPaginationItem,
+    PaginationLink as MoonUIPaginationLink,
+    PaginationNext as MoonUIPaginationNext,
+    PaginationPrevious as MoonUIPaginationPrevious,
+} from "./pagination";
+
+// PhoneInput
+export { PhoneInput as MoonUIPhoneInput } from "./phone-input";
+
+// Popover
+export {
+    Popover as MoonUIPopover,
+    PopoverTrigger as MoonUIPopoverTrigger,
+    PopoverContent as MoonUIPopoverContent,
+} from "./popover";
+
+// Progress
+export { Progress as MoonUIProgress } from "./progress";
+
+// RadioGroup
+export {
+    RadioGroup as MoonUIRadioGroup,
+    RadioGroupItem as MoonUIRadioGroupItem,
+    RadioLabel as MoonUIRadioLabel,
+    RadioItemWithLabel as MoonUIRadioItemWithLabel,
+} from "./radio-group";
+
+// RichTextEditor
+export { RichTextEditor as MoonUIRichTextEditor } from "./rich-text-editor";
+
+// ScrollArea
+export {
+    ScrollArea as MoonUIScrollArea,
+    ScrollBar as MoonUIScrollBar,
+} from "./scroll-area";
+
+// Select
+export {
+    Select as MoonUISelect,
+    SelectGroup as MoonUISelectGroup,
+    SelectValue as MoonUISelectValue,
+    SelectTrigger as MoonUISelectTrigger,
+    SelectContent as MoonUISelectContent,
+    SelectLabel as MoonUISelectLabel,
+    SelectItem as MoonUISelectItem,
+    SelectSeparator as MoonUISelectSeparator,
+    SelectScrollUpButton as MoonUISelectScrollUpButton,
+    SelectScrollDownButton as MoonUISelectScrollDownButton,
+} from "./select";
+
+// Separator
+export { Separator as MoonUISeparator } from "./separator";
+
+// SimpleEditor
+export { SimpleEditor as MoonUISimpleEditor } from "./simple-editor";
+
+// Skeleton
+export {
+    Skeleton as MoonUISkeleton,
+    SkeletonText as MoonUISkeletonText,
+    SkeletonAvatar as MoonUISkeletonAvatar,
+    SkeletonCard as MoonUISkeletonCard,
+    skeletonVariants as moonUISkeletonVariants,
+} from "./skeleton";
+
+// Slider
+export { Slider as MoonUISlider } from "./slider";
+
+// SwipeableCard
+export { SwipeableCard as MoonUISwipeableCard } from "./swipeable-card";
+
+// Switch
+export { Switch as MoonUISwitch } from "./switch";
+
+// Table
+export {
+    Table as MoonUITable,
+    TableHeader as MoonUITableHeader,
+    TableBody as MoonUITableBody,
+    TableFooter as MoonUITableFooter,
+    TableHead as MoonUITableHead,
+    TableRow as MoonUITableRow,
+    TableCell as MoonUITableCell,
+    TableCaption as MoonUITableCaption,
+} from "./table";
+
+// Tabs
+export {
+    Tabs as MoonUITabs,
+    TabsList as MoonUITabsList,
+    TabsTrigger as MoonUITabsTrigger,
+    TabsContent as MoonUITabsContent,
+} from "./tabs";
+
+// TagsInput
+export { TagsInput as MoonUITagsInput } from "./tags-input";
+
+// Textarea
+export { Textarea as MoonUITextarea } from "./textarea";
+
+// Toast
+export {
+    Toast as MoonUIToast,
+    ToastAction as MoonUIToastAction,
+    ToastClose as MoonUIToastClose,
+    ToastDescription as MoonUIToastDescription,
+    ToastProvider as MoonUIToastProvider,
+    ToastTitle as MoonUIToastTitle,
+    ToastViewport as MoonUIToastViewport,
+    Toaster as MoonUIToaster,
+    toast,
+    useToast,
+} from "./toast";
+
+// Toggle
+export {
+    Toggle as MoonUIToggle,
+    toggleVariants as moonUIToggleVariants,
+} from "./toggle";
+
+// Tooltip
+export {
+    Tooltip as MoonUITooltip,
+    TooltipTrigger as MoonUITooltipTrigger,
+    TooltipContent as MoonUITooltipContent,
+    TooltipProvider as MoonUITooltipProvider,
+} from "./tooltip";
+
+// Also export without MoonUI prefix for backward compatibility
+export * from "./accordion";
+export * from "./alert";
+export * from "./aspect-ratio";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./card";
+export * from "./card-input";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./color-picker";
+export * from "./command";
+export * from "./data-table";
+export * from "./date-picker";
+export * from "./dialog";
+export * from "./draggable-list";
+export * from "./dropdown-menu";
+export * from "./file-upload";
+export * from "./gesture-drawer";
+export * from "./github-stars";
+export * from "./input";
+export * from "./label";
+export * from "./locked-component";
+export * from "./moon-logo";
+export * from "./pagination";
+export * from "./phone-input";
+export * from "./popover";
+export * from "./progress";
+export * from "./radio-group";
+export * from "./rich-text-editor";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./separator";
+export * from "./simple-editor";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./swipeable-card";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./tags-input";
+export * from "./textarea";
+export * from "./toast";
+export * from "./toggle";
+export * from "./tooltip";

package/src/components/ui/input.stories.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from './input';
 import { Label } from './label';

package/src/components/ui/input.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -146,7 +148,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div className="space-y-1.5 w-full">
-        <div className={cn(inputWrapperVariants({ size }), wrapperClassName)}>
+        <div className={cn("moonui-theme", inputWrapperVariants({ size }), wrapperClassName)}>
           {leftIcon && (
             <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
               {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : leftIcon}