@bitrise/bitkit-v2 0.3.309 → 0.3.311
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.
- package/dist/components/BitkitField/BitkitField.d.ts +6 -0
- package/dist/components/BitkitField/BitkitField.js +18 -11
- package/dist/components/BitkitField/BitkitField.js.map +1 -1
- package/dist/components/BitkitSearchInput/BitkitSearchInput.d.ts +6 -9
- package/dist/components/BitkitSearchInput/BitkitSearchInput.js +21 -25
- package/dist/components/BitkitSearchInput/BitkitSearchInput.js.map +1 -1
- package/dist/components/BitkitTextInput/BitkitTextInput.js +6 -5
- package/dist/components/BitkitTextInput/BitkitTextInput.js.map +1 -1
- package/dist/main.js +1 -1
- package/dist/theme/slot-recipes/TextInput.recipe.d.ts +3 -0
- package/dist/theme/slot-recipes/TextInput.recipe.js +7 -1
- package/dist/theme/slot-recipes/TextInput.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +3 -0
- package/package.json +1 -1
|
@@ -7,6 +7,12 @@ export interface BitkitFieldProps extends Omit<Field.RootProps, 'disabled' | 'in
|
|
|
7
7
|
errorText?: ReactNode;
|
|
8
8
|
helperText?: ReactNode;
|
|
9
9
|
label?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Keep the label in the accessibility tree (associated with the control) but hide it visually.
|
|
12
|
+
* For fields whose purpose is already visually obvious — e.g. a search input with a magnifier icon.
|
|
13
|
+
* Badge, counter and tooltip are omitted in this mode, since they are purely visual.
|
|
14
|
+
*/
|
|
15
|
+
labelHidden?: boolean;
|
|
10
16
|
optional?: boolean;
|
|
11
17
|
state?: 'disabled' | 'error' | 'readOnly' | 'warning';
|
|
12
18
|
tooltip?: string;
|
|
@@ -2,10 +2,26 @@ import BitkitLabel from "../BitkitLabel/BitkitLabel.js";
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { Field } from "@chakra-ui/react/field";
|
|
5
|
+
import { VisuallyHidden } from "@chakra-ui/react/visually-hidden";
|
|
5
6
|
//#region lib/components/BitkitField/BitkitField.tsx
|
|
6
7
|
var BitkitField = forwardRef((props, ref) => {
|
|
7
|
-
const { badge, counterText, children, errorText, helperText, label, optional, state, tooltip, warningText, ...rest } = props;
|
|
8
|
+
const { badge, counterText, children, errorText, helperText, label, labelHidden, optional, state, tooltip, warningText, ...rest } = props;
|
|
8
9
|
const isInvalid = state === "error" || !!errorText;
|
|
10
|
+
let labelNode = null;
|
|
11
|
+
if (labelHidden) labelNode = label ? /* @__PURE__ */ jsx(VisuallyHidden, {
|
|
12
|
+
asChild: true,
|
|
13
|
+
children: /* @__PURE__ */ jsx(Field.Label, { children: label })
|
|
14
|
+
}) : null;
|
|
15
|
+
else if (label || badge || counterText) labelNode = /* @__PURE__ */ jsx(Field.Label, {
|
|
16
|
+
asChild: true,
|
|
17
|
+
children: /* @__PURE__ */ jsx(BitkitLabel, {
|
|
18
|
+
badge,
|
|
19
|
+
counterText,
|
|
20
|
+
optional,
|
|
21
|
+
tooltip,
|
|
22
|
+
children: label
|
|
23
|
+
})
|
|
24
|
+
});
|
|
9
25
|
return /* @__PURE__ */ jsxs(Field.Root, {
|
|
10
26
|
disabled: state === "disabled",
|
|
11
27
|
invalid: isInvalid,
|
|
@@ -14,16 +30,7 @@ var BitkitField = forwardRef((props, ref) => {
|
|
|
14
30
|
ref,
|
|
15
31
|
...rest,
|
|
16
32
|
children: [
|
|
17
|
-
|
|
18
|
-
asChild: true,
|
|
19
|
-
children: /* @__PURE__ */ jsx(BitkitLabel, {
|
|
20
|
-
badge,
|
|
21
|
-
counterText,
|
|
22
|
-
optional,
|
|
23
|
-
tooltip,
|
|
24
|
-
children: label
|
|
25
|
-
})
|
|
26
|
-
}) : null,
|
|
33
|
+
labelNode,
|
|
27
34
|
children,
|
|
28
35
|
!!helperText && !errorText && !warningText && /* @__PURE__ */ jsx(Field.HelperText, { children: helperText }),
|
|
29
36
|
!!warningText && !errorText && /* @__PURE__ */ jsx(Field.HelperText, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitField.js","names":[],"sources":["../../../lib/components/BitkitField/BitkitField.tsx"],"sourcesContent":["import { Field } from '@chakra-ui/react/field';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\nexport interface BitkitFieldProps extends Omit<Field.RootProps, 'disabled' | 'invalid' | 'readOnly'> {\n badge?: ReactNode;\n children: ReactNode;\n counterText?: string;\n errorText?: ReactNode;\n helperText?: ReactNode;\n label?: string;\n optional?: boolean;\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n tooltip?: string;\n warningText?: ReactNode;\n}\n\nconst BitkitField = forwardRef<HTMLDivElement, BitkitFieldProps>((props, ref) => {\n const {
|
|
1
|
+
{"version":3,"file":"BitkitField.js","names":[],"sources":["../../../lib/components/BitkitField/BitkitField.tsx"],"sourcesContent":["import { Field } from '@chakra-ui/react/field';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\nexport interface BitkitFieldProps extends Omit<Field.RootProps, 'disabled' | 'invalid' | 'readOnly'> {\n badge?: ReactNode;\n children: ReactNode;\n counterText?: string;\n errorText?: ReactNode;\n helperText?: ReactNode;\n label?: string;\n /**\n * Keep the label in the accessibility tree (associated with the control) but hide it visually.\n * For fields whose purpose is already visually obvious — e.g. a search input with a magnifier icon.\n * Badge, counter and tooltip are omitted in this mode, since they are purely visual.\n */\n labelHidden?: boolean;\n optional?: boolean;\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n tooltip?: string;\n warningText?: ReactNode;\n}\n\nconst BitkitField = forwardRef<HTMLDivElement, BitkitFieldProps>((props, ref) => {\n const {\n badge,\n counterText,\n children,\n errorText,\n helperText,\n label,\n labelHidden,\n optional,\n state,\n tooltip,\n warningText,\n ...rest\n } = props;\n\n const isInvalid = state === 'error' || !!errorText;\n\n let labelNode: ReactNode = null;\n if (labelHidden) {\n // Field.Label still wires `htmlFor` to the control; VisuallyHidden only strips it from view.\n labelNode = label ? (\n <VisuallyHidden asChild>\n <Field.Label>{label}</Field.Label>\n </VisuallyHidden>\n ) : null;\n } else if (label || badge || counterText) {\n labelNode = (\n <Field.Label asChild>\n <BitkitLabel badge={badge} counterText={counterText} optional={optional} tooltip={tooltip}>\n {label}\n </BitkitLabel>\n </Field.Label>\n );\n }\n\n return (\n <Field.Root\n disabled={state === 'disabled'}\n invalid={isInvalid}\n readOnly={state === 'readOnly'}\n required={!optional}\n ref={ref}\n {...rest}\n >\n {labelNode}\n {children}\n {!!helperText && !errorText && !warningText && <Field.HelperText>{helperText}</Field.HelperText>}\n {!!warningText && !errorText && <Field.HelperText color=\"text/body\">{warningText}</Field.HelperText>}\n {!!errorText && <Field.ErrorText>{errorText}</Field.ErrorText>}\n </Field.Root>\n );\n});\n\nBitkitField.displayName = 'BitkitField';\n\nexport default BitkitField;\n"],"mappings":";;;;;;AAyBA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EACJ,OACA,aACA,UACA,WACA,YACA,OACA,aACA,UACA,OACA,SACA,aACA,GAAG,SACD;CAEJ,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC;CAEzC,IAAI,YAAuB;CAC3B,IAAI,aAEF,YAAY,QACV,oBAAC,gBAAD;EAAgB,SAAA;YACd,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA;CACnB,CAAA,IACd;MACC,IAAI,SAAS,SAAS,aAC3B,YACE,oBAAC,MAAM,OAAP;EAAa,SAAA;YACX,oBAAC,aAAD;GAAoB;GAAoB;GAAuB;GAAmB;aAC/E;EACU,CAAA;CACF,CAAA;CAIjB,OACE,qBAAC,MAAM,MAAP;EACE,UAAU,UAAU;EACpB,SAAS;EACT,UAAU,UAAU;EACpB,UAAU,CAAC;EACN;EACL,GAAI;YANN;GAQG;GACA;GACA,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,oBAAC,MAAM,YAAP,EAAA,UAAmB,WAA6B,CAAA;GAC9F,CAAC,CAAC,eAAe,CAAC,aAAa,oBAAC,MAAM,YAAP;IAAkB,OAAM;cAAa;GAA8B,CAAA;GAClG,CAAC,CAAC,aAAa,oBAAC,MAAM,WAAP,EAAA,UAAkB,UAA2B,CAAA;EACnD;;AAEhB,CAAC;AAED,YAAY,cAAc"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export type BitkitSearchInputProps = Pick<InputProps, 'value' | 'placeholder'> & Omit<InputGroupProps, 'size' | 'variant' | 'children' | 'onChange'> & {
|
|
4
|
-
size?: 'md' | 'lg';
|
|
1
|
+
import { BitkitTextInputProps } from '../BitkitTextInput/BitkitTextInput';
|
|
2
|
+
export interface BitkitSearchInputProps extends Omit<BitkitTextInputProps, 'badge' | 'counter' | 'counterText' | 'endAddon' | 'endAddonProps' | 'endElement' | 'errorText' | 'inputProps' | 'maxLength' | 'onChange' | 'optional' | 'startAddon' | 'startAddonProps' | 'startElement' | 'state' | 'tooltip' | 'warningText'> {
|
|
5
3
|
onChange?: (value: string) => void;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} & import('react').RefAttributes<HTMLInputElement>>;
|
|
4
|
+
state?: 'disabled';
|
|
5
|
+
value?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const BitkitSearchInput: import('react').ForwardRefExoticComponent<BitkitSearchInputProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
11
8
|
export default BitkitSearchInput;
|
|
@@ -1,38 +1,34 @@
|
|
|
1
1
|
import IconMagnifier from "../../icons/IconMagnifier.js";
|
|
2
2
|
import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
|
|
3
|
+
import BitkitTextInput from "../BitkitTextInput/BitkitTextInput.js";
|
|
3
4
|
import { forwardRef } from "react";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { Input } from "@chakra-ui/react/input";
|
|
6
|
-
import { InputGroup } from "@chakra-ui/react/input-group";
|
|
7
6
|
//#region lib/components/BitkitSearchInput/BitkitSearchInput.tsx
|
|
8
7
|
var BitkitSearchInput = forwardRef((props, ref) => {
|
|
9
|
-
const { size = "lg",
|
|
10
|
-
const
|
|
8
|
+
const { label = "Search", labelHidden = true, onChange, placeholder, size = "lg", state, value, ...rest } = props;
|
|
9
|
+
const showClearButton = Boolean(value) && state !== "disabled";
|
|
11
10
|
const iconSize = size === "lg" ? "24" : "16";
|
|
12
|
-
const
|
|
13
|
-
return /* @__PURE__ */ jsx(
|
|
11
|
+
const closeButtonSize = size === "lg" ? "md" : "sm";
|
|
12
|
+
return /* @__PURE__ */ jsx(BitkitTextInput, {
|
|
13
|
+
ref,
|
|
14
14
|
...rest,
|
|
15
|
-
|
|
15
|
+
inputProps: {
|
|
16
|
+
onChange: (e) => onChange?.(e.target.value),
|
|
17
|
+
type: "search",
|
|
18
|
+
value
|
|
19
|
+
},
|
|
20
|
+
label,
|
|
21
|
+
labelHidden,
|
|
22
|
+
placeholder,
|
|
23
|
+
size,
|
|
24
|
+
startElement: /* @__PURE__ */ jsx(IconMagnifier, { size: iconSize }),
|
|
25
|
+
state,
|
|
26
|
+
endElement: showClearButton ? /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
16
27
|
"aria-label": "Clear",
|
|
17
|
-
size: closeIconSize,
|
|
18
28
|
colorVariant: "neutral",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}),
|
|
23
|
-
startElement: /* @__PURE__ */ jsx(IconMagnifier, {
|
|
24
|
-
color: "icon/tertiary",
|
|
25
|
-
marginInline: "12",
|
|
26
|
-
size: iconSize
|
|
27
|
-
}),
|
|
28
|
-
startOffset: size === "md" ? "4px" : "0px",
|
|
29
|
-
children: /* @__PURE__ */ jsx(Input, {
|
|
30
|
-
ref,
|
|
31
|
-
size,
|
|
32
|
-
value,
|
|
33
|
-
placeholder,
|
|
34
|
-
onChange: (e) => onChange?.(e.target.value)
|
|
35
|
-
})
|
|
29
|
+
onClick: () => onChange?.(""),
|
|
30
|
+
size: closeButtonSize
|
|
31
|
+
}) : void 0
|
|
36
32
|
});
|
|
37
33
|
});
|
|
38
34
|
BitkitSearchInput.displayName = "BitkitSearchInput";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSearchInput.js","names":[],"sources":["../../../lib/components/BitkitSearchInput/BitkitSearchInput.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"BitkitSearchInput.js","names":[],"sources":["../../../lib/components/BitkitSearchInput/BitkitSearchInput.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { IconMagnifier } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitTextInput, { type BitkitTextInputProps } from '../BitkitTextInput/BitkitTextInput';\n\nexport interface BitkitSearchInputProps extends Omit<\n BitkitTextInputProps,\n | 'badge'\n | 'counter'\n | 'counterText'\n | 'endAddon'\n | 'endAddonProps'\n | 'endElement'\n | 'errorText'\n | 'inputProps'\n | 'maxLength'\n | 'onChange'\n | 'optional'\n | 'startAddon'\n | 'startAddonProps'\n | 'startElement'\n | 'state'\n | 'tooltip'\n | 'warningText'\n> {\n onChange?: (value: string) => void;\n state?: 'disabled';\n value?: string;\n}\n\nconst BitkitSearchInput = forwardRef<HTMLDivElement, BitkitSearchInputProps>((props, ref) => {\n const { label = 'Search', labelHidden = true, onChange, placeholder, size = 'lg', state, value, ...rest } = props;\n\n const showClearButton = Boolean(value) && state !== 'disabled';\n const iconSize = size === 'lg' ? '24' : '16';\n const closeButtonSize = size === 'lg' ? 'md' : 'sm';\n\n return (\n <BitkitTextInput\n ref={ref}\n {...rest}\n inputProps={{\n onChange: (e) => onChange?.(e.target.value),\n type: 'search',\n value,\n }}\n label={label}\n labelHidden={labelHidden}\n placeholder={placeholder}\n size={size}\n startElement={<IconMagnifier size={iconSize} />}\n state={state}\n endElement={\n showClearButton ? (\n <BitkitCloseButton\n aria-label=\"Clear\"\n colorVariant=\"neutral\"\n onClick={() => onChange?.('')}\n size={closeButtonSize}\n />\n ) : undefined\n }\n />\n );\n});\n\nBitkitSearchInput.displayName = 'BitkitSearchInput';\n\nexport default BitkitSearchInput;\n"],"mappings":";;;;;;AA+BA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,UAAU,aAAa,OAAO,MAAM,OAAO,OAAO,GAAG,SAAS;CAE5G,MAAM,kBAAkB,QAAQ,KAAK,KAAK,UAAU;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,kBAAkB,SAAS,OAAO,OAAO;CAE/C,OACE,oBAAC,iBAAD;EACO;EACL,GAAI;EACJ,YAAY;GACV,WAAW,MAAM,WAAW,EAAE,OAAO,KAAK;GAC1C,MAAM;GACN;EACF;EACO;EACM;EACA;EACP;EACN,cAAc,oBAAC,eAAD,EAAe,MAAM,SAAW,CAAA;EACvC;EACP,YACE,kBACE,oBAAC,mBAAD;GACE,cAAW;GACX,cAAa;GACb,eAAe,WAAW,EAAE;GAC5B,MAAM;EACP,CAAA,IACC,KAAA;CAEP,CAAA;AAEL,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -5,17 +5,17 @@ import { Box } from "@chakra-ui/react/box";
|
|
|
5
5
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { Input } from "@chakra-ui/react/input";
|
|
9
8
|
import { Group } from "@chakra-ui/react/group";
|
|
9
|
+
import { Input } from "@chakra-ui/react/input";
|
|
10
10
|
import { InputAddon } from "@chakra-ui/react/input-addon";
|
|
11
11
|
//#region lib/components/BitkitTextInput/BitkitTextInput.tsx
|
|
12
12
|
var BitkitTextInput = forwardRef((props, ref) => {
|
|
13
|
-
const { counter, endAddon, endAddonProps, endElement, inputProps, maxLength, placeholder, size = "lg", startAddon, startAddonProps, startElement, state, ...
|
|
13
|
+
const { counter, endAddon, endAddonProps, endElement, inputProps, maxLength, placeholder, size = "lg", startAddon, startAddonProps, startElement, state, ...rest } = props;
|
|
14
14
|
const styles = useSlotRecipe({ key: "textInput" })({ size });
|
|
15
15
|
const iconSize = size === "md" ? "16" : "24";
|
|
16
16
|
const addonSize = size === "md" ? "md" : "lg";
|
|
17
|
-
const hasWarning = state === "warning" || !!
|
|
18
|
-
const isInvalid = state === "error" || !!
|
|
17
|
+
const hasWarning = state === "warning" || !!rest.warningText;
|
|
18
|
+
const isInvalid = state === "error" || !!rest.errorText;
|
|
19
19
|
let statusIcon = null;
|
|
20
20
|
if (isInvalid) statusIcon = /* @__PURE__ */ jsx(IconErrorCircleFilled, {
|
|
21
21
|
color: "icon/negative",
|
|
@@ -32,7 +32,7 @@ var BitkitTextInput = forwardRef((props, ref) => {
|
|
|
32
32
|
counterText,
|
|
33
33
|
ref,
|
|
34
34
|
state,
|
|
35
|
-
...
|
|
35
|
+
...rest,
|
|
36
36
|
children: /* @__PURE__ */ jsxs(Group, {
|
|
37
37
|
attached: true,
|
|
38
38
|
width: "100%",
|
|
@@ -46,6 +46,7 @@ var BitkitTextInput = forwardRef((props, ref) => {
|
|
|
46
46
|
}),
|
|
47
47
|
/* @__PURE__ */ jsxs(Box, {
|
|
48
48
|
css: styles.field,
|
|
49
|
+
"data-has-end-element": endElement != null ? "" : void 0,
|
|
49
50
|
flex: "1",
|
|
50
51
|
...stateAttrs,
|
|
51
52
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitTextInput.js","names":[],"sources":["../../../lib/components/BitkitTextInput/BitkitTextInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Group } from '@chakra-ui/react/group';\nimport { Input, type InputProps } from '@chakra-ui/react/input';\nimport { InputAddon, type InputAddonProps } from '@chakra-ui/react/input-addon';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'state'> {\n counter?: boolean;\n endAddon?: ReactNode;\n endAddonProps?: InputAddonProps;\n endElement?: ReactNode;\n inputProps?: InputProps;\n maxLength?: HTMLInputElement['maxLength'];\n placeholder?: string;\n size?: 'md' | 'lg';\n startAddon?: ReactNode;\n startAddonProps?: InputAddonProps;\n startElement?: ReactNode;\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n}\n\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props, ref) => {\n const {\n counter,\n endAddon,\n endAddonProps,\n endElement,\n inputProps,\n maxLength,\n placeholder,\n size = 'lg',\n startAddon,\n startAddonProps,\n startElement,\n state,\n ...
|
|
1
|
+
{"version":3,"file":"BitkitTextInput.js","names":[],"sources":["../../../lib/components/BitkitTextInput/BitkitTextInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Group } from '@chakra-ui/react/group';\nimport { Input, type InputProps } from '@chakra-ui/react/input';\nimport { InputAddon, type InputAddonProps } from '@chakra-ui/react/input-addon';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'state'> {\n counter?: boolean;\n endAddon?: ReactNode;\n endAddonProps?: InputAddonProps;\n endElement?: ReactNode;\n inputProps?: InputProps;\n maxLength?: HTMLInputElement['maxLength'];\n placeholder?: string;\n size?: 'md' | 'lg';\n startAddon?: ReactNode;\n startAddonProps?: InputAddonProps;\n startElement?: ReactNode;\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n}\n\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props, ref) => {\n const {\n counter,\n endAddon,\n endAddonProps,\n endElement,\n inputProps,\n maxLength,\n placeholder,\n size = 'lg',\n startAddon,\n startAddonProps,\n startElement,\n state,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const iconSize = size === 'md' ? '16' : '24';\n const addonSize = size === 'md' ? 'md' : 'lg';\n\n const hasWarning = state === 'warning' || !!rest.warningText;\n const isInvalid = state === 'error' || !!rest.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n const counterText =\n counter && maxLength && inputProps?.value !== undefined\n ? `${inputProps.value.toString().length}/${maxLength}`\n : undefined;\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n return (\n <BitkitField counterText={counterText} ref={ref} state={state} {...rest}>\n <Group attached width=\"100%\">\n {startAddon != null && (\n <InputAddon position=\"start\" size={addonSize} {...stateAttrs} {...startAddonProps}>\n {startAddon}\n </InputAddon>\n )}\n <Box css={styles.field} data-has-end-element={endElement != null ? '' : undefined} flex=\"1\" {...stateAttrs}>\n {startElement != null && (\n <Box css={styles.element} {...stateAttrs}>\n {startElement}\n </Box>\n )}\n <Input css={styles.input} maxLength={maxLength} placeholder={placeholder} {...inputProps} unstyled />\n {statusIcon != null && (\n <Box css={styles.element} {...stateAttrs}>\n {statusIcon}\n </Box>\n )}\n {endElement != null && (\n <Box css={styles.element} {...stateAttrs}>\n {endElement}\n </Box>\n )}\n </Box>\n {endAddon != null && (\n <InputAddon position=\"end\" size={addonSize} {...stateAttrs} {...endAddonProps}>\n {endAddon}\n </InputAddon>\n )}\n </Group>\n </BitkitField>\n );\n});\n\nBitkitTextInput.displayName = 'BitkitTextInput';\n\nexport default BitkitTextInput;\n"],"mappings":";;;;;;;;;;;AAyBA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SACA,UACA,eACA,YACA,YACA,WACA,aACA,OAAO,MACP,YACA,iBACA,cACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,YAAY,SAAS,OAAO,OAAO;CAEzC,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,KAAK;CACjD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,KAAK;CAE9C,IAAI,aAAwB;CAC5B,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM;CAAW,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,MAAM,cACJ,WAAW,aAAa,YAAY,UAAU,KAAA,IAC1C,GAAG,WAAW,MAAM,SAAS,CAAC,CAAC,OAAO,GAAG,cACzC,KAAA;CAEN,MAAM,aAAa;EACjB,iBAAiB,UAAU,aAAa,KAAK,KAAA;EAC7C,gBAAgB,YAAY,KAAK,KAAA;EACjC,iBAAiB,UAAU,aAAa,KAAK,KAAA;CAC/C;CAEA,OACE,oBAAC,aAAD;EAA0B;EAAkB;EAAY;EAAO,GAAI;YACjE,qBAAC,OAAD;GAAO,UAAA;GAAS,OAAM;aAAtB;IACG,cAAc,QACb,oBAAC,YAAD;KAAY,UAAS;KAAQ,MAAM;KAAW,GAAI;KAAY,GAAI;eAC/D;IACS,CAAA;IAEd,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAO,wBAAsB,cAAc,OAAO,KAAK,KAAA;KAAW,MAAK;KAAI,GAAI;eAAhG;MACG,gBAAgB,QACf,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;iBAC3B;MACE,CAAA;MAEP,oBAAC,OAAD;OAAO,KAAK,OAAO;OAAkB;OAAwB;OAAa,GAAI;OAAY,UAAA;MAAU,CAAA;MACnG,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;iBAC3B;MACE,CAAA;MAEN,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;iBAC3B;MACE,CAAA;KAEJ;;IACJ,YAAY,QACX,oBAAC,YAAD;KAAY,UAAS;KAAM,MAAM;KAAW,GAAI;KAAY,GAAI;eAC7D;IACS,CAAA;GAET;;CACI,CAAA;AAEjB,CAAC;AAED,gBAAgB,cAAc"}
|
package/dist/main.js
CHANGED
|
@@ -346,6 +346,7 @@ import BitkitPromoBanner from "./components/BitkitPromoBanner/BitkitPromoBanner.
|
|
|
346
346
|
import BitkitRadio from "./components/BitkitRadio/BitkitRadio.js";
|
|
347
347
|
import BitkitRadioGroup from "./components/BitkitRadioGroup/BitkitRadioGroup.js";
|
|
348
348
|
import BitkitRibbon from "./components/BitkitRibbon/BitkitRibbon.js";
|
|
349
|
+
import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
|
|
349
350
|
import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
|
|
350
351
|
import BitkitSectionHeading from "./components/BitkitSectionHeading/BitkitSectionHeading.js";
|
|
351
352
|
import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/BitkitSegmentedControl.js";
|
|
@@ -364,7 +365,6 @@ import BitkitSortableColumnHeader from "./components/BitkitTable/BitkitSortableC
|
|
|
364
365
|
import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
|
|
365
366
|
import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
|
|
366
367
|
import BitkitTextArea from "./components/BitkitTextArea/BitkitTextArea.js";
|
|
367
|
-
import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
|
|
368
368
|
import createBitkitToast from "./components/BitkitToast/BitkitToast.js";
|
|
369
369
|
import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
|
|
370
370
|
import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
|
|
@@ -17,6 +17,10 @@ var textInputSlotRecipe = defineSlotRecipe({
|
|
|
17
17
|
height: "var(--input-height)",
|
|
18
18
|
minWidth: 0,
|
|
19
19
|
"&:has(input:focus-visible)": { boxShadow: "0 0 0 0.125rem var(--focus-ring-color) inset" },
|
|
20
|
+
"&:has(input[type=\"search\"])": {
|
|
21
|
+
paddingInline: "12",
|
|
22
|
+
"&[data-has-end-element]": { paddingInlineEnd: "4" }
|
|
23
|
+
},
|
|
20
24
|
_invalid: {
|
|
21
25
|
...frame._invalid,
|
|
22
26
|
zIndex: 1
|
|
@@ -37,6 +41,7 @@ var textInputSlotRecipe = defineSlotRecipe({
|
|
|
37
41
|
minWidth: 0,
|
|
38
42
|
padding: 0,
|
|
39
43
|
width: "100%",
|
|
44
|
+
"&::-webkit-search-cancel-button": { display: "none" },
|
|
40
45
|
_invalid: { color: "input/text/error" },
|
|
41
46
|
_disabled: {
|
|
42
47
|
...text._disabled,
|
|
@@ -64,7 +69,8 @@ var textInputSlotRecipe = defineSlotRecipe({
|
|
|
64
69
|
field: {
|
|
65
70
|
gap: "8",
|
|
66
71
|
paddingInline: variants.size.lg.paddingInline,
|
|
67
|
-
"--input-height": variants.size.lg["--input-height"]
|
|
72
|
+
"--input-height": variants.size.lg["--input-height"],
|
|
73
|
+
"&:has(input[type=\"search\"])": { gap: "12" }
|
|
68
74
|
},
|
|
69
75
|
input: { textStyle: variants.size.lg.textStyle }
|
|
70
76
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TextInput.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { frame, text, variants as inputVariants } from '../common/InputAndTextarea.common';\n\nconst textInputSlotRecipe = defineSlotRecipe({\n className: 'bitkit-text-input',\n slots: ['field', 'input', 'element'],\n base: {\n field: {\n ...frame,\n alignItems: 'center',\n color: 'input/text/inputValue',\n display: 'flex',\n height: 'var(--input-height)',\n minWidth: 0,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 0.125rem var(--focus-ring-color) inset',\n },\n _invalid: {\n ...frame._invalid,\n zIndex: 1,\n },\n _disabled: {\n ...frame._disabled,\n boxShadow: 'none',\n },\n },\n input: {\n ...text,\n background: 'transparent',\n borderWidth: 0,\n flex: '1',\n focusVisibleRing: 'none',\n height: '100%',\n lineHeight: 'normal',\n minWidth: 0,\n padding: 0,\n width: '100%',\n _invalid: {\n color: 'input/text/error',\n },\n _disabled: {\n ...text._disabled,\n cursor: 'not-allowed',\n },\n },\n element: {\n alignItems: 'center',\n color: 'icon/tertiary',\n display: 'flex',\n flexShrink: '0',\n _disabled: {\n color: 'icon/disabled',\n },\n },\n },\n variants: {\n size: {\n md: {\n field: {\n gap: '8',\n paddingInline: inputVariants.size.md.paddingInline,\n '--input-height': inputVariants.size.md['--input-height'],\n },\n input: {\n textStyle: inputVariants.size.md.textStyle,\n },\n },\n lg: {\n field: {\n gap: '8',\n paddingInline: inputVariants.size.lg.paddingInline,\n '--input-height': inputVariants.size.lg['--input-height'],\n },\n input: {\n textStyle: inputVariants.size.lg.textStyle,\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default textInputSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EAAC;EAAS;EAAS;CAAS;CACnC,MAAM;EACJ,OAAO;GACL,GAAG;GACH,YAAY;GACZ,OAAO;GACP,SAAS;GACT,QAAQ;GACR,UAAU;GACV,8BAA8B,EAC5B,WAAW,+CACb;GACA,UAAU;IACR,GAAG,MAAM;IACT,QAAQ;GACV;GACA,WAAW;IACT,GAAG,MAAM;IACT,WAAW;GACb;EACF;EACA,OAAO;GACL,GAAG;GACH,YAAY;GACZ,aAAa;GACb,MAAM;GACN,kBAAkB;GAClB,QAAQ;GACR,YAAY;GACZ,UAAU;GACV,SAAS;GACT,OAAO;GACP,UAAU,EACR,OAAO,mBACT;GACA,WAAW;IACT,GAAG,KAAK;IACR,QAAQ;GACV;EACF;EACA,SAAS;GACP,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO;IACL,KAAK;IACL,eAAe,SAAc,KAAK,GAAG;IACrC,kBAAkB,SAAc,KAAK,GAAG;GAC1C;GACA,OAAO,EACL,WAAW,SAAc,KAAK,GAAG,UACnC;EACF;EACA,IAAI;GACF,OAAO;IACL,KAAK;IACL,eAAe,SAAc,KAAK,GAAG;IACrC,kBAAkB,SAAc,KAAK,GAAG;
|
|
1
|
+
{"version":3,"file":"TextInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TextInput.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { frame, text, variants as inputVariants } from '../common/InputAndTextarea.common';\n\nconst textInputSlotRecipe = defineSlotRecipe({\n className: 'bitkit-text-input',\n slots: ['field', 'input', 'element'],\n base: {\n field: {\n ...frame,\n alignItems: 'center',\n color: 'input/text/inputValue',\n display: 'flex',\n height: 'var(--input-height)',\n minWidth: 0,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 0.125rem var(--focus-ring-color) inset',\n },\n // BitkitSearchInput opts in purely by rendering <input type=\"search\"> — no prop threading. It\n // gets 12px inline padding on both sides, tightening to 4px on the trailing edge when the clear\n // button is present (data-has-end-element). The higher :has() specificity overrides the size\n // paddingInline; the gap widens to 12 at lg (size variant below).\n '&:has(input[type=\"search\"])': {\n paddingInline: '12',\n '&[data-has-end-element]': {\n paddingInlineEnd: '4',\n },\n },\n _invalid: {\n ...frame._invalid,\n zIndex: 1,\n },\n _disabled: {\n ...frame._disabled,\n boxShadow: 'none',\n },\n },\n input: {\n ...text,\n background: 'transparent',\n borderWidth: 0,\n flex: '1',\n focusVisibleRing: 'none',\n height: '100%',\n lineHeight: 'normal',\n minWidth: 0,\n padding: 0,\n width: '100%',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _invalid: {\n color: 'input/text/error',\n },\n _disabled: {\n ...text._disabled,\n cursor: 'not-allowed',\n },\n },\n element: {\n alignItems: 'center',\n color: 'icon/tertiary',\n display: 'flex',\n flexShrink: '0',\n _disabled: {\n color: 'icon/disabled',\n },\n },\n },\n variants: {\n size: {\n md: {\n field: {\n gap: '8',\n paddingInline: inputVariants.size.md.paddingInline,\n '--input-height': inputVariants.size.md['--input-height'],\n },\n input: {\n textStyle: inputVariants.size.md.textStyle,\n },\n },\n lg: {\n field: {\n gap: '8',\n paddingInline: inputVariants.size.lg.paddingInline,\n '--input-height': inputVariants.size.lg['--input-height'],\n '&:has(input[type=\"search\"])': {\n gap: '12',\n },\n },\n input: {\n textStyle: inputVariants.size.lg.textStyle,\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default textInputSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EAAC;EAAS;EAAS;CAAS;CACnC,MAAM;EACJ,OAAO;GACL,GAAG;GACH,YAAY;GACZ,OAAO;GACP,SAAS;GACT,QAAQ;GACR,UAAU;GACV,8BAA8B,EAC5B,WAAW,+CACb;GAKA,iCAA+B;IAC7B,eAAe;IACf,2BAA2B,EACzB,kBAAkB,IACpB;GACF;GACA,UAAU;IACR,GAAG,MAAM;IACT,QAAQ;GACV;GACA,WAAW;IACT,GAAG,MAAM;IACT,WAAW;GACb;EACF;EACA,OAAO;GACL,GAAG;GACH,YAAY;GACZ,aAAa;GACb,MAAM;GACN,kBAAkB;GAClB,QAAQ;GACR,YAAY;GACZ,UAAU;GACV,SAAS;GACT,OAAO;GACP,mCAAmC,EAAE,SAAS,OAAO;GACrD,UAAU,EACR,OAAO,mBACT;GACA,WAAW;IACT,GAAG,KAAK;IACR,QAAQ;GACV;EACF;EACA,SAAS;GACP,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO;IACL,KAAK;IACL,eAAe,SAAc,KAAK,GAAG;IACrC,kBAAkB,SAAc,KAAK,GAAG;GAC1C;GACA,OAAO,EACL,WAAW,SAAc,KAAK,GAAG,UACnC;EACF;EACA,IAAI;GACF,OAAO;IACL,KAAK;IACL,eAAe,SAAc,KAAK,GAAG;IACrC,kBAAkB,SAAc,KAAK,GAAG;IACxC,iCAA+B,EAC7B,KAAK,KACP;GACF;GACA,OAAO,EACL,WAAW,SAAc,KAAK,GAAG,UACnC;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|