@moontra/moonui 2.2.0 → 2.2.1

package/src/components/ui/card-input.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "@/components/ui"
+import { CreditCard } from "lucide-react"
+
+// Card type detection
+const getCardType = (number: string): string => {
+  const patterns = {
+    visa: /^4/,
+    mastercard: /^5[1-5]/,
+    amex: /^3[47]/,
+    discover: /^6(?:011|5)/,
+    diners: /^3(?:0[0-5]|[68])/,
+    jcb: /^35/,
+  }
+
+  for (const [type, pattern] of Object.entries(patterns)) {
+    if (pattern.test(number)) return type
+  }
+  return "unknown"
+}
+
+// Format card number with spaces
+const formatCardNumber = (value: string, cardType: string): string => {
+  const cleaned = value.replace(/\s+/g, "")
+  const groups = cardType === "amex" ? [4, 6, 5] : [4, 4, 4, 4]
+  
+  let formatted = ""
+  let position = 0
+  
+  for (const group of groups) {
+    if (position >= cleaned.length) break
+    if (formatted) formatted += " "
+    formatted += cleaned.slice(position, position + group)
+    position += group
+  }
+  
+  return formatted
+}
+
+// Card Number Input
+export interface CardNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string, cardType: string) => void
+  showIcon?: boolean
+}
+
+export const CardNumberInput = React.forwardRef<HTMLInputElement, CardNumberInputProps>(
+  ({ className, value = "", onChange, showIcon = true, size, ...props }, ref) => {
+    const [cardType, setCardType] = React.useState("unknown")
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/\D/g, "")
+      const detectedType = getCardType(rawValue)
+      setCardType(detectedType)
+      
+      const maxLength = detectedType === "amex" ? 15 : 16
+      const truncated = rawValue.slice(0, maxLength)
+      const formatted = formatCardNumber(truncated, detectedType)
+      
+      onChange?.(truncated, detectedType)
+      
+      // Update the input value
+      e.target.value = formatted
+    }
+    
+    return (
+      <div className="relative">
+        <Input
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          autoComplete="cc-number"
+          placeholder="1234 5678 9012 3456"
+          value={formatCardNumber(value, cardType)}
+          onChange={handleChange}
+          className={cn(showIcon && "pl-10", className)}
+          {...props}
+        />
+        {showIcon && (
+          <CreditCard className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        )}
+      </div>
+    )
+  }
+)
+CardNumberInput.displayName = "CardNumberInput"
+
+// Card Expiry Input
+export interface CardExpiryInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export const CardExpiryInput = React.forwardRef<HTMLInputElement, CardExpiryInputProps>(
+  ({ className, value = "", onChange, size, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let rawValue = e.target.value.replace(/\D/g, "")
+      
+      if (rawValue.length >= 2) {
+        const month = parseInt(rawValue.slice(0, 2))
+        if (month > 12) {
+          rawValue = "12" + rawValue.slice(2)
+        } else if (month === 0) {
+          rawValue = "01" + rawValue.slice(2)
+        }
+      }
+      
+      rawValue = rawValue.slice(0, 4)
+      let formatted = rawValue
+      
+      if (rawValue.length >= 2) {
+        formatted = rawValue.slice(0, 2) + "/" + rawValue.slice(2)
+      }
+      
+      onChange?.(rawValue)
+      e.target.value = formatted
+    }
+    
+    const formattedValue = value.length >= 2 ? value.slice(0, 2) + "/" + value.slice(2) : value
+    
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        autoComplete="cc-exp"
+        placeholder="MM/YY"
+        value={formattedValue}
+        onChange={handleChange}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+CardExpiryInput.displayName = "CardExpiryInput"
+
+// Card CVC Input
+export interface CardCVCInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string) => void
+  cardType?: string
+}
+
+export const CardCVCInput = React.forwardRef<HTMLInputElement, CardCVCInputProps>(
+  ({ className, value = "", onChange, cardType = "unknown", size, ...props }, ref) => {
+    const maxLength = cardType === "amex" ? 4 : 3
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/\D/g, "").slice(0, maxLength)
+      onChange?.(rawValue)
+    }
+    
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        autoComplete="cc-csc"
+        placeholder={cardType === "amex" ? "1234" : "123"}
+        value={value}
+        onChange={handleChange}
+        maxLength={maxLength}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+CardCVCInput.displayName = "CardCVCInput"
+
+// Card Zip Input
+export interface CardZipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string) => void
+  format?: "US" | "CA" | "UK" | "other"
+}
+
+export const CardZipInput = React.forwardRef<HTMLInputElement, CardZipInputProps>(
+  ({ className, value = "", onChange, format = "US", size, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let rawValue = e.target.value
+      
+      switch (format) {
+        case "US":
+          rawValue = rawValue.replace(/\D/g, "").slice(0, 5)
+          break
+        case "CA":
+          rawValue = rawValue.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6)
+          if (rawValue.length >= 3) {
+            rawValue = rawValue.slice(0, 3) + " " + rawValue.slice(3)
+          }
+          break
+        case "UK":
+          rawValue = rawValue.toUpperCase().replace(/[^A-Z0-9\s]/g, "").slice(0, 8)
+          break
+        default:
+          rawValue = rawValue.slice(0, 10)
+      }
+      
+      onChange?.(rawValue.replace(/\s/g, ""))
+      e.target.value = rawValue
+    }
+    
+    const getPlaceholder = () => {
+      switch (format) {
+        case "US": return "12345"
+        case "CA": return "K1A 0B1"
+        case "UK": return "SW1A 1AA"
+        default: return "Postal Code"
+      }
+    }
+    
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        autoComplete="postal-code"
+        placeholder={getPlaceholder()}
+        value={value}
+        onChange={handleChange}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+CardZipInput.displayName = "CardZipInput"

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

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
 import { Button } from './button';

package/src/components/ui/card.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, type HTMLMotionProps } from "framer-motion";

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

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { DataTable } from './data-table';
 import { Badge } from './badge';
@@ -141,7 +143,7 @@ const userColumns: ColumnDef<User>[] = [
     cell: ({ row }) => {
       const role = row.getValue('role') as string;
       return (
-        <Badge variant={role === 'admin' ? 'default' : 'secondary'}>
+        <Badge variant={role === 'admin' ? 'admin' : 'secondary'}>
           {role}
         </Badge>
       );
@@ -156,7 +158,7 @@ const userColumns: ColumnDef<User>[] = [
         <Badge
           variant={
             status === 'active'
-              ? 'default'
+              ? 'success'
               : status === 'inactive'
               ? 'secondary'
               : 'outline'

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

@@ -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 { pageTransitions } 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
@@ -146,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);
     }
   };
@@ -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
-          {...pageTransitions.fadeIn}
+          {...pageTransitions}
           className="rounded-2xl bg-background overflow-hidden"
         >
           <Calendar
@@ -361,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}
@@ -557,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

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

@@ -1,3 +1,5 @@
+"use client"
+
 // Basic Draggable List - Free Version
 "use client"