@gnome-ui/react 1.0.0 → 1.2.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 +74 -46
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,10 +1,12 @@
1
1
  # @gnome-ui/react
2
2
 
3
- React component library following the [GNOME Human Interface Guidelines](https://developer.gnome.org/hig/).
3
+ React component library following the [GNOME Human Interface Guidelines](https://developer.gnome.org/hig/), built on the [Adwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/) design language.
4
4
 
5
5
  [![npm](https://img.shields.io/npm/v/@gnome-ui/react)](https://www.npmjs.com/package/@gnome-ui/react)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](../../LICENSE)
7
7
 
8
+ Live documentation: **[Storybook →](https://eljijuna.github.io/gnome-ui/)**
9
+
8
10
  ## Installation
9
11
 
10
12
  ```bash
@@ -13,63 +15,89 @@ npm install @gnome-ui/react
13
15
 
14
16
  ## Setup
15
17
 
16
- Import the styles once at the root of your app:
18
+ Import the stylesheet once at the root of your app:
17
19
 
18
20
  ```tsx
19
21
  // main.tsx or App.tsx
20
22
  import "@gnome-ui/react/styles";
21
23
  ```
22
24
 
23
- ## Components
24
-
25
- ### Button
25
+ ## Quick example
26
26
 
27
27
  ```tsx
28
- import { Button } from "@gnome-ui/react";
29
-
30
- // Variants
31
- <Button variant="default">Cancel</Button>
32
- <Button variant="suggested">Save</Button>
33
- <Button variant="destructive">Delete</Button>
34
- <Button variant="flat">Back</Button>
35
-
36
- // Sizes
37
- <Button size="sm">Small</Button>
38
- <Button size="md">Medium</Button> {/* default */}
39
- <Button size="lg">Large</Button>
40
-
41
- // Shapes
42
- <Button shape="pill" variant="suggested">New Document</Button>
43
- <Button shape="circular" variant="suggested">+</Button>
44
-
45
- // With icons
46
- <Button variant="suggested" leadingIcon={<SaveIcon />}>Save</Button>
28
+ import { Button, TextField, Dialog } from "@gnome-ui/react";
29
+ import "@gnome-ui/react/styles";
47
30
 
48
- // Disabled
49
- <Button disabled>Unavailable</Button>
31
+ export default function App() {
32
+ return (
33
+ <Button variant="suggested" onClick={() => console.log("saved")}>
34
+ Save Changes
35
+ </Button>
36
+ );
37
+ }
50
38
  ```
51
39
 
52
- | Prop | Type | Default | Description |
53
- |------|------|---------|-------------|
54
- | `variant` | `"default" \| "suggested" \| "destructive" \| "flat"` | `"default"` | Visual style |
55
- | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size |
56
- | `shape` | `"default" \| "pill" \| "circular"` | `"default"` | Shape |
57
- | `leadingIcon` | `ReactNode` | — | Icon before label |
58
- | `trailingIcon` | `ReactNode` | — | Icon after label |
59
- | `disabled` | `boolean` | `false` | Disabled state |
60
-
61
- All native `<button>` HTML attributes are also accepted.
62
-
63
- ## Guidelines
64
-
65
- - Use **`suggested`** for the single primary/affirmative action per view. Never use more than one.
66
- - Use **`destructive`** only for irreversible actions (Delete, Format…).
67
- - Use **`flat`** inside header bars and toolbars.
68
- - Button labels must use **imperative verbs** with **Header Capitalization** (e.g. "Save Changes").
69
-
70
- ## Storybook
40
+ ## Components
71
41
 
72
- [View live component documentation →](https://github.com/ElJijuna/gnome-ui.git)
42
+ ### Controls
43
+
44
+ | Component | Description |
45
+ |-----------|-------------|
46
+ | [`Button`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-button--docs) | Default, Suggested, Destructive, Flat variants; sm/md/lg sizes; pill and circular shapes |
47
+ | [`Switch`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-switch--docs) | On/off toggle for settings that apply immediately |
48
+ | [`Checkbox`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-checkbox--docs) | Multi-selection with checked, unchecked, and indeterminate states |
49
+ | [`RadioButton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-radiobutton--docs) | Single-selection within a group; keyboard arrow-key navigation |
50
+ | [`TextField`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-textfield--docs) | Text input with label, helper text, and error state |
51
+ | [`SpinButton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-spinbutton--docs) | Numeric input with −/+ buttons, keyboard nav, decimal support |
52
+ | [`Slider`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-slider--docs) | Draggable range control with tick marks, decimal steps, and keyboard nav |
53
+ | [`Dropdown`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-dropdown--docs) | Expandable option list with keyboard nav, flip positioning, and descriptions |
54
+ | [`SearchBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-searchbar--docs) | Collapsible search bar with auto-focus, clear button, and optional filter row |
55
+ | [`Link`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-link--docs) | Inline hyperlink with accent colour, animated underline, and external-URL variant |
56
+
57
+ ### Display
58
+
59
+ | Component | Description |
60
+ |-----------|-------------|
61
+ | [`Text`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-text--docs) | 12 Adwaita type styles: large-title, title-1…4, heading, body, caption… |
62
+ | [`Icon`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-icon--docs) | React adapter for `@gnome-ui/icons` — inline SVG, inherits `currentColor` |
63
+ | [`Avatar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-avatar--docs) | Circular user image with deterministic-color initials fallback |
64
+ | [`Badge`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-badge--docs) | Counter or status dot, optionally anchored over another element |
65
+ | [`Spinner`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-spinner--docs) | Indeterminate loading indicator; sm/md/lg sizes |
66
+ | [`ProgressBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-progressbar--docs) | Determinate (0–1) and indeterminate progress indicator |
67
+ | [`StatusPage`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-statuspage--docs) | Empty-state page with icon, title, description, and optional actions |
68
+ | [`Separator`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-separator--docs) | Horizontal/vertical dividing line between content groups |
69
+
70
+ ### Layout & containers
71
+
72
+ | Component | Description |
73
+ |-----------|-------------|
74
+ | [`Card`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-card--docs) | Elevated surface for grouping content; static or interactive (activatable) |
75
+ | [`HeaderBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-headerbar--docs) | Title bar with centered title and leading/trailing action slots |
76
+ | [`Sidebar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-sidebar--docs) / `SidebarItem` | Lateral navigation panel with active state and badge support |
77
+ | [`ActionRow`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-actionrow--docs) | Settings row with title, subtitle, and trailing widget |
78
+ | [`BoxedList`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-boxedlist--docs) | Rounded bordered list of rows — canonical GNOME settings pattern |
79
+ | [`TabBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-tabs--docs) / `TabItem` / `TabPanel` | Tab-based navigation with keyboard support and optional close buttons |
80
+ | [`ViewSwitcher`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-viewswitcher--docs) / `ViewSwitcherItem` | Segmented pill control for switching between 2–4 top-level views |
81
+
82
+ ### Overlays
83
+
84
+ | Component | Description |
85
+ |-----------|-------------|
86
+ | [`Toast`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-toast--docs) / `Toaster` | Non-blocking temporary notification with auto-dismiss, action, and queue support |
87
+ | [`Dialog`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-dialog--docs) | Blocking modal with title, body, focus trap, and configurable buttons |
88
+ | [`Tooltip`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-tooltip--docs) | Floating informational label on hover/focus with auto-flip positioning |
89
+ | [`Popover`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-popover--docs) | Floating interactive panel with arrow and auto-flip positioning |
90
+ | [`Banner`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-banner--docs) | Persistent message strip with optional action and dismiss |
91
+
92
+ ### Adaptive layout
93
+
94
+ | Component | Description |
95
+ |-----------|-------------|
96
+ | [`useBreakpoint`](https://eljijuna.github.io/gnome-ui/?path=/docs/adaptive-usebreakpoint--docs) | Hook tracking viewport width against GNOME breakpoints (400 / 550 / 860 px) |
97
+ | [`Clamp`](https://eljijuna.github.io/gnome-ui/?path=/docs/adaptive-clamp--docs) | Constrains content to a max width, centering it — mirrors `AdwClamp` |
98
+ | [`NavigationSplitView`](https://eljijuna.github.io/gnome-ui/?path=/docs/adaptive-navigationsplitview--docs) | Two-pane layout that collapses to a single pane at ≤ 400 px |
99
+ | [`OverlaySplitView`](https://eljijuna.github.io/gnome-ui/?path=/docs/adaptive-overlaysplitview--docs) | Sidebar becomes slide-over overlay at ≤ 400 px |
100
+ | [`ViewSwitcherBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/adaptive-viewswitcherbar--docs) | Bottom bar for `ViewSwitcher` items on narrow screens (≤ 550 px) |
73
101
 
74
102
  ## License
75
103
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gnome-ui/react",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "description": "React component library following GNOME Human Interface Guidelines",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",