@xsolla/xui-bounding 0.150.0 → 0.151.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.
Files changed (2) hide show
  1. package/README.md +50 -96
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,34 +1,62 @@
1
1
  # Bounding
2
2
 
3
- A cross-platform React container component that constrains content width within specified minimum and maximum bounds. Useful for form fields and other width-limited content.
3
+ A cross-platform container that constrains its child to a width range, useful for form fields and other width-sensitive content.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-bounding
9
- # or
10
- yarn add @xsolla/xui-bounding
11
9
  ```
12
10
 
13
- ## Demo
11
+ ## Imports
14
12
 
15
- ### Basic Bounding
13
+ ```tsx
14
+ import { Bounding } from '@xsolla/xui-bounding';
15
+ ```
16
+
17
+ ## Quick start
16
18
 
17
19
  ```tsx
18
20
  import * as React from 'react';
19
21
  import { Bounding } from '@xsolla/xui-bounding';
20
22
  import { Input } from '@xsolla/xui-input';
21
23
 
22
- export default function BasicBounding() {
24
+ export default function QuickStart() {
23
25
  return (
24
26
  <Bounding>
25
- <Input placeholder="Width constrained input" />
27
+ <Input placeholder="Width-constrained input" />
26
28
  </Bounding>
27
29
  );
28
30
  }
29
31
  ```
30
32
 
31
- ### Custom Width Bounds
33
+ ## API Reference
34
+
35
+ ### `<Bounding>`
36
+
37
+ Extends `BoxProps` (minus `children`); any layout/style prop the underlying `Box` accepts is forwarded.
38
+
39
+ | Prop | Type | Default | Description |
40
+ | --- | --- | --- | --- |
41
+ | `children` | `ReactNode` | - | Content to constrain. |
42
+ | `flexible` | `boolean` | `false` | When `true`, uses `inline-flex` so the container sits inline with surrounding content. |
43
+ | `minimal` | `boolean` | `false` | When `true`, sets `min-width: auto` instead of the default minimum. |
44
+ | `minWidth` | `number \| string` | `140` | Minimum width. Numbers are pixels; strings are passed through verbatim. Ignored when `minimal` is set. |
45
+ | `maxWidth` | `number \| string` | `400` | Maximum width. Numbers are pixels; strings are passed through verbatim. |
46
+
47
+ ## Anatomy
48
+
49
+ ```tsx
50
+ import { Bounding } from '@xsolla/xui-bounding';
51
+
52
+ <Bounding minWidth={200} maxWidth={500}>
53
+ <Content />
54
+ </Bounding>
55
+ ```
56
+
57
+ ## Examples
58
+
59
+ ### Custom bounds
32
60
 
33
61
  ```tsx
34
62
  import * as React from 'react';
@@ -38,134 +66,60 @@ import { Input } from '@xsolla/xui-input';
38
66
  export default function CustomBounds() {
39
67
  return (
40
68
  <Bounding minWidth={200} maxWidth={500}>
41
- <Input placeholder="Custom bounds" />
69
+ <Input placeholder="200-500px" />
42
70
  </Bounding>
43
71
  );
44
72
  }
45
73
  ```
46
74
 
47
- ### Flexible (Inline) Mode
75
+ ### Inline mode
48
76
 
49
77
  ```tsx
50
78
  import * as React from 'react';
51
79
  import { Bounding } from '@xsolla/xui-bounding';
52
80
  import { Button } from '@xsolla/xui-button';
53
81
 
54
- export default function FlexibleBounding() {
82
+ export default function Inline() {
55
83
  return (
56
84
  <Bounding flexible>
57
- <Button>Inline Button</Button>
85
+ <Button>Inline button</Button>
58
86
  </Bounding>
59
87
  );
60
88
  }
61
89
  ```
62
90
 
63
- ### Minimal Width
91
+ ### Minimal width
64
92
 
65
93
  ```tsx
66
94
  import * as React from 'react';
67
95
  import { Bounding } from '@xsolla/xui-bounding';
68
96
  import { Tag } from '@xsolla/xui-tag';
69
97
 
70
- export default function MinimalBounding() {
98
+ export default function Minimal() {
71
99
  return (
72
100
  <Bounding minimal>
73
- <Tag>Minimal width</Tag>
101
+ <Tag>Auto width</Tag>
74
102
  </Bounding>
75
103
  );
76
104
  }
77
105
  ```
78
106
 
79
- ## Anatomy
80
-
81
- ```jsx
82
- import { Bounding } from '@xsolla/xui-bounding';
83
-
84
- <Bounding
85
- flexible={false} // Use inline-flex display
86
- minimal={false} // Allow auto min-width
87
- minWidth={140} // Minimum width (px)
88
- maxWidth={400} // Maximum width (px)
89
- >
90
- <Content />
91
- </Bounding>
92
- ```
93
-
94
- ## Examples
95
-
96
- ### Form Layout
97
-
98
- ```tsx
99
- import * as React from 'react';
100
- import { Bounding } from '@xsolla/xui-bounding';
101
- import { Input } from '@xsolla/xui-input';
102
- import { Select } from '@xsolla/xui-select';
103
- import { Button } from '@xsolla/xui-button';
104
-
105
- export default function FormLayout() {
106
- return (
107
- <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
108
- <Bounding>
109
- <Input label="Name" placeholder="Enter your name" />
110
- </Bounding>
111
- <Bounding>
112
- <Input label="Email" placeholder="Enter your email" />
113
- </Bounding>
114
- <Bounding>
115
- <Select
116
- label="Country"
117
- options={['United States', 'Canada', 'Mexico']}
118
- />
119
- </Bounding>
120
- <Bounding>
121
- <Button>Submit</Button>
122
- </Bounding>
123
- </div>
124
- );
125
- }
126
- ```
127
-
128
- ### Responsive Constraints
107
+ ### Percentage bounds
129
108
 
130
109
  ```tsx
131
110
  import * as React from 'react';
132
111
  import { Bounding } from '@xsolla/xui-bounding';
133
112
  import { Input } from '@xsolla/xui-input';
134
113
 
135
- export default function ResponsiveConstraints() {
114
+ export default function PercentageBounds() {
136
115
  return (
137
- <div style={{ display: 'flex', gap: 16 }}>
138
- <Bounding minWidth={100} maxWidth={200}>
139
- <Input placeholder="Small" />
140
- </Bounding>
141
- <Bounding minWidth={200} maxWidth={400}>
142
- <Input placeholder="Medium" />
143
- </Bounding>
144
- <Bounding minWidth={300} maxWidth={600}>
145
- <Input placeholder="Large" />
146
- </Bounding>
147
- </div>
116
+ <Bounding minWidth="50%" maxWidth="100%">
117
+ <Input placeholder="Half-to-full width" />
118
+ </Bounding>
148
119
  );
149
120
  }
150
121
  ```
151
122
 
152
- ## API Reference
153
-
154
- ### Bounding
155
-
156
- **Bounding Props:**
123
+ ## Accessibility
157
124
 
158
- | Prop | Type | Default | Description |
159
- | :--- | :--- | :------ | :---------- |
160
- | children | `ReactNode` | - | Content to constrain. |
161
- | flexible | `boolean` | `false` | Use inline-flex instead of flex display. |
162
- | minimal | `boolean` | `false` | Set min-width to auto instead of default. |
163
- | minWidth | `number` | `140` | Minimum width in pixels. |
164
- | maxWidth | `number` | `400` | Maximum width in pixels. |
165
-
166
- ## Behavior
167
-
168
- - Default: flex column layout with min-width 140px, max-width 400px
169
- - `flexible`: Changes to inline-flex for inline placement
170
- - `minimal`: Removes minimum width constraint (auto)
171
- - Content fills available width within bounds
125
+ `Bounding` is purely presentational and adds no roles or ARIA attributes. Constrain content widely enough that text wrapping and reflow remain comfortable for users at large text sizes.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-bounding",
3
- "version": "0.150.0",
3
+ "version": "0.151.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.150.0",
14
- "@xsolla/xui-primitives-core": "0.150.0"
13
+ "@xsolla/xui-core": "0.151.0",
14
+ "@xsolla/xui-primitives-core": "0.151.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",