@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/primitives/checkbox.tsx

@@ -0,0 +1,225 @@
+
+import React, { createContext, useContext, useId } from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check, Minus, Heart, Star, Circle, CircleCheck } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '~/components/catalyst-ui'
+
+// ==================== CVA VARIANTS ====================
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:2792
+export const checkboxVariants = cva(
+  'peer shrink-0 border shadow-xs transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: [
+          'border-input dark:bg-input/30',
+          'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary',
+          'data-[state=indeterminate]:text-foreground',
+          'dark:data-[state=checked]:bg-primary',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
+        ],
+        destructive: [
+          'data-[state=checked]:bg-destructive data-[state=checked]:border-destructive',
+          'focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+          'dark:text-white'
+        ],
+        info: [
+          'focus-visible:ring-sky-600/20 data-[state=checked]:border-sky-600 data-[state=checked]:bg-sky-600',
+          'dark:text-white dark:focus-visible:ring-sky-400/40',
+          'dark:data-[state=checked]:border-sky-400 dark:data-[state=checked]:bg-sky-400'
+        ],
+        success: [
+          'focus-visible:ring-green-600/20 data-[state=checked]:border-green-600 data-[state=checked]:bg-green-600',
+          'dark:text-white dark:focus-visible:ring-green-400/40',
+          'dark:data-[state=checked]:border-green-400 dark:data-[state=checked]:bg-green-400'
+        ],
+        card: [
+          'data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white',
+          'dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700'
+        ],
+        animated: [
+          'rounded-full focus-visible:border-blue-500 focus-visible:ring-blue-500/20',
+          'data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500',
+          'dark:text-white dark:focus-visible:ring-blue-500/40'
+        ],
+        filled: [
+          'rounded-full bg-destructive data-[state=checked]:text-destructive',
+          'focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+        ],
+        filledInfo: [
+          'rounded-full bg-sky-600 focus-visible:ring-sky-600/20 data-[state=checked]:text-sky-600',
+          'dark:bg-sky-400 dark:focus-visible:ring-sky-400/40 dark:data-[state=checked]:text-sky-400'
+        ],
+        filledSuccess: [
+          'rounded-full bg-green-600 focus-visible:ring-green-600/20 data-[state=checked]:text-green-600',
+          'dark:bg-green-400 dark:focus-visible:ring-green-400/40 dark:data-[state=checked]:text-green-400'
+        ]
+      },
+      size: {
+        default: 'size-4 rounded-[4px]',
+        sm: 'size-5 rounded-[4px]',
+        lg: 'size-6 rounded-[4px]',
+        xl: 'size-7 rounded-full'
+      },
+      border: {
+        solid: '',
+        dashed: 'border-dashed border-primary'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      border: 'solid'
+    }
+  }
+)
+
+export const checkboxIndicatorVariants = cva(
+  'flex items-center justify-center text-current transition-none',
+  {
+    variants: {
+      icon: {
+        check: '',
+        minus: '',
+        heart: '',
+        star: '',
+        circle: '',
+        circleCheck: ''
+      }
+    },
+    defaultVariants: {
+      icon: 'check'
+    }
+  }
+)
+
+// ==================== CONTEXT ====================
+
+type CheckboxContextValue = VariantProps<typeof checkboxVariants> & {
+  icon?: VariantProps<typeof checkboxIndicatorVariants>['icon']
+}
+
+const CheckboxContext = createContext<CheckboxContextValue>({})
+
+const useCheckboxContext = () => useContext(CheckboxContext)
+
+// ==================== MAIN COMPONENTS ====================
+
+interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+  VariantProps<typeof checkboxVariants> {
+  icon?: VariantProps<typeof checkboxIndicatorVariants>['icon']
+}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, variant, size, border, icon, children, ...props }, ref) => {
+  const contextValue: CheckboxContextValue = { variant, size, border, icon }
+
+  return (
+    <CheckboxContext.Provider value={contextValue}>
+      <CheckboxPrimitive.Root
+        ref={ref}
+        data-slot="checkbox"
+        className={cn(checkboxVariants({ variant, size, border }), className)}
+        {...props}
+      >
+        {children ? children : <CheckboxIndicator />}
+      </CheckboxPrimitive.Root>
+    </CheckboxContext.Provider>
+  )
+})
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+const CheckboxIndicator = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>
+>(({ className, children, ...props }, ref) => {
+  const { icon, variant } = useCheckboxContext()
+
+  const renderIcon = () => {
+    if (children) return children
+    if (variant?.includes('filled')) {
+      return <CircleCheck className="size-5.5 fill-white stroke-current" />
+    }
+    switch (icon) {
+      case 'heart':
+        return (
+          <>
+            <span className='group-data-[state=checked]:hidden'>
+              <Heart className='stroke-1' />
+            </span>
+            <span className='group-data-[state=unchecked]:hidden'>
+              <Heart className="fill-destructive stroke-destructive stroke-1" />
+            </span>
+          </>
+        )
+      case 'star':
+        return (
+          <>
+            <span className='group-data-[state=checked]:hidden'>
+              <Star className='stroke-1' />
+            </span>
+            <span className='group-data-[state=unchecked]:hidden'>
+              <Star className="fill-amber-500 stroke-amber-500 stroke-1 dark:fill-amber-400 dark:stroke-amber-400" />
+            </span>
+          </>
+        )
+      case 'circle':
+        return (
+          <>
+            <span className='group-data-[state=checked]:hidden'>
+              <Circle className='stroke-1' />
+            </span>
+            <span className='group-data-[state=unchecked]:hidden'>
+              <Circle className="fill-green-600 stroke-green-600 stroke-1 dark:fill-green-400 dark:stroke-green-400" />
+            </span>
+          </>
+        )
+      case 'minus':
+        return (
+          <>
+            <Minus className="hidden size-2.5 group-data-[state=indeterminate]:block" />
+            <Check className="hidden size-3.5 group-data-[state=checked]:block" />
+          </>
+        )
+      default:
+        return <Check className="h-4 w-4" />
+    }
+  }
+
+  return (
+    <CheckboxPrimitive.Indicator
+      ref={ref}
+      data-slot="checkbox-indicator"
+      className={cn(checkboxIndicatorVariants({ icon }), className)}
+      {...props}
+    >
+      {renderIcon()}
+    </CheckboxPrimitive.Indicator>
+  )
+})
+CheckboxIndicator.displayName = CheckboxPrimitive.Indicator.displayName
+
+export function CheckboxGroup({ variant, className, children }) {
+  switch (variant) {
+    case 'vertical':
+      return (
+        <div className={cn('flex flex-col gap-3', className)}>
+          {children}
+        </div>
+      )
+    default:
+      return (
+        <div className={cn('flex items-center gap-3', className)}>
+          {children}
+        </div>
+      )
+  }
+}
+
+
+export { Checkbox }

package/components/catalyst-ui/primitives/collapsible.tsx

@@ -0,0 +1,212 @@
+import React, { useContext } from "react";
+import { cn } from "~/components/catalyst-ui";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cva, type VariantProps } from "class-variance-authority";
+
+type CollapsibleContextValue = {
+  variant?: "default" | "card" | "filter" | "form" | "sidebar";
+  contentSpacing?: "none" | "sm" | "md" | "lg";
+  animated?: boolean;
+};
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue>({});
+
+const useCollapsibleContext = () => useContext(CollapsibleContext)
+
+// Root Collapsible with context
+interface CollapsibleProps
+  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>,
+  CollapsibleContextValue { }
+
+const Collapsible = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Root>,
+  CollapsibleProps
+>(({ variant, spacing, layout, padding, animated, size, align, indent, children, ...props }, ref) => {
+  const contextValue: CollapsibleContextValue = {variant,  spacing, layout, padding, animated, size, align, indent }
+  return (
+    <CollapsibleContext.Provider value={contextValue}>
+      <CollapsiblePrimitive.Root ref={ref} {...props}>
+        {children}
+      </CollapsiblePrimitive.Root>
+    </CollapsibleContext.Provider>
+  );
+});
+Collapsible.displayName = "Collapsible";
+
+// CollapsibleTrigger variants
+const collapsibleTriggerVariants = cva(
+  "outline-none transition-all",
+  {
+    variants: {
+      variant: {
+        default: "",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        icon: "rounded-md p-1",
+        text: "underline text-muted-foreground hover:text-foreground",
+        filter: "group",
+      },
+      size: {
+        default: "",
+        sm: "h-8 text-sm",
+        icon: "h-8 w-8",
+        "icon-sm": "h-6 w-6",
+      },
+      align: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end",
+        between: "justify-between",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      align: "left",
+    },
+  }
+);
+
+interface CollapsibleTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
+  VariantProps<typeof collapsibleTriggerVariants> { }
+
+const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
+  CollapsibleTriggerProps
+>(({ className, ...props }, ref) => {
+  const context = useCollapsibleContext()
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      ref={ref}
+      className={cn(collapsibleTriggerVariants({ variant: context.variant, size: context.size, align: context.align  }), className)}
+      {...props}
+    />
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+// CollapsibleContent variants
+const collapsibleContentVariants = cva(
+  "overflow-hidden",
+  {
+    variants: {
+      spacing: {
+        none: "gap-0",
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-4",
+      },
+      layout: {
+        default: "flex flex-col",
+        grid: "grid",
+        inline: "inline-flex",
+      },
+      padding: {
+        none: "p-0",
+        sm: "px-2",
+        md: "px-4",
+        lg: "px-6",
+      },
+      animated: {
+        true: "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down transition-all duration-300",
+        false: "",
+      },
+      indent: {
+        none: "",
+        sm: "pl-4",
+        md: "pl-6",
+        lg: "pl-8",
+      },
+    },
+    defaultVariants: {
+      spacing: "md",
+      layout: "default",
+      padding: "none",
+      animated: false,
+      indent: "none",
+    },
+  }
+);
+
+interface CollapsibleContentProps
+  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  VariantProps<typeof collapsibleContentVariants> { }
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  CollapsibleContentProps
+>(({ className, ...props }, ref) => {
+  const context = React.useContext(CollapsibleContext);
+
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      ref={ref}
+      className={cn( collapsibleContentVariants({ spacing: context.spacing, layout: context.layout, padding: context.padding, animated: context.animated, indent: context.indent, }), className )}
+      {...props}
+    />
+  );
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+
+// Header wrapper component with variants
+const collapsibleHeaderVariants = cva(
+  "flex items-center",
+  {
+    variants: {
+      spacing: {
+        none: "gap-0",
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6",
+      },
+      padding: {
+        none: "p-0",
+        sm: "px-2 py-1",
+        md: "px-4 py-2",
+        lg: "px-6 py-3",
+      },
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+      },
+    },
+    defaultVariants: {
+      spacing: "md",
+      padding: "md",
+      align: "between",
+    },
+  }
+);
+
+interface CollapsibleHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof collapsibleHeaderVariants> { }
+
+const CollapsibleHeader = React.forwardRef<HTMLDivElement, CollapsibleHeaderProps>(
+  ({ className, ...props }, ref) => {
+    const {spacing, align, padding} = React.useContext(CollapsibleContext);
+    return (
+      <div
+        ref={ref}
+        className={cn(collapsibleHeaderVariants({  spacing,   padding,   align,  }), className)}
+        {...props}
+      />
+    );
+  }
+);
+CollapsibleHeader.displayName = "CollapsibleHeader";
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleHeader,
+  collapsibleTriggerVariants,
+  collapsibleContentVariants,
+  collapsibleHeaderVariants,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+  type CollapsibleHeaderProps,
+};