51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T59e,.cr-clearable { position: relative; display: flex; align-items: center; width: 100%; } .cr-clearable > .cr-input { padding-inline-end: 96px; } .cr-clearable[data-leading] > .cr-input { padding-inline-start: 40px; } .cr-clearable[data-shape='pill'] > .cr-input { border-radius: var(--cr-radius-full); } .cr-clearable__leading { position: absolute; left: 14px; display: flex; color: var(--cr-color-text-muted); pointer-events: none; } .cr-clearable__trailing { position: absolute; right: 7px; display: flex; align-items: center; gap: var(--cr-space-2); } .cr-clearable__clear { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); color: var(--cr-color-text-secondary); font-size: 12px; cursor: pointer; } .cr-clearable__clear:hover { color: var(--cr-color-text-default); } .cr-clearable__clear:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } /* Hints such as a shortcut only make sense while the field is empty. */ .cr-clearable:not([data-empty]) .cr-clearable__hint { display: none; } /* Chrome and Safari give a search field a clear button of their own; this component has one already. */ .cr-clearable > .cr-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } 54:T942,'use client'; import { forwardRef, useImperativeHandle, useRef, useState, type ReactNode } from 'react'; import { Input, type InputProps } from '@/components/creance/input/Input'; import { cx } from '@/lib/creance/cx'; import { CrossIcon } from '@/lib/creance/icons'; import './ClearableInput.css'; export interface ClearableInputProps extends InputProps { /** Called after the field is cleared. With a controlled `value`, set it to '' here. */ onClear?: () => void; /** Accessible name of the clear button. Default "Clear". */ clearLabel?: string; /** Shown at the start of the field. Decorative. */ leading?: ReactNode; /** Shown before the clear button: a shortcut hint or a spinner. */ trailing?: ReactNode; /** Round ends, for search. */ shape?: 'rounded' | 'pill'; } /** A text field with a clear button that appears when there is text, and puts focus back in the field. */ export const ClearableInput = forwardRef(function ClearableInput( { onClear, clearLabel = 'Clear', leading, trailing, shape = 'rounded', className, value, defaultValue, onChange, ...props }, ref, ) { const inner = useRef(null); useImperativeHandle(ref, () => inner.current as HTMLInputElement); const [own, setOwn] = useState(String(defaultValue ?? '')); const text = value === undefined ? own : String(value); return ( {leading && {leading}} { if (value === undefined) setOwn(e.currentTarget.value); onChange?.(e); }} {...props} /> {trailing} {text && !props.disabled && !props.readOnly && ( )} ); }); 50:["$","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,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/input.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"clearable-input/ClearableInput.css","content":"$53","type":"registry:file","target":"@components/creance/clearable-input/ClearableInput.css"},{"path":"clearable-input/ClearableInput.tsx","content":"$54","type":"registry:ui","target":"@components/creance/clearable-input/ClearableInput.tsx"}],"className":"h-[70svh] min-h-80"}]]}]