@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/forms/profile-dropdown.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '~/components/catalyst-ui'
+import { Settings, CreditCard, FileText, LogOut, User } from 'lucide-react'
+import { Link } from '@remix-run/react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/catalyst-ui"
+
+const profileDropdownVariants = cva(
+  "relative",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+interface Profile {
+  name: string
+  email: string
+  avatar: string
+  subscription?: string
+  model?: string
+}
+
+interface MenuItem {
+  label: string
+  value?: string
+  href: string
+  icon: React.ReactNode
+  external?: boolean
+}
+
+function ProfileDropdown({
+  className,
+  size,
+  data = {
+    name: "Eugene An",
+    email: "eugene@example.com",
+    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop",
+    subscription: "PRO",
+    model: "GPT-4",
+  },
+  menuItems = [
+    { label: "Profile", href: "/profile", icon: <User className="w-4 h-4" /> },
+    { label: "Settings", href: "/settings", icon: <Settings className="w-4 h-4" /> },
+    { label: "Terms & Policies", href: "/terms", icon: <FileText className="w-4 h-4" />, external: true },
+  ],
+  onSignOut,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof profileDropdownVariants> & {
+    data?: Profile
+    menuItems?: MenuItem[]
+    onSignOut?: () => void
+  }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const defaultMenuItems: MenuItem[] = [
+    { label: "Profile", href: "/profile", icon: <User className="w-4 h-4" /> },
+    { label: "Model", value: data.model, href: "/model", icon: <User className="w-4 h-4" /> },
+    { label: "Subscription", value: data.subscription, href: "/subscription", icon: <CreditCard className="w-4 h-4" /> },
+    { label: "Settings", href: "/settings", icon: <Settings className="w-4 h-4" /> },
+    { label: "Terms & Policies", href: "/terms", icon: <FileText className="w-4 h-4" />, external: true },
+  ]
+
+  const items = menuItems.length > 0 ? menuItems : defaultMenuItems
+
+  return (
+    <div data-slot="profile-dropdown" className={cn(profileDropdownVariants({ size, className }))} {...props}>
+      <DropdownMenu onOpenChange={setIsOpen}>
+        <div className="group relative">
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex items-center gap-16 p-3 rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200/60 dark:border-zinc-800/60 hover:border-zinc-300 dark:hover:border-zinc-700 hover:bg-zinc-50/80 dark:hover:bg-zinc-800/40 hover:shadow-sm transition-all duration-200 focus:outline-none"
+            >
+              <div className="text-left flex-1">
+                <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100 tracking-tight leading-tight">
+                  {data.name}
+                </div>
+                <div className="text-xs text-zinc-500 dark:text-zinc-400 tracking-tight leading-tight">
+                  {data.email}
+                </div>
+              </div>
+              <div className="relative">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 p-0.5">
+                  <div className="w-full h-full rounded-full overflow-hidden bg-white dark:bg-zinc-900">
+                    <img
+                      src={data.avatar}
+                      alt={data.name}
+                      className="w-full h-full object-cover rounded-full"
+                    />
+                  </div>
+                </div>
+              </div>
+            </button>
+          </DropdownMenuTrigger>
+
+          <div
+            className={cn(
+              "absolute -right-3 top-1/2 -translate-y-1/2 transition-all duration-200",
+              isOpen ? "opacity-100" : "opacity-60 group-hover:opacity-100"
+            )}
+          >
+            <svg
+              width="12"
+              height="24"
+              viewBox="0 0 12 24"
+              fill="none"
+              className={cn(
+                "transition-all duration-200",
+                isOpen
+                  ? "text-blue-500 dark:text-blue-400 scale-110"
+                  : "text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300"
+              )}
+              aria-hidden="true"
+            >
+              <path
+                d="M2 4C6 8 6 16 2 20"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                fill="none"
+              />
+            </svg>
+          </div>
+
+          <DropdownMenuContent
+            align="end"
+            sideOffset={4}
+            className="w-64 p-2 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border border-zinc-200/60 dark:border-zinc-800/60 rounded-2xl shadow-xl shadow-zinc-900/5 dark:shadow-zinc-950/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-top-right"
+          >
+            <div className="space-y-1">
+              {items.map((item) => (
+                <DropdownMenuItem key={item.label} asChild>
+                  <Link
+                    to={item.href}
+                    className="flex items-center p-3 hover:bg-zinc-100/80 dark:hover:bg-zinc-800/60 rounded-xl transition-all duration-200 cursor-pointer group hover:shadow-sm border border-transparent hover:border-zinc-200/50 dark:hover:border-zinc-700/50"
+                  >
+                    <div className="flex items-center gap-2 flex-1">
+                      {item.icon}
+                      <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100 tracking-tight leading-tight whitespace-nowrap group-hover:text-zinc-950 dark:group-hover:text-zinc-50 transition-colors">
+                        {item.label}
+                      </span>
+                    </div>
+                    <div className="flex-shrink-0 ml-auto">
+                      {item.value && (
+                        <span
+                          className={cn(
+                            "text-xs font-medium rounded-md py-1 px-2 tracking-tight",
+                            item.label === "Model"
+                              ? "text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-500/10 border border-blue-500/10"
+                              : "text-purple-600 bg-purple-50 dark:text-purple-400 dark:bg-purple-500/10 border border-purple-500/10"
+                          )}
+                        >
+                          {item.value}
+                        </span>
+                      )}
+                    </div>
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </div>
+
+            <DropdownMenuSeparator className="my-3 bg-gradient-to-r from-transparent via-zinc-200 to-transparent dark:via-zinc-800" />
+
+            <DropdownMenuItem asChild>
+              <button
+                type="button"
+                onClick={onSignOut}
+                className="w-full flex items-center gap-3 p-3 duration-200 bg-red-500/10 rounded-xl hover:bg-red-500/20 cursor-pointer border border-transparent hover:border-red-500/30 hover:shadow-sm transition-all group"
+              >
+                <LogOut className="w-4 h-4 text-red-500 group-hover:text-red-600" />
+                <span className="text-sm font-medium text-red-500 group-hover:text-red-600">
+                  Sign Out
+                </span>
+              </button>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </div>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+export function ProfileDropdownDemo() {
+  const handleSignOut = () => {
+    console.log("Sign out clicked")
+  }
+
+  const sampleProfile = {
+    name: "Eugene An",
+    email: "eugene@example.com",
+    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop",
+    subscription: "PRO",
+    model: "GPT-4",
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4 text-center">Profile Dropdown</h2>
+        <div className="flex justify-center">
+          <ProfileDropdown data={sampleProfile} onSignOut={handleSignOut} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ 
+export { ProfileDropdown, profileDropdownVariants }

package/dist/components/catalyst-ui/forms/radio-tile.tsx

@@ -0,0 +1,245 @@
+import React, { useState, useContext, createContext } from "react";
+import { Button } from "~/components/catalyst-ui";
+import { cn } from "~/components/catalyst-ui";
+import { Check, Star, Heart, Zap, Shield, User, Settings, Home, Mail, Phone, Calendar, Camera, Music, Globe, Download, Upload, Edit, Delete, Search, Filter, Plus, Minus, ArrowRight, ArrowLeft, ChevronDown, ChevronUp } from "lucide-react";
+
+interface RadioTileContextType {
+  value?: string | number;
+  onChange?: (value: string | number) => void;
+  name?: string;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "bordered" | "filled" | "ghost";
+}
+
+const RadioTileContext = createContext<RadioTileContextType>({});
+
+export interface RadioTileGroupProps {
+  children: React.ReactNode;
+  value?: string | number;
+  onChange?: (value: string | number) => void;
+  name?: string;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "bordered" | "filled" | "ghost";
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}
+
+export interface RadioTileProps {
+  value: string | number;
+  children: React.ReactNode;
+  disabled?: boolean;
+  icon?: React.ComponentType<any>;
+  description?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+export function RadioTileGroup({
+  children,
+  value,
+  onChange,
+  name = "radio-tile-group",
+  disabled = false,
+  size = "md",
+  variant = "default",
+  className,
+  direction = "horizontal",
+  ...props
+}: RadioTileGroupProps) {
+  const contextValue: RadioTileContextType = {
+    value,
+    onChange,
+    name,
+    disabled,
+    size,
+    variant,
+  };
+
+  const groupClasses = cn(
+    "radio-tile-group",
+    "flex gap-3",
+    {
+      "flex-row flex-wrap": direction === "horizontal",
+      "flex-col": direction === "vertical",
+    },
+    className
+  );
+
+  return (
+    <RadioTileContext.Provider value={contextValue}>
+      <div className={groupClasses} role="radiogroup" {...props}>
+        {children}
+      </div>
+    </RadioTileContext.Provider>
+  );
+}
+
+export function RadioTile({
+  value,
+  children,
+  disabled,
+  icon: Icon,
+  description,
+  className,
+  onClick,
+  ...props
+}: RadioTileProps) {
+  const context = useContext(RadioTileContext);
+  const isSelected = context.value === value;
+  const isDisabled = disabled || context.disabled;
+  const size = context.size || "md";
+  const variant = context.variant || "default";
+
+  const handleClick = () => {
+    if (!isDisabled) {
+      context.onChange?.(value);
+      onClick?.();
+    }
+  };
+
+  const sizeClasses = {
+    sm: "p-3 text-sm min-h-[60px]",
+    md: "p-4 text-base min-h-[80px]",
+    lg: "p-6 text-lg min-h-[100px]",
+  };
+
+  const variantClasses = {
+    default: cn(
+      "bg-background border border-border hover:border-primary/50",
+      {
+        "border-primary bg-primary/5 ring-2 ring-primary/20": isSelected,
+        "opacity-50 cursor-not-allowed": isDisabled,
+        "cursor-pointer hover:bg-muted/50": !isDisabled,
+      }
+    ),
+    bordered: cn(
+      "bg-transparent border-2 border-border hover:border-primary/50",
+      {
+        "border-primary bg-primary/5": isSelected,
+        "opacity-50 cursor-not-allowed": isDisabled,
+        "cursor-pointer hover:border-muted-foreground": !isDisabled,
+      }
+    ),
+    filled: cn(
+      "bg-muted/50 border border-transparent hover:bg-muted",
+      {
+        "bg-primary text-primary-foreground border-primary": isSelected,
+        "opacity-50 cursor-not-allowed": isDisabled,
+        "cursor-pointer": !isDisabled,
+      }
+    ),
+    ghost: cn(
+      "bg-transparent border border-transparent hover:bg-muted/50",
+      {
+        "bg-primary/10 border-primary/30 text-primary": isSelected,
+        "opacity-50 cursor-not-allowed": isDisabled,
+        "cursor-pointer": !isDisabled,
+      }
+    ),
+  };
+
+  const tileClasses = cn(
+    "radio-tile relative flex flex-col items-center justify-center text-center rounded-lg transition-all duration-200",
+    "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    sizeClasses[size],
+    variantClasses[variant],
+    className
+  );
+
+  return (
+    <div
+      className={tileClasses}
+      onClick={handleClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
+      role="radio"
+      aria-checked={isSelected}
+      aria-disabled={isDisabled}
+      tabIndex={isDisabled ? -1 : 0}
+      {...props}
+    >
+      <input
+        type="radio"
+        name={context.name}
+        value={value}
+        checked={isSelected}
+        disabled={isDisabled}
+        onChange={() => {}}
+        className="sr-only"
+      />
+      
+      {isSelected && (
+        <div className="absolute top-2 right-2">
+          <div className="flex items-center justify-center w-5 h-5 bg-primary text-primary-foreground rounded-full">
+            <Check className="w-3 h-3" />
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col items-center gap-2">
+        {Icon && (
+          <Icon className={cn("flex-shrink-0", {
+            "w-4 h-4": size === "sm",
+            "w-5 h-5": size === "md",
+            "w-6 h-6": size === "lg",
+          })} />
+        )}
+        
+        <div className="space-y-1">
+          <div className={cn("font-medium", {
+            "text-primary-foreground": variant === "filled" && isSelected,
+          })}>
+            {children}
+          </div>
+          
+          {description && (
+            <div className={cn("text-muted-foreground text-sm", {
+              "text-primary-foreground/80": variant === "filled" && isSelected,
+            })}>
+              {description}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+
+/** Basic usage
+<RadioTileGroup value={selected} onChange={setSelected}>
+  <RadioTile value="option1" icon={User}>Option 1</RadioTile>
+  <RadioTile value="option2" icon={Settings}>Option 2</RadioTile>
+</RadioTileGroup>
+
+// With descriptions and variants
+<RadioTileGroup 
+  value={plan} 
+  onChange={setPlan}
+  variant="filled"
+  size="lg"
+>
+  <RadioTile 
+    value="pro" 
+    icon={Star}
+    description="Great for teams"
+  >
+    Pro Plan - $29/mo
+  </RadioTile>
+</RadioTileGroup>
+
+// Vertical layout
+<RadioTileGroup 
+  direction="vertical"
+  variant="bordered"
+>
+  <RadioTile value="feature1" icon={Shield}>Security</RadioTile>
+  <RadioTile value="feature2" icon={Zap}>Performance</RadioTile>
+</RadioTileGroup> */

package/dist/components/catalyst-ui/forms/rating-2.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { Star } from 'lucide-react';
+import { cn } from '~/components/catalyst-ui';
+import { Button } from '~/components/catalyst-ui'
+
+export interface RatingProps {
+  title?: string;
+  description?: string;
+  url?: string;
+  buttonText1?: string;
+  buttonText2?: string;
+  className?: string;
+  variant?: 'default' | 'filled' | 'custom';
+  count?: number;
+  value?: number;
+  onChange?: (value: number) => void;
+  readOnly?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'default' | 'primary' | 'destructive' | 'warning';
+}
+
+export function Rating2 ({
+  title,
+  description,
+  url,
+  buttonText1,
+  buttonText2,
+  className,
+  variant = 'default',
+  count = 5,
+  value = 0,
+  onChange,
+  readOnly = false,
+  size = 'md',
+  color = 'default',
+}: RatingProps)  {
+  const [hovered, setHovered] = useState(-1);
+  
+  const handleClick = (newValue: number) => {
+    if (!readOnly && onChange) {
+      onChange(newValue);
+    }
+  };
+
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+  };
+
+  const colorClasses = {
+    default: 'text-foreground/30',
+    primary: 'text-primary/30',
+    destructive: 'text-destructive/30',
+    warning: 'text-warning/30',
+  };
+
+  const activeColorClasses = {
+    default: 'text-foreground',
+    primary: 'text-primary',
+    destructive: 'text-destructive',
+    warning: 'text-warning',
+  };
+
+  const filledVariant = variant === 'filled';
+
+  return (
+    <div className={cn('flex flex-col gap-4 p-6 rounded-lg border bg-background', className)}>
+      {(title || description) && (
+        <div className="flex flex-col gap-2">
+          {title && <h3 className="text-lg font-medium text-foreground">{title}</h3>}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      
+      <div className="flex items-center gap-2">
+        {Array.from({ length: count }).map((_, index) => {
+          const ratingValue = index + 1;
+          const isFilled = ratingValue <= value;
+          const isHovered = ratingValue <= hovered;
+          
+          return (
+            <button
+              key={index}
+              type="button"
+              className={cn(
+                'relative cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-full',
+                readOnly && 'cursor-default',
+                sizeClasses[size]
+              )}
+              onClick={() => handleClick(ratingValue)}
+              onMouseEnter={() => !readOnly && setHovered(ratingValue)}
+              onMouseLeave={() => !readOnly && setHovered(-1)}
+              disabled={readOnly}
+            >
+              <Star
+                className={cn(
+                  'absolute inset-0 transition-all',
+                  (isFilled || isHovered) ? 'opacity-0' : 'opacity-100',
+                  colorClasses[color]
+                )}
+                fill="currentColor"
+              />
+              <Star
+                className={cn(
+                  'absolute inset-0 transition-all',
+                  (isFilled || isHovered) ? 'opacity-100' : 'opacity-0',
+                  (isFilled || isHovered) ? activeColorClasses[color] : colorClasses[color],
+                  filledVariant && 'fill-current'
+                )}
+              />
+            </button>
+          );
+        })}
+        <span className="ml-2 text-sm text-muted-foreground">{value} out of {count}</span>
+      </div>
+      
+      {(buttonText1 || buttonText2 || url) && (
+        <div className="flex gap-2">
+          {buttonText1 && (
+            <Button variant="outline" size="sm">
+              {buttonText1}
+            </Button>
+          )}
+          {buttonText2 && (
+            <Button size="sm">
+              {buttonText2}
+            </Button>
+          )}
+          {url && (
+            <a href={url} className="text-sm text-primary hover:underline self-center ml-auto">
+              View details
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+

package/dist/components/catalyst-ui/forms/search-input.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import { cn } from '~/components/catalyst-ui';
+import { Input } from "~/components/catalyst-ui";
+import { Button } from "~/components/catalyst-ui";
+import { Search, X } from 'lucide-react';
+
+export interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onClear: () => void;
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    placeholder?: string;
+}
+
+const SearchInput = forwardRef<HTMLDivElement, SearchInputProps>(
+    ({ className, value, onChange, onClear, placeholder = 'Search...', ...props }, ref) => {
+        return (
+            <div className={cn("relative w-full", className)} ref={ref}>
+                <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">
+                   <Search />
+                </div>
+
+                <Input
+                    value={value}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    className="pl-10 pr-10"
+                    {...props}
+                />
+
+                {value && (
+                    <Button
+                        size="icon"
+                        variant="ghost"
+                        onClick={onClear}
+                        className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8"
+                        type="button"
+                    >
+                        <X  />
+                    </Button>
+                )}
+            </div>
+        );
+    }
+);
+
+SearchInput.displayName = 'SearchInput';
+
+export { SearchInput }