@nurix/ui-component-library 1.1.2-stage.53 → 1.1.2-stage.55
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/globals.css +85 -0
- package/dist/index.d.mts +54 -7
- package/dist/index.d.ts +54 -7
- package/dist/index.js +131 -8
- package/dist/index.mjs +122 -7
- package/package.json +9 -1
package/dist/globals.css
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@config "../tailwind.config.ts";
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
* Scoped theme variables - only apply within ThemeRoot containers
|
|
6
|
+
*
|
|
7
|
+
* IMPORTANT: Consumers must import this CSS file in their app:
|
|
8
|
+
* import "@nurix/ui-component-library/globals.css"
|
|
9
|
+
*
|
|
10
|
+
* The CSS variables below are scoped to [data-theme] containers, so they
|
|
11
|
+
* won't affect the rest of your app. Only components wrapped in <ThemeRoot>
|
|
12
|
+
* will use these theme variables.
|
|
13
|
+
*/
|
|
14
|
+
[data-theme="light"],
|
|
15
|
+
[data-theme] {
|
|
16
|
+
/* Default light theme */
|
|
17
|
+
--background: 0 0% 100%;
|
|
18
|
+
--foreground: 222.2 84% 4.9%;
|
|
19
|
+
|
|
20
|
+
--card: 0 0% 100%;
|
|
21
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
22
|
+
|
|
23
|
+
--popover: 0 0% 100%;
|
|
24
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
25
|
+
|
|
26
|
+
--primary: 222.2 47.4% 11.2%;
|
|
27
|
+
--primary-foreground: 210 40% 98%;
|
|
28
|
+
|
|
29
|
+
--secondary: 210 40% 96.1%;
|
|
30
|
+
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
31
|
+
|
|
32
|
+
--muted: 210 40% 96.1%;
|
|
33
|
+
--muted-foreground: 215.4 16.3% 46.9%;
|
|
34
|
+
|
|
35
|
+
--accent: 210 40% 96.1%;
|
|
36
|
+
--accent-foreground: 222.2 47.4% 11.2%;
|
|
37
|
+
|
|
38
|
+
--destructive: 0 84.2% 60.2%;
|
|
39
|
+
--destructive-foreground: 210 40% 98%;
|
|
40
|
+
|
|
41
|
+
--border: 214.3 31.8% 91.4%;
|
|
42
|
+
--input: 214.3 31.8% 91.4%;
|
|
43
|
+
--ring: 222.2 84% 4.9%;
|
|
44
|
+
|
|
45
|
+
--radius: 0.5rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[data-theme="dark"] {
|
|
49
|
+
--background: 222.2 84% 4.9%;
|
|
50
|
+
--foreground: 210 40% 98%;
|
|
51
|
+
|
|
52
|
+
--card: 222.2 84% 4.9%;
|
|
53
|
+
--card-foreground: 210 40% 98%;
|
|
54
|
+
|
|
55
|
+
--popover: 222.2 84% 4.9%;
|
|
56
|
+
--popover-foreground: 210 40% 98%;
|
|
57
|
+
|
|
58
|
+
--primary: 210 40% 98%;
|
|
59
|
+
--primary-foreground: 222.2 47.4% 11.2%;
|
|
60
|
+
|
|
61
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
62
|
+
--secondary-foreground: 210 40% 98%;
|
|
63
|
+
|
|
64
|
+
--muted: 217.2 32.6% 17.5%;
|
|
65
|
+
--muted-foreground: 215 20.2% 65.1%;
|
|
66
|
+
|
|
67
|
+
--accent: 217.2 32.6% 17.5%;
|
|
68
|
+
--accent-foreground: 210 40% 98%;
|
|
69
|
+
|
|
70
|
+
--destructive: 0 62.8% 30.6%;
|
|
71
|
+
--destructive-foreground: 210 40% 98%;
|
|
72
|
+
|
|
73
|
+
--border: 217.2 32.6% 17.5%;
|
|
74
|
+
--input: 217.2 32.6% 17.5%;
|
|
75
|
+
--ring: 212.7 26.8% 83.9%;
|
|
76
|
+
|
|
77
|
+
--radius: 0.5rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Scoped base styles - only apply within ThemeRoot containers */
|
|
81
|
+
@layer base {
|
|
82
|
+
[data-theme] * {
|
|
83
|
+
@apply border-border;
|
|
84
|
+
}
|
|
85
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
1
|
import * as React$1 from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
|
|
5
5
|
type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
|
@@ -16,12 +16,59 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* Beginner-friendly: build className from tokens.
|
|
20
|
+
* (base) + (variant) + (size) + (any custom className)
|
|
20
21
|
*/
|
|
21
|
-
declare
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
declare function buttonVariants(opts?: {
|
|
23
|
+
variant?: ButtonProps["variant"];
|
|
24
|
+
size?: ButtonProps["size"];
|
|
25
|
+
className?: string;
|
|
26
|
+
}): string;
|
|
25
27
|
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
type ThemeMode = "light" | "dark";
|
|
30
|
+
type ThemeRootProps = {
|
|
31
|
+
/**
|
|
32
|
+
* Set the theme for this subtree.
|
|
33
|
+
* If omitted, no attribute is set (lets the consumer control it elsewhere).
|
|
34
|
+
*/
|
|
35
|
+
theme?: ThemeMode;
|
|
36
|
+
/**
|
|
37
|
+
* Optional wrapper className for layout/background.
|
|
38
|
+
*/
|
|
39
|
+
className?: string;
|
|
40
|
+
children?: React$1.ReactNode;
|
|
41
|
+
} & React$1.HTMLAttributes<HTMLDivElement>;
|
|
42
|
+
/**
|
|
43
|
+
* Theme boundary for the design system.
|
|
44
|
+
*
|
|
45
|
+
* Usage: wrap your app (or a section) and set `theme` from your app's theme context.
|
|
46
|
+
* Internally this just sets `data-theme="dark" | "light"` so CSS variables swap.
|
|
47
|
+
*/
|
|
48
|
+
declare function ThemeRoot({ theme, className, children, ...props }: ThemeRootProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
type CardVariant = "default" | "muted" | "ghost";
|
|
51
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
52
|
+
variant?: CardVariant;
|
|
53
|
+
}
|
|
54
|
+
type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
55
|
+
type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
|
|
56
|
+
type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
57
|
+
type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
58
|
+
type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Beginner-friendly: build className from tokens.
|
|
62
|
+
*/
|
|
63
|
+
declare function cardVariants(opts?: {
|
|
64
|
+
variant?: CardProps["variant"];
|
|
65
|
+
className?: string;
|
|
66
|
+
}): string;
|
|
67
|
+
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
68
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
69
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
70
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
71
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
|
|
74
|
+
export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type ThemeMode, ThemeRoot, type ThemeRootProps, buttonVariants, cardVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
1
|
import * as React$1 from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
|
|
5
5
|
type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
|
@@ -16,12 +16,59 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* Beginner-friendly: build className from tokens.
|
|
20
|
+
* (base) + (variant) + (size) + (any custom className)
|
|
20
21
|
*/
|
|
21
|
-
declare
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
declare function buttonVariants(opts?: {
|
|
23
|
+
variant?: ButtonProps["variant"];
|
|
24
|
+
size?: ButtonProps["size"];
|
|
25
|
+
className?: string;
|
|
26
|
+
}): string;
|
|
25
27
|
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
type ThemeMode = "light" | "dark";
|
|
30
|
+
type ThemeRootProps = {
|
|
31
|
+
/**
|
|
32
|
+
* Set the theme for this subtree.
|
|
33
|
+
* If omitted, no attribute is set (lets the consumer control it elsewhere).
|
|
34
|
+
*/
|
|
35
|
+
theme?: ThemeMode;
|
|
36
|
+
/**
|
|
37
|
+
* Optional wrapper className for layout/background.
|
|
38
|
+
*/
|
|
39
|
+
className?: string;
|
|
40
|
+
children?: React$1.ReactNode;
|
|
41
|
+
} & React$1.HTMLAttributes<HTMLDivElement>;
|
|
42
|
+
/**
|
|
43
|
+
* Theme boundary for the design system.
|
|
44
|
+
*
|
|
45
|
+
* Usage: wrap your app (or a section) and set `theme` from your app's theme context.
|
|
46
|
+
* Internally this just sets `data-theme="dark" | "light"` so CSS variables swap.
|
|
47
|
+
*/
|
|
48
|
+
declare function ThemeRoot({ theme, className, children, ...props }: ThemeRootProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
type CardVariant = "default" | "muted" | "ghost";
|
|
51
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
52
|
+
variant?: CardVariant;
|
|
53
|
+
}
|
|
54
|
+
type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
|
|
55
|
+
type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
|
|
56
|
+
type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
57
|
+
type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
58
|
+
type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Beginner-friendly: build className from tokens.
|
|
62
|
+
*/
|
|
63
|
+
declare function cardVariants(opts?: {
|
|
64
|
+
variant?: CardProps["variant"];
|
|
65
|
+
className?: string;
|
|
66
|
+
}): string;
|
|
67
|
+
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
68
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
69
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
70
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
71
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
|
|
74
|
+
export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type ThemeMode, ThemeRoot, type ThemeRootProps, buttonVariants, cardVariants };
|
package/dist/index.js
CHANGED
|
@@ -31,14 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
Button: () => Button,
|
|
34
|
-
|
|
34
|
+
Card: () => Card,
|
|
35
|
+
CardContent: () => CardContent,
|
|
36
|
+
CardDescription: () => CardDescription,
|
|
37
|
+
CardFooter: () => CardFooter,
|
|
38
|
+
CardHeader: () => CardHeader,
|
|
39
|
+
CardTitle: () => CardTitle,
|
|
40
|
+
ThemeRoot: () => ThemeRoot,
|
|
41
|
+
buttonVariants: () => buttonVariants,
|
|
42
|
+
cardVariants: () => cardVariants
|
|
35
43
|
});
|
|
36
44
|
module.exports = __toCommonJS(index_exports);
|
|
37
45
|
|
|
38
46
|
// src/button/button.tsx
|
|
39
47
|
var React = __toESM(require("react"));
|
|
40
48
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
41
|
-
var import_class_variance_authority = require("class-variance-authority");
|
|
42
49
|
|
|
43
50
|
// src/button/variables.ts
|
|
44
51
|
var BUTTON_TOKENS = {
|
|
@@ -94,10 +101,16 @@ function cn(...inputs) {
|
|
|
94
101
|
|
|
95
102
|
// src/button/button.tsx
|
|
96
103
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
104
|
+
function buttonVariants(opts = {}) {
|
|
105
|
+
const variant = opts.variant ?? BUTTON_TOKENS.defaults.variant;
|
|
106
|
+
const size = opts.size ?? BUTTON_TOKENS.defaults.size;
|
|
107
|
+
return cn(
|
|
108
|
+
BUTTON_TOKENS.base,
|
|
109
|
+
BUTTON_TOKENS.variants.variant[variant],
|
|
110
|
+
BUTTON_TOKENS.variants.size[size],
|
|
111
|
+
opts.className
|
|
112
|
+
);
|
|
113
|
+
}
|
|
101
114
|
var Button = React.forwardRef(
|
|
102
115
|
({
|
|
103
116
|
className,
|
|
@@ -113,7 +126,7 @@ var Button = React.forwardRef(
|
|
|
113
126
|
Comp,
|
|
114
127
|
{
|
|
115
128
|
ref,
|
|
116
|
-
className:
|
|
129
|
+
className: buttonVariants({ variant, size, className }),
|
|
117
130
|
style: {
|
|
118
131
|
borderRadius: BUTTON_TOKENS.radius[button_border_radius],
|
|
119
132
|
...style
|
|
@@ -124,8 +137,118 @@ var Button = React.forwardRef(
|
|
|
124
137
|
}
|
|
125
138
|
);
|
|
126
139
|
Button.displayName = "Button";
|
|
140
|
+
|
|
141
|
+
// src/theme/theme-root.tsx
|
|
142
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
143
|
+
function ThemeRoot({
|
|
144
|
+
theme,
|
|
145
|
+
className,
|
|
146
|
+
children,
|
|
147
|
+
...props
|
|
148
|
+
}) {
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-theme": theme, className, ...props, children });
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// src/card/card.tsx
|
|
153
|
+
var React2 = __toESM(require("react"));
|
|
154
|
+
|
|
155
|
+
// src/card/variables.ts
|
|
156
|
+
var CARD_TOKENS = {
|
|
157
|
+
/**
|
|
158
|
+
* Base styles (used by CVA)
|
|
159
|
+
*/
|
|
160
|
+
base: "rounded-lg border text-card-foreground shadow-sm",
|
|
161
|
+
/**
|
|
162
|
+
* Visual variants
|
|
163
|
+
*/
|
|
164
|
+
variants: {
|
|
165
|
+
variant: {
|
|
166
|
+
default: "border-border bg-card",
|
|
167
|
+
muted: "border-border bg-muted",
|
|
168
|
+
ghost: "border-transparent bg-transparent shadow-none"
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
/**
|
|
172
|
+
* Default selections
|
|
173
|
+
*/
|
|
174
|
+
defaults: {
|
|
175
|
+
variant: "default"
|
|
176
|
+
},
|
|
177
|
+
/**
|
|
178
|
+
* Subcomponent styles
|
|
179
|
+
*/
|
|
180
|
+
header: "flex flex-col gap-1.5 p-6",
|
|
181
|
+
title: "text-lg font-semibold leading-none tracking-tight",
|
|
182
|
+
description: "text-sm text-muted-foreground",
|
|
183
|
+
content: "px-6 pb-6",
|
|
184
|
+
footer: "flex items-center px-6 pb-6"
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
// src/card/card.tsx
|
|
188
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
189
|
+
function cardVariants(opts = {}) {
|
|
190
|
+
const variant = opts.variant ?? CARD_TOKENS.defaults.variant;
|
|
191
|
+
return cn(CARD_TOKENS.base, CARD_TOKENS.variants.variant[variant], opts.className);
|
|
192
|
+
}
|
|
193
|
+
var Card = React2.forwardRef(
|
|
194
|
+
({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
195
|
+
"div",
|
|
196
|
+
{
|
|
197
|
+
ref,
|
|
198
|
+
className: cardVariants({ variant, className }),
|
|
199
|
+
...props
|
|
200
|
+
}
|
|
201
|
+
)
|
|
202
|
+
);
|
|
203
|
+
Card.displayName = "Card";
|
|
204
|
+
var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
205
|
+
"div",
|
|
206
|
+
{
|
|
207
|
+
ref,
|
|
208
|
+
className: cn(CARD_TOKENS.header, className),
|
|
209
|
+
...props
|
|
210
|
+
}
|
|
211
|
+
));
|
|
212
|
+
CardHeader.displayName = "CardHeader";
|
|
213
|
+
var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
214
|
+
"h3",
|
|
215
|
+
{
|
|
216
|
+
ref,
|
|
217
|
+
className: cn(CARD_TOKENS.title, className),
|
|
218
|
+
...props
|
|
219
|
+
}
|
|
220
|
+
));
|
|
221
|
+
CardTitle.displayName = "CardTitle";
|
|
222
|
+
var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
223
|
+
"p",
|
|
224
|
+
{
|
|
225
|
+
ref,
|
|
226
|
+
className: cn(CARD_TOKENS.description, className),
|
|
227
|
+
...props
|
|
228
|
+
}
|
|
229
|
+
));
|
|
230
|
+
CardDescription.displayName = "CardDescription";
|
|
231
|
+
var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn(CARD_TOKENS.content, className), ...props }));
|
|
232
|
+
CardContent.displayName = "CardContent";
|
|
233
|
+
var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
234
|
+
"div",
|
|
235
|
+
{
|
|
236
|
+
ref,
|
|
237
|
+
className: cn(CARD_TOKENS.footer, className),
|
|
238
|
+
...props
|
|
239
|
+
}
|
|
240
|
+
));
|
|
241
|
+
CardFooter.displayName = "CardFooter";
|
|
127
242
|
// Annotate the CommonJS export names for ESM import in node:
|
|
128
243
|
0 && (module.exports = {
|
|
129
244
|
Button,
|
|
130
|
-
|
|
245
|
+
Card,
|
|
246
|
+
CardContent,
|
|
247
|
+
CardDescription,
|
|
248
|
+
CardFooter,
|
|
249
|
+
CardHeader,
|
|
250
|
+
CardTitle,
|
|
251
|
+
ThemeRoot,
|
|
252
|
+
buttonVariants,
|
|
253
|
+
cardVariants
|
|
131
254
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// src/button/button.tsx
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
-
import { cva } from "class-variance-authority";
|
|
5
4
|
|
|
6
5
|
// src/button/variables.ts
|
|
7
6
|
var BUTTON_TOKENS = {
|
|
@@ -57,10 +56,16 @@ function cn(...inputs) {
|
|
|
57
56
|
|
|
58
57
|
// src/button/button.tsx
|
|
59
58
|
import { jsx } from "react/jsx-runtime";
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
function buttonVariants(opts = {}) {
|
|
60
|
+
const variant = opts.variant ?? BUTTON_TOKENS.defaults.variant;
|
|
61
|
+
const size = opts.size ?? BUTTON_TOKENS.defaults.size;
|
|
62
|
+
return cn(
|
|
63
|
+
BUTTON_TOKENS.base,
|
|
64
|
+
BUTTON_TOKENS.variants.variant[variant],
|
|
65
|
+
BUTTON_TOKENS.variants.size[size],
|
|
66
|
+
opts.className
|
|
67
|
+
);
|
|
68
|
+
}
|
|
64
69
|
var Button = React.forwardRef(
|
|
65
70
|
({
|
|
66
71
|
className,
|
|
@@ -76,7 +81,7 @@ var Button = React.forwardRef(
|
|
|
76
81
|
Comp,
|
|
77
82
|
{
|
|
78
83
|
ref,
|
|
79
|
-
className:
|
|
84
|
+
className: buttonVariants({ variant, size, className }),
|
|
80
85
|
style: {
|
|
81
86
|
borderRadius: BUTTON_TOKENS.radius[button_border_radius],
|
|
82
87
|
...style
|
|
@@ -87,7 +92,117 @@ var Button = React.forwardRef(
|
|
|
87
92
|
}
|
|
88
93
|
);
|
|
89
94
|
Button.displayName = "Button";
|
|
95
|
+
|
|
96
|
+
// src/theme/theme-root.tsx
|
|
97
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
98
|
+
function ThemeRoot({
|
|
99
|
+
theme,
|
|
100
|
+
className,
|
|
101
|
+
children,
|
|
102
|
+
...props
|
|
103
|
+
}) {
|
|
104
|
+
return /* @__PURE__ */ jsx2("div", { "data-theme": theme, className, ...props, children });
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// src/card/card.tsx
|
|
108
|
+
import * as React2 from "react";
|
|
109
|
+
|
|
110
|
+
// src/card/variables.ts
|
|
111
|
+
var CARD_TOKENS = {
|
|
112
|
+
/**
|
|
113
|
+
* Base styles (used by CVA)
|
|
114
|
+
*/
|
|
115
|
+
base: "rounded-lg border text-card-foreground shadow-sm",
|
|
116
|
+
/**
|
|
117
|
+
* Visual variants
|
|
118
|
+
*/
|
|
119
|
+
variants: {
|
|
120
|
+
variant: {
|
|
121
|
+
default: "border-border bg-card",
|
|
122
|
+
muted: "border-border bg-muted",
|
|
123
|
+
ghost: "border-transparent bg-transparent shadow-none"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
/**
|
|
127
|
+
* Default selections
|
|
128
|
+
*/
|
|
129
|
+
defaults: {
|
|
130
|
+
variant: "default"
|
|
131
|
+
},
|
|
132
|
+
/**
|
|
133
|
+
* Subcomponent styles
|
|
134
|
+
*/
|
|
135
|
+
header: "flex flex-col gap-1.5 p-6",
|
|
136
|
+
title: "text-lg font-semibold leading-none tracking-tight",
|
|
137
|
+
description: "text-sm text-muted-foreground",
|
|
138
|
+
content: "px-6 pb-6",
|
|
139
|
+
footer: "flex items-center px-6 pb-6"
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// src/card/card.tsx
|
|
143
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
144
|
+
function cardVariants(opts = {}) {
|
|
145
|
+
const variant = opts.variant ?? CARD_TOKENS.defaults.variant;
|
|
146
|
+
return cn(CARD_TOKENS.base, CARD_TOKENS.variants.variant[variant], opts.className);
|
|
147
|
+
}
|
|
148
|
+
var Card = React2.forwardRef(
|
|
149
|
+
({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
150
|
+
"div",
|
|
151
|
+
{
|
|
152
|
+
ref,
|
|
153
|
+
className: cardVariants({ variant, className }),
|
|
154
|
+
...props
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
);
|
|
158
|
+
Card.displayName = "Card";
|
|
159
|
+
var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
160
|
+
"div",
|
|
161
|
+
{
|
|
162
|
+
ref,
|
|
163
|
+
className: cn(CARD_TOKENS.header, className),
|
|
164
|
+
...props
|
|
165
|
+
}
|
|
166
|
+
));
|
|
167
|
+
CardHeader.displayName = "CardHeader";
|
|
168
|
+
var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
169
|
+
"h3",
|
|
170
|
+
{
|
|
171
|
+
ref,
|
|
172
|
+
className: cn(CARD_TOKENS.title, className),
|
|
173
|
+
...props
|
|
174
|
+
}
|
|
175
|
+
));
|
|
176
|
+
CardTitle.displayName = "CardTitle";
|
|
177
|
+
var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
178
|
+
"p",
|
|
179
|
+
{
|
|
180
|
+
ref,
|
|
181
|
+
className: cn(CARD_TOKENS.description, className),
|
|
182
|
+
...props
|
|
183
|
+
}
|
|
184
|
+
));
|
|
185
|
+
CardDescription.displayName = "CardDescription";
|
|
186
|
+
var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn(CARD_TOKENS.content, className), ...props }));
|
|
187
|
+
CardContent.displayName = "CardContent";
|
|
188
|
+
var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
189
|
+
"div",
|
|
190
|
+
{
|
|
191
|
+
ref,
|
|
192
|
+
className: cn(CARD_TOKENS.footer, className),
|
|
193
|
+
...props
|
|
194
|
+
}
|
|
195
|
+
));
|
|
196
|
+
CardFooter.displayName = "CardFooter";
|
|
90
197
|
export {
|
|
91
198
|
Button,
|
|
92
|
-
|
|
199
|
+
Card,
|
|
200
|
+
CardContent,
|
|
201
|
+
CardDescription,
|
|
202
|
+
CardFooter,
|
|
203
|
+
CardHeader,
|
|
204
|
+
CardTitle,
|
|
205
|
+
ThemeRoot,
|
|
206
|
+
buttonVariants,
|
|
207
|
+
cardVariants
|
|
93
208
|
};
|
package/package.json
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nurix/ui-component-library",
|
|
3
|
-
"version": "1.1.2-stage.
|
|
3
|
+
"version": "1.1.2-stage.55",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"import": "./dist/index.js",
|
|
10
|
+
"require": "./dist/index.cjs"
|
|
11
|
+
},
|
|
12
|
+
"./globals.css": "./dist/globals.css"
|
|
13
|
+
},
|
|
6
14
|
"files": [
|
|
7
15
|
"dist"
|
|
8
16
|
],
|