@stargazers-stella/cosmic-ui 0.1.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 +96 -0
- package/dist/index.cjs +2864 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +178 -0
- package/dist/index.d.ts +178 -0
- package/dist/index.js +2770 -0
- package/dist/index.js.map +1 -0
- package/package.json +44 -0
- package/theme.css +71 -0
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Cosmic UI
|
|
2
|
+
|
|
3
|
+
Lightweight, themeable React UI primitives built for Tailwind-based apps: Buttons, Cards, Badges, Dialogs, Selects, Dropdown menus, Tables, and more. Styling is driven by design tokens (CSS variables) so you can swap themes without rewriting components.
|
|
4
|
+
|
|
5
|
+
## Screenshots
|
|
6
|
+
Add your images to `docs/screenshots/` and replace these placeholders.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## What You Get
|
|
13
|
+
- Accessible primitives powered by Radix UI (Dialog, Select, Dropdown Menu).
|
|
14
|
+
- Variant-based styling with `class-variance-authority` (consistent variants across components).
|
|
15
|
+
- Tailwind-friendly class merging via `clsx` + `tailwind-merge` (exported as `cn`).
|
|
16
|
+
- Fully typed TypeScript exports + tree-shakeable builds (ESM/CJS + `.d.ts`).
|
|
17
|
+
- A tiny token layer (`theme.css`) with light defaults and dark overrides.
|
|
18
|
+
|
|
19
|
+
## Tech Stack
|
|
20
|
+
- React `^18 || ^19` (peer dependencies), TypeScript
|
|
21
|
+
- Bundling: `tsup` (ESM + CJS + types + sourcemaps)
|
|
22
|
+
- UI primitives: Radix UI (`@radix-ui/*`)
|
|
23
|
+
- Styling utilities: `class-variance-authority`, `clsx`, `tailwind-merge`
|
|
24
|
+
- Icons/toasts: `lucide-react`, `sonner`
|
|
25
|
+
- CI/publishing: GitHub Actions -> GitHub Packages (`npm.pkg.github.com`)
|
|
26
|
+
|
|
27
|
+
## Install
|
|
28
|
+
This package is configured for GitHub Packages (`npm.pkg.github.com`).
|
|
29
|
+
|
|
30
|
+
1) Add an `.npmrc` (project or user-level):
|
|
31
|
+
```ini
|
|
32
|
+
@stargazers-stella:registry=https://npm.pkg.github.com
|
|
33
|
+
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
2) Install:
|
|
37
|
+
```sh
|
|
38
|
+
npm install @stargazers-stella/cosmic-ui
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Theme Tokens
|
|
42
|
+
Import the token sheet once in your app entry/global styles:
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
import "@stargazers-stella/cosmic-ui/theme.css";
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
- Light defaults live on `:root`; dark overrides live on `.dark`.
|
|
49
|
+
- Toggle the `dark` class on `<html>` or `<body>` to switch themes.
|
|
50
|
+
- Helpers included: `.surface`, `.surface-strong`, `.surface-muted`, `.surface-inset`.
|
|
51
|
+
- `--radius` controls border radii for cards/controls.
|
|
52
|
+
|
|
53
|
+
If you already have a token system, override the CSS variables instead of importing `theme.css`.
|
|
54
|
+
|
|
55
|
+
## Usage
|
|
56
|
+
```tsx
|
|
57
|
+
import { Badge, Button, Card, CardContent } from "@stargazers-stella/cosmic-ui";
|
|
58
|
+
|
|
59
|
+
export function Example() {
|
|
60
|
+
return (
|
|
61
|
+
<Card className="max-w-sm">
|
|
62
|
+
<CardContent className="space-y-3">
|
|
63
|
+
<Badge variant="glow">Signal</Badge>
|
|
64
|
+
<p className="text-sm text-muted-foreground">
|
|
65
|
+
Cosmic UI stays themeable via CSS variables.
|
|
66
|
+
</p>
|
|
67
|
+
<Button>Action</Button>
|
|
68
|
+
</CardContent>
|
|
69
|
+
</Card>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The library also exports `cn` for class merging:
|
|
75
|
+
```ts
|
|
76
|
+
import { cn } from "@stargazers-stella/cosmic-ui";
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Component Index
|
|
80
|
+
Exported from `src/index.ts`:
|
|
81
|
+
- `Alert`, `Badge`, `Button`, `Card`
|
|
82
|
+
- `Command` (cmdk)
|
|
83
|
+
- `Dialog`, `DropdownMenu`, `Select`
|
|
84
|
+
- `Input`, `Textarea`, `Table`
|
|
85
|
+
- `Toaster` (sonner) and helpers
|
|
86
|
+
|
|
87
|
+
## Notes (Next.js / RSC)
|
|
88
|
+
Most components include `"use client"` at the top of the module. In Next.js App Router, import and use them from Client Components.
|
|
89
|
+
|
|
90
|
+
## Development
|
|
91
|
+
```sh
|
|
92
|
+
npm install
|
|
93
|
+
npm run build
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Output goes to `dist/` (`dist/index.js`, `dist/index.cjs`, `dist/index.d.ts`).
|