huly-ui 0.0.3 → 0.0.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.ts +70 -0
- package/dist/index.js +136 -0
- package/dist/index.js.map +1 -0
- package/package.json +12 -33
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type ButtonLinkProps = {
|
|
4
|
+
href: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
icon: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
type variantButtonProps = {
|
|
9
|
+
variant?: keyof typeof variantButton;
|
|
10
|
+
};
|
|
11
|
+
type bgButtonProps = {
|
|
12
|
+
bg?: keyof typeof bgButton;
|
|
13
|
+
};
|
|
14
|
+
type hoverButtonProps = {
|
|
15
|
+
hover?: keyof typeof hoverButton;
|
|
16
|
+
};
|
|
17
|
+
type sizeButtonProps = {
|
|
18
|
+
size?: keyof typeof sizeButton;
|
|
19
|
+
};
|
|
20
|
+
type roundedButtonProps = {
|
|
21
|
+
rounded?: keyof typeof roundedButton;
|
|
22
|
+
};
|
|
23
|
+
type ButtonProps = variantButtonProps & bgButtonProps & hoverButtonProps & sizeButtonProps & roundedButtonProps & {
|
|
24
|
+
linksButton: ButtonLinkProps;
|
|
25
|
+
};
|
|
26
|
+
declare const variantButton: {
|
|
27
|
+
primary: string;
|
|
28
|
+
glass: string;
|
|
29
|
+
ghost: string;
|
|
30
|
+
};
|
|
31
|
+
declare const bgButton: {
|
|
32
|
+
light: string;
|
|
33
|
+
dark: string;
|
|
34
|
+
};
|
|
35
|
+
declare const hoverButton: {
|
|
36
|
+
light: string;
|
|
37
|
+
dark: string;
|
|
38
|
+
};
|
|
39
|
+
declare const sizeButton: {
|
|
40
|
+
md: string;
|
|
41
|
+
lg: string;
|
|
42
|
+
xl: string;
|
|
43
|
+
xs: string;
|
|
44
|
+
};
|
|
45
|
+
declare const roundedButton: {
|
|
46
|
+
md: string;
|
|
47
|
+
lg: string;
|
|
48
|
+
xl: string;
|
|
49
|
+
sm: string;
|
|
50
|
+
full: string;
|
|
51
|
+
};
|
|
52
|
+
declare const Button: ({ variant, bg, hover, size, rounded, linksButton, }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
53
|
+
|
|
54
|
+
type NavLink = {
|
|
55
|
+
href: string;
|
|
56
|
+
label?: string;
|
|
57
|
+
icon: React.ReactNode;
|
|
58
|
+
};
|
|
59
|
+
type NavigationProps = {
|
|
60
|
+
variant?: "primary" | "glass" | "ghost";
|
|
61
|
+
bg?: "light" | "dark";
|
|
62
|
+
hover?: "light" | "dark";
|
|
63
|
+
links: NavLink[];
|
|
64
|
+
size: "md" | "lg" | "xl" | "xs";
|
|
65
|
+
text?: "light" | "dark";
|
|
66
|
+
rounded?: "md" | "lg" | "xl" | "xs" | "full";
|
|
67
|
+
};
|
|
68
|
+
declare const Navigation: ({ variant, bg, hover, links, size, text, rounded, }: NavigationProps) => react_jsx_runtime.JSX.Element;
|
|
69
|
+
|
|
70
|
+
export { Button, Navigation };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
// src/components/buttoms/buttom.tsx
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { jsxs } from "react/jsx-runtime";
|
|
4
|
+
var baseButton = "px-4 py-2 text-lg backdrop-blur-md flex items-center gap-2 transition-colors duration-300";
|
|
5
|
+
var variantButton = {
|
|
6
|
+
primary: "border border-gray-700 px-2 py-2",
|
|
7
|
+
glass: "p-2",
|
|
8
|
+
ghost: "p-2"
|
|
9
|
+
};
|
|
10
|
+
var bgButton = {
|
|
11
|
+
light: "bg-transparent text-light-foreground",
|
|
12
|
+
dark: "bg-black text-white"
|
|
13
|
+
};
|
|
14
|
+
var hoverButton = {
|
|
15
|
+
light: "hover:bg-transparent hover:text-black",
|
|
16
|
+
dark: "hover:bg-black/90 hover:text-white"
|
|
17
|
+
};
|
|
18
|
+
var sizeButton = {
|
|
19
|
+
md: "text-base",
|
|
20
|
+
lg: "text-lg",
|
|
21
|
+
xl: "text-xl",
|
|
22
|
+
xs: "text-xs"
|
|
23
|
+
};
|
|
24
|
+
var roundedButton = {
|
|
25
|
+
md: "rounded-md",
|
|
26
|
+
lg: "rounded-lg",
|
|
27
|
+
xl: "rounded-xl",
|
|
28
|
+
sm: "rounded-sm",
|
|
29
|
+
full: "rounded-full"
|
|
30
|
+
};
|
|
31
|
+
var Button = ({
|
|
32
|
+
variant = "primary",
|
|
33
|
+
bg = "dark",
|
|
34
|
+
hover = "dark",
|
|
35
|
+
size = "md",
|
|
36
|
+
rounded = "md",
|
|
37
|
+
linksButton
|
|
38
|
+
}) => {
|
|
39
|
+
return /* @__PURE__ */ jsxs(
|
|
40
|
+
"a",
|
|
41
|
+
{
|
|
42
|
+
href: linksButton.href,
|
|
43
|
+
className: clsx(
|
|
44
|
+
baseButton,
|
|
45
|
+
variantButton[variant],
|
|
46
|
+
bgButton[bg],
|
|
47
|
+
hoverButton[hover],
|
|
48
|
+
sizeButton[size],
|
|
49
|
+
roundedButton[rounded]
|
|
50
|
+
),
|
|
51
|
+
children: [
|
|
52
|
+
linksButton.icon,
|
|
53
|
+
linksButton.label
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
// src/components/navigations/navigation.tsx
|
|
60
|
+
import clsx2 from "clsx";
|
|
61
|
+
import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
62
|
+
var base = "text-white shadow-lg rounded-full text-lg backdrop-blur-sm";
|
|
63
|
+
var variants = {
|
|
64
|
+
primary: "px-2 py-2",
|
|
65
|
+
glass: "bg-white/5 border border-white/10",
|
|
66
|
+
ghost: "bg-transparent"
|
|
67
|
+
};
|
|
68
|
+
var backgrounds = {
|
|
69
|
+
light: "bg-white/30",
|
|
70
|
+
dark: "bg-black/30"
|
|
71
|
+
};
|
|
72
|
+
var hoverVariants = {
|
|
73
|
+
light: "hover:bg-white hover:text-black",
|
|
74
|
+
dark: "hover:bg-black hover:text-white"
|
|
75
|
+
};
|
|
76
|
+
var sizes = {
|
|
77
|
+
md: "text-md",
|
|
78
|
+
lg: "text-lg",
|
|
79
|
+
xl: "text-xl",
|
|
80
|
+
xs: "text-xs"
|
|
81
|
+
};
|
|
82
|
+
var textColors = {
|
|
83
|
+
light: "text-white",
|
|
84
|
+
dark: "text-black"
|
|
85
|
+
};
|
|
86
|
+
var roundedColors = {
|
|
87
|
+
md: "rounded-md",
|
|
88
|
+
lg: "rounded-lg",
|
|
89
|
+
xl: "rounded-xl",
|
|
90
|
+
xs: "rounded-xs",
|
|
91
|
+
full: "rounded-full"
|
|
92
|
+
};
|
|
93
|
+
var Navigation = ({
|
|
94
|
+
variant = "primary",
|
|
95
|
+
bg = "light",
|
|
96
|
+
hover = "light",
|
|
97
|
+
links,
|
|
98
|
+
size,
|
|
99
|
+
text = "light",
|
|
100
|
+
rounded = "md"
|
|
101
|
+
}) => {
|
|
102
|
+
return /* @__PURE__ */ jsx(
|
|
103
|
+
"nav",
|
|
104
|
+
{
|
|
105
|
+
className: clsx2(
|
|
106
|
+
"flex justify-center m-2",
|
|
107
|
+
base,
|
|
108
|
+
variants[variant],
|
|
109
|
+
backgrounds[bg]
|
|
110
|
+
),
|
|
111
|
+
children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-9", children: links.map((link, index) => /* @__PURE__ */ jsxs2(
|
|
112
|
+
"a",
|
|
113
|
+
{
|
|
114
|
+
href: link.href,
|
|
115
|
+
className: clsx2(
|
|
116
|
+
"p-4 font-mono flex items-center gap-2 rounded-full w-full transition-colors duration-300",
|
|
117
|
+
hoverVariants[hover],
|
|
118
|
+
sizes[size],
|
|
119
|
+
textColors[text],
|
|
120
|
+
roundedColors[rounded]
|
|
121
|
+
),
|
|
122
|
+
children: [
|
|
123
|
+
link.icon,
|
|
124
|
+
link.label
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
index
|
|
128
|
+
)) })
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
|
+
export {
|
|
133
|
+
Button,
|
|
134
|
+
Navigation
|
|
135
|
+
};
|
|
136
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/buttoms/buttom.tsx","../src/components/navigations/navigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\ntype ButtonLinkProps = {\n href: string;\n label?: string;\n icon: React.ReactNode;\n};\ntype variantButtonProps = {\n variant?: keyof typeof variantButton;\n};\ntype bgButtonProps = {\n bg?: keyof typeof bgButton;\n};\ntype hoverButtonProps = {\n hover?: keyof typeof hoverButton;\n};\ntype sizeButtonProps = {\n size?: keyof typeof sizeButton;\n};\ntype roundedButtonProps = {\n rounded?: keyof typeof roundedButton;\n};\n\ntype ButtonProps = variantButtonProps &\n bgButtonProps &\n hoverButtonProps &\n sizeButtonProps &\n roundedButtonProps & {\n linksButton: ButtonLinkProps;\n };\nconst baseButton =\n \"px-4 py-2 text-lg backdrop-blur-md flex items-center gap-2 transition-colors duration-300\";\n\nconst variantButton = {\n primary: \"border border-gray-700 px-2 py-2\",\n glass: \"p-2\",\n ghost: \"p-2\",\n};\n\nconst bgButton = {\n light: \"bg-transparent text-light-foreground\",\n dark: \"bg-black text-white\",\n};\n\nconst hoverButton = {\n light: \"hover:bg-transparent hover:text-black\",\n dark: \"hover:bg-black/90 hover:text-white\",\n};\n\nconst sizeButton = {\n md: \"text-base\",\n lg: \"text-lg\",\n xl: \"text-xl\",\n xs: \"text-xs\",\n};\n\nconst roundedButton = {\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n sm: \"rounded-sm\",\n full: \"rounded-full\",\n};\n\nexport const Button = ({\n variant = \"primary\",\n bg = \"dark\",\n hover = \"dark\",\n size = \"md\",\n rounded = \"md\",\n linksButton,\n}: ButtonProps) => {\n return (\n <a\n href={linksButton.href}\n className={clsx(\n baseButton,\n variantButton[variant],\n bgButton[bg],\n hoverButton[hover],\n sizeButton[size],\n roundedButton[rounded]\n )}\n >\n {linksButton.icon}\n {linksButton.label}\n </a>\n );\n};\n","import clsx from \"clsx\";\n\ntype NavLink = {\n href: string;\n label?: string;\n icon: React.ReactNode;\n};\n\ntype NavigationProps = {\n variant?: \"primary\" | \"glass\" | \"ghost\";\n bg?: \"light\" | \"dark\";\n hover?: \"light\" | \"dark\";\n links: NavLink[];\n size: \"md\" | \"lg\" | \"xl\" | \"xs\";\n text?: \"light\" | \"dark\";\n rounded?: \"md\" | \"lg\" | \"xl\" | \"xs\" | \"full\";\n};\n\nconst base = \"text-white shadow-lg rounded-full text-lg backdrop-blur-sm\";\n\nconst variants = {\n primary: \"px-2 py-2\",\n glass: \"bg-white/5 border border-white/10\",\n ghost: \"bg-transparent\",\n};\n\nconst backgrounds = {\n light: \"bg-white/30\",\n dark: \"bg-black/30\",\n};\n\nconst hoverVariants = {\n light: \"hover:bg-white hover:text-black\",\n dark: \"hover:bg-black hover:text-white\",\n};\nconst sizes = {\n md: \"text-md\",\n lg: \"text-lg\",\n xl: \"text-xl\",\n xs: \"text-xs\",\n};\n\nconst textColors = {\n light: \"text-white\",\n dark: \"text-black\",\n};\n\nconst roundedColors = {\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n xs: \"rounded-xs\",\n full: \"rounded-full\",\n};\n\nexport const Navigation = ({\n variant = \"primary\",\n bg = \"light\",\n hover = \"light\",\n links,\n size,\n text = \"light\",\n rounded = \"md\",\n}: NavigationProps) => {\n return (\n <nav\n className={clsx(\n \"flex justify-center m-2\",\n base,\n variants[variant],\n backgrounds[bg]\n )}\n >\n <div className=\"flex items-center gap-9\">\n {links.map((link, index) => (\n <a\n key={index}\n href={link.href}\n className={clsx(\n \"p-4 font-mono flex items-center gap-2 rounded-full w-full transition-colors duration-300\",\n hoverVariants[hover],\n sizes[size],\n textColors[text],\n roundedColors[rounded]\n )}\n >\n {link.icon}\n {link.label}\n </a>\n ))}\n </div>\n </nav>\n );\n};\n"],"mappings":";AAAA,OAAO,UAAU;AAyEb;AA3CJ,IAAM,aACJ;AAEF,IAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,WAAW;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,IAAM,SAAS,CAAC;AAAA,EACrB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AACF,MAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,YAAY;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,cAAc,OAAO;AAAA,QACrB,SAAS,EAAE;AAAA,QACX,YAAY,KAAK;AAAA,QACjB,WAAW,IAAI;AAAA,QACf,cAAc,OAAO;AAAA,MACvB;AAAA,MAEC;AAAA,oBAAY;AAAA,QACZ,YAAY;AAAA;AAAA;AAAA,EACf;AAEJ;;;ACxFA,OAAOA,WAAU;AAyEX,cAEI,QAAAC,aAFJ;AAvDN,IAAM,OAAO;AAEb,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,MAAM;AACR;AACA,IAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AACZ,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAWD;AAAA,QACT;AAAA,QACA;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,YAAY,EAAE;AAAA,MAChB;AAAA,MAEA,8BAAC,SAAI,WAAU,2BACZ,gBAAM,IAAI,CAAC,MAAM,UAChB,gBAAAC;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,KAAK;AAAA,UACX,WAAWD;AAAA,YACT;AAAA,YACA,cAAc,KAAK;AAAA,YACnB,MAAM,IAAI;AAAA,YACV,WAAW,IAAI;AAAA,YACf,cAAc,OAAO;AAAA,UACvB;AAAA,UAEC;AAAA,iBAAK;AAAA,YACL,KAAK;AAAA;AAAA;AAAA,QAXD;AAAA,MAYP,CACD,GACH;AAAA;AAAA,EACF;AAEJ;","names":["clsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,52 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "huly-ui",
|
|
3
|
-
"
|
|
4
|
-
"version": "0.0.3",
|
|
3
|
+
"version": "0.0.4",
|
|
5
4
|
"type": "module",
|
|
6
|
-
"main": "dist/index.
|
|
7
|
-
"module": "dist/index.
|
|
8
|
-
"types": "dist/index.ts",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
9
8
|
"files": [
|
|
10
|
-
"dist
|
|
9
|
+
"dist"
|
|
11
10
|
],
|
|
12
11
|
"exports": {
|
|
13
12
|
".": {
|
|
14
|
-
"import": "./dist/index.
|
|
15
|
-
"types": "./dist/index.ts"
|
|
13
|
+
"import": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts"
|
|
16
15
|
}
|
|
17
16
|
},
|
|
18
|
-
"dependencies": {
|
|
19
|
-
"@tailwindcss/vite": "^4.1.18",
|
|
20
|
-
"clsx": "^2.1.1",
|
|
21
|
-
"tailwindcss": "^4.1.18"
|
|
22
|
-
},
|
|
23
17
|
"peerDependencies": {
|
|
24
18
|
"react": "^18 || ^19",
|
|
25
19
|
"react-dom": "^18 || ^19"
|
|
26
20
|
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"clsx": "^2.1.1"
|
|
23
|
+
},
|
|
27
24
|
"devDependencies": {
|
|
28
|
-
"@eslint/js": "^9.39.1",
|
|
29
|
-
"@types/node": "^24.10.1",
|
|
30
|
-
"@types/react": "^19.2.5",
|
|
31
|
-
"@types/react-dom": "^19.2.3",
|
|
32
|
-
"@vitejs/plugin-react": "^5.1.1",
|
|
33
|
-
"autoprefixer": "^10.4.23",
|
|
34
|
-
"eslint": "^9.39.1",
|
|
35
|
-
"eslint-plugin-react-hooks": "^7.0.1",
|
|
36
|
-
"eslint-plugin-react-refresh": "^0.4.24",
|
|
37
|
-
"globals": "^16.5.0",
|
|
38
|
-
"postcss": "^8.5.6",
|
|
39
|
-
"react": "19.2.3",
|
|
40
|
-
"react-dom": "19.2.3",
|
|
41
25
|
"tsup": "^8.5.1",
|
|
42
|
-
"typescript": "~5.9.3"
|
|
43
|
-
"typescript-eslint": "^8.46.4",
|
|
44
|
-
"vite": "^7.2.4"
|
|
26
|
+
"typescript": "~5.9.3"
|
|
45
27
|
},
|
|
46
28
|
"scripts": {
|
|
47
|
-
"
|
|
48
|
-
"build": "tsc -b && vite build",
|
|
49
|
-
"lint": "eslint .",
|
|
50
|
-
"preview": "vite preview"
|
|
29
|
+
"build": "tsup"
|
|
51
30
|
}
|
|
52
31
|
}
|