@nurix/ui-component-library 1.1.3 → 1.1.4

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 CHANGED
@@ -1,8 +1,7 @@
1
- import * as class_variance_authority_types from 'class-variance-authority/types';
2
1
  import * as React$1 from 'react';
3
2
 
4
3
  type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
5
- type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
4
+ type ButtonVariant = "primary" | "destructive" | "outline" | "secondary" | "link";
6
5
  type ButtonSize = "default" | "sm" | "lg" | "icon";
7
6
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
8
7
  variant?: ButtonVariant;
@@ -15,13 +14,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
15
14
  asChild?: boolean;
16
15
  }
17
16
 
18
- /**
19
- * Compile tokens → CVA
20
- */
21
- declare const buttonVariants: (props?: ({
22
- readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
23
- readonly size?: "default" | "sm" | "lg" | "icon" | null | undefined;
24
- } & class_variance_authority_types.ClassProp) | undefined) => string;
25
17
  declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
26
18
 
27
- export { Button, type ButtonProps, buttonVariants };
19
+ export { Button, type ButtonProps };
package/dist/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import * as class_variance_authority_types from 'class-variance-authority/types';
2
1
  import * as React$1 from 'react';
3
2
 
4
3
  type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
5
- type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
4
+ type ButtonVariant = "primary" | "destructive" | "outline" | "secondary" | "link";
6
5
  type ButtonSize = "default" | "sm" | "lg" | "icon";
7
6
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
8
7
  variant?: ButtonVariant;
@@ -15,13 +14,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
15
14
  asChild?: boolean;
16
15
  }
17
16
 
18
- /**
19
- * Compile tokens → CVA
20
- */
21
- declare const buttonVariants: (props?: ({
22
- readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
23
- readonly size?: "default" | "sm" | "lg" | "icon" | null | undefined;
24
- } & class_variance_authority_types.ClassProp) | undefined) => string;
25
17
  declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
26
18
 
27
- export { Button, type ButtonProps, buttonVariants };
19
+ export { Button, type ButtonProps };
package/dist/index.js CHANGED
@@ -30,58 +30,41 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
- Button: () => Button,
34
- buttonVariants: () => buttonVariants
33
+ Button: () => Button
35
34
  });
36
35
  module.exports = __toCommonJS(index_exports);
37
36
 
38
37
  // src/button/button.tsx
39
38
  var React = __toESM(require("react"));
40
39
  var import_react_slot = require("@radix-ui/react-slot");
41
- var import_class_variance_authority = require("class-variance-authority");
42
40
 
43
- // src/button/variables.ts
41
+ // src/button/ButtonToken.ts
44
42
  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-10 px-8",
65
- icon: "h-10 w-10"
66
- }
43
+ base: "relative inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none [&>svg]:h-4 [&>svg]:w-4",
44
+ hoverOverlay: "overflow-hidden after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit] after:bg-black/10 after:opacity-0 after:transition-opacity hover:after:opacity-100",
45
+ variant: {
46
+ primary: "bg-primary text-primary-foreground disabled:opacity-50",
47
+ secondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-background disabled:opacity-100",
48
+ destructive: "bg-destructive text-destructive-foreground disabled:opacity-50",
49
+ outline: "border border-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-[#b2b2b2] disabled:text-[#b2b2b2] disabled:opacity-100",
50
+ link: "bg-transparent text-foreground hover:text-primary disabled:text-muted-foreground disabled:opacity-100",
51
+ // Icon-only variants (pair with size `icon` / `iconSm`)
52
+ iconPrimary: "bg-primary text-primary-foreground disabled:opacity-50",
53
+ iconSecondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-secondary disabled:opacity-100",
54
+ iconOutline: "border border-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-[#b2b2b2] disabled:text-[#b2b2b2] disabled:opacity-100"
67
55
  },
68
- /**
69
- * Default selections
70
- */
71
- defaults: {
72
- variant: "default",
73
- size: "default"
56
+ size: {
57
+ default: "h-10 px-4 py-2",
58
+ sm: "h-9 px-3",
59
+ lg: "h-10 px-8",
60
+ icon: "h-10 w-10",
61
+ iconSm: "h-9 w-9"
74
62
  },
75
- /**
76
- * Component-scoped radius tokens
77
- * NOT Tailwind
78
- * NOT global
79
- */
80
63
  radius: {
81
- none: "0px",
82
- soft: "6px",
83
- rounded: "10px",
84
- pill: "9999px"
64
+ none: `4px`,
65
+ soft: `4px`,
66
+ rounded: `4px`,
67
+ pill: `9999px`
85
68
  }
86
69
  };
87
70
 
@@ -92,16 +75,71 @@ function cn(...inputs) {
92
75
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
93
76
  }
94
77
 
95
- // src/button/button.tsx
78
+ // src/theme/theme-provider.tsx
79
+ var import_react = require("react");
96
80
  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
- });
81
+ var initialState = {
82
+ theme: "system",
83
+ setTheme: () => null,
84
+ resolvedTheme: "light"
85
+ };
86
+ var ThemeProviderContext = (0, import_react.createContext)(initialState);
87
+ function getSystemTheme() {
88
+ if (typeof window === "undefined") return "light";
89
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
90
+ }
91
+ function ThemeProvider({
92
+ children,
93
+ defaultTheme = "system",
94
+ storageKey = "lego-land-theme",
95
+ ...props
96
+ }) {
97
+ const [theme, setThemeState] = (0, import_react.useState)(() => {
98
+ if (typeof window === "undefined") return defaultTheme;
99
+ return localStorage.getItem(storageKey) || defaultTheme;
100
+ });
101
+ const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(() => {
102
+ if (theme === "system") return getSystemTheme();
103
+ return theme;
104
+ });
105
+ (0, import_react.useEffect)(() => {
106
+ const root = window.document.documentElement;
107
+ root.classList.remove("light", "dark");
108
+ const resolved = theme === "system" ? getSystemTheme() : theme;
109
+ setResolvedTheme(resolved);
110
+ root.classList.add(resolved);
111
+ }, [theme]);
112
+ (0, import_react.useEffect)(() => {
113
+ if (theme !== "system") return;
114
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
115
+ const handleChange = (e) => {
116
+ const newTheme = e.matches ? "dark" : "light";
117
+ setResolvedTheme(newTheme);
118
+ const root = window.document.documentElement;
119
+ root.classList.remove("light", "dark");
120
+ root.classList.add(newTheme);
121
+ };
122
+ mediaQuery.addEventListener("change", handleChange);
123
+ return () => mediaQuery.removeEventListener("change", handleChange);
124
+ }, [theme]);
125
+ const setTheme = (newTheme) => {
126
+ localStorage.setItem(storageKey, newTheme);
127
+ setThemeState(newTheme);
128
+ };
129
+ const value = {
130
+ theme,
131
+ setTheme,
132
+ resolvedTheme
133
+ };
134
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
135
+ }
136
+
137
+ // src/button/button.tsx
138
+ var import_jsx_runtime2 = require("react/jsx-runtime");
101
139
  var Button = React.forwardRef(
102
140
  ({
103
141
  className,
104
- variant,
142
+ variant = "primary",
105
143
  size,
106
144
  asChild = false,
107
145
  button_border_radius = "rounded",
@@ -109,23 +147,27 @@ var Button = React.forwardRef(
109
147
  ...props
110
148
  }, ref) => {
111
149
  const Comp = asChild ? import_react_slot.Slot : "button";
112
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
150
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeProvider, { defaultTheme: "light", storageKey: "lego-land-theme", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
113
151
  Comp,
114
152
  {
115
153
  ref,
116
- className: cn(buttonVariants({ variant, size, className })),
154
+ className: cn(
155
+ BUTTON_TOKENS.base,
156
+ BUTTON_TOKENS.variant[variant],
157
+ BUTTON_TOKENS.size[size != null ? size : "default"],
158
+ className
159
+ ),
117
160
  style: {
118
161
  borderRadius: BUTTON_TOKENS.radius[button_border_radius],
119
162
  ...style
120
163
  },
121
164
  ...props
122
165
  }
123
- );
166
+ ) });
124
167
  }
125
168
  );
126
169
  Button.displayName = "Button";
127
170
  // Annotate the CommonJS export names for ESM import in node:
128
171
  0 && (module.exports = {
129
- Button,
130
- buttonVariants
172
+ Button
131
173
  });
package/dist/index.mjs CHANGED
@@ -1,50 +1,34 @@
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
- // src/button/variables.ts
5
+ // src/button/ButtonToken.ts
7
6
  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-10 px-8",
28
- icon: "h-10 w-10"
29
- }
7
+ base: "relative inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none [&>svg]:h-4 [&>svg]:w-4",
8
+ hoverOverlay: "overflow-hidden after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit] after:bg-black/10 after:opacity-0 after:transition-opacity hover:after:opacity-100",
9
+ variant: {
10
+ primary: "bg-primary text-primary-foreground disabled:opacity-50",
11
+ secondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-background disabled:opacity-100",
12
+ destructive: "bg-destructive text-destructive-foreground disabled:opacity-50",
13
+ outline: "border border-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-[#b2b2b2] disabled:text-[#b2b2b2] disabled:opacity-100",
14
+ link: "bg-transparent text-foreground hover:text-primary disabled:text-muted-foreground disabled:opacity-100",
15
+ // Icon-only variants (pair with size `icon` / `iconSm`)
16
+ iconPrimary: "bg-primary text-primary-foreground disabled:opacity-50",
17
+ iconSecondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-secondary disabled:opacity-100",
18
+ iconOutline: "border border-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-[#b2b2b2] disabled:text-[#b2b2b2] disabled:opacity-100"
30
19
  },
31
- /**
32
- * Default selections
33
- */
34
- defaults: {
35
- variant: "default",
36
- size: "default"
20
+ size: {
21
+ default: "h-10 px-4 py-2",
22
+ sm: "h-9 px-3",
23
+ lg: "h-10 px-8",
24
+ icon: "h-10 w-10",
25
+ iconSm: "h-9 w-9"
37
26
  },
38
- /**
39
- * Component-scoped radius tokens
40
- * NOT Tailwind
41
- * NOT global
42
- */
43
27
  radius: {
44
- none: "0px",
45
- soft: "6px",
46
- rounded: "10px",
47
- pill: "9999px"
28
+ none: `4px`,
29
+ soft: `4px`,
30
+ rounded: `4px`,
31
+ pill: `9999px`
48
32
  }
49
33
  };
50
34
 
@@ -55,16 +39,71 @@ function cn(...inputs) {
55
39
  return twMerge(clsx(inputs));
56
40
  }
57
41
 
58
- // src/button/button.tsx
42
+ // src/theme/theme-provider.tsx
43
+ import { createContext, useContext, useEffect, useState } from "react";
59
44
  import { jsx } from "react/jsx-runtime";
60
- var buttonVariants = cva(BUTTON_TOKENS.base, {
61
- variants: BUTTON_TOKENS.variants,
62
- defaultVariants: BUTTON_TOKENS.defaults
63
- });
45
+ var initialState = {
46
+ theme: "system",
47
+ setTheme: () => null,
48
+ resolvedTheme: "light"
49
+ };
50
+ var ThemeProviderContext = createContext(initialState);
51
+ function getSystemTheme() {
52
+ if (typeof window === "undefined") return "light";
53
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
54
+ }
55
+ function ThemeProvider({
56
+ children,
57
+ defaultTheme = "system",
58
+ storageKey = "lego-land-theme",
59
+ ...props
60
+ }) {
61
+ const [theme, setThemeState] = useState(() => {
62
+ if (typeof window === "undefined") return defaultTheme;
63
+ return localStorage.getItem(storageKey) || defaultTheme;
64
+ });
65
+ const [resolvedTheme, setResolvedTheme] = useState(() => {
66
+ if (theme === "system") return getSystemTheme();
67
+ return theme;
68
+ });
69
+ useEffect(() => {
70
+ const root = window.document.documentElement;
71
+ root.classList.remove("light", "dark");
72
+ const resolved = theme === "system" ? getSystemTheme() : theme;
73
+ setResolvedTheme(resolved);
74
+ root.classList.add(resolved);
75
+ }, [theme]);
76
+ useEffect(() => {
77
+ if (theme !== "system") return;
78
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
79
+ const handleChange = (e) => {
80
+ const newTheme = e.matches ? "dark" : "light";
81
+ setResolvedTheme(newTheme);
82
+ const root = window.document.documentElement;
83
+ root.classList.remove("light", "dark");
84
+ root.classList.add(newTheme);
85
+ };
86
+ mediaQuery.addEventListener("change", handleChange);
87
+ return () => mediaQuery.removeEventListener("change", handleChange);
88
+ }, [theme]);
89
+ const setTheme = (newTheme) => {
90
+ localStorage.setItem(storageKey, newTheme);
91
+ setThemeState(newTheme);
92
+ };
93
+ const value = {
94
+ theme,
95
+ setTheme,
96
+ resolvedTheme
97
+ };
98
+ return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { ...props, value, children });
99
+ }
100
+
101
+ // src/button/button.tsx
102
+ import { jsx as jsx2 } from "react/jsx-runtime";
64
103
  var Button = React.forwardRef(
65
104
  ({
66
105
  className,
67
- variant,
106
+ variant = "primary",
68
107
  size,
69
108
  asChild = false,
70
109
  button_border_radius = "rounded",
@@ -72,22 +111,26 @@ var Button = React.forwardRef(
72
111
  ...props
73
112
  }, ref) => {
74
113
  const Comp = asChild ? Slot : "button";
75
- return /* @__PURE__ */ jsx(
114
+ return /* @__PURE__ */ jsx2(ThemeProvider, { defaultTheme: "light", storageKey: "lego-land-theme", children: /* @__PURE__ */ jsx2(
76
115
  Comp,
77
116
  {
78
117
  ref,
79
- className: cn(buttonVariants({ variant, size, className })),
118
+ className: cn(
119
+ BUTTON_TOKENS.base,
120
+ BUTTON_TOKENS.variant[variant],
121
+ BUTTON_TOKENS.size[size != null ? size : "default"],
122
+ className
123
+ ),
80
124
  style: {
81
125
  borderRadius: BUTTON_TOKENS.radius[button_border_radius],
82
126
  ...style
83
127
  },
84
128
  ...props
85
129
  }
86
- );
130
+ ) });
87
131
  }
88
132
  );
89
133
  Button.displayName = "Button";
90
134
  export {
91
- Button,
92
- buttonVariants
135
+ Button
93
136
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nurix/ui-component-library",
3
- "version": "1.1.3",
3
+ "version": "1.1.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -44,4 +44,4 @@
44
44
  "lucide-react": "^0.562.0",
45
45
  "tailwind-merge": "^3.4.0"
46
46
  }
47
- }
47
+ }