@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/src/components/accordion.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronDownIcon } from "lucide-react";
+
+/* -----------------------------------------------------------------------------
+ * Component: Accordion
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Accordion({ ...props }: AccordionProps): JSX.Element {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionItem({ className, ...props }: AccordionItemProps): JSX.Element {
+  return (
+    <AccordionPrimitive.Item
+      className={cn("border-b", "last:border-b-0", className)}
+      data-slot="accordion-item"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionIcon
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AccordionIconProps extends ComponentProps<typeof Slot> {
+  asChild?: boolean;
+  className?: string;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionIcon({ asChild, className, ...props }: AccordionIconProps): JSX.Element {
+  const Component = (asChild ? Slot : ChevronDownIcon) as typeof Slot;
+
+  return (
+    <Component
+      aria-hidden
+      className={cn(
+        "size-4 shrink-0 text-muted-foreground",
+        "translate-y-0.5 transition-transform duration-300 ease-spring",
+        "motion-reduce:transition-none motion-reduce:duration-0",
+        className,
+      )}
+      data-slot="accordion-icon"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps): JSX.Element {
+  return (
+    <AccordionPrimitive.Header className="flex" data-slot="accordion-trigger-wrapper">
+      <AccordionPrimitive.Trigger
+        className={cn(
+          "group/accordion-trigger flex grow items-start justify-between gap-4 py-4",
+          "rounded-md outline-hidden",
+          "text-left text-sm font-medium",
+          "hover:not-disabled:underline",
+          "focus-visible:ring-3 focus-visible:ring-ring/50",
+          "disabled:opacity-50",
+          "[&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        data-slot="accordion-trigger"
+        {...props}
+      >
+        {children}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AccordionContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AccordionContent({ children, className, ...props }: AccordionContentProps): JSX.Element {
+  return (
+    <AccordionPrimitive.Content
+      className={cn(
+        "overflow-hidden",
+        "data-open:animate-collapsible-down data-open:ease-snappy",
+        "data-closed:animate-collapsible-up data-closed:ease-snappy",
+        "motion-reduce:animate-none motion-reduce:transition-none",
+      )}
+      data-slot="accordion-content"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", "text-sm", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Accordion, AccordionContent, AccordionIcon, AccordionItem, AccordionTrigger };
+export type {
+  AccordionContentProps,
+  AccordionIconProps,
+  AccordionItemProps,
+  AccordionProps,
+  AccordionTriggerProps,
+};

package/src/components/alert-dialog.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import type { VariantProps } from "#/lib/utils";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { buttonVariants } from "#/variants/button";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialog
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialog({ ...props }: AlertDialogProps): JSX.Element {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogTriggerProps = ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): JSX.Element {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertDialogContentProps extends ComponentProps<typeof AlertDialogPrimitive.Content> {
+  classNames?: {
+    content?: string;
+    overlay?: string;
+    wrapper?: string;
+  };
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogContent({
+  children,
+  className,
+  classNames,
+  ...props
+}: AlertDialogContentProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay
+        className={cn(
+          "fixed inset-0 z-50",
+          "bg-black/50",
+          "ease-ui data-open:animate-in data-open:fade-in-0",
+          "data-closed:animate-out data-closed:fade-out-0",
+          "motion-reduce:animate-none motion-reduce:transition-none",
+          classNames?.overlay,
+        )}
+        data-slot="alert-dialog-overlay"
+      />
+      <AlertDialogPrimitive.Content
+        className={cn(
+          "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center overflow-auto p-8",
+          "sm:grid-rows-[1fr_auto_3fr] sm:p-4",
+          "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "motion-reduce:animate-none motion-reduce:transition-none",
+          classNames?.wrapper,
+        )}
+        data-slot="alert-dialog-content-wrapper"
+        {...props}
+      >
+        <div
+          className={cn(
+            "relative row-start-2 flex w-full max-w-lg flex-col",
+            "rounded-2xl border",
+            "bg-popover text-popover-foreground shadow-lg",
+            classNames?.content,
+            className,
+          )}
+          data-slot="alert-dialog-content"
+        >
+          {children}
+        </div>
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center",
+        "sm:text-left",
+        className,
+      )}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogBody
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogBodyProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogBody({ className, ...props }: AlertDialogBodyProps): JSX.Element {
+  return (
+    <main
+      className={cn("overflow-auto", "px-6 py-2", className)}
+      data-slot="alert-dialog-body"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogFooterProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6",
+        "sm:flex-row sm:justify-end",
+        className,
+      )}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogTitleProps = ComponentProps<typeof AlertDialogPrimitive.Title>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogDescriptionProps = ComponentProps<typeof AlertDialogPrimitive.Description>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogAction
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertDialogActionProps extends ComponentProps<typeof AlertDialogPrimitive.Action> {
+  size?: VariantProps<typeof buttonVariants>["size"];
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogAction({
+  className,
+  size,
+  variant,
+  ...props
+}: AlertDialogActionProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.Action
+      className={buttonVariants({ className, size, variant })}
+      data-slot="alert-dialog-action"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogCancel
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertDialogCancelProps extends ComponentProps<typeof AlertDialogPrimitive.Cancel> {
+  size?: VariantProps<typeof buttonVariants>["size"];
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogCancel({
+  className,
+  size,
+  variant,
+  ...props
+}: AlertDialogCancelProps): JSX.Element {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={buttonVariants({ className, size, variant })}
+      data-slot="alert-dialog-cancel"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
+export type {
+  AlertDialogActionProps,
+  AlertDialogBodyProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+};

package/src/components/alert.tsx

@@ -0,0 +1,86 @@
+import type { AlertVariants } from "#/variants/alert";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+import { alertVariants } from "#/variants/alert";
+
+/* -----------------------------------------------------------------------------
+ * Component: Alert
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface AlertProps extends ComponentProps<"div">, AlertVariants {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Alert({ className, variant, ...props }: AlertProps): JSX.Element {
+  return (
+    <div
+      className={alertVariants({ className, variant })}
+      data-slot="alert"
+      role="alert"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertTitleProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertTitle({ children, className, ...props }: AlertTitleProps): JSX.Element {
+  return (
+    <div
+      className={cn("col-start-2 min-h-4", "line-clamp-1 font-medium tracking-tight", className)}
+      data-slot="alert-title"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDescriptionProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDescription({ className, ...props }: AlertDescriptionProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground",
+        "[&_p]:leading-relaxed",
+        className,
+      )}
+      data-slot="alert-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Alert, AlertDescription, AlertTitle };
+export type { AlertDescriptionProps, AlertProps, AlertTitleProps };

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+/* -----------------------------------------------------------------------------
+ * Component: AspectRatio
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AspectRatioProps = ComponentProps<typeof AspectRatioPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AspectRatio({ ...props }: AspectRatioProps): JSX.Element {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { AspectRatio };
+export type { AspectRatioProps };

package/src/components/avatar.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+/* -----------------------------------------------------------------------------
+ * Component: Avatar
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Avatar({ className, ...props }: AvatarProps): JSX.Element {
+  return (
+    <AvatarPrimitive.Root
+      className={cn("relative flex size-8 shrink-0 overflow-hidden", "rounded-full", className)}
+      data-slot="avatar"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarImage
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarImage({ className, ...props }: AvatarImageProps): JSX.Element {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("aspect-square size-full", className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarFallback
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarFallback({ className, ...props }: AvatarFallbackProps): JSX.Element {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full items-center justify-center",
+        "rounded-full",
+        "bg-muted",
+        className,
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Avatar, AvatarFallback, AvatarImage };
+export type { AvatarFallbackProps, AvatarImageProps, AvatarProps };

package/src/components/badge.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import type { BadgeVariants } from "#/variants/badge";
+import type { ComponentProps, JSX } from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+
+import { badgeVariants } from "#/variants/badge";
+
+/* -----------------------------------------------------------------------------
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface BadgeProps extends ComponentProps<"span">, BadgeVariants {
+  asChild?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Badge({ asChild, className, variant, ...props }: BadgeProps): JSX.Element {
+  const Component = asChild ? Slot : "span";
+
+  return (
+    <Component className={badgeVariants({ className, variant })} data-slot="badge" {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Badge };
+
+export type { BadgeProps };