npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.320 → 0.3.322 - Mend

@bitrise/bitkit-v2 0.3.320 → 0.3.322

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 (8) hide show

package/dist/components/BitkitTagsInput/BitkitTagsInput.d.ts CHANGED Viewed

@@ -5,6 +5,14 @@ export interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children'
     blurBehavior?: TagsInput.RootProps['blurBehavior'];
     defaultValue?: string[];
     delimiter?: TagsInput.RootProps['delimiter'];
+    /**
+     * Predicate that marks individual tags as invalid: a tag whose value returns `true` is rendered
+     * in the red color set (like BitkitTag `colorVariant="red"`). Unlike `validate` — which gates
+     * whether a tag can be *added* — this styles tags that are already in the list (e.g. a pasted
+     * or pre-filled value that fails a format check). While any tag is invalid the whole field flips
+     * to the error state automatically; pass `errorText` to surface the accompanying message.
+     */
+    isValueInvalid?: (value: string) => boolean;
     max?: number;
     onValueChange?: TagsInput.RootProps['onValueChange'];
     placeholder?: string;

package/dist/components/BitkitTagsInput/BitkitTagsInput.js CHANGED Viewed

@@ -4,7 +4,7 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitLabel from "../BitkitLabel/BitkitLabel.js";
 import BitkitField from "../BitkitField/BitkitField.js";
 import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TagsInput } from "@chakra-ui/react/tags-input";
 //#region lib/components/BitkitTagsInput/BitkitTagsInput.tsx
@@ -16,13 +16,22 @@ var rejectEmpty = ({ inputValue }) => inputValue.trim().length > 0;
 * number of tags — a live counter is then shown next to the label.
 */
 var BitkitTagsInput = forwardRef((props, ref) => {
-	const { addOnPaste = true, blurBehavior = "add", defaultValue, delimiter = /[\s,]+/, max, onValueChange, placeholder, size = "lg", state, validate, value, badge, label, optional, tooltip, ...fieldProps } = props;
+	const { addOnPaste = true, blurBehavior = "add", defaultValue, delimiter = /[\s,]+/, isValueInvalid, max, onValueChange, placeholder, size = "lg", state, validate, value, badge, label, optional, tooltip, ...fieldProps } = props;
 	const effectiveValidate = (details) => rejectEmpty(details) && (validate?.(details) ?? true);
 	const styles = useSlotRecipe({ key: "tagsInput" })({ size });
-	const hasWarning = state === "warning" || !!fieldProps.warningText;
-	const isInvalid = state === "error" || !!fieldProps.errorText;
-	const isDisabled = state === "disabled";
-	const isReadOnly = state === "readOnly";
+	const [uncontrolledValues, setUncontrolledValues] = useState(defaultValue ?? []);
+	const currentValues = value ?? uncontrolledValues;
+	const handleValueChange = (details) => {
+		if (value === void 0) setUncontrolledValues(details.value);
+		onValueChange?.(details);
+	};
+	const hasInvalidTag = !!isValueInvalid && currentValues.some(isValueInvalid);
+	const effectiveState = hasInvalidTag && state !== "disabled" && state !== "readOnly" ? "error" : state;
+	const showInvalidTags = hasInvalidTag && effectiveState !== "disabled" && effectiveState !== "readOnly";
+	const hasWarning = effectiveState === "warning" || !!fieldProps.warningText;
+	const isInvalid = effectiveState === "error" || !!fieldProps.errorText;
+	const isDisabled = effectiveState === "disabled";
+	const isReadOnly = effectiveState === "readOnly";
 	let statusIcon = void 0;
 	if (isInvalid) statusIcon = /* @__PURE__ */ jsx(IconErrorCircleFilled, {
 		color: "icon/negative",
@@ -37,7 +46,7 @@ var BitkitTagsInput = forwardRef((props, ref) => {
 		disabled: isDisabled,
 		invalid: isInvalid,
 		max,
-		onValueChange,
+		onValueChange: handleValueChange,
 		readOnly: isReadOnly,
 		size,
 		validate: effectiveValidate,
@@ -45,7 +54,7 @@ var BitkitTagsInput = forwardRef((props, ref) => {
 		children: /* @__PURE__ */ jsx(TagsInput.Context, { children: ({ value: tagValues }) => /* @__PURE__ */ jsxs(BitkitField, {
 			optional,
 			ref,
-			state,
+			state: effectiveState,
 			...fieldProps,
 			counterText: void 0,
 			children: [
@@ -64,7 +73,10 @@ var BitkitTagsInput = forwardRef((props, ref) => {
 					children: [tagValues.map((tagValue, index) => /* @__PURE__ */ jsxs(TagsInput.Item, {
 						index,
 						value: tagValue,
-						children: [/* @__PURE__ */ jsxs(TagsInput.ItemPreview, { children: [/* @__PURE__ */ jsx(TagsInput.ItemText, { children: tagValue }), !isReadOnly && /* @__PURE__ */ jsx(TagsInput.ItemDeleteTrigger, { children: /* @__PURE__ */ jsx(IconCross, { size: "16" }) })] }), /* @__PURE__ */ jsx(TagsInput.ItemInput, {})]
+						children: [/* @__PURE__ */ jsxs(TagsInput.ItemPreview, {
+							"data-invalid": showInvalidTags && isValueInvalid?.(tagValue) || void 0,
+							children: [/* @__PURE__ */ jsx(TagsInput.ItemText, { children: tagValue }), !isReadOnly && /* @__PURE__ */ jsx(TagsInput.ItemDeleteTrigger, { children: /* @__PURE__ */ jsx(IconCross, { size: "16" }) })]
+						}), /* @__PURE__ */ jsx(TagsInput.ItemInput, {})]
 					}, tagValue)), /* @__PURE__ */ jsx(TagsInput.Input, { placeholder })]
 				}), (statusIcon || tagValues.length > 0 && !isDisabled && !isReadOnly) && /* @__PURE__ */ jsxs(chakra.div, {
 					css: styles.suffixBlock,

package/dist/components/BitkitTagsInput/BitkitTagsInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitTagsInput.js","names":[],"sources":["../../../lib/components/BitkitTagsInput/BitkitTagsInput.tsx"],"sourcesContent":["import { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { TagsInput } from '@chakra-ui/react/tags-input';\nimport { forwardRef } from 'react';\n\nimport { IconCross, IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\n// `counterText` is derived from `max`, so it isn't a public prop here.\nexport interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children' \| 'counterText' \| 'state'> {\n addOnPaste?: TagsInput.RootProps['addOnPaste'];\n blurBehavior?: TagsInput.RootProps['blurBehavior'];\n defaultValue?: string[];\n delimiter?: TagsInput.RootProps['delimiter'];\n max?: number;\n onValueChange?: TagsInput.RootProps['onValueChange'];\n placeholder?: string;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n validate?: TagsInput.RootProps['validate'];\n value?: string[];\n}\n\nconst rejectEmpty: NonNullable<TagsInput.RootProps['validate']> = ({ inputValue }) => inputValue.trim().length > 0;\n\n/*\n A field for entering a list of short string tags: type and commit a tag with Enter or a delimiter\n * (comma or whitespace by default); pasting splits on the same delimiter. Tags can be removed one at\n * a time or cleared all at once, and empty/whitespace-only input is rejected. Pass `max` to cap the\n * number of tags — a live counter is then shown next to the label.\n */\nconst BitkitTagsInput = forwardRef<HTMLDivElement, BitkitTagsInputProps>((props, ref) => {\n const {\n addOnPaste = true,\n blurBehavior = 'add',\n defaultValue,\n // Greedy `+` collapses runs of whitespace/commas into a single delimiter so pasting\n // \"alpha, beta\" doesn't spawn an empty tag between the alpha and beta.\n delimiter = /[\\s,]+/,\n max,\n onValueChange,\n placeholder,\n size = 'lg',\n state,\n validate,\n value,\n // Label chrome is rendered via TagsInput.Label (see below), not BitkitField, so it\n // associates with TagsInput.Input. Pull these out of the props forwarded to BitkitField.\n badge,\n label,\n optional,\n tooltip,\n ...fieldProps\n } = props;\n\n // Always reject empty/whitespace-only input (covers leading/trailing delimiters on paste\n // and blurBehavior=\"add\" with an empty input). Chain with a user-supplied validate if any.\n const effectiveValidate: NonNullable<TagsInput.RootProps['validate']> = (details) =>\n rejectEmpty(details) && (validate?.(details) ?? true);\n\n const styles = useSlotRecipe({ key: 'tagsInput' })({ size });\n\n const hasWarning = state === 'warning' \|\| !!fieldProps.warningText;\n const isInvalid = state === 'error' \|\| !!fieldProps.errorText;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={size === 'lg' ? '24' : '16'} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n }\n\n return (\n <TagsInput.Root\n addOnPaste={addOnPaste}\n blurBehavior={blurBehavior}\n defaultValue={defaultValue}\n delimiter={delimiter}\n disabled={isDisabled}\n invalid={isInvalid}\n max={max}\n onValueChange={onValueChange}\n readOnly={isReadOnly}\n size={size}\n validate={effectiveValidate}\n value={value}\n >\n <TagsInput.Context>\n {({ value: tagValues }) => (\n // Strip any stray runtime `counterText` (not a public prop) so it can't slip through\n // `fieldProps` into BitkitField and resurrect an orphaned Field.Label; the counter is\n // rendered via TagsInput.Label instead.\n <BitkitField optional={optional} ref={ref} state={state} {...fieldProps} counterText={undefined}>\n {(!!label \|\| !!badge \|\| max !== undefined) && (\n // Chakra's Field.Label wires htmlFor to the Field machine's control, which the\n // TagsInput input never claims (separate Ark machine). TagsInput.Label is the\n // documented composition — it associates with TagsInput.Input.\n <TagsInput.Label asChild>\n <BitkitLabel\n badge={badge}\n counterText={max !== undefined ? `${tagValues.length}/${max}` : undefined}\n optional={optional}\n tooltip={tooltip}\n >\n {label}\n </BitkitLabel>\n </TagsInput.Label>\n )}\n <TagsInput.Control>\n <chakra.div css={styles.tagsBlock}>\n {tagValues.map((tagValue, index) => (\n <TagsInput.Item index={index} key={tagValue} value={tagValue}>\n <TagsInput.ItemPreview>\n <TagsInput.ItemText>{tagValue}</TagsInput.ItemText>\n {!isReadOnly && (\n <TagsInput.ItemDeleteTrigger>\n <IconCross size=\"16\" />\n </TagsInput.ItemDeleteTrigger>\n )}\n </TagsInput.ItemPreview>\n <TagsInput.ItemInput />\n </TagsInput.Item>\n ))}\n <TagsInput.Input placeholder={placeholder} />\n </chakra.div>\n {(statusIcon \|\| (tagValues.length > 0 && !isDisabled && !isReadOnly)) && (\n <chakra.div css={styles.suffixBlock}>\n {statusIcon}\n {tagValues.length > 0 && !isDisabled && !isReadOnly && (\n <TagsInput.ClearTrigger css={styles.clearTrigger}>\n <IconCross size={size === 'lg' ? '24' : '16'} />\n </TagsInput.ClearTrigger>\n )}\n </chakra.div>\n )}\n </TagsInput.Control>\n <TagsInput.HiddenInput />\n </BitkitField>\n )}\n </TagsInput.Context>\n </TagsInput.Root>\n );\n});\n\nBitkitTagsInput.displayName = 'BitkitTagsInput';\nexport default BitkitTagsInput;\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,eAA6D,EAAE,iBAAiB,WAAW,KAAK,CAAC,CAAC,SAAS;;;;;;;AAQjH,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,aAAa,MACb,eAAe,OACf,cAGA,YAAY,UACZ,KACA,eACA,aACA,OAAO,MACP,OACA,UACA,OAGA,OACA,OACA,UACA,SACA,GAAG,eACD;CAIJ,MAAM,qBAAmE,YACvE,YAAY,OAAO,MAAM,WAAW,OAAO,KAAK;CAElD,MAAM,SAAS,cAAc,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;CAE3D,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,UAAU;CAE7B,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAGtE,OACE,oBAAC,UAAU,MAAX;EACc;EACE;EACA;EACH;EACX,UAAU;EACV,SAAS;EACJ;EACU;EACf,UAAU;EACJ;EACN,UAAU;EACH;YAEP,oBAAC,UAAU,SAAX,EAAA,WACI,EAAE,OAAO,gBAIT,qBAAC,aAAD;GAAuB;GAAe;GAAY;GAAO,GAAI;GAAY,aAAa,KAAA;aAAtF;KACI,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,QAAQ,KAAA,MAI9B,oBAAC,UAAU,OAAX;KAAiB,SAAA;eACf,oBAAC,aAAD;MACS;MACP,aAAa,QAAQ,KAAA,IAAY,GAAG,UAAU,OAAO,GAAG,QAAQ,KAAA;MACtD;MACD;gBAER;KACU,CAAA;IACE,CAAA;IAEnB,qBAAC,UAAU,SAAX,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;eAAxB,CACG,UAAU,KAAK,UAAU,UACxB,qBAAC,UAAU,MAAX;MAAuB;MAAsB,OAAO;gBAApD,CACE,qBAAC,UAAU,aAAX,EAAA,UAAA,CACE,oBAAC,UAAU,UAAX,EAAA,UAAqB,SAA6B,CAAA,GACjD,CAAC,cACA,oBAAC,UAAU,mBAAX,EAAA,UACE,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,EACK,CAAA,CAEV,EAAA,CAAA,GACvB,oBAAC,UAAU,WAAX,CAAsB,CAAA,CACR;QAVmB,QAUnB,CACjB,GACD,oBAAC,UAAU,OAAX,EAA8B,YAAc,CAAA,CAClC;SACV,cAAe,UAAU,SAAS,KAAK,CAAC,cAAc,CAAC,eACvD,qBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;eAAxB,CACG,YACA,UAAU,SAAS,KAAK,CAAC,cAAc,CAAC,cACvC,oBAAC,UAAU,cAAX;MAAwB,KAAK,OAAO;gBAClC,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KACzB,CAAA,CAEhB;MAEG,EAAA,CAAA;IACnB,oBAAC,UAAU,aAAX,CAAwB,CAAA;GACb;KAEE,CAAA;CACL,CAAA;AAEpB,CAAC;AAED,gBAAgB,cAAc"}
1	+ {"version":3,"file":"BitkitTagsInput.js","names":[],"sources":["../../../lib/components/BitkitTagsInput/BitkitTagsInput.tsx"],"sourcesContent":["import { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { TagsInput } from '@chakra-ui/react/tags-input';\nimport { forwardRef, useState } from 'react';\n\nimport { IconCross, IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\n// `counterText` is derived from `max`, so it isn't a public prop here.\nexport interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children' \| 'counterText' \| 'state'> {\n addOnPaste?: TagsInput.RootProps['addOnPaste'];\n blurBehavior?: TagsInput.RootProps['blurBehavior'];\n defaultValue?: string[];\n delimiter?: TagsInput.RootProps['delimiter'];\n /*\n Predicate that marks individual tags as invalid: a tag whose value returns `true` is rendered\n * in the red color set (like BitkitTag `colorVariant=\"red\"`). Unlike `validate` — which gates\n * whether a tag can be added — this styles tags that are already in the list (e.g. a pasted\n * or pre-filled value that fails a format check). While any tag is invalid the whole field flips\n * to the error state automatically; pass `errorText` to surface the accompanying message.\n /\n isValueInvalid?: (value: string) => boolean;\n max?: number;\n onValueChange?: TagsInput.RootProps['onValueChange'];\n placeholder?: string;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n validate?: TagsInput.RootProps['validate'];\n value?: string[];\n}\n\nconst rejectEmpty: NonNullable<TagsInput.RootProps['validate']> = ({ inputValue }) => inputValue.trim().length > 0;\n\n/\n A field for entering a list of short string tags: type and commit a tag with Enter or a delimiter\n * (comma or whitespace by default); pasting splits on the same delimiter. Tags can be removed one at\n * a time or cleared all at once, and empty/whitespace-only input is rejected. Pass `max` to cap the\n * number of tags — a live counter is then shown next to the label.\n */\nconst BitkitTagsInput = forwardRef<HTMLDivElement, BitkitTagsInputProps>((props, ref) => {\n const {\n addOnPaste = true,\n blurBehavior = 'add',\n defaultValue,\n // Greedy `+` collapses runs of whitespace/commas into a single delimiter so pasting\n // \"alpha, beta\" doesn't spawn an empty tag between the alpha and beta.\n delimiter = /[\\s,]+/,\n isValueInvalid,\n max,\n onValueChange,\n placeholder,\n size = 'lg',\n state,\n validate,\n value,\n // Label chrome is rendered via TagsInput.Label (see below), not BitkitField, so it\n // associates with TagsInput.Input. Pull these out of the props forwarded to BitkitField.\n badge,\n label,\n optional,\n tooltip,\n ...fieldProps\n } = props;\n\n // Always reject empty/whitespace-only input (covers leading/trailing delimiters on paste\n // and blurBehavior=\"add\" with an empty input). Chain with a user-supplied validate if any.\n const effectiveValidate: NonNullable<TagsInput.RootProps['validate']> = (details) =>\n rejectEmpty(details) && (validate?.(details) ?? true);\n\n const styles = useSlotRecipe({ key: 'tagsInput' })({ size });\n\n // Mirror the tag list so we can detect invalid tags outside TagsInput.Context (the Root's\n // `invalid` prop, which drives the control border, must be known before the context renders).\n // In controlled mode `value` is authoritative; uncontrolled we track our own copy via onValueChange.\n const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(defaultValue ?? []);\n const currentValues = value ?? uncontrolledValues;\n const handleValueChange: NonNullable<TagsInput.RootProps['onValueChange']> = (details) => {\n if (value === undefined) {\n setUncontrolledValues(details.value);\n }\n onValueChange?.(details);\n };\n\n const hasInvalidTag = !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidTag && state !== 'disabled' && state !== 'readOnly' ? 'error' : state;\n const showInvalidTags = hasInvalidTag && effectiveState !== 'disabled' && effectiveState !== 'readOnly';\n\n const hasWarning = effectiveState === 'warning' \|\| !!fieldProps.warningText;\n const isInvalid = effectiveState === 'error' \|\| !!fieldProps.errorText;\n const isDisabled = effectiveState === 'disabled';\n const isReadOnly = effectiveState === 'readOnly';\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={size === 'lg' ? '24' : '16'} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n }\n\n return (\n <TagsInput.Root\n addOnPaste={addOnPaste}\n blurBehavior={blurBehavior}\n defaultValue={defaultValue}\n delimiter={delimiter}\n disabled={isDisabled}\n invalid={isInvalid}\n max={max}\n onValueChange={handleValueChange}\n readOnly={isReadOnly}\n size={size}\n validate={effectiveValidate}\n value={value}\n >\n <TagsInput.Context>\n {({ value: tagValues }) => (\n // Strip any stray runtime `counterText` (not a public prop) so it can't slip through\n // `fieldProps` into BitkitField and resurrect an orphaned Field.Label; the counter is\n // rendered via TagsInput.Label instead.\n <BitkitField optional={optional} ref={ref} state={effectiveState} {...fieldProps} counterText={undefined}>\n {(!!label \|\| !!badge \|\| max !== undefined) && (\n // Chakra's Field.Label wires htmlFor to the Field machine's control, which the\n // TagsInput input never claims (separate Ark machine). TagsInput.Label is the\n // documented composition — it associates with TagsInput.Input.\n <TagsInput.Label asChild>\n <BitkitLabel\n badge={badge}\n counterText={max !== undefined ? `${tagValues.length}/${max}` : undefined}\n optional={optional}\n tooltip={tooltip}\n >\n {label}\n </BitkitLabel>\n </TagsInput.Label>\n )}\n <TagsInput.Control>\n <chakra.div css={styles.tagsBlock}>\n {tagValues.map((tagValue, index) => (\n <TagsInput.Item index={index} key={tagValue} value={tagValue}>\n <TagsInput.ItemPreview data-invalid={(showInvalidTags && isValueInvalid?.(tagValue)) \|\| undefined}>\n <TagsInput.ItemText>{tagValue}</TagsInput.ItemText>\n {!isReadOnly && (\n <TagsInput.ItemDeleteTrigger>\n <IconCross size=\"16\" />\n </TagsInput.ItemDeleteTrigger>\n )}\n </TagsInput.ItemPreview>\n <TagsInput.ItemInput />\n </TagsInput.Item>\n ))}\n <TagsInput.Input placeholder={placeholder} />\n </chakra.div>\n {(statusIcon \|\| (tagValues.length > 0 && !isDisabled && !isReadOnly)) && (\n <chakra.div css={styles.suffixBlock}>\n {statusIcon}\n {tagValues.length > 0 && !isDisabled && !isReadOnly && (\n <TagsInput.ClearTrigger css={styles.clearTrigger}>\n <IconCross size={size === 'lg' ? '24' : '16'} />\n </TagsInput.ClearTrigger>\n )}\n </chakra.div>\n )}\n </TagsInput.Control>\n <TagsInput.HiddenInput />\n </BitkitField>\n )}\n </TagsInput.Context>\n </TagsInput.Root>\n );\n});\n\nBitkitTagsInput.displayName = 'BitkitTagsInput';\nexport default BitkitTagsInput;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/RadioGroup.recipe.js CHANGED Viewed

@@ -17,6 +17,7 @@ var radioGroupSlotRecipe = defineSlotRecipe({
 			borderColor: "border/regular",
 			backgroundColor: "background/primary",
 			borderRadius: "50%",
+			boxShadow: "inset/field",
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
@@ -31,6 +32,7 @@ var radioGroupSlotRecipe = defineSlotRecipe({
 			_disabled: {
 				backgroundColor: "background/disabled",
 				borderColor: "border/disabled",
+				boxShadow: "none",
 				"& > .dot": { backgroundColor: "icon/disabled" }
 			}
 		},

package/dist/theme/slot-recipes/RadioGroup.recipe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/RadioGroup.recipe.ts"],"sourcesContent":["import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst radioGroupSlotRecipe = defineSlotRecipe({\n className: 'radio-group',\n slots: radioGroupAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n },\n item: {\n display: 'inline-flex',\n gap: '8',\n alignItems: 'flex-start',\n justifyContent: 'center',\n },\n itemControl: {\n border: '1px solid',\n borderColor: 'border/regular',\n backgroundColor: 'background/primary',\n borderRadius: '50%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n focusVisibleRing: 'outside',\n '& > .dot': {\n width: '12',\n height: '12',\n borderRadius: '50%',\n backgroundColor: 'icon/interactive',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _disabled: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n '& > .dot': {\n backgroundColor: 'icon/disabled',\n },\n },\n },\n itemText: {\n color: 'input/text/inputValue',\n _disabled: {\n color: 'text/disabled',\n },\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n gap: '24',\n },\n },\n vertical: {\n root: {\n alignItems: 'flex-start',\n flexDirection: 'column',\n gap: '12',\n },\n },\n },\n size: {\n md: {\n itemControl: {\n width: '20',\n height: '20',\n },\n itemText: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n itemControl: {\n width: '24',\n height: '24',\n },\n itemText: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n size: 'lg',\n },\n});\n\nexport default radioGroupSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM,EACJ,SAAS,OACX;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;EAClB;EACA,aAAa;GACX,QAAQ;GACR,aAAa;GACb,iBAAiB;GACjB,cAAc;GACd,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB;GACnB;GACA,QAAQ,EACN,aAAa,eACf;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,YAAY,EACV,iBAAiB,gBACnB;GACF;EACF;EACA,UAAU;GACR,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY,EACV,MAAM;IACJ,eAAe;IACf,KAAK;GACP,EACF;GACA,UAAU,EACR,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,KAAK;GACP,EACF;EACF;EACA,MAAM;GACJ,IAAI;IACF,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;GACA,IAAI;IACF,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}
1	+ {"version":3,"file":"RadioGroup.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/RadioGroup.recipe.ts"],"sourcesContent":["import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst radioGroupSlotRecipe = defineSlotRecipe({\n className: 'radio-group',\n slots: radioGroupAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n },\n item: {\n display: 'inline-flex',\n gap: '8',\n alignItems: 'flex-start',\n justifyContent: 'center',\n },\n itemControl: {\n border: '1px solid',\n borderColor: 'border/regular',\n backgroundColor: 'background/primary',\n borderRadius: '50%',\n boxShadow: 'inset/field',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n focusVisibleRing: 'outside',\n '& > .dot': {\n width: '12',\n height: '12',\n borderRadius: '50%',\n backgroundColor: 'icon/interactive',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _disabled: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n boxShadow: 'none',\n '& > .dot': {\n backgroundColor: 'icon/disabled',\n },\n },\n },\n itemText: {\n color: 'input/text/inputValue',\n _disabled: {\n color: 'text/disabled',\n },\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n gap: '24',\n },\n },\n vertical: {\n root: {\n alignItems: 'flex-start',\n flexDirection: 'column',\n gap: '12',\n },\n },\n },\n size: {\n md: {\n itemControl: {\n width: '20',\n height: '20',\n },\n itemText: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n itemControl: {\n width: '24',\n height: '24',\n },\n itemText: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n size: 'lg',\n },\n});\n\nexport default radioGroupSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM,EACJ,SAAS,OACX;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;EAClB;EACA,aAAa;GACX,QAAQ;GACR,aAAa;GACb,iBAAiB;GACjB,cAAc;GACd,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB;GACnB;GACA,QAAQ,EACN,aAAa,eACf;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,YAAY,EACV,iBAAiB,gBACnB;GACF;EACF;EACA,UAAU;GACR,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY,EACV,MAAM;IACJ,eAAe;IACf,KAAK;GACP,EACF;GACA,UAAU,EACR,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,KAAK;GACP,EACF;EACF;EACA,MAAM;GACJ,IAAI;IACF,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;GACA,IAAI;IACF,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}

package/dist/theme/slot-recipes/TagsInput.recipe.js CHANGED Viewed

@@ -100,7 +100,17 @@ var tagsInputSlotRecipe = defineSlotRecipe({
 				borderColor: "border/disabled",
 				color: "text/on-disabled"
 			},
-			"&:not(:has(button))": { paddingInlineEnd: "8" }
+			"&:not(:has(button))": { paddingInlineEnd: "8" },
+			"&[data-invalid]": {
+				background: "color/red/subtle",
+				borderColor: "color/red/muted",
+				color: "color/red/strong",
+				_highlighted: { background: "color/red/moderate" },
+				"& [data-part=\"item-delete-trigger\"]": {
+					color: "color/red/strong",
+					_hover: { background: "color/red/moderate" }
+				}
+			}
 		},
 		itemText: {
 			overflow: "hidden",

package/dist/theme/slot-recipes/TagsInput.recipe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TagsInput.recipe.ts"],"sourcesContent":["import { tagsInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst extendedTagsInputAnatomy = tagsInputAnatomy.extendWith('tagsBlock', 'suffixBlock');\n\nconst tagsInputSlotRecipe = defineSlotRecipe({\n className: 'tags-input',\n slots: extendedTagsInputAnatomy.keys(),\n base: {\n root: {\n width: 'full',\n },\n control: {\n alignItems: 'flex-start',\n background: 'background/primary',\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n boxShadow: 'inset/field',\n display: 'flex',\n height: rem(88),\n overflowY: 'auto',\n transition: 'border-color 200ms',\n _focusWithin: {\n focusRing: 'outside',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _invalid: {\n borderColor: 'border/error',\n _hover: {\n borderColor: 'border/error',\n },\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n cursor: 'not-allowed',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n _readOnly: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n },\n tagsBlock: {\n alignContent: 'flex-start',\n alignItems: 'center',\n display: 'flex',\n flex: '1',\n flexWrap: 'wrap',\n gap: '8',\n minWidth: 0,\n },\n suffixBlock: {\n alignItems: 'center',\n alignSelf: 'flex-start',\n display: 'flex',\n flexShrink: '0',\n gap: '8',\n paddingInline: '4',\n position: 'sticky',\n top: 0,\n '&:has(button)': {\n paddingInline: 0,\n },\n },\n input: {\n background: 'transparent',\n color: 'input/text/inputValue',\n flex: '1',\n lineHeight: 'normal',\n minWidth: rem(80),\n outline: 'none',\n // Per Figma, the empty-state placeholder is offset 4px further from the control's\n // left edge than a filled-state tag chip. That 4px comes from an \"input\" layer in\n // Figma that wraps the typing area — in our recipe we apply it as a left padding on\n // the typing <input> itself so tag chips (which live alongside but not inside the\n // input) remain flush with the control's padding.\n paddingInlineStart: '4',\n _placeholder: {\n color: 'input/text/placeholder',\n },\n _disabled: {\n cursor: 'not-allowed',\n _placeholder: {\n color: 'text/disabled',\n },\n },\n _readOnly: {\n display: 'none',\n },\n },\n item: {\n display: 'flex',\n maxWidth: '100%',\n minWidth: 0,\n },\n itemPreview: {\n alignItems: 'center',\n background: 'color/neutral/subtle',\n borderColor: 'color/neutral/muted',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n color: 'text/primary',\n display: 'flex',\n gap: '4',\n height: '24',\n maxWidth: '100%',\n overflow: 'hidden',\n paddingBlock: '2',\n paddingInlineEnd: '1',\n paddingInlineStart: '8',\n textStyle: 'comp/tag/sm',\n _highlighted: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n color: 'text/on-disabled',\n },\n '&:not(:has(button))': {\n paddingInlineEnd: '8',\n },\n },\n itemText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n itemInput: {\n background: 'transparent',\n height: '24',\n minWidth: '20',\n outline: 'none',\n },\n itemDeleteTrigger: {\n alignItems: 'center',\n borderRadius: '2',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: '0',\n height: '20',\n justifyContent: 'center',\n width: '20',\n _hover: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n clearTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '4',\n _hover: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n },\n variants: {\n size: {\n // Padding values below match the Figma control + input layer spec exactly\n // (see FRONTEND-572 thread / Figma node 1941:3510 for md, 1941:3487 for lg).\n // The outer control carries the size-specific padding; the inner tagsBlock adds a\n // constant 4px horizontal padding (set in the base) around the content regardless of size.\n md: {\n control: {\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n },\n // paddingBlock lives on tagsBlock (not control) so the suffixBlock (clear button) sits\n // at the control's inner top and its vertical center lines up with the first tag-row /\n // placeholder center — matches Figma's filled-state layout.\n tagsBlock: {\n paddingBlock: '8',\n },\n suffixBlock: {\n height: '40',\n },\n input: {\n height: '24',\n fontSize: '0.875rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n lg: {\n control: {\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n tagsBlock: {\n paddingBlock: '12',\n },\n suffixBlock: {\n height: '48',\n },\n input: {\n fontSize: '1rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default tagsInputSlotRecipe;\n"],"mappings":"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"}
1	+ {"version":3,"file":"TagsInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TagsInput.recipe.ts"],"sourcesContent":["import { tagsInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst extendedTagsInputAnatomy = tagsInputAnatomy.extendWith('tagsBlock', 'suffixBlock');\n\nconst tagsInputSlotRecipe = defineSlotRecipe({\n className: 'tags-input',\n slots: extendedTagsInputAnatomy.keys(),\n base: {\n root: {\n width: 'full',\n },\n control: {\n alignItems: 'flex-start',\n background: 'background/primary',\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n boxShadow: 'inset/field',\n display: 'flex',\n height: rem(88),\n overflowY: 'auto',\n transition: 'border-color 200ms',\n _focusWithin: {\n focusRing: 'outside',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _invalid: {\n borderColor: 'border/error',\n _hover: {\n borderColor: 'border/error',\n },\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n cursor: 'not-allowed',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n _readOnly: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n },\n tagsBlock: {\n alignContent: 'flex-start',\n alignItems: 'center',\n display: 'flex',\n flex: '1',\n flexWrap: 'wrap',\n gap: '8',\n minWidth: 0,\n },\n suffixBlock: {\n alignItems: 'center',\n alignSelf: 'flex-start',\n display: 'flex',\n flexShrink: '0',\n gap: '8',\n paddingInline: '4',\n position: 'sticky',\n top: 0,\n '&:has(button)': {\n paddingInline: 0,\n },\n },\n input: {\n background: 'transparent',\n color: 'input/text/inputValue',\n flex: '1',\n lineHeight: 'normal',\n minWidth: rem(80),\n outline: 'none',\n // Per Figma, the empty-state placeholder is offset 4px further from the control's\n // left edge than a filled-state tag chip. That 4px comes from an \"input\" layer in\n // Figma that wraps the typing area — in our recipe we apply it as a left padding on\n // the typing <input> itself so tag chips (which live alongside but not inside the\n // input) remain flush with the control's padding.\n paddingInlineStart: '4',\n _placeholder: {\n color: 'input/text/placeholder',\n },\n _disabled: {\n cursor: 'not-allowed',\n _placeholder: {\n color: 'text/disabled',\n },\n },\n _readOnly: {\n display: 'none',\n },\n },\n item: {\n display: 'flex',\n maxWidth: '100%',\n minWidth: 0,\n },\n itemPreview: {\n alignItems: 'center',\n background: 'color/neutral/subtle',\n borderColor: 'color/neutral/muted',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n color: 'text/primary',\n display: 'flex',\n gap: '4',\n height: '24',\n maxWidth: '100%',\n overflow: 'hidden',\n paddingBlock: '2',\n paddingInlineEnd: '1',\n paddingInlineStart: '8',\n textStyle: 'comp/tag/sm',\n _highlighted: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n color: 'text/on-disabled',\n },\n '&:not(:has(button))': {\n paddingInlineEnd: '8',\n },\n '&[data-invalid]': {\n background: 'color/red/subtle',\n borderColor: 'color/red/muted',\n color: 'color/red/strong',\n _highlighted: {\n background: 'color/red/moderate',\n },\n '& [data-part=\"item-delete-trigger\"]': {\n color: 'color/red/strong',\n _hover: {\n background: 'color/red/moderate',\n },\n },\n },\n },\n itemText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n itemInput: {\n background: 'transparent',\n height: '24',\n minWidth: '20',\n outline: 'none',\n },\n itemDeleteTrigger: {\n alignItems: 'center',\n borderRadius: '2',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: '0',\n height: '20',\n justifyContent: 'center',\n width: '20',\n _hover: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n clearTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '4',\n _hover: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n },\n variants: {\n size: {\n // Padding values below match the Figma control + input layer spec exactly\n // (see FRONTEND-572 thread / Figma node 1941:3510 for md, 1941:3487 for lg).\n // The outer control carries the size-specific padding; the inner tagsBlock adds a\n // constant 4px horizontal padding (set in the base) around the content regardless of size.\n md: {\n control: {\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n },\n // paddingBlock lives on tagsBlock (not control) so the suffixBlock (clear button) sits\n // at the control's inner top and its vertical center lines up with the first tag-row /\n // placeholder center — matches Figma's filled-state layout.\n tagsBlock: {\n paddingBlock: '8',\n },\n suffixBlock: {\n height: '40',\n },\n input: {\n height: '24',\n fontSize: '0.875rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n lg: {\n control: {\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n tagsBlock: {\n paddingBlock: '12',\n },\n suffixBlock: {\n height: '48',\n },\n input: {\n fontSize: '1rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default tagsInputSlotRecipe;\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.320",
+  "version": "0.3.322",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",