@nattstack/ui 0.0.4 → 0.0.6
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/dist/README.md +38 -0
- package/dist/colors/root.css +0 -6
- package/dist/components/{button.module-7VWY2WUV.module.css → button.module-7GBEQN52.module.css} +8 -8
- package/dist/components/index.js +7 -7
- package/dist/components/{label.module-NYFSR6AT.module.css → label.module-L4N7QKQF.module.css} +2 -2
- package/dist/components/{switch.module-TLJBHCSA.module.css → switch.module-U6Q27QB5.module.css} +1 -1
- package/dist/components/{tabs-pill-tab.module-2F7LOGXE.module.css → tabs-pill-tab.module-NOUQQCDW.module.css} +5 -5
- package/dist/components/{tabs-segmented-tab.module-SVYVEM2O.module.css → tabs-segmented-tab.module-VKVINCWX.module.css} +1 -1
- package/dist/components/{tabs-underline-tab.module-OAE4JH7K.module.css → tabs-underline-tab.module-JFTB54DE.module.css} +1 -1
- package/dist/components/{tooltip-content.module-QGRFS5NN.module.css → tooltip-content.module-WKER6QBC.module.css} +1 -1
- package/dist/tailwind-colors/color.css +0 -4
- package/package.json +1 -1
package/dist/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# @nattstack/ui
|
|
2
|
+
|
|
3
|
+
A collection of reusable React components built with Base UI, TypeScript, and CSS Modules.
|
|
4
|
+
|
|
5
|
+
## Links
|
|
6
|
+
|
|
7
|
+
- Website: [https://nui-web.vercel.app](https://nui-web.vercel.app)
|
|
8
|
+
- Storybook: [https://ui-storybook.vercel.app](https://ui-storybook.vercel.app)
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
bun add @nattstack/ui
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
/* global.css */
|
|
20
|
+
|
|
21
|
+
@import "tailwindcss";
|
|
22
|
+
@import "@nattstack/ui/tailwind-colors";
|
|
23
|
+
@import "@nattstack/ui/tailwind-tokenless-10";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// app.tsx
|
|
28
|
+
|
|
29
|
+
import { Button } from "@nattstack/ui"
|
|
30
|
+
|
|
31
|
+
function App() {
|
|
32
|
+
return (
|
|
33
|
+
<body className="color-gray-slate color-primary-blue">
|
|
34
|
+
<Button>Click me</Button>
|
|
35
|
+
</body>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
```
|
package/dist/colors/root.css
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
/* =================================================== */
|
|
3
|
-
/* White & Black
|
|
4
|
-
/* =================================================== */
|
|
5
|
-
--color-white: rgba(255, 255, 255, 1);
|
|
6
|
-
--color-black: rgba(0, 0, 0, 1);
|
|
7
|
-
|
|
8
2
|
/* =================================================== */
|
|
9
3
|
/* Gray */
|
|
10
4
|
/* =================================================== */
|
package/dist/components/{button.module-7VWY2WUV.module.css → button.module-7GBEQN52.module.css}
RENAMED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
flex-shrink: 0;
|
|
11
11
|
font-family: var(--font-sans, sans-serif);
|
|
12
12
|
font-size: 14px;
|
|
13
|
-
font-weight:
|
|
13
|
+
font-weight: 450;
|
|
14
14
|
height: var(--size-button);
|
|
15
15
|
justify-content: safe center;
|
|
16
16
|
line-height: 1.5;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
/* ===================================================== */
|
|
106
106
|
/* Accent */
|
|
107
107
|
.button__variant_accent {
|
|
108
|
-
color:
|
|
108
|
+
color: white;
|
|
109
109
|
background-color: var(--color-primary-9);
|
|
110
110
|
background-image: linear-gradient(
|
|
111
111
|
to bottom,
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
|
|
131
131
|
/* Ghost */
|
|
132
132
|
.button__variant_ghost {
|
|
133
|
-
color:
|
|
133
|
+
color: black;
|
|
134
134
|
background-color: transparent;
|
|
135
135
|
}
|
|
136
136
|
|
|
@@ -141,12 +141,12 @@
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
:global(.dark) .button__variant_ghost {
|
|
144
|
-
color:
|
|
144
|
+
color: white;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
/* Primary */
|
|
148
148
|
.button__variant_primary {
|
|
149
|
-
color:
|
|
149
|
+
color: white;
|
|
150
150
|
background-color: var(--color-gray-dark-1);
|
|
151
151
|
background-image: linear-gradient(
|
|
152
152
|
to bottom,
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
:global(.dark) .button__variant_primary {
|
|
165
|
-
color:
|
|
165
|
+
color: black;
|
|
166
166
|
background-color: var(--color-gray-light-1);
|
|
167
167
|
background-image: linear-gradient(
|
|
168
168
|
to bottom,
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
|
|
180
180
|
/* Secondary */
|
|
181
181
|
.button__variant_secondary {
|
|
182
|
-
color:
|
|
182
|
+
color: black;
|
|
183
183
|
background-color: var(--color-gray-2);
|
|
184
184
|
background-image: linear-gradient(
|
|
185
185
|
to bottom,
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
:global(.dark) .button__variant_secondary {
|
|
199
|
-
color:
|
|
199
|
+
color: white;
|
|
200
200
|
background-image: linear-gradient(
|
|
201
201
|
to bottom,
|
|
202
202
|
color-mix(in oklab, transparent 100%, #ffffff 1%) 50%,
|
package/dist/components/index.js
CHANGED
|
@@ -15,7 +15,7 @@ function normalizeWhitespace(value) {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
// src/components/button/button.tsx
|
|
18
|
-
import styles2 from "./button.module-
|
|
18
|
+
import styles2 from "./button.module-7GBEQN52.module.css";
|
|
19
19
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
20
20
|
function Button(props) {
|
|
21
21
|
const {
|
|
@@ -354,7 +354,7 @@ var INPUT_CLASS_NAME = {
|
|
|
354
354
|
};
|
|
355
355
|
|
|
356
356
|
// src/components/label/label.tsx
|
|
357
|
-
import styles10 from "./label.module-
|
|
357
|
+
import styles10 from "./label.module-L4N7QKQF.module.css";
|
|
358
358
|
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
359
359
|
function Label(props) {
|
|
360
360
|
const { className: customClassName = "", htmlFor = void 0, children = "", ...rest } = props;
|
|
@@ -432,7 +432,7 @@ var SPACER_CLASS_NAME = {
|
|
|
432
432
|
|
|
433
433
|
// src/components/switch/switch.tsx
|
|
434
434
|
import { Switch as BaseSwitch } from "@base-ui/react";
|
|
435
|
-
import styles13 from "./switch.module-
|
|
435
|
+
import styles13 from "./switch.module-U6Q27QB5.module.css";
|
|
436
436
|
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
437
437
|
function Switch(props) {
|
|
438
438
|
const {
|
|
@@ -519,7 +519,7 @@ var TABS_PILL_LIST_CLASS_NAME = {
|
|
|
519
519
|
|
|
520
520
|
// src/components/tabs-pill/tabs-pill-tab.tsx
|
|
521
521
|
import { Tabs as BaseTabs3 } from "@base-ui/react";
|
|
522
|
-
import styles16 from "./tabs-pill-tab.module-
|
|
522
|
+
import styles16 from "./tabs-pill-tab.module-NOUQQCDW.module.css";
|
|
523
523
|
import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
524
524
|
function TabsPillTab(props) {
|
|
525
525
|
const { className: customClassName = "", isNativeButton = true, ...rest } = props;
|
|
@@ -593,7 +593,7 @@ var TABS_SEGMENTED_LIST_CLASS_NAME = {
|
|
|
593
593
|
|
|
594
594
|
// src/components/tabs-segmented/tabs-segmented-tab.tsx
|
|
595
595
|
import { Tabs as BaseTabs6 } from "@base-ui/react";
|
|
596
|
-
import styles19 from "./tabs-segmented-tab.module-
|
|
596
|
+
import styles19 from "./tabs-segmented-tab.module-VKVINCWX.module.css";
|
|
597
597
|
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
598
598
|
function TabsSegmentedTab(props) {
|
|
599
599
|
const { className: customClassName = "", isNativeButton = true, ...rest } = props;
|
|
@@ -662,7 +662,7 @@ var TABS_UNDERLINE_LIST_CLASS_NAME = {
|
|
|
662
662
|
|
|
663
663
|
// src/components/tabs-underline/tabs-underline-tab.tsx
|
|
664
664
|
import { Tabs as BaseTabs9 } from "@base-ui/react";
|
|
665
|
-
import styles22 from "./tabs-underline-tab.module-
|
|
665
|
+
import styles22 from "./tabs-underline-tab.module-JFTB54DE.module.css";
|
|
666
666
|
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
667
667
|
function TabsUnderlineTab(props) {
|
|
668
668
|
const { className: customClassName = "", isNativeButton = true, ...rest } = props;
|
|
@@ -773,7 +773,7 @@ function Tooltip(props) {
|
|
|
773
773
|
|
|
774
774
|
// src/components/tooltip/tooltip-content.tsx
|
|
775
775
|
import { Tooltip as BaseTooltip2 } from "@base-ui/react";
|
|
776
|
-
import styles26 from "./tooltip-content.module-
|
|
776
|
+
import styles26 from "./tooltip-content.module-WKER6QBC.module.css";
|
|
777
777
|
import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
778
778
|
function TooltipContent(props) {
|
|
779
779
|
const { children, className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
.tabs_pill_tab {
|
|
2
2
|
align-items: center;
|
|
3
3
|
border-radius: var(--border-radius);
|
|
4
|
-
color:
|
|
4
|
+
color: black;
|
|
5
5
|
column-gap: 8px;
|
|
6
6
|
cursor: pointer;
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-shrink: 0;
|
|
9
9
|
font-size: 14px;
|
|
10
|
-
font-weight:
|
|
10
|
+
font-weight: 450;
|
|
11
11
|
height: 40px;
|
|
12
12
|
justify-content: center;
|
|
13
13
|
outline-color: var(--color-primary-9);
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
|
|
30
30
|
.tabs_pill_tab[data-active] {
|
|
31
31
|
background-color: transparent;
|
|
32
|
-
color:
|
|
32
|
+
color: white;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
:global(.dark) .tabs_pill_tab {
|
|
36
|
-
color:
|
|
36
|
+
color: white;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
:global(.dark) .tabs_pill_tab[data-active] {
|
|
40
|
-
color:
|
|
40
|
+
color: black;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
/* Icon size */
|
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
/* Reset ============================================= */
|
|
3
3
|
--color-\*: initial;
|
|
4
4
|
|
|
5
|
-
/* White & Black ===================================== */
|
|
6
|
-
--color-white: var(--color-white);
|
|
7
|
-
--color-black: var(--color-black);
|
|
8
|
-
|
|
9
5
|
/* Gray ============================================== */
|
|
10
6
|
--color-gray-1: var(--color-gray-1);
|
|
11
7
|
--color-gray-2: var(--color-gray-2);
|