@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,225 +0,0 @@
-
-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

@@ -1,212 +0,0 @@
-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,
-};