npm - @acronis-platform/ui-react - Versions diffs - 4.0.0 → 4.1.0 - Mend

@acronis-platform/ui-react 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (620) hide show

package/dist/components/ui/input-select/input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-select.js","sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n CheckIcon,\n ChevronDownIcon,\n ChevronRightIcon,\n CircleWarningIcon,\n InboxIcon,\n MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n /* Current in-dropdown search query. /\n query: string;\n /* Update the search query. /\n setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n React.createContext<InputSelectFilterContextValue \| null>(null);\n\n/\n Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n /\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n const context = React.useContext(InputSelectFilterContext);\n if (!context) {\n throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n }\n return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean \| undefined = false>(\n props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n const { onOpenChange } = props;\n const [query, setQuery] = React.useState('');\n const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n // Reset the query when the popup closes so it reopens unfiltered.\n const handleOpenChange = React.useCallback<\n NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n >(\n (open, eventDetails) => {\n onOpenChange?.(open, eventDetails);\n if (!open) {\n setQuery('');\n }\n },\n [onOpenChange]\n );\n\n return (\n <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n <InputSelectFilterContext.Provider value={filter}>\n <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n </InputSelectFilterContext.Provider>\n </InputSelectModeContext.Provider>\n );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/* Vertical field stack: label, trigger, description/error. /\nconst InputSelectField = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n className\n )}\n {...props}\n />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n /* Appends a required `` after the label text. /\n required?: boolean;\n }\n>(({ className, children, required, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n className\n )}\n {...props}\n >\n {children}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-select-global-required-color)]\"\n >\n \n </span>\n )}\n </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n 'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n 'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n 'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n // Error treatment (driven by `aria-invalid`).\n 'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon className=\"flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n <ChevronDownIcon\n size={16}\n className=\"transition-transform group-data-[popup-open]:rotate-180\"\n />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Value>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Value\n ref={ref}\n className={cn(\n 'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n 'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n className\n )}\n {...props}\n />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Popup>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n sideOffset?: number;\n align?: SelectPrimitive.Positioner.Props['align'];\n side?: SelectPrimitive.Positioner.Props['side'];\n /\n Container to portal the dropdown into. Defaults to the document body;\n * pass an element to scope the portal (e.g. a shadow root, so the popup\n * inherits styles defined there).\n /\n portalContainer?: SelectPrimitive.Portal.Props['container'];\n }\n>(\n (\n {\n className,\n children,\n sideOffset = 4,\n align = 'start',\n side = 'bottom',\n portalContainer,\n ...props\n },\n ref\n ) => {\n const ctxContainer = usePortalContainer();\n const resolvedContainer = portalContainer ?? ctxContainer;\n\n return (\n <SelectPrimitive.Portal container={resolvedContainer}>\n <SelectPrimitive.Positioner\n sideOffset={sideOffset}\n align={align}\n side={side}\n alignItemWithTrigger={false}\n className=\"z-50 outline-none\"\n >\n <SelectPrimitive.Popup\n ref={ref}\n className={cn(\n 'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n className\n )}\n {...props}\n >\n {children}\n </SelectPrimitive.Popup>\n </SelectPrimitive.Positioner>\n </SelectPrimitive.Portal>\n );\n }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/\n In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n /\nconst InputSelectSearch = React.forwardRef<\n HTMLInputElement,\n React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n const filter = React.useContext(InputSelectFilterContext);\n const setQuery = filter?.setQuery;\n const controlled = value !== undefined;\n\n // When the query is controlled externally, the consumer's `value` is the\n // source of truth for what's displayed, so keep the internal filter context\n // (what flat items match against) synced to it. A prop-driven value change —\n // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n // fire `onChange`, so driving the filter off raw DOM events alone would leave\n // `filter.query` stale and hide every item against a query the box no longer\n // shows. `setQuery` is a stable state setter, so this runs only when `value`\n // changes.\n React.useEffect(() => {\n if (controlled) {\n setQuery?.(String(value ?? ''));\n }\n }, [controlled, value, setQuery]);\n\n return (\n <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n <MagnifierIcon\n size={16}\n className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n />\n <input\n ref={ref}\n type=\"search\"\n value={value ?? filter?.query ?? ''}\n onChange={(event) => {\n onChange?.(event);\n // Uncontrolled: the input's value is* the filter query, so write it\n // straight through. Controlled: the effect above syncs the filter to\n // the consumer's `value` once it re-renders, avoiding a flash of raw\n // typed text when the consumer debounces or transforms the value.\n if (!controlled) {\n filter?.setQuery(event.currentTarget.value);\n }\n }}\n // Base UI Select's typeahead would consume printable keys before they\n // reach this input, so stop those from bubbling — but let navigation and\n // selection keys (Arrow/Home/End/Enter/Escape, all multi-char `key`\n // names) through so the user can move from the search box into the\n // filtered list and pick a result with the keyboard.\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.key.length === 1) {\n event.stopPropagation();\n }\n }}\n className={cn(\n 'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n className\n )}\n {...props}\n />\n </div>\n );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/* A section (group) of items with an optional header. Divided by a top border. /\nconst InputSelectSection = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Group\n ref={ref}\n className={cn(\n 'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n className\n )}\n {...props}\n />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.GroupLabel\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n className\n )}\n {...props}\n />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/\n Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n /\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n return NESTING_BASE + (indent - 1) NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. /\n icon?: React.ReactNode;\n /* 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. /\n indent?: number;\n /\n Text used to match the in-dropdown search query. Defaults to the string\n * `children`. When a query is active and this text doesn't match, the row hides\n * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n * stable.\n /\n textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n const multiple = React.useContext(InputSelectModeContext);\n const filter = React.useContext(InputSelectFilterContext);\n const query = filter?.query.trim().toLowerCase() ?? '';\n const label = textValue ?? (typeof children === 'string' ? children : undefined);\n const autoHidden =\n query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n return (\n <SelectPrimitive.Item\n ref={ref}\n hidden={hidden ?? autoHidden}\n className={cn(\n 'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n // Single-select rows tint when selected; multiple-select rows keep the\n // unselected background (the leading checkbox carries the state).\n !multiple &&\n 'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n 'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n className\n )}\n {...props}\n >\n {multiple && (\n <span\n aria-hidden=\"true\"\n className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n >\n <CheckIcon size={16} />\n </span>\n )}\n {typeof indent === 'number' && indent > 0 && (\n <span\n aria-hidden=\"true\"\n className=\"size-4 shrink-0\"\n style={{ minWidth: nestingWidth(indent) }}\n />\n )}\n {icon && (\n <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n {icon}\n </span>\n )}\n <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n {children}\n </SelectPrimitive.ItemText>\n {!multiple && (\n <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n <CheckIcon size={16} />\n </SelectPrimitive.ItemIndicator>\n )}\n </SelectPrimitive.Item>\n );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n extends React.ComponentPropsWithoutRef<'button'> {\n /* Whether the group is currently expanded. /\n expanded: boolean;\n /* Called when the user clicks the row to toggle expand/collapse. /\n onToggle: () => void;\n /* Optional leading icon rendered after the chevron. /\n icon?: React.ReactNode;\n /* 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. /\n indent?: number;\n}\n\n/\n A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is not a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n \n When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n /\nconst InputSelectExpander = React.forwardRef<\n HTMLButtonElement,\n InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n <button\n ref={ref}\n type=\"button\"\n onClick={onToggle}\n aria-expanded={expanded}\n className={cn(\n 'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n className\n )}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n style={{\n minWidth:\n typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n }}\n >\n {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n </span>\n {icon && (\n <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n {icon}\n </span>\n )}\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n 'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n className\n )}\n {...props}\n />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n 'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n className\n )}\n {...props}\n />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n extends React.ComponentPropsWithoutRef<'div'> {\n /* Which status to show. Drives the leading icon. /\n variant: 'loading' \| 'empty' \| 'error';\n /* Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. /\n action?: React.ReactNode;\n}\n\n/* Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n ({ className, variant, children, action, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n className\n )}\n {...props}\n >\n {variant === 'loading' && (\n <span\n aria-hidden=\"true\"\n className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n />\n )}\n {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n {children}\n {variant === 'error' && action}\n </div>\n )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n InputSelect,\n InputSelectField,\n InputSelectLabel,\n InputSelectTrigger,\n InputSelectValue,\n InputSelectContent,\n InputSelectSearch,\n InputSelectGroup,\n InputSelectSection,\n InputSelectSectionLabel,\n InputSelectItem,\n InputSelectExpander,\n InputSelectDescription,\n InputSelectError,\n InputSelectStatus,\n useInputSelectFilter,\n};\n"],"names":["InputSelectModeContext","React","InputSelectFilterContext","useInputSelectFilter","context","InputSelect","props","onOpenChange","query","setQuery","filter","handleOpenChange","open","eventDetails","jsx","SelectPrimitive","InputSelectGroup","InputSelectField","className","ref","cn","InputSelectLabel","children","required","jsxs","InputSelectTrigger","ChevronDownIcon","InputSelectValue","InputSelectContent","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","InputSelectSearch","value","onChange","onKeyDown","controlled","MagnifierIcon","event","InputSelectSection","InputSelectSectionLabel","NESTING_BASE","NESTING_STEP","nestingWidth","indent","InputSelectItem","icon","textValue","hidden","multiple","label","autoHidden","CheckIcon","InputSelectExpander","expanded","onToggle","ChevronRightIcon","InputSelectDescription","InputSelectError","InputSelectStatus","variant","action","InboxIcon","CircleWarningIcon"],"mappings":"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"}
1	+ {"version":3,"file":"input-select.js","names":[],"sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n CheckIcon,\n ChevronDownIcon,\n ChevronRightIcon,\n CircleWarningIcon,\n InboxIcon,\n MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n /* Current in-dropdown search query. /\n query: string;\n /* Update the search query. /\n setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n React.createContext<InputSelectFilterContextValue \| null>(null);\n\n/\n Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n /\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n const context = React.useContext(InputSelectFilterContext);\n if (!context) {\n throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n }\n return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean \| undefined = false>(\n props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n const { onOpenChange } = props;\n const [query, setQuery] = React.useState('');\n const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n // Reset the query when the popup closes so it reopens unfiltered.\n const handleOpenChange = React.useCallback<\n NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n >(\n (open, eventDetails) => {\n onOpenChange?.(open, eventDetails);\n if (!open) {\n setQuery('');\n }\n },\n [onOpenChange]\n );\n\n return (\n <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n <InputSelectFilterContext.Provider value={filter}>\n <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n </InputSelectFilterContext.Provider>\n </InputSelectModeContext.Provider>\n );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/* Vertical field stack: label, trigger, description/error. /\nconst InputSelectField = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n className\n )}\n {...props}\n />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n /* Appends a required `` after the label text. /\n required?: boolean;\n }\n>(({ className, children, required, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n className\n )}\n {...props}\n >\n {children}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-select-global-required-color)]\"\n >\n \n </span>\n )}\n </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n 'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n 'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n 'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n // Error treatment (driven by `aria-invalid`).\n 'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon className=\"flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n <ChevronDownIcon\n size={16}\n className=\"transition-transform group-data-[popup-open]:rotate-180\"\n />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Value>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Value\n ref={ref}\n className={cn(\n 'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n 'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n className\n )}\n {...props}\n />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Popup>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n sideOffset?: number;\n align?: SelectPrimitive.Positioner.Props['align'];\n side?: SelectPrimitive.Positioner.Props['side'];\n /\n Container to portal the dropdown into. Defaults to the document body;\n * pass an element to scope the portal (e.g. a shadow root, so the popup\n * inherits styles defined there).\n /\n portalContainer?: SelectPrimitive.Portal.Props['container'];\n }\n>(\n (\n {\n className,\n children,\n sideOffset = 4,\n align = 'start',\n side = 'bottom',\n portalContainer,\n ...props\n },\n ref\n ) => {\n const ctxContainer = usePortalContainer();\n const resolvedContainer = portalContainer ?? ctxContainer;\n\n return (\n <SelectPrimitive.Portal container={resolvedContainer}>\n <SelectPrimitive.Positioner\n sideOffset={sideOffset}\n align={align}\n side={side}\n alignItemWithTrigger={false}\n className=\"z-50 outline-none\"\n >\n <SelectPrimitive.Popup\n ref={ref}\n className={cn(\n 'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n className\n )}\n {...props}\n >\n {children}\n </SelectPrimitive.Popup>\n </SelectPrimitive.Positioner>\n </SelectPrimitive.Portal>\n );\n }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/\n In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n /\nconst InputSelectSearch = React.forwardRef<\n HTMLInputElement,\n React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n const filter = React.useContext(InputSelectFilterContext);\n const setQuery = filter?.setQuery;\n const controlled = value !== undefined;\n\n // When the query is controlled externally, the consumer's `value` is the\n // source of truth for what's displayed, so keep the internal filter context\n // (what flat items match against) synced to it. A prop-driven value change —\n // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n // fire `onChange`, so driving the filter off raw DOM events alone would leave\n // `filter.query` stale and hide every item against a query the box no longer\n // shows. `setQuery` is a stable state setter, so this runs only when `value`\n // changes.\n React.useEffect(() => {\n if (controlled) {\n setQuery?.(String(value ?? ''));\n }\n }, [controlled, value, setQuery]);\n\n return (\n <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n <MagnifierIcon\n size={16}\n className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n />\n <input\n ref={ref}\n type=\"search\"\n value={value ?? filter?.query ?? ''}\n onChange={(event) => {\n onChange?.(event);\n // Uncontrolled: the input's value is* the filter query, so write it\n // straight through. Controlled: the effect above syncs the filter to\n // the consumer's `value` once it re-renders, avoiding a flash of raw\n // typed text when the consumer debounces or transforms the value.\n if (!controlled) {\n filter?.setQuery(event.currentTarget.value);\n }\n }}\n // Base UI Select's typeahead would consume printable keys before they\n // reach this input, so stop those from bubbling — but let navigation and\n // selection keys (Arrow/Home/End/Enter/Escape, all multi-char `key`\n // names) through so the user can move from the search box into the\n // filtered list and pick a result with the keyboard.\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.key.length === 1) {\n event.stopPropagation();\n }\n }}\n className={cn(\n 'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n className\n )}\n {...props}\n />\n </div>\n );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/* A section (group) of items with an optional header. Divided by a top border. /\nconst InputSelectSection = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Group\n ref={ref}\n className={cn(\n 'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n className\n )}\n {...props}\n />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.GroupLabel\n ref={ref}\n className={cn(\n 'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n className\n )}\n {...props}\n />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/\n Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n /\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n return NESTING_BASE + (indent - 1) NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. /\n icon?: React.ReactNode;\n /* 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. /\n indent?: number;\n /\n Text used to match the in-dropdown search query. Defaults to the string\n * `children`. When a query is active and this text doesn't match, the row hides\n * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n * stable.\n /\n textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n const multiple = React.useContext(InputSelectModeContext);\n const filter = React.useContext(InputSelectFilterContext);\n const query = filter?.query.trim().toLowerCase() ?? '';\n const label = textValue ?? (typeof children === 'string' ? children : undefined);\n const autoHidden =\n query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n return (\n <SelectPrimitive.Item\n ref={ref}\n hidden={hidden ?? autoHidden}\n className={cn(\n 'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n // Single-select rows tint when selected; multiple-select rows keep the\n // unselected background (the leading checkbox carries the state).\n !multiple &&\n 'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n 'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n className\n )}\n {...props}\n >\n {multiple && (\n <span\n aria-hidden=\"true\"\n className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n >\n <CheckIcon size={16} />\n </span>\n )}\n {typeof indent === 'number' && indent > 0 && (\n <span\n aria-hidden=\"true\"\n className=\"size-4 shrink-0\"\n style={{ minWidth: nestingWidth(indent) }}\n />\n )}\n {icon && (\n <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n {icon}\n </span>\n )}\n <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n {children}\n </SelectPrimitive.ItemText>\n {!multiple && (\n <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n <CheckIcon size={16} />\n </SelectPrimitive.ItemIndicator>\n )}\n </SelectPrimitive.Item>\n );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n extends React.ComponentPropsWithoutRef<'button'> {\n /* Whether the group is currently expanded. /\n expanded: boolean;\n /* Called when the user clicks the row to toggle expand/collapse. /\n onToggle: () => void;\n /* Optional leading icon rendered after the chevron. /\n icon?: React.ReactNode;\n /* 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. /\n indent?: number;\n}\n\n/\n A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is not a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n \n When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n /\nconst InputSelectExpander = React.forwardRef<\n HTMLButtonElement,\n InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n <button\n ref={ref}\n type=\"button\"\n onClick={onToggle}\n aria-expanded={expanded}\n className={cn(\n 'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n 'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n className\n )}\n {...props}\n >\n <span\n aria-hidden=\"true\"\n className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n style={{\n minWidth:\n typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n }}\n >\n {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n </span>\n {icon && (\n <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n {icon}\n </span>\n )}\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n 'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n className\n )}\n {...props}\n />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n HTMLParagraphElement,\n React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n 'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n className\n )}\n {...props}\n />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n extends React.ComponentPropsWithoutRef<'div'> {\n /* Which status to show. Drives the leading icon. /\n variant: 'loading' \| 'empty' \| 'error';\n /* Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. /\n action?: React.ReactNode;\n}\n\n/* Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n ({ className, variant, children, action, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n className\n )}\n {...props}\n >\n {variant === 'loading' && (\n <span\n aria-hidden=\"true\"\n className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n />\n )}\n {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n {children}\n {variant === 'error' && action}\n </div>\n )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n InputSelect,\n InputSelectField,\n InputSelectLabel,\n InputSelectTrigger,\n InputSelectValue,\n InputSelectContent,\n InputSelectSearch,\n InputSelectGroup,\n InputSelectSection,\n InputSelectSectionLabel,\n InputSelectItem,\n InputSelectExpander,\n InputSelectDescription,\n InputSelectError,\n InputSelectStatus,\n useInputSelectFilter,\n};\n"],"mappings":"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"}

package/dist/components/ui/input-text/input-text.js CHANGED Viewed

@@ -1,98 +1,54 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import * as m from "react";
-import { TimesIcon as C } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as c } from "../../../lib/utils.js";
-import { InputBox as T } from "../input/input.js";
-const k = m.forwardRef(
-  ({
-    className: g,
-    style: v,
-    id: b,
-    label: i,
-    required: u,
-    description: h,
-    error: o,
-    clearable: f,
-    onClear: I,
-    disabled: e,
-    value: a,
-    ...N
-  }, y) => {
-    const w = m.useId(), r = b ?? w, d = `${r}-message`, n = o != null && o !== "", j = a != null && a !== "", p = !!f && j && !e, l = n ? o : h, x = l != null && l !== "";
-    return /* @__PURE__ */ s(
-      "div",
-      {
-        className: c(
-          "flex min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]",
-          g
-        ),
-        style: v,
-        children: [
-          i != null && i !== "" && /* @__PURE__ */ s(
-            "label",
-            {
-              htmlFor: r,
-              className: c(
-                "flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4",
-                e ? "text-[var(--ui-input-text-global-label-color-disabled)]" : "text-[var(--ui-input-text-global-label-color-idle)]"
-              ),
-              children: [
-                i,
-                u && /* @__PURE__ */ t(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "text-[var(--ui-input-text-global-required-color)]",
-                    children: "*"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ s("div", { className: "relative", children: [
-            /* @__PURE__ */ t(
-              T,
-              {
-                ref: y,
-                id: r,
-                disabled: e,
-                value: a,
-                "aria-invalid": n || void 0,
-                "aria-required": u || void 0,
-                "aria-describedby": x ? d : void 0,
-                className: p ? "pe-9" : void 0,
-                ...N
-              }
-            ),
-            p && /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: I,
-                "aria-label": "Clear",
-                className: "absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
-                children: /* @__PURE__ */ t(C, {})
-              }
-            )
-          ] }),
-          x && /* @__PURE__ */ t(
-            "p",
-            {
-              id: d,
-              className: c(
-                "text-xs leading-4",
-                n ? "text-[var(--ui-input-text-error-msg-error-color)]" : e ? "text-[var(--ui-input-text-normal-description-color-disabled)]" : "text-[var(--ui-input-text-normal-description-color-idle)]"
-              ),
-              children: l
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-k.displayName = "InputText";
-export {
-  k as InputText
-};
-//# sourceMappingURL=input-text.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { InputBox as t } from "../input/input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { TimesIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/input-text/input-text.tsx
+var o = n.forwardRef(({ className: o, style: s, id: c, label: l, required: u, description: d, error: f, clearable: p, onClear: m, disabled: h, value: g, ..._ }, v) => {
+	let y = n.useId(), b = c ?? y, x = `${b}-message`, S = f != null && f !== "", C = !!p && g != null && g !== "" && !h, w = S ? f : d, T = w != null && w !== "";
+	return /* @__PURE__ */ i("div", {
+		className: e("flex min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]", o),
+		style: s,
+		children: [
+			l != null && l !== "" && /* @__PURE__ */ i("label", {
+				htmlFor: b,
+				className: e("flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4", h ? "text-[var(--ui-input-text-global-label-color-disabled)]" : "text-[var(--ui-input-text-global-label-color-idle)]"),
+				children: [l, u && /* @__PURE__ */ r("span", {
+					"aria-hidden": "true",
+					className: "text-[var(--ui-input-text-global-required-color)]",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ r(t, {
+					ref: v,
+					id: b,
+					disabled: h,
+					value: g,
+					"aria-invalid": S || void 0,
+					"aria-required": u || void 0,
+					"aria-describedby": T ? x : void 0,
+					className: C ? "pe-9" : void 0,
+					..._
+				}), C && /* @__PURE__ */ r("button", {
+					type: "button",
+					onClick: m,
+					"aria-label": "Clear",
+					className: "absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+					children: /* @__PURE__ */ r(a, {})
+				})]
+			}),
+			T && /* @__PURE__ */ r("p", {
+				id: x,
+				className: e("text-xs leading-4", S ? "text-[var(--ui-input-text-error-msg-error-color)]" : h ? "text-[var(--ui-input-text-normal-description-color-disabled)]" : "text-[var(--ui-input-text-normal-description-color-idle)]"),
+				children: w
+			})
+		]
+	});
+});
+o.displayName = "InputText";
+//#endregion
+export { o as InputText };
+//# sourceMappingURL=input-text.js.map

package/dist/components/ui/input-text/input-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { InputBox } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `InputBox` primitive (themed by the `--ui-input-text-` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` ``),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-` tokens — label/required/description/error — so brand\n// overrides are honored; the clear button is a ghost ButtonIcon (glyph\n// `--ui-button-icon-global-icon-color-idle`, since the input-text tier dropped its\n// own clear-icon token in the Figma sync) with a 3px `--ui-focus-primary` ring.\n// `ref` targets the underlying `<input>`; `className` and `style` both target the\n// field wrapper (label + box + message), so sizing the field works the same way\n// whichever one a consumer reaches for.\nexport interface InputTextProps\n extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\n /* Field label, rendered above the input. /\n label?: React.ReactNode;\n /* Marks the field required — appends a `` after the label. /\n required?: boolean;\n /** Helper text below the input. Hidden while `error` is set. /\n description?: React.ReactNode;\n /\n Error message below the input. Its presence switches the field to the error\n * treatment (red box border + red message).\n /\n error?: React.ReactNode;\n /* Show a clear (✕) button while the (controlled) field has a value. /\n clearable?: boolean;\n /* Called when the clear button is activated. /\n onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n (\n {\n className,\n style,\n id,\n label,\n required,\n description,\n error,\n clearable,\n onClear,\n disabled,\n value,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const hasValue = value != null && value !== '';\n const showClear = Boolean(clearable) && hasValue && !disabled;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div\n className={cn(\n 'flex min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]',\n className\n )}\n style={style}\n >\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n : 'text-[var(--ui-input-text-global-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-global-required-color)]\"\n >\n \n </span>\n )}\n </label>\n )}\n\n <div className=\"relative\">\n <InputBox\n ref={ref}\n id={inputId}\n disabled={disabled}\n value={value}\n aria-invalid={hasError \|\| undefined}\n aria-required={required \|\| undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={showClear ? 'pe-9' : undefined}\n {...props}\n />\n {showClear && (\n <button\n type=\"button\"\n onClick={onClear}\n aria-label=\"Clear\"\n className=\"absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"names":["InputText","React","className","style","id","label","required","description","error","clearable","onClear","disabled","value","props","ref","reactId","inputId","messageId","hasError","hasValue","showClear","message","hasMessage","jsxs","cn","jsx","InputBox","TimesIcon"],"mappings":"~~;;;;;~~AAwCA,~~MAAMA~~,~~IAAYC~~,EAAM~~;AAAA~~,~~EACtB~~,~~CACE;AAAA~~,~~IACE~~,~~WAAAC;AAAA~~,~~IACA~~,~~OAAAC;AAAA~~,~~IACA~~,~~IAAAC;AAAA~~,~~IACA~~,~~OAAAC;AAAA~~,~~IACA~~,~~UAAAC;AAAA~~,~~IACA~~,~~aAAAC;AAAA~~,~~IACA~~,~~OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,~~MACG;~~AACH~~,~~UAAMC~~,~~IAAUd~~,EAAM,~~MAAA~~,~~GAChBe~~,~~IAAUZ~~,~~KAAMW~~,~~GAChBE~~,IAAY,~~GAAGD~~,~~CAAO~~,~~YAEtBE~~,~~IAAWV~~,KAAS,~~QAAQA~~,MAAU,~~IACtCW~~,~~IAAWP~~,KAAS,~~QAAQA~~,MAAU,~~IACtCQ~~,~~IAAY~~,~~EAAQX,KAAcU,KAAY,CAACR,~~GAC/CU,~~IAAUH~~,~~IAAWV~~,~~IAAQD~~,~~GAC7Be~~,~~IAAaD~~,KAAW,~~QAAQA~~,MAAY;~~AAElD~~,~~WACE~~,~~gBAAAE;AAAA~~,~~MAAC~~;~~AAAA~~,~~MAAA;AAAA~~,~~QACC~~,~~WAAWC;AAAA~~,~~UACT~~;~~AAAA,UACAtB~~;~~AAAA~~,~~QAAA;AAAA,QAEF,OAAAC;AAAA,QAEC,~~UAAA;~~AAAA~~,~~UAAAE,~~KAAS,~~QAAQA~~,MAAU,MAC1B,~~gBAAAkB;AAAA~~,~~YAAC~~;~~AAAA~~,~~YAAA~~;~~AAAA~~,~~cACC~~,~~SAASP;AAAA~~,~~cACT~~,~~WAAWQ;AAAA,gBACT;AAAA,gBACAb,~~IACI,4DACA~~;AAAA~~,~~cAAA~~;~~AAAA~~,~~cAGL,~~UAAA~~;AAAA~~,~~gBAAAN;AAAA~~,~~gBACAC~~,KACC,~~gBAAAmB;AAAA,~~kBAAC~~;AAAA~~,~~kBAAA~~;~~AAAA~~,~~oBACC,~~eAAY;~~AAAA~~,~~oBACZ,~~WAAU;~~AAAA~~,~~oBACX,~~UAAA;~~AAAA~~,~~kBAAA;AAAA~~,~~gBAAA;AAAA~~,~~cAED~~;~~AAAA~~,~~YAAA~~;~~AAAA~~,UAAA~~;AAAA~~,~~UAKN~~,~~gBAAAF~~,~~EAAC,OAAA,EAAI,WAAU,YACb,UAAA~~;~~AAAA,YAAA,gBAAAE~~;~~AAAA~~,~~cAACC~~;~~AAAA,cAAA~~;~~AAAA,gBACC,KAAAZ~~;~~AAAA~~,~~gBACA~~,~~IAAIE;AAAA~~,~~gBACJ,UAAAL~~;~~AAAA~~,~~gBACA~~,~~OAAAC;AAAA,gBACA,gBAAcM,~~KAAY~~;AAAA~~,~~gBAC1B,iBAAeZ,KAAY~~;~~AAAA~~,~~gBAC3B~~,~~oBAAkBgB~~,~~IAAaL~~,~~IAAY~~;~~AAAA~~,~~gBAC3C~~,~~WAAWG,~~IAAY,SAAS~~;AAAA~~,~~gBAC/B,GAAGP~~;~~AAAA~~,~~cAAA~~;~~AAAA~~,~~YAAA;AAAA~~,~~YAELO~~,KACC,~~gBAAAK;AAAA~~,~~cAAC~~;~~AAAA~~,~~cAAA;AAAA,gBACC,~~MAAK;~~AAAA~~,~~gBACL,SAASf~~;~~AAAA~~,~~gBACT,~~cAAW;~~AAAA~~,~~gBACX,~~WAAU;~~AAAA~~,~~gBAEV~~,~~4BAACiB~~,~~GAAA~~,CAAA~~,CAAU~~;~~AAAA~~,~~cAAA;AAAA~~,~~YAAA;AAAA,UACb,~~GAEJ~~;AAAA~~,~~UAECL,~~KACC,~~gBAAAG;AAAA~~,~~YAAC~~;~~AAAA~~,~~YAAA~~;~~AAAA~~,~~cACC~~,~~IAAIR;AAAA~~,~~cACJ~~,~~WAAWO;AAAA,gBACT;AAAA,gBACAN,~~IACI,~~sDACAP~~,IACE,kEACA~~;AAAA~~,~~cAAA~~;~~AAAA~~,~~cAGP,UAAAU;AAAA,YAAA;AAAA,~~UAAA;~~AAAA~~,~~QACH~~;~~AAAA~~,~~MAAA~~;~~AAAA~~,~~IAAA;AAAA,EAIR;AACF;AACArB,~~EAAU,cAAc;"}
1	+ {"version":3,"file":"input-text.js","names":[],"sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { InputBox } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `InputBox` primitive (themed by the `--ui-input-text-` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` ``),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-` tokens — label/required/description/error — so brand\n// overrides are honored; the clear button is a ghost ButtonIcon (glyph\n// `--ui-button-icon-global-icon-color-idle`, since the input-text tier dropped its\n// own clear-icon token in the Figma sync) with a 3px `--ui-focus-primary` ring.\n// `ref` targets the underlying `<input>`; `className` and `style` both target the\n// field wrapper (label + box + message), so sizing the field works the same way\n// whichever one a consumer reaches for.\nexport interface InputTextProps\n extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\n /* Field label, rendered above the input. /\n label?: React.ReactNode;\n /* Marks the field required — appends a `` after the label. /\n required?: boolean;\n /** Helper text below the input. Hidden while `error` is set. /\n description?: React.ReactNode;\n /\n Error message below the input. Its presence switches the field to the error\n * treatment (red box border + red message).\n /\n error?: React.ReactNode;\n /* Show a clear (✕) button while the (controlled) field has a value. /\n clearable?: boolean;\n /* Called when the clear button is activated. /\n onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n (\n {\n className,\n style,\n id,\n label,\n required,\n description,\n error,\n clearable,\n onClear,\n disabled,\n value,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const hasValue = value != null && value !== '';\n const showClear = Boolean(clearable) && hasValue && !disabled;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div\n className={cn(\n 'flex min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]',\n className\n )}\n style={style}\n >\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n : 'text-[var(--ui-input-text-global-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-global-required-color)]\"\n >\n \n </span>\n )}\n </label>\n )}\n\n <div className=\"relative\">\n <InputBox\n ref={ref}\n id={inputId}\n disabled={disabled}\n value={value}\n aria-invalid={hasError \|\| undefined}\n aria-required={required \|\| undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={showClear ? 'pe-9' : undefined}\n {...props}\n />\n {showClear && (\n <button\n type=\"button\"\n onClick={onClear}\n aria-label=\"Clear\"\n className=\"absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n >\n <TimesIcon />\n </button>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"mappings":";;;;;;AAwCA,IAAM,IAAY,EAAM,YAEpB,EACE,cACA,UACA,OACA,UACA,aACA,gBACA,UACA,cACA,YACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM,GAChB,IAAY,GAAG,EAAQ,WAEvB,IAAW,KAAS,QAAQ,MAAU,IAEtC,IAAY,EAAQ,KADT,KAAS,QAAQ,MAAU,MACQ,CAAC,GAC/C,IAAU,IAAW,IAAQ,GAC7B,IAAa,KAAW,QAAQ,MAAY;CAElD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,yHACA,CACF;EACO;EALT,UAAA;GAOG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;IACE,SAAS;IACT,WAAW,EACT,gFACA,IACI,4DACA,qDACN;IAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACX,UAAA;IAEK,CAAA,CAEH;;GAGT,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KACO;KACL,IAAI;KACM;KACH;KACP,gBAAc,KAAY,KAAA;KAC1B,iBAAe,KAAY,KAAA;KAC3B,oBAAkB,IAAa,IAAY,KAAA;KAC3C,WAAW,IAAY,SAAS,KAAA;KAChC,GAAI;IACL,CAAA,GACA,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,cAAW;KACX,WAAU;KAEV,UAAA,kBAAC,GAAD,CAAY,CAAA;IACN,CAAA,CAEP;;GAEJ,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,WAAW,EACT,qBACA,IACI,sDACA,IACE,kEACA,2DACR;IAEC,UAAA;GACA,CAAA;EAEF;;AAET,CACF;AACA,EAAU,cAAc"}

package/dist/components/ui/input-text-area/input-text-area.js CHANGED Viewed

@@ -1,87 +1,42 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import * as c from "react";
 import { cn as e } from "../../../lib/utils.js";
-const I = c.forwardRef(
-  ({
-    className: v,
-    style: p,
-    id: b,
-    label: r,
-    required: d,
-    description: h,
-    error: a,
-    disabled: i,
-    "aria-invalid": m,
-    ...g
-  }, f) => {
-    const w = c.useId(), t = b ?? w, u = `${t}-message`, o = a != null && a !== "", y = o || m, l = o ? a : h, s = l != null && l !== "";
-    return /* @__PURE__ */ x(
-      "div",
-      {
-        className: e(
-          "flex min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]",
-          v
-        ),
-        style: p,
-        children: [
-          r != null && r !== "" && /* @__PURE__ */ x(
-            "label",
-            {
-              htmlFor: t,
-              className: e(
-                "flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4",
-                i ? "text-[var(--ui-input-text-area-label-color-disabled)]" : "text-[var(--ui-input-text-area-label-color-idle)]"
-              ),
-              children: [
-                r,
-                d && /* @__PURE__ */ n(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "text-[var(--ui-input-text-area-required-color)]",
-                    children: "*"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ n(
-            "textarea",
-            {
-              ref: f,
-              id: t,
-              disabled: i,
-              "aria-invalid": y || void 0,
-              "aria-required": d || void 0,
-              "aria-describedby": s ? u : void 0,
-              className: e(
-                "min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]",
-                "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]",
-                "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
-                "aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
-                "disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]"
-              ),
-              ...g
-            }
-          ),
-          s && /* @__PURE__ */ n(
-            "p",
-            {
-              id: u,
-              className: e(
-                "text-xs leading-4",
-                o ? "text-[var(--ui-input-text-area-error-msg-error-color)]" : i ? "text-[var(--ui-input-text-area-description-color-disabled)]" : "text-[var(--ui-input-text-area-description-color-idle)]"
-              ),
-              children: l
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-I.displayName = "InputTextArea";
-export {
-  I as InputTextArea
-};
-//# sourceMappingURL=input-text-area.js.map
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ui/input-text-area/input-text-area.tsx
+var i = t.forwardRef(({ className: i, style: a, id: o, label: s, required: c, description: l, error: u, disabled: d, "aria-invalid": f, ...p }, m) => {
+	let h = t.useId(), g = o ?? h, _ = `${g}-message`, v = u != null && u !== "", y = v || f, b = v ? u : l, x = b != null && b !== "";
+	return /* @__PURE__ */ r("div", {
+		className: e("flex min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]", i),
+		style: a,
+		children: [
+			s != null && s !== "" && /* @__PURE__ */ r("label", {
+				htmlFor: g,
+				className: e("flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4", d ? "text-[var(--ui-input-text-area-label-color-disabled)]" : "text-[var(--ui-input-text-area-label-color-idle)]"),
+				children: [s, c && /* @__PURE__ */ n("span", {
+					"aria-hidden": "true",
+					className: "text-[var(--ui-input-text-area-required-color)]",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ n("textarea", {
+				ref: m,
+				id: g,
+				disabled: d,
+				"aria-invalid": y || void 0,
+				"aria-required": c || void 0,
+				"aria-describedby": x ? _ : void 0,
+				className: e("min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]", "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]", "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]", "aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]", "disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]"),
+				...p
+			}),
+			x && /* @__PURE__ */ n("p", {
+				id: _,
+				className: e("text-xs leading-4", v ? "text-[var(--ui-input-text-area-error-msg-error-color)]" : d ? "text-[var(--ui-input-text-area-description-color-disabled)]" : "text-[var(--ui-input-text-area-description-color-idle)]"),
+				children: b
+			})
+		]
+	});
+});
+i.displayName = "InputTextArea";
+//#endregion
+export { i as InputTextArea };
+//# sourceMappingURL=input-text-area.js.map

package/dist/components/ui/input-text-area/input-text-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-text-area.js","sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputTextArea\" component: a full multiline text field built\n// around a `<textarea>` (themed by the dedicated `--ui-input-text-area-` tier). It\n// adds the field furniture: an optional `label` (with an optional required ``) and\n// an optional `description` or `error` message below. Passing `error` switches the\n// field to its error treatment — the box gets the red error border (via the\n// textarea's `aria-invalid` styling) and the red error message replaces the\n// description. The box fill / border are wired per state: idle / hover / focus\n// (`border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled; the error\n// state (driven by `aria-invalid`) swaps the border to\n// `error-msg-box-border-color-{idle,hover}` and the focus ring to `--ui-focus-error`.\n// Box geometry (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes\n// from `--ui-input-text-area-box-`; it grows with vertical resize. `ref` targets\n// the underlying `<textarea>`; `className` targets the field wrapper (label + box\n// + message), as does `style`, so a consumer can size the whole field from a flex/grid\n// ancestor whichever one they reach for.\n// The bare usage (`<InputTextArea placeholder=… />`, no label) renders just the box.\nexport interface InputTextAreaProps\n extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> {\n /* Field label, rendered above the textarea. /\n label?: React.ReactNode;\n /* Marks the field required — appends a `` after the label. /\n required?: boolean;\n /** Helper text below the textarea. Hidden while `error` is set. /\n description?: React.ReactNode;\n /\n Error message below the textarea. Its presence switches the field to the error\n * treatment (red box border + red message).\n /\n error?: React.ReactNode;\n}\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n (\n {\n className,\n style,\n id,\n label,\n required,\n description,\n error,\n disabled,\n 'aria-invalid': ariaInvalid,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const invalid = hasError \|\| ariaInvalid;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div\n className={cn(\n 'flex min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]',\n className\n )}\n style={style}\n >\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-area-label-color-disabled)]'\n : 'text-[var(--ui-input-text-area-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-area-required-color)]\"\n >\n \n </span>\n )}\n </label>\n )}\n\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-invalid={invalid \|\| undefined}\n aria-required={required \|\| undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={cn(\n 'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]',\n 'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]',\n 'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n 'aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n 'disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]'\n )}\n {...props}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-area-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-area-description-color-disabled)]'\n : 'text-[var(--ui-input-text-area-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","style","id","label","required","description","error","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","jsxs","cn","jsx"],"mappings":"~~;;;~~AAmCA,~~MAAMA~~,~~IAAgBC~~,EAAM~~;AAAA~~,~~EAC1B~~,~~CACE;AAAA~~,~~IACE~~,~~WAAAC;AAAA~~,~~IACA~~,~~OAAAC;AAAA~~,~~IACA~~,~~IAAAC;AAAA~~,~~IACA~~,~~OAAAC;AAAA~~,~~IACA~~,~~UAAAC;AAAA~~,~~IACA~~,~~aAAAC;AAAA~~,~~IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,~~MACG;~~AACH~~,~~UAAMC~~,~~IAAUZ~~,EAAM,~~MAAA~~,~~GAChBa~~,~~IAAUV~~,~~KAAMS~~,~~GAChBE~~,IAAY,~~GAAGD~~,~~CAAO~~,~~YAEtBE~~,~~IAAWR~~,KAAS,~~QAAQA~~,MAAU,~~IACtCS~~,~~IAAUD~~,~~KAAYN~~,~~GACtBQ~~,~~IAAUF~~,~~IAAWR~~,~~IAAQD~~,~~GAC7BY~~,~~IAAaD~~,KAAW,~~QAAQA~~,MAAY;~~AAElD~~,~~WACE~~,~~gBAAAE;AAAA~~,~~MAAC~~;~~AAAA~~,~~MAAA;AAAA~~,~~QACC~~,~~WAAWC;AAAA~~,~~UACT~~;~~AAAA,UACAnB~~;~~AAAA~~,~~QAAA;AAAA,QAEF,OAAAC;AAAA,QAEC,~~UAAA;~~AAAA~~,~~UAAAE,~~KAAS,~~QAAQA~~,MAAU,MAC1B,~~gBAAAe;AAAA~~,~~YAAC~~;~~AAAA~~,~~YAAA~~;~~AAAA~~,~~cACC~~,~~SAASN;AAAA~~,~~cACT~~,~~WAAWO;AAAA,gBACT;AAAA,gBACAZ,~~IACI,0DACA~~;AAAA~~,~~cAAA~~;~~AAAA~~,~~cAGL,~~UAAA~~;AAAA~~,~~gBAAAJ;AAAA~~,~~gBACAC~~,KACC,~~gBAAAgB;AAAA,~~kBAAC~~;AAAA~~,~~kBAAA~~;~~AAAA~~,~~oBACC,~~eAAY;~~AAAA~~,~~oBACZ,~~WAAU;~~AAAA~~,~~oBACX,~~UAAA;~~AAAA~~,~~kBAAA;AAAA~~,~~gBAAA;AAAA~~,~~cAED;AAAA~~,~~YAAA~~;~~AAAA,UAAA~~;~~AAAA~~,~~UAKN,gBAAAA~~;~~AAAA,YAAC~~;~~AAAA~~,~~YAAA;AAAA~~,~~cACC~~,~~KAAAV~~;~~AAAA~~,~~cACA~~,~~IAAIE;AAAA~~,~~cACJ,UAAAL~~;~~AAAA~~,~~cACA~~,~~gBAAcQ~~,~~KAAW;AAAA,cACzB,iBAAeX,KAAY;AAAA,cAC3B,oBAAkBa,IAAaJ,~~IAAY~~;AAAA~~,~~cAC3C,WAAWM~~;~~AAAA~~,~~gBACT;AAAA~~,~~gBACA;AAAA~~,~~gBACA;AAAA~~,~~gBACA;AAAA~~,~~gBACA;AAAA~~,~~cAAA;AAAA~~,~~cAED,GAAGV~~;~~AAAA~~,~~YAAA~~;~~AAAA~~,~~UAAA~~;~~AAAA~~,~~UAGLQ,~~KACC,~~gBAAAG;AAAA~~,~~YAAC~~;~~AAAA~~,~~YAAA~~;~~AAAA~~,~~cACC~~,~~IAAIP;AAAA~~,~~cACJ~~,~~WAAWM;AAAA,gBACT;AAAA,gBACAL,~~IACI,~~2DACAP~~,IACE,gEACA~~;AAAA~~,~~cAAA~~;~~AAAA~~,~~cAGP,UAAAS;AAAA,YAAA;AAAA,~~UAAA;~~AAAA~~,~~QACH~~;~~AAAA~~,~~MAAA~~;~~AAAA~~,~~IAAA;AAAA,EAIR;AACF;AACAlB,~~EAAc,cAAc;"}
1	+ {"version":3,"file":"input-text-area.js","names":[],"sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputTextArea\" component: a full multiline text field built\n// around a `<textarea>` (themed by the dedicated `--ui-input-text-area-` tier). It\n// adds the field furniture: an optional `label` (with an optional required ``) and\n// an optional `description` or `error` message below. Passing `error` switches the\n// field to its error treatment — the box gets the red error border (via the\n// textarea's `aria-invalid` styling) and the red error message replaces the\n// description. The box fill / border are wired per state: idle / hover / focus\n// (`border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled; the error\n// state (driven by `aria-invalid`) swaps the border to\n// `error-msg-box-border-color-{idle,hover}` and the focus ring to `--ui-focus-error`.\n// Box geometry (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes\n// from `--ui-input-text-area-box-`; it grows with vertical resize. `ref` targets\n// the underlying `<textarea>`; `className` targets the field wrapper (label + box\n// + message), as does `style`, so a consumer can size the whole field from a flex/grid\n// ancestor whichever one they reach for.\n// The bare usage (`<InputTextArea placeholder=… />`, no label) renders just the box.\nexport interface InputTextAreaProps\n extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> {\n /* Field label, rendered above the textarea. /\n label?: React.ReactNode;\n /* Marks the field required — appends a `` after the label. /\n required?: boolean;\n /** Helper text below the textarea. Hidden while `error` is set. /\n description?: React.ReactNode;\n /\n Error message below the textarea. Its presence switches the field to the error\n * treatment (red box border + red message).\n /\n error?: React.ReactNode;\n}\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n (\n {\n className,\n style,\n id,\n label,\n required,\n description,\n error,\n disabled,\n 'aria-invalid': ariaInvalid,\n ...props\n },\n ref\n ) => {\n const reactId = React.useId();\n const inputId = id ?? reactId;\n const messageId = `${inputId}-message`;\n\n const hasError = error != null && error !== '';\n const invalid = hasError \|\| ariaInvalid;\n const message = hasError ? error : description;\n const hasMessage = message != null && message !== '';\n\n return (\n <div\n className={cn(\n 'flex min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]',\n className\n )}\n style={style}\n >\n {label != null && label !== '' && (\n <label\n htmlFor={inputId}\n className={cn(\n 'flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4',\n disabled\n ? 'text-[var(--ui-input-text-area-label-color-disabled)]'\n : 'text-[var(--ui-input-text-area-label-color-idle)]'\n )}\n >\n {label}\n {required && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--ui-input-text-area-required-color)]\"\n >\n \n </span>\n )}\n </label>\n )}\n\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n aria-invalid={invalid \|\| undefined}\n aria-required={required \|\| undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n className={cn(\n 'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]',\n 'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]',\n 'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n 'aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n 'disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]'\n )}\n {...props}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cn(\n 'text-xs leading-4',\n hasError\n ? 'text-[var(--ui-input-text-area-error-msg-error-color)]'\n : disabled\n ? 'text-[var(--ui-input-text-area-description-color-disabled)]'\n : 'text-[var(--ui-input-text-area-description-color-idle)]'\n )}\n >\n {message}\n </p>\n )}\n </div>\n );\n }\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"mappings":";;;;AAmCA,IAAM,IAAgB,EAAM,YAExB,EACE,cACA,UACA,OACA,UACA,aACA,gBACA,UACA,aACA,gBAAgB,GAChB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM,GAChB,IAAY,GAAG,EAAQ,WAEvB,IAAW,KAAS,QAAQ,MAAU,IACtC,IAAU,KAAY,GACtB,IAAU,IAAW,IAAQ,GAC7B,IAAa,KAAW,QAAQ,MAAY;CAElD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,qHACA,CACF;EACO;EALT,UAAA;GAOG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;IACE,SAAS;IACT,WAAW,EACT,8EACA,IACI,0DACA,mDACN;IAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACX,UAAA;IAEK,CAAA,CAEH;;GAGT,kBAAC,YAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,KAAW,KAAA;IACzB,iBAAe,KAAY,KAAA;IAC3B,oBAAkB,IAAa,IAAY,KAAA;IAC3C,WAAW,EACT,ohBACA,wUACA,oKACA,qWACA,0SACF;IACA,GAAI;GACL,CAAA;GAEA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,WAAW,EACT,qBACA,IACI,2DACA,IACE,gEACA,yDACR;IAEC,UAAA;GACA,CAAA;EAEF;;AAET,CACF;AACA,EAAc,cAAc"}

package/dist/components/ui/label/label.js CHANGED Viewed

@@ -1,5 +1,6 @@
-const e = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-export {
-  e as labelClassName
-};
-//# sourceMappingURL=label.js.map
+//#region src/components/ui/label/label.tsx
+var e = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+//#endregion
+export { e as labelClassName };
+//# sourceMappingURL=label.js.map

package/dist/components/ui/label/label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"label.js","sources":["../../../../src/components/ui/label/label.tsx"],"sourcesContent":["// The caption typography for a form control, consumed by `Field`'s label part.\n// Text color is inherited (`text-foreground` from context), so no\n// `--ui-label-` tier is needed. `peer-disabled:` dims the label when an\n// associated `peer`-marked control is disabled.\nexport const labelClassName =\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';\n"],"~~names":["labelClassName"],"~~mappings":"~~AAIO~~,~~MAAMA~~,IACX;"}
1	+ {"version":3,"file":"label.js","names":[],"sources":["../../../../src/components/ui/label/label.tsx"],"sourcesContent":["// The caption typography for a form control, consumed by `Field`'s label part.\n// Text color is inherited (`text-foreground` from context), so no\n// `--ui-label-` tier is needed. `peer-disabled:` dims the label when an\n// associated `peer`-marked control is disabled.\nexport const labelClassName =\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';\n"],"mappings":";AAIA,IAAa,IACX"}