@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.1

package/src/components/navigation-menu.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import {NavigationMenu as NavigationMenuPrimitive} from "@base-ui/react/navigation-menu";
+import {focusRing, popupSurface} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {ChevronDownIcon} from "lucide-react";
+
+function NavigationMenu({
+    align = "start",
+    className,
+    children,
+    // Radix-era shadcn prop: Base UI always renders the shared viewport. Accepted for drop-in use.
+    viewport: _viewport,
+    ...props
+}: NavigationMenuPrimitive.Root.Props &
+    Pick<NavigationMenuPrimitive.Positioner.Props, "align"> & {
+        /** Accepted for shadcn compatibility; the popup always uses the shared viewport. */
+        viewport?: boolean;
+    }) {
+    return (
+        <NavigationMenuPrimitive.Root
+            data-slot="navigation-menu"
+            className={cn(
+                "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <NavigationMenuPositioner align={align} />
+        </NavigationMenuPrimitive.Root>
+    );
+}
+
+function NavigationMenuList({className, ...props}: React.ComponentPropsWithRef<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.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+    return (
+        <NavigationMenuPrimitive.Item
+            data-slot="navigation-menu-item"
+            className={cn("relative", className)}
+            {...props}
+        />
+    );
+}
+
+/**
+ * Top-level trigger and link look: a ghost control at the default height (GUIDELINES §4). Open keeps the
+ * hover wash; the current page (`data-active`) gets the accent tint + medium weight.
+ */
+const navigationMenuTriggerStyle = cva([
+    "group/navigation-menu-trigger inline-flex h-8 w-max items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground",
+    "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
+    focusRing,
+    "hover:bg-hover data-popup-open:bg-hover disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+]);
+
+function NavigationMenuTrigger({className, children, ...props}: NavigationMenuPrimitive.Trigger.Props) {
+    return (
+        <NavigationMenuPrimitive.Trigger
+            data-slot="navigation-menu-trigger"
+            className={cn(navigationMenuTriggerStyle(), "pr-2", className)}
+            {...props}
+        >
+            {children}
+            <NavigationMenuPrimitive.Icon
+                render={
+                    <ChevronDownIcon
+                        className="size-3.5 text-muted-foreground transition-transform duration-200 group-data-popup-open/navigation-menu-trigger:rotate-180 motion-reduce:transition-none"
+                        aria-hidden="true"
+                    />
+                }
+            />
+        </NavigationMenuPrimitive.Trigger>
+    );
+}
+
+function NavigationMenuContent({className, ...props}: NavigationMenuPrimitive.Content.Props) {
+    return (
+        <NavigationMenuPrimitive.Content
+            data-slot="navigation-menu-content"
+            className={cn(
+                "h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
+                "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function NavigationMenuPositioner({
+    className,
+    side = "bottom",
+    sideOffset = 8,
+    align = "start",
+    alignOffset = 0,
+    ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+    return (
+        <NavigationMenuPrimitive.Portal container={usePortalContainer()}>
+            <NavigationMenuPrimitive.Positioner
+                data-slot="navigation-menu-positioner"
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                className={cn(
+                    "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none data-[side=bottom]:before:absolute data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:-top-2.5 data-[side=bottom]:before:h-2.5",
+                    className,
+                )}
+                {...props}
+            >
+                <NavigationMenuPrimitive.Popup
+                    data-slot="navigation-menu-popup"
+                    className={cn(
+                        popupSurface,
+                        "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none",
+                    )}
+                >
+                    <NavigationMenuPrimitive.Viewport
+                        data-slot="navigation-menu-viewport"
+                        className="relative size-full overflow-hidden rounded-[inherit]"
+                    />
+                </NavigationMenuPrimitive.Popup>
+            </NavigationMenuPrimitive.Positioner>
+        </NavigationMenuPrimitive.Portal>
+    );
+}
+
+/**
+ * A link. At the top level it looks like a trigger; inside `NavigationMenuContent` it is a list row
+ * (`rounded-md`, keyboard highlight instead of a ring). `active` marks the current page.
+ */
+function NavigationMenuLink({className, ...props}: NavigationMenuPrimitive.Link.Props) {
+    return (
+        <NavigationMenuPrimitive.Link
+            data-slot="navigation-menu-link"
+            className={cn(
+                "flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm text-foreground outline-none select-none",
+                "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
+                "hover:bg-hover focus-visible:ring-3 focus-visible:ring-ring/50",
+                "data-active:bg-accent data-active:font-medium data-active:text-accent-foreground",
+                "in-data-[slot=navigation-menu-list]:h-8 in-data-[slot=navigation-menu-list]:font-medium",
+                "in-data-[slot=navigation-menu-content]:rounded-md in-data-[slot=navigation-menu-content]:px-2 in-data-[slot=navigation-menu-content]:focus-visible:bg-accent in-data-[slot=navigation-menu-content]:focus-visible:text-accent-foreground in-data-[slot=navigation-menu-content]:focus-visible:ring-0",
+                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function NavigationMenuIndicator({
+    className,
+    ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+    return (
+        <NavigationMenuPrimitive.Icon
+            data-slot="navigation-menu-indicator"
+            className={cn(
+                "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+                className,
+            )}
+            {...props}
+        >
+            <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+        </NavigationMenuPrimitive.Icon>
+    );
+}
+
+export {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuIndicator,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuPositioner,
+    NavigationMenuTrigger,
+    navigationMenuTriggerStyle,
+};

package/src/components/number-field.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import {NumberField as NumberFieldPrimitive} from "@base-ui/react/number-field";
+import {fieldSurface} from "@repraze/kernelkit/lib/recipes";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import {MinusIcon, MoveHorizontalIcon, PlusIcon} from "lucide-react";
+
+function NumberField({className, ...props}: NumberFieldPrimitive.Root.Props) {
+    return (
+        <NumberFieldPrimitive.Root
+            data-slot="number-field"
+            className={cn("group/number-field flex w-full flex-col gap-2", className)}
+            {...props}
+        />
+    );
+}
+
+/** The field look: one bordered surface holding the input and both steppers (§4, §6). */
+const numberFieldGroupVariants = cva(
+    [
+        fieldSurface,
+        "group/number-field-group relative flex w-full min-w-0 items-center",
+        "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-ring/50",
+        "data-invalid:border-danger data-invalid:ring-3 data-invalid:ring-danger/20 has-aria-invalid:border-danger has-aria-invalid:ring-3 has-aria-invalid:ring-danger/20 dark:data-invalid:ring-danger/40 dark:has-aria-invalid:ring-danger/40",
+        "data-disabled:cursor-not-allowed data-disabled:bg-field-disabled data-disabled:opacity-50",
+    ],
+    {
+        variants: {
+            size: {
+                sm: "h-7 gap-0.5 rounded-md pr-0.5",
+                default: "h-8 gap-0.5 pr-1",
+                lg: "h-9 gap-1 pr-1",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+function NumberFieldGroup({
+    className,
+    size = "default",
+    ...props
+}: NumberFieldPrimitive.Group.Props & VariantProps<typeof numberFieldGroupVariants>) {
+    return (
+        <NumberFieldPrimitive.Group
+            data-slot="number-field-group"
+            data-size={size}
+            className={cn(numberFieldGroupVariants({size}), className)}
+            {...props}
+        />
+    );
+}
+
+function NumberFieldInput({className, ...props}: NumberFieldPrimitive.Input.Props) {
+    return (
+        <NumberFieldPrimitive.Input
+            data-slot="number-field-input"
+            className={cn(
+                "h-full w-full min-w-0 flex-1 bg-transparent px-2.5 text-base tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm",
+                "group-data-[size=sm]/number-field-group:md:text-[0.8rem] group-data-[size=lg]/number-field-group:px-3",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+const stepper =
+    "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-[color,background-color] select-none hover:bg-hover hover:text-foreground active:bg-hover disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 group-data-disabled/number-field-group:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5 size-6 group-data-[size=sm]/number-field-group:size-5 group-data-[size=sm]/number-field-group:rounded-sm group-data-[size=sm]/number-field-group:[&_svg:not([class*='size-'])]:size-3";
+
+function NumberFieldDecrement({className, children, ...props}: NumberFieldPrimitive.Decrement.Props) {
+    return (
+        <NumberFieldPrimitive.Decrement
+            data-slot="number-field-decrement"
+            aria-label="Decrease"
+            className={cn(stepper, className)}
+            {...props}
+        >
+            {children ?? <MinusIcon />}
+        </NumberFieldPrimitive.Decrement>
+    );
+}
+
+function NumberFieldIncrement({className, children, ...props}: NumberFieldPrimitive.Increment.Props) {
+    return (
+        <NumberFieldPrimitive.Increment
+            data-slot="number-field-increment"
+            aria-label="Increase"
+            className={cn(stepper, className)}
+            {...props}
+        >
+            {children ?? <PlusIcon />}
+        </NumberFieldPrimitive.Increment>
+    );
+}
+
+/** Drag horizontally over its children (usually the label) to change the value. */
+function NumberFieldScrubArea({className, children, ...props}: NumberFieldPrimitive.ScrubArea.Props) {
+    return (
+        <NumberFieldPrimitive.ScrubArea
+            data-slot="number-field-scrub-area"
+            className={cn("flex w-fit cursor-ew-resize items-center gap-2 select-none *:cursor-ew-resize", className)}
+            {...props}
+        >
+            {children}
+            <NumberFieldScrubAreaCursor />
+        </NumberFieldPrimitive.ScrubArea>
+    );
+}
+
+function NumberFieldScrubAreaCursor({className, children, ...props}: NumberFieldPrimitive.ScrubAreaCursor.Props) {
+    return (
+        <NumberFieldPrimitive.ScrubAreaCursor
+            data-slot="number-field-scrub-area-cursor"
+            className={cn("text-foreground drop-shadow-sm", className)}
+            {...props}
+        >
+            {children ?? <MoveHorizontalIcon className="size-5" />}
+        </NumberFieldPrimitive.ScrubAreaCursor>
+    );
+}
+
+export {
+    NumberField,
+    NumberFieldDecrement,
+    NumberFieldGroup,
+    numberFieldGroupVariants,
+    NumberFieldIncrement,
+    NumberFieldInput,
+    NumberFieldScrubArea,
+    NumberFieldScrubAreaCursor,
+};

package/src/components/page-header.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {cn} from "cn";
+
+/**
+ * Top of a page: eyebrow (badges, breadcrumb), title, description, actions. Same scale on every site of
+ * the suite.
+ */
+function PageHeader({className, render, ...props}: useRender.ComponentProps<"header">) {
+    return useRender({
+        defaultTagName: "header",
+        props: mergeProps<"header">({className: cn("flex flex-col gap-3", className)}, props),
+        render,
+        state: {slot: "page-header"},
+    });
+}
+
+/** Above the title: category badges, a breadcrumb, a status. */
+function PageHeaderEyebrow({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex flex-wrap items-center gap-2", className)}, props),
+        render,
+        state: {slot: "page-header-eyebrow"},
+    });
+}
+
+function PageHeaderTitle({className, render, ...props}: useRender.ComponentProps<"h1">) {
+    return useRender({
+        defaultTagName: "h1",
+        props: mergeProps<"h1">(
+            {className: cn("font-heading text-3xl font-semibold tracking-tight text-balance", className)},
+            props,
+        ),
+        render,
+        state: {slot: "page-header-title"},
+    });
+}
+
+function PageHeaderDescription({className, render, ...props}: useRender.ComponentProps<"p">) {
+    return useRender({
+        defaultTagName: "p",
+        props: mergeProps<"p">(
+            {className: cn("max-w-3xl text-base text-pretty text-muted-foreground md:text-lg", className)},
+            props,
+        ),
+        render,
+        state: {slot: "page-header-description"},
+    });
+}
+
+function PageHeaderActions({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex flex-wrap items-center gap-2 pt-1", className)}, props),
+        render,
+        state: {slot: "page-header-actions"},
+    });
+}
+
+export {PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderTitle};

package/src/components/pager.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cn} from "cn";
+import {ArrowLeftIcon, ArrowRightIcon} from "lucide-react";
+import type * as React from "react";
+
+/** Previous / next page links at the end of a page. */
+function Pager({className, render, ...props}: useRender.ComponentProps<"nav">) {
+    return useRender({
+        defaultTagName: "nav",
+        props: mergeProps<"nav">(
+            {
+                "aria-label": "Pages",
+                className: cn("grid grid-cols-2 gap-4 border-t border-border pt-6", className),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "pager"},
+    });
+}
+
+interface PagerLinkProps extends useRender.ComponentProps<"a"> {
+    direction: "previous" | "next";
+    /** Small caption above the title. Defaults to "Previous" / "Next". */
+    label?: React.ReactNode;
+}
+
+/** A pager card: caption + page title, arrow on the travel side. Pass router links with `render`. */
+function PagerLink({className, render, direction, label, children, ...props}: PagerLinkProps) {
+    const next = direction === "next";
+    const Arrow = next ? ArrowRightIcon : ArrowLeftIcon;
+    return useRender({
+        defaultTagName: "a",
+        props: mergeProps<"a">(
+            {
+                rel: next ? "next" : "prev",
+                className: cn(
+                    "group/pager flex flex-col gap-1 rounded-lg border border-border px-4 py-3 transition-colors hover:border-primary-text hover:bg-hover",
+                    focusRing,
+                    next ? "col-start-2 items-end text-end" : "col-start-1 items-start",
+                    className,
+                ),
+                children: (
+                    <>
+                        <span className="text-xs text-muted-foreground">{label ?? (next ? "Next" : "Previous")}</span>
+                        <span className="flex items-center gap-1.5 font-medium">
+                            {!next && (
+                                <Arrow className="size-4 transition-transform group-hover/pager:-translate-x-0.5" />
+                            )}
+                            {children}
+                            {next && (
+                                <Arrow className="size-4 transition-transform group-hover/pager:translate-x-0.5" />
+                            )}
+                        </span>
+                    </>
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "pager-link", direction},
+    });
+}
+
+export {Pager, PagerLink};
+export type {PagerLinkProps};

package/src/components/pagination.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {Button} from "@repraze/kernelkit/components/button";
+import {cn} from "cn";
+import {ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon} from "lucide-react";
+import * as React from "react";
+
+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 items-center gap-0.5", className)} {...props} />;
+}
+
+function PaginationItem({...props}: React.ComponentProps<"li">) {
+    return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+    /** The current page: outlined, `aria-current="page"`. */
+    isActive?: boolean;
+    /** Element to render instead of `<a>` (e.g. a router link). */
+    render?: React.ComponentProps<typeof Button>["render"];
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+    Omit<React.ComponentProps<"a">, "color">;
+
+function PaginationLink({className, isActive, size = "icon", render, ...props}: PaginationLinkProps) {
+    return (
+        <Button
+            variant={isActive ? "outline" : "ghost"}
+            size={size}
+            nativeButton={false}
+            aria-current={isActive ? "page" : undefined}
+            data-slot="pagination-link"
+            data-active={isActive || undefined}
+            className={cn(
+                "aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-semibold",
+                className,
+            )}
+            render={render ?? <a />}
+            {...(props as React.ComponentProps<typeof Button>)}
+        />
+    );
+}
+
+function PaginationPrevious({
+    className,
+    text = "Previous",
+    ...props
+}: React.ComponentProps<typeof PaginationLink> & {text?: string}) {
+    return (
+        <PaginationLink aria-label="Go to previous page" size="default" className={className} {...props}>
+            <ChevronLeftIcon data-icon="inline-start" />
+            <span className="hidden sm:block">{text}</span>
+        </PaginationLink>
+    );
+}
+
+function PaginationNext({
+    className,
+    text = "Next",
+    ...props
+}: React.ComponentProps<typeof PaginationLink> & {text?: string}) {
+    return (
+        <PaginationLink aria-label="Go to next page" size="default" className={className} {...props}>
+            <span className="hidden sm:block">{text}</span>
+            <ChevronRightIcon data-icon="inline-end" />
+        </PaginationLink>
+    );
+}
+
+function PaginationEllipsis({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            aria-hidden
+            data-slot="pagination-ellipsis"
+            className={cn(
+                "flex size-8 items-center justify-center text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        >
+            <MoreHorizontalIcon />
+            <span className="sr-only">More pages</span>
+        </span>
+    );
+}
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+};

package/src/components/password-input.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupInput,
+} from "@repraze/kernelkit/components/input-group";
+import {EyeIcon, EyeOffIcon} from "lucide-react";
+import * as React from "react";
+
+interface PasswordInputProps extends Omit<React.ComponentProps<"input">, "type" | "size"> {
+    /** Field height, as InputGroup (§4). */
+    size?: "sm" | "default" | "lg";
+    /** Controlled visibility. */
+    visible?: boolean;
+    /** Initial visibility when uncontrolled. */
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    /** Accessible names of the toggle button. */
+    showLabel?: string;
+    hideLabel?: string;
+}
+
+/** Password field with a show / hide toggle. `className` styles the group; other props go to the `<input>`. */
+function PasswordInput({
+    className,
+    size = "default",
+    visible: visibleProp,
+    defaultVisible = false,
+    onVisibleChange,
+    showLabel = "Show password",
+    hideLabel = "Hide password",
+    disabled,
+    ...props
+}: PasswordInputProps) {
+    const [visibleState, setVisibleState] = React.useState(defaultVisible);
+    const visible = visibleProp ?? visibleState;
+    const toggle = () => {
+        setVisibleState(!visible);
+        onVisibleChange?.(!visible);
+    };
+
+    return (
+        <InputGroup data-slot="password-input" size={size} className={className}>
+            <InputGroupInput
+                type={visible ? "text" : "password"}
+                autoComplete="current-password"
+                spellCheck={false}
+                disabled={disabled}
+                {...props}
+            />
+            <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                    data-slot="password-input-toggle"
+                    size="icon-xs"
+                    aria-label={visible ? hideLabel : showLabel}
+                    aria-pressed={visible}
+                    disabled={disabled}
+                    onClick={toggle}
+                    className="text-muted-foreground hover:text-foreground"
+                >
+                    {visible ? <EyeOffIcon /> : <EyeIcon />}
+                </InputGroupButton>
+            </InputGroupAddon>
+        </InputGroup>
+    );
+}
+
+export {PasswordInput};
+export type {PasswordInputProps};