@nurix/ui-component-library 1.0.1-stage.17 → 1.0.1-stage.19
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/index.d.mts +69 -6
- package/dist/index.d.ts +69 -6
- package/dist/index.js +101 -5
- package/dist/index.mjs +89 -4
- package/package.json +23 -12
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,73 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React$1 from 'react';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Button design tokens
|
|
6
|
+
* Single source of truth for Button styling decisions
|
|
7
|
+
*/
|
|
8
|
+
declare const BUTTON_TOKENS: {
|
|
9
|
+
/**
|
|
10
|
+
* Base styles (used by CVA)
|
|
11
|
+
*/
|
|
12
|
+
readonly base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
|
|
13
|
+
/**
|
|
14
|
+
* Visual variants
|
|
15
|
+
*/
|
|
16
|
+
readonly variants: {
|
|
17
|
+
readonly variant: {
|
|
18
|
+
readonly default: "bg-primary text-primary-foreground hover:bg-primary/90";
|
|
19
|
+
readonly destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90";
|
|
20
|
+
readonly outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground";
|
|
21
|
+
readonly secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80";
|
|
22
|
+
readonly ghost: "hover:bg-accent hover:text-accent-foreground";
|
|
23
|
+
readonly link: "text-primary underline-offset-4 hover:underline";
|
|
24
|
+
};
|
|
25
|
+
readonly size: {
|
|
26
|
+
readonly default: "h-10 px-4 py-2";
|
|
27
|
+
readonly sm: "h-9 px-3";
|
|
28
|
+
readonly lg: "h-11 px-8";
|
|
29
|
+
readonly icon: "h-10 w-10";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Default selections
|
|
34
|
+
*/
|
|
35
|
+
readonly defaults: {
|
|
36
|
+
readonly variant: "default";
|
|
37
|
+
readonly size: "default";
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Component-scoped radius tokens
|
|
41
|
+
* NOT Tailwind
|
|
42
|
+
* NOT global
|
|
43
|
+
*/
|
|
44
|
+
readonly radius: {
|
|
45
|
+
readonly none: "0px";
|
|
46
|
+
readonly soft: "6px";
|
|
47
|
+
readonly rounded: "10px";
|
|
48
|
+
readonly pill: "9999px";
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
|
|
53
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
54
|
+
variant?: keyof typeof BUTTON_TOKENS.variants.variant;
|
|
55
|
+
size?: keyof typeof BUTTON_TOKENS.variants.size;
|
|
56
|
+
onClick?: () => void;
|
|
57
|
+
/**
|
|
58
|
+
* Design-system controlled border radius
|
|
59
|
+
*/
|
|
60
|
+
button_border_radius?: ButtonBorderRadius;
|
|
61
|
+
asChild?: boolean;
|
|
6
62
|
}
|
|
7
63
|
|
|
8
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Compile tokens → CVA
|
|
66
|
+
*/
|
|
67
|
+
declare const buttonVariants: (props?: ({
|
|
68
|
+
readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
69
|
+
readonly size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
70
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
71
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
9
72
|
|
|
10
|
-
export { Button };
|
|
73
|
+
export { Button, type ButtonProps, buttonVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,73 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React$1 from 'react';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Button design tokens
|
|
6
|
+
* Single source of truth for Button styling decisions
|
|
7
|
+
*/
|
|
8
|
+
declare const BUTTON_TOKENS: {
|
|
9
|
+
/**
|
|
10
|
+
* Base styles (used by CVA)
|
|
11
|
+
*/
|
|
12
|
+
readonly base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
|
|
13
|
+
/**
|
|
14
|
+
* Visual variants
|
|
15
|
+
*/
|
|
16
|
+
readonly variants: {
|
|
17
|
+
readonly variant: {
|
|
18
|
+
readonly default: "bg-primary text-primary-foreground hover:bg-primary/90";
|
|
19
|
+
readonly destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90";
|
|
20
|
+
readonly outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground";
|
|
21
|
+
readonly secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80";
|
|
22
|
+
readonly ghost: "hover:bg-accent hover:text-accent-foreground";
|
|
23
|
+
readonly link: "text-primary underline-offset-4 hover:underline";
|
|
24
|
+
};
|
|
25
|
+
readonly size: {
|
|
26
|
+
readonly default: "h-10 px-4 py-2";
|
|
27
|
+
readonly sm: "h-9 px-3";
|
|
28
|
+
readonly lg: "h-11 px-8";
|
|
29
|
+
readonly icon: "h-10 w-10";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Default selections
|
|
34
|
+
*/
|
|
35
|
+
readonly defaults: {
|
|
36
|
+
readonly variant: "default";
|
|
37
|
+
readonly size: "default";
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Component-scoped radius tokens
|
|
41
|
+
* NOT Tailwind
|
|
42
|
+
* NOT global
|
|
43
|
+
*/
|
|
44
|
+
readonly radius: {
|
|
45
|
+
readonly none: "0px";
|
|
46
|
+
readonly soft: "6px";
|
|
47
|
+
readonly rounded: "10px";
|
|
48
|
+
readonly pill: "9999px";
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
|
|
53
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
54
|
+
variant?: keyof typeof BUTTON_TOKENS.variants.variant;
|
|
55
|
+
size?: keyof typeof BUTTON_TOKENS.variants.size;
|
|
56
|
+
onClick?: () => void;
|
|
57
|
+
/**
|
|
58
|
+
* Design-system controlled border radius
|
|
59
|
+
*/
|
|
60
|
+
button_border_radius?: ButtonBorderRadius;
|
|
61
|
+
asChild?: boolean;
|
|
6
62
|
}
|
|
7
63
|
|
|
8
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Compile tokens → CVA
|
|
66
|
+
*/
|
|
67
|
+
declare const buttonVariants: (props?: ({
|
|
68
|
+
readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
69
|
+
readonly size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
70
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
71
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
9
72
|
|
|
10
|
-
export { Button };
|
|
73
|
+
export { Button, type ButtonProps, buttonVariants };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,21 +17,115 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.ts
|
|
21
31
|
var index_exports = {};
|
|
22
32
|
__export(index_exports, {
|
|
23
|
-
Button: () => Button
|
|
33
|
+
Button: () => Button,
|
|
34
|
+
buttonVariants: () => buttonVariants
|
|
24
35
|
});
|
|
25
36
|
module.exports = __toCommonJS(index_exports);
|
|
26
37
|
|
|
27
38
|
// src/button/button.tsx
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
|
|
39
|
+
var React = __toESM(require("react"));
|
|
40
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
41
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
42
|
+
|
|
43
|
+
// src/button/variables.ts
|
|
44
|
+
var BUTTON_TOKENS = {
|
|
45
|
+
/**
|
|
46
|
+
* Base styles (used by CVA)
|
|
47
|
+
*/
|
|
48
|
+
base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
|
|
49
|
+
/**
|
|
50
|
+
* Visual variants
|
|
51
|
+
*/
|
|
52
|
+
variants: {
|
|
53
|
+
variant: {
|
|
54
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
55
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
56
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
57
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
58
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
59
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
60
|
+
},
|
|
61
|
+
size: {
|
|
62
|
+
default: "h-10 px-4 py-2",
|
|
63
|
+
sm: "h-9 px-3",
|
|
64
|
+
lg: "h-11 px-8",
|
|
65
|
+
icon: "h-10 w-10"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
/**
|
|
69
|
+
* Default selections
|
|
70
|
+
*/
|
|
71
|
+
defaults: {
|
|
72
|
+
variant: "default",
|
|
73
|
+
size: "default"
|
|
74
|
+
},
|
|
75
|
+
/**
|
|
76
|
+
* Component-scoped radius tokens
|
|
77
|
+
* NOT Tailwind
|
|
78
|
+
* NOT global
|
|
79
|
+
*/
|
|
80
|
+
radius: {
|
|
81
|
+
none: "0px",
|
|
82
|
+
soft: "6px",
|
|
83
|
+
rounded: "10px",
|
|
84
|
+
pill: "9999px"
|
|
85
|
+
}
|
|
31
86
|
};
|
|
87
|
+
|
|
88
|
+
// src/lib/utils.ts
|
|
89
|
+
var import_clsx = require("clsx");
|
|
90
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
91
|
+
function cn(...inputs) {
|
|
92
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// src/button/button.tsx
|
|
96
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
97
|
+
var buttonVariants = (0, import_class_variance_authority.cva)(BUTTON_TOKENS.base, {
|
|
98
|
+
variants: BUTTON_TOKENS.variants,
|
|
99
|
+
defaultVariants: BUTTON_TOKENS.defaults
|
|
100
|
+
});
|
|
101
|
+
var Button = React.forwardRef(
|
|
102
|
+
({
|
|
103
|
+
className,
|
|
104
|
+
variant,
|
|
105
|
+
size,
|
|
106
|
+
asChild = false,
|
|
107
|
+
button_border_radius = "rounded",
|
|
108
|
+
style,
|
|
109
|
+
...props
|
|
110
|
+
}, ref) => {
|
|
111
|
+
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
Comp,
|
|
114
|
+
{
|
|
115
|
+
ref,
|
|
116
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
117
|
+
style: {
|
|
118
|
+
borderRadius: BUTTON_TOKENS.radius[button_border_radius],
|
|
119
|
+
...style
|
|
120
|
+
},
|
|
121
|
+
...props
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
Button.displayName = "Button";
|
|
32
127
|
// Annotate the CommonJS export names for ESM import in node:
|
|
33
128
|
0 && (module.exports = {
|
|
34
|
-
Button
|
|
129
|
+
Button,
|
|
130
|
+
buttonVariants
|
|
35
131
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,93 @@
|
|
|
1
1
|
// src/button/button.tsx
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
|
|
6
|
+
// src/button/variables.ts
|
|
7
|
+
var BUTTON_TOKENS = {
|
|
8
|
+
/**
|
|
9
|
+
* Base styles (used by CVA)
|
|
10
|
+
*/
|
|
11
|
+
base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
|
|
12
|
+
/**
|
|
13
|
+
* Visual variants
|
|
14
|
+
*/
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
18
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
19
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
20
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
21
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
22
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
23
|
+
},
|
|
24
|
+
size: {
|
|
25
|
+
default: "h-10 px-4 py-2",
|
|
26
|
+
sm: "h-9 px-3",
|
|
27
|
+
lg: "h-11 px-8",
|
|
28
|
+
icon: "h-10 w-10"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
/**
|
|
32
|
+
* Default selections
|
|
33
|
+
*/
|
|
34
|
+
defaults: {
|
|
35
|
+
variant: "default",
|
|
36
|
+
size: "default"
|
|
37
|
+
},
|
|
38
|
+
/**
|
|
39
|
+
* Component-scoped radius tokens
|
|
40
|
+
* NOT Tailwind
|
|
41
|
+
* NOT global
|
|
42
|
+
*/
|
|
43
|
+
radius: {
|
|
44
|
+
none: "0px",
|
|
45
|
+
soft: "6px",
|
|
46
|
+
rounded: "10px",
|
|
47
|
+
pill: "9999px"
|
|
48
|
+
}
|
|
5
49
|
};
|
|
50
|
+
|
|
51
|
+
// src/lib/utils.ts
|
|
52
|
+
import { clsx } from "clsx";
|
|
53
|
+
import { twMerge } from "tailwind-merge";
|
|
54
|
+
function cn(...inputs) {
|
|
55
|
+
return twMerge(clsx(inputs));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// src/button/button.tsx
|
|
59
|
+
import { jsx } from "react/jsx-runtime";
|
|
60
|
+
var buttonVariants = cva(BUTTON_TOKENS.base, {
|
|
61
|
+
variants: BUTTON_TOKENS.variants,
|
|
62
|
+
defaultVariants: BUTTON_TOKENS.defaults
|
|
63
|
+
});
|
|
64
|
+
var Button = React.forwardRef(
|
|
65
|
+
({
|
|
66
|
+
className,
|
|
67
|
+
variant,
|
|
68
|
+
size,
|
|
69
|
+
asChild = false,
|
|
70
|
+
button_border_radius = "rounded",
|
|
71
|
+
style,
|
|
72
|
+
...props
|
|
73
|
+
}, ref) => {
|
|
74
|
+
const Comp = asChild ? Slot : "button";
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
Comp,
|
|
77
|
+
{
|
|
78
|
+
ref,
|
|
79
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
80
|
+
style: {
|
|
81
|
+
borderRadius: BUTTON_TOKENS.radius[button_border_radius],
|
|
82
|
+
...style
|
|
83
|
+
},
|
|
84
|
+
...props
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
Button.displayName = "Button";
|
|
6
90
|
export {
|
|
7
|
-
Button
|
|
91
|
+
Button,
|
|
92
|
+
buttonVariants
|
|
8
93
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nurix/ui-component-library",
|
|
3
|
-
"version": "1.0.1-stage.
|
|
3
|
+
"version": "1.0.1-stage.19",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -16,21 +16,32 @@
|
|
|
16
16
|
"react-dom": ">=18 <19"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"react": "^18.3.1",
|
|
20
|
-
"react-dom": "^18.3.1",
|
|
21
|
-
"@types/react": "^18.2.0",
|
|
22
|
-
"tsup": "^8.5.1",
|
|
23
|
-
"typescript": "^5.9.3",
|
|
24
|
-
"storybook": "^10.1.11",
|
|
25
|
-
"@storybook/react-vite": "^10.1.11",
|
|
26
19
|
"@chromatic-com/storybook": "^4.1.3",
|
|
27
|
-
"@storybook/addon-vitest": "^10.1.11",
|
|
28
20
|
"@storybook/addon-a11y": "^10.1.11",
|
|
29
21
|
"@storybook/addon-docs": "^10.1.11",
|
|
30
22
|
"@storybook/addon-onboarding": "^10.1.11",
|
|
31
|
-
"vitest": "^
|
|
32
|
-
"
|
|
23
|
+
"@storybook/addon-vitest": "^10.1.11",
|
|
24
|
+
"@storybook/react-vite": "^10.1.11",
|
|
25
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
26
|
+
"@types/react": "^18.2.0",
|
|
33
27
|
"@vitest/browser-playwright": "^4.0.16",
|
|
34
|
-
"@vitest/coverage-v8": "^4.0.16"
|
|
28
|
+
"@vitest/coverage-v8": "^4.0.16",
|
|
29
|
+
"autoprefixer": "^10.4.23",
|
|
30
|
+
"playwright": "^1.57.0",
|
|
31
|
+
"postcss": "^8.5.6",
|
|
32
|
+
"react": "^18.3.1",
|
|
33
|
+
"react-dom": "^18.3.1",
|
|
34
|
+
"storybook": "^10.1.11",
|
|
35
|
+
"tailwindcss": "^4.1.18",
|
|
36
|
+
"tsup": "^8.5.1",
|
|
37
|
+
"typescript": "^5.9.3",
|
|
38
|
+
"vitest": "^4.0.16"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@radix-ui/react-slot": "^1.2.4",
|
|
42
|
+
"class-variance-authority": "^0.7.1",
|
|
43
|
+
"clsx": "^2.1.1",
|
|
44
|
+
"lucide-react": "^0.562.0",
|
|
45
|
+
"tailwind-merge": "^3.4.0"
|
|
35
46
|
}
|
|
36
47
|
}
|