@xsolla/xui-bounding 0.99.0 → 0.101.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 +156 -11
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,26 +1,171 @@
1
- # @xsolla/xui-bounding
1
+ # Bounding
2
2
 
3
- Layout wrapper that constrains content within configurable min/max width boundaries.
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.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
+ npm install @xsolla/xui-bounding
9
+ # or
8
10
  yarn add @xsolla/xui-bounding
9
11
  ```
10
12
 
11
- ## Usage
13
+ ## Demo
14
+
15
+ ### Basic Bounding
12
16
 
13
17
  ```tsx
18
+ import * as React from 'react';
14
19
  import { Bounding } from '@xsolla/xui-bounding';
20
+ import { Input } from '@xsolla/xui-input';
15
21
 
16
- const MyComponent = () => (
17
- <Bounding maxWidth={400} minWidth={140}>
18
- <MyContent />
19
- </Bounding>
20
- );
22
+ export default function BasicBounding() {
23
+ return (
24
+ <Bounding>
25
+ <Input placeholder="Width constrained input" />
26
+ </Bounding>
27
+ );
28
+ }
21
29
  ```
22
30
 
23
- ## Exports
31
+ ### Custom Width Bounds
32
+
33
+ ```tsx
34
+ import * as React from 'react';
35
+ import { Bounding } from '@xsolla/xui-bounding';
36
+ import { Input } from '@xsolla/xui-input';
37
+
38
+ export default function CustomBounds() {
39
+ return (
40
+ <Bounding minWidth={200} maxWidth={500}>
41
+ <Input placeholder="Custom bounds" />
42
+ </Bounding>
43
+ );
44
+ }
45
+ ```
46
+
47
+ ### Flexible (Inline) Mode
48
+
49
+ ```tsx
50
+ import * as React from 'react';
51
+ import { Bounding } from '@xsolla/xui-bounding';
52
+ import { Button } from '@xsolla/xui-button';
53
+
54
+ export default function FlexibleBounding() {
55
+ return (
56
+ <Bounding flexible>
57
+ <Button>Inline Button</Button>
58
+ </Bounding>
59
+ );
60
+ }
61
+ ```
62
+
63
+ ### Minimal Width
64
+
65
+ ```tsx
66
+ import * as React from 'react';
67
+ import { Bounding } from '@xsolla/xui-bounding';
68
+ import { Tag } from '@xsolla/xui-tag';
69
+
70
+ export default function MinimalBounding() {
71
+ return (
72
+ <Bounding minimal>
73
+ <Tag>Minimal width</Tag>
74
+ </Bounding>
75
+ );
76
+ }
77
+ ```
78
+
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
129
+
130
+ ```tsx
131
+ import * as React from 'react';
132
+ import { Bounding } from '@xsolla/xui-bounding';
133
+ import { Input } from '@xsolla/xui-input';
134
+
135
+ export default function ResponsiveConstraints() {
136
+ 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>
148
+ );
149
+ }
150
+ ```
151
+
152
+ ## API Reference
153
+
154
+ ### Bounding
155
+
156
+ **Bounding Props:**
157
+
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
24
167
 
25
- - `Bounding` — Container component with `minWidth` (default 140), `maxWidth` (default 400), `flexible` (inline-flex when true), and `minimal` (removes min-width constraint) props; extends `BoxProps`
26
- - `BoundingProps` — TypeScript props interface for `Bounding`
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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-bounding",
3
- "version": "0.99.0",
3
+ "version": "0.101.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.99.0",
14
- "@xsolla/xui-primitives-core": "0.99.0"
13
+ "@xsolla/xui-core": "0.101.0",
14
+ "@xsolla/xui-primitives-core": "0.101.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",