@xsolla/xui-bounding 0.99.0 → 0.100.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 +162 -11
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,26 +1,177 @@
1
- # @xsolla/xui-bounding
1
+ ---
2
+ title: Bounding
3
+ subtitle: A width-constrained container.
4
+ description: A cross-platform React bounding component that constrains content width with configurable min/max values.
5
+ ---
2
6
 
3
- Layout wrapper that constrains content within configurable min/max width boundaries.
7
+ # Bounding
8
+
9
+ 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
10
 
5
11
  ## Installation
6
12
 
7
13
  ```bash
14
+ npm install @xsolla/xui-bounding
15
+ # or
8
16
  yarn add @xsolla/xui-bounding
9
17
  ```
10
18
 
11
- ## Usage
19
+ ## Demo
20
+
21
+ ### Basic Bounding
22
+
23
+ ```tsx
24
+ import * as React from 'react';
25
+ import { Bounding } from '@xsolla/xui-bounding';
26
+ import { Input } from '@xsolla/xui-input';
27
+
28
+ export default function BasicBounding() {
29
+ return (
30
+ <Bounding>
31
+ <Input placeholder="Width constrained input" />
32
+ </Bounding>
33
+ );
34
+ }
35
+ ```
36
+
37
+ ### Custom Width Bounds
38
+
39
+ ```tsx
40
+ import * as React from 'react';
41
+ import { Bounding } from '@xsolla/xui-bounding';
42
+ import { Input } from '@xsolla/xui-input';
43
+
44
+ export default function CustomBounds() {
45
+ return (
46
+ <Bounding minWidth={200} maxWidth={500}>
47
+ <Input placeholder="Custom bounds" />
48
+ </Bounding>
49
+ );
50
+ }
51
+ ```
52
+
53
+ ### Flexible (Inline) Mode
54
+
55
+ ```tsx
56
+ import * as React from 'react';
57
+ import { Bounding } from '@xsolla/xui-bounding';
58
+ import { Button } from '@xsolla/xui-button';
59
+
60
+ export default function FlexibleBounding() {
61
+ return (
62
+ <Bounding flexible>
63
+ <Button>Inline Button</Button>
64
+ </Bounding>
65
+ );
66
+ }
67
+ ```
68
+
69
+ ### Minimal Width
70
+
71
+ ```tsx
72
+ import * as React from 'react';
73
+ import { Bounding } from '@xsolla/xui-bounding';
74
+ import { Tag } from '@xsolla/xui-tag';
75
+
76
+ export default function MinimalBounding() {
77
+ return (
78
+ <Bounding minimal>
79
+ <Tag>Minimal width</Tag>
80
+ </Bounding>
81
+ );
82
+ }
83
+ ```
84
+
85
+ ## Anatomy
86
+
87
+ ```jsx
88
+ import { Bounding } from '@xsolla/xui-bounding';
89
+
90
+ <Bounding
91
+ flexible={false} // Use inline-flex display
92
+ minimal={false} // Allow auto min-width
93
+ minWidth={140} // Minimum width (px)
94
+ maxWidth={400} // Maximum width (px)
95
+ >
96
+ <Content />
97
+ </Bounding>
98
+ ```
99
+
100
+ ## Examples
101
+
102
+ ### Form Layout
12
103
 
13
104
  ```tsx
105
+ import * as React from 'react';
14
106
  import { Bounding } from '@xsolla/xui-bounding';
107
+ import { Input } from '@xsolla/xui-input';
108
+ import { Select } from '@xsolla/xui-select';
109
+ import { Button } from '@xsolla/xui-button';
15
110
 
16
- const MyComponent = () => (
17
- <Bounding maxWidth={400} minWidth={140}>
18
- <MyContent />
19
- </Bounding>
20
- );
111
+ export default function FormLayout() {
112
+ return (
113
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
114
+ <Bounding>
115
+ <Input label="Name" placeholder="Enter your name" />
116
+ </Bounding>
117
+ <Bounding>
118
+ <Input label="Email" placeholder="Enter your email" />
119
+ </Bounding>
120
+ <Bounding>
121
+ <Select
122
+ label="Country"
123
+ options={['United States', 'Canada', 'Mexico']}
124
+ />
125
+ </Bounding>
126
+ <Bounding>
127
+ <Button>Submit</Button>
128
+ </Bounding>
129
+ </div>
130
+ );
131
+ }
21
132
  ```
22
133
 
23
- ## Exports
134
+ ### Responsive Constraints
135
+
136
+ ```tsx
137
+ import * as React from 'react';
138
+ import { Bounding } from '@xsolla/xui-bounding';
139
+ import { Input } from '@xsolla/xui-input';
140
+
141
+ export default function ResponsiveConstraints() {
142
+ return (
143
+ <div style={{ display: 'flex', gap: 16 }}>
144
+ <Bounding minWidth={100} maxWidth={200}>
145
+ <Input placeholder="Small" />
146
+ </Bounding>
147
+ <Bounding minWidth={200} maxWidth={400}>
148
+ <Input placeholder="Medium" />
149
+ </Bounding>
150
+ <Bounding minWidth={300} maxWidth={600}>
151
+ <Input placeholder="Large" />
152
+ </Bounding>
153
+ </div>
154
+ );
155
+ }
156
+ ```
157
+
158
+ ## API Reference
159
+
160
+ ### Bounding
161
+
162
+ **Bounding Props:**
163
+
164
+ | Prop | Type | Default | Description |
165
+ | :--- | :--- | :------ | :---------- |
166
+ | children | `ReactNode` | - | Content to constrain. |
167
+ | flexible | `boolean` | `false` | Use inline-flex instead of flex display. |
168
+ | minimal | `boolean` | `false` | Set min-width to auto instead of default. |
169
+ | minWidth | `number` | `140` | Minimum width in pixels. |
170
+ | maxWidth | `number` | `400` | Maximum width in pixels. |
171
+
172
+ ## Behavior
24
173
 
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`
174
+ - Default: flex column layout with min-width 140px, max-width 400px
175
+ - `flexible`: Changes to inline-flex for inline placement
176
+ - `minimal`: Removes minimum width constraint (auto)
177
+ - 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.100.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.100.0",
14
+ "@xsolla/xui-primitives-core": "0.100.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",