@moontra/moonui 2.1.8 → 2.2.0

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

@@ -8,7 +8,6 @@ export * from "./avatar"
 export * from "./badge"
 export * from "./breadcrumb"
 export * from "./button"
-export * from "./calendar"
 export * from "./card"
 export * from "./checkbox"
 export * from "./collapsible"
@@ -24,7 +23,6 @@ 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"

package/src/components/ui/input.tsx

@@ -146,7 +146,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}

package/src/components/ui/moon-logo.tsx

@@ -18,7 +18,7 @@ export function MoonLogo({
   const gradientId = `moon-gradient-${logoId}`
   
   return (
-    <div className={cn("flex items-center gap-2", className)}>
+    <div className={cn("moonui-theme", "flex items-center gap-2", className)}>
       {/* Moon Icon */}
       <svg
         width="32"

package/src/components/ui/pagination.tsx

@@ -7,7 +7,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn("moonui-theme", "mx-auto flex w-full justify-center", className)}
     {...props}
   />
 )
@@ -19,7 +19,7 @@ const PaginationContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
+    className={cn("moonui-theme", "flex flex-row items-center gap-1", className)}
     {...props}
   />
 ))
@@ -29,7 +29,7 @@ const PaginationItem = React.forwardRef<
   HTMLLIElement,
   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
+  <li ref={ref} className={cn("moonui-theme", "", className)} {...props} />
 ))
 PaginationItem.displayName = "PaginationItem"
 
@@ -64,8 +64,8 @@ const PaginationPrevious = ({
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    size="md"
+    className={cn("moonui-theme", "gap-1 pl-2.5", className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
@@ -80,8 +80,8 @@ const PaginationNext = ({
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    size="md"
+    className={cn("moonui-theme", "gap-1 pr-2.5", className)}
     {...props}
   >
     <span>Next</span>
@@ -96,7 +96,7 @@ const PaginationEllipsis = ({
 }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn("moonui-theme", "flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />

package/src/components/ui/popover.tsx

@@ -142,7 +142,7 @@ const PopoverClose = PopoverPrimitive.Close;
  */
 const PopoverSeparator = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("my-2 h-px bg-border", className)}
+    className={cn("moonui-theme", "my-2 h-px bg-border", className)}
     {...props}
   />
 );
@@ -153,7 +153,7 @@ PopoverSeparator.displayName = "PopoverSeparator";
  */
 const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className)}
+    className={cn("moonui-theme", "-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-border", className)}
     {...props}
   />
 );
@@ -164,7 +164,7 @@ PopoverHeader.displayName = "PopoverHeader";
  */
 const PopoverFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className)}
+    className={cn("moonui-theme", "-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-border", className)}
     {...props}
   />
 );

package/src/components/ui/progress.tsx

@@ -155,7 +155,7 @@ const Progress = React.forwardRef<
       )}
       <div
         ref={ref}
-        className={cn(progressVariants({ variant, size, radius, animation }), className)}
+        className={cn("moonui-theme", progressVariants({ variant, size, radius, animation }), className)}
         role="progressbar"
         aria-valuemin={0}
         aria-valuemax={max}

package/src/components/ui/radio-group.tsx

@@ -69,7 +69,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
         <div
           ref={ref}
           role="radiogroup"
-          className={cn("grid gap-2", className)}
+          className={cn("moonui-theme", "grid gap-2", className)}
           {...props}
         />
       </RadioGroupContext.Provider>

package/src/components/ui/select.tsx

@@ -185,7 +185,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("moonui-theme", "py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
 ))
@@ -253,7 +253,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className)}
+    className={cn("moonui-theme", "-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className)}
     {...props}
   />
 ))

package/src/components/ui/skeleton.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { motion } from "framer-motion";
-import { skeletonAnimation } from "@/lib/micro-interactions";
+import { skeletonAnimation } from "../../lib/micro-interactions";
 
 /**
  * Skeleton Component
@@ -93,6 +93,17 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
     style,
     ...props 
   }, ref) => {
+    // Filter out HTML event handlers that conflict with Framer Motion
+    const { 
+      onDrag, 
+      onDragEnd, 
+      onDragStart,
+      onAnimationStart,
+      onAnimationEnd,
+      onAnimationIteration,
+      ...filteredProps 
+    } = props;
+    
     // Show content when loaded
     if (isLoaded && children) {
       if (useMotion) {
@@ -102,13 +113,13 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: fadeInDuration / 1000 }}
-            className={className}
+            className={cn("moonui-theme", className)}
             style={{
               height,
               width,
               ...style,
             }}
-            {...props}
+            {...filteredProps}
           >
             {children}
           </motion.div>
@@ -118,7 +129,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       return (
         <div
           ref={ref}
-          className={cn("animate-fade-in", className)}
+          className={cn("moonui-theme", "animate-fade-in", className)}
           style={{
             animationDuration: `${fadeInDuration}ms`,
             height,
@@ -138,6 +149,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       <SkeletonElement
         ref={ref}
         className={cn(
+          "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),
           "relative isolate",
           className
@@ -148,7 +160,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
           ...style,
         }}
         {...(useMotion ? skeletonAnimation : {})}
-        {...props}
+        {...filteredProps}
       />
     );
   }
@@ -198,7 +210,7 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     return (
       <div
         ref={ref}
-        className={cn("flex flex-col", className)}
+        className={cn("moonui-theme", "flex flex-col", className)}
         style={{ gap: spacing }}
         {...props}
       >
@@ -254,7 +266,7 @@ export const SkeletonAvatar = React.forwardRef<HTMLDivElement, SkeletonAvatarPro
         variant={variant}
         animation={animation}
         shape="circle"
-        className={cn("shrink-0", className)}
+        className={cn("moonui-theme", "shrink-0", className)}
         style={{
           height: size,
           width: size,

package/src/components/ui/slider.tsx

@@ -296,7 +296,7 @@ const Slider = React.forwardRef<
       )}
       
       <div
-        className={cn(sliderVariants({ size }), className)}
+        className={cn("moonui-theme", sliderVariants({ size }), className)}
         data-disabled={disabled ? true : undefined}
       >
         {/* Track */}

package/src/components/ui/switch.tsx

@@ -27,7 +27,7 @@ const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchProps
 >(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => (
-  <div className="inline-flex items-center gap-2">
+  <div className="moonui-theme inline-flex items-center gap-2">
     {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
     <SwitchPrimitives.Root
       className={cn(

package/src/components/ui/table.tsx

@@ -127,7 +127,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("moonui-theme", "[&_tr]:border-b", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -148,7 +148,7 @@ const TableBody = React.forwardRef<
   return (
     <tbody
       ref={ref}
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn("moonui-theme", "[&_tr:last-child]:border-0", className)}
       {...props}
     >
       {hasChildren ? (
@@ -177,7 +177,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-primary text-primary-foreground font-medium", className)}
+    className={cn("moonui-theme", "bg-primary text-primary-foreground font-medium", className)}
     {...props}
   />
 ));
@@ -290,7 +290,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ));
@@ -302,7 +302,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("moonui-theme", "mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/components/ui/tabs.tsx

@@ -18,6 +18,7 @@ const Tabs = React.forwardRef<
 >(({ vertical = false, ...props }, ref) => (
   <TabsPrimitive.Root
     ref={ref}
+    className={cn("moonui-theme", props.className)}
     orientation={vertical ? "vertical" : "horizontal"}
     {...props}
   />
@@ -68,7 +69,7 @@ const TabsList = React.forwardRef<
 >(({ className, variant, orientation, fullWidth, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(tabsListVariants({ variant, orientation, fullWidth, className }))}
+    className={cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, className }))}
     {...props}
   />
 ));
@@ -145,6 +146,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
+      "moonui-theme",
       tabsTriggerVariants({ variant, size, orientation, fullWidth }),
       fadeTabs && "data-[state=inactive]:opacity-60",
       className
@@ -182,6 +184,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
+      "moonui-theme",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       animated && "data-[state=active]:animate-fadeIn data-[state=inactive]:animate-fadeOut",
       className

package/src/components/ui/textarea.tsx

@@ -31,7 +31,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   }, ref) => {
     return (
       <textarea
-        className={cn(
+        className={cn("moonui-theme", 
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}

package/src/components/ui/toast.tsx

@@ -57,7 +57,7 @@ const Toast = React.forwardRef<
   return (
     <ToastPrimitives.Root
       ref={ref}
-      className={cn(toastVariants({ variant }), className)}
+      className={cn("moonui-theme", toastVariants({ variant }), className)}
       {...props}
     />
   );
@@ -103,7 +103,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    className={cn("moonui-theme", "text-sm font-semibold [&+div]:text-xs", className)}
     {...props}
   />
 ));
@@ -115,7 +115,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn("moonui-theme", "text-sm opacity-90", className)}
     {...props}
   />
 ));

package/src/components/ui/toggle.tsx

@@ -36,12 +36,11 @@ const Toggle = React.forwardRef<
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
+    className={cn("moonui-theme", toggleVariants({ variant, size, className }))}
     {...props}
   />
 ))
 
 Toggle.displayName = TogglePrimitive.Root.displayName
 
-export { Toggle, toggleVariants }
-export type { ToggleProps }
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -43,7 +43,7 @@ const TooltipArrow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TooltipPrimitive.Arrow
     ref={ref}
-    className={cn("fill-current", className)}
+    className={cn("moonui-theme", "fill-current", className)}
     {...props}
   />
 ))
@@ -62,7 +62,7 @@ const TooltipContent = React.forwardRef<
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
-    className={cn(tooltipVariants({ variant, size }), className)}
+    className={cn("moonui-theme", tooltipVariants({ variant, size }), className)}
     {...props}
   >
     {props.children}
@@ -80,7 +80,6 @@ export interface SimpleTooltipProps {
   side?: "top" | "right" | "bottom" | "left"
   align?: "start" | "center" | "end"
   delayDuration?: number
-  skipDelayDuration?: number
   sideOffset?: number
   showArrow?: boolean
   className?: string
@@ -102,7 +101,6 @@ const SimpleTooltip = React.forwardRef<
       side = "top",
       align = "center",
       delayDuration = 400,
-      skipDelayDuration = 300,
       sideOffset = 4,
       showArrow = false,
       className,
@@ -119,7 +117,6 @@ const SimpleTooltip = React.forwardRef<
         defaultOpen={defaultOpen}
         onOpenChange={onOpenChange}
         delayDuration={delayDuration}
-        skipDelayDuration={skipDelayDuration}
       >
         <TooltipTrigger asChild>{children}</TooltipTrigger>
         <TooltipContent

package/src/index.tsx

@@ -11,7 +11,6 @@ export * from "./components/ui/avatar"
 export * from "./components/ui/badge"
 export * from "./components/ui/breadcrumb"
 export * from "./components/ui/button"
-export * from "./components/ui/calendar"
 export * from "./components/ui/card"
 export * from "./components/ui/checkbox"
 export * from "./components/ui/collapsible"

package/src/lib/micro-interactions.ts

@@ -252,4 +252,5 @@ export const notificationAnimation = {
   transition: springAnimations.bouncy,
 };
 
-export type MicroInteractionProps = VariantProps<typeof microInteractionVariants>;
+export type MicroInteractionProps = VariantProps<typeof microInteractionVariants>;
+