4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1005,import React from 'react'; import { getInputGroupAddonStyleKeys, getInputGroupStyleKeys, inputGroupStyleKeys } from '../lib/core'; import type { InputGroupAddonBaseProps, InputGroupBaseProps, InputGroupButtonBaseProps, InputGroupInputBaseProps, InputGroupTextareaBaseProps, InputGroupTextBaseProps, ButtonVariant, ButtonSize, } from '../lib/core'; import styles from './input-group.module.scss'; import { Button } from '../button'; export interface InputGroupProps extends React.HTMLAttributes, InputGroupBaseProps {} const InputGroup = React.forwardRef(({ className = '', variant = 'default', children, ...props }, ref) => { const styleKeys = getInputGroupStyleKeys(variant); const classes = [styles[styleKeys.base], styles[styleKeys.variant], className].filter(Boolean).join(' '); return (

{children}

); }); InputGroup.displayName = 'InputGroup'; export interface InputGroupAddonProps extends React.HTMLAttributes, InputGroupAddonBaseProps {} const InputGroupAddon = React.forwardRef(({ className = '', variant = 'default', align = 'inline-start', onClick, ...props }, ref) => { const styleKeys = getInputGroupAddonStyleKeys(variant); const classes = [styles[styleKeys.base], styles[styleKeys.variant], className].filter(Boolean).join(' '); function handleClick(event: React.MouseEvent) { if ((event.target as HTMLElement).closest('button')) { return; } event.currentTarget.parentElement?.querySelector('input')?.focus(); onClick?.(event); } return

; }); InputGroupAddon.displayName = 'InputGroupAddon'; export interface InputGroupButtonProps extends Omit, 'type' | 'size'>, InputGroupButtonBaseProps { type?: 'button' | 'submit' | 'reset'; variant?: ButtonVariant; size?: ButtonSize; } const InputGroupButton = React.forwardRef( ({ className = '', type = 'button', variant = 'ghost', size = 'sm', children, ...props }, ref) => { return ( ); }, ); InputGroupButton.displayName = 'InputGroupButton'; export interface InputGroupTextProps extends React.HTMLAttributes, InputGroupTextBaseProps {} const InputGroupText = React.forwardRef(({ className = '', children, ...props }, ref) => { return ( {children} ); }); InputGroupText.displayName = 'InputGroupText'; export interface InputGroupInputProps extends Omit, 'size'>, InputGroupInputBaseProps {} const InputGroupInput = React.forwardRef(({ className = '', ...props }, ref) => { return ; }); InputGroupInput.displayName = 'InputGroupInput'; export interface InputGroupTextareaProps extends React.TextareaHTMLAttributes, InputGroupTextareaBaseProps {} const InputGroupTextarea = React.forwardRef(({ className = '', ...props }, ref) => { return

;
});
InputGroupTextarea.displayName = 'InputGroupTextarea';

export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };
export default InputGroup;
4f:Tb6c,@use '../../../styles/variables/colors' as *;

.inputGroup {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	border-radius: $radius;
	border: 1px solid $input;
	transition:
		border-color $transition-fast,
		box-shadow $transition-fast;
	outline: none;

&:focus-within {
		border-color: $ring;
		box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent);
	}

&:has([aria-invalid='true']) {
		border-color: $destructive;

&:focus-within {
			box-shadow: 0 0 0 3px color-mix(in srgb, $destructive 20%, transparent);
		}
	}

&:has(> textarea) {
		align-items: flex-start;
	}

&:has(> .addon[data-align='block-start'], > .addon[data-align='block-end']) {
		flex-wrap: wrap;
	}

// 样式变体
	&.variantDefault {
		background-color: transparent;
		box-shadow: $shadow-sm;
	}

&.variantOutline {
		background-color: $field-subtle;
		box-shadow: none;
	}
}

.addon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: $spacing-2;
	cursor: text;
	padding: $spacing-1_5 0;
	font-size: $text-sm;
	font-weight: $font-medium;
	color: $muted-foreground;
	user-select: none;

svg {
		pointer-events: none;
		width: 1rem;
		height: 1rem;
	}

button {
		border-radius: $radius-sm;
	}

// 样式变体
	&.variantDefault {
		background-color: $muted;
	}

&.variantOutline {
		background-color: transparent;
	}

// 对齐方式
	&[data-align='inline-start'] {
		order: -1;
		padding-left: $spacing-3;
	}

&[data-align='inline-end'] {
		order: 1;
		padding-right: $spacing-3;
	}

&[data-align='block-start'] {
		order: -1;
		flex-basis: 100%;
		width: 100%;
		justify-content: flex-start;
		padding: $spacing-3 $spacing-3 0;

.inputGroup:has(> input) & {
			padding-bottom: $spacing-2_5;
		}
	}

&[data-align='block-end'] {
		order: 1;
		flex-basis: 100%;
		width: 100%;
		justify-content: flex-start;
		padding: 0 $spacing-3 $spacing-3;

.inputGroup:has(> input) & {
			padding-top: $spacing-2_5;
		}
	}
}

.button {
	flex-shrink: 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
}

.text {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: $spacing-2;
	font-size: $text-sm;
	color: $muted-foreground;

svg {
		pointer-events: none;
		width: 1rem;
		height: 1rem;
	}
}

.input {
	flex: 1;
	min-width: 0;
	height: 2.25rem;
	border: none;
	background-color: transparent;
	padding: 0 $spacing-3;
	font-size: $text-sm;
	color: $foreground;
	outline: none;

&::placeholder {
		color: $muted-foreground;
	}

&:focus-visible {
		outline: none;
	}

&:disabled {
		pointer-events: none;
		opacity: 0.5;
	}
}

.textarea {
	flex: 1;
	min-width: 0;
	border: none;
	background-color: transparent;
	padding: $spacing-3;
	font-size: $text-sm;
	color: $foreground;
	resize: none;
	outline: none;

&::placeholder {
		color: $muted-foreground;
	}

&:focus-visible {
		outline: none;
	}

&:disabled {
		pointer-events: none;
		opacity: 0.5;
	}
}
4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","button","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/input-group/input-group.tsx","content":"$4e","type":"registry:ui","target":"components/ui/input-group/input-group.tsx"},{"path":"packages/styles/scss/components/input-group.module.scss","content":"$4f","type":"registry:file","target":"components/ui/input-group/input-group.module.scss"},{"path":"packages/react/src/components/input-group/index.ts","content":"export {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupButton,\n\tInputGroupText,\n\tInputGroupInput,\n\tInputGroupTextarea,\n\ttype InputGroupProps,\n\ttype InputGroupAddonProps,\n\ttype InputGroupButtonProps,\n\ttype InputGroupTextProps,\n\ttype InputGroupInputProps,\n\ttype InputGroupTextareaProps,\n} from './input-group';\n","type":"registry:ui","target":"components/ui/input-group/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>