@codefast/ui 0.0.65 → 0.0.67

package/src/react/button.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { Fragment } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { tv, type VariantProps } from 'tailwind-variants';
-import { Spinner } from './spinner';
-
-/* -----------------------------------------------------------------------------
- * Variant: Button
- * -------------------------------------------------------------------------- */
-
-const buttonVariants = tv({
-  base: 'inline-flex select-none items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  variants: {
-    variant: {
-      default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
-      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
-      ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
-      link: 'text-primary underline-offset-4 hover:underline',
-      outline:
-        'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground border shadow-sm',
-      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-    },
-    size: {
-      default: 'h-10 gap-2 px-4',
-      xs: 'h-8 gap-1 px-2',
-      sm: 'h-9 gap-2 px-3',
-      lg: 'h-11 gap-2 px-8',
-      icon: 'size-10',
-      'icon-xs': 'size-8',
-      'icon-sm': 'size-9',
-      'icon-lg': 'size-11',
-    },
-    loading: {
-      true: 'relative',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-    variant: 'default',
-    loading: false,
-  },
-});
-
-type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
-
-/* -----------------------------------------------------------------------------
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-type ButtonElement = HTMLButtonElement;
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<ButtonElement, ButtonProps>(
-  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot : 'button';
-    const ComponentLoading = asChild ? 'span' : Fragment;
-    const disabled = loading || props.disabled;
-
-    return (
-      <Component
-        ref={ref}
-        className={buttonVariants({ variant, size, loading, className })}
-        type={asChild ? undefined : 'button'}
-        {...props}
-        disabled={disabled}
-      >
-        {loading ? (
-          <ComponentLoading>
-            <span aria-hidden className="invisible contents">
-              {children}
-            </span>
-            <VisuallyHidden>{children}</VisuallyHidden>
-            <span className="absolute inset-0 flex items-center justify-center">
-              <Spinner />
-            </span>
-          </ComponentLoading>
-        ) : (
-          children
-        )}
-      </Component>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Button, buttonVariants, type ButtonProps, type ButtonVariantsProps };

package/src/react/calendar.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { DayPicker, type DateRange, type DayPickerProps, type StyledComponent } from 'react-day-picker';
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
-import { cn } from '../lib/utils';
-import { buttonVariants } from './button';
-
-/* -----------------------------------------------------------------------------
- * Component: Calendar
- * -------------------------------------------------------------------------- */
-
-function ChevronLeft({ children: _, ...props }: StyledComponent): React.JSX.Element {
-  return <ChevronLeftIcon className="size-4" {...props} />;
-}
-
-function ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {
-  return <ChevronRightIcon className="size-4" {...props} />;
-}
-
-type CalendarProps = DayPickerProps;
-
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {
-  return (
-    <DayPicker
-      className={cn('p-3', className)}
-      classNames={{
-        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-        month: 'space-y-4',
-        caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
-        nav: 'space-x-1 flex items-center',
-        nav_button: buttonVariants({
-          variant: 'outline',
-          className: 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        }),
-        nav_button_previous: 'absolute left-1',
-        nav_button_next: 'absolute right-1',
-        table: 'w-full border-collapse space-y-1',
-        head_row: 'flex',
-        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-xs',
-        row: 'flex w-full mt-2',
-        cell: cn(
-          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
-          props.mode === 'range'
-            ? '[&:has(>.day-range-start)]:rounded-l-md [&:has(>.day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-            : '[&:has([aria-selected])]:rounded-md',
-        ),
-        day: buttonVariants({
-          variant: 'ghost',
-          className: 'size-9 p-0 font-normal aria-selected:opacity-100',
-        }),
-        day_range_start: 'day-range-start',
-        day_range_end: 'day-range-end',
-        day_selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        day_today: 'bg-accent text-accent-foreground',
-        day_outside:
-          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        day_hidden: 'invisible',
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ChevronLeft,
-        IconRight: ChevronRight,
-      }}
-      showOutsideDays={showOutsideDays}
-      {...props}
-    />
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Calendar, type CalendarProps, type DateRange };

package/src/react/card.tsx

@@ -1,103 +0,0 @@
-import * as React from 'react';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: Card
- * -------------------------------------------------------------------------- */
-
-type CardElement = HTMLDivElement;
-type CardProps = React.HTMLAttributes<HTMLDivElement>;
-
-const Card = React.forwardRef<CardElement, CardProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)} {...props} />
-));
-
-Card.displayName = 'Card';
-
-/* -----------------------------------------------------------------------------
- * Component: CardHeader
- * -------------------------------------------------------------------------- */
-
-type CardHeaderElement = HTMLDivElement;
-type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-
-const CardHeader = React.forwardRef<CardHeaderElement, CardHeaderProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-));
-
-CardHeader.displayName = 'CardHeader';
-
-/* -----------------------------------------------------------------------------
- * Component: CardTitle
- * -------------------------------------------------------------------------- */
-
-type CardTitleElement = HTMLParagraphElement;
-type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
-
-const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(({ children, className, ...props }, ref) => (
-  <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
-    {children}
-  </h3>
-));
-
-CardTitle.displayName = 'CardTitle';
-
-/* -----------------------------------------------------------------------------
- * Component: CardDescription
- * -------------------------------------------------------------------------- */
-
-type CardDescriptionElement = HTMLParagraphElement;
-type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
-
-const CardDescription = React.forwardRef<CardDescriptionElement, CardDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
-  ),
-);
-
-CardDescription.displayName = 'CardDescription';
-
-/* -----------------------------------------------------------------------------
- * Component: CardContent
- * -------------------------------------------------------------------------- */
-
-type CardContentElement = HTMLDivElement;
-type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
-
-const CardContent = React.forwardRef<CardContentElement, CardContentProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
-
-CardContent.displayName = 'CardContent';
-
-/* -----------------------------------------------------------------------------
- * Component: CardFooter
- * -------------------------------------------------------------------------- */
-
-type CardFooterElement = HTMLDivElement;
-type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
-
-const CardFooter = React.forwardRef<CardFooterElement, CardFooterProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-));
-
-CardFooter.displayName = 'CardFooter';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  type CardProps,
-  type CardHeaderProps,
-  type CardFooterProps,
-  type CardTitleProps,
-  type CardDescriptionProps,
-  type CardContentProps,
-};

package/src/react/carousel.tsx

@@ -1,299 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
-import { cn } from '../lib/utils';
-import { Button, type ButtonProps } from './button';
-
-/* -----------------------------------------------------------------------------
- * Context: Carousel
- * -------------------------------------------------------------------------- */
-
-const CAROUSEL_NAME = 'Carousel';
-
-type ScopedProps<P> = P & { __scopeCarousel?: Scope };
-
-const [createCarouselContext] = createContextScope(CAROUSEL_NAME);
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-interface BaseCarouselProps {
-  opts?: CarouselOptions;
-  orientation?: 'horizontal' | 'vertical';
-  plugins?: CarouselPlugin;
-  setApi?: (api: CarouselApi) => void;
-}
-
-type CarouselContextValue = {
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  canScrollNext: boolean;
-  canScrollPrev: boolean;
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  scrollNext: () => void;
-  scrollPrev: () => void;
-} & BaseCarouselProps;
-
-const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
-
-/* -----------------------------------------------------------------------------
- * Component: Carousel
- * -------------------------------------------------------------------------- */
-
-type CarouselElement = HTMLDivElement;
-type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
-
-const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
-  (
-    { __scopeCarousel, children, orientation, opts, setApi, plugins, className, ...props }: ScopedProps<CarouselProps>,
-    ref,
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === 'vertical' ? 'y' : 'x',
-      },
-      plugins,
-    );
-
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-    const onSelect = React.useCallback((carouselApi: CarouselApi) => {
-      if (!carouselApi) {
-        return;
-      }
-
-      setCanScrollPrev(carouselApi.canScrollPrev());
-      setCanScrollNext(carouselApi.canScrollNext());
-    }, []);
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === 'ArrowRight') {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
-
-      setApi(api);
-    }, [api, setApi]);
-
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
-
-      onSelect(api);
-      api.on('reInit', onSelect);
-      api.on('select', onSelect);
-
-      return () => {
-        api.off('select', onSelect);
-      };
-    }, [api, onSelect]);
-
-    return (
-      <CarouselProvider
-        api={api}
-        canScrollNext={canScrollNext}
-        canScrollPrev={canScrollPrev}
-        carouselRef={carouselRef}
-        opts={opts}
-        orientation={orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal')}
-        scope={__scopeCarousel}
-        scrollNext={scrollNext}
-        scrollPrev={scrollPrev}
-      >
-        <div
-          ref={ref}
-          aria-roledescription="carousel"
-          className={cn('relative', className)}
-          role="region"
-          onKeyDownCapture={handleKeyDown}
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselProvider>
-    );
-  },
-);
-
-Carousel.displayName = CAROUSEL_NAME;
-
-/* -----------------------------------------------------------------------------
- * Component: CarouselContent
- * -------------------------------------------------------------------------- */
-
-const CAROUSEL_CONTENT_NAME = 'CarouselContent';
-
-type CarouselContentElement = HTMLDivElement;
-type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
-
-const CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(
-  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, ref) => {
-    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
-
-CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
-
-/* -----------------------------------------------------------------------------
- * Component: CarouselItem
- * -------------------------------------------------------------------------- */
-
-const CAROUSEL_ITEM_NAME = 'CarouselItem';
-
-type CarouselItemElement = HTMLDivElement;
-type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
-
-const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
-  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, ref) => {
-    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
-
-    return (
-      <div
-        ref={ref}
-        aria-roledescription="slide"
-        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
-        role="group"
-        {...props}
-      />
-    );
-  },
-);
-
-CarouselItem.displayName = CAROUSEL_ITEM_NAME;
-
-/* -----------------------------------------------------------------------------
- * Component: CarouselPrevious
- * -------------------------------------------------------------------------- */
-
-const CAROUSEL_PREVIOUS_NAME = 'CarouselPrevious';
-
-type CarouselPreviousElement = HTMLButtonElement;
-type CarouselPreviousProps = ButtonProps;
-
-const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(
-  (
-    { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselPreviousProps>,
-    ref,
-  ) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
-
-    return (
-      <Button
-        ref={ref}
-        className={cn(
-          'absolute size-8 rounded-full',
-          orientation === 'horizontal'
-            ? '-left-12 top-1/2 -translate-y-1/2'
-            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-          className,
-        )}
-        disabled={!canScrollPrev}
-        size={size}
-        variant={variant}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeftIcon className="size-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    );
-  },
-);
-
-CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
-
-/* -----------------------------------------------------------------------------
- * Component: CarouselNext
- * -------------------------------------------------------------------------- */
-
-const CAROUSEL_NEXT_NAME = 'CarouselNext';
-
-type CarouselNextElement = HTMLButtonElement;
-type CarouselNextProps = ButtonProps;
-
-const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
-  (
-    { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselNextProps>,
-    ref,
-  ) => {
-    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
-
-    return (
-      <Button
-        ref={ref}
-        className={cn(
-          'absolute size-8 rounded-full',
-          orientation === 'horizontal'
-            ? '-right-12 top-1/2 -translate-y-1/2'
-            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-          className,
-        )}
-        disabled={!canScrollNext}
-        size={size}
-        variant={variant}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRightIcon className="size-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    );
-  },
-);
-
-CarouselNext.displayName = CAROUSEL_NEXT_NAME;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  type CarouselProps,
-  type CarouselContentProps,
-  type CarouselItemProps,
-  type CarouselPreviousProps,
-  type CarouselNextProps,
-};

package/src/react/checkbox-cards.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { CheckIcon } from '@radix-ui/react-icons';
-import { cn } from '../lib/utils';
-import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
-
-/* -----------------------------------------------------------------------------
- * Component: CheckboxCards
- * -------------------------------------------------------------------------- */
-
-type CheckboxCardsElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
-type CheckboxCardsProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
-
-const CheckboxCards = React.forwardRef<CheckboxCardsElement, CheckboxCardsProps>(({ className, ...props }, ref) => {
-  return <CheckboxGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
-});
-
-CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: CheckboxCardsItem
- * -------------------------------------------------------------------------- */
-
-type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
-
-interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item> {
-  checkboxClassName?: string;
-}
-
-const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
-  ({ children, className, checkboxClassName, ...props }, ref) => {
-    return (
-      <label className={cn('flex items-center justify-center gap-4 rounded-md border p-4', className)}>
-        {children}
-        <CheckboxGroupPrimitive.Item
-          ref={ref}
-          className={cn(
-            'border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-            checkboxClassName,
-          )}
-          {...props}
-        >
-          <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
-            <CheckIcon className="size-3.5" />
-          </CheckboxGroupPrimitive.CheckboxGroupIndicator>
-        </CheckboxGroupPrimitive.Item>
-      </label>
-    );
-  },
-);
-
-CheckboxCardsItem.displayName = CheckboxGroupPrimitive.Item.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsProps, type CheckboxCardsItemProps };