@arbiui/react 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/LICENSE +203 -0
- package/README.md +635 -0
- package/dist/index.d.ts +395 -0
- package/dist/index.js +627 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,635 @@
|
|
|
1
|
+
# @arbiui/react
|
|
2
|
+
|
|
3
|
+
React component package for **ArbiUI**. It exports `View`, a polymorphic styling component that maps declarative style props to **Tailwind CSS v4** utility classes and inline CSS variables.
|
|
4
|
+
|
|
5
|
+
## Requirements
|
|
6
|
+
|
|
7
|
+
- **React 19** (peer dependency)
|
|
8
|
+
- `@arbiui/tailwindcss` **0.1.0** or compatible (peer dependency), imported into your Tailwind entry stylesheet
|
|
9
|
+
- **Tailwind CSS 4.0** or later, configured in the application
|
|
10
|
+
- **Node.js 22.14.0** or later (see `engines` in the package manifest)
|
|
11
|
+
- ESM-only package. It ships ES modules and TypeScript declarations, with no CommonJS build.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
pnpm add @arbiui/react @arbiui/tailwindcss
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Tailwind setup
|
|
20
|
+
|
|
21
|
+
Import the **ArbiUI** stylesheet in your application CSS after Tailwind itself. The stylesheet guarantees that the variable classes and preset value classes `View` generates at runtime are compiled.
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import 'tailwindcss';
|
|
25
|
+
@import '@arbiui/tailwindcss';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
See the `@arbiui/tailwindcss` [README](../tailwindcss/README.md) for details on safelist coverage.
|
|
29
|
+
|
|
30
|
+
## Package import
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { View } from '@arbiui/react';
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
The package entry also exports the prop group types, listed in the TypeScript section below.
|
|
37
|
+
|
|
38
|
+
## Quick start
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { View } from '@arbiui/react';
|
|
42
|
+
|
|
43
|
+
export function Card() {
|
|
44
|
+
return (
|
|
45
|
+
<View as="section" p="@6" rounded="xl" bgColor="$#ffffff" shadow="md">
|
|
46
|
+
<View as="h2" fontSize="lg" fontWeight="semibold" mb="$8px">
|
|
47
|
+
Title
|
|
48
|
+
</View>
|
|
49
|
+
<View fontSize="sm">Content goes here.</View>
|
|
50
|
+
</View>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## How View renders
|
|
56
|
+
|
|
57
|
+
`View` renders a plain DOM element with React `createElement`. There is no wrapper element and no runtime CSS.
|
|
58
|
+
|
|
59
|
+
- The element tag is controlled by the `as` prop and defaults to `div`.
|
|
60
|
+
- Props not recognized by `View` are spread onto the rendered element, so standard attributes, ARIA attributes, and event handlers work as usual.
|
|
61
|
+
- Refs are passed through as a [regular prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop), which requires **React 19**.
|
|
62
|
+
- Generated utility classes are merged with `clsx` and `tailwind-merge` and placed before your `className`. Because `tailwind-merge` resolves conflicts with the last class winning, your `className` can override any generated class.
|
|
63
|
+
- Generated CSS variables are merged into the element `style` after your `style` prop.
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
<View as="nav" display="flex" aria-label="Main" onClick={handler} />
|
|
67
|
+
// renders: <nav class="... flex ..." aria-label="Main" onClick={...} />
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Default prop values
|
|
71
|
+
|
|
72
|
+
Two props have defaults that are always emitted as classes when the prop is not set:
|
|
73
|
+
|
|
74
|
+
| Prop | Default | Note |
|
|
75
|
+
| ---------- | ---------- | --------------------------------------------------------- |
|
|
76
|
+
| `display` | `flex` | Pass another value such as `block` or `grid` to change it |
|
|
77
|
+
| `position` | `relative` | Pass `static` to remove positioning |
|
|
78
|
+
|
|
79
|
+
## Value syntax
|
|
80
|
+
|
|
81
|
+
Most style props accept a string and resolve it into a Tailwind class. Four value forms are supported. The resolution rules are identical for every string-valued prop.
|
|
82
|
+
|
|
83
|
+
### Plain values
|
|
84
|
+
|
|
85
|
+
A plain value produces the `prefix-value` utility class.
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
<View mb="4" />
|
|
89
|
+
// class includes: mb-4
|
|
90
|
+
|
|
91
|
+
<View flexDirection="col" />
|
|
92
|
+
// class includes: flex-col
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Negative values
|
|
96
|
+
|
|
97
|
+
A value starting with `-` produces the negative utility.
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
<View mt="-px" />
|
|
101
|
+
// class includes: -mt-px
|
|
102
|
+
|
|
103
|
+
<View order="-2" />
|
|
104
|
+
// class includes: -order-2
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
The sign must be inside the value, not before a prefix. `-mt="@8"` style input is not supported; write `mt="@-8"` instead, which resolves to a negative `calc` value.
|
|
108
|
+
|
|
109
|
+
### `$` prefix: arbitrary values
|
|
110
|
+
|
|
111
|
+
The `$` prefix passes the rest of the value through as a raw CSS value using Tailwind CSS variable shorthand. The class is fixed per prop, and the value is delivered through an inline CSS variable named `--see-<prop>`.
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<View mb="$12px" />
|
|
115
|
+
// class includes: mb-(--see-mb)
|
|
116
|
+
// style includes: { '--see-mb': '12px' }
|
|
117
|
+
|
|
118
|
+
<View bgColor="$#ef4444" />
|
|
119
|
+
// class includes: bg-(--see-bg-color)
|
|
120
|
+
// style includes: { '--see-bg-color': '#ef4444' }
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
The `$` value is used as-is in CSS. It is not a Tailwind palette lookup, so `bgColor="$red-500"` would set `background-color: red-500`, which is invalid. Use palette names as plain values (`bgColor="red-500"`, which relies on the literal class being compiled) or CSS colors with the `$` prefix.
|
|
124
|
+
|
|
125
|
+
Certain utilities require a Tailwind data-type hint to resolve a variable, and `View` adds it automatically. For example the font size prop emits `text-(length:--see-font-size)` and the background image prop emits `bg-(image:--see-bg-image)`. Border widths emit `border-(length:--see-border)`.
|
|
126
|
+
|
|
127
|
+
### `@` prefix: spacing unit values
|
|
128
|
+
|
|
129
|
+
The `@` prefix produces a spacing value based on Tailwind's `--spacing` variable, which defaults to `0.25rem` and drives the Tailwind spacing scale.
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<View px="@8" />
|
|
133
|
+
// class includes: px-(--see-px)
|
|
134
|
+
// style includes: { '--see-px': 'calc(var(--spacing) * 8)' }
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
`@8` therefore resolves to `2rem` with the default spacing scale, and follows the application spacing scale when it is customized. Negative unit values are written with the sign after the prefix, for example `mt="@-2"`.
|
|
138
|
+
|
|
139
|
+
### Summary
|
|
140
|
+
|
|
141
|
+
| Input | Generated class | Generated inline style |
|
|
142
|
+
| ------------ | --------------- | ------------------------------------- |
|
|
143
|
+
| `mb="4"` | `mb-4` | none |
|
|
144
|
+
| `mb="-px"` | `-mb-px` | none |
|
|
145
|
+
| `mb="$12px"` | `mb-(--see-mb)` | `--see-mb: 12px` |
|
|
146
|
+
| `px="@8"` | `px-(--see-px)` | `--see-px: calc(var(--spacing) * 8)` |
|
|
147
|
+
| `mt="@-2"` | `mt-(--see-mt)` | `--see-mt: calc(var(--spacing) * -2)` |
|
|
148
|
+
|
|
149
|
+
## Class generation and the safelist
|
|
150
|
+
|
|
151
|
+
`View` builds class strings at runtime. Tailwind generates a class when one of the following holds:
|
|
152
|
+
|
|
153
|
+
- The class is safelisted by `@arbiui/tailwindcss`. This covers every `$` and `@` value (each prop has a fixed variable class) and the enumerated preset scales such as text sizes, font weights, shadows, blurs, rounded radii, and cursor keywords. These always compile regardless of source scanning.
|
|
154
|
+
- The class string appears as a literal in a file Tailwind scans. All enumerated values of the prop types, including map-based values such as `flexDirection="col"` (`flex-col`), `items="center"` (`items-center`), and bare classes such as `border` or `ring`, ship as literal strings in the installed package output and are found by Tailwind v4 automatic source detection.
|
|
155
|
+
- Free-form strings outside the enumerated type unions, for example `mb="4"` or `bgColor="red-500"`, do not appear in any scanned file and are not safelisted. They compile only if the literal class also appears in scanned source. Use the `$` or `@` prefix for arbitrary values, or ensure the class literal exists in your source.
|
|
156
|
+
|
|
157
|
+
If classes from package sources are not compiled in your setup, update Tailwind CSS and its integration packages, or fall back to `$` and `@` values, which never depend on scanning. See the `@arbiui/tailwindcss` [README](../tailwindcss/README.md) for details.
|
|
158
|
+
|
|
159
|
+
## Props reference
|
|
160
|
+
|
|
161
|
+
`View` combines all style prop groups into a single props type. Props are documented below in the groups that the package also exports as TypeScript types. Unless stated otherwise:
|
|
162
|
+
|
|
163
|
+
- Omitting a prop, passing `undefined`, or passing an empty string emits nothing.
|
|
164
|
+
- Boolean props emit their class only when `true`.
|
|
165
|
+
- String props follow the value syntax rules above.
|
|
166
|
+
- Shared value aliases used in the tables are defined at the end of this section.
|
|
167
|
+
|
|
168
|
+
### Layout (ViewLayoutProps)
|
|
169
|
+
|
|
170
|
+
| Prop | Type | Description |
|
|
171
|
+
| ------------------------------------------------ | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
172
|
+
| `aspect` | `'square' \| 'video' \| 'auto' \| string` | `aspect-*` utility |
|
|
173
|
+
| `columns` | `Scale \| 'auto' \| string` | `columns-*` utility |
|
|
174
|
+
| `breakAfter` | `Break` | `break-after-*` utility |
|
|
175
|
+
| `breakBefore` | `Break` | `break-before-*` utility |
|
|
176
|
+
| `breakInside` | `'auto' \| 'avoid' \| 'avoid-page' \| 'avoid-column'` | `break-inside-*` utility |
|
|
177
|
+
| `boxDecoration` | `'clone' \| 'slice'` | `box-decoration-clone` or `box-decoration-slice` |
|
|
178
|
+
| `box` | `'border' \| 'content'` | `box-border` or `box-content` |
|
|
179
|
+
| `display` | `Display` | Display utility. Defaults to `flex` |
|
|
180
|
+
| `float` | `'right' \| 'left' \| 'start' \| 'end' \| 'none'` | `float-*` utility |
|
|
181
|
+
| `clear` | `'left' \| 'right' \| 'both' \| 'start' \| 'end' \| 'none'` | `clear-*` utility |
|
|
182
|
+
| `isolate` | `boolean` | `isolate` |
|
|
183
|
+
| `autoIsolate` | `boolean` | `isolation-auto` |
|
|
184
|
+
| `objectFit` | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `object-*` utility |
|
|
185
|
+
| `object` | `Placement \| string` | `object-*` position utility |
|
|
186
|
+
| `overflow`, `overflowX`, `overflowY` | `Overflow` | `overflow-*` utilities |
|
|
187
|
+
| `overscroll`, `overscrollX`, `overscrollY` | `'auto' \| 'contain' \| 'none'` | `overscroll-*` utilities |
|
|
188
|
+
| `hideScrollBar` | `boolean` | Hides the scrollbar with `scrollbar-width: none`, `-ms-overflow-style: none`, and a WebKit scrollbar pseudo-element rule |
|
|
189
|
+
| `position` | `'static' \| 'fixed' \| 'absolute' \| 'relative' \| 'sticky'` | Position utility. Defaults to `relative` |
|
|
190
|
+
| `inset`, `insetX`, `insetY` | `AbsoluteValue \| string` | `inset-*` utilities, support negative values |
|
|
191
|
+
| `start`, `end`, `top`, `right`, `bottom`, `left` | `AbsoluteValue \| string` | Logical and physical offset utilities, support negative values |
|
|
192
|
+
| `visibility` | `'visible' \| 'invisible' \| 'collapse'` | Visibility utility |
|
|
193
|
+
| `z` | `'auto' \| string` | `z-*` utility, supports negative values |
|
|
194
|
+
|
|
195
|
+
### Flex and grid (ViewFlexGridProps)
|
|
196
|
+
|
|
197
|
+
| Prop | Type | Description |
|
|
198
|
+
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
|
|
199
|
+
| `basis` | `'full' \| 'auto' \| Scale \| string` | `basis-*` utility |
|
|
200
|
+
| `flexDirection` | `'row' \| 'row-reverse' \| 'col' \| 'col-reverse'` | `flex-row`, `flex-col`, and reverse variants |
|
|
201
|
+
| `wrap` | `'nowrap' \| 'wrap' \| 'wrap-reverse'` | `flex-nowrap`, `flex-wrap`, `flex-wrap-reverse` |
|
|
202
|
+
| `flex` | `'auto' \| 'initial' \| 'none' \| string` | `flex-*` utility |
|
|
203
|
+
| `grow` | `boolean \| string` | `true` emits `grow`; a string emits `grow-*` or a variable class |
|
|
204
|
+
| `shrink` | `boolean \| string` | `true` emits `shrink`; a string emits `shrink-*` or a variable class |
|
|
205
|
+
| `order` | `'first' \| 'last' \| 'none' \| string` | `order-*` utility, supports negative values |
|
|
206
|
+
| `gridCols`, `gridRows` | `'none' \| 'subgrid' \| string` | `grid-cols-*` and `grid-rows-*` utilities |
|
|
207
|
+
| `col`, `row` | `'auto' \| string` | `col-*` and `row-*` span utilities, support negative values |
|
|
208
|
+
| `colSpan`, `rowSpan` | `'full' \| string` | `col-span-*` and `row-span-*` utilities |
|
|
209
|
+
| `colStart`, `colEnd`, `rowStart`, `rowEnd` | `'auto' \| string` | Grid line placement utilities, support negative values |
|
|
210
|
+
| `gridFlow` | `'row' \| 'col' \| 'dense' \| 'row-dense' \| 'col-dense'` | `grid-flow-*` utilities |
|
|
211
|
+
| `autoCols`, `autoRows` | `'auto' \| 'min' \| 'max' \| 'fr' \| string` | `auto-cols-*` and `auto-rows-*` utilities |
|
|
212
|
+
| `gap`, `gapX`, `gapY` | `string` | `gap-*` utilities |
|
|
213
|
+
| `self` | `Alignment \| 'auto' \| 'end-safe' \| 'center-safe' \| 'baseline' \| 'baseline-end'` | `self-*` utility |
|
|
214
|
+
| `items` | `Alignment \| 'end-safe' \| 'center-safe' \| 'baseline' \| 'baseline-last'` | `items-*` utility |
|
|
215
|
+
| `content` | `Alignment \| 'normal' \| 'between' \| 'around' \| 'evenly' \| 'baseline'` | `content-*` utility |
|
|
216
|
+
| `justifySelf` | `Alignment \| 'auto' \| 'center-safe' \| 'end-safe'` | `justify-self-*` utility |
|
|
217
|
+
| `justifyItems` | `Alignment \| 'end-safe' \| 'center-safe' \| 'normal'` | `justify-items-*` utility |
|
|
218
|
+
| `justify` | `Alignment \| 'end-safe' \| 'center-safe' \| 'between' \| 'around' \| 'evenly' \| 'baseline' \| 'normal'` | `justify-*` utility |
|
|
219
|
+
| `placeSelf` | `Alignment \| 'auto' \| 'end-safe' \| 'center-safe'` | `place-self-*` utility |
|
|
220
|
+
| `placeItems` | `Alignment \| 'end-safe' \| 'center-safe' \| 'baseline'` | `place-items-*` utility |
|
|
221
|
+
| `placeContent` | `Alignment \| 'center-safe' \| 'end-safe' \| 'between' \| 'around' \| 'evenly' \| 'baseline'` | `place-content-*` utility |
|
|
222
|
+
|
|
223
|
+
### Spacing (ViewSpacingProps)
|
|
224
|
+
|
|
225
|
+
Padding props: `p`, `px`, `py`, `ps`, `pe`, `pt`, `pr`, `pb`, `pl`. Type `'px' | string`.
|
|
226
|
+
|
|
227
|
+
Margin props: `m`, `mx`, `my`, `ms`, `me`, `mt`, `mr`, `mb`, `ml`. Type `'auto' | 'px' | '-px' | string`.
|
|
228
|
+
|
|
229
|
+
| Prop | Description |
|
|
230
|
+
| --------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
|
231
|
+
| `p`, `px`, `py`, `ps`, `pe`, `pt`, `pr`, `pb`, `pl` | `p-*`, `px-*`, and so on padding utilities, including logical properties `ps` and `pe` |
|
|
232
|
+
| `m`, `mx`, `my`, `ms`, `me`, `mt`, `mr`, `mb`, `ml` | Margin utilities; support `auto` and negative values |
|
|
233
|
+
| `spaceX`, `spaceY` | `space-x-*` and `space-y-*` child spacing utilities, support negative values |
|
|
234
|
+
| `spaceXReverse`, `spaceYReverse` | `space-x-reverse` and `space-y-reverse` |
|
|
235
|
+
|
|
236
|
+
All spacing props work with the `$` and `@` prefixes, which is the recommended way to pass arbitrary lengths.
|
|
237
|
+
|
|
238
|
+
```tsx
|
|
239
|
+
<View p="@4" mb="$16px" mx="auto">
|
|
240
|
+
Spaced content
|
|
241
|
+
</View>
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### Sizing (ViewSizingProps)
|
|
245
|
+
|
|
246
|
+
| Prop | Type | Description |
|
|
247
|
+
| ------------------- | ------------------------------------------------- | ---------------------------------------------- |
|
|
248
|
+
| `size` | `'auto' \| Sizing \| string` | `size-*` utility |
|
|
249
|
+
| `w`, `minW`, `maxW` | `Scale \| 'auto' \| Sizing \| 'screen' \| string` | Width utilities; `maxW` also accepts `'none'` |
|
|
250
|
+
| `h`, `minH`, `maxH` | `'auto' \| Sizing \| 'screen' \| 'lh' \| string` | Height utilities; `maxH` also accepts `'none'` |
|
|
251
|
+
|
|
252
|
+
### Typography (ViewTypographyProps)
|
|
253
|
+
|
|
254
|
+
| Prop | Type | Description |
|
|
255
|
+
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
|
|
256
|
+
| `fontFamily` | `'sans' \| 'serif' \| 'mono' \| 'display' \| string` | `font-*` family utility |
|
|
257
|
+
| `fontSize` | `'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' ... '9xl' \| string` | `text-*` size utility; variable class uses a `length` type hint |
|
|
258
|
+
| `fontSmoothing` | `'antialiased' \| 'subpixel-antialiased'` | Font smoothing utility |
|
|
259
|
+
| `fontStyle` | `'italic' \| 'not-italic'` | Font style utility |
|
|
260
|
+
| `fontWeight` | `'thin' ... 'black' \| string` | `font-*` weight utility |
|
|
261
|
+
| `fontStretch` | `'ultra-condensed' ... 'ultra-expanded' \| string` | `font-stretch-*` utility |
|
|
262
|
+
| `fontVariantNumeric` | `'normal-nums' \| 'ordinal' \| 'slashed-zero' \| 'lining-nums' \| 'oldstyle-nums' \| 'proportional-nums' \| 'tabular-nums' \| 'diagonal-fractions' \| 'stacked-fractions'` | Numeric variant utilities |
|
|
263
|
+
| `letterSpacing` | `'tighter' ... 'widest' \| string` | `tracking-*` utility |
|
|
264
|
+
| `lineClamp` | `'none' \| string` | `line-clamp-*` utility |
|
|
265
|
+
| `lineHeight` | `'none' \| string` | `leading-*` utility |
|
|
266
|
+
| `listImage` | `'none' \| string` | `list-image-*` utility |
|
|
267
|
+
| `listPosition` | `'inside' \| 'outside'` | `list-inside` or `list-outside` |
|
|
268
|
+
| `list` | `'disc' \| 'decimal' \| 'none' \| string` | `list-*` utility |
|
|
269
|
+
| `textAlign` | `'left' \| 'center' \| 'right' \| 'justify' \| 'start' \| 'end'` | `text-*` alignment utility |
|
|
270
|
+
| `text` | `Color \| string` | `text-*` color utility |
|
|
271
|
+
| `textDecoration` | `object`, see below | Text decoration utilities |
|
|
272
|
+
| `textTransform` | `'uppercase' \| 'lowercase' \| 'capitalize' \| 'normal-case'` | Text transform utility |
|
|
273
|
+
| `textOverflow` | `'truncate' \| 'text-ellipsis' \| 'text-clip'` | Value is used as the class verbatim |
|
|
274
|
+
| `textWrap` | `'wrap' \| 'nowrap' \| 'balance' \| 'pretty'` | `text-wrap` family utilities |
|
|
275
|
+
| `textIndent` | `'px' \| '-px' \| string` | `indent-*` utility, supports negative values |
|
|
276
|
+
| `verticalAlign` | `'baseline' \| 'top' \| 'middle' \| 'bottom' \| 'text-top' \| 'text-bottom' \| 'sub' \| 'super' \| string` | `align-*` utility |
|
|
277
|
+
| `whitespace` | `'normal' \| 'nowrap' \| 'pre' \| 'pre-line' \| 'pre-wrap' \| 'break-spaces'` | `whitespace-*` utility |
|
|
278
|
+
| `wordbreak` | `'normal' \| 'all' \| 'keep'` | Maps to `break-normal`, `break-all`, `break-keep` |
|
|
279
|
+
| `overflowWrap` | `'break-word' \| 'anywhere' \| 'normal'` | Maps to `wrap-break-word`, `wrap-anywhere`, `wrap-normal` |
|
|
280
|
+
| `hyphens` | `'none' \| 'manual' \| 'auto'` | `hyphens-*` utility |
|
|
281
|
+
|
|
282
|
+
The `textDecoration` object controls line, color, style, thickness, and offset independently:
|
|
283
|
+
|
|
284
|
+
```tsx
|
|
285
|
+
<View textDecoration={{ line: 'underline', color: '$#ef4444', thickness: '$2px', underlineOffset: '$4px' }}>Link text</View>
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
| Key | Emitted utility |
|
|
289
|
+
| ----------------- | ---------------------------------------------------------------------------------------------------- |
|
|
290
|
+
| `line` | `underline`, `overline`, `line-through`, `no-underline` |
|
|
291
|
+
| `color` | `decoration-*` |
|
|
292
|
+
| `style` | `decoration-solid`, `decoration-double`, `decoration-dotted`, `decoration-dashed`, `decoration-wavy` |
|
|
293
|
+
| `thickness` | `decoration-*` or `decoration-(length:--see-decoration-thickness)` for `$` and `@` values |
|
|
294
|
+
| `underlineOffset` | `underline-offset-*`, supports negative values |
|
|
295
|
+
|
|
296
|
+
### Background (ViewBackgroundProps)
|
|
297
|
+
|
|
298
|
+
| Prop | Type | Description |
|
|
299
|
+
| -------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
300
|
+
| `bgAttachment` | `'fixed' \| 'local' \| 'scroll'` | `bg-fixed`, `bg-local`, `bg-scroll` |
|
|
301
|
+
| `bgClip` | `'border' \| 'padding' \| 'content' \| 'text'` | `bg-clip-*` utilities |
|
|
302
|
+
| `bgColor` | `Color \| string` | `bg-*` color utility |
|
|
303
|
+
| `bgImage` | `'none' \| string` | `bg-*` image utility; variable class uses an `image` type hint |
|
|
304
|
+
| `bgLinear` | `'to-t' ... 'to-tl' \| string` | `bg-linear-*` direction utilities, support negative angle values |
|
|
305
|
+
| `bgRadial` | `boolean \| string` | `true` emits `bg-radial`; a string emits `bg-radial-*` or a variable class |
|
|
306
|
+
| `bgConic` | `string` | `bg-conic-*` utility, supports negative values |
|
|
307
|
+
| `gradient` | `{ from?, via?, to? }` | Gradient stop colors, see below |
|
|
308
|
+
| `bgOrigin` | `'border' \| 'padding' \| 'content'` | `bg-origin-*` utilities |
|
|
309
|
+
| `bgPosition` | `Placement \| string` | Placement keywords emit `bg-center`, `bg-top`, and so on; other values emit `bg-position-*` |
|
|
310
|
+
| `bgRepeat` | `Repeat` | `bg-repeat` family utilities |
|
|
311
|
+
| `bgSize` | `'auto' \| 'cover' \| 'contain' \| string` | Keywords emit `bg-auto`, `bg-cover`, `bg-contain`; other values emit `bg-size-*` |
|
|
312
|
+
|
|
313
|
+
The `gradient` object sets gradient stops:
|
|
314
|
+
|
|
315
|
+
```tsx
|
|
316
|
+
<View bgLinear="to-r" gradient={{ from: '$#3b82f6', via: '$#a855f7', to: '$#ec4899' }}>
|
|
317
|
+
Gradient banner
|
|
318
|
+
</View>
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Border and outline (ViewBorderProps)
|
|
322
|
+
|
|
323
|
+
| Prop | Type | Description |
|
|
324
|
+
| ---------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------- |
|
|
325
|
+
| `rounded` | `Radius \| string \| object` | Corner radius, see below |
|
|
326
|
+
| `border` | `boolean \| string \| OutlineTuple \| object` | Border width and per-side widths, see below |
|
|
327
|
+
| `borderColor` | `Color \| string` | `border-*` color; applies when `border` is a boolean or a string |
|
|
328
|
+
| `borderStyle` | `LineLook` | `border-solid` and siblings |
|
|
329
|
+
| `divideX`, `divideY` | `string` | `divide-x-*` and `divide-y-*` width utilities with a `length` type hint |
|
|
330
|
+
| `divideColor` | `Color \| string` | `divide-*` color utility |
|
|
331
|
+
| `divideStyle` | `LineLook` | `divide-solid` and siblings |
|
|
332
|
+
| `divideXReverse`, `divideYReverse` | `boolean` | Reverse direction utilities |
|
|
333
|
+
| `outline` | `boolean \| string \| OutlineTuple \| object` | Outline width, see below |
|
|
334
|
+
| `outlineColor` | `Color \| string` | `outline-*` color; applies when `outline` is a boolean or a string |
|
|
335
|
+
| `outlineStyle` | `LineLook` | `outline-solid` and siblings |
|
|
336
|
+
| `outlineOffset` | `string` | `outline-offset-*` utility, supports negative values |
|
|
337
|
+
|
|
338
|
+
The `rounded` prop accepts a single value or an object of per-side keys: `s`, `e`, `t`, `r`, `b`, `l`, `ss`, `se`, `ee`, `es`, `tl`, `tr`, `br`, `bl`.
|
|
339
|
+
|
|
340
|
+
```tsx
|
|
341
|
+
<View rounded="lg" />
|
|
342
|
+
<View rounded={{ t: 'lg', b: 'none' }} />
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
The `border` prop supports four forms:
|
|
346
|
+
|
|
347
|
+
```tsx
|
|
348
|
+
<View border={true} borderColor="$#e5e7eb" /> // border plus color and style props
|
|
349
|
+
<View border="2px" borderColor="$#e5e7eb" /> // width as a CSS length
|
|
350
|
+
<View border={['2px', '#e5e7eb']} /> // width and color tuple
|
|
351
|
+
<View border={{ width: '2px', color: '$#e5e7eb', x: '1px', t: ['2px', '#ef4444'] }} />
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
Behavior details for `border`:
|
|
355
|
+
|
|
356
|
+
- `border={true}` emits the `border` class and applies `borderColor` and `borderStyle`.
|
|
357
|
+
- A string or tuple width is applied as a raw CSS length through a variable class such as `border-(length:--see-border)`. Tailwind spacing names such as `"2"` are not converted; pass CSS lengths like `"2px"` or use `border="@2"` for spacing-unit widths. Tuple colors are also raw CSS values, so pass CSS colors, not palette names. Colors in the boolean and string forms follow the same rule: palette names emit classes that may not be safelisted, while `$`-prefixed CSS colors always work.
|
|
358
|
+
- The object form emits a border width class even when `width` is omitted (the bare `border` class) and reads its color and style from the object; `borderColor` is ignored in this form. Side keys `x`, `y`, `s`, `e`, `t`, `r`, `b`, `l` each accept a width string or an `OutlineTuple`.
|
|
359
|
+
|
|
360
|
+
The `outline` prop follows the same four forms. Differences from `border`:
|
|
361
|
+
|
|
362
|
+
- A string width emits `outline-(length:--see-outline)`; the object form does not emit a bare `outline` class when `width` is omitted.
|
|
363
|
+
- The object form reads `color`, `style`, and `offset` from the object; `outlineColor` applies only in the boolean and string forms.
|
|
364
|
+
|
|
365
|
+
`OutlineTuple` is a tuple of `[width: string, color?: Color | string]`. A placeholder variant `[Fallback, color]` omits the width and falls back to the bare class:
|
|
366
|
+
|
|
367
|
+
```tsx
|
|
368
|
+
import { _, View } from '@arbiui/react';
|
|
369
|
+
|
|
370
|
+
<View border={[_, '#e5e7eb']} /> // emits border plus border-(--see-border-color)
|
|
371
|
+
<View outline={['2px', '#3b82f6']} />
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
### Effects (ViewEffectProps)
|
|
375
|
+
|
|
376
|
+
| Prop | Type | Description |
|
|
377
|
+
| -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
378
|
+
| `shadow` | `'2xs' ... '2xl' \| 'none' \| string` | `shadow-*` utility |
|
|
379
|
+
| `shadowColor` | `Color \| string` | `shadow-*` color utility |
|
|
380
|
+
| `insetShadow` | `'2xs' \| 'xs' \| 'sm' \| 'none' \| string` | `inset-shadow-*` utility |
|
|
381
|
+
| `insetShadowColor` | `Color \| string` | `inset-shadow-*` color utility |
|
|
382
|
+
| `ring` | `boolean \| string` | `true` emits `ring`; a string emits `ring-*` |
|
|
383
|
+
| `ringColor` | `Color \| string` | `ring-*` color utility |
|
|
384
|
+
| `insetRing` | `boolean \| string` | Same forms as `ring` for the inset ring |
|
|
385
|
+
| `insetRingColor` | `Color \| string` | `inset-ring-*` color utility |
|
|
386
|
+
| `textShadow` | `'2xs' ... 'lg' \| 'none' \| string` | `text-shadow-*` utility |
|
|
387
|
+
| `textShadowColor` | `Color \| string` | `text-shadow-*` color utility |
|
|
388
|
+
| `opacity` | `string` | `opacity-*` utility |
|
|
389
|
+
| `mixBlend` | `Blending \| 'plus-darker' \| 'plus-lighter'` | `mix-blend-*` utilities |
|
|
390
|
+
| `bgBlend` | `Blending` | `bg-blend-*` utilities |
|
|
391
|
+
| `maskClip` | `'border' \| 'padding' \| 'content' \| 'fill' \| 'stroke' \| 'view' \| 'no-clip'` | `mask-clip-*` utilities and `mask-no-clip` |
|
|
392
|
+
| `maskComposite` | `'add' \| 'subtract' \| 'intersect' \| 'exclude'` | `mask-*` composite utilities |
|
|
393
|
+
| `maskImage` | `'none' \| string` | `mask-*` image utility |
|
|
394
|
+
| `maskLinear` | `string` | `mask-linear-<angle>`, supports negative angles |
|
|
395
|
+
| `maskLinearFrom`, `maskLinearTo` | `string` | Gradient stop utilities for the linear mask |
|
|
396
|
+
| `maskTopFrom`, `maskTopTo`, `maskRightFrom`, `maskRightTo`, `maskBottomFrom`, `maskBottomTo`, `maskLeftFrom`, `maskLeftTo` | `string` | Edge-direction mask stop utilities |
|
|
397
|
+
| `maskXFrom`, `maskXTo`, `maskYFrom`, `maskYTo` | `string` | Axis-direction mask stop utilities |
|
|
398
|
+
| `maskRadial` | `string` | `mask-radial-*` value utility |
|
|
399
|
+
| `maskRadialFrom`, `maskRadialTo` | `string` | Gradient stop utilities for the radial mask |
|
|
400
|
+
| `maskRadialShape` | `'circle' \| 'ellipse'` | `mask-circle` or `mask-ellipse` |
|
|
401
|
+
| `maskRadialSpot` | `'closest-corner' ... 'at-bottom-right'` | `mask-radial-*` position utilities |
|
|
402
|
+
| `maskConic` | `string` | `mask-conic-<angle>`, supports negative angles |
|
|
403
|
+
| `maskConicFrom`, `maskConicTo` | `string` | Gradient stop utilities for the conic mask |
|
|
404
|
+
| `maskMode` | `'alpha' \| 'luminance' \| 'match'` | `mask-alpha`, `mask-luminance`, `mask-match` |
|
|
405
|
+
| `maskOrigin` | `'border' \| 'padding' \| 'content' \| 'fill' \| 'stroke' \| 'view'` | `mask-origin-*` utilities |
|
|
406
|
+
| `maskPosition` | `Placement \| string` | Placement keywords emit shorthand classes; others emit `mask-position-*` |
|
|
407
|
+
| `maskRepeat` | `Repeat` | `mask-repeat` family utilities |
|
|
408
|
+
| `maskSize` | `'auto' \| 'cover' \| 'contain' \| string` | Keywords emit shorthand classes; others emit `mask-size-*` |
|
|
409
|
+
| `maskType` | `'alpha' \| 'luminance'` | `mask-type-*` utilities |
|
|
410
|
+
|
|
411
|
+
### Filters (ViewFiltersProps)
|
|
412
|
+
|
|
413
|
+
Filter props accept a boolean or string form where noted. `true` emits the bare utility; a string emits `prefix-value` or a variable class.
|
|
414
|
+
|
|
415
|
+
| Prop | Type | Description |
|
|
416
|
+
| ------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------- |
|
|
417
|
+
| `filter` | `'none' \| string` | `filter-*` utility |
|
|
418
|
+
| `blur` | `'xs' ... '3xl' \| 'none' \| string` | `blur-*` utility |
|
|
419
|
+
| `brightness`, `contrast`, `saturate` | `string` | Value utilities |
|
|
420
|
+
| `dropShadow` | `'xs' ... '2xl' \| 'none' \| string` | `drop-shadow-*` utility |
|
|
421
|
+
| `dropShadowColor` | `Color \| string` | `drop-shadow-*` color utility |
|
|
422
|
+
| `grayscale` | `boolean \| string` | Bare utility or value utility |
|
|
423
|
+
| `hueRotate` | `string` | `hue-rotate-*`, supports negative values |
|
|
424
|
+
| `invert` | `boolean \| string` | Bare utility or value utility |
|
|
425
|
+
| `sepia` | `boolean \| string` | Bare utility or value utility |
|
|
426
|
+
| `backdropFilter` | `'none' \| string` | `backdrop-filter-*` utility |
|
|
427
|
+
| `backdropBlur` | `'xs' ... '3xl' \| 'none' \| string` | `backdrop-blur-*` utility |
|
|
428
|
+
| `backdropBrightness`, `backdropContrast`, `backdropOpacity`, `backdropSaturate` | `string` | Value utilities |
|
|
429
|
+
| `backdropGrayscale`, `backdropInvert`, `backdropSepia` | `boolean \| string` | Bare utility or value utility |
|
|
430
|
+
| `backdropHueRotate` | `string` | `backdrop-hue-rotate-*`, supports negative values |
|
|
431
|
+
|
|
432
|
+
```tsx
|
|
433
|
+
<View backdropBlur="md" bgColor="$rgb(255 255 255 / 0.6)">
|
|
434
|
+
Frosted panel
|
|
435
|
+
</View>
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
### Table (ViewTableProps)
|
|
439
|
+
|
|
440
|
+
| Prop | Type | Description |
|
|
441
|
+
| ---------------------------------- | ------------------- | --------------------------------- |
|
|
442
|
+
| `borderCollapse` | `boolean` | `border-collapse` |
|
|
443
|
+
| `borderSeparate` | `boolean` | `border-separate` |
|
|
444
|
+
| `borderSpacing` | `string` | `border-spacing-*` utility |
|
|
445
|
+
| `borderXSpacing`, `borderYSpacing` | `string` | Axis-specific spacing utilities |
|
|
446
|
+
| `tableLayout` | `'auto' \| 'fixed'` | `table-auto` or `table-fixed` |
|
|
447
|
+
| `captionSide` | `'top' \| 'bottom'` | `caption-top` or `caption-bottom` |
|
|
448
|
+
|
|
449
|
+
### Transition and animation (ViewTransitionProps)
|
|
450
|
+
|
|
451
|
+
The `transition` prop supports four forms:
|
|
452
|
+
|
|
453
|
+
```tsx
|
|
454
|
+
<View transition /> // bare transition
|
|
455
|
+
<View transition="colors" /> // transition-colors
|
|
456
|
+
<View transition="$150" /> // duration through variable class
|
|
457
|
+
<View transition={{ property: 'colors', duration: '150', function: 'in-out', delay: '100', behavior: 'discrete' }} />
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
| Key | Prop values | Emitted utility |
|
|
461
|
+
| ---------- | -------------------------------------------------------------------------------------------- | ------------------------------------------ |
|
|
462
|
+
| `property` | `'default' \| 'all' \| 'colors' \| 'opacity' \| 'shadow' \| 'transform' \| 'none' \| string` | `transition-*` |
|
|
463
|
+
| `behavior` | `'normal' \| 'discrete'` | `transition-normal`, `transition-discrete` |
|
|
464
|
+
| `duration` | `'initial' \| string` | `duration-*` |
|
|
465
|
+
| `function` | `'linear' \| 'in' \| 'out' \| 'in-out' \| 'initial' \| string` | `ease-*` |
|
|
466
|
+
| `delay` | `string` | `delay-*` |
|
|
467
|
+
|
|
468
|
+
| Prop | Type | Description |
|
|
469
|
+
| --------- | ------------------------------------------------------------- | ------------------- |
|
|
470
|
+
| `animate` | `'spin' \| 'ping' \| 'pulse' \| 'bounce' \| 'none' \| string` | `animate-*` utility |
|
|
471
|
+
|
|
472
|
+
### Transform (ViewTransformProps)
|
|
473
|
+
|
|
474
|
+
| Prop | Type | Description |
|
|
475
|
+
| ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------ |
|
|
476
|
+
| `backface` | `'hidden' \| 'visible'` | `backface-*` utilities |
|
|
477
|
+
| `perspective` | `'dramatic' \| 'near' \| 'normal' \| 'midrange' \| 'distant' \| 'none' \| string` | `perspective-*` utility |
|
|
478
|
+
| `perspectiveOrigin` | `Placement \| string` | `perspective-origin-*` utility |
|
|
479
|
+
| `rotate`, `rotateX`, `rotateY`, `rotateZ` | `'none' \| string` | Rotation utilities, support negative values |
|
|
480
|
+
| `scale`, `scaleX`, `scaleY`, `scaleZ` | `'none' \| '3d' \| string` | Scale utilities, support negative values |
|
|
481
|
+
| `skew`, `skewX`, `skewY` | `string` | Skew utilities, support negative values |
|
|
482
|
+
| `transform` | `'none' \| 'gpu' \| 'cpu' \| string` | `transform-*` utilities |
|
|
483
|
+
| `transformOrigin` | `Placement \| string` | `origin-*` utility |
|
|
484
|
+
| `transformStyle` | `'3d' \| 'flat'` | `transform-3d` or `transform-flat` |
|
|
485
|
+
| `transformTranslate`, `transformTranslateX`, `transformTranslateY`, `transformTranslateZ` | `'full' \| '-full' \| 'px' \| '-px' \| 'none' \| string` | `translate-*` utilities, support negative values |
|
|
486
|
+
|
|
487
|
+
### Interactivity (ViewInteractivityProps)
|
|
488
|
+
|
|
489
|
+
| Prop | Type | Description |
|
|
490
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
491
|
+
| `accentColor` | `Color \| string` | `accent-*` color utility |
|
|
492
|
+
| `appearance` | `'none' \| 'auto'` | `appearance-none` or `appearance-auto` |
|
|
493
|
+
| `caretColor` | `Color \| string` | `caret-*` color utility |
|
|
494
|
+
| `colorScheme` | `'normal' \| 'dark' \| 'light' \| 'light-dark' \| 'only-dark' \| 'only-light'` | `scheme-*` utilities |
|
|
495
|
+
| `cursor` | Cursor keyword or `string` | `cursor-*` utility; all standard cursor keywords are supported |
|
|
496
|
+
| `fieldSizing` | `'fixed' \| 'content'` | `field-sizing-*` utilities |
|
|
497
|
+
| `pointerEvents` | `'auto' \| 'none'` | `pointer-events-*` utilities |
|
|
498
|
+
| `resize` | `'both' \| 'x' \| 'y' \| 'none'` | `resize`, `resize-x`, `resize-y`, `resize-none` |
|
|
499
|
+
| `scrollBehavior` | `'auto' \| 'smooth'` | `scroll-auto` or `scroll-smooth` |
|
|
500
|
+
| `scrollbar` | `object`, see below | Scrollbar color, width, and gutter |
|
|
501
|
+
| `scrollMargin`, `scrollMarginX`, `scrollMarginY`, `scrollMarginS`, `scrollMarginE`, `scrollMarginT`, `scrollMarginR`, `scrollMarginB`, `scrollMarginL` | `string` | `scroll-m-*` utilities, support negative values |
|
|
502
|
+
| `scrollPadding`, `scrollPaddingX`, `scrollPaddingY`, `scrollPaddingS`, `scrollPaddingE`, `scrollPaddingT`, `scrollPaddingR`, `scrollPaddingB`, `scrollPaddingL` | `string` | `scroll-p-*` utilities, support negative values |
|
|
503
|
+
| `scrollSnapAlign` | `'start' \| 'end' \| 'center' \| 'none'` | `snap-*` alignment utilities |
|
|
504
|
+
| `scrollSnapStop` | `'normal' \| 'always'` | `snap-normal` or `snap-always` |
|
|
505
|
+
| `scrollSnapType` | `'x' \| 'y' \| 'both' \| 'mandatory' \| 'proximity' \| 'none'` | `snap-*` type utilities |
|
|
506
|
+
| `touchAction` | `'auto' \| 'pan-x' ... 'pinch-zoom' \| 'manipulation' \| 'none'` | `touch-*` utilities |
|
|
507
|
+
| `userSelect` | `'none' \| 'text' \| 'all' \| 'auto'` | `select-*` utilities |
|
|
508
|
+
| `willChange` | `'auto' \| 'scroll' \| 'contents' \| 'transform' \| string` | `will-change-*` utility |
|
|
509
|
+
| `forceAdjustColor` | `'auto' \| 'none'` | `forced-color-adjust-*` utilities. Defined directly on `View`, not part of `ViewInteractivityProps` |
|
|
510
|
+
|
|
511
|
+
The `scrollbar` object:
|
|
512
|
+
|
|
513
|
+
```tsx
|
|
514
|
+
<View scrollbar={{ color: { thumb: '$#9ca3af', track: '$#f3f4f6' }, width: 'thin', gutter: 'stable' }}>Scrollable content</View>
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
| Key | Values | Emitted utility |
|
|
518
|
+
| ------------- | ------------------------------ | ---------------------------------------------------- |
|
|
519
|
+
| `color.thumb` | `Color \| string` | `scrollbar-thumb-*` color utility |
|
|
520
|
+
| `color.track` | `Color \| string` | `scrollbar-track-*` color utility |
|
|
521
|
+
| `width` | `'auto' \| 'thin' \| 'none'` | `scrollbar-auto`, `scrollbar-thin`, `scrollbar-none` |
|
|
522
|
+
| `gutter` | `'auto' \| 'stable' \| 'both'` | `scrollbar-gutter-*` utilities |
|
|
523
|
+
|
|
524
|
+
### SVG (ViewSVGProps)
|
|
525
|
+
|
|
526
|
+
| Prop | Type | Description |
|
|
527
|
+
| ------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
528
|
+
| `fill` | `'none' \| Color \| string` | `fill-*` utility |
|
|
529
|
+
| `strokefill` | `'none' \| Color \| string` | Stroke paint utility, emitted as `stroke-*`. The name distinguishes it from `stroke`, which controls width |
|
|
530
|
+
| `stroke` | `string` | Stroke width utility with a `length` type hint for variable values |
|
|
531
|
+
|
|
532
|
+
```tsx
|
|
533
|
+
<View as="svg" viewBox="0 0 24 24" fill="none" stroke="@2">
|
|
534
|
+
<View as="path" d="M4 12h16" />
|
|
535
|
+
</View>
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
## Shared value types
|
|
539
|
+
|
|
540
|
+
| Alias | Values |
|
|
541
|
+
| --------------- | ------------------------------------------------------------------------------------------------- |
|
|
542
|
+
| `Scale` | `'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' ... '7xl'` |
|
|
543
|
+
| `Break` | `'auto' \| 'avoid' \| 'all' \| 'avoid-page' \| 'page' \| 'left' \| 'right' \| 'column'` |
|
|
544
|
+
| `Placement` | Nine-position keywords from `'top-left'` through `'bottom-right'`, including `'center'` |
|
|
545
|
+
| `Overflow` | `'auto' \| 'hidden' \| 'clip' \| 'visible' \| 'scroll'` |
|
|
546
|
+
| `AbsoluteValue` | `'px' \| '-px' \| 'full' \| '-full' \| 'auto'` |
|
|
547
|
+
| `Alignment` | `'start' \| 'end' \| 'center' \| 'stretch'` |
|
|
548
|
+
| `Sizing` | `'px' \| 'full' \| 'dvw' \| 'dvh' \| 'lvw' \| 'lvh' \| 'svw' \| 'svh' \| 'min' \| 'max' \| 'fit'` |
|
|
549
|
+
| `Color` | `'inherit' \| 'current' \| 'transparent' \| 'black' \| 'white' \| string` |
|
|
550
|
+
| `Radius` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| 'none' \| 'full'` |
|
|
551
|
+
| `LineLook` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'hidden' \| 'none'` |
|
|
552
|
+
| `Blending` | Standard CSS blend mode keywords from `'normal'` through `'luminosity'` |
|
|
553
|
+
| `Repeat` | `'repeat' \| 'repeat-x' \| 'repeat-y' \| 'repeat-space' \| 'repeat-round' \| 'no-repeat'` |
|
|
554
|
+
|
|
555
|
+
## Composition patterns
|
|
556
|
+
|
|
557
|
+
`View` is designed as a base layer for higher-level components. Because it renders a plain element and spreads unknown props, wrappers stay thin:
|
|
558
|
+
|
|
559
|
+
```tsx
|
|
560
|
+
import { View } from '@arbiui/react';
|
|
561
|
+
import type { ViewSpacingProps, ViewBackgroundProps, ViewBorderProps } from '@arbiui/react';
|
|
562
|
+
|
|
563
|
+
type PanelProps = ViewSpacingProps & ViewBackgroundProps & ViewBorderProps & { children?: React.ReactNode };
|
|
564
|
+
|
|
565
|
+
export function Panel({ children, ...props }: PanelProps) {
|
|
566
|
+
return (
|
|
567
|
+
<View display="block" rounded="lg" bgColor="$#ffffff" p="@4" {...props}>
|
|
568
|
+
{children}
|
|
569
|
+
</View>
|
|
570
|
+
);
|
|
571
|
+
}
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
Guidelines:
|
|
575
|
+
|
|
576
|
+
- Import the exported prop group types to compose wrapper props instead of restating them.
|
|
577
|
+
- Place spread props after the wrapper defaults in the `View` call; your `className` still wins conflicts because `View` merges it last through `tailwind-merge`.
|
|
578
|
+
- Use the `as` prop to keep semantics correct when a wrapper needs to render a different element.
|
|
579
|
+
|
|
580
|
+
## Accessibility considerations
|
|
581
|
+
|
|
582
|
+
`View` applies styling only. Accessibility is the responsibility of the consumer, supported by the following:
|
|
583
|
+
|
|
584
|
+
- The `as` prop controls the rendered element, so semantic elements such as `section`, `nav`, `button`, or `ul` can be styled with the same props. Prefer semantic elements over generic `div` containers.
|
|
585
|
+
- Standard attributes, ARIA attributes, and event handlers spread onto the element unchanged.
|
|
586
|
+
- `display="sr-only"` and `display="hidden"` provide visually hidden and fully hidden variants.
|
|
587
|
+
- `colorScheme` aligns the subtree with light or dark user agent rendering.
|
|
588
|
+
- `forceAdjustColor` controls forced-colors mode adjustment for high-contrast environments.
|
|
589
|
+
- `hideScrollBar` hides visual overflow indication while keeping content scrollable; ensure scrollable regions remain keyboard reachable.
|
|
590
|
+
|
|
591
|
+
## Styling behavior
|
|
592
|
+
|
|
593
|
+
- Generated classes are merged with `tailwind-merge`, so conflicting utilities are deduplicated in favor of the last one. Your `className` is appended last and wins.
|
|
594
|
+
- Inline CSS variables from `$` and `@` values are merged into `style` after your style object.
|
|
595
|
+
- Because `display` defaults to `flex` and `position` to `relative`, both classes are present on every `View` unless overridden by props or `className`.
|
|
596
|
+
- There are no responsive, state, or dark mode prop variants. Use `className` with Tailwind variants for those, for example `className="hover:bg-red-500 md:w-1/2"`.
|
|
597
|
+
|
|
598
|
+
## TypeScript
|
|
599
|
+
|
|
600
|
+
The package entry exports the `View` component, the `_` placeholder symbol for `OutlineTuple` tuples, and the following types:
|
|
601
|
+
|
|
602
|
+
`ViewLayoutProps`, `ViewFlexGridProps`, `ViewSpacingProps`, `ViewSizingProps`, `ViewTypographyProps`, `ViewBackgroundProps`, `ViewBorderProps`, `ViewEffectProps`, `ViewFiltersProps`, `ViewTableProps`, `ViewTransitionProps`, `ViewTransformProps`, `ViewInteractivityProps`, `ViewSVGProps`, `ViewProps`
|
|
603
|
+
|
|
604
|
+
`ViewProps<E>` is the full polymorphic props type of `View`, parameterized by the element type passed to `as`. Internal helpers such as `cn`, `resolveProp`, and `resolveTupledProp` are not part of the public API.
|
|
605
|
+
|
|
606
|
+
## Troubleshooting
|
|
607
|
+
|
|
608
|
+
**Prop styles have no effect.** Check that `@import '@arbiui/tailwindcss'` appears in the Tailwind entry stylesheet after `@import 'tailwindcss'`. Then check the value: enumerated values and `$` / `@` values are guaranteed to compile, while free-form strings such as `mb="4"` only compile if the literal class appears in scanned source. See the class generation section above.
|
|
609
|
+
|
|
610
|
+
**A Tailwind palette color passed with `$` renders nothing.** `$` values are raw CSS values, not palette lookups. Pass palette names as plain values where the safelist covers them, or pass CSS colors such as `bgColor="$#ef4444"`.
|
|
611
|
+
|
|
612
|
+
**A negative arbitrary value does not work.** Write the sign inside the value: `mb="$-8px"` or `mt="@-2"`. A leading `-` before the `$` or `@` prefix is not supported.
|
|
613
|
+
|
|
614
|
+
**`border="2"` or a tuple width renders nothing.** String and tuple border widths are raw CSS lengths. Use `"2px"`, or `border="@2"` for spacing-unit widths.
|
|
615
|
+
|
|
616
|
+
**The element is not positioned as expected.** `position` defaults to `relative` and `display` defaults to `flex`. Pass `position="static"` or another `display` value to change them.
|
|
617
|
+
|
|
618
|
+
**Ref does not forward.** Refs pass through as a regular prop, which requires **React 19**. Older React versions are not supported.
|
|
619
|
+
|
|
620
|
+
**Nothing renders in a CommonJS-only environment.** The package is ESM-only.
|
|
621
|
+
|
|
622
|
+
## Build and publishing notes
|
|
623
|
+
|
|
624
|
+
- Source is built with tsdown to a single ESM entry (`dist/index.js`) with declaration files and tree shaking enabled. The published package contains `dist` and this README.
|
|
625
|
+
- `exports` maps a single entry point with `types` and `import` conditions.
|
|
626
|
+
- Runtime dependencies are `clsx` and `tailwind-merge`; React and `@arbiui/tailwindcss` are peer dependencies.
|
|
627
|
+
- Typecheck and build run through Turborepo from the repository root: `pnpm typecheck` and `pnpm build`.
|
|
628
|
+
|
|
629
|
+
## Open questions
|
|
630
|
+
|
|
631
|
+
The following points are implementation details that may change and are worth confirming before relying on them:
|
|
632
|
+
|
|
633
|
+
- Colors in border and outline tuples, and the color fields of the border and outline objects, are applied as raw CSS values. Tailwind palette names such as `red-500` do not resolve there; pass CSS colors or `$`-prefixed values. Resolving palette names is a planned improvement.
|
|
634
|
+
- Free-form string values outside the enumerated type unions compile only if their literal class appears in scanned source. A safelist entry per dynamic value is not possible; keep using the `$` and `@` prefixes for arbitrary values.
|
|
635
|
+
- Class generation from package sources was verified with Tailwind CSS 4.3.3. Behavior on other Tailwind versions depends on their source detection rules.
|