@amos.com/amos-js 0.9.8 → 0.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +27 -9
  2. package/dist/types.d.ts +1 -1
  3. package/package.json +1 -1
  4. package/src/types.ts +109 -1
package/README.md CHANGED
@@ -214,19 +214,37 @@ Radio groups (e.g. account type) always use an above-style group label regardles
214
214
  | `--primary-foreground` | Text on primary-colored surfaces | `oklch(0.985 0 0)` |
215
215
  | `--secondary` | Secondary button fill | `oklch(0.97 0 0)` |
216
216
  | `--secondary-foreground` | Text on secondary-colored surfaces | `oklch(0.205 0 0)` |
217
- | `--muted-foreground` | Placeholder text, helper labels, muted icons | `oklch(0.556 0 0)` |
218
- | `--accent` | Hover/focus highlight for interactive items | `oklch(0.97 0 0)` |
219
- | `--accent-foreground` | Text on accent-highlighted items | `oklch(0.205 0 0)` |
220
- | `--destructive` | Error/invalid state borders and icons | `oklch(0.577 0.245 27.325)` |
221
- | `--border` | General border color | `oklch(0.922 0 0)` |
222
- | `--input` | Input field border color | `oklch(0.922 0 0)` |
223
- | `--input-background` | Input field background fill | `var(--background)` |
224
- | `--input-height` | Height of text inputs and form controls | `2.25rem` |
217
+ | `--muted` | Muted surface color | `oklch(0.97 0 0)` |
218
+ | `--muted-foreground` | Placeholder text, helper labels, muted icons | `oklch(0.556 0 0)` |
219
+ | `--accent` | Hover/focus highlight for interactive items | `oklch(0.97 0 0)` |
220
+ | `--accent-foreground` | Text on accent-highlighted items | `oklch(0.205 0 0)` |
221
+ | `--destructive` | Error/invalid state borders, icons, and field error text | `oklch(0.577 0.245 27.325)` |
222
+ | `--destructive-foreground` | Text on destructive-colored surfaces | `oklch(0.45 0.24 27.325)` |
223
+ | `--border` | General border color | `oklch(0.922 0 0)` |
224
+ | `--popover` | Dropdown / popover panel background | `oklch(1 0 0)` |
225
+ | `--popover-foreground` | Dropdown / popover panel text color | `oklch(0.145 0 0)` |
226
+ | `--input` | Input field border color | `oklch(0.922 0 0)` |
227
+ | `--input-background` | Input field background fill | `var(--background)` |
228
+ | `--input-height` | Height of text inputs and form controls | `2.25rem` |
225
229
  | `--input-font-size` | Font size of text inputs and dropdown fields | `0.875rem` |
230
+ | `--input-font-weight` | Font weight of typed input values | `400` |
231
+ | `--input-padding` | Horizontal padding inside inputs | `0.75rem` |
232
+ | `--input-border-width` | Input field border width | `1px` |
233
+ | `--input-shadow` | Input field box shadow | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
234
+ | `--floating-input-height` | Height of inputs when labels are floating | `3.25rem` |
226
235
  | `--floating-label-font-size` | Font size of floating labels when focused or filled | `0.75rem` |
227
236
  | `--floating-label-font-weight` | Font weight of floating labels | `500` |
237
+ | `--floating-label-color` | Color of floating labels | `var(--muted-foreground)` |
238
+ | `--floating-label-offset` | Top offset of the shrunk floating label | `0.625rem` |
239
+ | `--label-font-size` | Font size of above-style field labels | `0.875rem` |
240
+ | `--label-font-weight` | Font weight of above-style field labels | `500` |
241
+ | `--field-gap` | Vertical gap between stacked form fields | `1rem` |
242
+ | `--control-gap` | Horizontal gap between side-by-side controls | `0.5rem` |
243
+ | `--error-font-size` | Font size of field-level error messages | `0.875rem` |
244
+ | `--radio-size` | Size of radio buttons on the bank account form | `1rem` |
228
245
  | `--ring` | Focus ring and outline color | `oklch(0.708 0 0)` |
229
- | `--radius` | Base border-radius (derived into sm/md/lg/xl) | `0.625rem` |
246
+ | `--ring-width` | Focus ring width | `3px` |
247
+ | `--radius` | Base border-radius (derived into sm/md/lg/xl) | `0.625rem` |
230
248
 
231
249
  ## API reference
232
250
 
package/dist/types.d.ts CHANGED
@@ -48,7 +48,7 @@ export type ConfirmationResult = {
48
48
  * Amos iframe UI. Only the variables you provide are sent; omitted
49
49
  * variables keep their defaults.
50
50
  */
51
- export type ThemeVariable = "--background" | "--foreground" | "--primary" | "--primary-foreground" | "--secondary" | "--secondary-foreground" | "--muted-foreground" | "--accent" | "--accent-foreground" | "--destructive" | "--border" | "--input" | "--input-background" | "--input-height" | "--input-font-size" | "--floating-label-font-size" | "--floating-label-font-weight" | "--ring" | "--radius";
51
+ export type ThemeVariable = "--background" | "--foreground" | "--primary" | "--primary-foreground" | "--secondary" | "--secondary-foreground" | "--muted" | "--muted-foreground" | "--accent" | "--accent-foreground" | "--destructive" | "--destructive-foreground" | "--border" | "--popover" | "--popover-foreground" | "--input" | "--input-background" | "--input-height" | "--input-font-size" | "--input-font-weight" | "--input-padding" | "--input-border-width" | "--input-shadow" | "--floating-input-height" | "--floating-label-font-size" | "--floating-label-font-weight" | "--floating-label-color" | "--floating-label-offset" | "--label-font-size" | "--label-font-weight" | "--field-gap" | "--control-gap" | "--error-font-size" | "--radio-size" | "--ring" | "--ring-width" | "--radius";
52
52
  /**
53
53
  * Placement of field labels in payment method forms.
54
54
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@amos.com/amos-js",
3
- "version": "0.9.8",
3
+ "version": "0.9.9",
4
4
  "main": "dist/index.js",
5
5
  "repository": {
6
6
  "type": "git",
package/src/types.ts CHANGED
@@ -92,6 +92,12 @@ export type ThemeVariable =
92
92
  * Default: oklch(0.205 0 0)
93
93
  */
94
94
  | "--secondary-foreground"
95
+ /*
96
+ * Muted surface color (e.g. chips, subdued fills).
97
+ *
98
+ * Default: oklch(0.97 0 0)
99
+ */
100
+ | "--muted"
95
101
  /*
96
102
  * Placeholder text, helper labels, and muted icons.
97
103
  *
@@ -112,17 +118,35 @@ export type ThemeVariable =
112
118
  */
113
119
  | "--accent-foreground"
114
120
  /*
115
- * Error/invalid state borders and icons.
121
+ * Error/invalid state borders, icons, and field error text.
116
122
  *
117
123
  * Default: oklch(0.577 0.245 27.325)
118
124
  */
119
125
  | "--destructive"
126
+ /*
127
+ * Text on destructive-colored surfaces (e.g. destructive buttons).
128
+ *
129
+ * Default: oklch(0.45 0.24 27.325)
130
+ */
131
+ | "--destructive-foreground"
120
132
  /*
121
133
  * General border color applied to all elements via the base layer.
122
134
  *
123
135
  * Default: oklch(0.922 0 0)
124
136
  */
125
137
  | "--border"
138
+ /*
139
+ * Dropdown / popover panel background.
140
+ *
141
+ * Default: oklch(1 0 0)
142
+ */
143
+ | "--popover"
144
+ /*
145
+ * Dropdown / popover panel text color.
146
+ *
147
+ * Default: oklch(0.145 0 0)
148
+ */
149
+ | "--popover-foreground"
126
150
  /*
127
151
  * Input field border color.
128
152
  *
@@ -147,6 +171,36 @@ export type ThemeVariable =
147
171
  * Default: 0.875rem
148
172
  */
149
173
  | "--input-font-size"
174
+ /*
175
+ * Font weight of typed input values and dropdown fields (e.g. `400`, `normal`).
176
+ *
177
+ * Default: 400
178
+ */
179
+ | "--input-font-weight"
180
+ /*
181
+ * Horizontal padding inside inputs and aligned floating labels (e.g. `0.75rem`, `12px`).
182
+ *
183
+ * Default: 0.75rem
184
+ */
185
+ | "--input-padding"
186
+ /*
187
+ * Input field border width (e.g. `1px`).
188
+ *
189
+ * Default: 1px
190
+ */
191
+ | "--input-border-width"
192
+ /*
193
+ * Input field box shadow (e.g. `none`, `0 1px 2px 0 rgb(0 0 0 / 0.05)`).
194
+ *
195
+ * Default: 0 1px 2px 0 rgb(0 0 0 / 0.05)
196
+ */
197
+ | "--input-shadow"
198
+ /*
199
+ * Height of text inputs when labels are floating (e.g. `3.25rem`, `52px`).
200
+ *
201
+ * Default: 3.25rem
202
+ */
203
+ | "--floating-input-height"
150
204
  /*
151
205
  * Font size of floating labels when the field is focused or filled
152
206
  * (e.g. `0.75rem`, `12px`). Does not affect the typed input value.
@@ -160,12 +214,66 @@ export type ThemeVariable =
160
214
  * Default: 500
161
215
  */
162
216
  | "--floating-label-font-weight"
217
+ /*
218
+ * Color of floating labels. Defaults to `--muted-foreground`.
219
+ *
220
+ * Default: var(--muted-foreground)
221
+ */
222
+ | "--floating-label-color"
223
+ /*
224
+ * Top offset of the shrunk floating label inside the control (e.g. `0.625rem`).
225
+ *
226
+ * Default: 0.625rem
227
+ */
228
+ | "--floating-label-offset"
229
+ /*
230
+ * Font size of above-style field labels and radio option labels.
231
+ *
232
+ * Default: 0.875rem
233
+ */
234
+ | "--label-font-size"
235
+ /*
236
+ * Font weight of above-style field labels and radio option labels.
237
+ *
238
+ * Default: 500
239
+ */
240
+ | "--label-font-weight"
241
+ /*
242
+ * Vertical gap between stacked form fields (e.g. `1rem`, `16px`).
243
+ *
244
+ * Default: 1rem
245
+ */
246
+ | "--field-gap"
247
+ /*
248
+ * Horizontal gap between side-by-side controls (e.g. expiry + CVC).
249
+ *
250
+ * Default: 0.5rem
251
+ */
252
+ | "--control-gap"
253
+ /*
254
+ * Font size of field-level error messages.
255
+ *
256
+ * Default: 0.875rem
257
+ */
258
+ | "--error-font-size"
259
+ /*
260
+ * Size of radio buttons on the bank account form (e.g. `1rem`, `16px`).
261
+ *
262
+ * Default: 1rem
263
+ */
264
+ | "--radio-size"
163
265
  /*
164
266
  * Focus ring and outline color for inputs and buttons.
165
267
  *
166
268
  * Default: oklch(0.708 0 0)
167
269
  */
168
270
  | "--ring"
271
+ /*
272
+ * Focus ring width for inputs (e.g. `3px`).
273
+ *
274
+ * Default: 3px
275
+ */
276
+ | "--ring-width"
169
277
  /*
170
278
  * Base border-radius; derived into --radius-sm/md/lg/xl.
171
279
  *