@codefast/ui 0.0.2 → 0.0.4

package/src/navigation-menu.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cn, cva } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: NavigationMenu
+ * -------------------------------------------------------------------------- */
+
+const navigationMenuTriggerStyle = cva({
+  base: [
+    "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+    "data-[state=open]:bg-accent/50",
+    "data-[active]:bg-accent/50",
+  ],
+});
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenu
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  NavigationMenuPrimitive.NavigationMenuProps
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuList
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuPrimitive.NavigationMenuListProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuItem
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuContent
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuPrimitive.NavigationMenuTriggerProps
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={navigationMenuTriggerStyle({
+      className: cn("group", className),
+    })}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className={cn(
+        "relative top-px ml-1 h-3 w-3 transition duration-300",
+        "group-data-[state=open]:rotate-180",
+      )}
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuContent
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuPrimitive.NavigationMenuContentProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full md:absolute md:w-auto",
+      "data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in",
+      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+      "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out",
+      "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuLink
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuViewport
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuPrimitive.NavigationMenuViewportProps
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn(
+      "perspective-[2000px] absolute left-0 top-full flex justify-center",
+    )}
+  >
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "data-[state=open]:animate-in data-[state=open]:zoom-in-90",
+        "data-[state=closed]:animate-out data-[state=closed]:zoom-out-95",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: NavigationMenuIndicator
+ * -------------------------------------------------------------------------- */
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuPrimitive.NavigationMenuIndicatorProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden transition",
+      "data-[state=visible]:animate-in data-[state=visible]:fade-in",
+      "data-[state=hidden]:animate-out data-[state=hidden]:fade-out",
+      className,
+    )}
+    {...props}
+  >
+    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};

package/src/pagination.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
+import { cn } from "./utils";
+import { type ButtonProps, buttonVariants } from "./button";
+
+/* -----------------------------------------------------------------------------
+ * Component: Pagination
+ * -------------------------------------------------------------------------- */
+
+function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<"nav">): React.JSX.Element {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PaginationContent
+ * -------------------------------------------------------------------------- */
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.HTMLAttributes<HTMLUListElement>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+/* -----------------------------------------------------------------------------
+ * Component: PaginationItem
+ * -------------------------------------------------------------------------- */
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+/* -----------------------------------------------------------------------------
+ * Component: PaginationLink
+ * -------------------------------------------------------------------------- */
+
+interface PaginationLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    Pick<ButtonProps, "size"> {
+  isActive?: boolean;
+}
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  children,
+  ...props
+}: PaginationLinkProps): React.JSX.Element {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      className={buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+        className,
+      })}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PaginationPrevious
+ * -------------------------------------------------------------------------- */
+
+function PaginationPrevious({
+  className,
+  ...props
+}: PaginationLinkProps): React.JSX.Element {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon className="size-4" />
+      <span>Previous</span>
+    </PaginationLink>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PaginationNext
+ * -------------------------------------------------------------------------- */
+
+function PaginationNext({
+  className,
+  ...props
+}: PaginationLinkProps): React.JSX.Element {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 pr-2.5", className)}
+      {...props}
+    >
+      <span>Next</span>
+      <ChevronRightIcon className="size-4" />
+    </PaginationLink>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PaginationEllipsis
+ * -------------------------------------------------------------------------- */
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+  return (
+    <span
+      aria-hidden
+      className={cn("flex h-9 w-9 items-center justify-center", className)}
+      {...props}
+    >
+      <DotsHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/popover.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Popover
+ * -------------------------------------------------------------------------- */
+
+const Popover = PopoverPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: PopoverTrigger
+ * -------------------------------------------------------------------------- */
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: PopoverAnchor
+ * -------------------------------------------------------------------------- */
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+/* -----------------------------------------------------------------------------
+ * Component: PopoverContent
+ * -------------------------------------------------------------------------- */
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverPrimitive.PopoverContentProps
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=open]:data-[side=top]:slide-in-from-bottom-2",
+        "data-[state=open]:data-[side=right]:slide-in-from-left-2",
+        "data-[state=open]:data-[side=bottom]:slide-in-from-top-2",
+        "data-[state=open]:data-[side=left]:slide-in-from-right-2",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[state=closed]:data-[side=top]:slide-out-to-bottom-2",
+        "data-[state=closed]:data-[side=left]:slide-out-to-right-2",
+        "data-[state=closed]:data-[side=bottom]:slide-out-to-top-2",
+        "data-[state=closed]:data-[side=right]:slide-out-to-left-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/progress.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Progress
+ * -------------------------------------------------------------------------- */
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressPrimitive.ProgressProps
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="bg-primary h-full w-full flex-1 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Progress };

package/src/radio-group.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import { DotFilledIcon } from "@radix-ui/react-icons";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: RadioGroup
+ * -------------------------------------------------------------------------- */
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  RadioGroupPrimitive.RadioGroupProps
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: RadioGroupItem
+ * -------------------------------------------------------------------------- */
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupPrimitive.RadioGroupItemProps
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "border-compound text-compound-foreground ring-offset-background focus-visible:ring-ring group aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-checked:border-primary",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full" />
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { RadioGroup, RadioGroupItem };

package/src/resizable.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: ResizablePanelGroup
+ * -------------------------------------------------------------------------- */
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.PanelGroupProps): React.JSX.Element {
+  return (
+    <ResizablePrimitive.PanelGroup
+      className={cn(
+        "flex h-full w-full",
+        "data-[panel-group-direction=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ResizablePanel
+ * -------------------------------------------------------------------------- */
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+/* -----------------------------------------------------------------------------
+ * Component: ResizableHandle
+ * -------------------------------------------------------------------------- */
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.PanelResizeHandleProps & {
+  withHandle?: boolean;
+}): React.JSX.Element {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
+        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
+        "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle ? (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+          <DragHandleDots2Icon className="size-2.5" />
+        </div>
+      ) : null}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/scroll-area.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: ScrollArea
+ * -------------------------------------------------------------------------- */
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaPrimitive.ScrollAreaProps
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar orientation="vertical" />
+    <ScrollBar orientation="horizontal" />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: ScrollBar
+ * -------------------------------------------------------------------------- */
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollAreaPrimitive.ScrollAreaScrollbarProps
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-px",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ScrollArea, ScrollBar };