npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-41fe9cd → 0.0.0-canary-46b9ad8 - Mend

@cube-dev/ui-kit 0.0.0-canary-41fe9cd → 0.0.0-canary-46b9ad8

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

Files changed (667) hide show

package/dist/components/fields/Switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': '#current',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps,\n ToggleSelectionProps,\n AriaSwitchProps {\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/*\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}
1	+ {"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n BaseProps,\n BLOCK_STYLES,\n BlockStyleProps,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n castNullableIsSelected,\n WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n as: 'label',\n styles: {\n display: 'flex',\n position: 'relative',\n placeItems: {\n '': 'center stretch',\n 'side-label': 'baseline stretch',\n },\n gap: '1x',\n width: 'max max-content',\n color: '#dark-02',\n },\n});\n\nconst SwitchElement = tasty({\n qa: 'Switch',\n styles: {\n boxSizing: 'border-box',\n position: 'relative',\n verticalAlign: 'baseline',\n placeSelf: 'center',\n radius: 'round',\n fill: {\n '': '#surface',\n checked: '#primary',\n 'invalid & checked': '#danger',\n 'valid & checked': '#success',\n disabled: '#border.5',\n 'disabled & checked': '#border',\n },\n color: {\n '': '#dark-03',\n checked: '#white',\n },\n border: {\n '': '#dark-05',\n checked: '#primary-text',\n disabled: '#dark-05.5',\n invalid: '#danger',\n valid: '#success',\n },\n width: {\n '': '5x 5x',\n 'size=medium': '4x 4x',\n 'size=small': '3x 3x',\n },\n height: {\n '': '3x 3x',\n 'size=medium': '2.5x 2.5x',\n 'size=small': '2x 2x',\n },\n outline: {\n '': '#primary-text.0',\n focused: '1bw #primary-text',\n },\n outlineOffset: 1,\n transition: 'theme',\n cursor: '$pointer',\n\n Thumb: {\n position: 'absolute',\n width: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n height: {\n '': '2x 2x',\n 'size=medium': '1.5x 1.5x',\n 'size=small': '1.25x 1.25x',\n },\n radius: 'round',\n fill: {\n '': '#current',\n disabled: '#current.5',\n 'disabled & checked': '#white.8',\n },\n top: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n },\n left: {\n '': '.375x',\n 'size=medium': '.375x',\n 'size=small': '.25x',\n checked: '2.25x',\n 'checked & size=medium': '1.75x',\n 'checked & size=small': '1.25x',\n },\n transition: 'left, theme',\n cursor: '$pointer',\n },\n },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n extends BaseProps,\n OuterStyleProps,\n BlockStyleProps,\n FieldBaseProps,\n ToggleSelectionProps,\n AriaSwitchProps {\n inputStyles?: Styles;\n isLoading?: boolean;\n size?: 'large' \| 'medium' \| 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n props = castNullableIsSelected(props);\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n isSelected: value != null ? value : false,\n isIndeterminate: false,\n onChange: onChange,\n }),\n });\n\n let {\n qa,\n isDisabled = false,\n children,\n label,\n insideForm,\n isLoading,\n labelPosition,\n inputStyles,\n isInvalid,\n isValid,\n size = 'medium',\n form,\n } = props;\n\n const id = useId(props.id);\n\n let styles = extractStyles(props, PROP_STYLES);\n\n let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n let { hoverProps, isHovered } = useHover({ isDisabled });\n\n let inputRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n const mods = {\n checked: inputProps.checked,\n disabled: isDisabled,\n hovered: isHovered,\n focused: isFocused,\n ...getValidationMods({ isInvalid, isValid }),\n 'inside-form': insideForm,\n 'side-label': labelPosition === 'side',\n };\n\n const switchField = (\n <SwitchWrapperElement\n qa=\"SwitchWrapper\"\n mods={mods}\n data-size={size}\n styles={styles}\n {...hoverProps}\n >\n <HiddenInput\n qa={qa \|\| 'Switch'}\n data-input-type=\"switch\"\n {...mergeProps(inputProps, focusProps)}\n ref={inputRef}\n id={id}\n />\n <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n <div data-element=\"Thumb\" aria-hidden=\"true\" />\n </SwitchElement>\n {children ? <Text nowrap>{children}</Text> : null}\n {isLoading ? (\n <>\n {label ? <> </> : null}\n <LoadingIcon />\n </>\n ) : null}\n </SwitchWrapperElement>\n );\n\n return wrapWithField(switchField, domRef, {\n ...props,\n id,\n labelProps: {\n ...props.labelProps,\n for: id,\n },\n children: null,\n inputStyles,\n });\n}\n\n/*\n Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

package/dist/components/fields/TextArea/TextArea.js CHANGED Viewed

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "../TextInput/TextInputBase.js";
 import { useAutoSizeTextArea } from "../TextInput/useAutoSizeTextArea.js";
 import { forwardRef, useRef } from "react";

package/dist/components/fields/TextInput/TextInput.js CHANGED Viewed

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";
-import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { TextInputBase } from "./TextInputBase.js";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/TextInput/TextInputBase.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/TextInput/useAutoSizeTextArea.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/components/fields/TextInputMapper/TextInputMapper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/TextInputMapper/TextInputMapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n ComponentType,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon, PlusIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n key: string;\n value: string;\n id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n qa?: string;\n actionLabel?: string;\n isDisabled?: boolean;\n value?: Record<string, string>;\n onChange?: (value: Record<string, string> \| undefined) => void;\n KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n keyProps?: Partial<CubeTextInputMapperInputProps>;\n valueProps?: Partial<CubeTextInputMapperInputProps>;\n allowsCustomValue?: boolean;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n styles: {\n InputArea: {\n gridColumn: {\n '': 'auto',\n 'has-sider': 'auto',\n },\n },\n },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n const keys = new Set<string>();\n\n return mappings.filter(({ key }) => {\n if (keys.has(key)) {\n return false;\n }\n\n keys.add(key);\n\n return true;\n });\n}\n\nfunction TextInputMapper(\n props: CubeTextInputMapperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n ref = useCombinedRefs(ref);\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value != null ? value : {},\n onChange: onChange,\n }),\n });\n\n const counterRef = useRef(0);\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n actionLabel,\n value,\n onChange,\n keyProps,\n valueProps,\n KeyComponent,\n ValueComponent,\n size = 'medium',\n form,\n } = props;\n\n function extractLocalValues(\n value: Record<string, string>,\n localValues: Mapping[],\n ) {\n const valueKeys = Object.keys(value);\n const localKeys = localValues.map(({ key }) => key);\n\n localKeys.forEach((key) => {\n if (!valueKeys.includes(key) && key !== '') {\n localValues = localValues.filter(({ key: k }) => k !== key);\n }\n });\n\n Object.entries(value ?? {}).forEach(([key, value]) => {\n const exist = localValues.find(({ key: k }) => k === key);\n\n if (exist) {\n exist.value = value;\n } else {\n localValues.push({ key, value, id: counterRef.current++ });\n }\n });\n\n return removeDuplicates(localValues);\n }\n\n const [mappings, setMappings] = useState(() => {\n return extractLocalValues(value ?? {}, []);\n });\n\n useEffect(() => {\n setMappings(extractLocalValues(value ?? {}, mappings));\n }, [JSON.stringify(value)]);\n\n const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n const newValue = newMappings.reduce(\n (acc, { key, value }) => {\n acc[key.trim()] = value.trim();\n\n return acc;\n },\n {} as Record<string, string>,\n );\n\n const keys = Object.keys(newValue);\n\n if (!keys.length) {\n onChange?.(undefined);\n } else {\n onChange?.(newValue);\n }\n\n const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n setMappings(updatedMappings);\n }\n });\n\n // useEffect(() => {\n // // focus on the last non-disabled input\n // setTimeout(() => {\n // (\n // ref?.current?.querySelector(\n // '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n // ) as HTMLInputElement\n // )?.focus();\n // }, 100);\n // }, [mappings.length]);\n\n const addNewMapping = useEvent(() => {\n setMappings((prev) => {\n return [...prev, { key: '', value: '', id: counterRef.current++ }];\n });\n });\n\n const showNewButton = useMemo(() => {\n return (\n !mappings.length \|\| !mappings.some(({ key, value }) => !key \|\| !value)\n );\n }, [mappings]);\n\n KeyComponent = KeyComponent ?? TextInputMapperInput;\n ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n const onKeyChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.key = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onValueChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.value = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onSubmit = useEvent(() => {\n onMappingsChange(mappings);\n });\n\n const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter' && showNewButton) {\n addNewMapping();\n }\n });\n\n const renderedMappings = useMemo(() => {\n return mappings.map((mapping, index) => {\n const { key, value, id } = mapping;\n\n return (\n <Grid\n key={id}\n qa=\"Mapping\"\n columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n gap=\"1x\"\n >\n <KeyComponent\n autoFocus={index === mappings.length - 1}\n id={id}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n fieldType=\"key\"\n value={key}\n placeholder={t('textInputMapper.key', 'Key')}\n size={size}\n onChange={onKeyChange}\n onSubmit={onSubmit}\n {...keyProps}\n />\n <ValueComponent\n id={id}\n fieldType=\"value\"\n isDisabled={!key \|\| isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n value={value}\n placeholder={t('textInputMapper.value', 'Value')}\n size={size}\n onChange={onValueChange}\n onSubmit={onSubmit}\n {...valueProps}\n />\n <Button\n aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n theme=\"danger\"\n type=\"clear\"\n size={size}\n icon={<CloseIcon />}\n onPress={() => {\n setMappings(mappings.filter((m) => m.id !== id));\n onMappingsChange(mappings.filter((m) => m.id !== id));\n }}\n />\n </Grid>\n );\n });\n }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n const element = (\n <Flow\n ref={ref}\n gap=\"1x\"\n data-qa={qa \|\| 'TextInputMapper'}\n data-input-type=\"textinputmapper\"\n onKeyDown={onKeyDown}\n >\n {[...renderedMappings]}\n {showNewButton ? (\n <Space gap={0}>\n {/ Hotfix for inconsistent alignment with the label /}\n <Block styles={{ overflow: 'clip', width: 'max 0px' }}> </Block>\n <Button\n isDisabled={isDisabled}\n size={size}\n icon={<PlusIcon />}\n onPress={addNewMapping}\n >\n {actionLabel ? actionLabel : 'Mapping'}\n </Button>\n </Space>\n ) : null}\n </Flow>\n );\n\n return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n id: number;\n fieldType: 'key' \| 'value';\n inputType?: 'input' \| 'combobox' \| 'password' \| 'textarea';\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n value?: string;\n options?: string[];\n placeholder?: string;\n onChange?: (id: number, newValue: string) => void;\n onSubmit?: (id: number) => void;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isValid?: boolean;\n autoFocus?: boolean;\n allowsCustomValue?: boolean;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n const {\n id,\n fieldType,\n inputType = 'input',\n options,\n value,\n size = 'medium',\n placeholder,\n allowsCustomValue,\n ...rest\n } = props;\n\n const onChange = useEvent((newValue: string) => {\n props.onChange?.(id, newValue);\n });\n\n const onBlur = useEvent(() => {\n props.onSubmit?.(id);\n });\n\n const onSelectionChange = useEvent((newValue: string) => {\n if (!allowsCustomValue && !options?.includes(newValue)) {\n props.onChange?.(id, '');\n } else {\n props.onChange?.(id, newValue);\n }\n\n props.onSubmit?.(id);\n });\n\n const Component = {\n input: TextInput,\n textarea: TextArea,\n password: PasswordInput,\n }[inputType];\n\n if (inputType === 'combobox') {\n return (\n <ComboBox\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n inputValue={value}\n selectedKey={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n allowsCustomValue={allowsCustomValue}\n onInputChange={onChange}\n onSelectionChange={(val) => onSelectionChange(val ?? '')}\n >\n {(options ?? []).map((option) => (\n <ComboBox.Item key={option}>{option}</ComboBox.Item>\n ))}\n </ComboBox>\n );\n }\n\n return (\n <Component\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n rows={1}\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n value={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}
1	+ {"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n ComponentType,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { PlusIcon } from '../../../icons/PlusIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n key: string;\n value: string;\n id: number;\n};\n\nexport interface CubeTextInputMapperProps extends FieldBaseProps {\n qa?: string;\n actionLabel?: string;\n isDisabled?: boolean;\n value?: Record<string, string>;\n onChange?: (value: Record<string, string> \| undefined) => void;\n KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n keyProps?: Partial<CubeTextInputMapperInputProps>;\n valueProps?: Partial<CubeTextInputMapperInputProps>;\n allowsCustomValue?: boolean;\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n styles: {\n InputArea: {\n gridColumn: {\n '': 'auto',\n 'has-sider': 'auto',\n },\n },\n },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n const keys = new Set<string>();\n\n return mappings.filter(({ key }) => {\n if (keys.has(key)) {\n return false;\n }\n\n keys.add(key);\n\n return true;\n });\n}\n\nfunction TextInputMapper(\n props: CubeTextInputMapperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { t } = useI18n();\n\n ref = useCombinedRefs(ref);\n\n props = useFieldProps(props, {\n defaultValidationTrigger: 'onChange',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value != null ? value : {},\n onChange: onChange,\n }),\n });\n\n const counterRef = useRef(0);\n\n let {\n qa,\n isDisabled,\n isInvalid,\n isValid,\n actionLabel,\n value,\n onChange,\n keyProps,\n valueProps,\n KeyComponent,\n ValueComponent,\n size = 'medium',\n form,\n } = props;\n\n function extractLocalValues(\n value: Record<string, string>,\n localValues: Mapping[],\n ) {\n const valueKeys = Object.keys(value);\n const localKeys = localValues.map(({ key }) => key);\n\n localKeys.forEach((key) => {\n if (!valueKeys.includes(key) && key !== '') {\n localValues = localValues.filter(({ key: k }) => k !== key);\n }\n });\n\n Object.entries(value ?? {}).forEach(([key, value]) => {\n const exist = localValues.find(({ key: k }) => k === key);\n\n if (exist) {\n exist.value = value;\n } else {\n localValues.push({ key, value, id: counterRef.current++ });\n }\n });\n\n return removeDuplicates(localValues);\n }\n\n const [mappings, setMappings] = useState(() => {\n return extractLocalValues(value ?? {}, []);\n });\n\n useEffect(() => {\n setMappings(extractLocalValues(value ?? {}, mappings));\n }, [JSON.stringify(value)]);\n\n const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n const newValue = newMappings.reduce(\n (acc, { key, value }) => {\n acc[key.trim()] = value.trim();\n\n return acc;\n },\n {} as Record<string, string>,\n );\n\n const keys = Object.keys(newValue);\n\n if (!keys.length) {\n onChange?.(undefined);\n } else {\n onChange?.(newValue);\n }\n\n const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n setMappings(updatedMappings);\n }\n });\n\n // useEffect(() => {\n // // focus on the last non-disabled input\n // setTimeout(() => {\n // (\n // ref?.current?.querySelector(\n // '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n // ) as HTMLInputElement\n // )?.focus();\n // }, 100);\n // }, [mappings.length]);\n\n const addNewMapping = useEvent(() => {\n setMappings((prev) => {\n return [...prev, { key: '', value: '', id: counterRef.current++ }];\n });\n });\n\n const showNewButton = useMemo(() => {\n return (\n !mappings.length \|\| !mappings.some(({ key, value }) => !key \|\| !value)\n );\n }, [mappings]);\n\n KeyComponent = KeyComponent ?? TextInputMapperInput;\n ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n const onKeyChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.key = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onValueChange = useEvent((id: number, value: string) => {\n mappings.forEach((mapping) => {\n if (mapping.id === id) {\n mapping.value = value;\n }\n });\n\n setMappings([...mappings]);\n });\n\n const onSubmit = useEvent(() => {\n onMappingsChange(mappings);\n });\n\n const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter' && showNewButton) {\n addNewMapping();\n }\n });\n\n const renderedMappings = useMemo(() => {\n return mappings.map((mapping, index) => {\n const { key, value, id } = mapping;\n\n return (\n <Grid\n key={id}\n qa=\"Mapping\"\n columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n gap=\"1x\"\n >\n <KeyComponent\n autoFocus={index === mappings.length - 1}\n id={id}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n fieldType=\"key\"\n value={key}\n placeholder={t('textInputMapper.key', 'Key')}\n size={size}\n onChange={onKeyChange}\n onSubmit={onSubmit}\n {...keyProps}\n />\n <ValueComponent\n id={id}\n fieldType=\"value\"\n isDisabled={!key \|\| isDisabled}\n isInvalid={isInvalid}\n isValid={isValid}\n value={value}\n placeholder={t('textInputMapper.value', 'Value')}\n size={size}\n onChange={onValueChange}\n onSubmit={onSubmit}\n {...valueProps}\n />\n <Button\n aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n theme=\"danger\"\n type=\"clear\"\n size={size}\n icon={<CloseIcon />}\n onPress={() => {\n setMappings(mappings.filter((m) => m.id !== id));\n onMappingsChange(mappings.filter((m) => m.id !== id));\n }}\n />\n </Grid>\n );\n });\n }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n const element = (\n <Flow\n ref={ref}\n gap=\"1x\"\n data-qa={qa \|\| 'TextInputMapper'}\n data-input-type=\"textinputmapper\"\n onKeyDown={onKeyDown}\n >\n {[...renderedMappings]}\n {showNewButton ? (\n <Space gap={0}>\n {/ Hotfix for inconsistent alignment with the label /}\n <Block styles={{ overflow: 'clip', width: 'max 0px' }}> </Block>\n <Button\n isDisabled={isDisabled}\n size={size}\n icon={<PlusIcon />}\n onPress={addNewMapping}\n >\n {actionLabel ? actionLabel : 'Mapping'}\n </Button>\n </Space>\n ) : null}\n </Flow>\n );\n\n return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n id: number;\n fieldType: 'key' \| 'value';\n inputType?: 'input' \| 'combobox' \| 'password' \| 'textarea';\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n value?: string;\n options?: string[];\n placeholder?: string;\n onChange?: (id: number, newValue: string) => void;\n onSubmit?: (id: number) => void;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isValid?: boolean;\n autoFocus?: boolean;\n allowsCustomValue?: boolean;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n const {\n id,\n fieldType,\n inputType = 'input',\n options,\n value,\n size = 'medium',\n placeholder,\n allowsCustomValue,\n ...rest\n } = props;\n\n const onChange = useEvent((newValue: string) => {\n props.onChange?.(id, newValue);\n });\n\n const onBlur = useEvent(() => {\n props.onSubmit?.(id);\n });\n\n const onSelectionChange = useEvent((newValue: string) => {\n if (!allowsCustomValue && !options?.includes(newValue)) {\n props.onChange?.(id, '');\n } else {\n props.onChange?.(id, newValue);\n }\n\n props.onSubmit?.(id);\n });\n\n const Component = {\n input: TextInput,\n textarea: TextArea,\n password: PasswordInput,\n }[inputType];\n\n if (inputType === 'combobox') {\n return (\n <ComboBox\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n inputValue={value}\n selectedKey={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n allowsCustomValue={allowsCustomValue}\n onInputChange={onChange}\n onSelectionChange={(val) => onSelectionChange(val ?? '')}\n >\n {(options ?? []).map((option) => (\n <ComboBox.Item key={option}>{option}</ComboBox.Item>\n ))}\n </ComboBox>\n );\n }\n\n return (\n <Component\n qa=\"AddMapping\"\n data-type={fieldType}\n width=\"auto\"\n rows={1}\n size={size}\n {...mergeProps(rest, PROPS_GRID_HACK)}\n id={undefined}\n value={value}\n labelPosition=\"top\"\n aria-label={placeholder}\n placeholder={placeholder}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}

package/dist/components/fields/color/ColorPanel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/channels.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 //#region src/components/fields/color/channels.ts

package/dist/components/fields/color/color.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 //#region src/components/fields/color/color.ts

package/dist/components/fields/color/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";
@@ -6,7 +6,7 @@ import { Space } from "../../layout/Space.js";
 import { InfoBadge } from "../../content/InfoBadge/InfoBadge.js";
 import { Flex } from "../../layout/Flex.js";
 import { getValidationMods } from "../validation/resolve-validation-props.js";
-import { _Label } from "../Label.js";
+import { NecessityIndicatorMark, _Label } from "../Label.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -105,7 +105,10 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				placeItems: "center",
 				gap: "0.75x",
 				children: [
-					/* @__PURE__ */ jsx("div", { children: label }),
+					/* @__PURE__ */ jsxs("div", { children: [label, /* @__PURE__ */ jsx(NecessityIndicatorMark, {
+						isRequired: requiredMark ? isRequired : false,
+						necessityIndicator
+					})] }),
 					tooltip ? /* @__PURE__ */ jsx(InfoBadge, { tooltip }) : null,
 					labelSuffix ? /* @__PURE__ */ jsx("div", { children: labelSuffix }) : null
 				]

package/dist/components/form/FieldWrapper/FieldWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n qa: 'Field',\n styles: {\n display: 'grid',\n width: 'auto',\n gridColumns: {\n '': 'minmax(0, 1fr)',\n 'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n 'has-split': 'auto auto',\n },\n gap: 0,\n placeItems: {\n '': 'baseline stretch',\n 'has-split': 'center',\n },\n placeContent: {\n '': 'initial',\n 'has-split': 'space-between',\n },\n '$full-label-width': '($label-width + 1x)',\n\n LabelArea: {\n display: 'block',\n width: {\n '': 'initial',\n 'has-sider': '$label-width',\n },\n margin: {\n '': '1x bottom',\n 'has-sider': '1x right',\n 'has-split': '1x right',\n ':empty': '0',\n },\n },\n\n InputArea: {\n display: 'block',\n flow: 'column',\n gap: '.5x',\n gridColumn: {\n '': 'initial',\n 'has-sider': 2,\n 'has-split': 2,\n },\n },\n },\n});\n\nif (process.env.NODE_ENV === 'development') {\n FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n qa: 'FieldMessage',\n styles: {\n preset: 't4',\n color: {\n '': '#dark-02',\n invalid: '#danger-text',\n valid: '#success-text',\n disabled: '#dark.40',\n },\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\nconst DescriptionElement = tasty({\n qa: 'FieldDescription',\n styles: {\n preset: 't4',\n color: '#dark-03',\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\n/*\n A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n props: CubeFieldWrapperProps,\n ref,\n) {\n const {\n as,\n labelPosition = 'top',\n label,\n extra,\n styles,\n isRequired,\n isDisabled,\n labelStyles,\n necessityIndicator,\n labelProps,\n fieldProps,\n message,\n messageStyles,\n description,\n errorMessage,\n Component,\n isInvalid,\n isValid,\n requiredMark = true,\n tooltip,\n isHidden,\n labelSuffix,\n children,\n } = props;\n\n const labelComponent = label ? (\n <Label\n as={as === 'label' ? 'div' : 'label'}\n styles={labelStyles}\n labelPosition={labelPosition}\n isRequired={requiredMark ? isRequired : false}\n isDisabled={isDisabled}\n necessityIndicator={necessityIndicator}\n isInvalid={isInvalid}\n isValid={isValid}\n aria-label={typeof label === 'string' ? label : undefined}\n {...labelProps}\n >\n <Flex placeContent=\"baseline space-between\" width=\"100%\">\n <Space placeItems=\"center\" gap=\"0.75x\">\n <div>{label}</div>\n\n {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n {labelSuffix ? <div>{labelSuffix}</div> : null}\n </Space>\n\n {extra && <Text preset=\"t3\">{extra}</Text>}\n </Flex>\n </Label>\n ) : null;\n\n // Create description component with proper styling\n const createDescriptionComponent = () => {\n if (!description) return null;\n\n return (\n <DescriptionElement data-element=\"Description\">\n {wrapNodeIfPlain(description, () => (\n <span>{description}</span>\n ))}\n </DescriptionElement>\n );\n };\n\n // Description positioning based on label position\n const descriptionForLabel =\n labelPosition === 'side' \|\| labelPosition === 'split'\n ? createDescriptionComponent()\n : null;\n const descriptionForInput =\n labelPosition === 'top' ? createDescriptionComponent() : null;\n\n const mods = {\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n 'has-description': !!description,\n ...getValidationMods({ isInvalid, isValid }),\n };\n\n // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n const displayMessage = errorMessage \|\| message;\n const isErrorMessage = !!errorMessage;\n\n // Merge fieldProps with styles to ensure both are applied\n const mergedFieldProps = styles\n ? mergeProps(fieldProps, { styles })\n : fieldProps;\n\n return (\n <>\n <FieldElement\n ref={ref}\n as={as ?? 'div'}\n mods={mods}\n isHidden={isHidden}\n {...mergedFieldProps}\n >\n {labelComponent \|\| descriptionForLabel ? (\n <div data-element=\"LabelArea\">\n {labelComponent}\n {descriptionForLabel}\n </div>\n ) : null}\n <div data-element=\"InputArea\">\n {Component}\n {descriptionForInput}\n {displayMessage && !isDisabled && (\n <MessageElement\n mods={{\n ...mods,\n // Force invalid state for errorMessage regardless of the validation state\n invalid: isErrorMessage \|\| !!isInvalid,\n }}\n styles={messageStyles}\n role={isErrorMessage \|\| isInvalid ? 'alert' : undefined}\n >\n {displayMessage}\n </MessageElement>\n )}\n </div>\n </FieldElement>\n {children}\n </>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,aAAa;GACX,IAAI;GACJ,aAAa;GACb,aAAa;GACd;EACD,KAAK;EACL,YAAY;GACV,IAAI;GACJ,aAAa;GACd;EACD,cAAc;GACZ,IAAI;GACJ,aAAa;GACd;EACD,qBAAqB;EAErB,WAAW;GACT,SAAS;GACT,OAAO;IACL,IAAI;IACJ,aAAa;IACd;GACD,QAAQ;IACN,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;IACX;GACF;EAED,WAAW;GACT,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;IACV,IAAI;IACJ,aAAa;IACb,aAAa;IACd;GACF;EACF;CACF,CAAC;AAGA,aAAa,cAAc;AAG7B,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;;;;;AAMF,MAAa,eAAe,WAAW,SAAS,aAC9C,OACA,KACA;CACA,MAAM,EACJ,IACA,gBAAgB,OAChB,OACA,OACA,QACA,YACA,YACA,aACA,oBACA,YACA,YACA,SACA,eACA,aACA,cACA,WACA,WACA,SACA,eAAe,MACf,SACA,UACA,aACA,aACE;CAEJ,MAAM,iBAAiB,QACrB,oBAACA;EACC,IAAI,OAAO,UAAU,QAAQ;EAC7B,QAAQ;EACO;EACf,YAAY,eAAe,aAAa;EAC5B;EACQ;EACT;EACF;EACT,cAAY,OAAO,UAAU,WAAW,QAAQ;EAChD,GAAI;YAEJ,qBAAC;GAAK,cAAa;GAAyB,OAAM;cAChD,qBAAC;IAAM,YAAW;IAAS,KAAI;;KAC7B,oBAAC,~~mBAAK~~,~~QAAY~~;~~KAEjB~~,UAAU,oBAAC,aAAmB,UAAW,GAAG;KAE5C,cAAc,oBAAC,mBAAK,cAAkB,GAAG;;KACpC,EAEP,SAAS,oBAACC;IAAK,QAAO;cAAM;KAAa;IACrC;GACD,GACN;CAGJ,MAAM,mCAAmC;AACvC,MAAI,CAAC,YAAa,QAAO;AAEzB,SACE,oBAAC;GAAmB,gBAAa;aAC9B,gBAAgB,mBACf,oBAAC,oBAAM,cAAmB,CAC1B;IACiB;;CAKzB,MAAM,sBACJ,kBAAkB,UAAU,kBAAkB,UAC1C,4BAA4B,GAC5B;CACN,MAAM,sBACJ,kBAAkB,QAAQ,4BAA4B,GAAG;CAE3D,MAAM,OAAO;EACX,aAAa,kBAAkB;EAC/B,aAAa,kBAAkB;EAC/B,mBAAmB,CAAC,CAAC;EACrB,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC7C;CAGD,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,mBAAmB,SACrB,WAAW,YAAY,EAAE,QAAQ,CAAC,GAClC;AAEJ,QACE,8CACE,qBAAC;EACM;EACL,IAAI,MAAM;EACJ;EACI;EACV,GAAI;aAEH,kBAAkB,sBACjB,qBAAC;GAAI,gBAAa;cACf,gBACA;IACG,GACJ,MACJ,qBAAC;GAAI,gBAAa;;IACf;IACA;IACA,kBAAkB,CAAC,cAClB,oBAAC;KACC,MAAM;MACJ,GAAG;MAEH,SAAS,kBAAkB,CAAC,CAAC;MAC9B;KACD,QAAQ;KACR,MAAM,kBAAkB,YAAY,UAAU;eAE7C;MACc;;IAEf;GACO,EACd,YACA;EAEL"}
1	+ {"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n qa: 'Field',\n styles: {\n display: 'grid',\n width: 'auto',\n gridColumns: {\n '': 'minmax(0, 1fr)',\n 'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n 'has-split': 'auto auto',\n },\n gap: 0,\n placeItems: {\n '': 'baseline stretch',\n 'has-split': 'center',\n },\n placeContent: {\n '': 'initial',\n 'has-split': 'space-between',\n },\n '$full-label-width': '($label-width + 1x)',\n\n LabelArea: {\n display: 'block',\n width: {\n '': 'initial',\n 'has-sider': '$label-width',\n },\n margin: {\n '': '1x bottom',\n 'has-sider': '1x right',\n 'has-split': '1x right',\n ':empty': '0',\n },\n },\n\n InputArea: {\n display: 'block',\n flow: 'column',\n gap: '.5x',\n gridColumn: {\n '': 'initial',\n 'has-sider': 2,\n 'has-split': 2,\n },\n },\n },\n});\n\nif (process.env.NODE_ENV === 'development') {\n FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n qa: 'FieldMessage',\n styles: {\n preset: 't4',\n color: {\n '': '#dark-02',\n invalid: '#danger-text',\n valid: '#success-text',\n disabled: '#dark.40',\n },\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\nconst DescriptionElement = tasty({\n qa: 'FieldDescription',\n styles: {\n preset: 't4',\n color: '#dark-03',\n textAlign: 'left',\n userSelect: 'none',\n },\n});\n\n/*\n A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n /\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n props: CubeFieldWrapperProps,\n ref,\n) {\n const {\n as,\n labelPosition = 'top',\n label,\n extra,\n styles,\n isRequired,\n isDisabled,\n labelStyles,\n necessityIndicator,\n labelProps,\n fieldProps,\n message,\n messageStyles,\n description,\n errorMessage,\n Component,\n isInvalid,\n isValid,\n requiredMark = true,\n tooltip,\n isHidden,\n labelSuffix,\n children,\n } = props;\n\n const labelComponent = label ? (\n <Label\n as={as === 'label' ? 'div' : 'label'}\n styles={labelStyles}\n labelPosition={labelPosition}\n isRequired={requiredMark ? isRequired : false}\n isDisabled={isDisabled}\n necessityIndicator={necessityIndicator}\n isInvalid={isInvalid}\n isValid={isValid}\n aria-label={typeof label === 'string' ? label : undefined}\n {...labelProps}\n >\n <Flex placeContent=\"baseline space-between\" width=\"100%\">\n <Space placeItems=\"center\" gap=\"0.75x\">\n <div>\n {label}\n {/\n `Label` can only append the marker itself when its child is plain\n text, and the tree below is not — so it is placed here, against\n the label text, rather than after the full-width `Flex`.\n */}\n <NecessityIndicatorMark\n isRequired={requiredMark ? isRequired : false}\n necessityIndicator={necessityIndicator}\n />\n </div>\n\n {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n {labelSuffix ? <div>{labelSuffix}</div> : null}\n </Space>\n\n {extra && <Text preset=\"t3\">{extra}</Text>}\n </Flex>\n </Label>\n ) : null;\n\n // Create description component with proper styling\n const createDescriptionComponent = () => {\n if (!description) return null;\n\n return (\n <DescriptionElement data-element=\"Description\">\n {wrapNodeIfPlain(description, () => (\n <span>{description}</span>\n ))}\n </DescriptionElement>\n );\n };\n\n // Description positioning based on label position\n const descriptionForLabel =\n labelPosition === 'side' \|\| labelPosition === 'split'\n ? createDescriptionComponent()\n : null;\n const descriptionForInput =\n labelPosition === 'top' ? createDescriptionComponent() : null;\n\n const mods = {\n 'has-sider': labelPosition === 'side',\n 'has-split': labelPosition === 'split',\n 'has-description': !!description,\n ...getValidationMods({ isInvalid, isValid }),\n };\n\n // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n const displayMessage = errorMessage \|\| message;\n const isErrorMessage = !!errorMessage;\n\n // Merge fieldProps with styles to ensure both are applied\n const mergedFieldProps = styles\n ? mergeProps(fieldProps, { styles })\n : fieldProps;\n\n return (\n <>\n <FieldElement\n ref={ref}\n as={as ?? 'div'}\n mods={mods}\n isHidden={isHidden}\n {...mergedFieldProps}\n >\n {labelComponent \|\| descriptionForLabel ? (\n <div data-element=\"LabelArea\">\n {labelComponent}\n {descriptionForLabel}\n </div>\n ) : null}\n <div data-element=\"InputArea\">\n {Component}\n {descriptionForInput}\n {displayMessage && !isDisabled && (\n <MessageElement\n mods={{\n ...mods,\n // Force invalid state for errorMessage regardless of the validation state\n invalid: isErrorMessage \|\| !!isInvalid,\n }}\n styles={messageStyles}\n role={isErrorMessage \|\| isInvalid ? 'alert' : undefined}\n >\n {displayMessage}\n </MessageElement>\n )}\n </div>\n </FieldElement>\n {children}\n </>\n );\n});\n"],"mappings":"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"}

package/dist/components/form/Form/Field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Form.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

package/dist/components/form/Form/ResetButton/ResetButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

package/dist/components/form/Form/SubmitError.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";

package/dist/components/form/Form/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useForm } from "./use-form.js";
 import { FormContext, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";

package/dist/components/form/Form/use-field/use-field-props.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { resolveValidationProps } from "../../validation/resolve-validation-props.js";

package/dist/components/form/Form/use-form.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { applyRules } from "./validation.js";
 import { dotize } from "@tenphi/tasty";
 import { useRef, useState } from "react";

package/dist/components/form/Form/validation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";

package/dist/components/form/Label.d.ts CHANGED Viewed

@@ -3,8 +3,35 @@ import { LabelPosition, NecessityIndicator, ValidationProps } from "../../shared
 import "../../shared/index.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/form/Label.d.ts
+interface CubeNecessityIndicatorProps {
+  /**
+   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`
+   * text. `null` suppresses it — `Label` resolves its own default to that when
+   * `isRequired` was never passed, and forwards the result here.
+   */
+  necessityIndicator?: NecessityIndicator | null;
+  isRequired?: boolean;
+  /**
+   * Whether the indicator contributes to the field's accessible name. Off by
+   * default because a required field already announces `aria-required`, and
+   * repeating it in the name is noise.
+   */
+  includeNecessityIndicatorInAccessibilityName?: boolean;
+}
+/**
+ * The `*` or `(required)` / `(optional)` marker that follows a field label.
+ *
+ * Its own component because two places render it and both need the same
+ * strings: `Label` when it is given plain text, and `FieldWrapper`, which
+ * builds a element tree around the label and therefore has to place the marker
+ * beside the label text itself rather than after the whole tree.
+ *
+ * Renders nothing unless a marker was actually asked for.
+ */
+declare function NecessityIndicatorMark(props: CubeNecessityIndicatorProps): react_jsx_runtime0.JSX.Element | null;
 declare const INLINE_LABEL_STYLES: Styles;
 declare const LABEL_STYLES: Styles;
 interface CubeLabelProps extends BaseProps, ContainerStyleProps, ValidationProps {
@@ -18,5 +45,5 @@ interface CubeLabelProps extends BaseProps, ContainerStyleProps, ValidationProps
 }
 declare let _Label: react.ForwardRefExoticComponent<CubeLabelProps & react.RefAttributes<unknown>>;
 //#endregion
-export { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
+export { CubeLabelProps, CubeNecessityIndicatorProps, INLINE_LABEL_STYLES, LABEL_STYLES, NecessityIndicatorMark, _Label };
 //# sourceMappingURL=Label.d.ts.map

package/dist/components/form/Label.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
@@ -26,6 +26,34 @@ const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
 		points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57"
 	}) }) })
 });
+/**
+* The `*` or `(required)` / `(optional)` marker that follows a field label.
+*
+* Its own component because two places render it and both need the same
+* strings: `Label` when it is given plain text, and `FieldWrapper`, which
+* builds a element tree around the label and therefore has to place the marker
+* beside the label text itself rather than after the whole tree.
+*
+* Renders nothing unless a marker was actually asked for.
+*/
+function NecessityIndicatorMark(props) {
+	const { isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false } = props;
+	const { t } = useI18n();
+	const requiredLabel = t("form.required", "(required)");
+	const separator = " ";
+	if (necessityIndicator === "icon") {
+		if (!isRequired) return null;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
+			"aria-label": includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0,
+			children: REQUIRED_ICON
+		})] });
+	}
+	if (necessityIndicator !== "label") return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
+		"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
+		children: isRequired ? requiredLabel : t("form.optional", "(optional)")
+	})] });
+}
 const INLINE_LABEL_STYLES = {
 	preset: "t3",
 	color: {
@@ -60,11 +88,10 @@ function Label(props, ref) {
 	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, isInvalid, isValid, size = "medium", for: labelFor, ...otherProps } = props;
 	let domRef = useObjectRef(ref);
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
-	let requiredLabel = t("form.required", "(required)");
-	let necessityLabel = isRequired ? requiredLabel : t("form.optional", "(optional)");
-	let icon = /* @__PURE__ */ jsx("span", {
-		"aria-label": includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0,
-		children: REQUIRED_ICON
+	const mark = /* @__PURE__ */ jsx(NecessityIndicatorMark, {
+		isRequired,
+		necessityIndicator,
+		includeNecessityIndicatorInAccessibilityName
 	});
 	return /* @__PURE__ */ jsx(LabelElement, {
 		...filterBaseProps(otherProps),
@@ -80,20 +107,12 @@ function Label(props, ref) {
 				isValid
 			})
 		},
-		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			children,
-			(necessityIndicator === "label" || necessityIndicator === "icon" && isRequired) && " ",
-			necessityIndicator === "label" && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
-				children: necessityLabel
-			}),
-			necessityIndicator === "icon" && isRequired && icon
-		] })
+		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [children, mark] })
 	});
 }
 let _Label = forwardRef(Label);
 _Label.displayName = "Label";
 //#endregion
-export { INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
+export { INLINE_LABEL_STYLES, LABEL_STYLES, NecessityIndicatorMark, _Label };
 //# sourceMappingURL=Label.js.map

package/dist/components/form/Label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n LabelPosition,\n NecessityIndicator,\n ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 125\"\n style={{\n // @ts-ignore\n enableBackground: 'new 0 0 100 100',\n width: '.8em',\n height: '.8em',\n transform: 'rotate(-5deg)',\n }}\n >\n <switch>\n <g>\n <polygon\n fill=\"currentColor\"\n points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2 50,70.3 68.1,95.2 86.3,82 68.2,57\"\n />\n </g>\n </switch>\n </svg>\n);\n\nexport const INLINE_LABEL_STYLES: Styles = {\n preset: 't3',\n color: {\n '': '#dark-02',\n invalid: '#danger-text',\n },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n display: 'block',\n preset: {\n '': 't3m',\n 'size=small': 't4',\n },\n color: {\n '': '#dark',\n invalid: '#danger-text',\n },\n width: {\n '': 'initial',\n side: '($label-width, initial)',\n split: 'initial',\n },\n};\n\nconst LabelElement = tasty({\n as: 'label',\n qa: 'Label',\n styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n extends BaseProps,\n ContainerStyleProps,\n ValidationProps {\n labelPosition?: LabelPosition;\n necessityIndicator?: NecessityIndicator;\n isRequired?: boolean;\n includeNecessityIndicatorInAccessibilityName?: boolean;\n htmlFor?: string;\n for?: string;\n size?: 'medium' \| 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n props = useProviderProps<CubeLabelProps>(props);\n\n const { t } = useI18n();\n\n let {\n as,\n qa,\n children,\n labelPosition = 'top',\n isRequired,\n necessityIndicator = isRequired != null ? 'icon' : null,\n includeNecessityIndicatorInAccessibilityName = false,\n htmlFor,\n isDisabled,\n isInvalid,\n isValid,\n size = 'medium',\n for: labelFor,\n ...otherProps\n } = props;\n\n let domRef = useObjectRef(ref);\n\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n ~~let~~ ~~requiredLabel~~ = t(~~'form.required', '(required)');\n let necessityLabel = isRequired~~\n ~~? requiredLabel~~\n ~~: t('form.optional', '(optional)');\n let icon~~ = (\n ~~<span~~\n ~~aria-label~~={\n includeNecessityIndicatorInAccessibilityName ~~? requiredLabel : undefined~~\n }\n >\n ~~{REQUIRED_ICON}\n </span>\n~~ );\n\n return (\n <LabelElement\n {...filterBaseProps(otherProps)}\n ref={domRef}\n styles={styles}\n htmlFor={labelFor \|\| htmlFor}\n data-size={size}\n mods={{\n side: labelPosition === 'side',\n disabled: isDisabled,\n ...getValidationMods({ isInvalid, isValid }),\n }}\n >\n {~~typeof children !== 'string' ? (\~~n ~~children\n )~~ : ~~(\n <>\n {children}\n {(necessityIndicator~~ ~~===~~ ~~'label'~~ ~~\|\|\n (necessityIndicator~~ ~~===~~ ~~'icon'~~ && ~~isRequired))~~ ~~&&\n '~~ ~~\\u200b~~'}\n {/* ~~necessityLabel~~ is ~~hidden~~ to ~~screen~~ ~~readers~~ if the ~~field~~ is ~~required~~ ~~because~~\n * ~~aria-required~~ is ~~set~~ on ~~the~~ ~~field~~ in ~~that~~ ~~case.~~ ~~That~~ ~~will~~ ~~already~~ be ~~announced,\~~n * so no ~~need~~ to ~~duplicate~~ it ~~here.~~ If ~~optional,~~ we do ~~want~~ it to be ~~announced~~ ~~here.~~ */}\n {~~necessityIndicator~~ ~~===~~ '~~label~~' && (\n ~~<span~~\n ~~aria-hidden={\n !includeNecessityIndicatorInAccessibilityName\n ?~~ ~~isRequired\n~~ : ~~undefined~~\n }\n ~~>\n~~ {~~necessityLabel~~}\n ~~</span>\n~~ ~~)}\n~~ {~~necessityIndicator === 'icon' && isRequired && icon~~}\n </>\n )}\n </LabelElement>\n );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;~~AAGR~~,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAeF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,~~IAAI~~,~~gBAAgB~~,~~EAAE,iBAAiB,aAAa~~;~~CACpD,IAAI,iBAAiB,aACjB,gBACA,EAAE,iBAAiB,aAAa~~;~~CACpC,IAAI,OACF,oBAAC~~;~~EACC,cACE,+CAA+C,gBAAgB~~;~~YAGhE~~;~~GACI;AAGT~~,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;~~YAEA~~,OAAO,aAAa,WACnB,WAEA~~;GACG;IACC~~,~~uBAAuB~~,~~WACtB~~,~~uBAAuB,UAAU,eAClC~~;~~GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;~~GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
1	+ {"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n LabelPosition,\n NecessityIndicator,\n ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 125\"\n style={{\n // @ts-ignore\n enableBackground: 'new 0 0 100 100',\n width: '.8em',\n height: '.8em',\n transform: 'rotate(-5deg)',\n }}\n >\n <switch>\n <g>\n <polygon\n fill=\"currentColor\"\n points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2 50,70.3 68.1,95.2 86.3,82 68.2,57\"\n />\n </g>\n </switch>\n </svg>\n);\n\nexport interface CubeNecessityIndicatorProps {\n /*\n `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n * text. `null` suppresses it — `Label` resolves its own default to that when\n * `isRequired` was never passed, and forwards the result here.\n /\n necessityIndicator?: NecessityIndicator \| null;\n isRequired?: boolean;\n /\n Whether the indicator contributes to the field's accessible name. Off by\n * default because a required field already announces `aria-required`, and\n * repeating it in the name is noise.\n /\n includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/\n The `` or `(required)` / `(optional)` marker that follows a field label.\n \n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n \n Renders nothing unless a marker was actually asked for.\n /\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n const {\n isRequired,\n // Same default as `Label`'s own prop: passing `isRequired` at all opts into\n // the asterisk, and `'label'` has to be asked for. Applied here so the two\n // call sites cannot disagree about what an omitted prop means.\n necessityIndicator = isRequired != null ? 'icon' : null,\n includeNecessityIndicatorInAccessibilityName = false,\n } = props;\n const { t } = useI18n();\n\n const requiredLabel = t('form.required', '(required)');\n\n // A plain space would collapse against the label text in a flex container,\n // and the zero-width space keeps the pair from being split across lines.\n const separator = ' ';\n\n if (necessityIndicator === 'icon') {\n if (!isRequired) return null;\n\n return (\n <>\n {separator}\n <span\n aria-label={\n includeNecessityIndicatorInAccessibilityName\n ? requiredLabel\n : undefined\n }\n >\n {REQUIRED_ICON}\n </span>\n </>\n );\n }\n\n if (necessityIndicator !== 'label') return null;\n\n // Hidden from screen readers when the field is required, because\n // `aria-required` on the input already announces it. When the field is\n // optional there is nothing else saying so, so that one is announced.\n return (\n <>\n {separator}\n <span\n aria-hidden={\n !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n }\n >\n {isRequired ? requiredLabel : t('form.optional', '(optional)')}\n </span>\n </>\n );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n preset: 't3',\n color: {\n '': '#dark-02',\n invalid: '#danger-text',\n },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n display: 'block',\n preset: {\n '': 't3m',\n 'size=small': 't4',\n },\n color: {\n '': '#dark',\n invalid: '#danger-text',\n },\n width: {\n '': 'initial',\n side: '($label-width, initial)',\n split: 'initial',\n },\n};\n\nconst LabelElement = tasty({\n as: 'label',\n qa: 'Label',\n styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n extends BaseProps,\n ContainerStyleProps,\n ValidationProps {\n labelPosition?: LabelPosition;\n necessityIndicator?: NecessityIndicator;\n isRequired?: boolean;\n includeNecessityIndicatorInAccessibilityName?: boolean;\n htmlFor?: string;\n for?: string;\n size?: 'medium' \| 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n props = useProviderProps<CubeLabelProps>(props);\n\n const { t } = useI18n();\n\n let {\n as,\n qa,\n children,\n labelPosition = 'top',\n isRequired,\n necessityIndicator = isRequired != null ? 'icon' : null,\n includeNecessityIndicatorInAccessibilityName = false,\n htmlFor,\n isDisabled,\n isInvalid,\n isValid,\n size = 'medium',\n for: labelFor,\n ...otherProps\n } = props;\n\n let domRef = useObjectRef(ref);\n\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n const mark = (\n <NecessityIndicatorMark\n isRequired={isRequired}\n necessityIndicator={necessityIndicator}\n includeNecessityIndicatorInAccessibilityName={\n includeNecessityIndicatorInAccessibilityName\n }\n />\n );\n\n return (\n <LabelElement\n {...filterBaseProps(otherProps)}\n ref={domRef}\n styles={styles}\n htmlFor={labelFor \|\| htmlFor}\n data-size={size}\n mods={{\n side: labelPosition === 'side',\n disabled: isDisabled,\n ...getValidationMods({ isInvalid, isValid }),\n }}\n >\n {/\n A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n full-width `Flex`, for one \\u2014 and appending the marker after it would put\n it at the far end of that layout rather than next to the label text. So\n the marker is only appended here for plain-text labels; callers that\n build their own tree place `NecessityIndicatorMark` where it belongs.\n */}\n {typeof children !== 'string' ? (\n children\n ) : (\n <>\n {children}\n {mark}\n </>\n )}\n </LabelElement>\n );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;;;;;;;;;;;AA6BR,SAAgB,uBAAuB,OAAoC;CACzE,MAAM,EACJ,YAIA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,UAC7C;CACJ,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,gBAAgB,EAAE,iBAAiB,aAAa;CAItD,MAAM,YAAY;AAElB,KAAI,uBAAuB,QAAQ;AACjC,MAAI,CAAC,WAAY,QAAO;AAExB,SACE,8CACG,WACD,oBAAC;GACC,cACE,+CACI,gBACA;aAGL;IACI,IACN;;AAIP,KAAI,uBAAuB,QAAS,QAAO;AAK3C,QACE,8CACG,WACD,oBAAC;EACC,eACE,CAAC,+CAA+C,aAAa;YAG9D,aAAa,gBAAgB,EAAE,iBAAiB,aAAa;GACzD,IACN;;AAIP,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAeF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,MAAM,OACJ,oBAAC;EACa;EACQ;EAElB;GAEF;AAGJ,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YASA,OAAO,aAAa,WACnB,WAEA,8CACG,UACA,QACA;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

package/dist/components/form/index.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { UseFieldParams, useField } from "./Form/use-field/use-field.js";
 import { UseFieldPropsParams, useFieldProps } from "./Form/use-field/use-field-props.js";
 import { Form } from "./Form/index.js";
 import { wrapWithField } from "./wrapper.js";
-import { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label } from "./Label.js";
+import { CubeLabelProps, CubeNecessityIndicatorProps, INLINE_LABEL_STYLES, LABEL_STYLES, NecessityIndicatorMark, _Label } from "./Label.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { CubeFieldWrapperProps } from "./FieldWrapper/types.js";
 import "./FieldWrapper/index.js";

package/dist/components/form/validation/ValidationIndicator.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { hasValidationState } from "./resolve-validation-props.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/form/validation/resolve-validation-props.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 //#region src/components/form/validation/resolve-validation-props.ts
 /**
 * Normalizes the validation props of a field into a pair of booleans.

package/dist/components/form/validation/use-validation-props.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";

package/dist/components/form/wrapper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/helpers/DisplayTransition/DisplayTransition.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

package/dist/components/layout/Board/Board.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-41fe9cd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-46b9ad8 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";