@svgrid/ui 0.3.3 → 0.3.4
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/README.md +151 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,6 +24,10 @@ yours to style and wire however you like. Each recipe is a self-contained demo,
|
|
|
24
24
|
# zero setup: spins up a sandbox and opens the component in your browser
|
|
25
25
|
npx @svgrid/ui try button
|
|
26
26
|
|
|
27
|
+
# try several at once (or a whole family) - they share one sandbox
|
|
28
|
+
npx @svgrid/ui try button calendar slider
|
|
29
|
+
npx @svgrid/ui try inputs
|
|
30
|
+
|
|
27
31
|
# in your own SvelteKit app: also writes a /preview/button route
|
|
28
32
|
npx @svgrid/ui add button --preview
|
|
29
33
|
# -> start your dev server, open http://localhost:5173/preview/button
|
|
@@ -32,9 +36,10 @@ npx @svgrid/ui add button --preview
|
|
|
32
36
|
`try` needs no project - it caches a tiny Vite + Svelte sandbox under your temp
|
|
33
37
|
dir (so repeat runs are instant) and opens the browser, with a **theme picker
|
|
34
38
|
(all 19 presets) and a light/dark toggle** so you can see the component in your
|
|
35
|
-
target theme.
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
target theme. Pass **several component ids** (or a group id) to render them
|
|
40
|
+
together in the same sandbox. `--preview` drops a `src/routes/preview/<id>` page
|
|
41
|
+
(plus a `/preview` index) into an existing SvelteKit app so it renders in your
|
|
42
|
+
running dev server.
|
|
38
43
|
|
|
39
44
|
## Usage
|
|
40
45
|
|
|
@@ -66,9 +71,148 @@ npx @svgrid/ui list
|
|
|
66
71
|
|
|
67
72
|
## Components
|
|
68
73
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
<p align="center">
|
|
75
|
+
<img src="https://svgrid.com/docs-media/svgrid-ui-map.svg" alt="The SvGrid UI suite: nine families of components, each usable standalone and as a grid cell editor." width="820" />
|
|
76
|
+
</p>
|
|
77
|
+
|
|
78
|
+
All 72 components ship in [`@svgrid/grid`](https://www.npmjs.com/package/@svgrid/grid) and work standalone **or** as grid cell editors. Add any one with `npx @svgrid/ui add <id>`, a whole family with its group id, or see it instantly with `npx @svgrid/ui try <id>`. Click a component to see it live in the docs.
|
|
79
|
+
|
|
80
|
+
### Date & time family
|
|
81
|
+
|
|
82
|
+
Add the whole family: `npx @svgrid/ui add date-time` · see them all: `npx @svgrid/ui try date-time`
|
|
83
|
+
|
|
84
|
+
| Component | id | What it is |
|
|
85
|
+
| --- | --- | --- |
|
|
86
|
+
| [Calendar](https://svgrid.com/docs/help/ui-components/sv-calendar/) | `calendar` | Themeable month / year / decade calendar with every selection mode. |
|
|
87
|
+
| [Time picker](https://svgrid.com/docs/help/ui-components/sv-time-picker/) | `time-picker` | Analog clock-dial time picker (12/24-hour, minute snapping). |
|
|
88
|
+
| [Date-time picker](https://svgrid.com/docs/help/ui-components/sv-date-time-picker/) | `date-time-picker` | Masked text field with DATE / TIME dropdown tabs. |
|
|
89
|
+
| [Date-range input](https://svgrid.com/docs/help/ui-components/sv-date-range-input/) | `date-range-input` | Compact start-to-end range field with preset shortcuts. |
|
|
90
|
+
|
|
91
|
+
### Buttons & toggles
|
|
92
|
+
|
|
93
|
+
Add the whole family: `npx @svgrid/ui add buttons` · see them all: `npx @svgrid/ui try buttons`
|
|
94
|
+
|
|
95
|
+
| Component | id | What it is |
|
|
96
|
+
| --- | --- | --- |
|
|
97
|
+
| [Button](https://svgrid.com/docs/help/ui-components/sv-button/) | `button` | Themeable press primitive with variants, sizes, loading state, icon slot, and auto anchor rendering. |
|
|
98
|
+
| [Button group](https://svgrid.com/docs/help/ui-components/sv-button-group/) | `button-group` | Segmented button bar - single-select switcher, multi-select toggle set, or plain action row. |
|
|
99
|
+
| [Repeat button](https://svgrid.com/docs/help/ui-components/sv-repeat-button/) | `repeat-button` | A button that keeps firing while held - after an initial delay, then at a steady interval. |
|
|
100
|
+
| [Toggle button](https://svgrid.com/docs/help/ui-components/sv-toggle-button/) | `toggle-button` | A button with a sticky pressed on/off state, exposed via aria-pressed. |
|
|
101
|
+
| [Switch button](https://svgrid.com/docs/help/ui-components/sv-switch-button/) | `switch-button` | An on/off sliding switch with the ARIA switch role for settings that apply immediately. |
|
|
102
|
+
| [Checkbox](https://svgrid.com/docs/help/ui-components/sv-check-box/) | `check-box` | A themed checkbox with a true indeterminate state and an optional inline label. |
|
|
103
|
+
| [Radio group](https://svgrid.com/docs/help/ui-components/sv-radio-group/) | `radio-group` | Accessible single-select radio group with roving tabindex and arrow-key navigation. |
|
|
104
|
+
| [Rating](https://svgrid.com/docs/help/ui-components/sv-rating/) | `rating` | Star rating control on the ARIA slider pattern with hover preview, keyboard, and half steps. |
|
|
105
|
+
|
|
106
|
+
### Inputs
|
|
107
|
+
|
|
108
|
+
Add the whole family: `npx @svgrid/ui add inputs` · see them all: `npx @svgrid/ui try inputs`
|
|
109
|
+
|
|
110
|
+
| Component | id | What it is |
|
|
111
|
+
| --- | --- | --- |
|
|
112
|
+
| [Text input](https://svgrid.com/docs/help/ui-components/sv-text-input/) | `text-input` | Single-line text field for text, email, url, tel and search, with clear button and validation chrome. |
|
|
113
|
+
| [Text area](https://svgrid.com/docs/help/ui-components/sv-text-area/) | `text-area` | Multi-line text field with optional auto-grow and a character counter. |
|
|
114
|
+
| [Number input](https://svgrid.com/docs/help/ui-components/sv-number-input/) | `number-input` | Numeric field with min/max/step, spinner buttons, thousands grouping, precision and prefix/suffix. |
|
|
115
|
+
| [Password input](https://svgrid.com/docs/help/ui-components/sv-password-input/) | `password-input` | Password field with a reveal toggle and an optional 4-level strength meter. |
|
|
116
|
+
| [Masked input](https://svgrid.com/docs/help/ui-components/sv-masked-input/) | `masked-input` | Pattern-masked text input that formats as you type and reports masked and raw values. |
|
|
117
|
+
| [Phone input](https://svgrid.com/docs/help/ui-components/sv-phone-input/) | `phone-input` | Country dial-code selector plus a national number field that emits an E.164-style string. |
|
|
118
|
+
| [Color input](https://svgrid.com/docs/help/ui-components/sv-color-input/) | `color-input` | Color swatch that opens a popover with a hex field, native picker and preset palette. |
|
|
119
|
+
| [OTP input](https://svgrid.com/docs/help/ui-components/sv-otp-input/) | `otp-input` | Segmented one-time-code / PIN entry with auto-advance and paste distribution. |
|
|
120
|
+
| [Duration input](https://svgrid.com/docs/help/ui-components/sv-duration-input/) | `duration-input` | Duration editor whose value is minutes but which accepts 1h 30m, 1:30 or 90. |
|
|
121
|
+
| [Tags input](https://svgrid.com/docs/help/ui-components/sv-tags-input/) | `tags-input` | Editable token / chips input over a string array with de-dupe and a max cap. |
|
|
122
|
+
|
|
123
|
+
### Selection
|
|
124
|
+
|
|
125
|
+
Add the whole family: `npx @svgrid/ui add selection` · see them all: `npx @svgrid/ui try selection`
|
|
126
|
+
|
|
127
|
+
| Component | id | What it is |
|
|
128
|
+
| --- | --- | --- |
|
|
129
|
+
| [List box](https://svgrid.com/docs/help/ui-components/sv-list-box/) | `list-box` | Inline single/multi-select list, a WAI-ARIA listbox with type-ahead and optional windowing. |
|
|
130
|
+
| [Drop-down list](https://svgrid.com/docs/help/ui-components/sv-drop-down-list/) | `drop-down-list` | Single-select dropdown with a portalled, auto-flipping option list and no typing. |
|
|
131
|
+
| [Combo box](https://svgrid.com/docs/help/ui-components/sv-combo-box/) | `combo-box` | Searchable single-select where the value must come from the list; local or remote filtering. |
|
|
132
|
+
| [Auto complete](https://svgrid.com/docs/help/ui-components/sv-auto-complete/) | `auto-complete` | Free-text input with a live-filtered suggestion list; any value allowed. |
|
|
133
|
+
| [Multi select](https://svgrid.com/docs/help/ui-components/sv-multi-select/) | `multi-select` | Multi-select dropdown with a chip trigger, search box, and remote options. |
|
|
134
|
+
| [Tree select](https://svgrid.com/docs/help/ui-components/sv-tree-select/) | `tree-select` | Single-select dropdown over an indented, collapsible tree (cascader pattern). |
|
|
135
|
+
| [Grid select](https://svgrid.com/docs/help/ui-components/sv-grid-select/) | `grid-select` | Grid-in-a-dropdown single-select that picks a row across multiple columns. |
|
|
136
|
+
| [Country input](https://svgrid.com/docs/help/ui-components/sv-country-input/) | `country-input` | Searchable country picker with flag, dial code, and ISO alpha-2 output. |
|
|
137
|
+
|
|
138
|
+
### Range & meters
|
|
139
|
+
|
|
140
|
+
Add the whole family: `npx @svgrid/ui add range` · see them all: `npx @svgrid/ui try range`
|
|
141
|
+
|
|
142
|
+
| Component | id | What it is |
|
|
143
|
+
| --- | --- | --- |
|
|
144
|
+
| [Slider](https://svgrid.com/docs/help/ui-components/sv-slider/) | `slider` | Single or dual-thumb range slider with steps, ticks, scale labels, and keyboard control. |
|
|
145
|
+
| [Gauge](https://svgrid.com/docs/help/ui-components/sv-gauge/) | `gauge` | Radial arc gauge for a single KPI with optional colored threshold bands. |
|
|
146
|
+
| [Progress](https://svgrid.com/docs/help/ui-components/sv-progress/) | `progress` | Linear determinate or indeterminate progress bar with intents, sizes, and label. |
|
|
147
|
+
| [Circular progress](https://svgrid.com/docs/help/ui-components/sv-circular-progress/) | `circular-progress` | Ring progress indicator, determinate or spinning, with center label or content. |
|
|
148
|
+
| [Sparkline](https://svgrid.com/docs/help/ui-components/sv-sparkline/) | `sparkline` | Tiny inline line, area, bar, or win/loss chart from a plain number array. |
|
|
149
|
+
| [Stat](https://svgrid.com/docs/help/ui-components/sv-stat/) | `stat` | KPI metric card with a big value and auto-colored up/down delta trend. |
|
|
150
|
+
|
|
151
|
+
### Overlays & menus
|
|
152
|
+
|
|
153
|
+
Add the whole family: `npx @svgrid/ui add overlays` · see them all: `npx @svgrid/ui try overlays`
|
|
154
|
+
|
|
155
|
+
| Component | id | What it is |
|
|
156
|
+
| --- | --- | --- |
|
|
157
|
+
| [Popover](https://svgrid.com/docs/help/ui-components/sv-popover/) | `popover` | A floating panel anchored to a trigger, portalled to escape overflow-hidden ancestors. |
|
|
158
|
+
| [Tooltip](https://svgrid.com/docs/help/ui-components/sv-tooltip/) | `tooltip` | A small hover and focus tooltip anchored to its child, wired via aria-describedby. |
|
|
159
|
+
| [Modal](https://svgrid.com/docs/help/ui-components/sv-modal/) | `modal` | An accessible modal dialog with backdrop, focus trap, and Escape/backdrop close. |
|
|
160
|
+
| [Drawer](https://svgrid.com/docs/help/ui-components/sv-drawer/) | `drawer` | An edge-anchored side sheet (right/left/top/bottom) with the full dialog a11y contract. |
|
|
161
|
+
| [Toaster](https://svgrid.com/docs/help/ui-components/sv-toaster/) | `toaster` | The host that renders the shared toast queue; call toast() from anywhere. |
|
|
162
|
+
| [Context menu](https://svgrid.com/docs/help/ui-components/sv-context-menu/) | `context-menu` | Wraps a region and opens a menu at the pointer on right-click or long-press. |
|
|
163
|
+
| [Menu](https://svgrid.com/docs/help/ui-components/sv-menu/) | `menu` | A trigger-opened dropdown menu with submenus, icons, shortcuts, and keyboard support. |
|
|
164
|
+
|
|
165
|
+
### Layout & composite
|
|
166
|
+
|
|
167
|
+
Add the whole family: `npx @svgrid/ui add layout` · see them all: `npx @svgrid/ui try layout`
|
|
168
|
+
|
|
169
|
+
| Component | id | What it is |
|
|
170
|
+
| --- | --- | --- |
|
|
171
|
+
| [Tabs](https://svgrid.com/docs/help/ui-components/sv-tabs/) | `tabs` | WAI-ARIA tab strip with roving arrow-key navigation, four positions, and optional closable tabs. |
|
|
172
|
+
| [Accordion](https://svgrid.com/docs/help/ui-components/sv-accordion/) | `accordion` | WAI-ARIA accordion of collapsible sections with single- or multiple-expand and roving header focus. |
|
|
173
|
+
| [Splitter](https://svgrid.com/docs/help/ui-components/sv-splitter/) | `splitter` | Two resizable panes split by a draggable WAI-ARIA separator, with pointer drag and arrow-key resize. |
|
|
174
|
+
| [Dock layout](https://svgrid.com/docs/help/ui-components/sv-dock-layout/) | `dock-layout` | Basic docking layout with nested resizable split groups, tabbed leaves, and drag-to-dock. |
|
|
175
|
+
| [Dock manager](https://svgrid.com/docs/help/ui-components/sv-dock-manager/) | `dock-manager` | Full docking manager with floating windows, tab reordering, and pinning / auto-hide. |
|
|
176
|
+
| [Card](https://svgrid.com/docs/help/ui-components/sv-card/) | `card` | Themed surface container with an optional header, body, and footer. |
|
|
177
|
+
| [Divider](https://svgrid.com/docs/help/ui-components/sv-divider/) | `divider` | Theme-driven separator line, horizontal or vertical, solid or dashed, with an optional label. |
|
|
178
|
+
| [Scroll area](https://svgrid.com/docs/help/ui-components/sv-scroll-area/) | `scroll-area` | Scroll container with the kit's themed custom scrollbars and contained overscroll. |
|
|
179
|
+
| [Grid chart](https://svgrid.com/docs/help/ui-components/sv-grid-chart/) | `grid-chart` | Inline-SVG chart that renders a ChartSpec with no external charting dependency, bound to grid data. |
|
|
180
|
+
| [Form](https://svgrid.com/docs/help/ui-components/sv-form/) | `form` | Schema-driven form that renders the UI-kit controls from a FormField[] with validation and submit. |
|
|
181
|
+
| [Field](https://svgrid.com/docs/help/ui-components/sv-field/) | `field` | Shared label / hint / error chrome that makes any control behave consistently. |
|
|
182
|
+
| [File upload](https://svgrid.com/docs/help/ui-components/sv-file-upload/) | `file-upload` | Drag-and-drop file field with click-to-browse, accept / size / count validation, and a file list. |
|
|
183
|
+
|
|
184
|
+
### Feedback & display
|
|
185
|
+
|
|
186
|
+
Add the whole family: `npx @svgrid/ui add feedback` · see them all: `npx @svgrid/ui try feedback`
|
|
187
|
+
|
|
188
|
+
| Component | id | What it is |
|
|
189
|
+
| --- | --- | --- |
|
|
190
|
+
| [Badge](https://svgrid.com/docs/help/ui-components/sv-badge/) | `badge` | Small status pill or count label tinted from the grid's semantic tokens. |
|
|
191
|
+
| [Skeleton](https://svgrid.com/docs/help/ui-components/sv-skeleton/) | `skeleton` | Shimmering loading placeholder that reserves layout space while data loads. |
|
|
192
|
+
| [Alert](https://svgrid.com/docs/help/ui-components/sv-alert/) | `alert` | Inline contextual message with icon, title, dismiss, and trailing actions. |
|
|
193
|
+
| [Empty state](https://svgrid.com/docs/help/ui-components/sv-empty-state/) | `empty-state` | Centered placeholder for empty lists and no-results screens with an action slot. |
|
|
194
|
+
| [Chip](https://svgrid.com/docs/help/ui-components/sv-chip/) | `chip` | Compact interactive pill for tags, filter tokens, and entities with remove. |
|
|
195
|
+
| [Timeline](https://svgrid.com/docs/help/ui-components/sv-timeline/) | `timeline` | Vertical activity or history feed with a connecting rail and colored markers. |
|
|
196
|
+
| [Avatar](https://svgrid.com/docs/help/ui-components/sv-avatar/) | `avatar` | User avatar with automatic initials-and-color fallback and presence status dot. |
|
|
197
|
+
| [Avatar group](https://svgrid.com/docs/help/ui-components/sv-avatar-group/) | `avatar-group` | Overlapping stacked avatars with a +N overflow pill for members and assignees. |
|
|
198
|
+
| [Carousel](https://svgrid.com/docs/help/ui-components/sv-carousel/) | `carousel` | Sliding slideshow with arrows, dots, autoplay that pauses on hover, and swipe. |
|
|
199
|
+
|
|
200
|
+
### Navigation & rich
|
|
201
|
+
|
|
202
|
+
Add the whole family: `npx @svgrid/ui add navigation` · see them all: `npx @svgrid/ui try navigation`
|
|
203
|
+
|
|
204
|
+
| Component | id | What it is |
|
|
205
|
+
| --- | --- | --- |
|
|
206
|
+
| [Breadcrumb](https://svgrid.com/docs/help/ui-components/sv-breadcrumb/) | `breadcrumb` | A navigation trail that shows where the current page sits in your app's hierarchy. |
|
|
207
|
+
| [Pagination](https://svgrid.com/docs/help/ui-components/sv-pagination/) | `pagination` | A standalone pager: page numbers with ellipsis, prev/next, and optional first/last. |
|
|
208
|
+
| [Stepper](https://svgrid.com/docs/help/ui-components/sv-stepper/) | `stepper` | A progress stepper for wizards and multi-step forms, horizontal or vertical. |
|
|
209
|
+
| [Nav pane](https://svgrid.com/docs/help/ui-components/sv-nav-pane/) | `nav-pane` | An Outlook-style app-shell sidebar with collapsible sections, badges, and modules. |
|
|
210
|
+
| [Tree](https://svgrid.com/docs/help/ui-components/sv-tree/) | `tree` | A WAI-ARIA tree view with expand/select, tri-state checkboxes, virtualization, and lazy load. |
|
|
211
|
+
| [Command](https://svgrid.com/docs/help/ui-components/sv-command/) | `command` | A Cmd+K command palette: fuzzy-searchable actions in a focus-trapped dialog. |
|
|
212
|
+
| [Tour](https://svgrid.com/docs/help/ui-components/sv-tour/) | `tour` | A guided product tour that spotlights targets and walks users through each step. |
|
|
213
|
+
| [Rich text](https://svgrid.com/docs/help/ui-components/sv-rich-text/) | `rich-text` | A lightweight WYSIWYG editor with a formatting toolbar that emits HTML. |
|
|
214
|
+
|
|
215
|
+
Run `npx @svgrid/ui list` for the same catalogue in your terminal. Every component is also a plain import from `@svgrid/grid` - the CLI is a convenience, never the only way in.
|
|
216
|
+
|
|
73
217
|
|
|
74
218
|
MIT © jQWidgets Ltd
|
package/package.json
CHANGED