@baseline-ui/mcp 0.47.0 → 0.48.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/CHANGELOG.md +2 -0
- package/README.md +1 -1
- package/dist/index.cjs +19380 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +19359 -394
- package/package.json +8 -15
- package/dist/data/component-docs.json +0 -69
- package/dist/data/component-source.json +0 -75
- package/dist/data/component-types.json +0 -75
- package/dist/data/components.json +0 -586
- package/dist/data/docs.json +0 -1
- package/dist/data/getting-started.json +0 -3
- package/dist/data/icons.json +0 -645
- package/dist/data/react-aria-components.json +0 -44
- package/dist/data/tokens-metadata.json +0 -54
- package/dist/data/usage-examples.json +0 -42
- package/dist/guidelines.md +0 -88
|
@@ -1,586 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"name": "Accordion",
|
|
4
|
-
"description": "`Accordion` is a component that allows users to toggle the visibility of content. It’s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",
|
|
5
|
-
"hasMdx": true,
|
|
6
|
-
"hasTsx": true,
|
|
7
|
-
"hasTypes": true,
|
|
8
|
-
"path": "core/src/components/Accordion"
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
"name": "ActionButton",
|
|
12
|
-
"description": "ActionButton is a clickable interactive element that triggers a response. You can place text and icons inside of a button. You can trigger an action with mouse, touch, and keyboard interactions.",
|
|
13
|
-
"hasMdx": true,
|
|
14
|
-
"hasTsx": true,
|
|
15
|
-
"hasTypes": true,
|
|
16
|
-
"path": "core/src/components/ActionButton"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"name": "ActionGroup",
|
|
20
|
-
"description": "The `ActionGroup` component is used to group a set of related actions together.",
|
|
21
|
-
"hasMdx": true,
|
|
22
|
-
"hasTsx": true,
|
|
23
|
-
"hasTypes": true,
|
|
24
|
-
"path": "core/src/components/ActionGroup"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"name": "ActionIconButton",
|
|
28
|
-
"description": "ActionIconButton is a clickable interactive element that triggers a response. You can place icon inside of this button. You can trigger an action with mouse, touch, and keyboard interactions.",
|
|
29
|
-
"hasMdx": true,
|
|
30
|
-
"hasTsx": true,
|
|
31
|
-
"hasTypes": true,
|
|
32
|
-
"path": "core/src/components/ActionIconButton"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"name": "AlertDialog",
|
|
36
|
-
"description": "An `AlertDialog` is a modal dialog that interrupts the user's workflow to get a response. It is used to confirm or reject a particular action. It is a type of modal window that appears in front of app content to provide critical information or ask for a decision. It is used in",
|
|
37
|
-
"hasMdx": true,
|
|
38
|
-
"hasTsx": true,
|
|
39
|
-
"hasTypes": true,
|
|
40
|
-
"path": "core/src/components/AlertDialog"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"name": "AudioPlayer",
|
|
44
|
-
"description": "The `AudioPlayer` component is used to play audio files. It provides a simple interface for playing, pausing, and seeking through audio files.",
|
|
45
|
-
"hasMdx": true,
|
|
46
|
-
"hasTsx": true,
|
|
47
|
-
"hasTypes": true,
|
|
48
|
-
"path": "core/src/components/AudioPlayer"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "Avatar",
|
|
52
|
-
"description": "`Avatar` is a component that displays a user's name or avatar.",
|
|
53
|
-
"hasMdx": true,
|
|
54
|
-
"hasTsx": true,
|
|
55
|
-
"hasTypes": true,
|
|
56
|
-
"path": "core/src/components/Avatar"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"name": "Box",
|
|
60
|
-
"description": "The `Box` component is a generic container component that can be used to wrap other components. It is used to provide a consistent API for layout and spacing.",
|
|
61
|
-
"hasMdx": true,
|
|
62
|
-
"hasTsx": true,
|
|
63
|
-
"hasTypes": true,
|
|
64
|
-
"path": "core/src/components/Box"
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"name": "ButtonSelect",
|
|
68
|
-
"description": "The `ButtonSelect` component combines a button with a select dropdown. It allows users to both toggle the current selection on/off and choose from a dropdown list of options.",
|
|
69
|
-
"hasMdx": true,
|
|
70
|
-
"hasTsx": true,
|
|
71
|
-
"hasTypes": true,
|
|
72
|
-
"path": "core/src/components/ButtonSelect"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"name": "Checkbox",
|
|
76
|
-
"description": "`Checkbox` is a component that allows users to select one or more items from a set. It is a wrapper around the native `input[type=\"checkbox\"]` element that provides additional styling and behavior.",
|
|
77
|
-
"hasMdx": true,
|
|
78
|
-
"hasTsx": true,
|
|
79
|
-
"hasTypes": true,
|
|
80
|
-
"path": "core/src/components/Checkbox"
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
"name": "ColorInput",
|
|
84
|
-
"description": "The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.",
|
|
85
|
-
"hasMdx": true,
|
|
86
|
-
"hasTsx": true,
|
|
87
|
-
"hasTypes": true,
|
|
88
|
-
"path": "core/src/components/ColorInput"
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
"name": "ColorSwatch",
|
|
92
|
-
"description": "The `ColorSwatch` component is used to display a color swatch. It provides a visual representation of a color with support for various states including interactive, selected, and disabled.",
|
|
93
|
-
"hasMdx": true,
|
|
94
|
-
"hasTsx": true,
|
|
95
|
-
"hasTypes": true,
|
|
96
|
-
"path": "core/src/components/ColorSwatch"
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
"name": "ColorSwatchPicker",
|
|
100
|
-
"description": "`ColorSwatchPicker` is a component that allows users to select a color from a predefined set of colors. It is built on top of",
|
|
101
|
-
"hasMdx": true,
|
|
102
|
-
"hasTsx": true,
|
|
103
|
-
"hasTypes": true,
|
|
104
|
-
"path": "core/src/components/ColorSwatchPicker"
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"name": "ComboBox",
|
|
108
|
-
"description": "`ComboBox` is a component that allows users to select an item from a dropdown list. The selected item value is shown in",
|
|
109
|
-
"hasMdx": true,
|
|
110
|
-
"hasTsx": true,
|
|
111
|
-
"hasTypes": true,
|
|
112
|
-
"path": "core/src/components/ComboBox"
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
"name": "DateField",
|
|
116
|
-
"description": "The `DateField` component is used to input date and time values using a keyboard. Each part of a date/time value is displayed in an individually editable segment, allowing for precise and accessible input control.",
|
|
117
|
-
"hasMdx": true,
|
|
118
|
-
"hasTsx": true,
|
|
119
|
-
"hasTypes": true,
|
|
120
|
-
"path": "core/src/components/DateField"
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
"name": "DateFormat",
|
|
124
|
-
"description": "`DateFormat` is a component that formats a date string into a localized date. It is built on top of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).",
|
|
125
|
-
"hasMdx": true,
|
|
126
|
-
"hasTsx": true,
|
|
127
|
-
"hasTypes": true,
|
|
128
|
-
"path": "core/src/components/DateFormat"
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
"name": "DeviceProvider",
|
|
132
|
-
"description": "The DeviceProvider component provides device information and responsive design capabilities to your application. It detects and exposes the current device type (mobile, tablet, desktop), allowing components to adapt their behavior and appearance based on the user's device. It",
|
|
133
|
-
"hasMdx": true,
|
|
134
|
-
"hasTsx": true,
|
|
135
|
-
"hasTypes": true,
|
|
136
|
-
"path": "core/src/components/DeviceProvider"
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
"name": "Dialog",
|
|
140
|
-
"description": "The `Dialog` component is used to display content in a modal dialog.",
|
|
141
|
-
"hasMdx": true,
|
|
142
|
-
"hasTsx": true,
|
|
143
|
-
"hasTypes": true,
|
|
144
|
-
"path": "core/src/components/Dialog"
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
"name": "DomNodeRenderer",
|
|
148
|
-
"description": "",
|
|
149
|
-
"hasMdx": false,
|
|
150
|
-
"hasTsx": true,
|
|
151
|
-
"hasTypes": true,
|
|
152
|
-
"path": "core/src/components/DomNodeRenderer"
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
"name": "Drawer",
|
|
156
|
-
"description": "The `Drawer` component is a panel that slides in from the edge of the screen. It is used to display additional content or actions that are not part of the main view.",
|
|
157
|
-
"hasMdx": true,
|
|
158
|
-
"hasTsx": true,
|
|
159
|
-
"hasTypes": true,
|
|
160
|
-
"path": "core/src/components/Drawer"
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "Editor",
|
|
164
|
-
"description": "The `Editor` component is a rich/plain text editor that allows users to create and edit content.",
|
|
165
|
-
"hasMdx": true,
|
|
166
|
-
"hasTsx": true,
|
|
167
|
-
"hasTypes": true,
|
|
168
|
-
"path": "core/src/components/Editor"
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
"name": "FileUpload",
|
|
172
|
-
"description": "",
|
|
173
|
-
"hasMdx": false,
|
|
174
|
-
"hasTsx": true,
|
|
175
|
-
"hasTypes": true,
|
|
176
|
-
"path": "core/src/components/FileUpload"
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"name": "FrameProvider",
|
|
180
|
-
"description": "The `FrameProvider` component is used to contain and position overlays (like modals and dialogs) within a specific container element. This is particularly useful when you need to constrain overlays within a specific area of your application.",
|
|
181
|
-
"hasMdx": true,
|
|
182
|
-
"hasTsx": true,
|
|
183
|
-
"hasTypes": true,
|
|
184
|
-
"path": "core/src/components/FrameProvider"
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
"name": "FreehandCanvas",
|
|
188
|
-
"description": "The `FreehandCanvas` component is a canvas that allows the user to draw on it with their mouse or pointer.",
|
|
189
|
-
"hasMdx": true,
|
|
190
|
-
"hasTsx": true,
|
|
191
|
-
"hasTypes": true,
|
|
192
|
-
"path": "core/src/components/FreehandCanvas"
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
"name": "GridList",
|
|
196
|
-
"description": "A `GridList` is an implementation of list component with interactive children. It displays data in a single column or row, and allows users to navigate through the list with arrow keys.",
|
|
197
|
-
"hasMdx": true,
|
|
198
|
-
"hasTsx": true,
|
|
199
|
-
"hasTypes": true,
|
|
200
|
-
"path": "core/src/components/GridList"
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
"name": "Group",
|
|
204
|
-
"description": "A `Group` component is used to group related elements together. It represents a set of related UI",
|
|
205
|
-
"hasMdx": true,
|
|
206
|
-
"hasTsx": true,
|
|
207
|
-
"hasTypes": true,
|
|
208
|
-
"path": "core/src/components/Group"
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
"name": "I18nProvider",
|
|
212
|
-
"description": "`I18nProvider` allows you to override the browser/system setting's default locale with a locale defined by your application (e.g. application setting). Wrapping your entire application in the provider will cause all child elements to receive the new locale information through `useLocale`.",
|
|
213
|
-
"hasMdx": true,
|
|
214
|
-
"hasTsx": true,
|
|
215
|
-
"hasTypes": false,
|
|
216
|
-
"path": "core/src/components/I18nProvider"
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
"name": "Icon",
|
|
220
|
-
"description": "",
|
|
221
|
-
"hasMdx": false,
|
|
222
|
-
"hasTsx": true,
|
|
223
|
-
"hasTypes": true,
|
|
224
|
-
"path": "core/src/components/Icon"
|
|
225
|
-
},
|
|
226
|
-
{
|
|
227
|
-
"name": "ImageDropZone",
|
|
228
|
-
"description": "`ImageDropZone` is a component that allows users to drag and drop images into a drop zone and upload images from a user's device.",
|
|
229
|
-
"hasMdx": true,
|
|
230
|
-
"hasTsx": true,
|
|
231
|
-
"hasTypes": true,
|
|
232
|
-
"path": "core/src/components/ImageDropZone"
|
|
233
|
-
},
|
|
234
|
-
{
|
|
235
|
-
"name": "ImageGallery",
|
|
236
|
-
"description": "The `ImageGallery` component is used to display a collection of images in a gallery format. This user-friendly feature offers a smooth interaction experience through mouse, touch, and keyboard abilities. While images are loading, the ImageGallery component also includes a fade-in effect which adds fluidity to the user's visual experience.",
|
|
237
|
-
"hasMdx": true,
|
|
238
|
-
"hasTsx": true,
|
|
239
|
-
"hasTypes": true,
|
|
240
|
-
"path": "core/src/components/ImageGallery"
|
|
241
|
-
},
|
|
242
|
-
{
|
|
243
|
-
"name": "InlineAlert",
|
|
244
|
-
"description": "The `InlineAlert` component is used to display a short message to the user in a non-obtrusive way. It displays non-modal messages and can be used to provide feedback messages, warnings, or errors.",
|
|
245
|
-
"hasMdx": true,
|
|
246
|
-
"hasTsx": true,
|
|
247
|
-
"hasTypes": true,
|
|
248
|
-
"path": "core/src/components/InlineAlert"
|
|
249
|
-
},
|
|
250
|
-
{
|
|
251
|
-
"name": "InlineToolbar",
|
|
252
|
-
"description": "The `InlineToolbar` component is used to display a toolbar of inline formatting options. It automatically detects the current selection and opens in the correct position.",
|
|
253
|
-
"hasMdx": true,
|
|
254
|
-
"hasTsx": true,
|
|
255
|
-
"hasTypes": true,
|
|
256
|
-
"path": "core/src/components/InlineToolbar"
|
|
257
|
-
},
|
|
258
|
-
{
|
|
259
|
-
"name": "Link",
|
|
260
|
-
"description": "A `Link` is a component that allows you to navigate to a different page or section of the current page.",
|
|
261
|
-
"hasMdx": true,
|
|
262
|
-
"hasTsx": true,
|
|
263
|
-
"hasTypes": true,
|
|
264
|
-
"path": "core/src/components/Link"
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"name": "ListBox",
|
|
268
|
-
"description": "",
|
|
269
|
-
"hasMdx": true,
|
|
270
|
-
"hasTsx": true,
|
|
271
|
-
"hasTypes": true,
|
|
272
|
-
"path": "core/src/components/ListBox"
|
|
273
|
-
},
|
|
274
|
-
{
|
|
275
|
-
"name": "Markdown",
|
|
276
|
-
"description": "This component is used to render markdown content as HTML. It supports [GFM](https://github.github.com/gfm/).",
|
|
277
|
-
"hasMdx": true,
|
|
278
|
-
"hasTsx": true,
|
|
279
|
-
"hasTypes": true,
|
|
280
|
-
"path": "core/src/components/Markdown"
|
|
281
|
-
},
|
|
282
|
-
{
|
|
283
|
-
"name": "Menu",
|
|
284
|
-
"description": "The `Menu` component is an interactive widget designed for navigating between different parts of an application or website. This component is built with accessibility standards in mind, complying with the Web Content Accessibility Guidelines (WCAG).",
|
|
285
|
-
"hasMdx": true,
|
|
286
|
-
"hasTsx": true,
|
|
287
|
-
"hasTypes": true,
|
|
288
|
-
"path": "core/src/components/Menu"
|
|
289
|
-
},
|
|
290
|
-
{
|
|
291
|
-
"name": "MessageFormat",
|
|
292
|
-
"description": "`MessageFormat` is a component for formatting messages. This is built on top of [react-intl](https://formatjs.io/docs/react-intl/).",
|
|
293
|
-
"hasMdx": true,
|
|
294
|
-
"hasTsx": true,
|
|
295
|
-
"hasTypes": true,
|
|
296
|
-
"path": "core/src/components/MessageFormat"
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
"name": "Modal",
|
|
300
|
-
"description": "The `Modal` component is used to display content in a layer above the rest of the page.",
|
|
301
|
-
"hasMdx": true,
|
|
302
|
-
"hasTsx": true,
|
|
303
|
-
"hasTypes": true,
|
|
304
|
-
"path": "core/src/components/Modal"
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
"name": "NumberFormat",
|
|
308
|
-
"description": "`NumberFormat` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.",
|
|
309
|
-
"hasMdx": true,
|
|
310
|
-
"hasTsx": true,
|
|
311
|
-
"hasTypes": true,
|
|
312
|
-
"path": "core/src/components/NumberFormat"
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
"name": "NumberInput",
|
|
316
|
-
"description": "The `NumberInput` component is used to capture numerical input from a user. It is built on top of the native `input` element.",
|
|
317
|
-
"hasMdx": true,
|
|
318
|
-
"hasTsx": true,
|
|
319
|
-
"hasTypes": true,
|
|
320
|
-
"path": "core/src/components/NumberInput"
|
|
321
|
-
},
|
|
322
|
-
{
|
|
323
|
-
"name": "Pagination",
|
|
324
|
-
"description": "The `Pagination` component is used to navigate through a series of pages. It is",
|
|
325
|
-
"hasMdx": true,
|
|
326
|
-
"hasTsx": true,
|
|
327
|
-
"hasTypes": true,
|
|
328
|
-
"path": "core/src/components/Pagination"
|
|
329
|
-
},
|
|
330
|
-
{
|
|
331
|
-
"name": "Panel",
|
|
332
|
-
"description": "`Panel` provides components for building resizable horizontal or vertical layouts e.g. a resizable sidebar panel",
|
|
333
|
-
"hasMdx": true,
|
|
334
|
-
"hasTsx": true,
|
|
335
|
-
"hasTypes": true,
|
|
336
|
-
"path": "core/src/components/Panel"
|
|
337
|
-
},
|
|
338
|
-
{
|
|
339
|
-
"name": "PointPicker",
|
|
340
|
-
"description": "A component that allows users to pick precise points on a surface with a magnifier for enhanced accuracy. The PointPicker consists of three main parts: the main container, content area, and display area with optional magnifier.",
|
|
341
|
-
"hasMdx": true,
|
|
342
|
-
"hasTsx": true,
|
|
343
|
-
"hasTypes": true,
|
|
344
|
-
"path": "core/src/components/PointPicker"
|
|
345
|
-
},
|
|
346
|
-
{
|
|
347
|
-
"name": "Popover",
|
|
348
|
-
"description": "The `Popover` component is a versatile component that can be used to display additional content or actions in a floating overlay.",
|
|
349
|
-
"hasMdx": true,
|
|
350
|
-
"hasTsx": true,
|
|
351
|
-
"hasTypes": true,
|
|
352
|
-
"path": "core/src/components/Popover"
|
|
353
|
-
},
|
|
354
|
-
{
|
|
355
|
-
"name": "Portal",
|
|
356
|
-
"description": "",
|
|
357
|
-
"hasMdx": false,
|
|
358
|
-
"hasTsx": true,
|
|
359
|
-
"hasTypes": true,
|
|
360
|
-
"path": "core/src/components/Portal"
|
|
361
|
-
},
|
|
362
|
-
{
|
|
363
|
-
"name": "PortalContainerProvider",
|
|
364
|
-
"description": "`PortalContainerProvider` allows you to provide a custom overlay portal where all overlay components will be rendered. This is useful when you want to render overlays in a specific part of the DOM, for example when you encapsulate your application inside of a shadow DOM and wants to render all overlays inside of shadow root where they can access the defined styles without the need to redefine the CSS outside of the shadow root.",
|
|
365
|
-
"hasMdx": true,
|
|
366
|
-
"hasTsx": true,
|
|
367
|
-
"hasTypes": true,
|
|
368
|
-
"path": "core/src/components/PortalContainerProvider"
|
|
369
|
-
},
|
|
370
|
-
{
|
|
371
|
-
"name": "Preview",
|
|
372
|
-
"description": "The `Preview` component is used to display a preview of a SVG, image or text. You can add action buttons to the preview to allow the user to interact with the preview.",
|
|
373
|
-
"hasMdx": true,
|
|
374
|
-
"hasTsx": true,
|
|
375
|
-
"hasTypes": true,
|
|
376
|
-
"path": "core/src/components/Preview"
|
|
377
|
-
},
|
|
378
|
-
{
|
|
379
|
-
"name": "ProgressBar",
|
|
380
|
-
"description": "A progress bar is a visual indication of an extended computer process such as a file download, file transfer, or an application installation. In our implementation, the progress bar is a horizontal bar that fills from left to right as the process progresses.",
|
|
381
|
-
"hasMdx": true,
|
|
382
|
-
"hasTsx": true,
|
|
383
|
-
"hasTypes": true,
|
|
384
|
-
"path": "core/src/components/ProgressBar"
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"name": "ProgressSpinner",
|
|
388
|
-
"description": "The `ProgressSpinner` component is used to indicate that an operation is in progress.",
|
|
389
|
-
"hasMdx": true,
|
|
390
|
-
"hasTsx": true,
|
|
391
|
-
"hasTypes": true,
|
|
392
|
-
"path": "core/src/components/ProgressSpinner"
|
|
393
|
-
},
|
|
394
|
-
{
|
|
395
|
-
"name": "RadioGroup",
|
|
396
|
-
"description": "The `RadioGroup` component is used to select a single option from a list of mutually exclusive options. It is a wrapper around the native `input[type=\"radio\"]` element.",
|
|
397
|
-
"hasMdx": true,
|
|
398
|
-
"hasTsx": true,
|
|
399
|
-
"hasTypes": true,
|
|
400
|
-
"path": "core/src/components/RadioGroup"
|
|
401
|
-
},
|
|
402
|
-
{
|
|
403
|
-
"name": "Reaction",
|
|
404
|
-
"description": "The `Reaction` component is used to react to a post or comment. It is basically a checkbox input that can be used to add or remove a reaction.",
|
|
405
|
-
"hasMdx": true,
|
|
406
|
-
"hasTsx": true,
|
|
407
|
-
"hasTypes": true,
|
|
408
|
-
"path": "core/src/components/Reaction"
|
|
409
|
-
},
|
|
410
|
-
{
|
|
411
|
-
"name": "ScrollControlButton",
|
|
412
|
-
"description": "The `ScrollControlButton` component is used to create a button that can be used to scroll a container.",
|
|
413
|
-
"hasMdx": true,
|
|
414
|
-
"hasTsx": true,
|
|
415
|
-
"hasTypes": true,
|
|
416
|
-
"path": "core/src/components/ScrollControlButton"
|
|
417
|
-
},
|
|
418
|
-
{
|
|
419
|
-
"name": "SearchInput",
|
|
420
|
-
"description": "`SearchInput` is a component that allows users to search for content.",
|
|
421
|
-
"hasMdx": true,
|
|
422
|
-
"hasTsx": true,
|
|
423
|
-
"hasTypes": true,
|
|
424
|
-
"path": "core/src/components/SearchInput"
|
|
425
|
-
},
|
|
426
|
-
{
|
|
427
|
-
"name": "Select",
|
|
428
|
-
"description": "The `Select` component is used to select one or more options from a list of options. It supports both single and multiple selection modes. It is a wrapper around the native `input` element.",
|
|
429
|
-
"hasMdx": true,
|
|
430
|
-
"hasTsx": true,
|
|
431
|
-
"hasTypes": true,
|
|
432
|
-
"path": "core/src/components/Select"
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
"name": "Separator",
|
|
436
|
-
"description": "A separator is a horizontal or vertical line that separates content. It can be used to divide content into sections or to create a visual break between two elements.",
|
|
437
|
-
"hasMdx": true,
|
|
438
|
-
"hasTsx": true,
|
|
439
|
-
"hasTypes": true,
|
|
440
|
-
"path": "core/src/components/Separator"
|
|
441
|
-
},
|
|
442
|
-
{
|
|
443
|
-
"name": "Slider",
|
|
444
|
-
"description": "A Slider is an input that allows users to quickly select a value from a range of values.",
|
|
445
|
-
"hasMdx": true,
|
|
446
|
-
"hasTsx": true,
|
|
447
|
-
"hasTypes": true,
|
|
448
|
-
"path": "core/src/components/Slider"
|
|
449
|
-
},
|
|
450
|
-
{
|
|
451
|
-
"name": "Switch",
|
|
452
|
-
"description": "`Switch` is a component that allows the user to switch between two states. It is a stylized version of the native `input[type=checkbox]` element. It is used to represent a boolean value, and is typically used in forms and tables.",
|
|
453
|
-
"hasMdx": true,
|
|
454
|
-
"hasTsx": true,
|
|
455
|
-
"hasTypes": true,
|
|
456
|
-
"path": "core/src/components/Switch"
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"name": "Tabs",
|
|
460
|
-
"description": "The `Tabs` component is used to display a set of tabs that can be used to navigate between different tab panels. You can create",
|
|
461
|
-
"hasMdx": true,
|
|
462
|
-
"hasTsx": true,
|
|
463
|
-
"hasTypes": true,
|
|
464
|
-
"path": "core/src/components/Tabs"
|
|
465
|
-
},
|
|
466
|
-
{
|
|
467
|
-
"name": "TaggedPagination",
|
|
468
|
-
"description": "The `TaggedPagination` component is used to navigate through a list of items that have been tagged with a specific tag instead of just their index. For eg: It can help in going through pages using their page label and not just the page number.",
|
|
469
|
-
"hasMdx": true,
|
|
470
|
-
"hasTsx": true,
|
|
471
|
-
"hasTypes": true,
|
|
472
|
-
"path": "core/src/components/TaggedPagination"
|
|
473
|
-
},
|
|
474
|
-
{
|
|
475
|
-
"name": "TagGroup",
|
|
476
|
-
"description": "`TagGroup` is a focusable list of labels, categories, keywords, filters or other items with support for keyboard navigation, selection and removal.",
|
|
477
|
-
"hasMdx": true,
|
|
478
|
-
"hasTsx": true,
|
|
479
|
-
"hasTypes": true,
|
|
480
|
-
"path": "core/src/components/TagGroup"
|
|
481
|
-
},
|
|
482
|
-
{
|
|
483
|
-
"name": "Text",
|
|
484
|
-
"description": "The `Text` component is used to render text of various sizes and weights.",
|
|
485
|
-
"hasMdx": true,
|
|
486
|
-
"hasTsx": true,
|
|
487
|
-
"hasTypes": true,
|
|
488
|
-
"path": "core/src/components/Text"
|
|
489
|
-
},
|
|
490
|
-
{
|
|
491
|
-
"name": "TextInput",
|
|
492
|
-
"description": "`TextInput` is a component that allows users to input text. It can be used to",
|
|
493
|
-
"hasMdx": true,
|
|
494
|
-
"hasTsx": true,
|
|
495
|
-
"hasTypes": true,
|
|
496
|
-
"path": "core/src/components/TextInput"
|
|
497
|
-
},
|
|
498
|
-
{
|
|
499
|
-
"name": "ThemeProvider",
|
|
500
|
-
"description": "The `ThemeProvider` component is used to set a theme for your application.",
|
|
501
|
-
"hasMdx": true,
|
|
502
|
-
"hasTsx": true,
|
|
503
|
-
"hasTypes": true,
|
|
504
|
-
"path": "core/src/components/ThemeProvider"
|
|
505
|
-
},
|
|
506
|
-
{
|
|
507
|
-
"name": "TimeField",
|
|
508
|
-
"description": "The `TimeField` component is used to input a time value. Each part of the time value can be input separately.",
|
|
509
|
-
"hasMdx": true,
|
|
510
|
-
"hasTsx": true,
|
|
511
|
-
"hasTypes": true,
|
|
512
|
-
"path": "core/src/components/TimeField"
|
|
513
|
-
},
|
|
514
|
-
{
|
|
515
|
-
"name": "Toast",
|
|
516
|
-
"description": "The `Toast` component is used to display a toast notification to the user. It displays brief, temporary messages to the user.",
|
|
517
|
-
"hasMdx": true,
|
|
518
|
-
"hasTsx": true,
|
|
519
|
-
"hasTypes": true,
|
|
520
|
-
"path": "core/src/components/Toast"
|
|
521
|
-
},
|
|
522
|
-
{
|
|
523
|
-
"name": "ToggleButton",
|
|
524
|
-
"description": "The `ToggleButton` component is used to toggle between two states.",
|
|
525
|
-
"hasMdx": true,
|
|
526
|
-
"hasTsx": true,
|
|
527
|
-
"hasTypes": true,
|
|
528
|
-
"path": "core/src/components/ToggleButton"
|
|
529
|
-
},
|
|
530
|
-
{
|
|
531
|
-
"name": "ToggleIconButton",
|
|
532
|
-
"description": "The `ToggleIconButton` component is a button that toggles between two states. It is used to toggle a boolean value.",
|
|
533
|
-
"hasMdx": true,
|
|
534
|
-
"hasTsx": true,
|
|
535
|
-
"hasTypes": true,
|
|
536
|
-
"path": "core/src/components/ToggleIconButton"
|
|
537
|
-
},
|
|
538
|
-
{
|
|
539
|
-
"name": "Toolbar",
|
|
540
|
-
"description": "The `Toolbar` component is used to display a set of interactive controls with arrow key navigation.",
|
|
541
|
-
"hasMdx": true,
|
|
542
|
-
"hasTsx": true,
|
|
543
|
-
"hasTypes": true,
|
|
544
|
-
"path": "core/src/components/Toolbar"
|
|
545
|
-
},
|
|
546
|
-
{
|
|
547
|
-
"name": "Tooltip",
|
|
548
|
-
"description": "`Tooltip` is a accessible pop-up that displays information about an element when users hover over or focus on it.",
|
|
549
|
-
"hasMdx": true,
|
|
550
|
-
"hasTsx": true,
|
|
551
|
-
"hasTypes": true,
|
|
552
|
-
"path": "core/src/components/Tooltip"
|
|
553
|
-
},
|
|
554
|
-
{
|
|
555
|
-
"name": "Transform",
|
|
556
|
-
"description": "",
|
|
557
|
-
"hasMdx": false,
|
|
558
|
-
"hasTsx": true,
|
|
559
|
-
"hasTypes": true,
|
|
560
|
-
"path": "core/src/components/Transform"
|
|
561
|
-
},
|
|
562
|
-
{
|
|
563
|
-
"name": "TreeView",
|
|
564
|
-
"description": "The `TreeView` component is used to display a tree structure of items which allows the user to navigate and interact with hierarchical data.",
|
|
565
|
-
"hasMdx": true,
|
|
566
|
-
"hasTsx": true,
|
|
567
|
-
"hasTypes": true,
|
|
568
|
-
"path": "core/src/components/TreeView"
|
|
569
|
-
},
|
|
570
|
-
{
|
|
571
|
-
"name": "UNSAFE_ListBox",
|
|
572
|
-
"description": "",
|
|
573
|
-
"hasMdx": false,
|
|
574
|
-
"hasTsx": true,
|
|
575
|
-
"hasTypes": false,
|
|
576
|
-
"path": "core/src/components/UNSAFE_ListBox"
|
|
577
|
-
},
|
|
578
|
-
{
|
|
579
|
-
"name": "Virtualizer",
|
|
580
|
-
"description": "A Virtualizer renders a scrollable collection of data using customizable layouts. It supports very large collections by only rendering visible items to the DOM, reusing them as the user scrolls. This results in a small number of DOM elements being rendered, reducing memory usage and improving browser layout and rendering performance.",
|
|
581
|
-
"hasMdx": true,
|
|
582
|
-
"hasTsx": true,
|
|
583
|
-
"hasTypes": true,
|
|
584
|
-
"path": "core/src/components/Virtualizer"
|
|
585
|
-
}
|
|
586
|
-
]
|
package/dist/data/docs.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"content": "import { Meta, Unstyled } from \"@storybook/addon-docs/blocks\";\nimport { InlineAlert } from \"@baseline-ui/core\";\n\n<Meta title=\"Getting started\" />\n\n# Getting started\n\nInstall the packages required for using Baseline UI with the following command:\n\n```bash\nnpm install @baseline-ui/core @baseline-ui/tokens\n```\n\n## Usage\n\nUse the components by importing them from `@baseline-ui/core`:\n\n```jsx\nimport { ActionButton, I18nProvider, ThemeProvider } from \"@baseline-ui/core\";\n\n<ThemeProvider>\n <I18nProvider locale=\"en-US\">\n <ActionButton>Click Me</ActionButton>\n\n {/* ... */}\n </I18nProvider>\n</ThemeProvider>;\n```\n\nIt’s important to wrap your application with the `ThemeProvider` and `I18nProvider` components. The `ThemeProvider` component provides the theme to all the components in the tree, and the `I18nProvider` component provides the locale to all the components in the tree.\n\n### Styling\n\nImport the following files at the top of your stylesheet to use the Baseline UI styles:\n\n```css\n@import \"@baseline-ui/tokens/dist/index.css\";\n@import \"@baseline-ui/core/dist/index.css\";\n\n@layer bui-reset {\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n}\n```\n\nMake sure the class names present in this stylesheet aren’t changed by your bundler during the build process.\n"
|
|
3
|
-
}
|