@moontra/moonui-pro 2.2.2 → 2.2.4

package/src/components/ui/pagination.tsx

@@ -0,0 +1,122 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { ButtonProps, buttonVariants } from "./button"
+
+const MoonUIPaginationPro = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+MoonUIPaginationPro.displayName = "PaginationPro"
+
+const MoonUIPaginationContentPro = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+MoonUIPaginationContentPro.displayName = "PaginationContentPro"
+
+const MoonUIPaginationItemPro = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+MoonUIPaginationItemPro.displayName = "PaginationItemPro"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const MoonUIPaginationLinkPro = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      MoonUIbuttonVariantsPro({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+MoonUIPaginationLinkPro.displayName = "PaginationLinkPro"
+
+const MoonUIPaginationPreviousPro = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+MoonUIPaginationPreviousPro.displayName = "PaginationPreviousPro"
+
+const MoonUIPaginationNextPro = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+MoonUIPaginationNextPro.displayName = "PaginationNextPro"
+
+const MoonUIPaginationEllipsisPro = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+MoonUIPaginationEllipsisPro.displayName = "PaginationEllipsisPro"
+
+
+// Internal aliases for Pro component usage
+export const PaginationInternal = MoonUIPaginationPro
+export const PaginationContentInternal = MoonUIPaginationContentPro
+export const PaginationItemInternal = MoonUIPaginationItemPro
+export const PaginationLinkInternal = MoonUIPaginationLinkPro
+export const PaginationPreviousInternal = MoonUIPaginationPreviousPro
+export const PaginationNextInternal = MoonUIPaginationNextPro
+export const PaginationEllipsisInternal = MoonUIPaginationEllipsisPro
+
+// Pro exports  
+export { MoonUIPaginationPro, MoonUIPaginationContentPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationPreviousPro, MoonUIPaginationNextPro, MoonUIPaginationEllipsisPro }
+
+// Clean exports (without MoonUI prefix for easier usage)
+export { MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationPreviousPro as PaginationPrevious, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationEllipsisPro as PaginationEllipsis }

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

@@ -0,0 +1,261 @@
+"use client";
+
+import * as React from "react";
+import { Circle } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Radio Group Component
+ *
+ * Accessible, customizable, and fully integrated with the theme system radio button group.
+ * Allows users to select a single option from a group of choices.
+ */
+
+const MoonUIradioGroupItemVariantsPro = cva(
+  "aspect-square border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background text-primary",
+        outline: "border-border bg-transparent text-primary",
+        filled: "border-primary bg-primary/10 text-primary",
+      },
+      size: {
+        sm: "h-3.5 w-3.5",
+        default: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Radio group value
+   */
+  value?: string;
+  /**
+   * Function to call when radio group value changes
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * Radio group disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Radio group name
+   */
+  name?: string;
+}
+
+const MoonUIRadioGroupContextPro = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  name?: string;
+}>({});
+
+const MoonUIRadioGroupPro = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, value, onValueChange, disabled, name, ...props }, ref) => {
+    return (
+      <RadioGroupContext.Provider value={{ value, onValueChange, disabled, name }}>
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn("grid gap-2", className)}
+          {...props}
+        />
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+MoonUIRadioGroupPro.displayName = "RadioGroupPro";
+
+export interface RadioGroupItemProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof radioGroupItemVariants> {
+  /**
+   * Custom indicator component
+   */
+  indicator?: React.ReactNode;
+  /**
+   * HTML id for radio button
+   */
+  id?: string;
+  /**
+   * Radio button value
+   */
+  value: string;
+  /**
+   * Radio button disabled state
+   */
+  disabled?: boolean;
+}
+
+const MoonUIRadioGroupItemPro = React.forwardRef<
+  HTMLInputElement,
+  RadioGroupItemProps
+>(({ className, variant, size, indicator, id, value, disabled, ...props }, ref) => {
+  // Get context values from radio group
+  const MoonUIradioGroupPro = React.useContext(RadioGroupContext);
+  const MoonUIgeneratedIdPro = React.useId();
+  const MoonUIradioIdPro = id || generatedId;
+  const MoonUIisCheckedPro = radioGroup.value === value;
+  
+  // Call onValueChange function when RadioGroupItem changes
+  const MoonUIhandleChangePro = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (radioGroup.onValueChange) {
+      radioGroup.onValueChange(e.target.value);
+    }
+    
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  };
+  
+  return (
+    <div className="relative flex items-center">
+      <input
+        type="radio"
+        id={radioId}
+        ref={ref}
+        value={value}
+        checked={isChecked}
+        disabled={disabled || radioGroup.disabled}
+        name={radioGroup.name}
+        onChange={handleChange}
+        className="sr-only"
+        {...props}
+      />
+      <label
+        htmlFor={radioId}
+        className={cn(
+          radioGroupItemVariants({ variant, size }),
+          "rounded-full",
+          "focus-visible:ring-primary/50",
+          "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        )}
+      >
+        <span className={cn(
+          "absolute inset-0 pointer-events-none",
+          isChecked && "flex items-center justify-center"
+        )}>
+          {isChecked && (indicator || <Circle className="h-[60%] w-[60%] fill-current text-current" />)}
+        </span>
+      </label>
+    </div>
+  );
+});
+MoonUIRadioGroupItemPro.displayName = "RadioGroupItemPro";
+
+// Radio Label Component
+interface RadioLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+  /**
+   * HTML id for radio button
+   */
+  htmlFor?: string;
+  /**
+   * Label content
+   */
+  children: React.ReactNode;
+  /**
+   * Disabled state style
+   */
+  disabled?: boolean;
+}
+
+const MoonUIRadioLabelPro = React.forwardRef<HTMLLabelElement, RadioLabelProps>(
+  ({ className, htmlFor, children, disabled = false, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        htmlFor={htmlFor}
+        className={cn(
+          "text-sm font-medium leading-none ml-2 text-foreground",
+          disabled && "cursor-not-allowed opacity-70",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </label>
+    );
+  }
+);
+MoonUIRadioLabelPro.displayName = "RadioLabelPro";
+
+// Radio Item and Label combination
+interface RadioItemWithLabelProps extends RadioGroupItemProps {
+  /**
+   * Label content
+   */
+  label: React.ReactNode;
+  /**
+   * HTML classes for label
+   */
+  labelClassName?: string;
+  /**
+   * HTML id for radio button
+   */
+  id?: string;
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+}
+
+const MoonUIRadioItemWithLabelPro = React.forwardRef<
+  HTMLInputElement,
+  RadioItemWithLabelProps
+>(({ 
+  id, 
+  label, 
+  labelClassName, 
+  ...radioProps 
+}, ref) => {
+  const MoonUIgeneratedIdPro = React.useId();
+  const MoonUIradioIdPro = id || generatedId;
+  
+  return (
+    <div className="flex items-center">
+      <RadioGroupItem ref={ref} id={radioId} {...radioProps} />
+      <RadioLabel 
+        htmlFor={radioId}
+        disabled={radioProps.disabled}
+        className={labelClassName}
+      >
+        {label}
+      </RadioLabel>
+    </div>
+  );
+});
+MoonUIRadioItemWithLabelPro.displayName = "RadioItemWithLabelPro";
+
+
+// Internal aliases for Pro component usage
+export const radioGroupItemVariantsInternal = MoonUIradioGroupItemVariantsPro
+export const RadioGroupContextInternal = MoonUIRadioGroupContextPro
+export const RadioGroupInternal = MoonUIRadioGroupPro
+export const RadioGroupItemInternal = MoonUIRadioGroupItemPro
+export const radioGroupInternal = MoonUIradioGroupPro
+export const generatedIdInternal = MoonUIgeneratedIdPro
+export const radioIdInternal = MoonUIradioIdPro
+export const isCheckedInternal = MoonUIisCheckedPro
+export const handleChangeInternal = MoonUIhandleChangePro
+export const RadioLabelInternal = MoonUIRadioLabelPro
+export const RadioItemWithLabelInternal = MoonUIRadioItemWithLabelPro
+
+// Pro exports  
+export { MoonUIradioGroupItemVariantsPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupPro, MoonUIRadioGroupItemPro, MoonUIgeneratedIdPro, MoonUIradioIdPro, MoonUIisCheckedPro, MoonUIhandleChangePro, MoonUIRadioLabelPro, MoonUIRadioItemWithLabelPro }
+
+// Clean exports (without MoonUI prefix for easier usage)
+export { MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIgeneratedIdPro as generatedId, MoonUIradioIdPro as radioId, MoonUIisCheckedPro as isChecked, MoonUIhandleChangePro as handleChange, MoonUIRadioLabelPro as RadioLabel, MoonUIRadioItemWithLabelPro as RadioItemWithLabel };