@codefast/ui 0.0.66 → 0.0.67

package/src/react/breadcrumb.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: Breadcrumb
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbElement = HTMLElement;
-
-interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
-  separator?: React.ReactNode;
-}
-
-const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, forwardedRef) => (
-  <nav ref={forwardedRef} aria-label="breadcrumb" {...props} />
-));
-
-Breadcrumb.displayName = 'Breadcrumb';
-
-/* -----------------------------------------------------------------------------
- * Component: BreadcrumbList
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbListElement = HTMLOListElement;
-type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
-
-const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <ol
-      ref={forwardedRef}
-      className={cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-
-BreadcrumbList.displayName = 'BreadcrumbList';
-
-/* -----------------------------------------------------------------------------
- * Component: BreadcrumbItem
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbItemElement = HTMLLIElement;
-type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
-
-const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, BreadcrumbItemProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <li ref={forwardedRef} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-  ),
-);
-
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-
-/* -----------------------------------------------------------------------------
- * Component: BreadcrumbLink
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbLinkElement = HTMLAnchorElement;
-
-interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  asChild?: boolean;
-}
-
-const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
-  ({ asChild, className, ...props }, forwardedRef) => {
-    const Component = asChild ? Slot : 'a';
-
-    return <Component ref={forwardedRef} className={cn('hover:text-foreground transition', className)} {...props} />;
-  },
-);
-
-BreadcrumbLink.displayName = 'BreadcrumbLink';
-
-/* -----------------------------------------------------------------------------
- * Component: BreadcrumbPage
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbPageElement = HTMLSpanElement;
-type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
-
-const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <span
-      ref={forwardedRef}
-      aria-current="page"
-      aria-disabled="true"
-      className={cn('text-foreground font-normal', className)}
-      role="link"
-      {...props}
-    />
-  ),
-);
-
-BreadcrumbPage.displayName = 'BreadcrumbPage';
-
-/* -----------------------------------------------------------------------------
- * Component: BreadcrumbSeparator
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
-
-function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element {
-  return (
-    <li aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} role="presentation" {...props}>
-      {children ?? <ChevronRightIcon />}
-    </li>
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: BreadcrumbEllipsis
- * -------------------------------------------------------------------------- */
-
-type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
-
-function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
-  return (
-    <span
-      aria-hidden="true"
-      className={cn('flex size-4 items-center justify-center', className)}
-      role="presentation"
-      {...props}
-    >
-      <DotsHorizontalIcon className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-  type BreadcrumbProps,
-  type BreadcrumbListProps,
-  type BreadcrumbItemProps,
-  type BreadcrumbLinkProps,
-  type BreadcrumbPageProps,
-  type BreadcrumbSeparatorProps,
-  type BreadcrumbEllipsisProps,
-};

package/src/react/button.tsx

@@ -1,94 +0,0 @@
-import * as React 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 }, forwardedRef) => {
-    const Component = asChild ? Slot : 'button';
-    const ComponentLoading = asChild ? 'span' : React.Fragment;
-    const disabled = loading || props.disabled;
-
-    return (
-      <Component
-        ref={forwardedRef}
-        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,109 +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 }, forwardedRef) => (
-  <div
-    ref={forwardedRef}
-    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 }, forwardedRef) => (
-  <div ref={forwardedRef} 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 }, forwardedRef) => (
-    <h3 ref={forwardedRef} 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 }, forwardedRef) => (
-    <p ref={forwardedRef} 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 }, forwardedRef) => (
-  <div ref={forwardedRef} 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 }, forwardedRef) => (
-  <div ref={forwardedRef} 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,
-};