fxui-core 2.0.0 → 2.0.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 +150 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# FXUI
|
|
2
|
+
|
|
3
|
+
**Brutal by design. Yours to own.**
|
|
4
|
+
|
|
5
|
+
> No apologies. No compromise. Just raw, unapologetic components that mean business.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/fxui-core)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
9
|
+
[](https://opensource.org/licenses/MIT)
|
|
10
|
+
[](https://tailwindcss.com)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add fxui-core
|
|
18
|
+
npm install fxui-core
|
|
19
|
+
yarn add fxui-core
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
> **Requires:** React 18+ · Tailwind CSS 3+
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Quick Start
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { Button, Card, Input } from 'fxui-core';
|
|
30
|
+
import 'fxui-core/styles';
|
|
31
|
+
|
|
32
|
+
export default function App() {
|
|
33
|
+
return (
|
|
34
|
+
<Card variant="elevated" className="w-96">
|
|
35
|
+
<Card.Header>Get Started</Card.Header>
|
|
36
|
+
<Card.Body className="space-y-4">
|
|
37
|
+
<Input label="Email" placeholder="you@example.com" />
|
|
38
|
+
<Input label="Password" type="password" />
|
|
39
|
+
</Card.Body>
|
|
40
|
+
<Card.Footer>
|
|
41
|
+
<Button className="w-full">Sign In</Button>
|
|
42
|
+
</Card.Footer>
|
|
43
|
+
</Card>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## Why FXUI?
|
|
51
|
+
|
|
52
|
+
| | |
|
|
53
|
+
|---|---|
|
|
54
|
+
| ⚡ **No runtime** | Pure Tailwind utilities. Zero CSS-in-JS. No style injection at runtime. |
|
|
55
|
+
| ♿ **Accessible** | Built on Radix UI primitives. ARIA roles, keyboard nav, focus management — all included. |
|
|
56
|
+
| 🎨 **Customizable** | Override anything via `className`. CVA variants for every component. |
|
|
57
|
+
| 📦 **Tree-shakeable** | Only ship what you use. ESM + CJS + full type declarations. |
|
|
58
|
+
| 🌙 **Dark mode** | Full `dark:` support. Switch modes with `ThemeProvider`. |
|
|
59
|
+
| 🔒 **Strict TypeScript** | Typed props everywhere. `forwardRef` throughout. No `any`. |
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 117 Components · 15 Categories
|
|
64
|
+
|
|
65
|
+
| Category | Components |
|
|
66
|
+
|----------|-----------|
|
|
67
|
+
| **Core** | Button, Badge, Chip, Tag, Kbd, Divider, Spinner, FloatingActionButton |
|
|
68
|
+
| **Layout** | Container, Stack, Flex, Grid, AspectRatio, ScrollArea, SplitLayout, Masonry |
|
|
69
|
+
| **Typography** | Heading, Text, Label, Caption, Blockquote, Code, PullQuote, GradientText |
|
|
70
|
+
| **Form** | Input, PasswordInput, SearchInput, Textarea, Select, NumberInput, Slider, Checkbox, CheckboxGroup, Switch, SwitchGroup, RadioGroup, SegmentedControl, OTPInput, Rating, FormField, InputGroup |
|
|
71
|
+
| **Form Advanced** | DatePicker, TagInput, ComboBox, FileUpload, ColorPicker, PhoneInput, MaskInput, TreeSelect, PinInput, AutoComplete |
|
|
72
|
+
| **Data Display** | Table, Card, Avatar, Stat, Timeline, Progress, Skeleton, TreeView, DataList, List, AvatarGroup, TimeAgo, Countdown |
|
|
73
|
+
| **Feedback** | Toast, Alert, EmptyState, Banner, ConfirmDialog, Notification, Callout, LoadingOverlay |
|
|
74
|
+
| **Navigation** | Tabs, Breadcrumb, Pagination, Stepper, Navbar, NavMenu, AppSidebar, ScrollProgress |
|
|
75
|
+
| **Overlay** | Modal, Drawer, Tooltip, Popover, DropdownMenu, ContextMenu, CommandPalette, HoverCard, SheetDialog, Popconfirm |
|
|
76
|
+
| **Interaction** | Collapsible, InlineEdit |
|
|
77
|
+
| **Media & Chart** | Image, Carousel, VideoPlayer, LineChart, BarChart, AreaChart, DonutChart, SparkLine, ProgressRing, AnimatedCounter |
|
|
78
|
+
| **Utility** | CopyButton, ColorSwatch, Marquee, ReadMore, HighlightText, ScrollToTop, QRCode, ClipboardInput |
|
|
79
|
+
| **Special** | GlitchText, TypewriterText, NoiseBg, BrutalistCard |
|
|
80
|
+
| **Theme** | ThemeProvider |
|
|
81
|
+
| **Misc** | Accordion, Tour |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Design Tokens
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
Colors
|
|
89
|
+
fx-black #0a0a0a fx-white #fafafa
|
|
90
|
+
fx-yellow #FFE500 fx-pink #FF2D78
|
|
91
|
+
fx-green #00FF94 fx-blue #0066FF fx-purple #7C3AED
|
|
92
|
+
|
|
93
|
+
Shadows
|
|
94
|
+
shadow-fx-sm shadow-fx shadow-fx-lg shadow-fx-xl
|
|
95
|
+
shadow-fx-dark shadow-fx-dark-sm (dark mode)
|
|
96
|
+
|
|
97
|
+
Fonts
|
|
98
|
+
Space Grotesk (sans) Space Mono (mono)
|
|
99
|
+
Archivo Black (display)
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Neo-Brutalism Rules
|
|
105
|
+
|
|
106
|
+
Every FXUI component follows these rules — no exceptions:
|
|
107
|
+
|
|
108
|
+
| Rule | Value |
|
|
109
|
+
|------|-------|
|
|
110
|
+
| **Border** | `border-2 border-fx-black` · `dark:border-fx-white` |
|
|
111
|
+
| **Shadow** | `shadow-fx` → hover `shadow-fx-sm + translate(2px,2px)` → active `shadow-none + translate(4px,4px)` |
|
|
112
|
+
| **Radius** | `rounded-[4px]` maximum |
|
|
113
|
+
| **Transition** | `transition-all duration-150 ease-in-out` |
|
|
114
|
+
| **Dark mode** | `dark:` prefix throughout · `#fafafa` shadows |
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Resources
|
|
119
|
+
|
|
120
|
+
| | |
|
|
121
|
+
|---|---|
|
|
122
|
+
| 📖 **Docs** | [fxui-docs.vercel.app](https://fxui-docs.vercel.app) |
|
|
123
|
+
| 🎭 **Showcase** | [fxui-docs.vercel.app/showcase](https://fxui-docs.vercel.app/showcase) |
|
|
124
|
+
| 🧪 **Storybook** | Run `pnpm storybook` in the repo |
|
|
125
|
+
| 🐛 **Issues** | [github.com/wattarea/fxui/issues](https://github.com/wattarea/fxui/issues) |
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## Development
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
git clone https://github.com/wattarea/fxui.git
|
|
133
|
+
cd fxui
|
|
134
|
+
pnpm install
|
|
135
|
+
|
|
136
|
+
pnpm dev # Docs site at localhost:3000
|
|
137
|
+
pnpm storybook # Storybook at localhost:6006
|
|
138
|
+
pnpm build # Build all packages
|
|
139
|
+
pnpm type-check # TypeScript validation
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Contributing
|
|
145
|
+
|
|
146
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for component authoring guidelines and PR process.
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
MIT License · Built with sharp corners and zero apologies · 2024
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fxui-core",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "Neo-brutalist React UI component library",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"./styles": "./dist/styles/globals.css"
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
18
19
|
],
|
|
19
20
|
"scripts": {
|
|
20
21
|
"build": "tsup src/index.ts --format esm,cjs --dts --clean",
|