@bitrise/bitkit-v2 0.3.429 → 0.3.430-beta.2742
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/AGENTS.md
CHANGED
|
@@ -129,11 +129,11 @@ Bitkit components use consistent prop names across the library:
|
|
|
129
129
|
```
|
|
130
130
|
`data-*` attributes on `BitkitActionMenu` reach the element carrying `role="menu"` (the portalled list), and nothing else passes through — the same contract the dialogs have.
|
|
131
131
|
- **Form components are flat** — `BitkitTextInput`, `BitkitSelect`, `BitkitCombobox`, etc. expose `label`, `errorText`, `helperText`, etc. directly as props. No need to wrap in a separate field component.
|
|
132
|
-
- **`BitkitTextInput`
|
|
132
|
+
- **`BitkitTextInput` slots** — `startElement` / `endElement` take a `ReactNode` and render inside the field (an icon, badge, text, or an interactive control like a reveal/clear button). `startAddon` / `endAddon` render outside the border, attached to the field, and switch on the content type: a **string** gets the standard bordered grey box (a unit label like `$` / `USD`), while any **component** renders as itself, welded to the field — it keeps its own styling and the corners it touches are squared for you. So a button addon needs nothing beyond its own `size` and `variant`: don't square its corners by hand, and don't look for a way to strip the grey box — the content type is the switch. These match the Figma slot names. The validation status icon (error/warning) is added automatically and sits left of `endElement`. The field's `state` doesn't reach a component addon, so disable it yourself when it should follow:
|
|
133
133
|
```tsx
|
|
134
134
|
<BitkitTextInput startElement={<IconSearch />} endElement={<BitkitBadge>New</BitkitBadge>} />
|
|
135
135
|
<BitkitTextInput startAddon="$" endAddon="USD" />
|
|
136
|
-
<BitkitTextInput
|
|
136
|
+
<BitkitTextInput endAddon={<BitkitIconButton icon={IconCopy} label="Copy" onClick={copy} variant="secondary" />} state="readOnly" value={token} />
|
|
137
137
|
```
|
|
138
138
|
- **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
|
|
139
139
|
- `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
|
|
@@ -8,9 +8,13 @@ export interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children'
|
|
|
8
8
|
* known `value`.
|
|
9
9
|
*/
|
|
10
10
|
counter?: boolean;
|
|
11
|
-
/**
|
|
11
|
+
/**
|
|
12
|
+
* Content attached to the trailing edge, outside the input border. A string renders in the
|
|
13
|
+
* standard bordered addon box (a unit label like `USD`); any other node renders as itself — see
|
|
14
|
+
* `startAddon`.
|
|
15
|
+
*/
|
|
12
16
|
endAddon?: ReactNode;
|
|
13
|
-
/** Props forwarded to the trailing `InputAddon`
|
|
17
|
+
/** Props forwarded to the trailing `InputAddon` box. Only a string addon has one. */
|
|
14
18
|
endAddonProps?: InputAddonProps;
|
|
15
19
|
/** Inline content rendered inside the input, at the trailing edge (e.g. an icon or reveal button). */
|
|
16
20
|
endElement?: ReactNode;
|
|
@@ -33,9 +37,15 @@ export interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children'
|
|
|
33
37
|
placeholder?: string;
|
|
34
38
|
/** Field size — controls height and typography. */
|
|
35
39
|
size?: 'md' | 'lg';
|
|
36
|
-
/**
|
|
40
|
+
/**
|
|
41
|
+
* Content attached to the leading edge, outside the input border. A string renders in the
|
|
42
|
+
* standard bordered addon box (a unit label like `$`); any other node keeps its own styling and
|
|
43
|
+
* is welded to the field instead — it shares the field's border and the corners it touches are
|
|
44
|
+
* squared automatically, so a `BitkitButton` / `BitkitIconButton` needs nothing but its own
|
|
45
|
+
* `size` and `variant`.
|
|
46
|
+
*/
|
|
37
47
|
startAddon?: ReactNode;
|
|
38
|
-
/** Props forwarded to the leading `InputAddon`
|
|
48
|
+
/** Props forwarded to the leading `InputAddon` box. Only a string addon has one. */
|
|
39
49
|
startAddonProps?: InputAddonProps;
|
|
40
50
|
/** Inline content rendered inside the input, at the leading edge (e.g. an icon). */
|
|
41
51
|
startElement?: ReactNode;
|
|
@@ -53,8 +63,9 @@ export interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children'
|
|
|
53
63
|
/**
|
|
54
64
|
* A single-line text field wrapping the native `<input>`, with a label and helper/error/warning
|
|
55
65
|
* text. Reflect the value with `value` + `onValueChange` (or the native `onChange`); `inputProps` is
|
|
56
|
-
* the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border
|
|
57
|
-
*
|
|
66
|
+
* the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border
|
|
67
|
+
* (as a bordered box for text, welded to the field for a component), `startElement`/`endElement`
|
|
68
|
+
* inline inside it, and `counter` pairs with `maxLength`.
|
|
58
69
|
*/
|
|
59
70
|
declare const BitkitTextInput: import('react').ForwardRefExoticComponent<BitkitTextInputProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
60
71
|
export default BitkitTextInput;
|
|
@@ -12,8 +12,9 @@ import { InputAddon } from "@chakra-ui/react/input-addon";
|
|
|
12
12
|
/**
|
|
13
13
|
* A single-line text field wrapping the native `<input>`, with a label and helper/error/warning
|
|
14
14
|
* text. Reflect the value with `value` + `onValueChange` (or the native `onChange`); `inputProps` is
|
|
15
|
-
* the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border
|
|
16
|
-
*
|
|
15
|
+
* the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border
|
|
16
|
+
* (as a bordered box for text, welded to the field for a component), `startElement`/`endElement`
|
|
17
|
+
* inline inside it, and `counter` pairs with `maxLength`.
|
|
17
18
|
*/
|
|
18
19
|
var BitkitTextInput = forwardRef((props, ref) => {
|
|
19
20
|
const { counter, endAddon, endAddonProps, endElement, inputProps, maxLength, onChange, onValueChange, placeholder, size = "lg", startAddon, startAddonProps, startElement, state, value, ...rest } = props;
|
|
@@ -41,6 +42,13 @@ var BitkitTextInput = forwardRef((props, ref) => {
|
|
|
41
42
|
"data-invalid": isInvalid ? "" : void 0,
|
|
42
43
|
"data-readonly": state === "readOnly" ? "" : void 0
|
|
43
44
|
};
|
|
45
|
+
const renderAddon = (addon, position, addonProps) => typeof addon === "string" || typeof addon === "number" ? /* @__PURE__ */ jsx(InputAddon, {
|
|
46
|
+
position,
|
|
47
|
+
size: addonSize,
|
|
48
|
+
...stateAttrs,
|
|
49
|
+
...addonProps,
|
|
50
|
+
children: addon
|
|
51
|
+
}) : addon;
|
|
44
52
|
return /* @__PURE__ */ jsx(BitkitField, {
|
|
45
53
|
counterText,
|
|
46
54
|
ref,
|
|
@@ -50,13 +58,7 @@ var BitkitTextInput = forwardRef((props, ref) => {
|
|
|
50
58
|
attached: true,
|
|
51
59
|
width: "100%",
|
|
52
60
|
children: [
|
|
53
|
-
startAddon != null &&
|
|
54
|
-
position: "start",
|
|
55
|
-
size: addonSize,
|
|
56
|
-
...stateAttrs,
|
|
57
|
-
...startAddonProps,
|
|
58
|
-
children: startAddon
|
|
59
|
-
}),
|
|
61
|
+
startAddon != null && renderAddon(startAddon, "start", startAddonProps),
|
|
60
62
|
/* @__PURE__ */ jsxs(Box, {
|
|
61
63
|
css: styles.field,
|
|
62
64
|
"data-has-end-element": endElement != null ? "" : void 0,
|
|
@@ -89,13 +91,7 @@ var BitkitTextInput = forwardRef((props, ref) => {
|
|
|
89
91
|
})
|
|
90
92
|
]
|
|
91
93
|
}),
|
|
92
|
-
endAddon != null &&
|
|
93
|
-
position: "end",
|
|
94
|
-
size: addonSize,
|
|
95
|
-
...stateAttrs,
|
|
96
|
-
...endAddonProps,
|
|
97
|
-
children: endAddon
|
|
98
|
-
})
|
|
94
|
+
endAddon != null && renderAddon(endAddon, "end", endAddonProps)
|
|
99
95
|
]
|
|
100
96
|
})
|
|
101
97
|
});
|
|
@@ -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 { type ChangeEventHandler, 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' | 'onChange' | 'state' | 'value'> {\n /**\n * Show a live character counter (`length/maxLength`) next to the label. Requires `maxLength` and a\n * known `value`.\n */\n counter?: boolean;\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 { type ChangeEventHandler, 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' | 'onChange' | 'state' | 'value'> {\n /**\n * Show a live character counter (`length/maxLength`) next to the label. Requires `maxLength` and a\n * known `value`.\n */\n counter?: boolean;\n /**\n * Content attached to the trailing edge, outside the input border. A string renders in the\n * standard bordered addon box (a unit label like `USD`); any other node renders as itself — see\n * `startAddon`.\n */\n endAddon?: ReactNode;\n /** Props forwarded to the trailing `InputAddon` box. Only a string addon has one. */\n endAddonProps?: InputAddonProps;\n /** Inline content rendered inside the input, at the trailing edge (e.g. an icon or reveal button). */\n endElement?: ReactNode;\n /**\n * Escape hatch for the underlying Chakra `Input` — extra native attributes or a spread\n * `{...register()}`. On conflict, values here win over the top-level `value`/`onChange`.\n */\n inputProps?: InputProps;\n /** Maximum number of characters accepted; also feeds the optional `counter`. */\n maxLength?: HTMLInputElement['maxLength'];\n /**\n * Native change event — the same handler you could put on `inputProps`, promoted to the top level.\n * Reach for `onValueChange` when you only need the value. If both this and `inputProps.onChange` are\n * set, `inputProps.onChange` wins (it's the same event, so they shouldn't both be set).\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Convenience change handler that receives the value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder text shown while the field is empty. */\n placeholder?: string;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Content attached to the leading edge, outside the input border. A string renders in the\n * standard bordered addon box (a unit label like `$`); any other node keeps its own styling and\n * is welded to the field instead — it shares the field's border and the corners it touches are\n * squared automatically, so a `BitkitButton` / `BitkitIconButton` needs nothing but its own\n * `size` and `variant`.\n */\n startAddon?: ReactNode;\n /** Props forwarded to the leading `InputAddon` box. Only a string addon has one. */\n startAddonProps?: InputAddonProps;\n /** Inline content rendered inside the input, at the leading edge (e.g. an icon). */\n startElement?: ReactNode;\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n * `readOnly` gate interaction.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /**\n * Controlled value. Pair with `onValueChange` or `onChange`. Can also be supplied via `inputProps`,\n * which wins on conflict.\n */\n value?: string;\n}\n\n/**\n * A single-line text field wrapping the native `<input>`, with a label and helper/error/warning\n * text. Reflect the value with `value` + `onValueChange` (or the native `onChange`); `inputProps` is\n * the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border\n * (as a bordered box for text, welded to the field for a component), `startElement`/`endElement`\n * inline inside it, and `counter` pairs with `maxLength`.\n */\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props, ref) => {\n const {\n counter,\n endAddon,\n endAddonProps,\n endElement,\n inputProps,\n maxLength,\n onChange,\n onValueChange,\n placeholder,\n size = 'lg',\n startAddon,\n startAddonProps,\n startElement,\n state,\n value,\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 // `value` / `onChange` may come in at the top level or via `inputProps` — the object wins on\n // conflict (natural for a spread `{...register()}`). `onValueChange` always fires with the value.\n const { css: inputCss, onChange: inputOnChange, value: inputValue, ...restInputProps } = inputProps ?? {};\n const resolvedValue = inputValue ?? value;\n const nativeOnChange = inputOnChange ?? onChange;\n const handleChange: ChangeEventHandler<HTMLInputElement> | undefined =\n onValueChange || nativeOnChange\n ? (event) => {\n onValueChange?.(event.target.value);\n nativeOnChange?.(event);\n }\n : undefined;\n\n const counterText =\n counter && maxLength && resolvedValue !== undefined ? `${resolvedValue.toString().length}/${maxLength}` : 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 const renderAddon = (addon: ReactNode, position: 'end' | 'start', addonProps?: InputAddonProps) =>\n typeof addon === 'string' || typeof addon === 'number' ? (\n <InputAddon position={position} size={addonSize} {...stateAttrs} {...addonProps}>\n {addon}\n </InputAddon>\n ) : (\n addon\n );\n\n return (\n <BitkitField counterText={counterText} ref={ref} state={state} {...rest}>\n <Group attached width=\"100%\">\n {startAddon != null && renderAddon(startAddon, 'start', startAddonProps)}\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\n css={[styles.input, inputCss]}\n maxLength={maxLength}\n onChange={handleChange}\n placeholder={placeholder}\n value={resolvedValue}\n {...restInputProps}\n unstyled\n />\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 && renderAddon(endAddon, 'end', endAddonProps)}\n </Group>\n </BitkitField>\n );\n});\n\nBitkitTextInput.displayName = 'BitkitTextInput';\n\nexport default BitkitTextInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4EA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SACA,UACA,eACA,YACA,YACA,WACA,UACA,eACA,aACA,OAAO,MACP,YACA,iBACA,cACA,OACA,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;CAKnD,MAAM,EAAE,KAAK,UAAU,UAAU,eAAe,OAAO,YAAY,GAAG,mBAAmB,cAAc,CAAC;CACxG,MAAM,gBAAgB,cAAc;CACpC,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,eACJ,iBAAiB,kBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,iBAAiB,KAAK;CACxB,IACA,KAAA;CAEN,MAAM,cACJ,WAAW,aAAa,kBAAkB,KAAA,IAAY,GAAG,cAAc,SAAS,CAAC,CAAC,OAAO,GAAG,cAAc,KAAA;CAE5G,MAAM,aAAa;EACjB,iBAAiB,UAAU,aAAa,KAAK,KAAA;EAC7C,gBAAgB,YAAY,KAAK,KAAA;EACjC,iBAAiB,UAAU,aAAa,KAAK,KAAA;CAC/C;CAEA,MAAM,eAAe,OAAkB,UAA2B,eAChE,OAAO,UAAU,YAAY,OAAO,UAAU,WAC5C,oBAAC,YAAD;EAAsB;EAAU,MAAM;EAAW,GAAI;EAAY,GAAI;EAClE,UAAA;CACS,CAAA,IAEZ;CAGJ,OACE,oBAAC,aAAD;EAA0B;EAAkB;EAAY;EAAO,GAAI;EACjE,UAAA,qBAAC,OAAD;GAAO,UAAA;GAAS,OAAM;GAAtB,UAAA;IACG,cAAc,QAAQ,YAAY,YAAY,SAAS,eAAe;IACvE,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAO,wBAAsB,cAAc,OAAO,KAAK,KAAA;KAAW,MAAK;KAAI,GAAI;KAAhG,UAAA;MACG,gBAAgB,QACf,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;OAC3B,UAAA;MACE,CAAA;MAEP,oBAAC,OAAD;OACE,KAAK,CAAC,OAAO,OAAO,QAAQ;OACjB;OACX,UAAU;OACG;OACb,OAAO;OACP,GAAI;OACJ,UAAA;MACD,CAAA;MACA,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;OAC3B,UAAA;MACE,CAAA;MAEN,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;OAC3B,UAAA;MACE,CAAA;KAEJ;;IACJ,YAAY,QAAQ,YAAY,UAAU,OAAO,aAAa;GAC1D;;CACI,CAAA;AAEjB,CAAC;AAED,gBAAgB,cAAc"}
|