@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/input/input.d.ts

@@ -1,13 +1,15 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
+import "../core/index.js";
 import { InputProps } from "./input.types.js";
 import { HelpText } from "./helpText.js";
 import { InputIcon } from "./inputIcon.js";
 import { InputInput } from "./inputInput.js";
-import * as styled_components435 from "styled-components";
+import "../index.js";
+import * as styled_components396 from "styled-components";
 
 //#region src/input/input.d.ts
-declare const InputBase: styled_components435.StyledComponent<"div", styled_components435.DefaultTheme, SystemProps, never>;
+declare const InputBase: styled_components396.StyledComponent<"div", styled_components396.DefaultTheme, SystemProps, never>;
 /**
  * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
  * Forwards many relevant props to the inner input. Handles different states, like loading or error.

package/dist/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBA0BrB,oBAAA,CA1BqB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;AAAtB,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,QAAA,CAAA,GAAA,CAAA,OAAA;;AA0BC,OAAA,CAAA,KAAA,CAOY,KAPZ,CAAA,CA4MK,YAtOgB,CAAA,CAAA,GAAA,CAAA,CAAA,CAsOI,UAtOJ,CAAA,CAAA,CAAA,CAAA;MAAA,CAAA,CAAA,MAAA,CAuOP,SAvOO;OAAA,CAAA,CAAA,MAAA,CAwON,UAxOM;EAAA,QAAA,CAAA,CAAA,MAAA,CAyOH,QAzOG;AAiCtB,CAAA"}
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/input/input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cA0Ba,WAAS,oBAAA,CAAA,uBA0BrB,oBAAA,CA1BqB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;;;AAAT,OAAA,CAAA,KAAA,CAiCA,KAPZ,CAAA,CA4MK,YA5ML,CAAA,CAAA,GAAA,CAAA,CAAA,CA4MyB,UA5MzB,CAAA,CAAA,CAAA,CAAA;EAAA,IAAA,CAAA,CAAA,MAAA,CA6Mc,SAvOO;EAAA,KAAA,CAAA,CAAA,MAAA,CAwON,UAxOM;EAAA,QAAA,CAAA,CAAA,MAAA,CAyOH,QAzOG;CAAA"}

package/dist/input/input.js

@@ -1,4 +1,25 @@
-import{isString as e}from"../utils/assertion.js";import{filterUndefined as t}from"../utils/object.js";import{cs as n}from"../utils/styles.js";import{clearIconSize as r,displayValueOnlyTextSize as ee,helpTextMargin as te,helpTextSize as i,inputColors as a,inputStateMapping as ne}from"./consts.js";import{useStyleConfig as re}from"../core/theme.js";import{styled as o}from"../core/styled.js";import{vui as s}from"../core/vui.js";import c from"../box/box.js";import{T as l}from"../t/t.js";import{IconButton as ie}from"../button/buttons.js";import{InputProvider as ae}from"./context.js";import u from"./helpText.js";import oe from"../label/label.js";import se from"./autoCompletePopover.js";import{getInitialCount as ce}from"./helpers.js";import d from"./inputIcon.js";import f from"./inputInput.js";import{useEffect as le,useId as p,useMemo as m,useState as h}from"react";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=o.divBox`
+import { isString } from "../utils/assertion.js";
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { clearIconSize, displayValueOnlyTextSize, helpTextMargin, helpTextSize, inputColors, inputStateMapping } from "./consts.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import box_default from "../box/box.js";
+import { T } from "../t/t.js";
+import { IconButton } from "../button/buttons.js";
+import { InputProvider } from "./context.js";
+import helpText_default from "./helpText.js";
+import label_default from "../label/label.js";
+import autoCompletePopover_default from "./autoCompletePopover.js";
+import { getInitialCount } from "./helpers.js";
+import inputIcon_default from "./inputIcon.js";
+import inputInput_default from "./inputInput.js";
+import { useEffect, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/input/input.tsx
+const InputBase = styled.divBox`
   align-items: center;
   color: sandstone.10;
   background-color: white;
@@ -24,5 +45,183 @@ import{isString as e}from"../utils/assertion.js";import{filterUndefined as t}fro
       fill: sandstone.50;
     }
   }
-`,y=s((o,s)=>{let{allowClear:y,ariaLabel:b,autoComplete:ue,autoCompleteMaxHeight:de,autoCompleteOptions:x,autoFocus:fe,children:pe,className:S,defaultValue:C,disabled:w,displayValueOnly:me,errorText:T,helpText:E,iconLeft:D,iconRight:O,id:k,input:A,inputProps:j,inputRef:M,itemLeft:N,itemRight:P,label:F,labelMarkOptional:I,labelTooltipText:L,max:R,maxLength:z,min:he,minLength:ge,name:_e,onBlur:ve,onChange:ye,onFocus:be,pattern:xe,placeholder:Se,readOnly:B,required:Ce,showCount:V,size:H=`lg`,state:U=``,stateMapping:we,step:Te,type:Ee=`text`,value:W,variant:G,...De}=o,K=p(),[q,J]=h(ce(o)),[Y,X]=h(C||``),Oe={...ne,...we},Z=k||K,Q=re(`Input`,o),ke=m(()=>t({disabled:w,size:H,variant:G}),[w,H,G]);function $(e){let t=e.target.value,n=z?t.slice(0,z):t;X(n),J(n?.length),ye?.(e)}function Ae(e){$({target:{value:e},type:`autoCompleteSelect`})}function je(){X(``),J(0),$({target:{value:``},type:`onClear`})}let Me=t({"aria-disabled":w,bg:B?`sandstone.97`:void 0,borderColor:B?`sandstone.55`:void 0,focusWithinBorderColor:B?void 0:`transparent`,focusWithinRingColor:B?`transparent`:void 0});return le(()=>{W===void 0&&C!==void 0||(X(W??``),J(W?.toString()?.length?`${W}`.length:0))},[W]),g(ae,{value:ke,children:me?g(l,{className:n(`vui-input-value`,S),size:ee[H],children:W||C}):g(se,{autoCompleteMaxHeight:de,autoCompleteOptions:x,filterAutoCompleteOptions:e=>Y===e?!1:!Y||e.toLowerCase().includes(`${Y}`.toLowerCase()),onAutoCompleteSelect:Ae,children:_(c,{className:`vui-inputContainer`,column:!0,ref:s,...De,children:[e(F)?g(oe,{"aria-disabled":w,className:`vui-inputLabel`,htmlFor:Z,markAsOptional:I,mb:.5,text:F,tooltipText:L,...Q.label}):F,_(v,{className:n(`vui-input`,S),...Q.container,...Me,children:[N,e(D)?g(d,{ml:1,name:D}):D,pe??A??g(f,{ref:M,autoFocus:fe,ariaLabel:b,disabled:w,id:Z,max:R,maxLength:z,min:he,minLength:ge,name:_e,onBlur:ve,onChange:$,onFocus:be,pattern:xe,placeholder:Se,readOnly:B,required:Ce,step:Te,type:Ee,autoComplete:x?.length?`off`:ue,value:Y,...j}),e(O)?g(d,{mr:1,name:O}):O,P,U&&g(d,{mr:1,...Oe[U]?.iconProps}),y&&g(ie,{disabled:!Y,icon:`uiTimes`,mr:.5,onClick:je,size:r[H],title:`Clear`}),V&&_(l,{className:`vui-inputCount`,color:z&&q>z?a.error:a.helpText,position:`absolute`,right:0,size:`sm`,top:`calc(100% + 1px)`,children:[q,` `,z?`/ ${z}`:null]})]}),!!E&&g(u,{size:i[H],children:E}),!!T&&g(u,{isError:!0,mr:V?te:void 0,size:i[H],children:T})]})})})});y.Icon=d,y.Input=f,y.HelpText=u,y.displayName=`Input`;var b=y;export{y as Input,v as InputBase,b as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
+* Forwards many relevant props to the inner input. Handles different states, like loading or error.
+* Exposes some props to the children via context.
+*/
+const Input = vui((props, ref) => {
+	const { allowClear, ariaLabel, autoComplete, autoCompleteMaxHeight, autoCompleteOptions, autoFocus, children, className, defaultValue, disabled, displayValueOnly, errorText, helpText, iconLeft, iconRight, id: idProp, input, inputProps, inputRef, itemLeft, itemRight, label, labelMarkOptional, labelTooltipText, max, maxLength, min, minLength, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size = "lg", state = "", stateMapping, step, type = "text", value, variant,...rest } = props;
+	const generatedId = useId();
+	const [count, setCount] = useState(getInitialCount(props));
+	const [valueInternal, setValueInternal] = useState(defaultValue || "");
+	const states = {
+		...inputStateMapping,
+		...stateMapping
+	};
+	const id = idProp || generatedId;
+	const styles = useStyleConfig("Input", props);
+	const context = useMemo(() => filterUndefined({
+		disabled,
+		size,
+		variant
+	}), [
+		disabled,
+		size,
+		variant
+	]);
+	function onChange(e) {
+		const inputValue = e.target.value;
+		const value$1 = maxLength ? inputValue.slice(0, maxLength) : inputValue;
+		setValueInternal(value$1);
+		setCount(value$1?.length);
+		onChangeProp?.(e);
+	}
+	function onAutoCompleteSelect(value$1) {
+		onChange({
+			target: { value: value$1 },
+			type: "autoCompleteSelect"
+		});
+	}
+	function onClear() {
+		const value$1 = "";
+		const e = {
+			target: { value: value$1 },
+			type: "onClear"
+		};
+		setValueInternal(value$1);
+		setCount(0);
+		onChange(e);
+	}
+	const aliasedProps = filterUndefined({
+		"aria-disabled": disabled,
+		bg: readOnly ? "sandstone.97" : void 0,
+		borderColor: readOnly ? "sandstone.55" : void 0,
+		focusWithinBorderColor: !readOnly ? "transparent" : void 0,
+		focusWithinRingColor: readOnly ? "transparent" : void 0
+	});
+	useEffect(() => {
+		if (value === void 0 && defaultValue !== void 0) return;
+		setValueInternal(value ?? "");
+		setCount(value?.toString()?.length ? `${value}`.length : 0);
+	}, [value]);
+	const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
+	return /* @__PURE__ */ jsx(InputProvider, {
+		value: context,
+		children: displayValueOnly ? /* @__PURE__ */ jsx(T, {
+			className: cs("vui-input-value", className),
+			size: displayValueOnlyTextSize[size],
+			children: value || defaultValue
+		}) : /* @__PURE__ */ jsx(autoCompletePopover_default, {
+			autoCompleteMaxHeight,
+			autoCompleteOptions,
+			filterAutoCompleteOptions,
+			onAutoCompleteSelect,
+			children: /* @__PURE__ */ jsxs(box_default, {
+				className: "vui-inputContainer",
+				column: true,
+				ref,
+				...rest,
+				children: [
+					isString(label) ? /* @__PURE__ */ jsx(label_default, {
+						"aria-disabled": disabled,
+						className: "vui-inputLabel",
+						htmlFor: id,
+						markAsOptional: labelMarkOptional,
+						mb: .5,
+						text: label,
+						tooltipText: labelTooltipText,
+						...styles.label
+					}) : label,
+					/* @__PURE__ */ jsxs(InputBase, {
+						className: cs("vui-input", className),
+						...styles.container,
+						...aliasedProps,
+						children: [
+							itemLeft,
+							isString(iconLeft) ? /* @__PURE__ */ jsx(inputIcon_default, {
+								ml: 1,
+								name: iconLeft
+							}) : iconLeft,
+							children ?? input ?? /* @__PURE__ */ jsx(inputInput_default, {
+								ref: inputRef,
+								autoFocus,
+								ariaLabel,
+								disabled,
+								id,
+								max,
+								maxLength,
+								min,
+								minLength,
+								name,
+								onBlur,
+								onChange,
+								onFocus,
+								pattern,
+								placeholder,
+								readOnly,
+								required,
+								step,
+								type,
+								autoComplete: autoCompleteOptions?.length ? "off" : autoComplete,
+								value: valueInternal,
+								...inputProps
+							}),
+							isString(iconRight) ? /* @__PURE__ */ jsx(inputIcon_default, {
+								mr: 1,
+								name: iconRight
+							}) : iconRight,
+							itemRight,
+							state && /* @__PURE__ */ jsx(inputIcon_default, {
+								mr: 1,
+								...states[state]?.iconProps
+							}),
+							allowClear && /* @__PURE__ */ jsx(IconButton, {
+								disabled: !valueInternal,
+								icon: "uiTimes",
+								mr: .5,
+								onClick: onClear,
+								size: clearIconSize[size],
+								title: "Clear"
+							}),
+							showCount && /* @__PURE__ */ jsxs(T, {
+								className: "vui-inputCount",
+								color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText,
+								position: "absolute",
+								right: 0,
+								size: "sm",
+								top: "calc(100% + 1px)",
+								children: [
+									count,
+									" ",
+									maxLength ? `/ ${maxLength}` : null
+								]
+							})
+						]
+					}),
+					!!helpText && /* @__PURE__ */ jsx(helpText_default, {
+						size: helpTextSize[size],
+						children: helpText
+					}),
+					!!errorText && /* @__PURE__ */ jsx(helpText_default, {
+						isError: true,
+						mr: showCount ? helpTextMargin : void 0,
+						size: helpTextSize[size],
+						children: errorText
+					})
+				]
+			})
+		})
+	});
+});
+Input.Icon = inputIcon_default;
+Input.Input = inputInput_default;
+Input.HelpText = helpText_default;
+Input.displayName = "Input";
+var input_default = Input;
+
+//#endregion
+export { Input, InputBase, input_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=input.js.map

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["value","AutoCompletePopover","Box","Label","InputIcon","InputInput","HelpText"],"sources":["../../src/input/input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Label from '../label'\nimport { T } from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport AutoCompletePopover from './autoCompletePopover'\nimport {\n  clearIconSize,\n  displayValueOnlyTextSize,\n  helpTextMargin,\n  helpTextSize,\n  inputColors,\n  inputStateMapping,\n} from './consts'\nimport { InputProvider } from './context'\nimport { getInitialCount } from './helpers'\nimport HelpText from './helpText'\nimport type { InputProps } from './input.types'\nimport InputIcon from './inputIcon'\nimport InputInput from './inputInput'\n\nexport const InputBase = styled.divBox`\n  align-items: center;\n  color: sandstone.10;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: 0s;\n  transform: translate3d(0, 0, 0);\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n    & > .vui-icon {\n      color: sandstone.50;\n    }\n    & > .vui-icon > path {\n      fill: sandstone.50;\n    }\n  }\n`\n\n/**\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const Input = vui<'div', InputProps>((props, ref) => {\n  const {\n    allowClear,\n    ariaLabel,\n    autoComplete,\n    autoCompleteMaxHeight,\n    autoCompleteOptions,\n    autoFocus,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    displayValueOnly,\n    errorText,\n    helpText,\n    iconLeft,\n    iconRight,\n    id: idProp,\n    input,\n    inputProps,\n    inputRef,\n    itemLeft,\n    itemRight,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    max,\n    maxLength,\n    min,\n    minLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    pattern,\n    placeholder,\n    readOnly,\n    required,\n    showCount,\n    size = 'lg',\n    state = '',\n    stateMapping,\n    step,\n    type = 'text',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue || '')\n  const states = { ...inputStateMapping, ...stateMapping }\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', props)\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  function onChange(e: ChangeEvent) {\n    const inputValue = e.target.value\n\n    // Limit input length if maxLength is set\n    const value = maxLength ? inputValue.slice(0, maxLength) : inputValue\n\n    setValueInternal(value)\n    setCount(value?.length)\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    const e = { target: { value }, type: 'autoCompleteSelect' }\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  function onClear() {\n    const value = ''\n    const e = { target: { value }, type: 'onClear' }\n    setValueInternal(value)\n    setCount(0)\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) =>\n    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())\n\n  return (\n    <InputProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <AutoCompletePopover\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-inputContainer\" column ref={ref} {...rest}>\n            {isString(label) ? (\n              <Label\n                aria-disabled={disabled}\n                className=\"vui-inputLabel\"\n                htmlFor={id}\n                markAsOptional={labelMarkOptional}\n                mb={0.5}\n                text={label}\n                tooltipText={labelTooltipText}\n                {...styles.label}\n              />\n            ) : (\n              label\n            )}\n            <InputBase className={cs('vui-input', className)} {...styles.container} {...aliasedProps}>\n              {itemLeft}\n              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}\n              {children ?? input ?? (\n                <InputInput\n                  ref={inputRef}\n                  {...{\n                    autoFocus,\n                    ariaLabel,\n                    disabled,\n                    id,\n                    max,\n                    maxLength,\n                    min,\n                    minLength,\n                    name,\n                    onBlur,\n                    onChange,\n                    onFocus,\n                    pattern,\n                    placeholder,\n                    readOnly,\n                    required,\n                    step,\n                    type,\n                  }}\n                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}\n                  value={valueInternal}\n                  {...inputProps}\n                />\n              )}\n              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}\n              {itemRight}\n              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}\n              {allowClear && (\n                <IconButton\n                  disabled={!valueInternal}\n                  icon=\"uiTimes\"\n                  mr={0.5}\n                  onClick={onClear}\n                  size={clearIconSize[size]}\n                  title=\"Clear\"\n                />\n              )}\n              {showCount && (\n                <T\n                  className=\"vui-inputCount\"\n                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n                  position=\"absolute\"\n                  right={0}\n                  size=\"sm\"\n                  top=\"calc(100% + 1px)\"\n                >\n                  {count} {maxLength ? `/ ${maxLength}` : null}\n                </T>\n              )}\n            </InputBase>\n            {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n            {!!errorText && (\n              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>\n                {errorText}\n              </HelpText>\n            )}\n          </Box>\n        </AutoCompletePopover>\n      )}\n    </InputProvider>\n  )\n}) as VuiComponent<'div', InputProps> & {\n  Icon: typeof InputIcon\n  Input: typeof InputInput\n  HelpText: typeof HelpText\n}\n\nInput.Icon = InputIcon\nInput.Input = InputInput\nInput.HelpText = HelpText\nInput.displayName = 'Input'\n\nexport default Input\n"],"mappings":"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"}
+{"version":3,"file":"input.js","names":["value","AutoCompletePopover","Box","Label","InputIcon","InputInput","HelpText"],"sources":["../../src/input/input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Label from '../label'\nimport { T } from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined, isString } from '../utils'\nimport AutoCompletePopover from './autoCompletePopover'\nimport {\n  clearIconSize,\n  displayValueOnlyTextSize,\n  helpTextMargin,\n  helpTextSize,\n  inputColors,\n  inputStateMapping,\n} from './consts'\nimport { InputProvider } from './context'\nimport { getInitialCount } from './helpers'\nimport HelpText from './helpText'\nimport type { InputProps } from './input.types'\nimport InputIcon from './inputIcon'\nimport InputInput from './inputInput'\n\nexport const InputBase = styled.divBox`\n  align-items: center;\n  color: sandstone.10;\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  outline: none;\n  position: relative;\n  transition-duration: 0s;\n  transform: translate3d(0, 0, 0);\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n    & > .vui-icon {\n      color: sandstone.50;\n    }\n    & > .vui-icon > path {\n      fill: sandstone.50;\n    }\n  }\n`\n\n/**\n * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Forwards many relevant props to the inner input. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const Input = vui<'div', InputProps>((props, ref) => {\n  const {\n    allowClear,\n    ariaLabel,\n    autoComplete,\n    autoCompleteMaxHeight,\n    autoCompleteOptions,\n    autoFocus,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    displayValueOnly,\n    errorText,\n    helpText,\n    iconLeft,\n    iconRight,\n    id: idProp,\n    input,\n    inputProps,\n    inputRef,\n    itemLeft,\n    itemRight,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    max,\n    maxLength,\n    min,\n    minLength,\n    name,\n    onBlur,\n    onChange: onChangeProp,\n    onFocus,\n    pattern,\n    placeholder,\n    readOnly,\n    required,\n    showCount,\n    size = 'lg',\n    state = '',\n    stateMapping,\n    step,\n    type = 'text',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const [count, setCount] = useState(getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(defaultValue || '')\n  const states = { ...inputStateMapping, ...stateMapping }\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', props)\n\n  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])\n\n  function onChange(e: ChangeEvent) {\n    const inputValue = e.target.value\n\n    // Limit input length if maxLength is set\n    const value = maxLength ? inputValue.slice(0, maxLength) : inputValue\n\n    setValueInternal(value)\n    setCount(value?.length)\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    const e = { target: { value }, type: 'autoCompleteSelect' }\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  function onClear() {\n    const value = ''\n    const e = { target: { value }, type: 'onClear' }\n    setValueInternal(value)\n    setCount(0)\n    onChange(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    bg: readOnly ? 'sandstone.97' : undefined,\n    borderColor: readOnly ? 'sandstone.55' : undefined,\n    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,\n    focusWithinRingColor: readOnly ? 'transparent' : undefined,\n  })\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) =>\n    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())\n\n  return (\n    <InputProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <AutoCompletePopover\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-inputContainer\" column ref={ref} {...rest}>\n            {isString(label) ? (\n              <Label\n                aria-disabled={disabled}\n                className=\"vui-inputLabel\"\n                htmlFor={id}\n                markAsOptional={labelMarkOptional}\n                mb={0.5}\n                text={label}\n                tooltipText={labelTooltipText}\n                {...styles.label}\n              />\n            ) : (\n              label\n            )}\n            <InputBase className={cs('vui-input', className)} {...styles.container} {...aliasedProps}>\n              {itemLeft}\n              {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}\n              {children ?? input ?? (\n                <InputInput\n                  ref={inputRef}\n                  {...{\n                    autoFocus,\n                    ariaLabel,\n                    disabled,\n                    id,\n                    max,\n                    maxLength,\n                    min,\n                    minLength,\n                    name,\n                    onBlur,\n                    onChange,\n                    onFocus,\n                    pattern,\n                    placeholder,\n                    readOnly,\n                    required,\n                    step,\n                    type,\n                  }}\n                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}\n                  value={valueInternal}\n                  {...inputProps}\n                />\n              )}\n              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}\n              {itemRight}\n              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}\n              {allowClear && (\n                <IconButton\n                  disabled={!valueInternal}\n                  icon=\"uiTimes\"\n                  mr={0.5}\n                  onClick={onClear}\n                  size={clearIconSize[size]}\n                  title=\"Clear\"\n                />\n              )}\n              {showCount && (\n                <T\n                  className=\"vui-inputCount\"\n                  color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}\n                  position=\"absolute\"\n                  right={0}\n                  size=\"sm\"\n                  top=\"calc(100% + 1px)\"\n                >\n                  {count} {maxLength ? `/ ${maxLength}` : null}\n                </T>\n              )}\n            </InputBase>\n            {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n            {!!errorText && (\n              <HelpText isError mr={showCount ? helpTextMargin : undefined} size={helpTextSize[size]}>\n                {errorText}\n              </HelpText>\n            )}\n          </Box>\n        </AutoCompletePopover>\n      )}\n    </InputProvider>\n  )\n}) as VuiComponent<'div', InputProps> & {\n  Icon: typeof InputIcon\n  Input: typeof InputInput\n  HelpText: typeof HelpText\n}\n\nInput.Icon = InputIcon\nInput.Input = InputInput\nInput.HelpText = HelpText\nInput.displayName = 'Input'\n\nexport default Input\n"],"mappings":"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"}

package/dist/input/input.types.d.ts

@@ -1,8 +1,12 @@
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from "../utils/types.js";
+import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { PProps } from "../p/p.types.js";
+import "../p/index.js";
 
 //#region src/input/input.types.d.ts
 type InputInputProps = PropsOf<'input', SystemProps>;

package/dist/input/input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAMY,eAAA,CAAA,CAAA,CAAkB,iBAAiB;KACnC,UAAA,CAAA,CAAA,CAAa,cACvB;EAFU,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,OAAA,CAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAe,UAAA,CAAA,CAAA,CAAA,OAAA;;cAAG,CAAA,CAAA,CAAA,MAAA;EAAO,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,YAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EACzB,mBAAU,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA;EAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,YAAA,CAAA,SAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAA;uBAAG,CAAA,CAAA,CAAA,MAAA;;WAqBM,CAAA,CAAA,CAAA,OAAA;;WAIhB,CAAA,CAAA,CAAA,MAAA;;aAEC,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;cAEE,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA;;UAIoB,CAAA,CAAA,CAAA,OAAA;;WAIjB,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAhBI,KAAA,CAAM,SAgBV;;UAIA,CAAM,CAAA,CAlBZ,KAAA,CAAM,SAkBM,CAAA,CAAA,CAAA,MAAA;;UAkBZ,CAAA,CAAA,CAlCA,QAkCA,CAAA,CAAA,CAlCW,GAAA,CAAI,OAkCf;;WAgBH,CAAA,CAAA,CAhDI,QAgDJ,CAAA,CAAA,CAhDe,GAAA,CAAI,OAgDnB;;OAMD,CAAA,CAAA,CApDC,KAAA,CAAM,SAoDP;EAAS,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAKR,UAAA,CAAA,CAAA,CAvDK,eAuDmB;EAYxB,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAIA,QAAA,CAAA,CAAA,CArEG,KAAA,CAAM,gBAqEC,CArEgB,gBAqEhB,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAEV,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,KAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,UAAA,CAAA;EAAiB,SAAA,CAAA,CAAA,CAAA,OAAA;;UAId,CAAA,CAAA,CAvEA,KAAA,CAAM,SAuEN;;EAJuB,SAAA,CAAA,CAAA,CAjEtB,KAAA,CAAM,SAiEgB;EAQ1B,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;mBAvES,KAAA,CAAM;;;;;;;;;;;;;;;;WAgBd;;aAEE;;YAED;;;;;;;;;;;;;;UAcF;;iBAEO;;;;SAIR;;;;KAKC,wBAAA,CAAA,CAAA;;;;;;YAMA,GAAA,CAAI;;;;;KAMJ,aAAA,CAAA,CAAA,CAAgB;;;KAIhB,UAAA,CAAA,CAAA;KAEA,iBAAA,CAAA,CAAA,CAAoB;YAGlB;aACC;;KAIH,SAAA,CAAA,CAAA"}
+{"version":3,"file":"input.types.d.ts","names":[],"sources":["../../src/input/input.types.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/input/inputIcon.d.ts

@@ -1,5 +1,7 @@
 import { IconProps } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { VuiComponent } from "../core/vui.js";
+import "../index.js";
 
 //#region src/input/inputIcon.d.ts
 /** Displays an icon within the Input. */

package/dist/input/inputIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputIcon.d.ts","names":[],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,WAAS,oBAAA"}
+{"version":3,"file":"inputIcon.d.ts","names":[],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,WAAS,oBAAA"}

package/dist/input/inputIcon.js

@@ -1,2 +1,29 @@
-import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import r from"../icon/icon.js";import{useInputContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,l=t(`Input`,{...i(),...n});return a(r,{className:e(`vui-inputIcon`,s),ref:o,...l.icon,...c})});o.displayName=`InputIcon`;var s=o;export{o as InputIcon,s as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { vui } from "../core/vui.js";
+import icon_default from "../icon/icon.js";
+import { useInputContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/input/inputIcon.tsx
+/** Displays an icon within the Input. */
+const InputIcon = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("Input", {
+		...useInputContext(),
+		...props
+	});
+	return /* @__PURE__ */ jsx(icon_default, {
+		className: cs("vui-inputIcon", className),
+		ref,
+		...styles.icon,
+		...rest
+	});
+});
+InputIcon.displayName = "InputIcon";
+var inputIcon_default = InputIcon;
+
+//#endregion
+export { InputIcon, inputIcon_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=inputIcon.js.map

package/dist/input/inputIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputIcon.js","names":["Icon"],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useInputContext } from './context'\n\n/** Displays an icon within the Input. */\nexport const InputIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  return <Icon className={cs('vui-inputIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nInputIcon.displayName = 'InputIcon'\n\nexport default InputIcon\n"],"mappings":"qPAOA,MAAa,EAAY,GAAuB,EAAO,IAAQ,CAC7D,GAAM,CAAE,YAAW,GAAG,GAAS,EAGzB,EAAS,EAAe,QADV,CAAE,GADH,GAAiB,CACC,GAAG,EAAO,CACI,CAEnD,OAAO,EAACA,EAAAA,CAAK,UAAW,EAAG,gBAAiB,EAAU,CAAO,MAAK,GAAI,EAAO,KAAM,GAAI,GAAQ,EAC/F,CAEF,EAAU,YAAc,YAExB,IAAA,EAAe"}
+{"version":3,"file":"inputIcon.js","names":["Icon"],"sources":["../../src/input/inputIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useInputContext } from './context'\n\n/** Displays an icon within the Input. */\nexport const InputIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  return <Icon className={cs('vui-inputIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nInputIcon.displayName = 'InputIcon'\n\nexport default InputIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,YAAY,KAAuB,OAAO,QAAQ;CAC7D,MAAM,EAAE,UAAW,GAAG,SAAS;CAG/B,MAAM,SAAS,eAAe,SADV;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO,CACI;AAEnD,QAAO,oBAACA;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC/F;AAEF,UAAU,cAAc;AAExB,wBAAe"}

package/dist/input/inputInput.d.ts

@@ -1,9 +1,10 @@
 import { VuiComponent } from "../core/vui.js";
 import { InputInputProps } from "./input.types.js";
-import * as styled_components434 from "styled-components";
+import "../index.js";
+import * as styled_components395 from "styled-components";
 
 //#region src/input/inputInput.d.ts
-declare const InputInputBase: styled_components434.StyledComponent<"input", any, {}, never>;
+declare const InputInputBase: styled_components395.StyledComponent<"input", any, {}, never>;
 /** Displays an input element within the Input component. */
 declare const InputInput: VuiComponent<"input", InputInputProps>;
 //#endregion

package/dist/input/inputInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.d.ts","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":[],"mappings":";;;;;cAKa,gBAgBZ,oBAAA,CAhB0B;;cAmBd,YAAU,sBAAA"}
+{"version":3,"file":"inputInput.d.ts","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKa,gBAgBZ,oBAAA,CAhB0B;;cAmBd,YAAU,sBAAA"}

package/dist/input/inputInput.js

@@ -1,4 +1,13 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import{useInputContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=r.input`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { useInputContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/input/inputInput.tsx
+const InputInputBase = styled.input`
   align-self: stretch;
   color: sandstone.10;
   background-color: transparent;
@@ -14,5 +23,32 @@ import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../util
   &[aria-disabled='true']::placeholder {
     cursor: not-allowed;
   }
-`,c=i((r,i)=>{let{className:c,autoComplete:l,...u}=r,d={...a(),...r},f=n(`Input`,d),p=e({"aria-disabled":d.disabled,"aria-label":d.ariaLabel});return o(s,{autoComplete:l,className:t(`vui-inputInput`,c),ref:i,...f.input,...p,...u})});c.displayName=`InputInput`;var l=c;export{c as InputInput,s as InputInputBase,l as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/** Displays an input element within the Input component. */
+const InputInput = vui((props, ref) => {
+	const { className, autoComplete,...rest } = props;
+	const mergedProps = {
+		...useInputContext(),
+		...props
+	};
+	const styles = useStyleConfig("Input", mergedProps);
+	const aliasedProps = filterUndefined({
+		"aria-disabled": mergedProps.disabled,
+		"aria-label": mergedProps.ariaLabel
+	});
+	return /* @__PURE__ */ jsx(InputInputBase, {
+		autoComplete,
+		className: cs("vui-inputInput", className),
+		ref,
+		...styles.input,
+		...aliasedProps,
+		...rest
+	});
+});
+InputInput.displayName = "InputInput";
+var inputInput_default = InputInput;
+
+//#endregion
+export { InputInput, InputInputBase, inputInput_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=inputInput.js.map

package/dist/input/inputInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputInput.js","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { useInputContext } from './context'\nimport type { InputInputProps } from './input.types'\n\nexport const InputInputBase = styled.input`\n  align-self: stretch;\n  color: sandstone.10;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 1;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\n/** Displays an input element within the Input component. */\nexport const InputInput = vui<'input', InputInputProps>((props, ref) => {\n  const { className, autoComplete, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': mergedProps.disabled,\n    'aria-label': mergedProps.ariaLabel,\n  })\n\n  return (\n    <InputInputBase\n      autoComplete={autoComplete}\n      className={cs('vui-inputInput', className)}\n      ref={ref}\n      {...styles.input}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nInputInput.displayName = 'InputInput'\n\nexport default InputInput\n"],"mappings":"sTAKA,MAAa,EAAiB,EAAO,KAAK;;;;;;;;;;;;;;;;EAmB7B,EAAa,GAA+B,EAAO,IAAQ,CACtE,GAAM,CAAE,YAAW,eAAc,GAAG,GAAS,EAEvC,EAAc,CAAE,GADH,GAAiB,CACC,GAAG,EAAO,CACzC,EAAS,EAAe,QAAS,EAAY,CAC7C,EAAe,EAAgB,CACnC,gBAAiB,EAAY,SAC7B,aAAc,EAAY,UAC3B,CAAC,CAEF,OACE,EAAC,EAAA,CACe,eACd,UAAW,EAAG,iBAAkB,EAAU,CACrC,MACL,GAAI,EAAO,MACX,GAAI,EACJ,GAAI,GACJ,EAEJ,CAEF,EAAW,YAAc,aAEzB,IAAA,EAAe"}
+{"version":3,"file":"inputInput.js","names":[],"sources":["../../src/input/inputInput.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { useInputContext } from './context'\nimport type { InputInputProps } from './input.types'\n\nexport const InputInputBase = styled.input`\n  align-self: stretch;\n  color: sandstone.10;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 1;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\n/** Displays an input element within the Input component. */\nexport const InputInput = vui<'input', InputInputProps>((props, ref) => {\n  const { className, autoComplete, ...rest } = props\n  const inputProps = useInputContext()\n  const mergedProps = { ...inputProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': mergedProps.disabled,\n    'aria-label': mergedProps.ariaLabel,\n  })\n\n  return (\n    <InputInputBase\n      autoComplete={autoComplete}\n      className={cs('vui-inputInput', className)}\n      ref={ref}\n      {...styles.input}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nInputInput.displayName = 'InputInput'\n\nexport default InputInput\n"],"mappings":";;;;;;;;;AAKA,MAAa,iBAAiB,OAAO,KAAK;;;;;;;;;;;;;;;;;;AAmB1C,MAAa,aAAa,KAA+B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,aAAc,GAAG,SAAS;CAE7C,MAAM,cAAc;EAAE,GADH,iBAAiB;EACC,GAAG;EAAO;CAC/C,MAAM,SAAS,eAAe,SAAS,YAAY;CACnD,MAAM,eAAe,gBAAgB;EACnC,iBAAiB,YAAY;EAC7B,cAAc,YAAY;EAC3B,CAAC;AAEF,QACE,oBAAC;EACe;EACd,WAAW,GAAG,kBAAkB,UAAU;EACrC;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,WAAW,cAAc;AAEzB,yBAAe"}

package/dist/input/theme.js

@@ -1,2 +1,84 @@
-import{inputColors as e}from"./consts.js";var t={baseStyle:{container:{focusWithinRing:3,color:e.inputText},input:{placeholderTextColor:e.placeholder}},defaultProps:{size:`lg`,variant:`grey`},parts:[`container`,`icon`,`input`,`label`],sizes:{sm:{container:{fontSize:`xs`,h:24},icon:{size:`xs`},input:{},label:{fontSize:`xs`}},md:{container:{fontSize:`sm`,h:32},icon:{size:`sm`},input:{},label:{fontSize:`sm`}},lg:{container:{fontSize:`md`,h:40},icon:{size:`md`},input:{},label:{fontSize:`md`}},xl:{container:{fontSize:`lg`,h:48},icon:{size:`md`},input:{},label:{fontSize:`lg`}}},variants:{grey:{container:{borderColor:e.border,focusWithinRingColor:e.focus}},green:{container:{borderColor:e.success,focusWithinRingColor:e.success}},red:{container:{borderColor:e.error,focusWithinRingColor:e.error}}}};export{t as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { inputColors } from "./consts.js";
+
+//#region src/input/theme.ts
+const baseStyle = {
+	container: {
+		focusWithinRing: 3,
+		color: inputColors.inputText
+	},
+	input: { placeholderTextColor: inputColors.placeholder }
+};
+const defaultProps = {
+	size: "lg",
+	variant: "grey"
+};
+const parts = [
+	"container",
+	"icon",
+	"input",
+	"label"
+];
+const sizes = {
+	sm: {
+		container: {
+			fontSize: "xs",
+			h: 24
+		},
+		icon: { size: "xs" },
+		input: {},
+		label: { fontSize: "xs" }
+	},
+	md: {
+		container: {
+			fontSize: "sm",
+			h: 32
+		},
+		icon: { size: "sm" },
+		input: {},
+		label: { fontSize: "sm" }
+	},
+	lg: {
+		container: {
+			fontSize: "md",
+			h: 40
+		},
+		icon: { size: "md" },
+		input: {},
+		label: { fontSize: "md" }
+	},
+	xl: {
+		container: {
+			fontSize: "lg",
+			h: 48
+		},
+		icon: { size: "md" },
+		input: {},
+		label: { fontSize: "lg" }
+	}
+};
+const variants = {
+	grey: { container: {
+		borderColor: inputColors.border,
+		focusWithinRingColor: inputColors.focus
+	} },
+	green: { container: {
+		borderColor: inputColors.success,
+		focusWithinRingColor: inputColors.success
+	} },
+	red: { container: {
+		borderColor: inputColors.error,
+		focusWithinRingColor: inputColors.error
+	} }
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/input/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/input/theme.ts"],"sourcesContent":["import { inputColors } from './consts'\n\nconst baseStyle = {\n  container: {\n    focusWithinRing: 3,\n    color: inputColors.inputText,\n  },\n  input: {\n    placeholderTextColor: inputColors.placeholder,\n  },\n}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'grey',\n}\n\nconst parts = ['container', 'icon', 'input', 'label']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n    },\n    icon: {\n      size: 'xs',\n    },\n    input: {},\n    label: {\n      fontSize: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n    },\n    icon: {\n      size: 'sm',\n    },\n    input: {},\n    label: {\n      fontSize: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'md', // No a mistake, we keep the same label size as md input\n    },\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  grey: {\n    container: {\n      borderColor: inputColors.border,\n      focusWithinRingColor: inputColors.focus,\n    },\n  },\n  green: {\n    container: {\n      borderColor: inputColors.success,\n      focusWithinRingColor: inputColors.success,\n    },\n  },\n  red: {\n    container: {\n      borderColor: inputColors.error,\n      focusWithinRingColor: inputColors.error,\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"0CA+FA,IAAA,EAAe,CACb,UA9FgB,CAChB,UAAW,CACT,gBAAiB,EACjB,MAAO,EAAY,UACpB,CACD,MAAO,CACL,qBAAsB,EAAY,YACnC,CACF,CAuFC,aArFmB,CACnB,KAAM,KACN,QAAS,OACV,CAmFC,MAjFY,CAAC,YAAa,OAAQ,QAAS,QAAQ,CAkFnD,MAhFY,CACZ,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACD,GAAI,CACF,UAAW,CACT,SAAU,KACV,EAAG,GACJ,CACD,KAAM,CACJ,KAAM,KACP,CACD,MAAO,EAAE,CACT,MAAO,CACL,SAAU,KACX,CACF,CACF,CA4BC,SA1Be,CACf,KAAM,CACJ,UAAW,CACT,YAAa,EAAY,OACzB,qBAAsB,EAAY,MACnC,CACF,CACD,MAAO,CACL,UAAW,CACT,YAAa,EAAY,QACzB,qBAAsB,EAAY,QACnC,CACF,CACD,IAAK,CACH,UAAW,CACT,YAAa,EAAY,MACzB,qBAAsB,EAAY,MACnC,CACF,CACF,CAQA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/input/theme.ts"],"sourcesContent":["import { inputColors } from './consts'\n\nconst baseStyle = {\n  container: {\n    focusWithinRing: 3,\n    color: inputColors.inputText,\n  },\n  input: {\n    placeholderTextColor: inputColors.placeholder,\n  },\n}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'grey',\n}\n\nconst parts = ['container', 'icon', 'input', 'label']\n\nconst sizes = {\n  sm: {\n    container: {\n      fontSize: 'xs',\n      h: 24,\n    },\n    icon: {\n      size: 'xs',\n    },\n    input: {},\n    label: {\n      fontSize: 'xs',\n    },\n  },\n  md: {\n    container: {\n      fontSize: 'sm',\n      h: 32,\n    },\n    icon: {\n      size: 'sm',\n    },\n    input: {},\n    label: {\n      fontSize: 'sm',\n    },\n  },\n  lg: {\n    container: {\n      fontSize: 'md',\n      h: 40,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'md', // No a mistake, we keep the same label size as md input\n    },\n  },\n  xl: {\n    container: {\n      fontSize: 'lg',\n      h: 48,\n    },\n    icon: {\n      size: 'md',\n    },\n    input: {},\n    label: {\n      fontSize: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  grey: {\n    container: {\n      borderColor: inputColors.border,\n      focusWithinRingColor: inputColors.focus,\n    },\n  },\n  green: {\n    container: {\n      borderColor: inputColors.success,\n      focusWithinRingColor: inputColors.success,\n    },\n  },\n  red: {\n    container: {\n      borderColor: inputColors.error,\n      focusWithinRingColor: inputColors.error,\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;CAChB,WAAW;EACT,iBAAiB;EACjB,OAAO,YAAY;EACpB;CACD,OAAO,EACL,sBAAsB,YAAY,aACnC;CACF;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAQ;CAAS;CAAQ;AAErD,MAAM,QAAQ;CACZ,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACD,IAAI;EACF,WAAW;GACT,UAAU;GACV,GAAG;GACJ;EACD,MAAM,EACJ,MAAM,MACP;EACD,OAAO,EAAE;EACT,OAAO,EACL,UAAU,MACX;EACF;CACF;AAED,MAAM,WAAW;CACf,MAAM,EACJ,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACD,OAAO,EACL,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACD,KAAK,EACH,WAAW;EACT,aAAa,YAAY;EACzB,sBAAsB,YAAY;EACnC,EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/label/index.d.ts

@@ -0,0 +1,2 @@
+import { LabelProps } from "./label.types.js";
+import { Label, LabelBase } from "./label.js";

package/dist/label/label.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { LabelProps } from "./label.types.js";
-import * as styled_components437 from "styled-components";
+import "../index.js";
+import * as styled_components393 from "styled-components";
 
 //#region src/label/label.d.ts
-declare const LabelBase: styled_components437.StyledComponent<"label", styled_components437.DefaultTheme, SystemProps, never>;
+declare const LabelBase: styled_components393.StyledComponent<"label", styled_components393.DefaultTheme, SystemProps, never>;
 /** Displays a paragraph of text. */
 declare const Label: VuiComponent<"label", LabelProps>;
 //#endregion

package/dist/label/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,WAAS,oBAAA,CAAA,yBAUrB,oBAAA,CAVqB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAaT,OAAK,sBAAA"}
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/label/label.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,WAAS,oBAAA,CAAA,yBAUrB,oBAAA,CAVqB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAaT,OAAK,sBAAA"}