@crimson_/altarev 1.1.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 (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +155 -0
  3. package/dist/index.cjs +3011 -0
  4. package/dist/index.d.cts +527 -0
  5. package/dist/index.d.ts +527 -0
  6. package/dist/index.js +2951 -0
  7. package/dist/styles.css +2 -0
  8. package/llms.txt +132 -0
  9. package/package.json +87 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 kfajardo
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,155 @@
1
+ # altarev
2
+
3
+ A React + TypeScript + Tailwind CSS v4 component library. 37 accessible, themeable components built on native HTML elements.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install altarev
9
+ ```
10
+
11
+ `react` and `react-dom` (v18+) are peer dependencies.
12
+
13
+ ## Setup
14
+
15
+ Import the stylesheet once, at the root of your app. **Without this, components render unstyled.**
16
+
17
+ ```ts
18
+ import "altarev/styles.css";
19
+ ```
20
+
21
+ Then use any component:
22
+
23
+ ```tsx
24
+ import { Button, TextInput, Tooltip } from "altarev";
25
+
26
+ export function Example() {
27
+ return (
28
+ <Tooltip content="Saves your changes">
29
+ <Button>Save</Button>
30
+ </Tooltip>
31
+ );
32
+ }
33
+ ```
34
+
35
+ The stylesheet ships the full design-token layer (colors, type scale, spacing) as CSS custom properties, so it is self-contained — you do **not** need Tailwind installed in your app to consume altarev.
36
+
37
+ ## Theming — use your own design tokens
38
+
39
+ Every color in altarev resolves through a CSS custom property at runtime. To re-theme the entire library, **you override the property values. You never touch the component class names.** This is the whole contract:
40
+
41
+ - **You control the _values_** (the hex codes, the font).
42
+ - **altarev controls the _names_** (`--color-primary`, `bg-primary`, …) so every component stays consistent.
43
+
44
+ ### The one rule
45
+
46
+ > **Declare your overrides in a plain `:root` block, _after_ the `altarev/styles.css` import.**
47
+
48
+ That's it. altarev's defaults live in a CSS cascade layer (`@layer altarev.tokens`), and by the CSS spec **any un-layered `:root` you write automatically wins** — no `!important`, no specificity tricks, no build config. Order in the file is what matters: your block comes after the import.
49
+
50
+ ### Minimal example
51
+
52
+ ```css
53
+ /* your app's global stylesheet, e.g. globals.css */
54
+ @import "altarev/styles.css";
55
+
56
+ :root {
57
+ --color-primary: #e11d48; /* your brand color */
58
+ --color-surface: #fffaf5;
59
+ --color-text: #1a1208;
60
+ }
61
+ ```
62
+
63
+ That single block retints `bg-primary`, `text-primary`, `border-primary`, the focus rings, and every other primary usage across all 37 components. Same for the other tokens.
64
+
65
+ > If you import CSS through a bundler instead of a stylesheet, do the same thing in any global CSS that loads after the altarev import:
66
+ >
67
+ > ```ts
68
+ > import "altarev/styles.css";
69
+ > import "./theme.css"; // your :root overrides
70
+ > ```
71
+
72
+ ### Dark mode
73
+
74
+ Theming flips on a `.dark` class anywhere up the tree (usually `<html>` or `<body>`):
75
+
76
+ ```html
77
+ <html class="dark"></html>
78
+ ```
79
+
80
+ Every token ships a light value (`:root`) and a dark value (`.dark`). To override the dark palette too, add a matching un-layered `.dark` block after the import:
81
+
82
+ ```css
83
+ @import "altarev/styles.css";
84
+
85
+ :root {
86
+ --color-primary: #e11d48;
87
+ }
88
+ .dark {
89
+ --color-primary: #fb7185; /* lighter for dark backgrounds */
90
+ }
91
+ ```
92
+
93
+ ### Every token you can override
94
+
95
+ Colors (each is a normal CSS color — hex, `rgb()`, `oklch()`, anything):
96
+
97
+ | Token | Role |
98
+ | ------------------------------------------ | ---------------------------------------- |
99
+ | `--color-primary` | Primary / brand actions, focus rings |
100
+ | `--color-primary-tint` | Faded primary (hover fills, range bands) |
101
+ | `--color-accent` | Secondary accent |
102
+ | `--color-background` | App background |
103
+ | `--color-surface` | Card / panel surface |
104
+ | `--color-surface-raised` | Elevated surface |
105
+ | `--color-text` | Primary text |
106
+ | `--color-text-muted` | Secondary / placeholder text |
107
+ | `--color-border` | Borders, dividers |
108
+ | `--color-overlay` | Modal / drawer scrim |
109
+ | `--color-hover` | Generic hover wash |
110
+ | `--color-success` / `--color-success-tint` | Success status |
111
+ | `--color-error` / `--color-error-tint` | Error status |
112
+ | `--color-warning` / `--color-warning-tint` | Warning status |
113
+ | `--color-info` / `--color-info-tint` | Info status |
114
+ | `--color-input-error` | Invalid form field border |
115
+
116
+ Typography — override the font with `--font-altarev-sans`:
117
+
118
+ ```css
119
+ :root {
120
+ --font-altarev-sans: "Inter", system-ui, sans-serif;
121
+ }
122
+ ```
123
+
124
+ The type **scale** (`--text-xs` … `--text-8xl`, with line-heights) is part of the architecture and intentionally fixed, so spacing stays consistent across the system. Override font family, not the scale.
125
+
126
+ ### Do / Don't
127
+
128
+ ✅ **Do** override token _values_ in an un-layered `:root` / `.dark` after the import.
129
+ ✅ **Do** use any valid CSS color syntax (`#hex`, `rgb()`, `hsl()`, `oklch()`).
130
+
131
+ ❌ **Don't** wrap your overrides in `@layer` — that puts them back in competition with altarev's defaults and they may not win. Plain `:root` is what makes it bulletproof.
132
+ ❌ **Don't** edit or re-map the Tailwind utility names (`bg-primary`, etc.) or the `@theme` block — those are the contract that keeps components consistent. Change the value the name points to instead.
133
+ ❌ **Don't** rename tokens. A typo like `--color-primry` silently does nothing; the component keeps the default. Copy names from the table above.
134
+
135
+ ## Server Components / Next.js App Router
136
+
137
+ All components are client components and ship with the `"use client"` directive, so they work when imported directly into Server Components without extra wrapping.
138
+
139
+ ## Date components
140
+
141
+ `Calendar`, `DateRangePicker`, and `TimePicker` build on [react-day-picker](https://daypicker.dev), which is an **optional** peer dependency. If you use any of them, install it:
142
+
143
+ ```bash
144
+ npm install react-day-picker
145
+ ```
146
+
147
+ The other 34 components have no such requirement.
148
+
149
+ ## Components
150
+
151
+ Accordion · Alert · AuthCode · Avatar · Breadcrumbs · Button · Calendar · Carousel · Checkbox · Chip · Combobox · Container · DateRangePicker · Drawer · Dropdown · EmptyState · Loader · Modal · Pagination · Popover · Progress · QuarterPicker · Radio · Search · SegmentedControl · Select · Sidebar · Snackbar · Switch · Table · Tabs · Tag · TextInput · TextInputGroup · Textarea · TimePicker · Tooltip
152
+
153
+ ## License
154
+
155
+ [MIT](./LICENSE)