magnaui 0.1.0 → 0.1.1
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 +27 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
React components, theme tokens, and original Magna artwork for authorized Magna AI applications.
|
|
4
4
|
|
|
5
|
-
**Usage terms:** Public package visibility permits downloading the distribution; it does not grant an open-source license to Magna-owned materials. Use is restricted to the owner and expressly authorized users under
|
|
5
|
+
**Usage terms:** Public package visibility permits downloading the distribution; it does not grant an open-source license to Magna-owned materials. Use is restricted to the owner and expressly authorized users under `LICENSE` in the installed package. Third-party materials retain their own terms in `THIRD_PARTY_NOTICES.md`.
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
@@ -25,9 +25,9 @@ import { Button, Checkbox, MagnaLogo } from 'magnaui';
|
|
|
25
25
|
|
|
26
26
|
export function Workspace() {
|
|
27
27
|
return (
|
|
28
|
-
<main>
|
|
29
|
-
<MagnaLogo variant=
|
|
30
|
-
<Checkbox.Label label=
|
|
28
|
+
<main style={{ display: 'grid', gap: 16, padding: 24 }}>
|
|
29
|
+
<MagnaLogo variant='horizontal' label='Magna' />
|
|
30
|
+
<Checkbox.Label label='Send workspace updates' defaultChecked />
|
|
31
31
|
<Button.Root onClick={() => console.log('Create workspace')}>
|
|
32
32
|
Create workspace
|
|
33
33
|
</Button.Root>
|
|
@@ -46,6 +46,27 @@ import { MagnaLogo } from 'magnaui/magna';
|
|
|
46
46
|
import { BorderBeam } from 'magnaui/interactions';
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
## Included components
|
|
50
|
+
|
|
51
|
+
The npm package includes every currently implemented public component in the source library: **68 base component families**, **10 Magna workspace components**, and **7 interaction adapters**, with their public component parts and types.
|
|
52
|
+
|
|
53
|
+
| Group | Public component families |
|
|
54
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
55
|
+
| Actions | `Button`, `ButtonGroup`, `CompactButton`, `FancyButton`, `LinkButton`, `SocialButton` |
|
|
56
|
+
| Forms and input | `Checkbox`, `ColorPicker`, `CounterInput`, `DatePicker`, `DigitInput`, `FileUpload`, `Filter`, `Hint`, `InlineInput`, `Input`, `Label`, `PasswordStrength`, `Radio`, `Rating`, `RichEditor`, `Select`, `Slider`, `Switch`, `TagInput`, `Textarea`, `TimePicker` |
|
|
57
|
+
| Navigation | `Accordion`, `Breadcrumb`, `CommandMenu`, `DotStepper`, `HorizontalStepper`, `Pagination`, `SegmentedControl`, `TabMenuHorizontal`, `TabMenuVertical`, `VerticalStepper` |
|
|
58
|
+
| Feedback | `Alert`, `Banner`, `Notification`, `NotificationFeed`, `ProgressBar`, `ProgressCircle`, `StatusBadge`, `Tooltip` |
|
|
59
|
+
| Overlays | `Drawer`, `Dropdown`, `Modal`, `Popover`, `StatusModal` |
|
|
60
|
+
| Data and content | `ActivityFeed`, `ChartLegend`, `ContentCard`, `ContentLabel`, `Divider`, `Kbd`, `ScrollArea`, `Table`, `Tag` |
|
|
61
|
+
| Identity and icons | `Avatar`, `AvatarEmptyIcons`, `AvatarGroup`, `AvatarGroupCompact`, `Badge`, `FileFormatIcon`, `KeyIcon`, `PaymentIcon`, `RatingIcons` |
|
|
62
|
+
|
|
63
|
+
- **Magna workspace:** `AppIcon`, `AppLauncher`, `MagnaLogo`, `ChatComposer`, `ChatActivity`, `DesktopButton`, `DesktopSwitch`, `FileTile`, `MagnaNavigation`, and `ProjectContext`.
|
|
64
|
+
- **Interactions:** `BorderBeam`, `ThinkingOrb`, `BotAvatar`, `Liquid`, `VoiceBeam`, `MetalFx`, and `ImageGeneration`.
|
|
65
|
+
- **Providers and helpers:** `ThemeProvider`, `useTheme`, `ThemeSwitch`, `TooltipProvider`, `NotificationProvider`, `notification`, `useNotification`, `useTabObserver`, and application, navigation, and logo metadata.
|
|
66
|
+
- **Styles and assets:** compiled component CSS, light/dark themes, five accents, two neutral palettes, 265 artwork files (including 40 application icons and 24 logo variants), and 11 self-hosted font files.
|
|
67
|
+
|
|
68
|
+
Compound parts such as `Checkbox.Card`, `Switch.Integration`, `RichEditor.Toolbar`, and `FileUpload.Root` are included. Internal render helpers are bundled with the components that use them. The documentation app, gallery demos, and full Figma product screens are separate from the reusable package. Package coverage confirms availability; it does not certify every Figma variant visually.
|
|
69
|
+
|
|
49
70
|
## Themes and providers
|
|
50
71
|
|
|
51
72
|
Wrap theme controls with `ThemeProvider`, tooltips with `TooltipProvider`, and mount the notification host once when using notifications. Ordinary buttons and fields do not need a provider.
|
|
@@ -58,7 +79,7 @@ import type { ReactNode } from 'react';
|
|
|
58
79
|
|
|
59
80
|
export function Providers({ children }: { children: ReactNode }) {
|
|
60
81
|
return (
|
|
61
|
-
<ThemeProvider attribute=
|
|
82
|
+
<ThemeProvider attribute='class'>
|
|
62
83
|
<TooltipProvider>{children}</TooltipProvider>
|
|
63
84
|
<NotificationProvider />
|
|
64
85
|
</ThemeProvider>
|
|
@@ -66,7 +87,7 @@ export function Providers({ children }: { children: ReactNode }) {
|
|
|
66
87
|
}
|
|
67
88
|
```
|
|
68
89
|
|
|
69
|
-
The `dark` class selects dark mode. `data-
|
|
90
|
+
The `dark` class selects dark mode. `data-accent` and `data-neutral` on the document element select palettes. Keep those attributes on the document element so portaled controls inherit the theme. Font families can be overridden through `--font-sans` and `--font-dm-mono`.
|
|
70
91
|
|
|
71
92
|
Components keep their existing API: `Button.Root`, `Input.Input`, `Checkbox.Label`, and the other compound members. Your application supplies persistence, uploads, chat, and voice services through the component callbacks.
|
|
72
93
|
|