@veracity/vui 5.4.0-alpha.433693.2609070813 → 5.4.0-alpha.433693.2609071102

package/dist/button/buttons.js

@@ -10,20 +10,20 @@ const AppButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	variant: "primary",
 	...props
 }));
-AppButton.displayName = "AppButton";
+AppButton.displayName = "App Button";
 const IconButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
 	variant: "secondary",
 	...props
 }));
-IconButton.displayName = "IconButton";
+IconButton.displayName = "Icon Button";
 const BackButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
 	startIcon: "uiArrowLeft",
 	ref,
 	variant: "tertiary",
 	...props
 }));
-BackButton.displayName = "BackButton";
+BackButton.displayName = "Back Button";
 /** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */
 const CloseButton = vui((props, ref) => {
 	useEffect(() => {
@@ -36,33 +36,33 @@ const CloseButton = vui((props, ref) => {
 		...restProps
 	});
 });
-CloseButton.displayName = "CloseButton";
+CloseButton.displayName = "Close Button";
 const CTAButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
 	variant: "primary",
 	intent: "success",
 	...props
 }));
-CTAButton.displayName = "CTAButton";
+CTAButton.displayName = "CTA Button";
 const DangerButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
 	variant: "primary",
 	intent: "danger",
 	...props
 }));
-DangerButton.displayName = "DangerButton";
+DangerButton.displayName = "Danger Button";
 const LineButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
 	variant: "secondary",
 	...props
 }));
-LineButton.displayName = "LineButton";
+LineButton.displayName = "Line Button";
 const TextButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
 	ref,
 	variant: "tertiary",
 	...props
 }));
-TextButton.displayName = "TextButton";
+TextButton.displayName = "Text Button";
 
 //#endregion
 export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };

package/dist/button/buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttons.js","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nimport { vui } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport Button from './button'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"primary\" {...props} />)\nAppButton.displayName = 'AppButton'\n\n// Declared before DismissButton so styled(IconButton) can reference it at module-eval time.\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" {...props} />\n))\nIconButton.displayName = 'IconButton'\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton startIcon=\"uiArrowLeft\" ref={ref} variant=\"tertiary\" {...props} />\n))\nBackButton.displayName = 'BackButton'\n\n/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn('[VUI] `CloseButton` is deprecated. Use `DismissButton` instead. Will be removed in VUI 6.')\n    }\n  }, [])\n  // Map unsupported sizes to DismissButton sizes\n  const { size, ...restProps } = props\n  const dismissSize = size === 'xl' ? 'lg' : size\n  return <DismissButton ref={ref} size={dismissSize} {...restProps} />\n})\nCloseButton.displayName = 'CloseButton'\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primary\" intent=\"success\" {...props} />\n))\nCTAButton.displayName = 'CTAButton'\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primary\" intent=\"danger\" {...props} />\n))\nDangerButton.displayName = 'DangerButton'\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" {...props} />\n))\nLineButton.displayName = 'LineButton'\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"tertiary\" {...props} />)\nTextButton.displayName = 'TextButton'\n"],"mappings":";;;;;;;AAQA,MAAa,YAAY,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,GAAI;AAAQ,EAAC;AACrH,UAAU,cAAc;AAGxB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,YAAD;CAAY,WAAU;CAAmB;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAC9E;AACD,WAAW,cAAc;;AAGzB,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,gBAAgB;EAEZ,QAAQ,KAAK,2FAA2F;CAE5G,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,MAAM,GAAG,cAAc;CAE/B,OAAO,oBAAC,eAAD;EAAoB;EAAK,MADZ,SAAS,OAAO,OAAO;EACQ,GAAI;CAAY;AACrE,CAAC;AACD,YAAY,cAAc;AAE1B,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAU,GAAI;AAAQ,EAClE;AACD,UAAU,cAAc;AAExB,MAAa,eAAe,KAA4B,OAAO,QAC7D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAS,GAAI;AAAQ,EACjE;AACD,aAAa,cAAc;AAE3B,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAAC;AACvH,WAAW,cAAc"}
+{"version":3,"file":"buttons.js","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nimport { vui } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport Button from './button'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"primary\" {...props} />)\nAppButton.displayName = 'App Button'\n\n// Declared before DismissButton so styled(IconButton) can reference it at module-eval time.\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" {...props} />\n))\nIconButton.displayName = 'Icon Button'\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n  <IconButton startIcon=\"uiArrowLeft\" ref={ref} variant=\"tertiary\" {...props} />\n))\nBackButton.displayName = 'Back Button'\n\n/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn('[VUI] `CloseButton` is deprecated. Use `DismissButton` instead. Will be removed in VUI 6.')\n    }\n  }, [])\n  // Map unsupported sizes to DismissButton sizes\n  const { size, ...restProps } = props\n  const dismissSize = size === 'xl' ? 'lg' : size\n  return <DismissButton ref={ref} size={dismissSize} {...restProps} />\n})\nCloseButton.displayName = 'Close Button'\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primary\" intent=\"success\" {...props} />\n))\nCTAButton.displayName = 'CTA Button'\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"primary\" intent=\"danger\" {...props} />\n))\nDangerButton.displayName = 'Danger Button'\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n  <Button ref={ref} variant=\"secondary\" {...props} />\n))\nLineButton.displayName = 'Line Button'\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"tertiary\" {...props} />)\nTextButton.displayName = 'Text Button'\n"],"mappings":";;;;;;;AAQA,MAAa,YAAY,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,GAAI;AAAQ,EAAC;AACrH,UAAU,cAAc;AAGxB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,YAAD;CAAY,WAAU;CAAmB;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAC9E;AACD,WAAW,cAAc;;AAGzB,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,gBAAgB;EAEZ,QAAQ,KAAK,2FAA2F;CAE5G,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,MAAM,GAAG,cAAc;CAE/B,OAAO,oBAAC,eAAD;EAAoB;EAAK,MADZ,SAAS,OAAO,OAAO;EACQ,GAAI;CAAY;AACrE,CAAC;AACD,YAAY,cAAc;AAE1B,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAU,GAAI;AAAQ,EAClE;AACD,UAAU,cAAc;AAExB,MAAa,eAAe,KAA4B,OAAO,QAC7D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAS,GAAI;AAAQ,EACjE;AACD,aAAa,cAAc;AAE3B,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAAC;AACvH,WAAW,cAAc"}

package/dist/buttonGroup/buttonGroup.js

@@ -71,7 +71,7 @@ const ButtonGroup = vui((props, ref) => {
 		})
 	});
 });
-ButtonGroup.displayName = "ButtonGroup";
+ButtonGroup.displayName = "Button Group";
 
 //#endregion
 export { ButtonGroup, ButtonGroup as default, ButtonGroupBase };

package/dist/buttonGroup/buttonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.js","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { ButtonGroupProps } from './buttonGroup.types'\n\nimport { styled, th, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { ButtonGroupProvider } from './context'\nimport { getInnerBorderColor } from './helpers'\n\nexport const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`\n  display: flex;\n\n  // Border color between Buttons\n  > *:not(:last-of-type):not(:focus) {\n    border-right-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // First Button\n  > *:first-of-type:not(:last-of-type) {\n    border-right-width: 1px;\n  }\n\n  // Middle Buttons\n  > *:not(:first-of-type):not(:last-of-type) {\n    border-left-width: 0px;\n    border-right-width: 1px;\n  }\n\n  // Last Button\n  > *:not(:first-of-type):last-of-type {\n    border-left-width: 0px;\n    margin-right: 0;\n  }\n\n  // Border color\n  > *,\n  *:hover {\n    border-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // Rounded variant base styles\n  > .vui-button-variant-buttonGroupRounded {\n    border-left-width: 1px !important;\n    border-color: var(--vui-control-placeholder);\n  }\n`\n\n/**\n * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.\n * Exposes some props to the children via context.\n */\nexport const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {\n  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        disabled,\n        size,\n        variant: variant === 'default' ? 'buttonGroupDefault' : 'buttonGroupRounded',\n      }),\n    [disabled, size, variant],\n  )\n\n  return (\n    <ButtonGroupProvider value={context}>\n      <ButtonGroupBase\n        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}\n        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}\n        {...rest}\n      />\n    </ButtonGroupProvider>\n  )\n})\n\nButtonGroup.displayName = 'ButtonGroup'\nexport default ButtonGroup\n"],"mappings":";;;;;;;;;;;AASA,MAAa,kBAAkB,OAAO,MAAoC;;;;;2BAKhD,MAAK,GAAG,MAAM,EAAE,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;qBAuBxC,MAAK,GAAG,MAAM,EAAE,gBAAgB,EAAE;;;;;;;;;;;;;AActD,MAAa,cAAc,KAA8B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,UAAU,kBAAkB,MAAM,UAAU,WAAW,GAAG,SAAS;CAEtF,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA,SAAS,YAAY,YAAY,uBAAuB;CAC1D,CAAC,GACH;EAAC;EAAU;EAAM;CAAO,CAC1B;CAEA,OACE,oBAAC,qBAAD;EAAqB,OAAO;YAC1B,oBAAC,iBAAD;GACE,WAAW,GAAG,mBAAmB,WAAW,2BAA2B,SAAS;GAC1E,kBAAkB,mBAAmB,mBAAmB,oBAAoB,KAAK;GAAG;GAC1F,GAAI;EACL;CACkB;AAEzB,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"buttonGroup.js","names":[],"sources":["../../src/buttonGroup/buttonGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { ButtonGroupProps } from './buttonGroup.types'\n\nimport { styled, th, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { ButtonGroupProvider } from './context'\nimport { getInnerBorderColor } from './helpers'\n\nexport const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`\n  display: flex;\n\n  // Border color between Buttons\n  > *:not(:last-of-type):not(:focus) {\n    border-right-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // First Button\n  > *:first-of-type:not(:last-of-type) {\n    border-right-width: 1px;\n  }\n\n  // Middle Buttons\n  > *:not(:first-of-type):not(:last-of-type) {\n    border-left-width: 0px;\n    border-right-width: 1px;\n  }\n\n  // Last Button\n  > *:not(:first-of-type):last-of-type {\n    border-left-width: 0px;\n    margin-right: 0;\n  }\n\n  // Border color\n  > *,\n  *:hover {\n    border-color: ${p => th.color(p.innerBorderColor)};\n  }\n\n  // Rounded variant base styles\n  > .vui-button-variant-buttonGroupRounded {\n    border-left-width: 1px !important;\n    border-color: var(--vui-control-placeholder);\n  }\n`\n\n/**\n * Organizes layout and display of multiple buttons. Controls border visual around and between the buttons.\n * Exposes some props to the children via context.\n */\nexport const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {\n  const { className, disabled, innerBorderColor, size, variant = 'default', ...rest } = props\n\n  const context = useMemo(\n    () =>\n      filterUndefined({\n        disabled,\n        size,\n        variant: variant === 'default' ? 'buttonGroupDefault' : 'buttonGroupRounded',\n      }),\n    [disabled, size, variant],\n  )\n\n  return (\n    <ButtonGroupProvider value={context}>\n      <ButtonGroupBase\n        className={cs('vui-buttonGroup', className, `vui-buttonGroup-variant-${variant}`)}\n        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}\n        {...rest}\n      />\n    </ButtonGroupProvider>\n  )\n})\n\nButtonGroup.displayName = 'Button Group'\nexport default ButtonGroup\n"],"mappings":";;;;;;;;;;;AASA,MAAa,kBAAkB,OAAO,MAAoC;;;;;2BAKhD,MAAK,GAAG,MAAM,EAAE,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;qBAuBxC,MAAK,GAAG,MAAM,EAAE,gBAAgB,EAAE;;;;;;;;;;;;;AActD,MAAa,cAAc,KAA8B,OAAO,QAAQ;CACtE,MAAM,EAAE,WAAW,UAAU,kBAAkB,MAAM,UAAU,WAAW,GAAG,SAAS;CAEtF,MAAM,UAAU,cAEZ,gBAAgB;EACd;EACA;EACA,SAAS,YAAY,YAAY,uBAAuB;CAC1D,CAAC,GACH;EAAC;EAAU;EAAM;CAAO,CAC1B;CAEA,OACE,oBAAC,qBAAD;EAAqB,OAAO;YAC1B,oBAAC,iBAAD;GACE,WAAW,GAAG,mBAAmB,WAAW,2BAA2B,SAAS;GAC1E,kBAAkB,mBAAmB,mBAAmB,oBAAoB,KAAK;GAAG;GAC1F,GAAI;EACL;CACkB;AAEzB,CAAC;AAED,YAAY,cAAc"}

package/dist/buttonToggleGroup/buttonToggleGroup.js

@@ -15,7 +15,7 @@ const ButtonToggleGroup = (props) => {
 		...props
 	});
 };
-ButtonToggleGroup.displayName = "ButtonToggleGroup";
+ButtonToggleGroup.displayName = "Button Toggle Group";
 
 //#endregion
 export { ButtonToggleGroup, ButtonToggleGroup as default };

package/dist/buttonToggleGroup/buttonToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.js","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":["import type { ButtonToggleGroupProps } from './buttonToggleGroup.types'\n\nimport ButtonGroup from '../buttonGroup'\nimport { cs, dimmedBorderColor } from '../utils'\n\n/**\n * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.\n */\nexport const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {\n  const { className, isDimmedBorder } = props\n\n  return (\n    <ButtonGroup\n      className={cs('vui-buttonToggleGroup', className)}\n      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}\n      {...props}\n    />\n  )\n}\n\nButtonToggleGroup.displayName = 'ButtonToggleGroup'\nexport default ButtonToggleGroup\n"],"mappings":";;;;;;;;;AAQA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,mBAAmB;CAEtC,OACE,oBAAC,aAAD;EACE,WAAW,GAAG,yBAAyB,SAAS;EAChD,kBAAkB,iBAAiB,oBAAoB;EACvD,GAAI;CACL;AAEL;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"buttonToggleGroup.js","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":["import type { ButtonToggleGroupProps } from './buttonToggleGroup.types'\n\nimport ButtonGroup from '../buttonGroup'\nimport { cs, dimmedBorderColor } from '../utils'\n\n/**\n * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.\n */\nexport const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {\n  const { className, isDimmedBorder } = props\n\n  return (\n    <ButtonGroup\n      className={cs('vui-buttonToggleGroup', className)}\n      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}\n      {...props}\n    />\n  )\n}\n\nButtonToggleGroup.displayName = 'Button Toggle Group'\nexport default ButtonToggleGroup\n"],"mappings":";;;;;;;;;AAQA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,mBAAmB;CAEtC,OACE,oBAAC,aAAD;EACE,WAAW,GAAG,yBAAyB,SAAS;EAChD,kBAAkB,iBAAiB,oBAAoB;EACvD,GAAI;CACL;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/copyToClipboard/copyToClipboard.js

@@ -65,7 +65,7 @@ const CopyToClipboard = vui((props, ref) => {
 		children: button
 	}) : button;
 });
-CopyToClipboard.displayName = "CopyToClipboard";
+CopyToClipboard.displayName = "Copy To Clipboard";
 
 //#endregion
 export { CopyToClipboard, CopyToClipboard as default };

package/dist/copyToClipboard/copyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyToClipboard.js","names":[],"sources":["../../src/copyToClipboard/copyToClipboard.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { IconProp } from '../icon'\nimport type { CopyToClipboardProps } from './copyToClipboard.types'\n\nimport Button from '../button'\nimport { vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs } from '../utils'\nimport { useCopyToClipboard } from './useCopyToClipboard'\n\nconst defaultIcon: IconProp = 'uiCopy'\nconst checkedIcon: IconProp = 'uiCheck'\n\nconst getCopyValue = (props: CopyToClipboardProps): string => {\n  if (props.label !== undefined) return props.label\n  return props.copyText\n}\n\n/**\n * A helper button component.\n *\n * Copies the provided text to clipboard.\n *\n * Copying is available only for a secure environment (https://), otherwise the button is disabled.\n *\n */\nexport const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {\n  const value = getCopyValue(props)\n  const {\n    disabled,\n    copyText,\n    label,\n    className,\n    icon = defaultIcon,\n    size = 'sm',\n    variant = 'tertiary',\n    intent = 'brand',\n    showTooltip = true,\n    ...rest\n  } = props\n  const [state, setState] = useState<'idle' | 'copied'>('idle')\n  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(\n    () => () => {\n      if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n    },\n    [],\n  )\n\n  const texts: Record<'idle' | 'copied', { label: string; icon: IconProp }> = {\n    idle: {\n      label: `Copy ${value}`,\n      icon: icon,\n    },\n    copied: {\n      label: `Copied ${value}`,\n      icon: checkedIcon,\n    },\n  }\n\n  const { copy, isCopyDisabled } = useCopyToClipboard(value, { showToast: false })\n\n  const button = (\n    <Button\n      aria-label={texts[state].label}\n      className={cs('vui-copy-to-clipboard', className)}\n      disabled={disabled || isCopyDisabled}\n      icon={texts[state].icon}\n      intent={intent}\n      onClick={() => {\n        copy()\n        setState('copied')\n        if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n        resetTimerRef.current = setTimeout(() => {\n          setState('idle')\n          resetTimerRef.current = undefined\n        }, 1_000)\n      }}\n      ref={ref}\n      size={size}\n      variant={variant}\n      {...rest}\n    />\n  )\n\n  return showTooltip ? <Tooltip text={texts[state].label}>{button}</Tooltip> : button\n})\n\nCopyToClipboard.displayName = 'CopyToClipboard'\nexport default CopyToClipboard\n"],"mappings":";;;;;;;;;AAWA,MAAM,cAAwB;AAC9B,MAAM,cAAwB;AAE9B,MAAM,gBAAgB,UAAwC;CAC5D,IAAI,MAAM,UAAU,QAAW,OAAO,MAAM;CAC5C,OAAO,MAAM;AACf;;;;;;;;;AAUA,MAAa,kBAAkB,KAAqC,OAAO,QAAQ;CACjF,MAAM,QAAQ,aAAa,KAAK;CAChC,MAAM,EACJ,UACA,UACA,OACA,WACA,OAAO,aACP,OAAO,MACP,UAAU,YACV,SAAS,SACT,cAAc,MACd,GAAG,SACD;CACJ,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,gBAAgB,OAAkD,MAAS;CAEjF,sBACc;EACV,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;CAC7E,GACA,CAAC,CACH;CAEA,MAAM,QAAsE;EAC1E,MAAM;GACJ,OAAO,QAAQ;GACT;EACR;EACA,QAAQ;GACN,OAAO,UAAU;GACjB,MAAM;EACR;CACF;CAEA,MAAM,EAAE,MAAM,mBAAmB,mBAAmB,OAAO,EAAE,WAAW,MAAM,CAAC;CAE/E,MAAM,SACJ,oBAAC,QAAD;EACE,cAAY,MAAM,MAAM,CAAC;EACzB,WAAW,GAAG,yBAAyB,SAAS;EAChD,UAAU,YAAY;EACtB,MAAM,MAAM,MAAM,CAAC;EACX;EACR,eAAe;GACb,KAAK;GACL,SAAS,QAAQ;GACjB,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;GAC3E,cAAc,UAAU,iBAAiB;IACvC,SAAS,MAAM;IACf,cAAc,UAAU;GAC1B,GAAG,GAAK;EACV;EACK;EACC;EACG;EACT,GAAI;CACL;CAGH,OAAO,cAAc,oBAAC,SAAD;EAAS,MAAM,MAAM,MAAM,CAAC;YAAQ;CAAgB,KAAI;AAC/E,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"copyToClipboard.js","names":[],"sources":["../../src/copyToClipboard/copyToClipboard.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { IconProp } from '../icon'\nimport type { CopyToClipboardProps } from './copyToClipboard.types'\n\nimport Button from '../button'\nimport { vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs } from '../utils'\nimport { useCopyToClipboard } from './useCopyToClipboard'\n\nconst defaultIcon: IconProp = 'uiCopy'\nconst checkedIcon: IconProp = 'uiCheck'\n\nconst getCopyValue = (props: CopyToClipboardProps): string => {\n  if (props.label !== undefined) return props.label\n  return props.copyText\n}\n\n/**\n * A helper button component.\n *\n * Copies the provided text to clipboard.\n *\n * Copying is available only for a secure environment (https://), otherwise the button is disabled.\n *\n */\nexport const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {\n  const value = getCopyValue(props)\n  const {\n    disabled,\n    copyText,\n    label,\n    className,\n    icon = defaultIcon,\n    size = 'sm',\n    variant = 'tertiary',\n    intent = 'brand',\n    showTooltip = true,\n    ...rest\n  } = props\n  const [state, setState] = useState<'idle' | 'copied'>('idle')\n  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(\n    () => () => {\n      if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n    },\n    [],\n  )\n\n  const texts: Record<'idle' | 'copied', { label: string; icon: IconProp }> = {\n    idle: {\n      label: `Copy ${value}`,\n      icon: icon,\n    },\n    copied: {\n      label: `Copied ${value}`,\n      icon: checkedIcon,\n    },\n  }\n\n  const { copy, isCopyDisabled } = useCopyToClipboard(value, { showToast: false })\n\n  const button = (\n    <Button\n      aria-label={texts[state].label}\n      className={cs('vui-copy-to-clipboard', className)}\n      disabled={disabled || isCopyDisabled}\n      icon={texts[state].icon}\n      intent={intent}\n      onClick={() => {\n        copy()\n        setState('copied')\n        if (resetTimerRef.current !== undefined) clearTimeout(resetTimerRef.current)\n        resetTimerRef.current = setTimeout(() => {\n          setState('idle')\n          resetTimerRef.current = undefined\n        }, 1_000)\n      }}\n      ref={ref}\n      size={size}\n      variant={variant}\n      {...rest}\n    />\n  )\n\n  return showTooltip ? <Tooltip text={texts[state].label}>{button}</Tooltip> : button\n})\n\nCopyToClipboard.displayName = 'Copy To Clipboard'\nexport default CopyToClipboard\n"],"mappings":";;;;;;;;;AAWA,MAAM,cAAwB;AAC9B,MAAM,cAAwB;AAE9B,MAAM,gBAAgB,UAAwC;CAC5D,IAAI,MAAM,UAAU,QAAW,OAAO,MAAM;CAC5C,OAAO,MAAM;AACf;;;;;;;;;AAUA,MAAa,kBAAkB,KAAqC,OAAO,QAAQ;CACjF,MAAM,QAAQ,aAAa,KAAK;CAChC,MAAM,EACJ,UACA,UACA,OACA,WACA,OAAO,aACP,OAAO,MACP,UAAU,YACV,SAAS,SACT,cAAc,MACd,GAAG,SACD;CACJ,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,gBAAgB,OAAkD,MAAS;CAEjF,sBACc;EACV,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;CAC7E,GACA,CAAC,CACH;CAEA,MAAM,QAAsE;EAC1E,MAAM;GACJ,OAAO,QAAQ;GACT;EACR;EACA,QAAQ;GACN,OAAO,UAAU;GACjB,MAAM;EACR;CACF;CAEA,MAAM,EAAE,MAAM,mBAAmB,mBAAmB,OAAO,EAAE,WAAW,MAAM,CAAC;CAE/E,MAAM,SACJ,oBAAC,QAAD;EACE,cAAY,MAAM,MAAM,CAAC;EACzB,WAAW,GAAG,yBAAyB,SAAS;EAChD,UAAU,YAAY;EACtB,MAAM,MAAM,MAAM,CAAC;EACX;EACR,eAAe;GACb,KAAK;GACL,SAAS,QAAQ;GACjB,IAAI,cAAc,YAAY,QAAW,aAAa,cAAc,OAAO;GAC3E,cAAc,UAAU,iBAAiB;IACvC,SAAS,MAAM;IACf,cAAc,UAAU;GAC1B,GAAG,GAAK;EACV;EACK;EACC;EACG;EACT,GAAI;CACL;CAGH,OAAO,cAAc,oBAAC,SAAD;EAAS,MAAM,MAAM,MAAM,CAAC;YAAQ;CAAgB,KAAI;AAC/E,CAAC;AAED,gBAAgB,cAAc"}

package/dist/datePicker/datePicker.js

@@ -162,7 +162,7 @@ const DatePicker = vui((props, ref) => {
 	});
 });
 DatePicker.TriggerButton = DatePickerTriggerButton;
-DatePicker.displayName = "DatePicker";
+DatePicker.displayName = "Date Picker";
 
 //#endregion
 export { DatePicker, DatePicker as default };

package/dist/datePicker/datePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { DateRange } from '../calendar'\nimport type { VuiComponent } from '../core'\nimport type { DatePickerProps } from './datePicker.types'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\nimport { DatePickerTriggerButton } from './datePickerTriggerButton'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    showDateInput = true,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDateProps && !!autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(showDateInput)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const [isClearButtonVisible, setIsClearButtonVisible] = useState(!!(showClearButton && selectedDateProps))\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime && date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      setIsClearButtonVisible(!!(showClearButton && selectedDateProps))\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps, showClearButton])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = useCallback(\n    (date?: Date, close?: () => void) => {\n      onSelected?.(date)\n      initialDateRef.current = date\n      setIsClearButtonVisible(!!(showClearButton && date))\n      close?.()\n    },\n    [onSelected, showClearButton],\n  )\n\n  const onClear = useCallback(\n    (close?: () => void) => {\n      setSelectedDate(undefined)\n      onSelected?.(undefined)\n      close?.()\n    },\n    [onSelected],\n  )\n\n  const handlePopoverOpen = useCallback(() => setIsOpen(true), [])\n  const handlePopoverClose = useCallback(() => setIsOpen(false), [])\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = useCallback(\n    (date?: Date): string => {\n      const minDateTime = new Date(minDateTimestamp)\n      const maxDateTime = new Date(maxDateTimestamp)\n\n      if (date) {\n        const conditions: [boolean, string][] = [\n          [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n          [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n          [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n          [!!boundaries?.startDate && date.getTime() - boundaries.startDate.getTime() < 0, 'Invalid date'],\n          [!!boundaries?.endDate && date.getTime() - boundaries.endDate.getTime() > 0, 'Invalid date'],\n        ]\n        const [validateErrorPair] = conditions.filter(([result]) => result)\n\n        if (validateErrorPair) {\n          const [_, message] = validateErrorPair\n          setIsInvalidInputDate(true)\n          return message\n        }\n      }\n      return ''\n    },\n    [boundaries],\n  )\n\n  const onDateInputChange = useCallback((date?: Date) => setSelectedDate(date), [])\n  const onDateInputValidateStatus = useCallback((inValid: boolean) => setIsInvalidInputDate(!inValid), [])\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        defaultIsOpen={!selectedDateProps && autoOpened}\n        onClose={handlePopoverClose}\n        onOpen={handlePopoverOpen}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        {({ close }) => (\n          <>\n            <Popover.Trigger as={Box}>{children}</Popover.Trigger>\n            <Popover.Content column>\n              {!!slotTop && <Box px={2}>{slotTop}</Box>}\n              {showDateInput && (\n                <Box display=\"block\" mt={2} mx={2}>\n                  <DateInput\n                    autoFocus\n                    initialDate={selectedDate}\n                    onChange={onDateInputChange}\n                    onValidate={onDateInputValidate}\n                    setValidateStatus={onDateInputValidateStatus}\n                  />\n                </Box>\n              )}\n              <Box mx={2} my={1}>\n                <Calendar\n                  boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n                  fixedNumberOfWeeks\n                  fontWeight={500}\n                  minH={200}\n                  mode=\"exact\"\n                  onSelectDates={range => selectDate(range)}\n                  selectedDates={{ startDate: selectedDate, endDate: undefined }}\n                  w=\"100%\"\n                />\n              </Box>\n              <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n                {isClearButtonVisible && (\n                  <LineButton flex={1} onClick={() => onClear(close)} size=\"md\">\n                    Clear\n                  </LineButton>\n                )}\n                <Button\n                  disabled={isInvalidSelectedDate || isInvalidInputDate}\n                  flex={1}\n                  ml={isClearButtonVisible ? 1 : 0}\n                  onClick={() => onApplyDates(selectedDate, close)}\n                  size=\"md\"\n                >\n                  Apply\n                </Button>\n              </Box>\n              {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n            </Popover.Content>\n          </>\n        )}\n      </Popover>\n    </Box>\n  )\n}) as VuiComponent<'span', DatePickerProps> & {\n  TriggerButton: typeof DatePickerTriggerButton\n}\n\nDatePicker.TriggerButton = DatePickerTriggerButton\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":"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"}
+{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { DateRange } from '../calendar'\nimport type { VuiComponent } from '../core'\nimport type { DatePickerProps } from './datePicker.types'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\nimport { DatePickerTriggerButton } from './datePickerTriggerButton'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    showDateInput = true,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDateProps && !!autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(showDateInput)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const [isClearButtonVisible, setIsClearButtonVisible] = useState(!!(showClearButton && selectedDateProps))\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime && date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      setIsClearButtonVisible(!!(showClearButton && selectedDateProps))\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps, showClearButton])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = useCallback(\n    (date?: Date, close?: () => void) => {\n      onSelected?.(date)\n      initialDateRef.current = date\n      setIsClearButtonVisible(!!(showClearButton && date))\n      close?.()\n    },\n    [onSelected, showClearButton],\n  )\n\n  const onClear = useCallback(\n    (close?: () => void) => {\n      setSelectedDate(undefined)\n      onSelected?.(undefined)\n      close?.()\n    },\n    [onSelected],\n  )\n\n  const handlePopoverOpen = useCallback(() => setIsOpen(true), [])\n  const handlePopoverClose = useCallback(() => setIsOpen(false), [])\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = useCallback(\n    (date?: Date): string => {\n      const minDateTime = new Date(minDateTimestamp)\n      const maxDateTime = new Date(maxDateTimestamp)\n\n      if (date) {\n        const conditions: [boolean, string][] = [\n          [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n          [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n          [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n          [!!boundaries?.startDate && date.getTime() - boundaries.startDate.getTime() < 0, 'Invalid date'],\n          [!!boundaries?.endDate && date.getTime() - boundaries.endDate.getTime() > 0, 'Invalid date'],\n        ]\n        const [validateErrorPair] = conditions.filter(([result]) => result)\n\n        if (validateErrorPair) {\n          const [_, message] = validateErrorPair\n          setIsInvalidInputDate(true)\n          return message\n        }\n      }\n      return ''\n    },\n    [boundaries],\n  )\n\n  const onDateInputChange = useCallback((date?: Date) => setSelectedDate(date), [])\n  const onDateInputValidateStatus = useCallback((inValid: boolean) => setIsInvalidInputDate(!inValid), [])\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        defaultIsOpen={!selectedDateProps && autoOpened}\n        onClose={handlePopoverClose}\n        onOpen={handlePopoverOpen}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        {({ close }) => (\n          <>\n            <Popover.Trigger as={Box}>{children}</Popover.Trigger>\n            <Popover.Content column>\n              {!!slotTop && <Box px={2}>{slotTop}</Box>}\n              {showDateInput && (\n                <Box display=\"block\" mt={2} mx={2}>\n                  <DateInput\n                    autoFocus\n                    initialDate={selectedDate}\n                    onChange={onDateInputChange}\n                    onValidate={onDateInputValidate}\n                    setValidateStatus={onDateInputValidateStatus}\n                  />\n                </Box>\n              )}\n              <Box mx={2} my={1}>\n                <Calendar\n                  boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n                  fixedNumberOfWeeks\n                  fontWeight={500}\n                  minH={200}\n                  mode=\"exact\"\n                  onSelectDates={range => selectDate(range)}\n                  selectedDates={{ startDate: selectedDate, endDate: undefined }}\n                  w=\"100%\"\n                />\n              </Box>\n              <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n                {isClearButtonVisible && (\n                  <LineButton flex={1} onClick={() => onClear(close)} size=\"md\">\n                    Clear\n                  </LineButton>\n                )}\n                <Button\n                  disabled={isInvalidSelectedDate || isInvalidInputDate}\n                  flex={1}\n                  ml={isClearButtonVisible ? 1 : 0}\n                  onClick={() => onApplyDates(selectedDate, close)}\n                  size=\"md\"\n                >\n                  Apply\n                </Button>\n              </Box>\n              {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n            </Popover.Content>\n          </>\n        )}\n      </Popover>\n    </Box>\n  )\n}) as VuiComponent<'span', DatePickerProps> & {\n  TriggerButton: typeof DatePickerTriggerButton\n}\n\nDatePicker.TriggerButton = DatePickerTriggerButton\nDatePicker.displayName = 'Date Picker'\n\nexport default DatePicker\n"],"mappings":"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"}

package/dist/dragAndDrop/dragAndDrop.js

@@ -102,7 +102,7 @@ const DragAndDrop = vui((props, ref) => {
 		})]
 	});
 });
-DragAndDrop.displayName = "DragAndDrop";
+DragAndDrop.displayName = "Drag And Drop";
 
 //#endregion
 export { DragAndDrop, DragAndDrop as default };

package/dist/dragAndDrop/dragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.js","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"sourcesContent":["import type { ChangeEvent, DragEvent } from 'react'\n\nimport { useRef } from 'react'\n\nimport type { IconProp } from '../icon'\nimport type { DragAndDropProps } from './dragAndDrop.types'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\n\nconst defaultIcon: IconProp = 'falCloudUpload'\n\nconst defaultText = 'Click or drag files to this area'\n\nconst inputType = 'file'\n\nconst DragAndDropBase = styled.labelBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n  justify-content: center;\n`\n\n/** Prepares uploading files by selecting or dragging. */\nexport const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {\n  const {\n    accept,\n    className,\n    icon = defaultIcon,\n    selectFolderOnClick,\n    selectFolderOnDrop,\n    onFilesAdded,\n    multiple = true,\n    text = defaultText,\n    children,\n    disabled,\n    ...rest\n  } = omitThemingProps(props)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const styles = useStyleConfig('DragAndDrop', props)\n\n  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)\n\n  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n    const files = processFiles(e?.currentTarget?.files as FileList)\n    if (files?.length) {\n      onFilesAdded?.(files)\n      // Reseting the input type to allow selecting the same file(s)\n      e.currentTarget.type = ''\n      e.currentTarget.type = inputType\n    }\n  }\n\n  const getFilesWebkitDataTransferItems = (dataTransferItems: DataTransferItemList): Promise<File[]> => {\n    const traverseFileTreePromise = (item: FileSystemEntry, path: string = ''): Promise<File[]> =>\n      new Promise(resolve => {\n        if (item.isFile) {\n          const fileEntry = item as FileSystemFileEntry\n          fileEntry.file(file => {\n            ;(file as any).filepath = path + file.name // Save full path with type casting\n            files.push(file)\n            resolve([file])\n          })\n        } else if (item.isDirectory) {\n          const dirEntry = item as FileSystemDirectoryEntry\n          const dirReader = dirEntry.createReader()\n          dirReader.readEntries(entries => {\n            const entriesPromises: Promise<File[]>[] = entries.map(entry =>\n              traverseFileTreePromise(entry, path + dirEntry.name + '/'),\n            )\n            resolve(Promise.all(entriesPromises).then(entries => [].concat(...(entries as any[]))))\n          })\n        }\n      })\n\n    const files: File[] = []\n    return new Promise((resolve, reject) => {\n      const entriesPromises: Promise<File[]>[] = []\n      for (let i = 0; i < dataTransferItems.length; i++) {\n        const item = dataTransferItems[i].webkitGetAsEntry()\n        if (item) entriesPromises.push(traverseFileTreePromise(item))\n      }\n      Promise.all(entriesPromises)\n        .then(() => resolve(files))\n        .catch(reject)\n    })\n  }\n\n  const handleDrop = (e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n\n    if (selectFolderOnDrop) {\n      const items = e.dataTransfer.items\n      getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))\n      return undefined\n    }\n\n    const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : []\n    if (files?.length) onFilesAdded?.(files)\n  }\n\n  return (\n    <DragAndDropBase\n      className={cs('vui-drag-and-drop', className)}\n      cursor={disabled ? 'not-allowed' : 'pointer'}\n      onDragEnter={e => e.preventDefault()}\n      onDragOver={e => e.preventDefault()}\n      onDrop={e => handleDrop(e)}\n      opacity={disabled ? 0.5 : 1}\n      p={5}\n      pointerEvents={disabled ? 'none' : 'auto'}\n      ref={ref}\n      {...styles}\n      {...rest}\n    >\n      {children || (\n        <T display=\"flex\">\n          <Icon mr={1} name={icon} />\n          {text}\n        </T>\n      )}\n      <input\n        accept={accept}\n        className=\"vui-drag-and-drop-hidden-input\"\n        multiple={multiple}\n        onChange={handleFileInput}\n        ref={fileInputRef}\n        style={{ display: 'none' }}\n        type={inputType}\n        {...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })}\n      />\n    </DragAndDropBase>\n  )\n})\n\nDragAndDrop.displayName = 'DragAndDrop'\nexport default DragAndDrop\n"],"mappings":";;;;;;;;;;AAYA,MAAM,cAAwB;AAE9B,MAAM,cAAc;AAEpB,MAAM,YAAY;AAElB,MAAM,kBAAkB,OAAO,QAAQ;;;;;;;AAQvC,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,WACA,OAAO,aACP,qBACA,oBACA,cACA,WAAW,MACX,OAAO,aACP,UACA,UACA,GAAG,SACD,iBAAiB,KAAK;CAC1B,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,SAAS,eAAe,eAAe,KAAK;CAElD,MAAM,gBAAgB,UAA4B,MAAM,KAAK,KAAK,CAAC,CAAC,KAAI,SAAQ,IAAI;CAEpF,MAAM,mBAAmB,MAAqC;EAC5D,EAAE,eAAe;EACjB,IAAI,UAAU,OAAO;EACrB,MAAM,QAAQ,aAAa,GAAG,eAAe,KAAiB;EAC9D,IAAI,OAAO,QAAQ;GACjB,eAAe,KAAK;GAEpB,EAAE,cAAc,OAAO;GACvB,EAAE,cAAc,OAAO;EACzB;CACF;CAEA,MAAM,mCAAmC,sBAA6D;EACpG,MAAM,2BAA2B,MAAuB,OAAe,OACrE,IAAI,SAAQ,YAAW;GACrB,IAAI,KAAK,QAEP,KAAU,MAAK,SAAQ;IACpB,AAAC,KAAa,WAAW,OAAO,KAAK;IACtC,MAAM,KAAK,IAAI;IACf,QAAQ,CAAC,IAAI,CAAC;GAChB,CAAC;QACI,IAAI,KAAK,aAAa;IAC3B,MAAM,WAAW;IAEjB,AADkB,SAAS,aACnB,CAAC,CAAC,aAAY,YAAW;KAC/B,MAAM,kBAAqC,QAAQ,KAAI,UACrD,wBAAwB,OAAO,OAAO,SAAS,OAAO,GAAG,CAC3D;KACA,QAAQ,QAAQ,IAAI,eAAe,CAAC,CAAC,MAAK,YAAW,CAAC,CAAC,CAAC,OAAO,GAAI,OAAiB,CAAC,CAAC;IACxF,CAAC;GACH;EACF,CAAC;EAEH,MAAM,QAAgB,CAAC;EACvB,OAAO,IAAI,SAAS,SAAS,WAAW;GACtC,MAAM,kBAAqC,CAAC;GAC5C,KAAK,IAAI,IAAI,GAAG,IAAI,kBAAkB,QAAQ,KAAK;IACjD,MAAM,OAAO,kBAAkB,EAAE,CAAC,iBAAiB;IACnD,IAAI,MAAM,gBAAgB,KAAK,wBAAwB,IAAI,CAAC;GAC9D;GACA,QAAQ,IAAI,eAAe,CAAC,CACzB,WAAW,QAAQ,KAAK,CAAC,CAAC,CAC1B,MAAM,MAAM;EACjB,CAAC;CACH;CAEA,MAAM,cAAc,MAA8B;EAChD,EAAE,eAAe;EACjB,IAAI,UAAU,OAAO;EAErB,IAAI,oBAAoB;GACtB,MAAM,QAAQ,EAAE,aAAa;GAC7B,gCAAgC,KAAK,CAAC,CAAC,MAAK,UAAS,OAAO,UAAU,eAAe,KAAK,CAAC;GAC3F;EACF;EAEA,MAAM,QAAQ,EAAE,cAAc,QAAQ,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC;EAC5E,IAAI,OAAO,QAAQ,eAAe,KAAK;CACzC;CAEA,OACE,qBAAC,iBAAD;EACE,WAAW,GAAG,qBAAqB,SAAS;EAC5C,QAAQ,WAAW,gBAAgB;EACnC,cAAa,MAAK,EAAE,eAAe;EACnC,aAAY,MAAK,EAAE,eAAe;EAClC,SAAQ,MAAK,WAAW,CAAC;EACzB,SAAS,WAAW,KAAM;EAC1B,GAAG;EACH,eAAe,WAAW,SAAS;EAC9B;EACL,GAAI;EACJ,GAAI;YAXN,CAaG,YACC,qBAAC,GAAD;GAAG,SAAQ;aAAX,CACE,oBAAC,MAAD;IAAM,IAAI;IAAG,MAAM;GAAO,IACzB,IACA;MAEL,oBAAC,SAAD;GACU;GACR,WAAU;GACA;GACV,UAAU;GACV,KAAK;GACL,OAAO,EAAE,SAAS,OAAO;GACzB,MAAM;GACN,GAAK,uBAAuB;IAAE,iBAAiB;IAAQ,WAAW;GAAO;EAC1E,EACc;;AAErB,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"dragAndDrop.js","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"sourcesContent":["import type { ChangeEvent, DragEvent } from 'react'\n\nimport { useRef } from 'react'\n\nimport type { IconProp } from '../icon'\nimport type { DragAndDropProps } from './dragAndDrop.types'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\n\nconst defaultIcon: IconProp = 'falCloudUpload'\n\nconst defaultText = 'Click or drag files to this area'\n\nconst inputType = 'file'\n\nconst DragAndDropBase = styled.labelBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n  justify-content: center;\n`\n\n/** Prepares uploading files by selecting or dragging. */\nexport const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {\n  const {\n    accept,\n    className,\n    icon = defaultIcon,\n    selectFolderOnClick,\n    selectFolderOnDrop,\n    onFilesAdded,\n    multiple = true,\n    text = defaultText,\n    children,\n    disabled,\n    ...rest\n  } = omitThemingProps(props)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const styles = useStyleConfig('DragAndDrop', props)\n\n  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)\n\n  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n    const files = processFiles(e?.currentTarget?.files as FileList)\n    if (files?.length) {\n      onFilesAdded?.(files)\n      // Reseting the input type to allow selecting the same file(s)\n      e.currentTarget.type = ''\n      e.currentTarget.type = inputType\n    }\n  }\n\n  const getFilesWebkitDataTransferItems = (dataTransferItems: DataTransferItemList): Promise<File[]> => {\n    const traverseFileTreePromise = (item: FileSystemEntry, path: string = ''): Promise<File[]> =>\n      new Promise(resolve => {\n        if (item.isFile) {\n          const fileEntry = item as FileSystemFileEntry\n          fileEntry.file(file => {\n            ;(file as any).filepath = path + file.name // Save full path with type casting\n            files.push(file)\n            resolve([file])\n          })\n        } else if (item.isDirectory) {\n          const dirEntry = item as FileSystemDirectoryEntry\n          const dirReader = dirEntry.createReader()\n          dirReader.readEntries(entries => {\n            const entriesPromises: Promise<File[]>[] = entries.map(entry =>\n              traverseFileTreePromise(entry, path + dirEntry.name + '/'),\n            )\n            resolve(Promise.all(entriesPromises).then(entries => [].concat(...(entries as any[]))))\n          })\n        }\n      })\n\n    const files: File[] = []\n    return new Promise((resolve, reject) => {\n      const entriesPromises: Promise<File[]>[] = []\n      for (let i = 0; i < dataTransferItems.length; i++) {\n        const item = dataTransferItems[i].webkitGetAsEntry()\n        if (item) entriesPromises.push(traverseFileTreePromise(item))\n      }\n      Promise.all(entriesPromises)\n        .then(() => resolve(files))\n        .catch(reject)\n    })\n  }\n\n  const handleDrop = (e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n\n    if (selectFolderOnDrop) {\n      const items = e.dataTransfer.items\n      getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))\n      return undefined\n    }\n\n    const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : []\n    if (files?.length) onFilesAdded?.(files)\n  }\n\n  return (\n    <DragAndDropBase\n      className={cs('vui-drag-and-drop', className)}\n      cursor={disabled ? 'not-allowed' : 'pointer'}\n      onDragEnter={e => e.preventDefault()}\n      onDragOver={e => e.preventDefault()}\n      onDrop={e => handleDrop(e)}\n      opacity={disabled ? 0.5 : 1}\n      p={5}\n      pointerEvents={disabled ? 'none' : 'auto'}\n      ref={ref}\n      {...styles}\n      {...rest}\n    >\n      {children || (\n        <T display=\"flex\">\n          <Icon mr={1} name={icon} />\n          {text}\n        </T>\n      )}\n      <input\n        accept={accept}\n        className=\"vui-drag-and-drop-hidden-input\"\n        multiple={multiple}\n        onChange={handleFileInput}\n        ref={fileInputRef}\n        style={{ display: 'none' }}\n        type={inputType}\n        {...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })}\n      />\n    </DragAndDropBase>\n  )\n})\n\nDragAndDrop.displayName = 'Drag And Drop'\nexport default DragAndDrop\n"],"mappings":"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"}

package/dist/focusLock/focusLock.js

@@ -27,7 +27,7 @@ const FocusLock = (props) => {
 		children
 	});
 };
-FocusLock.displayName = "FocusLock";
+FocusLock.displayName = "Focus Lock";
 
 //#endregion
 export { FocusLock, FocusLock as default };

package/dist/focusLock/focusLock.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusLock.js","names":[],"sources":["../../src/focusLock/focusLock.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport { useCallback } from 'react'\nimport ReactFocusLock from 'react-focus-lock'\n\nimport type { ChildrenProp } from '../core'\nimport type { FocusLockProps } from './focusLock.types'\n\n/**\n * Traps the focus within the provided content.\n *\n * Tabbing using the keyboard will only cycle through the children and won't leave the boundary of the FocusLock wrapper.\n */\n\nexport const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {\n  const {\n    autoFocus,\n    children,\n    crossFrame,\n    finalFocusRef,\n    initialFocusRef,\n    isDisabled,\n    persistentFocus,\n    returnFocus: returnFocusProp,\n  } = props\n\n  const onActivation = useCallback(() => {\n    initialFocusRef?.current?.focus()\n  }, [initialFocusRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  const returnFocus = returnFocusProp && !finalFocusRef\n\n  return (\n    <ReactFocusLock\n      autoFocus={autoFocus}\n      crossFrame={crossFrame}\n      disabled={isDisabled}\n      onActivation={onActivation}\n      onDeactivation={onDeactivation}\n      persistentFocus={persistentFocus}\n      returnFocus={returnFocus}\n    >\n      {children}\n    </ReactFocusLock>\n  )\n}\n\nFocusLock.displayName = 'FocusLock'\nexport default FocusLock\n"],"mappings":";;;;;;;;;;AAcA,MAAa,aAA+C,UAAS;CACnE,MAAM,EACJ,WACA,UACA,YACA,eACA,iBACA,YACA,iBACA,aAAa,oBACX;CAEJ,MAAM,eAAe,kBAAkB;EACrC,iBAAiB,SAAS,MAAM;CAClC,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAIlB,OACE,oBAAC,gBAAD;EACa;EACC;EACZ,UAAU;EACI;EACE;EACC;EACjB,aAVgB,mBAAmB,CAAC;EAYnC;CACa;AAEpB;AAEA,UAAU,cAAc"}
+{"version":3,"file":"focusLock.js","names":[],"sources":["../../src/focusLock/focusLock.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport { useCallback } from 'react'\nimport ReactFocusLock from 'react-focus-lock'\n\nimport type { ChildrenProp } from '../core'\nimport type { FocusLockProps } from './focusLock.types'\n\n/**\n * Traps the focus within the provided content.\n *\n * Tabbing using the keyboard will only cycle through the children and won't leave the boundary of the FocusLock wrapper.\n */\n\nexport const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {\n  const {\n    autoFocus,\n    children,\n    crossFrame,\n    finalFocusRef,\n    initialFocusRef,\n    isDisabled,\n    persistentFocus,\n    returnFocus: returnFocusProp,\n  } = props\n\n  const onActivation = useCallback(() => {\n    initialFocusRef?.current?.focus()\n  }, [initialFocusRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  const returnFocus = returnFocusProp && !finalFocusRef\n\n  return (\n    <ReactFocusLock\n      autoFocus={autoFocus}\n      crossFrame={crossFrame}\n      disabled={isDisabled}\n      onActivation={onActivation}\n      onDeactivation={onDeactivation}\n      persistentFocus={persistentFocus}\n      returnFocus={returnFocus}\n    >\n      {children}\n    </ReactFocusLock>\n  )\n}\n\nFocusLock.displayName = 'Focus Lock'\nexport default FocusLock\n"],"mappings":";;;;;;;;;;AAcA,MAAa,aAA+C,UAAS;CACnE,MAAM,EACJ,WACA,UACA,YACA,eACA,iBACA,YACA,iBACA,aAAa,oBACX;CAEJ,MAAM,eAAe,kBAAkB;EACrC,iBAAiB,SAAS,MAAM;CAClC,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAIlB,OACE,oBAAC,gBAAD;EACa;EACC;EACZ,UAAU;EACI;EACE;EACC;EACjB,aAVgB,mBAAmB,CAAC;EAYnC;CACa;AAEpB;AAEA,UAAU,cAAc"}

package/dist/progressCircular/progressCircular.js

@@ -90,7 +90,7 @@ const ProgressCircular = vui((props, ref) => {
 		]
 	});
 });
-ProgressCircular.displayName = "ProgressCircular";
+ProgressCircular.displayName = "Progress Circular";
 
 //#endregion
 export { ProgressCircular, ProgressCircular as default, ProgressCircularBase };

package/dist/progressCircular/progressCircular.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.js","names":[],"sources":["../../src/progressCircular/progressCircular.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { BoxProps } from '../box'\nimport type { ProgressCircularProps } from './progressCircular.types'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { absCenterStyles, labelBottom, maxValue } from './consts'\n\nexport const ProgressCircularBase = styled.divBox`\n  display: flex;\n  position: relative;\n  width: 100%;\n`\nconst MainCircle = styled.circle`\n  fill: transparent;\n`\n\nconst ProgressCircle = styled(MainCircle)`\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: stroke-dashoffset 0.5s ease-out;\n`\n\n/** Indicates a process progress. */\nexport const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {\n  const { children, className, label, value = 0, showPercentage, ...rest } = props\n\n  const styles = useStyleConfig('ProgressCircular', props)\n\n  const [progress, setProgress] = useState(value)\n\n  useEffect(() => {\n    setProgress(value ? Math.ceil(value) : 0)\n  }, [value])\n\n  useEffect(() => {\n    const w = !value ? 0 : Math.ceil(value)\n    setProgress(w > maxValue ? maxValue : w)\n  }, [value])\n\n  const radius = maxValue / 2 - styles.strokeWidth * 2\n  const angle = radius * 2 * Math.PI\n  const offset = angle - (progress / maxValue) * angle\n\n  return (\n    <ProgressCircularBase className={cs('vui-progress-circular', className)} ref={ref} w={styles.width} {...rest}>\n      <svg\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        aria-valuenow={progress}\n        height={styles.width}\n        role=\"meter\"\n        version=\"1.1\"\n        viewBox=\"0 0 100 100\"\n        width={styles.width}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <MainCircle cx=\"50\" cy=\"50\" r={radius} stroke={styles.stroke.main} strokeWidth={styles.strokeWidth} />\n        <ProgressCircle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          stroke={styles.stroke.progress}\n          strokeDasharray={`${angle} ${angle}`}\n          strokeDashoffset={offset}\n          strokeWidth={styles.strokeWidth}\n        />\n      </svg>\n      <Box {...(absCenterStyles as BoxProps)} top={styles.top}>\n        {children ? (\n          children\n        ) : showPercentage ? (\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {progress}%\n          </T>\n        ) : null}\n      </Box>\n      {!!label && (\n        <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {label}\n          </T>\n        </Box>\n      )}\n    </ProgressCircularBase>\n  )\n})\n\nProgressCircular.displayName = 'ProgressCircular'\nexport default ProgressCircular\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAAuB,OAAO,MAAM;;;;;AAKjD,MAAM,aAAa,OAAO,MAAM;;;AAIhC,MAAM,iBAAiB,OAAO,UAAU,CAAC;;;;;;AAOzC,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,gBAAgB,GAAG,SAAS;CAE3E,MAAM,SAAS,eAAe,oBAAoB,KAAK;CAEvD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,gBAAgB;EACd,YAAY,QAAQ,KAAK,KAAK,KAAK,IAAI,CAAC;CAC1C,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,KAAK;EACtC,YAAY,gBAA0B,CAAC;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAoB,IAAI,OAAO,cAAc;CACnD,MAAM,QAAQ,SAAS,IAAI,KAAK;CAChC,MAAM,SAAS,QAAS,iBAAuB;CAE/C,OACE,qBAAC,sBAAD;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAQ;EAAK,GAAG,OAAO;EAAO,GAAI;YAAxG;GACE,qBAAC,OAAD;IACE;IACA,iBAAe;IACf,iBAAe;IACf,QAAQ,OAAO;IACf,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,OAAO,OAAO;IACd,OAAM;cATR,CAWE,oBAAC,YAAD;KAAY,IAAG;KAAK,IAAG;KAAK,GAAG;KAAQ,QAAQ,OAAO,OAAO;KAAM,aAAa,OAAO;IAAc,IACrG,oBAAC,gBAAD;KACE,IAAG;KACH,IAAG;KACH,GAAG;KACH,QAAQ,OAAO,OAAO;KACtB,iBAAiB,GAAG,MAAM,GAAG;KAC7B,kBAAkB;KAClB,aAAa,OAAO;IACrB,EACE;;GACL,oBAAC,KAAD;IAAK,GAAK;IAA8B,KAAK,OAAO;cACjD,WACC,WACE,iBACF,qBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eAAzC,CACG,UAAS,GACT;SACD;GACD;GACJ,CAAC,CAAC,SACD,oBAAC,KAAD;IAAK,GAAK;IAA8B;cACtC,oBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eACtC;IACA;GACA;EAEa;;AAE1B,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"progressCircular.js","names":[],"sources":["../../src/progressCircular/progressCircular.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { BoxProps } from '../box'\nimport type { ProgressCircularProps } from './progressCircular.types'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { absCenterStyles, labelBottom, maxValue } from './consts'\n\nexport const ProgressCircularBase = styled.divBox`\n  display: flex;\n  position: relative;\n  width: 100%;\n`\nconst MainCircle = styled.circle`\n  fill: transparent;\n`\n\nconst ProgressCircle = styled(MainCircle)`\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: stroke-dashoffset 0.5s ease-out;\n`\n\n/** Indicates a process progress. */\nexport const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {\n  const { children, className, label, value = 0, showPercentage, ...rest } = props\n\n  const styles = useStyleConfig('ProgressCircular', props)\n\n  const [progress, setProgress] = useState(value)\n\n  useEffect(() => {\n    setProgress(value ? Math.ceil(value) : 0)\n  }, [value])\n\n  useEffect(() => {\n    const w = !value ? 0 : Math.ceil(value)\n    setProgress(w > maxValue ? maxValue : w)\n  }, [value])\n\n  const radius = maxValue / 2 - styles.strokeWidth * 2\n  const angle = radius * 2 * Math.PI\n  const offset = angle - (progress / maxValue) * angle\n\n  return (\n    <ProgressCircularBase className={cs('vui-progress-circular', className)} ref={ref} w={styles.width} {...rest}>\n      <svg\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        aria-valuenow={progress}\n        height={styles.width}\n        role=\"meter\"\n        version=\"1.1\"\n        viewBox=\"0 0 100 100\"\n        width={styles.width}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <MainCircle cx=\"50\" cy=\"50\" r={radius} stroke={styles.stroke.main} strokeWidth={styles.strokeWidth} />\n        <ProgressCircle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          stroke={styles.stroke.progress}\n          strokeDasharray={`${angle} ${angle}`}\n          strokeDashoffset={offset}\n          strokeWidth={styles.strokeWidth}\n        />\n      </svg>\n      <Box {...(absCenterStyles as BoxProps)} top={styles.top}>\n        {children ? (\n          children\n        ) : showPercentage ? (\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {progress}%\n          </T>\n        ) : null}\n      </Box>\n      {!!label && (\n        <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {label}\n          </T>\n        </Box>\n      )}\n    </ProgressCircularBase>\n  )\n})\n\nProgressCircular.displayName = 'Progress Circular'\nexport default ProgressCircular\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAAuB,OAAO,MAAM;;;;;AAKjD,MAAM,aAAa,OAAO,MAAM;;;AAIhC,MAAM,iBAAiB,OAAO,UAAU,CAAC;;;;;;AAOzC,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,gBAAgB,GAAG,SAAS;CAE3E,MAAM,SAAS,eAAe,oBAAoB,KAAK;CAEvD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,gBAAgB;EACd,YAAY,QAAQ,KAAK,KAAK,KAAK,IAAI,CAAC;CAC1C,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,KAAK;EACtC,YAAY,gBAA0B,CAAC;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAoB,IAAI,OAAO,cAAc;CACnD,MAAM,QAAQ,SAAS,IAAI,KAAK;CAChC,MAAM,SAAS,QAAS,iBAAuB;CAE/C,OACE,qBAAC,sBAAD;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAQ;EAAK,GAAG,OAAO;EAAO,GAAI;YAAxG;GACE,qBAAC,OAAD;IACE;IACA,iBAAe;IACf,iBAAe;IACf,QAAQ,OAAO;IACf,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,OAAO,OAAO;IACd,OAAM;cATR,CAWE,oBAAC,YAAD;KAAY,IAAG;KAAK,IAAG;KAAK,GAAG;KAAQ,QAAQ,OAAO,OAAO;KAAM,aAAa,OAAO;IAAc,IACrG,oBAAC,gBAAD;KACE,IAAG;KACH,IAAG;KACH,GAAG;KACH,QAAQ,OAAO,OAAO;KACtB,iBAAiB,GAAG,MAAM,GAAG;KAC7B,kBAAkB;KAClB,aAAa,OAAO;IACrB,EACE;;GACL,oBAAC,KAAD;IAAK,GAAK;IAA8B,KAAK,OAAO;cACjD,WACC,WACE,iBACF,qBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eAAzC,CACG,UAAS,GACT;SACD;GACD;GACJ,CAAC,CAAC,SACD,oBAAC,KAAD;IAAK,GAAK;IAA8B;cACtC,oBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eACtC;IACA;GACA;EAEa;;AAE1B,CAAC;AAED,iBAAiB,cAAc"}

package/dist/stepIndicator/stepIndicator.js

@@ -65,7 +65,7 @@ const StepIndicator = vui((props, ref) => {
 		})]
 	});
 });
-StepIndicator.displayName = "StepIndicator";
+StepIndicator.displayName = "Step Indicator";
 
 //#endregion
 export { StepIndicator, StepIndicator as default };

package/dist/stepIndicator/stepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepIndicator.js","names":[],"sources":["../../src/stepIndicator/stepIndicator.tsx"],"sourcesContent":["import type { StepIndicatorProps } from './stepIndicatorTypes'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\n\nconst Content = ({ number, variant, size }: { number?: number; variant?: string; size?: string }) => {\n  if (typeof number === 'undefined') return null\n  if (variant === 'completed') return <Icon name=\"uiCheck\" size={size as any} />\n  if (variant === 'error') return <Icon name=\"uiTimes\" size={size as any} />\n  return (\n    <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>\n      {number}\n    </T>\n  )\n}\n\n/**\n * Implements stepper indicator **\n */\nexport const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {\n  const { icon, number, className, size = 'md', variant = 'active', ...rest } = props\n  const styles = useStyleConfig('StepIndicator', props)\n\n  return icon ? (\n    <Button\n      className={cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className)}\n      icon={icon}\n      ref={ref}\n      {...styles.icon}\n      {...rest}\n      isRound\n      minW=\"auto\"\n      pointerEvents=\"none\"\n      size={size}\n    />\n  ) : (\n    <Button\n      className={cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className)}\n      ref={ref}\n      {...styles.button}\n      {...rest}\n      isRound\n      minW=\"auto\"\n      pointerEvents=\"none\"\n      position=\"relative\"\n      size={size}\n      px={size === 'md' ? '11px' : '7px'}\n    >\n      <Box mx={0.5} position=\"relative\" />\n      <Box mx={0.5} position=\"absolute\">\n        <Content number={number} size={String(size)} variant={String(variant)} />\n      </Box>\n    </Button>\n  )\n})\n\nStepIndicator.displayName = 'StepIndicator'\n\nexport default StepIndicator\n"],"mappings":";;;;;;;;;;AASA,MAAM,WAAW,EAAE,QAAQ,SAAS,WAAiE;CACnG,IAAI,OAAO,WAAW,aAAa,OAAO;CAC1C,IAAI,YAAY,aAAa,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CAC7E,IAAI,YAAY,SAAS,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CACzE,OACE,oBAAC,GAAD;EAAG,UAAU,SAAS,OAAO,KAAK;EAAI,YAAY;YAC/C;CACA;AAEP;;;;AAKA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,MAAM,QAAQ,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SAAS;CAC9E,MAAM,SAAS,eAAe,iBAAiB,KAAK;CAEpD,OAAO,OACL,oBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,yBAAyB,SAAS;EAC/D;EACD;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,eAAc;EACR;CACP,KAED,qBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,2BAA2B,SAAS;EAClE;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,eAAc;EACd,UAAS;EACH;EACN,IAAI,SAAS,OAAO,SAAS;YAV/B,CAYE,oBAAC,KAAD;GAAK,IAAI;GAAK,UAAS;EAAY,IACnC,oBAAC,KAAD;GAAK,IAAI;GAAK,UAAS;aACrB,oBAAC,SAAD;IAAiB;IAAQ,MAAM,OAAO,IAAI;IAAG,SAAS,OAAO,OAAO;GAAI;EACrE,EACC;;AAEZ,CAAC;AAED,cAAc,cAAc"}
+{"version":3,"file":"stepIndicator.js","names":[],"sources":["../../src/stepIndicator/stepIndicator.tsx"],"sourcesContent":["import type { StepIndicatorProps } from './stepIndicatorTypes'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\n\nconst Content = ({ number, variant, size }: { number?: number; variant?: string; size?: string }) => {\n  if (typeof number === 'undefined') return null\n  if (variant === 'completed') return <Icon name=\"uiCheck\" size={size as any} />\n  if (variant === 'error') return <Icon name=\"uiTimes\" size={size as any} />\n  return (\n    <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>\n      {number}\n    </T>\n  )\n}\n\n/**\n * Implements stepper indicator **\n */\nexport const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {\n  const { icon, number, className, size = 'md', variant = 'active', ...rest } = props\n  const styles = useStyleConfig('StepIndicator', props)\n\n  return icon ? (\n    <Button\n      className={cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className)}\n      icon={icon}\n      ref={ref}\n      {...styles.icon}\n      {...rest}\n      isRound\n      minW=\"auto\"\n      pointerEvents=\"none\"\n      size={size}\n    />\n  ) : (\n    <Button\n      className={cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className)}\n      ref={ref}\n      {...styles.button}\n      {...rest}\n      isRound\n      minW=\"auto\"\n      pointerEvents=\"none\"\n      position=\"relative\"\n      size={size}\n      px={size === 'md' ? '11px' : '7px'}\n    >\n      <Box mx={0.5} position=\"relative\" />\n      <Box mx={0.5} position=\"absolute\">\n        <Content number={number} size={String(size)} variant={String(variant)} />\n      </Box>\n    </Button>\n  )\n})\n\nStepIndicator.displayName = 'Step Indicator'\n\nexport default StepIndicator\n"],"mappings":";;;;;;;;;;AASA,MAAM,WAAW,EAAE,QAAQ,SAAS,WAAiE;CACnG,IAAI,OAAO,WAAW,aAAa,OAAO;CAC1C,IAAI,YAAY,aAAa,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CAC7E,IAAI,YAAY,SAAS,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAgB;CAAc;CACzE,OACE,oBAAC,GAAD;EAAG,UAAU,SAAS,OAAO,KAAK;EAAI,YAAY;YAC/C;CACA;AAEP;;;;AAKA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,MAAM,QAAQ,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SAAS;CAC9E,MAAM,SAAS,eAAe,iBAAiB,KAAK;CAEpD,OAAO,OACL,oBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,yBAAyB,SAAS;EAC/D;EACD;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,eAAc;EACR;CACP,KAED,qBAAC,QAAD;EACE,WAAW,GAAG,qBAAqB,2BAA2B,SAAS;EAClE;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EACA,MAAK;EACL,eAAc;EACd,UAAS;EACH;EACN,IAAI,SAAS,OAAO,SAAS;YAV/B,CAYE,oBAAC,KAAD;GAAK,IAAI;GAAK,UAAS;EAAY,IACnC,oBAAC,KAAD;GAAK,IAAI;GAAK,UAAS;aACrB,oBAAC,SAAD;IAAiB;IAAQ,MAAM,OAAO,IAAI;IAAG,SAAS,OAAO,OAAO;GAAI;EACrE,EACC;;AAEZ,CAAC;AAED,cAAc,cAAc"}

package/dist/stepperHorizontal/stepperHorizontal.js

@@ -26,7 +26,7 @@ const StepperHorizontal = vui((props, ref) => {
 		})
 	});
 });
-StepperHorizontal.displayName = "StepperHorizontal";
+StepperHorizontal.displayName = "Stepper Horizontal";
 
 //#endregion
 export { StepperHorizontal, StepperHorizontal as default };

package/dist/stepperHorizontal/stepperHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepperHorizontal.js","names":[],"sources":["../../src/stepperHorizontal/stepperHorizontal.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { StepperHorizontalProps } from './stepperHorizontalTypes'\n\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { StepperHorizontalProvider } from './context'\nimport StepperHorizontalBase from './stepperHorizontalBase'\n\n/**\n * Implements Horizontal stepper **\n */\nexport const StepperHorizontal = vui<'div', StepperHorizontalProps>((props, ref) => {\n  const { children, className, size, ...rest } = props\n  const styles = useStyleConfig('StepperHorizontal', props)\n\n  const context = useMemo(() => filterUndefined({ size }), [size])\n\n  return (\n    <StepperHorizontalProvider value={context}>\n      <StepperHorizontalBase\n        className={cs('vui-stepperHorizontal', className)}\n        ref={ref}\n        {...styles.container}\n        {...rest}\n      >\n        {children}\n      </StepperHorizontalBase>\n    </StepperHorizontalProvider>\n  )\n})\n\nStepperHorizontal.displayName = 'StepperHorizontal'\n\nexport default StepperHorizontal\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,oBAAoB,KAAoC,OAAO,QAAQ;CAClF,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,SAAS;CAC/C,MAAM,SAAS,eAAe,qBAAqB,KAAK;CAExD,MAAM,UAAU,cAAc,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;CAE/D,OACE,oBAAC,2BAAD;EAA2B,OAAO;YAChC,oBAAC,uBAAD;GACE,WAAW,GAAG,yBAAyB,SAAS;GAC3C;GACL,GAAI,OAAO;GACX,GAAI;GAEH;EACoB;CACE;AAE/B,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"stepperHorizontal.js","names":[],"sources":["../../src/stepperHorizontal/stepperHorizontal.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { StepperHorizontalProps } from './stepperHorizontalTypes'\n\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { StepperHorizontalProvider } from './context'\nimport StepperHorizontalBase from './stepperHorizontalBase'\n\n/**\n * Implements Horizontal stepper **\n */\nexport const StepperHorizontal = vui<'div', StepperHorizontalProps>((props, ref) => {\n  const { children, className, size, ...rest } = props\n  const styles = useStyleConfig('StepperHorizontal', props)\n\n  const context = useMemo(() => filterUndefined({ size }), [size])\n\n  return (\n    <StepperHorizontalProvider value={context}>\n      <StepperHorizontalBase\n        className={cs('vui-stepperHorizontal', className)}\n        ref={ref}\n        {...styles.container}\n        {...rest}\n      >\n        {children}\n      </StepperHorizontalBase>\n    </StepperHorizontalProvider>\n  )\n})\n\nStepperHorizontal.displayName = 'Stepper Horizontal'\n\nexport default StepperHorizontal\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,oBAAoB,KAAoC,OAAO,QAAQ;CAClF,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,SAAS;CAC/C,MAAM,SAAS,eAAe,qBAAqB,KAAK;CAExD,MAAM,UAAU,cAAc,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;CAE/D,OACE,oBAAC,2BAAD;EAA2B,OAAO;YAChC,oBAAC,uBAAD;GACE,WAAW,GAAG,yBAAyB,SAAS;GAC3C;GACL,GAAI,OAAO;GACX,GAAI;GAEH;EACoB;CACE;AAE/B,CAAC;AAED,kBAAkB,cAAc"}

package/dist/stepperVertical/stepperVertical.js

@@ -26,7 +26,7 @@ const StepperVertical = vui((props, ref) => {
 		})
 	});
 });
-StepperVertical.displayName = "StepperVertical";
+StepperVertical.displayName = "Stepper Vertical";
 
 //#endregion
 export { StepperVertical, StepperVertical as default };

package/dist/stepperVertical/stepperVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepperVertical.js","names":[],"sources":["../../src/stepperVertical/stepperVertical.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { StepperVerticalProps } from './stepperVerticalTypes'\n\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { StepperVerticalProvider } from './context'\nimport StepperVerticalBase from './stepperVerticalBase'\n\n/**\n * Implements vertical stepper **\n */\nexport const StepperVertical = vui<'div', StepperVerticalProps>((props, ref) => {\n  const { children, className, size, ...rest } = props\n  const styles = useStyleConfig('StepperVertical', props)\n\n  const context = useMemo(() => filterUndefined({ size }), [size])\n\n  return (\n    <StepperVerticalProvider value={context}>\n      <StepperVerticalBase className={cs('vui-stepperVertical', className)} ref={ref} {...styles.container} {...rest}>\n        {children}\n      </StepperVerticalBase>\n    </StepperVerticalProvider>\n  )\n})\n\nStepperVertical.displayName = 'StepperVertical'\n\nexport default StepperVertical\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,kBAAkB,KAAkC,OAAO,QAAQ;CAC9E,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,SAAS;CAC/C,MAAM,SAAS,eAAe,mBAAmB,KAAK;CAEtD,MAAM,UAAU,cAAc,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;CAE/D,OACE,oBAAC,yBAAD;EAAyB,OAAO;YAC9B,oBAAC,qBAAD;GAAqB,WAAW,GAAG,uBAAuB,SAAS;GAAQ;GAAK,GAAI,OAAO;GAAW,GAAI;GACvG;EACkB;CACE;AAE7B,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"stepperVertical.js","names":[],"sources":["../../src/stepperVertical/stepperVertical.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { StepperVerticalProps } from './stepperVerticalTypes'\n\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport { StepperVerticalProvider } from './context'\nimport StepperVerticalBase from './stepperVerticalBase'\n\n/**\n * Implements vertical stepper **\n */\nexport const StepperVertical = vui<'div', StepperVerticalProps>((props, ref) => {\n  const { children, className, size, ...rest } = props\n  const styles = useStyleConfig('StepperVertical', props)\n\n  const context = useMemo(() => filterUndefined({ size }), [size])\n\n  return (\n    <StepperVerticalProvider value={context}>\n      <StepperVerticalBase className={cs('vui-stepperVertical', className)} ref={ref} {...styles.container} {...rest}>\n        {children}\n      </StepperVerticalBase>\n    </StepperVerticalProvider>\n  )\n})\n\nStepperVertical.displayName = 'Stepper Vertical'\n\nexport default StepperVertical\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,kBAAkB,KAAkC,OAAO,QAAQ;CAC9E,MAAM,EAAE,UAAU,WAAW,MAAM,GAAG,SAAS;CAC/C,MAAM,SAAS,eAAe,mBAAmB,KAAK;CAEtD,MAAM,UAAU,cAAc,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;CAE/D,OACE,oBAAC,yBAAD;EAAyB,OAAO;YAC9B,oBAAC,qBAAD;GAAqB,WAAW,GAAG,uBAAuB,SAAS;GAAQ;GAAK,GAAI,OAAO;GAAW,GAAI;GACvG;EACkB;CACE;AAE7B,CAAC;AAED,gBAAgB,cAAc"}

package/dist/tagToggle/TagToggle.js

@@ -61,7 +61,7 @@ const TagToggle = vui((props, ref) => {
 		})]
 	});
 });
-TagToggle.displayName = "TagToggle";
+TagToggle.displayName = "Tag Toggle";
 
 //#endregion
 export { TagToggle, TagToggle as default };

package/dist/tagToggle/TagToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagToggle.js","names":[],"sources":["../../src/tagToggle/TagToggle.tsx"],"sourcesContent":["import type { TagToggleProps } from './tagToggle.types'\n\nimport { styled, useStyleConfig, useTh, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { tagPillBaseCss } from '../tag/tagPillBase.css'\nimport { cs, isString } from '../utils'\n\n// ---------------------------------------------------------------------------\n// Styled primitive\n// ---------------------------------------------------------------------------\n\nconst TagToggleBase = styled.buttonBox`\n  ${tagPillBaseCss}\n\n  cursor: pointer;\n  user-select: none;\n`\n\n// ---------------------------------------------------------------------------\n// TagToggle component\n// ---------------------------------------------------------------------------\n\n/**\n * A toggle button styled as a tag. Uses brand-only colour tokens and an\n * `aria-pressed` attribute to convey selected state.\n */\nexport const TagToggle = vui<'button', TagToggleProps>((props, ref) => {\n  const { className, icon, isSelected = false, label, onChange, variant = 'solid', ...rest } = props\n\n  const styles = useStyleConfig('TagToggle', { ...props, variant })\n  const { selected, ...container } = styles.container ?? {}\n  const {\n    h,\n    fontSize: themeFontSize,\n    paddingX = 0,\n    paddingY = 0,\n    gapX = 0,\n    borderRadius,\n    bgHover,\n    bgPressed,\n    ...containerColors\n  } = isSelected ? { ...container, ...selected } : container\n  const iconStyles = styles.icon ?? {}\n\n  // Resolved from the active theme (respects theme overrides) rather than a static import.\n  const resolvedFontSize = useTh(`fontSizes.${themeFontSize}`, themeFontSize)\n  const fontSize = `var(--vui-tag-font-size, ${resolvedFontSize}px)`\n\n  // Theme values are literal pixels, not spacing-scale steps, so convert explicitly before\n  // handing them to the `px`/`py`/`gap` system props.\n  const toPx = (n: number) => `${n}px`\n\n  return (\n    <TagToggleBase\n      aria-pressed={isSelected}\n      borderRadius={borderRadius}\n      className={cs('vui-tagToggle', className)}\n      focusRing={2}\n      fontSize={fontSize}\n      gap={toPx(gapX)}\n      h={h}\n      onClick={() => onChange?.(!isSelected)}\n      px={toPx(paddingX)}\n      py={toPx(paddingY)}\n      ref={ref}\n      type=\"button\"\n      activeBg={bgPressed}\n      hoverBg={bgHover}\n      {...containerColors}\n      {...rest}\n    >\n      {isString(icon) && <Icon className=\"vui-tagToggleIcon\" name={icon} {...iconStyles} />}\n      {label && (\n        <T className=\"vui-tagToggleText\" fontSize={fontSize}>\n          {label}\n        </T>\n      )}\n    </TagToggleBase>\n  )\n})\n\nTagToggle.displayName = 'TagToggle'\n\nexport default TagToggle\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,gBAAgB,OAAO,SAAS;IAClC,eAAe;;;;;;;;;AAcnB,MAAa,YAAY,KAA+B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,MAAM,aAAa,OAAO,OAAO,UAAU,UAAU,SAAS,GAAG,SAAS;CAE7F,MAAM,SAAS,eAAe,aAAa;EAAE,GAAG;EAAO;CAAQ,CAAC;CAChE,MAAM,EAAE,UAAU,GAAG,cAAc,OAAO,aAAa,CAAC;CACxD,MAAM,EACJ,GACA,UAAU,eACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,cACA,SACA,WACA,GAAG,oBACD,aAAa;EAAE,GAAG;EAAW,GAAG;CAAS,IAAI;CACjD,MAAM,aAAa,OAAO,QAAQ,CAAC;CAInC,MAAM,WAAW,4BADQ,MAAM,aAAa,iBAAiB,aACD,EAAE;CAI9D,MAAM,QAAQ,MAAc,GAAG,EAAE;CAEjC,OACE,qBAAC,eAAD;EACE,gBAAc;EACA;EACd,WAAW,GAAG,iBAAiB,SAAS;EACxC,WAAW;EACD;EACV,KAAK,KAAK,IAAI;EACX;EACH,eAAe,WAAW,CAAC,UAAU;EACrC,IAAI,KAAK,QAAQ;EACjB,IAAI,KAAK,QAAQ;EACZ;EACL,MAAK;EACL,UAAU;EACV,SAAS;EACT,GAAI;EACJ,GAAI;YAhBN,CAkBG,SAAS,IAAI,KAAK,oBAAC,MAAD;GAAM,WAAU;GAAoB,MAAM;GAAM,GAAI;EAAa,IACnF,SACC,oBAAC,GAAD;GAAG,WAAU;GAA8B;aACxC;EACA,EAEQ;;AAEnB,CAAC;AAED,UAAU,cAAc"}
+{"version":3,"file":"TagToggle.js","names":[],"sources":["../../src/tagToggle/TagToggle.tsx"],"sourcesContent":["import type { TagToggleProps } from './tagToggle.types'\n\nimport { styled, useStyleConfig, useTh, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { tagPillBaseCss } from '../tag/tagPillBase.css'\nimport { cs, isString } from '../utils'\n\n// ---------------------------------------------------------------------------\n// Styled primitive\n// ---------------------------------------------------------------------------\n\nconst TagToggleBase = styled.buttonBox`\n  ${tagPillBaseCss}\n\n  cursor: pointer;\n  user-select: none;\n`\n\n// ---------------------------------------------------------------------------\n// TagToggle component\n// ---------------------------------------------------------------------------\n\n/**\n * A toggle button styled as a tag. Uses brand-only colour tokens and an\n * `aria-pressed` attribute to convey selected state.\n */\nexport const TagToggle = vui<'button', TagToggleProps>((props, ref) => {\n  const { className, icon, isSelected = false, label, onChange, variant = 'solid', ...rest } = props\n\n  const styles = useStyleConfig('TagToggle', { ...props, variant })\n  const { selected, ...container } = styles.container ?? {}\n  const {\n    h,\n    fontSize: themeFontSize,\n    paddingX = 0,\n    paddingY = 0,\n    gapX = 0,\n    borderRadius,\n    bgHover,\n    bgPressed,\n    ...containerColors\n  } = isSelected ? { ...container, ...selected } : container\n  const iconStyles = styles.icon ?? {}\n\n  // Resolved from the active theme (respects theme overrides) rather than a static import.\n  const resolvedFontSize = useTh(`fontSizes.${themeFontSize}`, themeFontSize)\n  const fontSize = `var(--vui-tag-font-size, ${resolvedFontSize}px)`\n\n  // Theme values are literal pixels, not spacing-scale steps, so convert explicitly before\n  // handing them to the `px`/`py`/`gap` system props.\n  const toPx = (n: number) => `${n}px`\n\n  return (\n    <TagToggleBase\n      aria-pressed={isSelected}\n      borderRadius={borderRadius}\n      className={cs('vui-tagToggle', className)}\n      focusRing={2}\n      fontSize={fontSize}\n      gap={toPx(gapX)}\n      h={h}\n      onClick={() => onChange?.(!isSelected)}\n      px={toPx(paddingX)}\n      py={toPx(paddingY)}\n      ref={ref}\n      type=\"button\"\n      activeBg={bgPressed}\n      hoverBg={bgHover}\n      {...containerColors}\n      {...rest}\n    >\n      {isString(icon) && <Icon className=\"vui-tagToggleIcon\" name={icon} {...iconStyles} />}\n      {label && (\n        <T className=\"vui-tagToggleText\" fontSize={fontSize}>\n          {label}\n        </T>\n      )}\n    </TagToggleBase>\n  )\n})\n\nTagToggle.displayName = 'Tag Toggle'\n\nexport default TagToggle\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,gBAAgB,OAAO,SAAS;IAClC,eAAe;;;;;;;;;AAcnB,MAAa,YAAY,KAA+B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,MAAM,aAAa,OAAO,OAAO,UAAU,UAAU,SAAS,GAAG,SAAS;CAE7F,MAAM,SAAS,eAAe,aAAa;EAAE,GAAG;EAAO;CAAQ,CAAC;CAChE,MAAM,EAAE,UAAU,GAAG,cAAc,OAAO,aAAa,CAAC;CACxD,MAAM,EACJ,GACA,UAAU,eACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,cACA,SACA,WACA,GAAG,oBACD,aAAa;EAAE,GAAG;EAAW,GAAG;CAAS,IAAI;CACjD,MAAM,aAAa,OAAO,QAAQ,CAAC;CAInC,MAAM,WAAW,4BADQ,MAAM,aAAa,iBAAiB,aACD,EAAE;CAI9D,MAAM,QAAQ,MAAc,GAAG,EAAE;CAEjC,OACE,qBAAC,eAAD;EACE,gBAAc;EACA;EACd,WAAW,GAAG,iBAAiB,SAAS;EACxC,WAAW;EACD;EACV,KAAK,KAAK,IAAI;EACX;EACH,eAAe,WAAW,CAAC,UAAU;EACrC,IAAI,KAAK,QAAQ;EACjB,IAAI,KAAK,QAAQ;EACZ;EACL,MAAK;EACL,UAAU;EACV,SAAS;EACT,GAAI;EACJ,GAAI;YAhBN,CAkBG,SAAS,IAAI,KAAK,oBAAC,MAAD;GAAM,WAAU;GAAoB,MAAM;GAAM,GAAI;EAAa,IACnF,SACC,oBAAC,GAAD;GAAG,WAAU;GAA8B;aACxC;EACA,EAEQ;;AAEnB,CAAC;AAED,UAAU,cAAc"}

package/dist/textField/textField.js

@@ -289,7 +289,7 @@ const TextField = vui((props, ref) => {
 TextField.AutoComplete = TextFieldAutoComplete;
 TextField.HelpText = TextFieldHelpText;
 TextField.Icon = TextFieldIcon;
-TextField.displayName = "TextField";
+TextField.displayName = "Text Field";
 
 //#endregion
 export { TextField, TextField as default, TextFieldControlBase, TextFieldInputBase, TextFieldTextareaBase };

package/dist/textField/textField.js.map

@@ -1 +1 @@
-{"version":3,"file":"textField.js","names":[],"sources":["../../src/textField/textField.tsx"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useEffect, useId, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SystemProps } from '../system'\nimport type { ChangeEvent, PropsOf } from '../utils'\nimport type { TextFieldProps } from './textField.types'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { clearIconSize, displayValueOnlyTextSize, fieldColors } from './consts'\nimport { TextFieldProvider } from './context'\nimport {\n  clampValue,\n  createSyntheticChangeEvent,\n  filterAutoCompleteOption,\n  getHelpTextMargin,\n  getInitialCount,\n  resolveLabel,\n} from './helpers'\nimport TextFieldAutoComplete from './textFieldAutoComplete'\nimport TextFieldHelpText from './textFieldHelpText'\nimport TextFieldIcon from './textFieldIcon'\n\nexport const TextFieldControlBase = styled.divBox<{ $multiline?: boolean }>`\n  align-items: center;\n  color: ${fieldColors.inputText};\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  outline: none;\n  padding: 0 8px;\n  position: relative;\n  transform: translate3d(0, 0, 0);\n  transition-duration: 0s;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ${fieldColors.disabledBackground};\n    border-color: ${fieldColors.disabledBackground};\n    color: ${fieldColors.disabledForeground};\n    & > .vui-icon {\n      color: ${fieldColors.disabledForeground};\n    }\n    & > .vui-icon > path {\n      fill: ${fieldColors.disabledForeground};\n    }\n  }\n\n  ${({ $multiline }) =>\n    $multiline &&\n    `\n    align-items: stretch;\n    flex-direction: column;\n    gap: 0;\n    padding: 0;\n  `}\n`\n\nexport const TextFieldInputBase = styled.input`\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  color: inherit;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\nexport const TextFieldTextareaBase = styled.textareaBox`\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  flex: 1 1 auto;\n  font-size: inherit;\n  outline: none;\n  padding: 4px;\n  resize: none;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n`\n\n/**\n * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.\n * Forwards many relevant props to the inner field. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const TextField = vui<'div', TextFieldProps>((props, ref) => {\n  const {\n    // identity & native attributes\n    ariaLabel,\n    autoComplete,\n    autoFocus,\n    className,\n    id: idProp,\n    name,\n    disabled,\n    readOnly,\n    required,\n\n    // value & change handling\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n    onBlur,\n    onFocus,\n\n    // native field constraints\n    max,\n    maxLength,\n    min,\n    minLength,\n    pattern,\n    placeholder,\n    step,\n    type = 'text',\n\n    // multiline-only\n    cols,\n    resize,\n    rows,\n\n    // label\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n\n    // help/error/loading/counter states\n    helpText,\n    errorText,\n    loading,\n    showCount,\n    displayValueOnly,\n\n    // adornments (input-only)\n    allowClear,\n    startIcon,\n    endIcon,\n    itemLeft,\n    itemRight,\n\n    // autocomplete (input-only)\n    autoCompleteOptions,\n    autoCompleteMaxHeight,\n\n    // custom field override\n    field,\n    fieldProps,\n    fieldRef,\n\n    // sizing/theming\n    size = 'lg',\n    variant,\n\n    ...rest\n  } = props\n\n  const isMultiline = (rows ?? 0) > 1\n\n  const generatedId = useId()\n  const [count, setCount] = useState(() => getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(value ?? defaultValue ?? '')\n  // caps the resize handle to the textarea's `rows`-driven height plus its padding/border\n  const minHeight = isMultiline && resize && rows ? `calc(${rows} * 1lh + 10px)` : undefined\n  // errorText forces the red variant; loading forces the grey variant\n  const effectiveVariant = errorText ? 'red' : loading ? 'grey' : variant\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', { ...props, variant: effectiveVariant })\n  // the theme's fixed `h` is single-line only; multiline height comes from the native `rows` attribute\n  const { h: _containerHeight, ...containerStylesMultiline } = styles.container ?? {}\n  const containerStyles = isMultiline ? containerStylesMultiline : styles.container\n\n  // sub-components (Icon, HelpText) resolve styles from the same effective variant as the container,\n  // so error/loading overrides are reflected in their styling too\n  const context = useMemo(\n    () => filterUndefined({ disabled, id, size, variant: effectiveVariant }),\n    [disabled, id, size, effectiveVariant],\n  )\n\n  function onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n    const value = clampValue(e.target.value, maxLength)\n\n    setValueInternal(value)\n    setCount(value?.length)\n    // keep the forwarded event consistent with the clamped internal state, so a controlled\n    // parent reading `e.target.value` can't diverge from what the field displays\n    if (value !== e.target.value) {\n      e.target.value = value\n    }\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    onChange(createSyntheticChangeEvent(value, 'autoCompleteSelect') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  function onClear() {\n    setValueInternal('')\n    setCount(0)\n    onChange(createSyntheticChangeEvent('', 'onClear') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    // disabled overrides everything (state, readOnly); readOnly only overrides when there's no active state\n    bg: disabled ? fieldColors.disabledBackground : readOnly ? fieldColors.readOnlyBackground : undefined,\n    borderColor: disabled\n      ? fieldColors.disabledBackground\n      : readOnly && !loading\n        ? fieldColors.readOnlyBorder\n        : undefined,\n  })\n\n  const fieldAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n  })\n\n  // link the field to its help/error text so screen readers announce it\n  const helpTextId = helpText ? `${id}-help-text` : undefined\n  const errorTextId = errorText ? `${id}-error-text` : undefined\n  const ariaDescribedBy = [helpTextId, errorTextId].filter(Boolean).join(' ') || undefined\n\n  const commonFieldProps = {\n    value: valueInternal,\n    ...styles.field,\n    ...fieldAliasedProps,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': errorText ? true : undefined,\n  }\n\n  // valid on both <input> and <textarea>\n  const sharedFieldProps = {\n    autoFocus,\n    disabled,\n    id,\n    maxLength,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n  }\n\n  const textareaFieldProps = {\n    ...sharedFieldProps,\n    cols,\n    rows,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'textarea', SystemProps>),\n  }\n\n  const inputFieldProps = {\n    ...sharedFieldProps,\n    max,\n    min,\n    minLength,\n    pattern,\n    step,\n    type,\n    autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'input', SystemProps>),\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) => filterAutoCompleteOption(`${valueInternal}`, i)\n\n  const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label)\n\n  const counterNode = showCount && (\n    <T\n      className=\"vui-textFieldCount\"\n      color={maxLength && count > maxLength ? fieldColors.error : fieldColors.helpText}\n      position=\"absolute\"\n      right={0}\n      size=\"sm\"\n      top=\"100%\"\n    >\n      {count} {maxLength ? `/ ${maxLength}` : null}\n    </T>\n  )\n\n  // hidden type needs no visible container; render only the native input, but still forward\n  // refs, props and change handling so it behaves like any other TextField\n  if (type === 'hidden') {\n    return (\n      <input\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onChange={onChange}\n        ref={fieldRef as RefObject<HTMLInputElement | null> | undefined}\n        type=\"hidden\"\n        value={valueInternal as string}\n        {...(fieldProps as PropsOf<'input', SystemProps>)}\n      />\n    )\n  }\n\n  return (\n    <TextFieldProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-textField-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <TextFieldAutoComplete\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={isMultiline ? undefined : autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-textFieldContainer\" column gap=\"4px\" ref={ref} {...rest}>\n            {resolvedLabel}\n\n            <TextFieldControlBase\n              $multiline={isMultiline}\n              className={cs('vui-textField', className)}\n              minH={isMultiline && resize ? minHeight : undefined}\n              overflow={isMultiline && resize ? 'auto' : undefined}\n              resize={isMultiline && resize ? 'vertical' : undefined}\n              {...containerStyles}\n              {...aliasedProps}\n            >\n              {!isMultiline && (\n                <>\n                  {itemLeft}\n                  {isString(startIcon) ? <TextFieldIcon name={startIcon} /> : startIcon}\n                </>\n              )}\n              {field ??\n                (isMultiline ? (\n                  <TextFieldTextareaBase className=\"vui-textFieldField\" ref={fieldRef} {...textareaFieldProps} />\n                ) : (\n                  <TextFieldInputBase className=\"vui-textFieldField\" ref={fieldRef} {...inputFieldProps} />\n                ))}\n              {!isMultiline && (\n                <>\n                  {isString(endIcon) ? <TextFieldIcon name={endIcon} /> : endIcon}\n                  {itemRight}\n                  {loading && (\n                    <TextFieldIcon\n                      animation=\"vui-spin 0.6s linear infinite\"\n                      name=\"uiSpinnerThird\"\n                      pathFill={[fieldColors.loading, fieldColors.loadingBar]}\n                    />\n                  )}\n                  {allowClear && !!valueInternal && (\n                    <IconButton\n                      icon=\"uiTimes\"\n                      onClick={onClear}\n                      size={clearIconSize[size]}\n                      title=\"Clear\"\n                      variant=\"tertiary\"\n                    />\n                  )}\n                </>\n              )}\n              {counterNode}\n            </TextFieldControlBase>\n            {!!helpText && (\n              <TextFieldHelpText id={helpTextId} mr={getHelpTextMargin(showCount)}>\n                {helpText}\n              </TextFieldHelpText>\n            )}\n            {!!errorText && (\n              <TextFieldHelpText id={errorTextId} isError mr={getHelpTextMargin(showCount)}>\n                {errorText}\n              </TextFieldHelpText>\n            )}\n          </Box>\n        </TextFieldAutoComplete>\n      )}\n    </TextFieldProvider>\n  )\n}) as VuiComponent<'div', TextFieldProps> & {\n  AutoComplete: typeof TextFieldAutoComplete\n  HelpText: typeof TextFieldHelpText\n  Icon: typeof TextFieldIcon\n}\n\nTextField.AutoComplete = TextFieldAutoComplete\nTextField.HelpText = TextFieldHelpText\nTextField.Icon = TextFieldIcon\nTextField.displayName = 'TextField'\n\nexport default TextField\n"],"mappings":"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"}
+{"version":3,"file":"textField.js","names":[],"sources":["../../src/textField/textField.tsx"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useEffect, useId, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SystemProps } from '../system'\nimport type { ChangeEvent, PropsOf } from '../utils'\nimport type { TextFieldProps } from './textField.types'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { clearIconSize, displayValueOnlyTextSize, fieldColors } from './consts'\nimport { TextFieldProvider } from './context'\nimport {\n  clampValue,\n  createSyntheticChangeEvent,\n  filterAutoCompleteOption,\n  getHelpTextMargin,\n  getInitialCount,\n  resolveLabel,\n} from './helpers'\nimport TextFieldAutoComplete from './textFieldAutoComplete'\nimport TextFieldHelpText from './textFieldHelpText'\nimport TextFieldIcon from './textFieldIcon'\n\nexport const TextFieldControlBase = styled.divBox<{ $multiline?: boolean }>`\n  align-items: center;\n  color: ${fieldColors.inputText};\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  outline: none;\n  padding: 0 8px;\n  position: relative;\n  transform: translate3d(0, 0, 0);\n  transition-duration: 0s;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ${fieldColors.disabledBackground};\n    border-color: ${fieldColors.disabledBackground};\n    color: ${fieldColors.disabledForeground};\n    & > .vui-icon {\n      color: ${fieldColors.disabledForeground};\n    }\n    & > .vui-icon > path {\n      fill: ${fieldColors.disabledForeground};\n    }\n  }\n\n  ${({ $multiline }) =>\n    $multiline &&\n    `\n    align-items: stretch;\n    flex-direction: column;\n    gap: 0;\n    padding: 0;\n  `}\n`\n\nexport const TextFieldInputBase = styled.input`\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  color: inherit;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\nexport const TextFieldTextareaBase = styled.textareaBox`\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  flex: 1 1 auto;\n  font-size: inherit;\n  outline: none;\n  padding: 4px;\n  resize: none;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n`\n\n/**\n * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.\n * Forwards many relevant props to the inner field. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const TextField = vui<'div', TextFieldProps>((props, ref) => {\n  const {\n    // identity & native attributes\n    ariaLabel,\n    autoComplete,\n    autoFocus,\n    className,\n    id: idProp,\n    name,\n    disabled,\n    readOnly,\n    required,\n\n    // value & change handling\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n    onBlur,\n    onFocus,\n\n    // native field constraints\n    max,\n    maxLength,\n    min,\n    minLength,\n    pattern,\n    placeholder,\n    step,\n    type = 'text',\n\n    // multiline-only\n    cols,\n    resize,\n    rows,\n\n    // label\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n\n    // help/error/loading/counter states\n    helpText,\n    errorText,\n    loading,\n    showCount,\n    displayValueOnly,\n\n    // adornments (input-only)\n    allowClear,\n    startIcon,\n    endIcon,\n    itemLeft,\n    itemRight,\n\n    // autocomplete (input-only)\n    autoCompleteOptions,\n    autoCompleteMaxHeight,\n\n    // custom field override\n    field,\n    fieldProps,\n    fieldRef,\n\n    // sizing/theming\n    size = 'lg',\n    variant,\n\n    ...rest\n  } = props\n\n  const isMultiline = (rows ?? 0) > 1\n\n  const generatedId = useId()\n  const [count, setCount] = useState(() => getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(value ?? defaultValue ?? '')\n  // caps the resize handle to the textarea's `rows`-driven height plus its padding/border\n  const minHeight = isMultiline && resize && rows ? `calc(${rows} * 1lh + 10px)` : undefined\n  // errorText forces the red variant; loading forces the grey variant\n  const effectiveVariant = errorText ? 'red' : loading ? 'grey' : variant\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', { ...props, variant: effectiveVariant })\n  // the theme's fixed `h` is single-line only; multiline height comes from the native `rows` attribute\n  const { h: _containerHeight, ...containerStylesMultiline } = styles.container ?? {}\n  const containerStyles = isMultiline ? containerStylesMultiline : styles.container\n\n  // sub-components (Icon, HelpText) resolve styles from the same effective variant as the container,\n  // so error/loading overrides are reflected in their styling too\n  const context = useMemo(\n    () => filterUndefined({ disabled, id, size, variant: effectiveVariant }),\n    [disabled, id, size, effectiveVariant],\n  )\n\n  function onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n    const value = clampValue(e.target.value, maxLength)\n\n    setValueInternal(value)\n    setCount(value?.length)\n    // keep the forwarded event consistent with the clamped internal state, so a controlled\n    // parent reading `e.target.value` can't diverge from what the field displays\n    if (value !== e.target.value) {\n      e.target.value = value\n    }\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    onChange(createSyntheticChangeEvent(value, 'autoCompleteSelect') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  function onClear() {\n    setValueInternal('')\n    setCount(0)\n    onChange(createSyntheticChangeEvent('', 'onClear') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    // disabled overrides everything (state, readOnly); readOnly only overrides when there's no active state\n    bg: disabled ? fieldColors.disabledBackground : readOnly ? fieldColors.readOnlyBackground : undefined,\n    borderColor: disabled\n      ? fieldColors.disabledBackground\n      : readOnly && !loading\n        ? fieldColors.readOnlyBorder\n        : undefined,\n  })\n\n  const fieldAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n  })\n\n  // link the field to its help/error text so screen readers announce it\n  const helpTextId = helpText ? `${id}-help-text` : undefined\n  const errorTextId = errorText ? `${id}-error-text` : undefined\n  const ariaDescribedBy = [helpTextId, errorTextId].filter(Boolean).join(' ') || undefined\n\n  const commonFieldProps = {\n    value: valueInternal,\n    ...styles.field,\n    ...fieldAliasedProps,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': errorText ? true : undefined,\n  }\n\n  // valid on both <input> and <textarea>\n  const sharedFieldProps = {\n    autoFocus,\n    disabled,\n    id,\n    maxLength,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n  }\n\n  const textareaFieldProps = {\n    ...sharedFieldProps,\n    cols,\n    rows,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'textarea', SystemProps>),\n  }\n\n  const inputFieldProps = {\n    ...sharedFieldProps,\n    max,\n    min,\n    minLength,\n    pattern,\n    step,\n    type,\n    autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'input', SystemProps>),\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) => filterAutoCompleteOption(`${valueInternal}`, i)\n\n  const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label)\n\n  const counterNode = showCount && (\n    <T\n      className=\"vui-textFieldCount\"\n      color={maxLength && count > maxLength ? fieldColors.error : fieldColors.helpText}\n      position=\"absolute\"\n      right={0}\n      size=\"sm\"\n      top=\"100%\"\n    >\n      {count} {maxLength ? `/ ${maxLength}` : null}\n    </T>\n  )\n\n  // hidden type needs no visible container; render only the native input, but still forward\n  // refs, props and change handling so it behaves like any other TextField\n  if (type === 'hidden') {\n    return (\n      <input\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onChange={onChange}\n        ref={fieldRef as RefObject<HTMLInputElement | null> | undefined}\n        type=\"hidden\"\n        value={valueInternal as string}\n        {...(fieldProps as PropsOf<'input', SystemProps>)}\n      />\n    )\n  }\n\n  return (\n    <TextFieldProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-textField-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <TextFieldAutoComplete\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={isMultiline ? undefined : autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-textFieldContainer\" column gap=\"4px\" ref={ref} {...rest}>\n            {resolvedLabel}\n\n            <TextFieldControlBase\n              $multiline={isMultiline}\n              className={cs('vui-textField', className)}\n              minH={isMultiline && resize ? minHeight : undefined}\n              overflow={isMultiline && resize ? 'auto' : undefined}\n              resize={isMultiline && resize ? 'vertical' : undefined}\n              {...containerStyles}\n              {...aliasedProps}\n            >\n              {!isMultiline && (\n                <>\n                  {itemLeft}\n                  {isString(startIcon) ? <TextFieldIcon name={startIcon} /> : startIcon}\n                </>\n              )}\n              {field ??\n                (isMultiline ? (\n                  <TextFieldTextareaBase className=\"vui-textFieldField\" ref={fieldRef} {...textareaFieldProps} />\n                ) : (\n                  <TextFieldInputBase className=\"vui-textFieldField\" ref={fieldRef} {...inputFieldProps} />\n                ))}\n              {!isMultiline && (\n                <>\n                  {isString(endIcon) ? <TextFieldIcon name={endIcon} /> : endIcon}\n                  {itemRight}\n                  {loading && (\n                    <TextFieldIcon\n                      animation=\"vui-spin 0.6s linear infinite\"\n                      name=\"uiSpinnerThird\"\n                      pathFill={[fieldColors.loading, fieldColors.loadingBar]}\n                    />\n                  )}\n                  {allowClear && !!valueInternal && (\n                    <IconButton\n                      icon=\"uiTimes\"\n                      onClick={onClear}\n                      size={clearIconSize[size]}\n                      title=\"Clear\"\n                      variant=\"tertiary\"\n                    />\n                  )}\n                </>\n              )}\n              {counterNode}\n            </TextFieldControlBase>\n            {!!helpText && (\n              <TextFieldHelpText id={helpTextId} mr={getHelpTextMargin(showCount)}>\n                {helpText}\n              </TextFieldHelpText>\n            )}\n            {!!errorText && (\n              <TextFieldHelpText id={errorTextId} isError mr={getHelpTextMargin(showCount)}>\n                {errorText}\n              </TextFieldHelpText>\n            )}\n          </Box>\n        </TextFieldAutoComplete>\n      )}\n    </TextFieldProvider>\n  )\n}) as VuiComponent<'div', TextFieldProps> & {\n  AutoComplete: typeof TextFieldAutoComplete\n  HelpText: typeof TextFieldHelpText\n  Icon: typeof TextFieldIcon\n}\n\nTextField.AutoComplete = TextFieldAutoComplete\nTextField.HelpText = TextFieldHelpText\nTextField.Icon = TextFieldIcon\nTextField.displayName = 'Text Field'\n\nexport default TextField\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "5.4.0-alpha.433693.2609070813",
+  "version": "5.4.0-alpha.433693.2609071102",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "keywords": [
     "tanstack-intent"