mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-02 13:07:46 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
150 lines
3.5 KiB
TypeScript
150 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/registry/bases/base/lib/utils"
|
|
import { Button } from "@/registry/bases/base/ui/button"
|
|
import { Input } from "@/registry/bases/base/ui/input"
|
|
import { Textarea } from "@/registry/bases/base/ui/textarea"
|
|
|
|
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="input-group"
|
|
role="group"
|
|
className={cn(
|
|
"group/input-group cn-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const inputGroupAddonVariants = cva(
|
|
"cn-input-group-addon flex cursor-text items-center justify-center select-none",
|
|
{
|
|
variants: {
|
|
align: {
|
|
"inline-start": "cn-input-group-addon-align-inline-start order-first",
|
|
"inline-end": "cn-input-group-addon-align-inline-end order-last",
|
|
"block-start":
|
|
"cn-input-group-addon-align-block-start order-first w-full justify-start",
|
|
"block-end":
|
|
"cn-input-group-addon-align-block-end order-last w-full justify-start",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
align: "inline-start",
|
|
},
|
|
}
|
|
)
|
|
|
|
function InputGroupAddon({
|
|
className,
|
|
align = "inline-start",
|
|
...props
|
|
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
|
return (
|
|
<div
|
|
role="group"
|
|
data-slot="input-group-addon"
|
|
data-align={align}
|
|
className={cn(inputGroupAddonVariants({ align }), className)}
|
|
onClick={(e) => {
|
|
if ((e.target as HTMLElement).closest("button")) {
|
|
return
|
|
}
|
|
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const inputGroupButtonVariants = cva(
|
|
"cn-input-group-button flex items-center shadow-none",
|
|
{
|
|
variants: {
|
|
size: {
|
|
xs: "cn-input-group-button-size-xs",
|
|
sm: "cn-input-group-button-size-sm",
|
|
"icon-xs": "cn-input-group-button-size-icon-xs",
|
|
"icon-sm": "cn-input-group-button-size-icon-sm",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: "xs",
|
|
},
|
|
}
|
|
)
|
|
|
|
function InputGroupButton({
|
|
className,
|
|
type = "button",
|
|
variant = "ghost",
|
|
size = "xs",
|
|
...props
|
|
}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
|
|
VariantProps<typeof inputGroupButtonVariants> & {
|
|
type?: "button" | "submit" | "reset"
|
|
}) {
|
|
return (
|
|
<Button
|
|
type={type}
|
|
data-size={size}
|
|
variant={variant}
|
|
className={cn(inputGroupButtonVariants({ size }), className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"cn-input-group-text flex items-center [&_svg]:pointer-events-none",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function InputGroupInput({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"input">) {
|
|
return (
|
|
<Input
|
|
data-slot="input-group-control"
|
|
className={cn("cn-input-group-input flex-1", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function InputGroupTextarea({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"textarea">) {
|
|
return (
|
|
<Textarea
|
|
data-slot="input-group-control"
|
|
className={cn("cn-input-group-textarea flex-1 resize-none", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupText,
|
|
InputGroupInput,
|
|
InputGroupTextarea,
|
|
}
|