metabinaries 1.0.0

package/src/templates/ui-3.js

@@ -0,0 +1,606 @@
+export const uiTemplates3 = {
+  'components/ui/sonner.tsx': `'use client';
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className='toaster group'
+      icons={{
+        success: <CircleCheckIcon className='size-4' />,
+        info: <InfoIcon className='size-4' />,
+        warning: <TriangleAlertIcon className='size-4' />,
+        error: <OctagonXIcon className='size-4' />,
+        loading: <Loader2Icon className='size-4 animate-spin' />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };`,
+
+  'components/ui/stepper.tsx': `'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckIcon, Loader2Icon, OctagonXIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const StepperContext = React.createContext<{
+  activeStep: number;
+  orientation: 'horizontal' | 'vertical';
+} | null>(null);
+
+function useStepper() {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error('useStepper must be used within a Stepper');
+  }
+  return context;
+}
+
+function Stepper({
+  activeStep,
+  orientation = 'horizontal',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  activeStep: number;
+  orientation?: 'horizontal' | 'vertical';
+}) {
+  return (
+    <StepperContext.Provider value={{ activeStep, orientation }}>
+      <div
+        data-slot='stepper'
+        data-orientation={orientation}
+        className={cn(
+          'group/stepper flex w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </StepperContext.Provider>
+  );
+}
+
+function Step({
+  step,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  step: number;
+}) {
+  const { activeStep, orientation } = useStepper();
+  const state =
+    activeStep > step ? 'completed' : activeStep === step ? 'active' : 'queued';
+
+  return (
+    <div
+      data-slot='step'
+      data-state={state}
+      data-orientation={orientation}
+      className={cn(
+        'group/step flex items-center data-[orientation=horizontal]:flex-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start',
+        className
+      )}
+      {...props}
+    >
+      <div className='flex items-center group-last/step:flex-none data-[orientation=horizontal]:flex-1 data-[orientation=vertical]:w-full'>
+        {children}
+        <div
+          data-slot='step-separator'
+          className='bg-crm-secondary/20 group-last/step:hidden data-[orientation=horizontal]:mx-2 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:flex-1 data-[orientation=vertical]:my-2 data-[orientation=vertical]:ml-4 data-[orientation=vertical]:h-8 data-[orientation=vertical]:w-px'
+          data-orientation={orientation}
+        />
+      </div>
+    </div>
+  );
+}
+
+const stepIndicatorVariants = cva(
+  'flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',
+  {
+    variants: {
+      state: {
+        queued: 'border-muted text-muted-foreground bg-background',
+        active: 'border-primary text-primary bg-background',
+        completed: 'border-primary bg-primary text-primary-foreground',
+        error: 'border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      state: 'queued',
+    },
+  }
+);
+
+function StepIndicator({
+  step,
+  state: stateProp,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  step: number;
+  state?: 'queued' | 'active' | 'completed' | 'error' | 'loading';
+}) {
+  const { activeStep } = useStepper();
+  const autoState =
+    activeStep > step ? 'completed' : activeStep === step ? 'active' : 'queued';
+  const state = stateProp || autoState;
+
+  return (
+    <div
+      data-slot='step-indicator'
+      data-state={state}
+      className={cn(
+        stepIndicatorVariants({
+          state: state === 'loading' ? 'active' : state,
+          className,
+        })
+      )}
+      {...props}
+    >
+      {state === 'completed' ? (
+        <CheckIcon className='size-4' />
+      ) : state === 'error' ? (
+        <OctagonXIcon className='size-4' />
+      ) : state === 'loading' ? (
+        <Loader2Icon className='size-4 animate-spin' />
+      ) : (
+        children || step + 1
+      )}
+    </div>
+  );
+}
+
+function StepContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='step-content'
+      className={cn('flex flex-col gap-0.5 px-2', className)}
+      {...props}
+    />
+  );
+}
+
+function StepTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='step-title'
+      className={cn('text-sm font-medium leading-none', className)}
+      {...props}
+    />
+  );
+}
+
+function StepDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='step-description'
+      className={cn('text-muted-foreground text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepContent,
+  StepTitle,
+  StepDescription,
+};`,
+
+  'components/ui/switch.tsx': `'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot='switch'
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-setup-secondary focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot='switch-thumb'
+        className={cn(
+          'bg-setup-primary pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };`,
+
+  'components/ui/table.tsx': `import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div className='relative w-full overflow-auto'>
+      <table
+        data-slot='table'
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot='table-header'
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot='table-body'
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot='table-footer'
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot='table-row'
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot='table-head'
+      className={cn(
+        'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot='table-cell'
+      className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot='table-caption'
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};`,
+
+  'components/ui/text-effect.tsx': `'use client';
+import {
+  type Variants,
+  motion,
+  TargetAndTransition,
+  Transition,
+} from 'framer-motion';
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type PresetType = 'blur' | 'shake' | 'scale' | 'fade' | 'slide';
+
+interface TextEffectProps {
+  children: string;
+  per?: 'word' | 'char' | 'line';
+  as?: keyof React.JSX.IntrinsicElements;
+  variants?: {
+    container?: Variants;
+    item?: Variants;
+  };
+  className?: string;
+  preset?: PresetType;
+  delay?: number;
+  trigger?: boolean;
+  onAnimationComplete?: () => void;
+  segmentWrapperClassName?: string;
+  containerTransition?: Transition;
+  segmentTransition?: Transition;
+  style?: React.CSSProperties;
+}
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+};
+
+const presetVariants: Record<
+  PresetType,
+  { container?: Variants; item?: Variants }
+> = {
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, filter: 'blur(12px)', y: 0 },
+      visible: { opacity: 1, filter: 'blur(0px)', y: 0 },
+    },
+  },
+  shake: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { x: 0 },
+      visible: { x: [-1, 1, -1, 1, 0], transition: { repeat: Infinity } },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0 },
+      visible: { opacity: 1, scale: 1 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 },
+    },
+  },
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+    },
+  },
+};
+
+const AnimationComponent: React.FC<{
+  segment: string;
+  variants: Variants;
+  transition?: Transition;
+  className?: string;
+}> = React.memo(({ segment, variants, transition, className }) => {
+  return (
+    <motion.span
+      variants={variants}
+      transition={transition}
+      className={cn('inline-block whitespace-pre', className)}
+    >
+      {segment}
+    </motion.span>
+  );
+});
+
+AnimationComponent.displayName = 'AnimationComponent';
+
+export const TextEffect = React.memo(
+  ({
+    children,
+    per = 'word',
+    as = 'p',
+    variants,
+    className,
+    preset,
+    delay = 0,
+    trigger = true,
+    onAnimationComplete,
+    segmentWrapperClassName,
+    containerTransition,
+    segmentTransition,
+    style,
+  }: TextEffectProps) => {
+    const segments = React.useMemo(() => {
+      if (per === 'line') return children.split('\\n');
+      if (per === 'word') return children.split(/(\\s+)/);
+      return children.split('');
+    }, [children, per]);
+
+    const MotionTag = motion[as as keyof typeof motion] as typeof motion.div;
+    const selectedVariants = preset
+      ? presetVariants[preset]
+      : { container: defaultContainerVariants, item: defaultItemVariants };
+    const containerVariants = variants?.container || selectedVariants.container;
+    const itemVariants = (variants?.item || selectedVariants.item || defaultItemVariants) as Variants;
+
+    return (
+      <MotionTag
+        initial='hidden'
+        animate={trigger ? 'visible' : 'hidden'}
+        aria-label={children}
+        variants={containerVariants}
+        transition={{
+          ...containerTransition,
+          delayChildren: delay,
+        }}
+        className={cn('whitespace-pre-wrap', className)}
+        onAnimationComplete={onAnimationComplete}
+        style={style}
+      >
+        {segments.map((segment, index) => (
+          <AnimationComponent
+            key={\`\${segment}-\${index}\`}
+            segment={segment}
+            variants={itemVariants}
+            transition={segmentTransition}
+            className={segmentWrapperClassName}
+          />
+        ))}
+      </MotionTag>
+    );
+  }
+);
+
+TextEffect.displayName = 'TextEffect';`,
+
+  'components/ui/textarea.tsx': `import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot='textarea'
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring focus-visible:ring-offset-background flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };`,
+
+  'components/ui/tooltip.tsx': `'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot='tooltip-provider'
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot='tooltip' {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot='tooltip-content'
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs shadow-md',
+          className
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };`,
+};