@c-rex/ui 0.1.19 → 0.1.21

package/src/navigation-menu.tsx

@@ -1,168 +1,169 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@c-rex/utils"
-
-function NavigationMenu({
-    className,
-    children,
-    viewport = true,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-    viewport?: boolean
-}) {
-    return (
-        <NavigationMenuPrimitive.Root
-            data-slot="navigation-menu"
-            data-viewport={viewport}
-            className={cn(
-                "group/navigation-menu relative flex max-w-max flex-1 items-center",
-                className
-            )}
-            {...props}
-        >
-            {children}
-            {viewport && <NavigationMenuViewport />}
-        </NavigationMenuPrimitive.Root>
-    )
-}
-
-function NavigationMenuList({
-    className,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-    return (
-        <NavigationMenuPrimitive.List
-            data-slot="navigation-menu-list"
-            className={cn(
-                "group flex flex-1 list-none items-center justify-center gap-1",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function NavigationMenuItem({
-    className,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-    return (
-        <NavigationMenuPrimitive.Item
-            data-slot="navigation-menu-item"
-            className={cn("relative", className)}
-            {...props}
-        />
-    )
-}
-
-const navigationMenuTriggerStyle = cva(
-    "group inline-flex h-9 w-max items-center justify-center rounded-full pl-4 pr-3 py-2 text-sm font-medium bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 "
-)
-
-function NavigationMenuTrigger({
-    className,
-    children,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-    return (
-        <NavigationMenuPrimitive.Trigger
-            data-slot="navigation-menu-trigger"
-            className={cn(navigationMenuTriggerStyle(), "group", className)}
-            {...props}
-        >
-            {children}{" "}
-            <ChevronDownIcon
-                className="relative top-[1px] transition duration-300 group-data-[state=open]:rotate-180"
-                aria-hidden="true"
-            />
-        </NavigationMenuPrimitive.Trigger>
-    )
-}
-
-function NavigationMenuContent({
-    className,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-    return (
-        <NavigationMenuPrimitive.Content
-            data-slot="navigation-menu-content"
-            className={cn(
-                "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-                "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function NavigationMenuViewport({
-    className,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-    return (
-        <div
-            className={cn(
-                "absolute top-full left-0 isolate z-50 flex justify-center"
-            )}
-        >
-            <NavigationMenuPrimitive.Viewport
-                data-slot="navigation-menu-viewport"
-                className={cn(
-                    "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-                    className
-                )}
-                {...props}
-            />
-        </div>
-    )
-}
-
-function NavigationMenuLink({
-    className,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-    return (
-        <NavigationMenuPrimitive.Link
-            data-slot="navigation-menu-link"
-            className={cn(
-                "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function NavigationMenuIndicator({
-    className,
-    ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-    return (
-        <NavigationMenuPrimitive.Indicator
-            data-slot="navigation-menu-indicator"
-            className={cn(
-                "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-                className
-            )}
-            {...props}
-        >
-            <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-        </NavigationMenuPrimitive.Indicator>
-    )
-}
-
-export {
-    NavigationMenu,
-    NavigationMenuList,
-    NavigationMenuItem,
-    NavigationMenuContent,
-    NavigationMenuTrigger,
-    NavigationMenuLink,
-    NavigationMenuIndicator,
-    NavigationMenuViewport,
-    navigationMenuTriggerStyle,
-}
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@c-rex/utils"
+
+function NavigationMenu({
+    className,
+    children,
+    viewport = true,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean
+}) {
+    return (
+        <NavigationMenuPrimitive.Root
+            data-slot="navigation-menu"
+            data-viewport={viewport}
+            className={cn(
+                "group/navigation-menu relative flex max-w-max flex-1 items-center",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            {viewport && <NavigationMenuViewport />}
+        </NavigationMenuPrimitive.Root>
+    )
+}
+
+function NavigationMenuList({
+    className,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+    return (
+        <NavigationMenuPrimitive.List
+            data-slot="navigation-menu-list"
+            className={cn(
+                "group flex flex-1 list-none items-center justify-center gap-1",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function NavigationMenuItem({
+    className,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+    return (
+        <NavigationMenuPrimitive.Item
+            data-slot="navigation-menu-item"
+            className={cn("relative", className)}
+            {...props}
+        />
+    )
+}
+
+function NavigationMenuTrigger({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+    return (
+        <NavigationMenuPrimitive.Trigger
+            data-slot="navigation-menu-trigger"
+            className={cn(
+                "group inline-flex h-9 w-max items-center justify-center rounded-full pl-4 pr-3 py-2 text-sm font-medium",
+                "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                "focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 ",
+                "group",
+                className
+            )}
+            {...props}
+        >
+            {children}{" "}
+            <ChevronDownIcon
+                className="relative top-[1px] transition duration-300 group-data-[state=open]:rotate-180"
+                aria-hidden="true"
+            />
+        </NavigationMenuPrimitive.Trigger>
+    )
+}
+
+function NavigationMenuContent({
+    className,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+    return (
+        <NavigationMenuPrimitive.Content
+            data-slot="navigation-menu-content"
+            className={cn(
+                "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 right-0 p-2 pr-2.5 absolute",
+                "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none z-50",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function NavigationMenuViewport({
+    className,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+    return (
+        <div
+            className={cn(
+                "absolute top-full left-0 isolate z-50 flex justify-center"
+            )}
+        >
+            <NavigationMenuPrimitive.Viewport
+                data-slot="navigation-menu-viewport"
+                className={cn(
+                    "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+                    className
+                )}
+                {...props}
+            />
+        </div>
+    )
+}
+
+function NavigationMenuLink({
+    className,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+    return (
+        <NavigationMenuPrimitive.Link
+            data-slot="navigation-menu-link"
+            className={cn(
+                "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function NavigationMenuIndicator({
+    className,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+    return (
+        <NavigationMenuPrimitive.Indicator
+            data-slot="navigation-menu-indicator"
+            className={cn(
+                "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+                className
+            )}
+            {...props}
+        >
+            <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+        </NavigationMenuPrimitive.Indicator>
+    )
+}
+
+export {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuContent,
+    NavigationMenuTrigger,
+    NavigationMenuLink,
+    NavigationMenuIndicator,
+    NavigationMenuViewport,
+}

package/src/pagination.tsx

@@ -1,124 +1,124 @@
-import * as React from "react"
-import {
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    MoreHorizontalIcon,
-} from "lucide-react"
-
-import { cn } from "@c-rex/utils"
-import { Button, buttonVariants } from "./button"
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-    return (
-        <nav
-            role="navigation"
-            aria-label="pagination"
-            data-slot="pagination"
-            className={cn("mx-auto flex w-full justify-center", className)}
-            {...props}
-        />
-    )
-}
-
-function PaginationContent({
-    className,
-    ...props
-}: React.ComponentProps<"ul">) {
-    return (
-        <ul
-            data-slot="pagination-content"
-            className={cn("flex flex-row items-center gap-1", className)}
-            {...props}
-        />
-    )
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-    return <li data-slot="pagination-item" {...props} />
-}
-
-type PaginationLinkProps = {
-    isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-    React.ComponentProps<"a">
-
-function PaginationLink({
-    className,
-    isActive,
-    size = "icon",
-    ...props
-}: PaginationLinkProps) {
-    return (
-        <a
-            aria-current={isActive ? "page" : undefined}
-            data-slot="pagination-link"
-            data-active={isActive}
-            className={cn(
-                buttonVariants({
-                    variant: isActive ? "outline" : "ghost",
-                    size,
-                }),
-                className
-            )}
-            {...props}
-        />
-    )
-}
-
-function PaginationPrevious({
-    className,
-    ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-    return (
-        <PaginationLink
-            aria-label="Go to previous page"
-            size="default"
-            className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
-            {...props}
-        >
-            <ChevronLeftIcon />
-        </PaginationLink>
-    )
-}
-
-function PaginationNext({
-    className,
-    ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-    return (
-        <PaginationLink
-            aria-label="Go to next page"
-            size="default"
-            className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
-            {...props}
-        >
-            <ChevronRightIcon />
-        </PaginationLink>
-    )
-}
-
-function PaginationEllipsis({
-    className,
-    ...props
-}: React.ComponentProps<"span">) {
-    return (
-        <span
-            data-slot="pagination-ellipsis"
-            className={cn("flex size-9 items-center justify-center", className)}
-            {...props}
-        >
-            <MoreHorizontalIcon className="size-4" />
-            <span className="sr-only">More pages</span>
-        </span>
-    )
-}
-
-export {
-    Pagination,
-    PaginationContent,
-    PaginationLink,
-    PaginationItem,
-    PaginationPrevious,
-    PaginationNext,
-    PaginationEllipsis,
-}
+import * as React from "react"
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@c-rex/utils"
+import { Button, buttonVariants } from "./button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+    return (
+        <nav
+            role="navigation"
+            aria-label="pagination"
+            data-slot="pagination"
+            className={cn("mx-auto flex w-full justify-center", className)}
+            {...props}
+        />
+    )
+}
+
+function PaginationContent({
+    className,
+    ...props
+}: React.ComponentProps<"ul">) {
+    return (
+        <ul
+            data-slot="pagination-content"
+            className={cn("flex flex-row items-center gap-1", className)}
+            {...props}
+        />
+    )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+    return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+    isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+    React.ComponentProps<"a">
+
+function PaginationLink({
+    className,
+    isActive,
+    size = "icon",
+    ...props
+}: PaginationLinkProps) {
+    return (
+        <a
+            aria-current={isActive ? "page" : undefined}
+            data-slot="pagination-link"
+            data-active={isActive}
+            className={cn(
+                buttonVariants({
+                    variant: isActive ? "outline" : "ghost",
+                    size,
+                }),
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function PaginationPrevious({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+    return (
+        <PaginationLink
+            aria-label="Go to previous page"
+            size="default"
+            className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+            {...props}
+        >
+            <ChevronLeftIcon />
+        </PaginationLink>
+    )
+}
+
+function PaginationNext({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+    return (
+        <PaginationLink
+            aria-label="Go to next page"
+            size="default"
+            className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+            {...props}
+        >
+            <ChevronRightIcon />
+        </PaginationLink>
+    )
+}
+
+function PaginationEllipsis({
+    className,
+    ...props
+}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="pagination-ellipsis"
+            className={cn("flex size-9 items-center justify-center", className)}
+            {...props}
+        >
+            <MoreHorizontalIcon className="size-4" />
+            <span className="sr-only">More pages</span>
+        </span>
+    )
+}
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationLink,
+    PaginationItem,
+    PaginationPrevious,
+    PaginationNext,
+    PaginationEllipsis,
+}

package/src/popover.tsx

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