@vegastack/design 0.7.1 → 0.7.3
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/bin/doctor.mjs
CHANGED
|
@@ -184,8 +184,6 @@ const RETIRED_COMPONENTS = {
|
|
|
184
184
|
"icon-button":
|
|
185
185
|
'Button with size="icon" (or icon-sm / icon-lg) and an aria-label',
|
|
186
186
|
segmented: "a joined ToggleGroup",
|
|
187
|
-
"password-input":
|
|
188
|
-
"an InputGroup composition (Input + an InputGroupButton reveal toggle)",
|
|
189
187
|
"progress-indicator": "Progress (determinate) or Spinner (indeterminate)",
|
|
190
188
|
"field-inline": "EditableCell",
|
|
191
189
|
"floating-surface": "Popover / HoverCard — FloatingSurface was internal only",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vegastack/design",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.3",
|
|
4
4
|
"description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -110,7 +110,7 @@ compatibility layer** — an import resolves to nothing and a deleted token sile
|
|
|
110
110
|
nothing, which is the worse half. Both searches are mechanical:
|
|
111
111
|
|
|
112
112
|
```bash
|
|
113
|
-
rg -n 'IconButton|OTPInput|
|
|
113
|
+
rg -n 'IconButton|OTPInput|CheckboxGroup|FieldInline|Segmented|SplitButton|ProgressIndicator|OnboardingChecklist|FloatingSurface|MarketingSurface|ComparisonMatrix|FigureFrame|LogoRow|ParticleField|PricingSection|RuledBand|SectionHeader|Testimonial|StaggeredTextReveal' --glob '!components/ui/**'
|
|
114
114
|
rg -n 'surface-(1|2|3|raised)|--alpha-|--opacity-|--size-|--icon-|--panel-width-|--z-(raised|overlay|toast)|shadow-overlay|text-(h[1-4]|label|label-sm|code|mono-label|display-)|muted-foreground-faint|surfaceInteractive|fillInteractive|fieldControl|selectedChipVariants' --glob '!components/ui/**'
|
|
115
115
|
```
|
|
116
116
|
|
|
@@ -20,10 +20,10 @@ live contract for any single component is its page at
|
|
|
20
20
|
writes:
|
|
21
21
|
|
|
22
22
|
- **Retired, with no drop-in:** `IconButton` → `Button size="icon*"` · `OTPInput` → `InputOTP` ·
|
|
23
|
-
`
|
|
23
|
+
`CheckboxGroup` → `FieldSet` + `Checkbox` ·
|
|
24
24
|
`FieldInline` → `EditableCell` · `Segmented` → a joined `ToggleGroup` · `SplitButton` → a
|
|
25
25
|
`ButtonGroup` composition · `ProgressIndicator` → `Progress` + `Spinner` · `OnboardingChecklist` →
|
|
26
|
-
|
|
26
|
+
an `ItemGroup` of `Item` rows under a `Progress`. The ten marketing components were deleted outright.
|
|
27
27
|
- **Gone from the token layer:** the surface ladder (`surface-1/2/3`), every `--alpha-*` and
|
|
28
28
|
`--opacity-*`, `--size-*`, `--icon-*`, `--z-*`, `--shadow-overlay`, and the role type scale
|
|
29
29
|
(`text-h1`, `text-label`, `text-code`, `text-mono-label`, `text-display-*`).
|
|
@@ -219,19 +219,19 @@ contract.
|
|
|
219
219
|
silently renders as body text. `vegastack-design doctor` scans your source and lists every
|
|
220
220
|
occurrence with `file:line`; run it after any upgrade or generated change.
|
|
221
221
|
|
|
222
|
-
| Retired | Write instead
|
|
223
|
-
| ---------------------------------------------------------- |
|
|
224
|
-
| `text-h1` · `text-h2` · `text-h3` · `text-h4` | `text-3xl` · `text-2xl` · `text-lg` + `font-semibold`; `text-base font-medium`
|
|
225
|
-
| `text-label` · `text-label-sm` · `text-strong` | `text-sm font-medium` · `text-xs font-medium` · `text-sm font-semibold`
|
|
226
|
-
| `text-mono-label` · `text-code` · `text-code-sm` | `text-xs font-medium` (a label is sans) · `font-mono text-sm` · `font-mono text-xs`
|
|
227
|
-
| `text-display-{sm,md,lg,xl}` | `text-4xl` · `text-5xl` · `text-6xl` · `text-7xl`
|
|
228
|
-
| `bg-{destructive,success,warning,info}-subtle` | `bg-destructive/10` (the family at `/10`), `-text` ink on it
|
|
229
|
-
| `--alpha-*` · `--opacity-*` | the literal: `bg-foreground/10`, `opacity-50`
|
|
230
|
-
| `--z-*` | `z-10` (raised) · `z-50` (every overlay; DOM order decides)
|
|
231
|
-
| `shadow-overlay` · `backdrop-blur-glass` | `shadow-md` (popover) / `shadow-lg` (modal) · delete it
|
|
232
|
-
| `icon-button` · `segmented`
|
|
233
|
-
| `progress-indicator` · `field-inline` · `floating-surface` | `Progress` / `Spinner` · `EditableCell` · `Popover`
|
|
234
|
-
| `section-header` · `sonner` | your own heading markup · `toast` (`toast.add({ title })`)
|
|
222
|
+
| Retired | Write instead |
|
|
223
|
+
| ---------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
224
|
+
| `text-h1` · `text-h2` · `text-h3` · `text-h4` | `text-3xl` · `text-2xl` · `text-lg` + `font-semibold`; `text-base font-medium` |
|
|
225
|
+
| `text-label` · `text-label-sm` · `text-strong` | `text-sm font-medium` · `text-xs font-medium` · `text-sm font-semibold` |
|
|
226
|
+
| `text-mono-label` · `text-code` · `text-code-sm` | `text-xs font-medium` (a label is sans) · `font-mono text-sm` · `font-mono text-xs` |
|
|
227
|
+
| `text-display-{sm,md,lg,xl}` | `text-4xl` · `text-5xl` · `text-6xl` · `text-7xl` |
|
|
228
|
+
| `bg-{destructive,success,warning,info}-subtle` | `bg-destructive/10` (the family at `/10`), `-text` ink on it |
|
|
229
|
+
| `--alpha-*` · `--opacity-*` | the literal: `bg-foreground/10`, `opacity-50` |
|
|
230
|
+
| `--z-*` | `z-10` (raised) · `z-50` (every overlay; DOM order decides) |
|
|
231
|
+
| `shadow-overlay` · `backdrop-blur-glass` | `shadow-md` (popover) / `shadow-lg` (modal) · delete it |
|
|
232
|
+
| `icon-button` · `segmented` | `Button size="icon"` + `aria-label` · joined `ToggleGroup` |
|
|
233
|
+
| `progress-indicator` · `field-inline` · `floating-surface` | `Progress` / `Spinner` · `EditableCell` · `Popover` |
|
|
234
|
+
| `section-header` · `sonner` | your own heading markup · `toast` (`toast.add({ title })`) |
|
|
235
235
|
|
|
236
236
|
## Reference
|
|
237
237
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
|
|
4
4
|
which is the authority for membership and counts. -->
|
|
5
5
|
|
|
6
|
-
**
|
|
6
|
+
**112 components**, plus 467 animated-icon items, 11 hooks (`use-animation-replay`, `use-announcer`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`), 4 starter blocks (`app-shell-01`, `board-01`, `login-01`, `settings-01`), 68 chart blocks across 7 families, and 2 data libs (`geo-data`, `drag-item`) — 664 registry items in total.
|
|
7
7
|
|
|
8
8
|
Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
|
|
9
9
|
`@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
|
|
@@ -37,6 +37,7 @@ starts with `icon-` is a component and never an icon.
|
|
|
37
37
|
- **`label`** — A styled native label for form controls.
|
|
38
38
|
- **`native-select`** — The platform <select>, tokenized — the OS picker on mobile, with option groups.
|
|
39
39
|
- **`number-field`** — Locale-aware numeric input on Base UI's NumberField in upstream's InputGroup chrome, with full-height flanking steppers.
|
|
40
|
+
- **`password-input`** — A password field with a show/hide toggle, composed from InputGroup, forwarding native input props and the ref to the inner input.
|
|
40
41
|
- **`radio-group`** — Mutually-exclusive options with arrow-key navigation and a 24px invisible hit area (A11Y-2).
|
|
41
42
|
- **`region-select`** — A searchable picker of states/provinces for a country, with a free-text fallback for countries with no subdivisions. A thin wrapper over SearchableSelect fed by the geo-data item.
|
|
42
43
|
- **`search-input`** — A token-safe search field with a consistent clear action and controlled or uncontrolled native input semantics.
|