@oatfi/ui 0.1.0
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/README.md +46 -0
- package/dist/index.cjs.js +1659 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +476 -0
- package/dist/index.esm.js +1602 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +82 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,476 @@
|
|
|
1
|
+
import { Theme as Theme$1 } from '@mui/material/styles';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import react__default from 'react';
|
|
4
|
+
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
5
|
+
import * as styled_components from 'styled-components';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Theme contract for @oatfi/ui.
|
|
9
|
+
*
|
|
10
|
+
* Two shapes live here:
|
|
11
|
+
* - `Theme` — the full, internal token set that every primitive reads from
|
|
12
|
+
* (via styled-components' theme and MUI's theme). Always fully populated.
|
|
13
|
+
* - `Branding` — the partial, partner-facing surface persisted by the
|
|
14
|
+
* dashboard (`partner.settings.branding_configuration`) and delivered to the
|
|
15
|
+
* embed. Every field is optional; missing fields fall back to `defaultTheme`.
|
|
16
|
+
*
|
|
17
|
+
* `mergeBranding()` maps `Branding` onto `Theme`.
|
|
18
|
+
*/
|
|
19
|
+
interface ThemeColors {
|
|
20
|
+
/** Main text and headings. Mapped from `Branding.primaryColor`. */
|
|
21
|
+
primary: string;
|
|
22
|
+
/** Labels and secondary text. Mapped from `Branding.secondaryColor`. */
|
|
23
|
+
secondary: string;
|
|
24
|
+
/** Links, focus states, MUI `palette.primary`. */
|
|
25
|
+
accent: string;
|
|
26
|
+
background: string;
|
|
27
|
+
surface: string;
|
|
28
|
+
border: string;
|
|
29
|
+
success: string;
|
|
30
|
+
/** Neutral fallback (e.g. dropdown chevron fill). */
|
|
31
|
+
default: string;
|
|
32
|
+
warning: string;
|
|
33
|
+
error: string;
|
|
34
|
+
/** Primary button fill. Falls back to `primary` when unbranded. */
|
|
35
|
+
buttonPrimary: string;
|
|
36
|
+
/** Secondary button fill. Falls back to `secondary` when unbranded. */
|
|
37
|
+
buttonSecondary: string;
|
|
38
|
+
}
|
|
39
|
+
interface ThemeBorder {
|
|
40
|
+
/** CSS length, e.g. `"8px"`. Mapped from `Branding.borderRadius` (number). */
|
|
41
|
+
radius: string;
|
|
42
|
+
/** CSS length, e.g. `"1px"`. Mapped from `Branding.borderWidth` (number). */
|
|
43
|
+
width: string;
|
|
44
|
+
color: string;
|
|
45
|
+
}
|
|
46
|
+
interface ThemeTypography {
|
|
47
|
+
fontFamily: string;
|
|
48
|
+
}
|
|
49
|
+
interface Theme {
|
|
50
|
+
colors: ThemeColors;
|
|
51
|
+
border: ThemeBorder;
|
|
52
|
+
typography: ThemeTypography;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Partner-facing branding. Mirrors the dashboard's
|
|
56
|
+
* `branding_configuration` fields. All optional — see `mergeBranding`.
|
|
57
|
+
*/
|
|
58
|
+
interface Branding {
|
|
59
|
+
primaryColor?: string;
|
|
60
|
+
secondaryColor?: string;
|
|
61
|
+
primaryButtonColor?: string;
|
|
62
|
+
secondaryButtonColor?: string;
|
|
63
|
+
/** Pixels. Serialized to `"{n}px"` for `border.radius`. */
|
|
64
|
+
borderRadius?: number;
|
|
65
|
+
/** Pixels. Serialized to `"{n}px"` for `border.width`. */
|
|
66
|
+
borderWidth?: number;
|
|
67
|
+
fontFamily?: string;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* The default OatFi theme. Ported from the embeds' `theme/types.js`, using the
|
|
72
|
+
* more complete shape (with `colors.default`) from `mf-remote-react`, extended
|
|
73
|
+
* with `buttonPrimary` / `buttonSecondary` so partner button colors have a home.
|
|
74
|
+
*
|
|
75
|
+
* `buttonPrimary` / `buttonSecondary` default to `primary` / `secondary` here so
|
|
76
|
+
* an unbranded theme renders identically to the original embeds.
|
|
77
|
+
*/
|
|
78
|
+
declare const defaultTheme: Theme;
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Map partner `Branding` onto the full internal `Theme`.
|
|
82
|
+
*
|
|
83
|
+
* Pure and total: any missing field falls back to `defaultTheme`. Button colors
|
|
84
|
+
* fall back to the *resolved* primary/secondary (so branding only the primary
|
|
85
|
+
* color also tints the primary button), then to their defaults.
|
|
86
|
+
*/
|
|
87
|
+
declare function mergeBranding(branding?: Branding): Theme;
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Build a MUI theme from our internal `Theme` so MUI-based primitives read the
|
|
91
|
+
* same tokens as styled-components ones. Ported from the embeds'
|
|
92
|
+
* `MuiThemeProvider.js`, typed and driven by the merged theme.
|
|
93
|
+
*/
|
|
94
|
+
declare function buildMuiTheme(theme: Theme): Theme$1;
|
|
95
|
+
|
|
96
|
+
interface ThemeProviderProps {
|
|
97
|
+
/**
|
|
98
|
+
* Partner branding overrides. Any omitted field falls back to `defaultTheme`.
|
|
99
|
+
* Omit entirely to render with the default OatFi theme.
|
|
100
|
+
*/
|
|
101
|
+
branding?: Branding;
|
|
102
|
+
children?: react__default.ReactNode;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Single theming entry point for @oatfi/ui consumers.
|
|
106
|
+
*
|
|
107
|
+
* Resolves `branding` into the full internal `Theme` and provides it through
|
|
108
|
+
* BOTH styled-components and MUI, so a primitive built on either gets identical
|
|
109
|
+
* tokens. Context cannot cross the embed loader's script boundary, so this is
|
|
110
|
+
* mounted *inside* each consumer's React root.
|
|
111
|
+
*/
|
|
112
|
+
declare function ThemeProvider({ branding, children }: ThemeProviderProps): react__default.JSX.Element;
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Read the resolved @oatfi/ui theme. Typed re-export of styled-components'
|
|
116
|
+
* `useTheme` (typing comes from the `DefaultTheme` augmentation in `styled.d.ts`).
|
|
117
|
+
*/
|
|
118
|
+
declare const useTheme: () => Theme;
|
|
119
|
+
|
|
120
|
+
declare const InputWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
121
|
+
declare const InputLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
122
|
+
declare const InputError: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
123
|
+
declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
|
|
124
|
+
declare const SelectInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
|
|
125
|
+
as?: styled_components.WebTarget | undefined;
|
|
126
|
+
forwardedAs?: styled_components.WebTarget | undefined;
|
|
127
|
+
}, never> & Partial<Pick<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
|
|
128
|
+
as?: styled_components.WebTarget | undefined;
|
|
129
|
+
forwardedAs?: styled_components.WebTarget | undefined;
|
|
130
|
+
}, never>>> & string;
|
|
131
|
+
declare const DropdownContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
132
|
+
declare const AutocompleteInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
|
|
133
|
+
as?: styled_components.WebTarget | undefined;
|
|
134
|
+
forwardedAs?: styled_components.WebTarget | undefined;
|
|
135
|
+
}, never> & Partial<Pick<styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
|
|
136
|
+
as?: styled_components.WebTarget | undefined;
|
|
137
|
+
forwardedAs?: styled_components.WebTarget | undefined;
|
|
138
|
+
}, never>>> & string;
|
|
139
|
+
declare const DropdownList: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen"> & {
|
|
140
|
+
$isOpen?: boolean;
|
|
141
|
+
}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOpen"> & {
|
|
142
|
+
$isOpen?: boolean;
|
|
143
|
+
}, never>>> & string;
|
|
144
|
+
declare const DropdownItem: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
|
|
145
|
+
$isSelected?: boolean;
|
|
146
|
+
}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
|
|
147
|
+
$isSelected?: boolean;
|
|
148
|
+
}, never>>> & string;
|
|
149
|
+
declare const NoResults: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Layout, typography, and button style bases, ported from
|
|
153
|
+
* `onboarding-flow-general/src/components/globals/shared/General.js`.
|
|
154
|
+
*
|
|
155
|
+
* The Button hover (`${theme.colors.primary}CC`) and `Body*` link colors
|
|
156
|
+
* (`theme.colors.primary`) already read from the theme in the source — the
|
|
157
|
+
* `#0e0e0e` / `#0000FF` literals the rollout plan flagged were from an older
|
|
158
|
+
* revision and are not present here.
|
|
159
|
+
*/
|
|
160
|
+
declare const H3: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
|
|
161
|
+
declare const H2: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
|
|
162
|
+
declare const H1: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
|
|
163
|
+
declare const Body100: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
164
|
+
declare const Body200: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
165
|
+
declare const Body400: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
166
|
+
declare const Container: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
167
|
+
declare const Content: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
168
|
+
declare const ButtonContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
169
|
+
declare const Button: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
170
|
+
declare const FlexRowWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
171
|
+
declare const FlexColumnWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
172
|
+
declare const DetailsContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
173
|
+
declare const DetailRow: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
174
|
+
declare const DetailElement: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
175
|
+
declare const TermsList: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
|
|
176
|
+
declare const StatusTag: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Form layout style bases, ported from
|
|
180
|
+
* `onboarding-flow-general/src/components/globals/shared/FormStyles.js`.
|
|
181
|
+
*
|
|
182
|
+
* The source's `Body100` is intentionally NOT re-exported here — the richer
|
|
183
|
+
* `Body100` from `layout.ts` (with `color` prop + link styling) is the single
|
|
184
|
+
* canonical version.
|
|
185
|
+
*/
|
|
186
|
+
declare const Form: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, never>>> & string;
|
|
187
|
+
declare const FormTitle: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
|
|
188
|
+
declare const FormSubtitle: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
|
|
189
|
+
declare const FormRow: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
190
|
+
declare const FormColumn: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
191
|
+
declare const FormCheckboxLabel: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
192
|
+
declare const FormActions: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
193
|
+
|
|
194
|
+
interface TextInputProps {
|
|
195
|
+
label?: string;
|
|
196
|
+
error?: string;
|
|
197
|
+
value: string;
|
|
198
|
+
onChange: (value: string) => void;
|
|
199
|
+
placeholder?: string;
|
|
200
|
+
type?: string;
|
|
201
|
+
required?: boolean;
|
|
202
|
+
disabled?: boolean;
|
|
203
|
+
className?: string;
|
|
204
|
+
/** Native `name` on the underlying input (form semantics + by-name selectors). */
|
|
205
|
+
name?: string;
|
|
206
|
+
/** Rendered as `data-testid` on the input element for e2e selection. */
|
|
207
|
+
testId?: string;
|
|
208
|
+
/** For `type="number"`: maximum numeric value. Otherwise: maximum input length. */
|
|
209
|
+
max?: number;
|
|
210
|
+
/** Strip numeric characters as the user types. */
|
|
211
|
+
ignoreNumbers?: boolean;
|
|
212
|
+
/** Strip non-numeric characters as the user types. */
|
|
213
|
+
onlyNumbers?: boolean;
|
|
214
|
+
}
|
|
215
|
+
/**
|
|
216
|
+
* Text field built on MUI `TextField`. Presentational: emits the raw string
|
|
217
|
+
* value via `onChange`. Ported from `onboarding-flow-general` (MUI v7
|
|
218
|
+
* `slotProps` replace the deprecated `inputProps`); `disabled` is new.
|
|
219
|
+
*/
|
|
220
|
+
declare function TextInput({ label, error, value, onChange, placeholder, type, required, disabled, className, name, testId, max, ignoreNumbers, onlyNumbers, }: TextInputProps): react__default.JSX.Element;
|
|
221
|
+
|
|
222
|
+
interface EmailInputProps {
|
|
223
|
+
label?: string;
|
|
224
|
+
error?: string;
|
|
225
|
+
value: string;
|
|
226
|
+
onChange: (value: string) => void;
|
|
227
|
+
placeholder?: string;
|
|
228
|
+
required?: boolean;
|
|
229
|
+
disabled?: boolean;
|
|
230
|
+
className?: string;
|
|
231
|
+
name?: string;
|
|
232
|
+
testId?: string;
|
|
233
|
+
}
|
|
234
|
+
/** Email field — a `TextInput` pinned to `type="email"`. */
|
|
235
|
+
declare function EmailInput({ placeholder, ...props }: EmailInputProps): react__default.JSX.Element;
|
|
236
|
+
|
|
237
|
+
interface PhoneInputProps {
|
|
238
|
+
label?: string;
|
|
239
|
+
error?: string;
|
|
240
|
+
/** Raw digits (up to 10). Displayed masked as `(XXX) XXX-XXXX`. */
|
|
241
|
+
value: string;
|
|
242
|
+
onChange: (rawValue: string) => void;
|
|
243
|
+
placeholder?: string;
|
|
244
|
+
required?: boolean;
|
|
245
|
+
disabled?: boolean;
|
|
246
|
+
className?: string;
|
|
247
|
+
name?: string;
|
|
248
|
+
testId?: string;
|
|
249
|
+
}
|
|
250
|
+
/** US phone field. Masks display as `(XXX) XXX-XXXX`; emits raw digits. */
|
|
251
|
+
declare function PhoneInput({ placeholder, value, onChange, ...props }: PhoneInputProps): react__default.JSX.Element;
|
|
252
|
+
|
|
253
|
+
interface SSNInputProps {
|
|
254
|
+
label?: string;
|
|
255
|
+
error?: string;
|
|
256
|
+
/** Raw value; displayed masked as `XXX-XX-XXXX`. */
|
|
257
|
+
value: string;
|
|
258
|
+
onChange: (value: string) => void;
|
|
259
|
+
placeholder?: string;
|
|
260
|
+
required?: boolean;
|
|
261
|
+
disabled?: boolean;
|
|
262
|
+
className?: string;
|
|
263
|
+
name?: string;
|
|
264
|
+
testId?: string;
|
|
265
|
+
}
|
|
266
|
+
/** SSN field. Masks display as `XXX-XX-XXXX`; emits the masked value. */
|
|
267
|
+
declare function SSNInput({ placeholder, value, onChange, ...props }: SSNInputProps): react__default.JSX.Element;
|
|
268
|
+
|
|
269
|
+
interface TaxIdInputProps {
|
|
270
|
+
label?: string;
|
|
271
|
+
error?: string;
|
|
272
|
+
/** Raw value; displayed masked as `XX-XXXXXXX` (EIN). */
|
|
273
|
+
value: string;
|
|
274
|
+
onChange: (value: string) => void;
|
|
275
|
+
placeholder?: string;
|
|
276
|
+
required?: boolean;
|
|
277
|
+
disabled?: boolean;
|
|
278
|
+
className?: string;
|
|
279
|
+
name?: string;
|
|
280
|
+
testId?: string;
|
|
281
|
+
}
|
|
282
|
+
/** EIN / Tax ID field. Masks display as `XX-XXXXXXX`; emits the masked value. */
|
|
283
|
+
declare function TaxIdInput({ placeholder, value, onChange, ...props }: TaxIdInputProps): react__default.JSX.Element;
|
|
284
|
+
|
|
285
|
+
interface CurrencyInputProps {
|
|
286
|
+
label?: string;
|
|
287
|
+
/** Raw numeric string (no `$`/commas); displayed with thousand separators. */
|
|
288
|
+
value: string;
|
|
289
|
+
onChange: (rawValue: string) => void;
|
|
290
|
+
placeholder?: string;
|
|
291
|
+
required?: boolean;
|
|
292
|
+
disabled?: boolean;
|
|
293
|
+
error?: string;
|
|
294
|
+
className?: string;
|
|
295
|
+
name?: string;
|
|
296
|
+
testId?: string;
|
|
297
|
+
}
|
|
298
|
+
/**
|
|
299
|
+
* Currency field with a `$` prefix and thousand separators. Built on the shared
|
|
300
|
+
* `BaseInput` style; emits the raw numeric string via `onChange`.
|
|
301
|
+
*/
|
|
302
|
+
declare function CurrencyInput({ label, value, onChange, placeholder, required, disabled, error, className, name, testId, }: CurrencyInputProps): react__default.JSX.Element;
|
|
303
|
+
|
|
304
|
+
interface DateInputProps {
|
|
305
|
+
label?: string;
|
|
306
|
+
error?: string;
|
|
307
|
+
value: string;
|
|
308
|
+
onChange: (value: string) => void;
|
|
309
|
+
required?: boolean;
|
|
310
|
+
disabled?: boolean;
|
|
311
|
+
className?: string;
|
|
312
|
+
name?: string;
|
|
313
|
+
testId?: string;
|
|
314
|
+
/** ISO date string (`YYYY-MM-DD`) bounds. */
|
|
315
|
+
min?: string;
|
|
316
|
+
max?: string;
|
|
317
|
+
}
|
|
318
|
+
/**
|
|
319
|
+
* Native date field (MUI `TextField type="date"`) with a calendar-icon trigger.
|
|
320
|
+
* Ported from `onboarding-flow-general`; the `react-feather` icon is replaced
|
|
321
|
+
* by `@mui/icons-material` (a peer dep) and `inputProps`/`InputProps` by
|
|
322
|
+
* MUI v7 `slotProps`.
|
|
323
|
+
*/
|
|
324
|
+
declare function DateInput({ label, error, value, onChange, required, disabled, className, name, testId, min, max, }: DateInputProps): react__default.JSX.Element;
|
|
325
|
+
|
|
326
|
+
/** Option shape consumed by `DropDown` and `SearchDropdown`. */
|
|
327
|
+
interface Option {
|
|
328
|
+
value: string;
|
|
329
|
+
label: string;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
interface DropDownProps {
|
|
333
|
+
label?: string;
|
|
334
|
+
error?: string;
|
|
335
|
+
value: string;
|
|
336
|
+
onChange: (value: string) => void;
|
|
337
|
+
options?: Option[];
|
|
338
|
+
required?: boolean;
|
|
339
|
+
disabled?: boolean;
|
|
340
|
+
className?: string;
|
|
341
|
+
name?: string;
|
|
342
|
+
testId?: string;
|
|
343
|
+
}
|
|
344
|
+
/** Single-select dropdown built on MUI `Select`. */
|
|
345
|
+
declare function DropDown({ label, error, value, onChange, options, required, disabled, className, name, testId, }: DropDownProps): react__default.JSX.Element;
|
|
346
|
+
|
|
347
|
+
interface SearchDropdownProps {
|
|
348
|
+
label?: string;
|
|
349
|
+
error?: string;
|
|
350
|
+
/** Selected `value`(s). A comma-joined string is also accepted in multiple mode. */
|
|
351
|
+
value: string | string[];
|
|
352
|
+
onChange: (value: string | string[]) => void;
|
|
353
|
+
options: Option[];
|
|
354
|
+
placeholder?: string;
|
|
355
|
+
required?: boolean;
|
|
356
|
+
disabled?: boolean;
|
|
357
|
+
className?: string;
|
|
358
|
+
multiple?: boolean;
|
|
359
|
+
noResultsMessage?: string;
|
|
360
|
+
name?: string;
|
|
361
|
+
testId?: string;
|
|
362
|
+
}
|
|
363
|
+
/** Searchable single/multi select built on MUI `Autocomplete`. */
|
|
364
|
+
declare function SearchDropdown({ label, error, value, onChange, options, placeholder, required, disabled, className, multiple, noResultsMessage, name, testId, }: SearchDropdownProps): react__default.JSX.Element;
|
|
365
|
+
|
|
366
|
+
interface FileInputProps {
|
|
367
|
+
label?: string;
|
|
368
|
+
error?: string;
|
|
369
|
+
value?: File | null;
|
|
370
|
+
/** Called with the chosen file (or null) and a validation error (or null). */
|
|
371
|
+
onChange: (file: File | null, error: string | null) => void;
|
|
372
|
+
placeholder?: string;
|
|
373
|
+
/** Comma-separated extension list, e.g. `.png,.jpg,.pdf`. */
|
|
374
|
+
accept?: string;
|
|
375
|
+
/** Max size in bytes. */
|
|
376
|
+
maxSize?: number;
|
|
377
|
+
required?: boolean;
|
|
378
|
+
className?: string;
|
|
379
|
+
showRequirements?: boolean;
|
|
380
|
+
name?: string;
|
|
381
|
+
testId?: string;
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* File upload with click + drag-and-drop, extension/size validation, and a
|
|
385
|
+
* requirements hint. Emits `(file, error)` — both nullable. Ported from
|
|
386
|
+
* `onboarding-flow-general`; `react-feather` icons replaced by
|
|
387
|
+
* `@mui/icons-material`, and the `dragOver`/`hasError` style props made transient.
|
|
388
|
+
*/
|
|
389
|
+
declare function FileInput({ label, error, value, onChange, placeholder, accept, maxSize, required, className, showRequirements, name, testId, }: FileInputProps): react__default.JSX.Element;
|
|
390
|
+
|
|
391
|
+
/**
|
|
392
|
+
* Themed radio button (a styled native `<input type="radio">`). The fill grows
|
|
393
|
+
* from the theme border color to `colors.primary` when checked.
|
|
394
|
+
*/
|
|
395
|
+
declare const RadioInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof react.ClassAttributes<HTMLInputElement> | keyof react.InputHTMLAttributes<HTMLInputElement>> & react.ClassAttributes<HTMLInputElement> & react.InputHTMLAttributes<HTMLInputElement>, "type"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof react.ClassAttributes<HTMLInputElement> | keyof react.InputHTMLAttributes<HTMLInputElement>> & react.ClassAttributes<HTMLInputElement> & react.InputHTMLAttributes<HTMLInputElement>, "type">>> & string;
|
|
396
|
+
|
|
397
|
+
/**
|
|
398
|
+
* Themed checkbox (a styled native `<input type="checkbox">`) with a CSS
|
|
399
|
+
* checkmark. Fill uses `colors.primary` when checked.
|
|
400
|
+
*/
|
|
401
|
+
declare const CheckboxInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof react.ClassAttributes<HTMLInputElement> | keyof react.InputHTMLAttributes<HTMLInputElement>> & react.ClassAttributes<HTMLInputElement> & react.InputHTMLAttributes<HTMLInputElement>, "type"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof react.ClassAttributes<HTMLInputElement> | keyof react.InputHTMLAttributes<HTMLInputElement>> & react.ClassAttributes<HTMLInputElement> & react.InputHTMLAttributes<HTMLInputElement>, "type">>> & string;
|
|
402
|
+
|
|
403
|
+
interface StepperStep {
|
|
404
|
+
label: string;
|
|
405
|
+
component?: react__default.ReactNode;
|
|
406
|
+
}
|
|
407
|
+
interface StepperProps {
|
|
408
|
+
steps: StepperStep[];
|
|
409
|
+
currentStep: number;
|
|
410
|
+
className?: string;
|
|
411
|
+
testId?: string;
|
|
412
|
+
}
|
|
413
|
+
/** Horizontal stepper with a number/label per step and the active step's content below. */
|
|
414
|
+
declare function Stepper({ steps, currentStep, className, testId }: StepperProps): react__default.JSX.Element;
|
|
415
|
+
|
|
416
|
+
interface Tab {
|
|
417
|
+
name: string;
|
|
418
|
+
content?: react__default.ReactNode;
|
|
419
|
+
}
|
|
420
|
+
interface TabsProps {
|
|
421
|
+
tabs?: Tab[];
|
|
422
|
+
defaultActiveTab?: number;
|
|
423
|
+
className?: string;
|
|
424
|
+
onTabChange?: (index: number) => void;
|
|
425
|
+
testId?: string;
|
|
426
|
+
}
|
|
427
|
+
/**
|
|
428
|
+
* Tabbed panel managing its own active-tab state. Implements the ARIA tabs
|
|
429
|
+
* pattern (`tablist`/`tab`/`tabpanel` with id linkage) for accessibility.
|
|
430
|
+
*/
|
|
431
|
+
declare function Tabs({ tabs, defaultActiveTab, className, onTabChange, testId, }: TabsProps): react__default.JSX.Element | null;
|
|
432
|
+
|
|
433
|
+
interface LoaderProps {
|
|
434
|
+
className?: string;
|
|
435
|
+
/** Spinner diameter in px. */
|
|
436
|
+
size?: number;
|
|
437
|
+
/** Accessible label announced to screen readers. */
|
|
438
|
+
label?: string;
|
|
439
|
+
testId?: string;
|
|
440
|
+
}
|
|
441
|
+
/** Centered indeterminate spinner (MUI `CircularProgress`). */
|
|
442
|
+
declare function Loader({ className, size, label, testId }: LoaderProps): react__default.JSX.Element;
|
|
443
|
+
|
|
444
|
+
interface DotsMenuOption {
|
|
445
|
+
label: string;
|
|
446
|
+
action: () => void;
|
|
447
|
+
}
|
|
448
|
+
interface DotsMenuProps {
|
|
449
|
+
options: DotsMenuOption[];
|
|
450
|
+
iconSize?: 'small' | 'medium' | 'large';
|
|
451
|
+
/** Accessible label for the trigger button. */
|
|
452
|
+
ariaLabel?: string;
|
|
453
|
+
testId?: string;
|
|
454
|
+
}
|
|
455
|
+
/**
|
|
456
|
+
* Overflow ("kebab") menu: an icon button opening a list of actions. IDs are
|
|
457
|
+
* generated with `useId()` so multiple instances on a page stay unique
|
|
458
|
+
* (the source hardcoded a single id).
|
|
459
|
+
*/
|
|
460
|
+
declare function DotsMenu({ options, iconSize, ariaLabel, testId, }: DotsMenuProps): react__default.JSX.Element;
|
|
461
|
+
|
|
462
|
+
interface PreviewProps {
|
|
463
|
+
/** Partner branding to render the sample with. Omit for the default theme. */
|
|
464
|
+
branding?: Branding;
|
|
465
|
+
className?: string;
|
|
466
|
+
}
|
|
467
|
+
/**
|
|
468
|
+
* A self-contained branded snapshot of the OatFi UI kit — a header, a few
|
|
469
|
+
* inputs, buttons, and a stepper. Wraps its own `ThemeProvider`, so a consumer
|
|
470
|
+
* (e.g. the dashboard's Branding settings page) drops it in and passes partner
|
|
471
|
+
* `branding` without setting up theming itself.
|
|
472
|
+
*/
|
|
473
|
+
declare function Preview({ branding, className }: PreviewProps): react__default.JSX.Element;
|
|
474
|
+
|
|
475
|
+
export { AutocompleteInput, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FileInput, FlexColumnWrapper, FlexRowWrapper, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, InputError, InputLabel, InputWrapper, Loader, NoResults, PhoneInput, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsList, TextInput, ThemeProvider, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
|
|
476
|
+
export type { Branding, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, LoaderProps, Option, PhoneInputProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography };
|