@m3000/market 0.0.2 → 0.0.3
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/globals.css +39 -0
- package/dist/theme/animation.css +11 -0
- package/dist/theme/color.css +185 -0
- package/dist/theme/index.css +3 -0
- package/dist/theme/typography.css +3 -0
- package/dist/theme.css +3 -0
- package/dist/utility.css +8 -0
- package/package.json +3 -3
- package/dist/tokens.css +0 -2
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# @m3000/market
|
|
2
|
+
|
|
3
|
+
Design system for building interfaces shaped by price, time, and competition.
|
|
4
|
+
|
|
5
|
+
The package has two layers:
|
|
6
|
+
|
|
7
|
+
- **primitives**: buttons, price display, countdown timers, inputs, and more
|
|
8
|
+
- **blocks**: higher-level composed components for e.g. auctions, purchase flows
|
|
9
|
+
|
|
10
|
+
Built on React 19, Tailwind CSS 4, and Base UI.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @m3000/market
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Peer dependencies:
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install react react-dom tailwindcss
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Styles
|
|
25
|
+
|
|
26
|
+
Import the compiled stylesheet once in your app entry:
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import "@m3000/market/styles.css";
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Two CSS exports are available:
|
|
33
|
+
|
|
34
|
+
- `@m3000/market/styles.css` — full stylesheet with components and theme tokens. Recommended for most projects.
|
|
35
|
+
- `@m3000/market/theme.css` — theme variables only, if you want to integrate with your own Tailwind pipeline.
|
|
36
|
+
|
|
37
|
+
## Usage
|
|
38
|
+
|
|
39
|
+
### Primitives
|
|
40
|
+
|
|
41
|
+
Import components directly:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Button, Price, Countdown, Tag } from "@m3000/market";
|
|
45
|
+
|
|
46
|
+
<Price value={1500000n} symbol="ETH" />
|
|
47
|
+
<Countdown target={new Date("2025-12-31")} />
|
|
48
|
+
<Button variant="primary">Place bid</Button>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Auction block
|
|
52
|
+
|
|
53
|
+
The auction block is a suite of composed components backed by a context provider. Wire up your data and blockchain callbacks at the provider level; child components consume them automatically.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import {
|
|
57
|
+
AuctionProvider,
|
|
58
|
+
AuctionLayout,
|
|
59
|
+
AuctionInfo,
|
|
60
|
+
AuctionBidForm,
|
|
61
|
+
AuctionRankings,
|
|
62
|
+
} from "@m3000/market";
|
|
63
|
+
|
|
64
|
+
<AuctionProvider
|
|
65
|
+
auction={auction}
|
|
66
|
+
bids={bids}
|
|
67
|
+
userBids={userBids}
|
|
68
|
+
callbacks={{
|
|
69
|
+
onPlaceBid: async (price, qty) => {
|
|
70
|
+
// call your contract
|
|
71
|
+
return true;
|
|
72
|
+
},
|
|
73
|
+
onTopUpBid: async (bidId, newPrice, extra) => {
|
|
74
|
+
// call your contract
|
|
75
|
+
return true;
|
|
76
|
+
},
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
<AuctionLayout>
|
|
80
|
+
<AuctionInfo />
|
|
81
|
+
<AuctionBidForm />
|
|
82
|
+
<AuctionRankings />
|
|
83
|
+
</AuctionLayout>
|
|
84
|
+
</AuctionProvider>;
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## TypeScript
|
|
88
|
+
|
|
89
|
+
Fully typed. All price and quantity values use native `bigint` — no string-coerced numbers. Key types are exported directly from the package: `AuctionData`, `AuctionBid`, `AuctionUserBid`, `AuctionCallbacks`, `AuctionFormatters`, and more.
|
|
90
|
+
|
|
91
|
+
## License
|
|
92
|
+
|
|
93
|
+
MIT
|
package/dist/globals.css
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
html,
|
|
2
|
+
body {
|
|
3
|
+
-webkit-font-smoothing: antialiased;
|
|
4
|
+
background-color: var(--color-background);
|
|
5
|
+
color: var(--color-foreground);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
kbd {
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
min-width: 1.5rem;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
|
|
14
|
+
border-bottom-color: color-mix(
|
|
15
|
+
in srgb,
|
|
16
|
+
var(--color-input) 92%,
|
|
17
|
+
var(--color-border)
|
|
18
|
+
);
|
|
19
|
+
border-radius: 0.45rem;
|
|
20
|
+
background: linear-gradient(
|
|
21
|
+
180deg,
|
|
22
|
+
color-mix(in srgb, var(--color-background) 92%, var(--color-muted)) 0%,
|
|
23
|
+
color-mix(in srgb, var(--color-muted) 82%, var(--color-background)) 100%
|
|
24
|
+
);
|
|
25
|
+
box-shadow:
|
|
26
|
+
inset 0 1px 0 color-mix(in srgb, var(--color-white) 65%, transparent),
|
|
27
|
+
0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent),
|
|
28
|
+
0 2px 6px color-mix(in srgb, var(--color-black) 6%, transparent);
|
|
29
|
+
padding: 0.125rem 0.375rem;
|
|
30
|
+
font-family:
|
|
31
|
+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
32
|
+
"Courier New", monospace;
|
|
33
|
+
font-size: 0.75rem;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
line-height: 1;
|
|
36
|
+
color: var(--color-foreground);
|
|
37
|
+
white-space: nowrap;
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
/* ============================================================
|
|
3
|
+
PRIMITIVE SCALE - based on Radix UI grey scale
|
|
4
|
+
Light mode values (used directly) / Dark mode has separate scale
|
|
5
|
+
============================================================ */
|
|
6
|
+
|
|
7
|
+
/* Light mode primitives (Radix gray 1-12) */
|
|
8
|
+
--color-grey-1: #fcfcfc;
|
|
9
|
+
--color-grey-2: #f9f9f9;
|
|
10
|
+
--color-grey-3: #f0f0f0;
|
|
11
|
+
--color-grey-4: #e8e8e8;
|
|
12
|
+
--color-grey-5: #e0e0e0;
|
|
13
|
+
--color-grey-6: #d9d9d9;
|
|
14
|
+
--color-grey-7: #cecece;
|
|
15
|
+
--color-grey-8: #bbbbbb;
|
|
16
|
+
--color-grey-9: #8d8d8d;
|
|
17
|
+
--color-grey-10: #838383;
|
|
18
|
+
--color-grey-11: #646464;
|
|
19
|
+
--color-grey-12: #202020;
|
|
20
|
+
|
|
21
|
+
--color-white: #ffffff;
|
|
22
|
+
--color-black: #111111;
|
|
23
|
+
--color-current: currentColor;
|
|
24
|
+
--color-transparent: transparent;
|
|
25
|
+
|
|
26
|
+
/* ============================================================
|
|
27
|
+
SEMANTIC TOKENS (shadcn naming) - light mode defaults
|
|
28
|
+
Using Radix scale semantics:
|
|
29
|
+
1-2: backgrounds, 3-5: component bg, 6-8: borders, 11-12: text
|
|
30
|
+
============================================================ */
|
|
31
|
+
|
|
32
|
+
/* Page backgrounds */
|
|
33
|
+
--color-background: var(--color-white);
|
|
34
|
+
--color-foreground: var(--color-grey-12);
|
|
35
|
+
|
|
36
|
+
/* Muted surfaces (cards, secondary backgrounds) */
|
|
37
|
+
--color-muted: var(--color-grey-2);
|
|
38
|
+
--color-muted-foreground: var(--color-grey-11);
|
|
39
|
+
|
|
40
|
+
/* Card surfaces */
|
|
41
|
+
--color-card: var(--color-white);
|
|
42
|
+
--color-card-foreground: var(--color-grey-12);
|
|
43
|
+
|
|
44
|
+
/* Popover surfaces */
|
|
45
|
+
--color-popover: var(--color-white);
|
|
46
|
+
--color-popover-foreground: var(--color-grey-12);
|
|
47
|
+
|
|
48
|
+
/* Primary actions (solid buttons) */
|
|
49
|
+
--color-primary: var(--color-grey-12);
|
|
50
|
+
--color-primary-hover: var(--color-grey-11);
|
|
51
|
+
--color-primary-foreground: var(--color-white);
|
|
52
|
+
|
|
53
|
+
/* Secondary actions */
|
|
54
|
+
--color-secondary: var(--color-grey-3);
|
|
55
|
+
--color-secondary-hover: var(--color-grey-4);
|
|
56
|
+
--color-secondary-foreground: var(--color-grey-12);
|
|
57
|
+
|
|
58
|
+
/* Accent (interactive element backgrounds) */
|
|
59
|
+
--color-accent: var(--color-grey-3);
|
|
60
|
+
--color-accent-hover: var(--color-grey-4);
|
|
61
|
+
--color-accent-active: var(--color-grey-5);
|
|
62
|
+
--color-accent-foreground: var(--color-grey-12);
|
|
63
|
+
|
|
64
|
+
/* Borders - using Radix steps 6-7 for subtle borders */
|
|
65
|
+
--color-border: var(--color-grey-6);
|
|
66
|
+
--color-input: var(--color-grey-7);
|
|
67
|
+
--color-ring: var(--color-grey-12);
|
|
68
|
+
|
|
69
|
+
/* Disabled states */
|
|
70
|
+
--color-disabled: var(--color-grey-3);
|
|
71
|
+
--color-disabled-foreground: var(--color-grey-9);
|
|
72
|
+
|
|
73
|
+
/* Destructive/Error */
|
|
74
|
+
--color-destructive: #e5484d;
|
|
75
|
+
--color-destructive-hover: #dc3d43;
|
|
76
|
+
--color-destructive-foreground: var(--color-white);
|
|
77
|
+
--color-destructive-muted: #fff8f8;
|
|
78
|
+
--color-destructive-muted-foreground: #cd2b31;
|
|
79
|
+
|
|
80
|
+
/* Success */
|
|
81
|
+
--color-success: #30a46c;
|
|
82
|
+
--color-success-hover: #2b9a64;
|
|
83
|
+
--color-success-foreground: var(--color-white);
|
|
84
|
+
--color-success-muted: #e9f9ee;
|
|
85
|
+
--color-success-muted-foreground: #18794e;
|
|
86
|
+
|
|
87
|
+
/* Warning/Alert */
|
|
88
|
+
--color-warning: #f5d90a;
|
|
89
|
+
--color-warning-hover: #e5c800;
|
|
90
|
+
--color-warning-foreground: var(--color-grey-12);
|
|
91
|
+
--color-warning-muted: #fefce9;
|
|
92
|
+
--color-warning-muted-foreground: #946800;
|
|
93
|
+
|
|
94
|
+
/* Separator (subtle dividers) */
|
|
95
|
+
--color-separator: var(--color-grey-3);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ============================================================
|
|
99
|
+
DARK MODE - using Radix dark grey scale for proper layering
|
|
100
|
+
============================================================ */
|
|
101
|
+
@layer base {
|
|
102
|
+
@variant dark {
|
|
103
|
+
/* Dark mode primitives (Radix gray-dark 1-12)
|
|
104
|
+
These override the light primitives contextually */
|
|
105
|
+
--color-grey-1: #111111;
|
|
106
|
+
--color-grey-2: #191919;
|
|
107
|
+
--color-grey-3: #222222;
|
|
108
|
+
--color-grey-4: #2a2a2a;
|
|
109
|
+
--color-grey-5: #313131;
|
|
110
|
+
--color-grey-6: #3a3a3a;
|
|
111
|
+
--color-grey-7: #484848;
|
|
112
|
+
--color-grey-8: #606060;
|
|
113
|
+
--color-grey-9: #6e6e6e;
|
|
114
|
+
--color-grey-10: #7b7b7b;
|
|
115
|
+
--color-grey-11: #b4b4b4;
|
|
116
|
+
--color-grey-12: #eeeeee;
|
|
117
|
+
|
|
118
|
+
--color-black: #111111;
|
|
119
|
+
|
|
120
|
+
/* Page backgrounds */
|
|
121
|
+
--color-background: var(--color-grey-1);
|
|
122
|
+
--color-foreground: var(--color-grey-12);
|
|
123
|
+
|
|
124
|
+
/* Muted surfaces - step 2 for subtle elevation */
|
|
125
|
+
--color-muted: var(--color-grey-2);
|
|
126
|
+
--color-muted-foreground: var(--color-grey-11);
|
|
127
|
+
|
|
128
|
+
/* Card surfaces */
|
|
129
|
+
--color-card: var(--color-grey-2);
|
|
130
|
+
--color-card-foreground: var(--color-grey-12);
|
|
131
|
+
|
|
132
|
+
/* Popover surfaces */
|
|
133
|
+
--color-popover: var(--color-grey-2);
|
|
134
|
+
--color-popover-foreground: var(--color-grey-12);
|
|
135
|
+
|
|
136
|
+
/* Primary actions */
|
|
137
|
+
--color-primary: var(--color-grey-12);
|
|
138
|
+
--color-primary-hover: var(--color-white);
|
|
139
|
+
--color-primary-foreground: var(--color-grey-1);
|
|
140
|
+
|
|
141
|
+
/* Secondary actions - steps 3-4 */
|
|
142
|
+
--color-secondary: var(--color-grey-3);
|
|
143
|
+
--color-secondary-hover: var(--color-grey-4);
|
|
144
|
+
--color-secondary-foreground: var(--color-grey-12);
|
|
145
|
+
|
|
146
|
+
/* Accent - steps 3-5 */
|
|
147
|
+
--color-accent: var(--color-grey-3);
|
|
148
|
+
--color-accent-hover: var(--color-grey-4);
|
|
149
|
+
--color-accent-active: var(--color-grey-5);
|
|
150
|
+
--color-accent-foreground: var(--color-grey-12);
|
|
151
|
+
|
|
152
|
+
/* Borders - step 6 for subtle, step 7 for interactive */
|
|
153
|
+
--color-border: var(--color-grey-6);
|
|
154
|
+
--color-input: var(--color-grey-7);
|
|
155
|
+
--color-ring: var(--color-grey-12);
|
|
156
|
+
|
|
157
|
+
/* Disabled states */
|
|
158
|
+
--color-disabled: var(--color-grey-3);
|
|
159
|
+
--color-disabled-foreground: var(--color-grey-9);
|
|
160
|
+
|
|
161
|
+
/* Destructive/Error */
|
|
162
|
+
--color-destructive: #e5484d;
|
|
163
|
+
--color-destructive-hover: #f16a6e;
|
|
164
|
+
--color-destructive-foreground: var(--color-white);
|
|
165
|
+
--color-destructive-muted: #291415;
|
|
166
|
+
--color-destructive-muted-foreground: #ff6369;
|
|
167
|
+
|
|
168
|
+
/* Success */
|
|
169
|
+
--color-success: #30a46c;
|
|
170
|
+
--color-success-hover: #3cb77a;
|
|
171
|
+
--color-success-foreground: var(--color-white);
|
|
172
|
+
--color-success-muted: #0d2117;
|
|
173
|
+
--color-success-muted-foreground: #4cc38a;
|
|
174
|
+
|
|
175
|
+
/* Warning/Alert */
|
|
176
|
+
--color-warning: #f5d90a;
|
|
177
|
+
--color-warning-hover: #ffe629;
|
|
178
|
+
--color-warning-foreground: var(--color-grey-12);
|
|
179
|
+
--color-warning-muted: #1c1500;
|
|
180
|
+
--color-warning-muted-foreground: #f0c000;
|
|
181
|
+
|
|
182
|
+
/* Separator */
|
|
183
|
+
--color-separator: var(--color-grey-3);
|
|
184
|
+
}
|
|
185
|
+
}
|
package/dist/theme.css
ADDED
package/dist/utility.css
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* Dark theme via class */
|
|
2
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
3
|
+
|
|
4
|
+
/* Helpers for data attributes (Base UI) */
|
|
5
|
+
@custom-variant data-active (&[data-state~="active"]);
|
|
6
|
+
@custom-variant data-open (&[data-state~="open"]);
|
|
7
|
+
@custom-variant data-close (&[data-state~="close"]);
|
|
8
|
+
@custom-variant data-disabled (&[data-state~="disabled"]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3000/market",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"import": "./dist/index.js"
|
|
12
12
|
},
|
|
13
13
|
"./styles.css": "./dist/styles.css",
|
|
14
|
-
"./
|
|
14
|
+
"./theme.css": "./dist/theme.css"
|
|
15
15
|
},
|
|
16
16
|
"sideEffects": [
|
|
17
17
|
"*.css"
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
79
|
"scripts": {
|
|
80
|
-
"build": "tsdown && tailwindcss -i src/styles/index.css -o dist/styles.css --minify
|
|
80
|
+
"build": "tsdown && tailwindcss -i src/styles/index.css -o dist/styles.css --minify",
|
|
81
81
|
"build:storybook": "storybook build",
|
|
82
82
|
"build:watch": "tsdown --watch",
|
|
83
83
|
"dev": "tsdown --watch",
|
package/dist/tokens.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
:root,:host{--color-grey-1:#fcfcfc;--color-grey-2:#f9f9f9;--color-grey-3:#f0f0f0;--color-grey-4:#e8e8e8;--color-grey-5:#e0e0e0;--color-grey-6:#d9d9d9;--color-grey-7:#cecece;--color-grey-9:#8d8d8d;--color-grey-11:#646464;--color-grey-12:#202020;--color-white:#fff;--color-black:#111;--color-background:var(--color-white);--color-foreground:var(--color-grey-12);--color-muted:var(--color-grey-2);--color-border:var(--color-grey-6);--color-input:var(--color-grey-7)}@layer base{:scope:where(.dark,.dark *){--color-grey-1:#111;--color-grey-2:#191919;--color-grey-3:#222;--color-grey-4:#2a2a2a;--color-grey-5:#313131;--color-grey-6:#3a3a3a;--color-grey-7:#484848;--color-grey-8:#606060;--color-grey-9:#6e6e6e;--color-grey-10:#7b7b7b;--color-grey-11:#b4b4b4;--color-grey-12:#eee;--color-black:#111;--color-background:var(--color-grey-1);--color-foreground:var(--color-grey-12);--color-muted:var(--color-grey-2);--color-muted-foreground:var(--color-grey-11);--color-card:var(--color-grey-2);--color-card-foreground:var(--color-grey-12);--color-popover:var(--color-grey-2);--color-popover-foreground:var(--color-grey-12);--color-primary:var(--color-grey-12);--color-primary-hover:var(--color-white);--color-primary-foreground:var(--color-grey-1);--color-secondary:var(--color-grey-3);--color-secondary-hover:var(--color-grey-4);--color-secondary-foreground:var(--color-grey-12);--color-accent:var(--color-grey-3);--color-accent-hover:var(--color-grey-4);--color-accent-active:var(--color-grey-5);--color-accent-foreground:var(--color-grey-12);--color-border:var(--color-grey-6);--color-input:var(--color-grey-7);--color-ring:var(--color-grey-12);--color-disabled:var(--color-grey-3);--color-disabled-foreground:var(--color-grey-9);--color-destructive:#e5484d;--color-destructive-hover:#f16a6e;--color-destructive-foreground:var(--color-white);--color-destructive-muted:#291415;--color-destructive-muted-foreground:#ff6369;--color-success:#30a46c;--color-success-hover:#3cb77a;--color-success-foreground:var(--color-white);--color-success-muted:#0d2117;--color-success-muted-foreground:#4cc38a;--color-warning:#f5d90a;--color-warning-hover:#ffe629;--color-warning-foreground:var(--color-grey-12);--color-warning-muted:#1c1500;--color-warning-muted-foreground:#f0c000;--color-separator:var(--color-grey-3)}}html,body{-webkit-font-smoothing:antialiased;background-color:var(--color-background);color:var(--color-foreground)}kbd{border:1px solid #d9d9d9e0;justify-content:center;align-items:center;min-width:1.5rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){kbd{border:1px solid color-mix(in srgb,var(--color-border)88%,transparent)}}kbd{border-bottom-color:#cfcfcf}@supports (color:color-mix(in lab, red, red)){kbd{border-bottom-color:color-mix(in srgb,var(--color-input)92%,var(--color-border))}}kbd{background:linear-gradient(#fff 0%,#fafafa 100%);border-radius:.45rem}@supports (color:color-mix(in lab, red, red)){kbd{background:linear-gradient(180deg,color-mix(in srgb,var(--color-background)92%,var(--color-muted))0%,color-mix(in srgb,var(--color-muted)82%,var(--color-background))100%)}}kbd{box-shadow:inset 0 1px #ffffffa6,0 1px #d9d9d98c,0 2px 6px #1111110f}@supports (color:color-mix(in lab, red, red)){kbd{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-white)65%,transparent),0 1px 0 color-mix(in srgb,var(--color-border)55%,transparent),0 2px 6px color-mix(in srgb,var(--color-black)6%,transparent)}}kbd{color:var(--color-foreground);white-space:nowrap;vertical-align:middle;padding:.125rem .375rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;font-weight:600;line-height:1}
|