"use client" import { twMerge } from "cn" import { Group, type GroupProps } from "react-aria-components/Group" import { Input as InputPrimitive, type InputProps as PrimitiveInputProps, } from "react-aria-components/Input" import { cx } from "@/lib/primitive" import { Button, type ButtonProps, } from "@/components/ui/preskok-ui/button" interface InputProps extends PrimitiveInputProps { ref?: React.RefObject } export function Input({ className, ref, ...props }: InputProps) { return ( ) } interface InputGroupProps extends Omit { className?: string } export function InputGroup({ className, ...props }: InputGroupProps) { return ( [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col", "has-[>[data-align=block-end]]:[&_[data-slot=input-group-control]]:pt-3 has-[>[data-align=block-start]]:[&_[data-slot=input-group-control]]:pb-3", "has-[>[data-align=inline-end]]:[&_[data-slot=input-group-control]]:pr-1.5 has-[>[data-align=inline-start]]:[&_[data-slot=input-group-control]]:pl-1.5", "[&>[data-slot=control]]:min-w-0 [&>[data-slot=control]]:flex-1 [&>[data-slot=control]]:self-stretch", "[&_[data-slot=input-group-control]]:h-full [&_[data-slot=input-group-control]]:rounded-none [&_[data-slot=input-group-control]]:border-0 [&_[data-slot=input-group-control]]:bg-transparent [&_[data-slot=input-group-control]]:shadow-none [&_[data-slot=input-group-control]]:ring-0", "[&_[data-slot=input-group-control]]:focus:border-transparent [&_[data-slot=input-group-control]]:focus:ring-0 [&_[data-slot=input-group-control]]:focus:outline-hidden", "[&_[data-slot=input-group-control]]:invalid:border-transparent [&_[data-slot=input-group-control]]:focus:invalid:border-transparent [&_[data-slot=input-group-control]]:focus:invalid:ring-0", "[&_[data-slot=input-group-control]]:disabled:bg-transparent", className )} {...props} /> ) } interface InputGroupAddonProps extends React.ComponentProps<"div"> { align?: "inline-start" | "inline-end" | "block-start" | "block-end" } const inputGroupAddonStyles = { "inline-start": "order-first pl-2 has-[>button]:pl-px has-[>kbd]:pl-1.5", "inline-end": "order-last pr-1.25 has-[>button]:pr-px has-[>kbd]:pr-1.5", "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2", "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2", } export function InputGroupAddon({ className, align = "inline-start", onClick, ...props }: InputGroupAddonProps) { return (

kbd]:rounded-[calc(var(--radius-lg)-5px)] [&>svg:not([class*='size-'])]:size-4", inputGroupAddonStyles[align], className )} onClick={(event) => { onClick?.(event) if ( event.defaultPrevented || (event.target as HTMLElement).closest("button") ) { return } event.currentTarget.parentElement?.querySelector("input")?.focus() }} {...props} /> ) } interface InputGroupButtonProps extends Omit { size?: "xs" | "sm" | "icon-xs" | "icon-sm" } const inputGroupButtonSizes = { xs: { button: "xs", className: "h-6 gap-1 rounded-[calc(var(--radius-lg)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5", }, sm: { button: "sm", className: "h-7 rounded-[calc(var(--radius-lg)-2px)] px-2.5 [&>svg:not([class*='size-'])]:size-4", }, "icon-xs": { button: "sq-xs", className: "size-6 rounded-[calc(var(--radius-lg)-3px)] p-0", }, "icon-sm": { button: "sq-sm", className: "size-8 rounded-[calc(var(--radius-lg)-2px)] p-0", }, } as const export function InputGroupButton({ className, type = "button", intent = "plain", size = "xs", ...props }: InputGroupButtonProps) { const sizeStyles = inputGroupButtonSizes[size] return (