@lukeashford/aurelius 1.0.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.
- package/README.md +93 -0
- package/dist/chunk-7DDWFQNU.mjs +136 -0
- package/dist/chunk-7DDWFQNU.mjs.map +1 -0
- package/dist/chunk-OPJXDW4C.mjs +150 -0
- package/dist/chunk-OPJXDW4C.mjs.map +1 -0
- package/dist/index.d.mts +136 -0
- package/dist/index.d.ts +136 -0
- package/dist/index.js +816 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +505 -0
- package/dist/index.mjs.map +1 -0
- package/dist/llms.md +325 -0
- package/dist/styles/base.css +537 -0
- package/dist/styles/fonts/1Ptsg8zYS_SKggPNyCg4Q4FqL_KWxWMT.woff2 +0 -0
- package/dist/styles/fonts/1Ptsg8zYS_SKggPNyCg4QIFqL_KWxWMT.woff2 +0 -0
- package/dist/styles/fonts/1Ptsg8zYS_SKggPNyCg4QoFqL_KWxWMT.woff2 +0 -0
- package/dist/styles/fonts/1Ptsg8zYS_SKggPNyCg4SYFqL_KWxWMT.woff2 +0 -0
- package/dist/styles/fonts/1Ptsg8zYS_SKggPNyCg4TYFqL_KWxQ.woff2 +0 -0
- package/dist/styles/fonts/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2 +0 -0
- package/dist/styles/fonts/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2 +0 -0
- package/dist/styles/fonts/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2 +0 -0
- package/dist/styles/fonts/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2 +0 -0
- package/dist/styles/fonts/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2 +0 -0
- package/dist/styles/fonts/OFL_JetBrainsMono.txt +93 -0
- package/dist/styles/fonts/OFL_Marcellus.txt +93 -0
- package/dist/styles/fonts/OFL_Raleway.txt +93 -0
- package/dist/styles/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwgknk-6nFg.woff2 +0 -0
- package/dist/styles/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2 +0 -0
- package/dist/styles/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2 +0 -0
- package/dist/styles/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwgknk-6nFg.woff2 +0 -0
- package/dist/styles/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwgknk-6nFg.woff2 +0 -0
- package/dist/styles/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwgknk-6nFg.woff2 +0 -0
- package/dist/styles/fonts/wEO_EBrOk8hQLDvIAF81VvoK_kgXiQ.woff2 +0 -0
- package/dist/styles/fonts/wEO_EBrOk8hQLDvIAF81WPoK_kgXiYvO.woff2 +0 -0
- package/dist/styles/fonts.css +317 -0
- package/dist/tailwind.preset.d.mts +5 -0
- package/dist/tailwind.preset.d.ts +5 -0
- package/dist/tailwind.preset.js +288 -0
- package/dist/tailwind.preset.js.map +1 -0
- package/dist/tailwind.preset.mjs +8 -0
- package/dist/tailwind.preset.mjs.map +1 -0
- package/dist/tokens/index.d.mts +156 -0
- package/dist/tokens/index.d.ts +156 -0
- package/dist/tokens/index.js +182 -0
- package/dist/tokens/index.js.map +1 -0
- package/dist/tokens/index.mjs +19 -0
- package/dist/tokens/index.mjs.map +1 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Aurelius Design System
|
|
2
|
+
|
|
3
|
+
**A cohesive visual language for creative technologists — combining technical sophistication with an
|
|
4
|
+
artistic sensibility.**
|
|
5
|
+
|
|
6
|
+
[View the Live Demo](https://aurelius.lukeashford.com/)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## The Philosophy
|
|
11
|
+
|
|
12
|
+
Aurelius blends technical precision with a cinematic aesthetic, relying on deep blacks, rich golds,
|
|
13
|
+
and refined typography to convey stability, trust, and quiet luxury.
|
|
14
|
+
|
|
15
|
+
**Core Principles:**
|
|
16
|
+
|
|
17
|
+
1. **Cinematic:** Strict dark mode. No white backgrounds.
|
|
18
|
+
2. **Refined:** Gold (#c9a227) is reserved for primary actions.
|
|
19
|
+
3. **Grounded:** 1px subtle borders (`border-ash`) replace heavy drop shadows.
|
|
20
|
+
|
|
21
|
+
**Implementation Strategy:**
|
|
22
|
+
We follow a strict hierarchy:
|
|
23
|
+
|
|
24
|
+
1. **React Components** (`<Button />`) — *Always prefer these.*
|
|
25
|
+
2. **Component Classes** (`.btn`) — *Fallback for non-React.*
|
|
26
|
+
3. **Utility Classes** (`bg-obsidian`) — *For custom layouts.*
|
|
27
|
+
4. **Design Tokens** — *Last resort.*
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## AI Agent Support 🤖
|
|
32
|
+
|
|
33
|
+
This package is **AI-Optimized**. It includes a machine-readable manifest file that helps AI coding
|
|
34
|
+
assistants understand the design system without hallucinating styles.
|
|
35
|
+
|
|
36
|
+
**How to Prompt Your Agent:**
|
|
37
|
+
> "I have installed `@lukeashford/aurelius`. Before writing any code, read
|
|
38
|
+
`node_modules/@lukeashford/aurelius/dist/llms.md`. This file contains the Design Philosophy (
|
|
39
|
+
> which you must strictly follow) and the Component API you have available."
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Installation
|
|
44
|
+
|
|
45
|
+
### 1. Install Package
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm install @lukeashford/aurelius
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### 2. Configure Tailwind
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
// tailwind.config.js
|
|
55
|
+
const aureliusPreset = require('@lukeashford/aurelius/tailwind.preset')
|
|
56
|
+
|
|
57
|
+
module.exports = {
|
|
58
|
+
presets: [aureliusPreset],
|
|
59
|
+
content: [
|
|
60
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
61
|
+
'./node_modules/@lukeashford/aurelius/dist/**/*.{js,mjs}',
|
|
62
|
+
],
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 3. Import Styles
|
|
67
|
+
|
|
68
|
+
```css
|
|
69
|
+
/* In your global CSS */
|
|
70
|
+
@import '@lukeashford/aurelius/styles/base.css';
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Quick Start
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import {Button, Card, Input} from '@lukeashford/aurelius'
|
|
79
|
+
|
|
80
|
+
export function LoginForm() {
|
|
81
|
+
return (
|
|
82
|
+
<Card variant="featured" className="p-8 max-w-sm mx-auto">
|
|
83
|
+
<h2 className="text-gold text-2xl mb-6">Sign In</h2>
|
|
84
|
+
<div className="space-y-4">
|
|
85
|
+
<Input placeholder="email@example.com"/>
|
|
86
|
+
<Button variant="primary" className="w-full">
|
|
87
|
+
Enter the System
|
|
88
|
+
</Button>
|
|
89
|
+
</div>
|
|
90
|
+
</Card>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
```
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import {
|
|
2
|
+
colors,
|
|
3
|
+
duration,
|
|
4
|
+
easing,
|
|
5
|
+
radii,
|
|
6
|
+
shadows,
|
|
7
|
+
spacing,
|
|
8
|
+
typography
|
|
9
|
+
} from "./chunk-OPJXDW4C.mjs";
|
|
10
|
+
|
|
11
|
+
// src/tailwind.preset.ts
|
|
12
|
+
var preset = {
|
|
13
|
+
// Safelist color utilities used dynamically in the demo so Tailwind doesn't purge them
|
|
14
|
+
safelist: [
|
|
15
|
+
// Black spectrum
|
|
16
|
+
"bg-void",
|
|
17
|
+
"bg-obsidian",
|
|
18
|
+
"bg-charcoal",
|
|
19
|
+
"bg-graphite",
|
|
20
|
+
"bg-slate",
|
|
21
|
+
"bg-ash",
|
|
22
|
+
// Gold spectrum
|
|
23
|
+
"bg-gold",
|
|
24
|
+
"bg-gold-light",
|
|
25
|
+
"bg-gold-bright",
|
|
26
|
+
"bg-gold-muted",
|
|
27
|
+
"bg-gold-pale",
|
|
28
|
+
// Neutrals
|
|
29
|
+
"bg-white",
|
|
30
|
+
"bg-silver",
|
|
31
|
+
"bg-zinc",
|
|
32
|
+
"bg-dim",
|
|
33
|
+
// Semantic
|
|
34
|
+
"bg-success",
|
|
35
|
+
"bg-success-muted",
|
|
36
|
+
"bg-error",
|
|
37
|
+
"bg-error-muted",
|
|
38
|
+
"bg-warning",
|
|
39
|
+
"bg-warning-muted",
|
|
40
|
+
"bg-info",
|
|
41
|
+
"bg-info-muted"
|
|
42
|
+
],
|
|
43
|
+
theme: {
|
|
44
|
+
extend: {
|
|
45
|
+
colors: {
|
|
46
|
+
// Black spectrum
|
|
47
|
+
void: colors.void,
|
|
48
|
+
obsidian: colors.obsidian,
|
|
49
|
+
charcoal: colors.charcoal,
|
|
50
|
+
graphite: colors.graphite,
|
|
51
|
+
slate: colors.slate,
|
|
52
|
+
ash: colors.ash,
|
|
53
|
+
// Gold spectrum
|
|
54
|
+
gold: {
|
|
55
|
+
DEFAULT: colors.gold,
|
|
56
|
+
light: colors.goldLight,
|
|
57
|
+
bright: colors.goldBright,
|
|
58
|
+
muted: colors.goldMuted,
|
|
59
|
+
pale: colors.goldPale,
|
|
60
|
+
glow: colors.goldGlow
|
|
61
|
+
},
|
|
62
|
+
// Neutrals
|
|
63
|
+
white: colors.white,
|
|
64
|
+
silver: colors.silver,
|
|
65
|
+
zinc: colors.zinc,
|
|
66
|
+
dim: colors.dim,
|
|
67
|
+
// Semantic
|
|
68
|
+
success: {
|
|
69
|
+
DEFAULT: colors.success,
|
|
70
|
+
muted: colors.successMuted
|
|
71
|
+
},
|
|
72
|
+
error: {
|
|
73
|
+
DEFAULT: colors.error,
|
|
74
|
+
muted: colors.errorMuted
|
|
75
|
+
},
|
|
76
|
+
warning: {
|
|
77
|
+
DEFAULT: colors.warning,
|
|
78
|
+
muted: colors.warningMuted
|
|
79
|
+
},
|
|
80
|
+
info: {
|
|
81
|
+
DEFAULT: colors.info,
|
|
82
|
+
muted: colors.infoMuted
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
fontFamily: {
|
|
86
|
+
heading: typography.fontHeading,
|
|
87
|
+
body: typography.fontBody,
|
|
88
|
+
mono: typography.fontMono
|
|
89
|
+
},
|
|
90
|
+
fontSize: typography.fontSize,
|
|
91
|
+
fontWeight: typography.fontWeight,
|
|
92
|
+
lineHeight: typography.lineHeight,
|
|
93
|
+
letterSpacing: typography.letterSpacing,
|
|
94
|
+
spacing,
|
|
95
|
+
borderRadius: radii,
|
|
96
|
+
boxShadow: shadows,
|
|
97
|
+
transitionDuration: duration,
|
|
98
|
+
transitionTimingFunction: easing,
|
|
99
|
+
animation: {
|
|
100
|
+
"fade-in": "fade-in 200ms ease-out",
|
|
101
|
+
"fade-out": "fade-out 150ms ease-in",
|
|
102
|
+
"slide-in-right": `slide-in-right 300ms ${easing.smooth}`,
|
|
103
|
+
"slide-out-right": "slide-out-right 200ms ease-in",
|
|
104
|
+
"pulse-glow": "pulse-glow 2s ease-in-out infinite"
|
|
105
|
+
},
|
|
106
|
+
keyframes: {
|
|
107
|
+
"fade-in": {
|
|
108
|
+
"0%": { opacity: "0" },
|
|
109
|
+
"100%": { opacity: "1" }
|
|
110
|
+
},
|
|
111
|
+
"fade-out": {
|
|
112
|
+
"0%": { opacity: "1" },
|
|
113
|
+
"100%": { opacity: "0" }
|
|
114
|
+
},
|
|
115
|
+
"slide-in-right": {
|
|
116
|
+
"0%": { transform: "translateX(100%)", opacity: "0" },
|
|
117
|
+
"100%": { transform: "translateX(0)", opacity: "1" }
|
|
118
|
+
},
|
|
119
|
+
"slide-out-right": {
|
|
120
|
+
"0%": { transform: "translateX(0)", opacity: "1" },
|
|
121
|
+
"100%": { transform: "translateX(100%)", opacity: "0" }
|
|
122
|
+
},
|
|
123
|
+
"pulse-glow": {
|
|
124
|
+
"0%, 100%": { boxShadow: "0 0 20px rgba(201, 162, 39, 0.3)" },
|
|
125
|
+
"50%": { boxShadow: "0 0 30px rgba(201, 162, 39, 0.5)" }
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
var tailwind_preset_default = preset;
|
|
132
|
+
|
|
133
|
+
export {
|
|
134
|
+
tailwind_preset_default
|
|
135
|
+
};
|
|
136
|
+
//# sourceMappingURL=chunk-7DDWFQNU.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tailwind.preset.ts"],"sourcesContent":["import type {Config} from 'tailwindcss'\nimport {colors, spacing, typography, shadows, duration, easing, radii} from './tokens'\n\nconst preset: Partial<Config> = {\n // Safelist color utilities used dynamically in the demo so Tailwind doesn't purge them\n safelist: [\n // Black spectrum\n 'bg-void',\n 'bg-obsidian',\n 'bg-charcoal',\n 'bg-graphite',\n 'bg-slate',\n 'bg-ash',\n\n // Gold spectrum\n 'bg-gold',\n 'bg-gold-light',\n 'bg-gold-bright',\n 'bg-gold-muted',\n 'bg-gold-pale',\n\n // Neutrals\n 'bg-white',\n 'bg-silver',\n 'bg-zinc',\n 'bg-dim',\n\n // Semantic\n 'bg-success',\n 'bg-success-muted',\n 'bg-error',\n 'bg-error-muted',\n 'bg-warning',\n 'bg-warning-muted',\n 'bg-info',\n 'bg-info-muted',\n ],\n theme: {\n extend: {\n colors: {\n // Black spectrum\n void: colors.void,\n obsidian: colors.obsidian,\n charcoal: colors.charcoal,\n graphite: colors.graphite,\n slate: colors.slate,\n ash: colors.ash,\n\n // Gold spectrum\n gold: {\n DEFAULT: colors.gold,\n light: colors.goldLight,\n bright: colors.goldBright,\n muted: colors.goldMuted,\n pale: colors.goldPale,\n glow: colors.goldGlow,\n },\n\n // Neutrals\n white: colors.white,\n silver: colors.silver,\n zinc: colors.zinc,\n dim: colors.dim,\n\n // Semantic\n success: {\n DEFAULT: colors.success,\n muted: colors.successMuted,\n },\n error: {\n DEFAULT: colors.error,\n muted: colors.errorMuted,\n },\n warning: {\n DEFAULT: colors.warning,\n muted: colors.warningMuted,\n },\n info: {\n DEFAULT: colors.info,\n muted: colors.infoMuted,\n },\n },\n\n fontFamily: {\n heading: typography.fontHeading as unknown as string[],\n body: typography.fontBody as unknown as string[],\n mono: typography.fontMono as unknown as string[],\n },\n\n fontSize: typography.fontSize as any,\n fontWeight: typography.fontWeight as any,\n lineHeight: typography.lineHeight as any,\n letterSpacing: typography.letterSpacing as any,\n\n spacing: spacing as any,\n\n borderRadius: radii as any,\n\n boxShadow: shadows as any,\n\n transitionDuration: duration as any,\n\n transitionTimingFunction: easing as any,\n\n animation: {\n 'fade-in': 'fade-in 200ms ease-out',\n 'fade-out': 'fade-out 150ms ease-in',\n 'slide-in-right': `slide-in-right 300ms ${easing.smooth}`,\n 'slide-out-right': 'slide-out-right 200ms ease-in',\n 'pulse-glow': 'pulse-glow 2s ease-in-out infinite',\n },\n\n keyframes: {\n 'fade-in': {\n '0%': {opacity: '0'},\n '100%': {opacity: '1'},\n },\n 'fade-out': {\n '0%': {opacity: '1'},\n '100%': {opacity: '0'},\n },\n 'slide-in-right': {\n '0%': {transform: 'translateX(100%)', opacity: '0'},\n '100%': {transform: 'translateX(0)', opacity: '1'},\n },\n 'slide-out-right': {\n '0%': {transform: 'translateX(0)', opacity: '1'},\n '100%': {transform: 'translateX(100%)', opacity: '0'},\n },\n 'pulse-glow': {\n '0%, 100%': {boxShadow: '0 0 20px rgba(201, 162, 39, 0.3)'},\n '50%': {boxShadow: '0 0 30px rgba(201, 162, 39, 0.5)'},\n },\n },\n },\n },\n}\n\nexport default preset\n"],"mappings":";;;;;;;;;;;AAGA,IAAM,SAA0B;AAAA;AAAA,EAE9B,UAAU;AAAA;AAAA,IAER;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA;AAAA,QAEN,MAAM,OAAO;AAAA,QACb,UAAU,OAAO;AAAA,QACjB,UAAU,OAAO;AAAA,QACjB,UAAU,OAAO;AAAA,QACjB,OAAO,OAAO;AAAA,QACd,KAAK,OAAO;AAAA;AAAA,QAGZ,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,UACd,QAAQ,OAAO;AAAA,UACf,OAAO,OAAO;AAAA,UACd,MAAM,OAAO;AAAA,UACb,MAAM,OAAO;AAAA,QACf;AAAA;AAAA,QAGA,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,MAAM,OAAO;AAAA,QACb,KAAK,OAAO;AAAA;AAAA,QAGZ,SAAS;AAAA,UACP,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,UACL,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,UACP,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,MACF;AAAA,MAEA,YAAY;AAAA,QACV,SAAS,WAAW;AAAA,QACpB,MAAM,WAAW;AAAA,QACjB,MAAM,WAAW;AAAA,MACnB;AAAA,MAEA,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MACvB,YAAY,WAAW;AAAA,MACvB,eAAe,WAAW;AAAA,MAE1B;AAAA,MAEA,cAAc;AAAA,MAEd,WAAW;AAAA,MAEX,oBAAoB;AAAA,MAEpB,0BAA0B;AAAA,MAE1B,WAAW;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,kBAAkB,wBAAwB,OAAO,MAAM;AAAA,QACvD,mBAAmB;AAAA,QACnB,cAAc;AAAA,MAChB;AAAA,MAEA,WAAW;AAAA,QACT,WAAW;AAAA,UACT,MAAM,EAAC,SAAS,IAAG;AAAA,UACnB,QAAQ,EAAC,SAAS,IAAG;AAAA,QACvB;AAAA,QACA,YAAY;AAAA,UACV,MAAM,EAAC,SAAS,IAAG;AAAA,UACnB,QAAQ,EAAC,SAAS,IAAG;AAAA,QACvB;AAAA,QACA,kBAAkB;AAAA,UAChB,MAAM,EAAC,WAAW,oBAAoB,SAAS,IAAG;AAAA,UAClD,QAAQ,EAAC,WAAW,iBAAiB,SAAS,IAAG;AAAA,QACnD;AAAA,QACA,mBAAmB;AAAA,UACjB,MAAM,EAAC,WAAW,iBAAiB,SAAS,IAAG;AAAA,UAC/C,QAAQ,EAAC,WAAW,oBAAoB,SAAS,IAAG;AAAA,QACtD;AAAA,QACA,cAAc;AAAA,UACZ,YAAY,EAAC,WAAW,mCAAkC;AAAA,UAC1D,OAAO,EAAC,WAAW,mCAAkC;AAAA,QACvD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,0BAAQ;","names":[]}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
// src/tokens/colors.ts
|
|
2
|
+
var colors = {
|
|
3
|
+
// Black spectrum
|
|
4
|
+
void: "#000000",
|
|
5
|
+
obsidian: "#0a0a0a",
|
|
6
|
+
charcoal: "#141414",
|
|
7
|
+
graphite: "#1f1f1f",
|
|
8
|
+
slate: "#2a2a2a",
|
|
9
|
+
ash: "#3d3d3d",
|
|
10
|
+
// Gold spectrum
|
|
11
|
+
gold: "#c9a227",
|
|
12
|
+
goldLight: "#d4b84a",
|
|
13
|
+
goldBright: "#e5c84d",
|
|
14
|
+
goldMuted: "#8b7355",
|
|
15
|
+
goldPale: "#d4c4a8",
|
|
16
|
+
goldGlow: "rgba(201, 162, 39, 0.15)",
|
|
17
|
+
// Neutrals
|
|
18
|
+
white: "#ffffff",
|
|
19
|
+
silver: "#a3a3a3",
|
|
20
|
+
zinc: "#71717a",
|
|
21
|
+
dim: "#52525b",
|
|
22
|
+
// Semantic
|
|
23
|
+
success: "#22c55e",
|
|
24
|
+
successMuted: "#166534",
|
|
25
|
+
error: "#dc2626",
|
|
26
|
+
errorMuted: "#991b1b",
|
|
27
|
+
warning: "#d97706",
|
|
28
|
+
warningMuted: "#92400e",
|
|
29
|
+
info: "#0ea5e9",
|
|
30
|
+
infoMuted: "#0369a1"
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// src/tokens/typography.ts
|
|
34
|
+
var typography = {
|
|
35
|
+
// Headings use Marcellus, a classic serif
|
|
36
|
+
fontHeading: ["Marcellus", "serif"],
|
|
37
|
+
// Body and UI use Raleway
|
|
38
|
+
fontBody: ["Raleway", "system-ui", "sans-serif"],
|
|
39
|
+
fontMono: ["JetBrains Mono", "Fira Code", "SF Mono", "monospace"],
|
|
40
|
+
fontSize: {
|
|
41
|
+
xs: ["0.75rem", { lineHeight: "1rem" }],
|
|
42
|
+
sm: ["0.875rem", { lineHeight: "1.25rem" }],
|
|
43
|
+
base: ["1rem", { lineHeight: "1.5rem" }],
|
|
44
|
+
lg: ["1.125rem", { lineHeight: "1.75rem" }],
|
|
45
|
+
xl: ["1.25rem", { lineHeight: "1.75rem" }],
|
|
46
|
+
"2xl": ["1.5rem", { lineHeight: "2rem" }],
|
|
47
|
+
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
|
|
48
|
+
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
|
|
49
|
+
"5xl": ["3rem", { lineHeight: "1" }],
|
|
50
|
+
"6xl": ["3.75rem", { lineHeight: "1" }]
|
|
51
|
+
},
|
|
52
|
+
fontWeight: {
|
|
53
|
+
normal: "400",
|
|
54
|
+
medium: "500",
|
|
55
|
+
semibold: "600",
|
|
56
|
+
bold: "700"
|
|
57
|
+
},
|
|
58
|
+
lineHeight: {
|
|
59
|
+
none: "1",
|
|
60
|
+
tight: "1.25",
|
|
61
|
+
snug: "1.375",
|
|
62
|
+
normal: "1.5",
|
|
63
|
+
relaxed: "1.625",
|
|
64
|
+
loose: "2"
|
|
65
|
+
},
|
|
66
|
+
letterSpacing: {
|
|
67
|
+
tighter: "-0.05em",
|
|
68
|
+
tight: "-0.025em",
|
|
69
|
+
normal: "0",
|
|
70
|
+
wide: "0.025em",
|
|
71
|
+
wider: "0.05em",
|
|
72
|
+
widest: "0.1em"
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
// src/tokens/spacing.ts
|
|
77
|
+
var spacing = {
|
|
78
|
+
px: "1px",
|
|
79
|
+
0: "0",
|
|
80
|
+
0.5: "0.125rem",
|
|
81
|
+
1: "0.25rem",
|
|
82
|
+
1.5: "0.375rem",
|
|
83
|
+
2: "0.5rem",
|
|
84
|
+
2.5: "0.625rem",
|
|
85
|
+
3: "0.75rem",
|
|
86
|
+
3.5: "0.875rem",
|
|
87
|
+
4: "1rem",
|
|
88
|
+
5: "1.25rem",
|
|
89
|
+
6: "1.5rem",
|
|
90
|
+
7: "1.75rem",
|
|
91
|
+
8: "2rem",
|
|
92
|
+
9: "2.25rem",
|
|
93
|
+
10: "2.5rem",
|
|
94
|
+
11: "2.75rem",
|
|
95
|
+
12: "3rem",
|
|
96
|
+
14: "3.5rem",
|
|
97
|
+
16: "4rem",
|
|
98
|
+
20: "5rem",
|
|
99
|
+
24: "6rem",
|
|
100
|
+
28: "7rem",
|
|
101
|
+
32: "8rem"
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
// src/tokens/shadows.ts
|
|
105
|
+
var shadows = {
|
|
106
|
+
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
|
|
107
|
+
md: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
|
|
108
|
+
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
|
|
109
|
+
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
|
|
110
|
+
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
|
111
|
+
glow: "0 0 20px rgba(201, 162, 39, 0.3)",
|
|
112
|
+
"glow-sm": "0 0 10px rgba(201, 162, 39, 0.2)",
|
|
113
|
+
"glow-lg": "0 0 40px rgba(201, 162, 39, 0.4)",
|
|
114
|
+
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.3)"
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
// src/tokens/transitions.ts
|
|
118
|
+
var duration = {
|
|
119
|
+
instant: "75ms",
|
|
120
|
+
fast: "150ms",
|
|
121
|
+
normal: "200ms",
|
|
122
|
+
slow: "300ms",
|
|
123
|
+
slower: "500ms"
|
|
124
|
+
};
|
|
125
|
+
var easing = {
|
|
126
|
+
smooth: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
127
|
+
snap: "cubic-bezier(0.5, 0, 0.1, 1)"
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
// src/tokens/radii.ts
|
|
131
|
+
var radii = {
|
|
132
|
+
sm: "0.125rem",
|
|
133
|
+
md: "0.25rem",
|
|
134
|
+
lg: "0.375rem",
|
|
135
|
+
xl: "0.5rem",
|
|
136
|
+
"2xl": "0.75rem",
|
|
137
|
+
"3xl": "1rem",
|
|
138
|
+
full: "9999px"
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export {
|
|
142
|
+
colors,
|
|
143
|
+
typography,
|
|
144
|
+
spacing,
|
|
145
|
+
shadows,
|
|
146
|
+
duration,
|
|
147
|
+
easing,
|
|
148
|
+
radii
|
|
149
|
+
};
|
|
150
|
+
//# sourceMappingURL=chunk-OPJXDW4C.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens/colors.ts","../src/tokens/typography.ts","../src/tokens/spacing.ts","../src/tokens/shadows.ts","../src/tokens/transitions.ts","../src/tokens/radii.ts"],"sourcesContent":["export const colors = {\n // Black spectrum\n void: '#000000',\n obsidian: '#0a0a0a',\n charcoal: '#141414',\n graphite: '#1f1f1f',\n slate: '#2a2a2a',\n ash: '#3d3d3d',\n\n // Gold spectrum\n gold: '#c9a227',\n goldLight: '#d4b84a',\n goldBright: '#e5c84d',\n goldMuted: '#8b7355',\n goldPale: '#d4c4a8',\n goldGlow: 'rgba(201, 162, 39, 0.15)',\n\n // Neutrals\n white: '#ffffff',\n silver: '#a3a3a3',\n zinc: '#71717a',\n dim: '#52525b',\n\n // Semantic\n success: '#22c55e',\n successMuted: '#166534',\n error: '#dc2626',\n errorMuted: '#991b1b',\n warning: '#d97706',\n warningMuted: '#92400e',\n info: '#0ea5e9',\n infoMuted: '#0369a1',\n} as const\n\nexport type ColorToken = keyof typeof colors\n","export const typography = {\n // Headings use Marcellus, a classic serif\n fontHeading: ['Marcellus', 'serif'],\n // Body and UI use Raleway\n fontBody: ['Raleway', 'system-ui', 'sans-serif'],\n fontMono: ['JetBrains Mono', 'Fira Code', 'SF Mono', 'monospace'],\n\n fontSize: {\n xs: ['0.75rem', {lineHeight: '1rem'}],\n sm: ['0.875rem', {lineHeight: '1.25rem'}],\n base: ['1rem', {lineHeight: '1.5rem'}],\n lg: ['1.125rem', {lineHeight: '1.75rem'}],\n xl: ['1.25rem', {lineHeight: '1.75rem'}],\n '2xl': ['1.5rem', {lineHeight: '2rem'}],\n '3xl': ['1.875rem', {lineHeight: '2.25rem'}],\n '4xl': ['2.25rem', {lineHeight: '2.5rem'}],\n '5xl': ['3rem', {lineHeight: '1'}],\n '6xl': ['3.75rem', {lineHeight: '1'}],\n },\n\n fontWeight: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n\n lineHeight: {\n none: '1',\n tight: '1.25',\n snug: '1.375',\n normal: '1.5',\n relaxed: '1.625',\n loose: '2',\n },\n\n letterSpacing: {\n tighter: '-0.05em',\n tight: '-0.025em',\n normal: '0',\n wide: '0.025em',\n wider: '0.05em',\n widest: '0.1em',\n },\n} as const\n\nexport type TypographyToken = keyof typeof typography\n","export const spacing = {\n px: '1px',\n 0: '0',\n 0.5: '0.125rem',\n 1: '0.25rem',\n 1.5: '0.375rem',\n 2: '0.5rem',\n 2.5: '0.625rem',\n 3: '0.75rem',\n 3.5: '0.875rem',\n 4: '1rem',\n 5: '1.25rem',\n 6: '1.5rem',\n 7: '1.75rem',\n 8: '2rem',\n 9: '2.25rem',\n 10: '2.5rem',\n 11: '2.75rem',\n 12: '3rem',\n 14: '3.5rem',\n 16: '4rem',\n 20: '5rem',\n 24: '6rem',\n 28: '7rem',\n 32: '8rem',\n} as const\n\nexport type SpacingToken = keyof typeof spacing\n","export const shadows = {\r\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\r\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3)',\r\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3)',\r\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\r\n '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.5)',\r\n glow: '0 0 20px rgba(201, 162, 39, 0.3)',\r\n 'glow-sm': '0 0 10px rgba(201, 162, 39, 0.2)',\r\n 'glow-lg': '0 0 40px rgba(201, 162, 39, 0.4)',\r\n inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.3)',\r\n} as const\r\n\r\nexport type ShadowToken = keyof typeof shadows\r\n","export const duration = {\r\n instant: '75ms',\r\n fast: '150ms',\r\n normal: '200ms',\r\n slow: '300ms',\r\n slower: '500ms',\r\n} as const\r\n\r\nexport const easing = {\r\n smooth: 'cubic-bezier(0.16, 1, 0.3, 1)',\r\n snap: 'cubic-bezier(0.5, 0, 0.1, 1)',\r\n} as const\r\n\r\nexport type DurationToken = keyof typeof duration\r\nexport type EasingToken = keyof typeof easing\r\n","export const radii = {\r\n sm: '0.125rem',\r\n md: '0.25rem',\r\n lg: '0.375rem',\r\n xl: '0.5rem',\r\n '2xl': '0.75rem',\r\n '3xl': '1rem',\r\n full: '9999px',\r\n} as const\r\n\r\nexport type RadiusToken = keyof typeof radii\r\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
export { default as tailwindPreset } from './tailwind.preset.mjs';
|
|
2
|
+
export { ColorToken, DurationToken, EasingToken, RadiusToken, ShadowToken, SpacingToken, TypographyToken, colors, duration, easing, radii, shadows, spacing, typography } from './tokens/index.mjs';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import 'tailwindcss';
|
|
5
|
+
|
|
6
|
+
type ButtonVariant = 'primary' | 'important' | 'elevated' | 'outlined' | 'featured' | 'ghost' | 'danger';
|
|
7
|
+
type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
8
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
9
|
+
variant?: ButtonVariant;
|
|
10
|
+
size?: ButtonSize;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
|
|
15
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
16
|
+
error?: boolean;
|
|
17
|
+
leadingIcon?: React.ReactNode;
|
|
18
|
+
trailingIcon?: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
21
|
+
|
|
22
|
+
type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'featured';
|
|
23
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
24
|
+
variant?: CardVariant;
|
|
25
|
+
interactive?: boolean;
|
|
26
|
+
}
|
|
27
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
|
|
29
|
+
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
30
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
31
|
+
src?: string;
|
|
32
|
+
alt?: string;
|
|
33
|
+
name?: string;
|
|
34
|
+
size?: AvatarSize;
|
|
35
|
+
status?: 'online' | 'offline' | 'busy';
|
|
36
|
+
}
|
|
37
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
|
|
39
|
+
type BadgeVariant = 'default' | 'gold' | 'success' | 'error' | 'warning' | 'info';
|
|
40
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
41
|
+
variant?: BadgeVariant;
|
|
42
|
+
}
|
|
43
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
44
|
+
|
|
45
|
+
interface TooltipProps {
|
|
46
|
+
content: React.ReactNode;
|
|
47
|
+
children: React.ReactElement;
|
|
48
|
+
open?: boolean;
|
|
49
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
50
|
+
}
|
|
51
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
52
|
+
|
|
53
|
+
interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
54
|
+
required?: boolean;
|
|
55
|
+
}
|
|
56
|
+
declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
57
|
+
|
|
58
|
+
interface HelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
59
|
+
error?: boolean;
|
|
60
|
+
}
|
|
61
|
+
declare const HelperText: React.ForwardRefExoticComponent<HelperTextProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
62
|
+
|
|
63
|
+
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
64
|
+
error?: boolean;
|
|
65
|
+
}
|
|
66
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
67
|
+
|
|
68
|
+
interface SelectOption {
|
|
69
|
+
label: string;
|
|
70
|
+
value: string | number;
|
|
71
|
+
}
|
|
72
|
+
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
73
|
+
error?: boolean;
|
|
74
|
+
options?: SelectOption[];
|
|
75
|
+
}
|
|
76
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
77
|
+
|
|
78
|
+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
79
|
+
label?: string;
|
|
80
|
+
}
|
|
81
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
82
|
+
|
|
83
|
+
interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
84
|
+
label?: string;
|
|
85
|
+
}
|
|
86
|
+
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
87
|
+
|
|
88
|
+
interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
89
|
+
checked?: boolean;
|
|
90
|
+
defaultChecked?: boolean;
|
|
91
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
92
|
+
label?: string;
|
|
93
|
+
}
|
|
94
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
95
|
+
|
|
96
|
+
type AlertVariant = 'info' | 'success' | 'warning' | 'error';
|
|
97
|
+
interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
98
|
+
variant?: AlertVariant;
|
|
99
|
+
title?: string;
|
|
100
|
+
}
|
|
101
|
+
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
|
|
102
|
+
|
|
103
|
+
interface SpinnerProps extends React.SVGAttributes<SVGElement> {
|
|
104
|
+
size?: 'sm' | 'md' | 'lg';
|
|
105
|
+
}
|
|
106
|
+
declare const Spinner: {
|
|
107
|
+
({ className, size, ...rest }: SpinnerProps): React.JSX.Element;
|
|
108
|
+
displayName: string;
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
112
|
+
}
|
|
113
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
114
|
+
|
|
115
|
+
interface ModalProps {
|
|
116
|
+
isOpen: boolean;
|
|
117
|
+
onClose: () => void;
|
|
118
|
+
title?: string;
|
|
119
|
+
children: React.ReactNode;
|
|
120
|
+
className?: string;
|
|
121
|
+
}
|
|
122
|
+
declare const Modal: {
|
|
123
|
+
({ isOpen, onClose, title, children, className }: ModalProps): React.ReactPortal | null;
|
|
124
|
+
displayName: string;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Aurelius Design System
|
|
129
|
+
*
|
|
130
|
+
* A cohesive visual language for creative technologists.
|
|
131
|
+
* Combines technical sophistication with artistic sensibility.
|
|
132
|
+
*/
|
|
133
|
+
|
|
134
|
+
declare const version = "1.0.0";
|
|
135
|
+
|
|
136
|
+
export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, HelperText, type HelperTextProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, version };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
export { default as tailwindPreset } from './tailwind.preset.js';
|
|
2
|
+
export { ColorToken, DurationToken, EasingToken, RadiusToken, ShadowToken, SpacingToken, TypographyToken, colors, duration, easing, radii, shadows, spacing, typography } from './tokens/index.js';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import 'tailwindcss';
|
|
5
|
+
|
|
6
|
+
type ButtonVariant = 'primary' | 'important' | 'elevated' | 'outlined' | 'featured' | 'ghost' | 'danger';
|
|
7
|
+
type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
8
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
9
|
+
variant?: ButtonVariant;
|
|
10
|
+
size?: ButtonSize;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
|
|
15
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
16
|
+
error?: boolean;
|
|
17
|
+
leadingIcon?: React.ReactNode;
|
|
18
|
+
trailingIcon?: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
21
|
+
|
|
22
|
+
type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'featured';
|
|
23
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
24
|
+
variant?: CardVariant;
|
|
25
|
+
interactive?: boolean;
|
|
26
|
+
}
|
|
27
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
|
|
29
|
+
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
30
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
31
|
+
src?: string;
|
|
32
|
+
alt?: string;
|
|
33
|
+
name?: string;
|
|
34
|
+
size?: AvatarSize;
|
|
35
|
+
status?: 'online' | 'offline' | 'busy';
|
|
36
|
+
}
|
|
37
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
|
|
39
|
+
type BadgeVariant = 'default' | 'gold' | 'success' | 'error' | 'warning' | 'info';
|
|
40
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
41
|
+
variant?: BadgeVariant;
|
|
42
|
+
}
|
|
43
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
44
|
+
|
|
45
|
+
interface TooltipProps {
|
|
46
|
+
content: React.ReactNode;
|
|
47
|
+
children: React.ReactElement;
|
|
48
|
+
open?: boolean;
|
|
49
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
50
|
+
}
|
|
51
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
52
|
+
|
|
53
|
+
interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
54
|
+
required?: boolean;
|
|
55
|
+
}
|
|
56
|
+
declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
57
|
+
|
|
58
|
+
interface HelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
59
|
+
error?: boolean;
|
|
60
|
+
}
|
|
61
|
+
declare const HelperText: React.ForwardRefExoticComponent<HelperTextProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
62
|
+
|
|
63
|
+
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
64
|
+
error?: boolean;
|
|
65
|
+
}
|
|
66
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
67
|
+
|
|
68
|
+
interface SelectOption {
|
|
69
|
+
label: string;
|
|
70
|
+
value: string | number;
|
|
71
|
+
}
|
|
72
|
+
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
73
|
+
error?: boolean;
|
|
74
|
+
options?: SelectOption[];
|
|
75
|
+
}
|
|
76
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
77
|
+
|
|
78
|
+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
79
|
+
label?: string;
|
|
80
|
+
}
|
|
81
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
82
|
+
|
|
83
|
+
interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
84
|
+
label?: string;
|
|
85
|
+
}
|
|
86
|
+
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
87
|
+
|
|
88
|
+
interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
89
|
+
checked?: boolean;
|
|
90
|
+
defaultChecked?: boolean;
|
|
91
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
92
|
+
label?: string;
|
|
93
|
+
}
|
|
94
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
95
|
+
|
|
96
|
+
type AlertVariant = 'info' | 'success' | 'warning' | 'error';
|
|
97
|
+
interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
98
|
+
variant?: AlertVariant;
|
|
99
|
+
title?: string;
|
|
100
|
+
}
|
|
101
|
+
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
|
|
102
|
+
|
|
103
|
+
interface SpinnerProps extends React.SVGAttributes<SVGElement> {
|
|
104
|
+
size?: 'sm' | 'md' | 'lg';
|
|
105
|
+
}
|
|
106
|
+
declare const Spinner: {
|
|
107
|
+
({ className, size, ...rest }: SpinnerProps): React.JSX.Element;
|
|
108
|
+
displayName: string;
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
112
|
+
}
|
|
113
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
114
|
+
|
|
115
|
+
interface ModalProps {
|
|
116
|
+
isOpen: boolean;
|
|
117
|
+
onClose: () => void;
|
|
118
|
+
title?: string;
|
|
119
|
+
children: React.ReactNode;
|
|
120
|
+
className?: string;
|
|
121
|
+
}
|
|
122
|
+
declare const Modal: {
|
|
123
|
+
({ isOpen, onClose, title, children, className }: ModalProps): React.ReactPortal | null;
|
|
124
|
+
displayName: string;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Aurelius Design System
|
|
129
|
+
*
|
|
130
|
+
* A cohesive visual language for creative technologists.
|
|
131
|
+
* Combines technical sophistication with artistic sensibility.
|
|
132
|
+
*/
|
|
133
|
+
|
|
134
|
+
declare const version = "1.0.0";
|
|
135
|
+
|
|
136
|
+
export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, HelperText, type HelperTextProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, version };
|