@bitrise/bitkit-v2 0.3.430-beta.2742 → 0.3.430-beta.2746
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,7 +129,7 @@ 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` 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.
|
|
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 **bare string** gets the standard bordered grey box (a unit label like `$` / `USD` — wrapped in a `<Text>` or a fragment it counts as a component and loses the box), while any **component** renders as itself, welded to the field — it keeps its own styling and the corners it touches are squared for you. A button addon needs its own `variant` and a `size` matching the field's (the field's `size` doesn't reach it, so an `md` field needs an `md` button), and nothing else: 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" />
|
|
@@ -9,12 +9,12 @@ export interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children'
|
|
|
9
9
|
*/
|
|
10
10
|
counter?: boolean;
|
|
11
11
|
/**
|
|
12
|
-
* Content attached to the trailing edge, outside the input border. A string
|
|
13
|
-
* standard bordered addon box (a unit label like `USD`); any other node renders
|
|
14
|
-
* `startAddon`.
|
|
12
|
+
* Content attached to the trailing edge, outside the input border. A bare string or number
|
|
13
|
+
* renders in the standard bordered addon box (a unit label like `USD`); any other node renders
|
|
14
|
+
* as itself — see `startAddon`.
|
|
15
15
|
*/
|
|
16
16
|
endAddon?: ReactNode;
|
|
17
|
-
/** Props forwarded to the trailing `InputAddon` box.
|
|
17
|
+
/** Props forwarded to the trailing `InputAddon` box. Inert unless the addon is a string. */
|
|
18
18
|
endAddonProps?: InputAddonProps;
|
|
19
19
|
/** Inline content rendered inside the input, at the trailing edge (e.g. an icon or reveal button). */
|
|
20
20
|
endElement?: ReactNode;
|
|
@@ -38,14 +38,16 @@ export interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children'
|
|
|
38
38
|
/** Field size — controls height and typography. */
|
|
39
39
|
size?: 'md' | 'lg';
|
|
40
40
|
/**
|
|
41
|
-
* Content attached to the leading edge, outside the input border.
|
|
42
|
-
* standard bordered addon box (a unit label like `$`)
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
41
|
+
* Content attached to the leading edge, outside the input border. Text has to arrive as a bare
|
|
42
|
+
* string (or number) to get the standard bordered addon box (a unit label like `$`) — wrapped in
|
|
43
|
+
* a `<Text>` or a fragment it counts as a component, which loses the box and leaves
|
|
44
|
+
* `startAddonProps` inert. Any other node keeps its own styling and is welded to the field
|
|
45
|
+
* instead: it shares the field's border and the corners it touches are squared automatically, so
|
|
46
|
+
* a `BitkitButton` / `BitkitIconButton` needs only its own `variant` and a `size` matching the
|
|
47
|
+
* field's — the field's `size` does not reach it.
|
|
46
48
|
*/
|
|
47
49
|
startAddon?: ReactNode;
|
|
48
|
-
/** Props forwarded to the leading `InputAddon` box.
|
|
50
|
+
/** Props forwarded to the leading `InputAddon` box. Inert unless the addon is a string. */
|
|
49
51
|
startAddonProps?: InputAddonProps;
|
|
50
52
|
/** Inline content rendered inside the input, at the leading edge (e.g. an icon). */
|
|
51
53
|
startElement?: ReactNode;
|
|
@@ -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 /**\n * Content attached to the trailing edge, outside the input border. A string
|
|
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 bare string or number\n * renders in the standard bordered addon box (a unit label like `USD`); any other node renders\n * as itself — see `startAddon`.\n */\n endAddon?: ReactNode;\n /** Props forwarded to the trailing `InputAddon` box. Inert unless the addon is a string. */\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. Text has to arrive as a bare\n * string (or number) to get the standard bordered addon box (a unit label like `$`) — wrapped in\n * a `<Text>` or a fragment it counts as a component, which loses the box and leaves\n * `startAddonProps` inert. Any other node keeps its own styling and is welded to the field\n * instead: it shares the field's border and the corners it touches are squared automatically, so\n * a `BitkitButton` / `BitkitIconButton` needs only its own `variant` and a `size` matching the\n * field's — the field's `size` does not reach it.\n */\n startAddon?: ReactNode;\n /** Props forwarded to the leading `InputAddon` box. Inert unless the addon is a string. */\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":";;;;;;;;;;;;;;;;;;AA8EA,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"}
|