@codefast/ui 0.0.40 → 0.0.42

package/src/react/breadcrumb.tsx

@@ -1,7 +1,7 @@
-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";
+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
@@ -13,11 +13,11 @@ interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   separator?: React.ReactNode;
 }
 
-const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, ref) => (
-  <nav ref={ref} aria-label="breadcrumb" {...props} />
-));
+const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />,
+);
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.displayName = 'Breadcrumb';
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbList
@@ -26,18 +26,21 @@ Breadcrumb.displayName = "Breadcrumb";
 type BreadcrumbListElement = HTMLOListElement;
 type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
 
-const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListProps>(({ className, ...props }, ref) => (
+const BreadcrumbList = React.forwardRef<
+  BreadcrumbListElement,
+  BreadcrumbListProps
+>(({ className, ...props }, ref) => (
   <ol
     ref={ref}
     className={cn(
-      "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+      'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
       className,
     )}
     {...props}
   />
 ));
 
-BreadcrumbList.displayName = "BreadcrumbList";
+BreadcrumbList.displayName = 'BreadcrumbList';
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbItem
@@ -46,11 +49,18 @@ BreadcrumbList.displayName = "BreadcrumbList";
 type BreadcrumbItemElement = HTMLLIElement;
 type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
 
-const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, BreadcrumbItemProps>(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+const BreadcrumbItem = React.forwardRef<
+  BreadcrumbItemElement,
+  BreadcrumbItemProps
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
 ));
 
-BreadcrumbItem.displayName = "BreadcrumbItem";
+BreadcrumbItem.displayName = 'BreadcrumbItem';
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbLink
@@ -58,19 +68,27 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 
 type BreadcrumbLinkElement = HTMLAnchorElement;
 
-interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   asChild?: boolean;
 }
 
-const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
-  ({ asChild, className, ...props }, ref) => {
-    const Component = asChild ? Slot : "a";
+const BreadcrumbLink = React.forwardRef<
+  BreadcrumbLinkElement,
+  BreadcrumbLinkProps
+>(({ asChild, className, ...props }, ref) => {
+  const Component = asChild ? Slot : 'a';
 
-    return <Component ref={ref} className={cn("transition", "hover:text-foreground", className)} {...props} />;
-  },
-);
+  return (
+    <Component
+      ref={ref}
+      className={cn('transition', 'hover:text-foreground', className)}
+      {...props}
+    />
+  );
+});
 
-BreadcrumbLink.displayName = "BreadcrumbLink";
+BreadcrumbLink.displayName = 'BreadcrumbLink';
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbPage
@@ -79,18 +97,21 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
 type BreadcrumbPageElement = HTMLSpanElement;
 type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
 
-const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(({ className, ...props }, ref) => (
+const BreadcrumbPage = React.forwardRef<
+  BreadcrumbPageElement,
+  BreadcrumbPageProps
+>(({ className, ...props }, ref) => (
   <span
     ref={ref}
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("text-foreground font-normal", className)}
+    className={cn('text-foreground font-normal', className)}
     {...props}
   />
 ));
 
-BreadcrumbPage.displayName = "BreadcrumbPage";
+BreadcrumbPage.displayName = 'BreadcrumbPage';
 
 /* -----------------------------------------------------------------------------
  * Component: BreadcrumbSeparator
@@ -98,9 +119,18 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 
-function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element {
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: BreadcrumbSeparatorProps): React.JSX.Element {
   return (
-    <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
       {children ?? <ChevronRightIcon />}
     </li>
   );
@@ -112,12 +142,15 @@ function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSepara
 
 type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
 
-function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: BreadcrumbEllipsisProps): React.JSX.Element {
   return (
     <span
       role="presentation"
       aria-hidden="true"
-      className={cn("flex size-4 items-center justify-center", className)}
+      className={cn('flex size-4 items-center justify-center', className)}
       {...props}
     >
       <DotsHorizontalIcon className="size-4" />

package/src/react/button.tsx

@@ -1,43 +1,46 @@
-import * as React from "react";
-import { Fragment } from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps } from "cva";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { cva } from "../lib/utils";
-import { Spinner } from "./spinner";
+import * as React from 'react';
+import { Fragment } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps } from 'cva';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { cva } from '../lib/utils';
+import { Spinner } from './spinner';
 
 /* -----------------------------------------------------------------------------
  * Variant: Button
  * -------------------------------------------------------------------------- */
 
 const buttonVariants = cva({
-  base: "inline-flex select-none items-center justify-center gap-2 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",
+  base: 'inline-flex select-none items-center justify-center gap-2 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: "hover:bg-accent hover:text-accent-foreground",
-      link: "text-primary underline-offset-4 hover:underline",
-      outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+      destructive:
+        'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline',
+      outline:
+        'border-input bg-background 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 px-4",
-      xs: "h-8 px-2",
-      sm: "h-9 px-3",
-      lg: "h-11 px-8",
-      icon: "size-10",
-      "icon-xs": "size-8",
-      "icon-sm": "size-9",
-      "icon-lg": "size-11",
+      default: 'h-10 px-4',
+      xs: 'h-8 px-2',
+      sm: 'h-9 px-3',
+      lg: 'h-11 px-8',
+      icon: 'size-10',
+      'icon-xs': 'size-8',
+      'icon-sm': 'size-9',
+      'icon-lg': 'size-11',
     },
     loading: {
-      true: "relative",
+      true: 'relative',
     },
   },
   defaultVariants: {
-    size: "default",
-    variant: "default",
+    size: 'default',
+    variant: 'default',
     loading: false,
   },
 });
@@ -50,20 +53,33 @@ type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
 
 type ButtonElement = HTMLButtonElement;
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {
+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;
+  (
+    {
+      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}
-        type={asChild ? undefined : "button"}
+        type={asChild ? undefined : 'button'}
         className={buttonVariants({ variant, size, loading, className })}
         {...props}
         disabled={disabled}
@@ -86,7 +102,7 @@ const Button = React.forwardRef<ButtonElement, ButtonProps>(
   },
 );
 
-Button.displayName = "Button";
+Button.displayName = 'Button';
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/react/calendar.tsx

@@ -1,66 +1,83 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { type DateRange, DayPicker, 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";
+import * as React from 'react';
+import {
+  type DateRange,
+  DayPicker,
+  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 {
+function ChevronLeft({
+  children: _,
+  ...props
+}: StyledComponent): React.JSX.Element {
   return <ChevronLeftIcon className="size-4" {...props} />;
 }
 
-function ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {
+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 {
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps): React.JSX.Element {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      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",
+        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",
+          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",
+        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",
+          '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",
+          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_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",
+          '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",
+          '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={{

package/src/react/card.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { cn } from "../lib/utils";
+import * as React from 'react';
+import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: Card
@@ -8,11 +8,20 @@ import { cn } from "../lib/utils";
 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} />
-));
+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";
+Card.displayName = 'Card';
 
 /* -----------------------------------------------------------------------------
  * Component: CardHeader
@@ -21,11 +30,17 @@ Card.displayName = "Card";
 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} />
-));
+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";
+CardHeader.displayName = 'CardHeader';
 
 /* -----------------------------------------------------------------------------
  * Component: CardTitle
@@ -34,13 +49,19 @@ CardHeader.displayName = "CardHeader";
 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>
-));
+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";
+CardTitle.displayName = 'CardTitle';
 
 /* -----------------------------------------------------------------------------
  * Component: CardDescription
@@ -49,13 +70,18 @@ CardTitle.displayName = "CardTitle";
 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} />
-  ),
-);
+const CardDescription = React.forwardRef<
+  CardDescriptionElement,
+  CardDescriptionProps
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
 
-CardDescription.displayName = "CardDescription";
+CardDescription.displayName = 'CardDescription';
 
 /* -----------------------------------------------------------------------------
  * Component: CardContent
@@ -64,11 +90,13 @@ CardDescription.displayName = "CardDescription";
 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} />
-));
+const CardContent = React.forwardRef<CardContentElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+);
 
-CardContent.displayName = "CardContent";
+CardContent.displayName = 'CardContent';
 
 /* -----------------------------------------------------------------------------
  * Component: CardFooter
@@ -77,11 +105,17 @@ CardContent.displayName = "CardContent";
 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} />
-));
+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";
+CardFooter.displayName = 'CardFooter';
 
 /* -----------------------------------------------------------------------------
  * Exports