@cupra/ui-react 2.0.0-canary.253 → 2.0.0-canary.255
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/package.json +3 -3
package/README.md
CHANGED
|
@@ -330,6 +330,52 @@ import { Icon } from '@cupra/ui-react/Icon';
|
|
|
330
330
|
|
|
331
331
|
---
|
|
332
332
|
|
|
333
|
+
## RTL and internationalization
|
|
334
|
+
|
|
335
|
+
Set `dir` and `lang` on `<html>`; the components follow them. The `cupra` and `seat-legacy` themes have no RTL support. See the `@cupra/ui-kit` README for the full list of what is automatic and what you configure.
|
|
336
|
+
|
|
337
|
+
A form with an email field that stays left to right inside an RTL page:
|
|
338
|
+
|
|
339
|
+
```tsx
|
|
340
|
+
import { SearchInput } from "@cupra/ui-react/SearchInput";
|
|
341
|
+
import { TextInput } from "@cupra/ui-react/TextInput";
|
|
342
|
+
|
|
343
|
+
export function ContactForm() {
|
|
344
|
+
return (
|
|
345
|
+
<form dir="rtl" lang="ar">
|
|
346
|
+
<TextInput>
|
|
347
|
+
<input dir="auto" name="name" placeholder="الاسم" />
|
|
348
|
+
</TextInput>
|
|
349
|
+
|
|
350
|
+
<TextInput>
|
|
351
|
+
<input dir="ltr" type="email" name="email" placeholder="name@example.com" />
|
|
352
|
+
</TextInput>
|
|
353
|
+
|
|
354
|
+
<SearchInput>
|
|
355
|
+
<input dir="auto" type="text" name="search" placeholder="بحث" />
|
|
356
|
+
</SearchInput>
|
|
357
|
+
</form>
|
|
358
|
+
);
|
|
359
|
+
}
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
### Translating the accessibility texts
|
|
363
|
+
|
|
364
|
+
The built-in `aria-label` texts have optional `data-aria-label` props. They are plain strings, so they work in React 18 as they are:
|
|
365
|
+
|
|
366
|
+
```tsx
|
|
367
|
+
import { Calendar } from "@cupra/ui-react/Calendar";
|
|
368
|
+
|
|
369
|
+
<Calendar
|
|
370
|
+
locale="ar"
|
|
371
|
+
data-aria-label="التقويم"
|
|
372
|
+
data-aria-label-previous-month="الشهر السابق"
|
|
373
|
+
data-aria-label-next-month="الشهر التالي"
|
|
374
|
+
/>
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
---
|
|
378
|
+
|
|
333
379
|
## License
|
|
334
380
|
|
|
335
381
|
SEAT S.A. Library EULA 1.0
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cupra/ui-react",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.255",
|
|
4
4
|
"description": "React components library",
|
|
5
5
|
"author": "SEAT S.A.",
|
|
6
6
|
"license": "SEAT S.A. Library EULA 1.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
}
|
|
51
51
|
],
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@cupra/ui-kit": "2.0.0-canary.
|
|
53
|
+
"@cupra/ui-kit": "2.0.0-canary.239",
|
|
54
54
|
"react": ">= 18.3.1 < 20",
|
|
55
55
|
"react-dom": ">= 18.3.1 < 20",
|
|
56
56
|
"typescript": ">=5.0.0"
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"storybook": "^10.6.1",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
76
|
"vite": "^8.3.3",
|
|
77
|
-
"@cupra/ui-kit": "2.0.0-canary.
|
|
77
|
+
"@cupra/ui-kit": "2.0.0-canary.239"
|
|
78
78
|
},
|
|
79
79
|
"scripts": {
|
|
80
80
|
"build": "rm -rf dist && pnpm --filter @cupra/ui-kit build:react && tsc --declaration --emitDeclarationOnly && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",
|