@bln-design-system/button 0.0.4 → 0.0.5
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.cjs +10 -41
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +60 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +10 -41
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -25,49 +25,18 @@ module.exports = __toCommonJS(index_exports);
|
|
|
25
25
|
|
|
26
26
|
// src/Button.constants.ts
|
|
27
27
|
var import_class_variance_authority = require("class-variance-authority");
|
|
28
|
-
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
active:scale-90
|
|
35
|
-
hover:brightness-95
|
|
36
|
-
hover:-translate-y-0.5
|
|
37
|
-
hover:shadow-md
|
|
38
|
-
`,
|
|
39
|
-
{
|
|
40
|
-
variants: {
|
|
41
|
-
variant: {
|
|
42
|
-
primary: "bg-[var(--primary)] text-white font-medium ",
|
|
43
|
-
outlined: "border border-slate-900",
|
|
44
|
-
glass: `
|
|
45
|
-
relative
|
|
46
|
-
text-white font-bold
|
|
47
|
-
bg-white/10
|
|
48
|
-
backdrop-blur-sm
|
|
49
|
-
border border-white/40
|
|
50
|
-
shadow-black/10
|
|
51
|
-
overflow-hidden
|
|
52
|
-
|
|
53
|
-
before:absolute before:inset-0
|
|
54
|
-
before:bg-gradient-to-br
|
|
55
|
-
before:from-white/10 before:via-white/5 before:to-transparent
|
|
56
|
-
before:rounded-full
|
|
57
|
-
before:pointer-events-none
|
|
58
|
-
hover:bg-white/20
|
|
59
|
-
|
|
60
|
-
before:translate-x-[-60%]
|
|
61
|
-
hover:before:translate-x-[60%]
|
|
62
|
-
before:transition-transform before:duration-700
|
|
63
|
-
`
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
defaultVariants: {
|
|
67
|
-
variant: "primary"
|
|
28
|
+
var buttonVariants = (0, import_class_variance_authority.cva)("bln-button", {
|
|
29
|
+
variants: {
|
|
30
|
+
variant: {
|
|
31
|
+
primary: "bln-button--primary",
|
|
32
|
+
outlined: "bln-button--outlined",
|
|
33
|
+
glass: "bln-button--glass"
|
|
68
34
|
}
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
variant: "primary"
|
|
69
38
|
}
|
|
70
|
-
);
|
|
39
|
+
});
|
|
71
40
|
|
|
72
41
|
// src/Button.tsx
|
|
73
42
|
var import_jsx_runtime = require("react/jsx-runtime");
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Button.constants.ts","../src/Button.tsx"],"sourcesContent":["import Button from './Button'\n\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Button.constants.ts","../src/Button.tsx"],"sourcesContent":["import \"./style.css\";\n\nimport Button from './Button'\n\nexport * from \"./Button\"\nexport type * from \"./Button.types\"\n\nexport default Button;","import { cva } from \"class-variance-authority\"\n\nexport const BUTTON_VARIANTS = ['primary', 'outlined', 'glass'] as const\n\nexport const buttonVariants = cva(\"bln-button\", {\n variants: {\n variant: {\n primary: \"bln-button--primary\",\n outlined: \"bln-button--outlined\",\n glass: \"bln-button--glass\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n },\n});","'use client';\n// for support serverside\n\nimport { buttonVariants } from \"./Button.constants\"\nimport type { IButtonProps } from \"./Button.types\"\n\nconst Button: React.FC<IButtonProps> = ({ \n children, \n className, \n variant = 'primary',\n ...props\n}) => {\n \n return (\n <button className={buttonVariants({ variant, className })} {...props}>\n { children }\n </button>\n )\n}\n\nexport default Button"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sCAAoB;AAIb,IAAM,qBAAiB,qCAAI,cAAc;AAAA,EAC9C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;;;ACDG;AARJ,IAAM,SAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AAEJ,SACE,4CAAC,YAAO,WAAW,eAAe,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OAC3D,UACJ;AAEJ;AAEA,IAAO,iBAAQ;;;AFbf,IAAO,gBAAQ;","names":[]}
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/* src/style.css */
|
|
2
|
+
:root {
|
|
3
|
+
--default-primary: #2e2e2e;
|
|
4
|
+
}
|
|
5
|
+
.bln-button {
|
|
6
|
+
padding: 0.5rem 1rem;
|
|
7
|
+
border-radius: 9999px;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
transition: all 150ms ease;
|
|
10
|
+
}
|
|
11
|
+
.bln-button:hover {
|
|
12
|
+
filter: brightness(0.95);
|
|
13
|
+
transform: translateY(-0.125rem);
|
|
14
|
+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
15
|
+
}
|
|
16
|
+
.bln-button:active {
|
|
17
|
+
transform: scale(0.9);
|
|
18
|
+
}
|
|
19
|
+
.bln-button--primary {
|
|
20
|
+
background-color: var(--primary, var(--default-primary));
|
|
21
|
+
color: #ffffff;
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
}
|
|
24
|
+
.bln-button--outlined {
|
|
25
|
+
border: 1px solid var(--primary, var(--default-primary));
|
|
26
|
+
color: var(--primary, var(--default-primary));
|
|
27
|
+
background-color: transparent;
|
|
28
|
+
}
|
|
29
|
+
.bln-button--glass {
|
|
30
|
+
position: relative;
|
|
31
|
+
font-weight: 700;
|
|
32
|
+
color: #ffffff;
|
|
33
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
34
|
+
backdrop-filter: blur(4px);
|
|
35
|
+
-webkit-backdrop-filter: blur(4px);
|
|
36
|
+
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
}
|
|
39
|
+
.bln-button--glass:hover {
|
|
40
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
41
|
+
}
|
|
42
|
+
.bln-button--glass::before {
|
|
43
|
+
content: "";
|
|
44
|
+
position: absolute;
|
|
45
|
+
inset: 0;
|
|
46
|
+
background:
|
|
47
|
+
linear-gradient(
|
|
48
|
+
to bottom right,
|
|
49
|
+
rgba(255, 255, 255, 0.1),
|
|
50
|
+
rgba(255, 255, 255, 0.05),
|
|
51
|
+
transparent);
|
|
52
|
+
border-radius: 9999px;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
transform: translateX(-60%);
|
|
55
|
+
transition: transform 700ms ease;
|
|
56
|
+
}
|
|
57
|
+
.bln-button--glass:hover::before {
|
|
58
|
+
transform: translateX(60%);
|
|
59
|
+
}
|
|
60
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/style.css"],"sourcesContent":["\n:root {\n --default-primary: #2e2e2e;\n}\n\n/* ===== Base Button ===== */\n.bln-button {\n padding: 0.5rem 1rem; /* px-4 py-2 */\n border-radius: 9999px; /* rounded-full */\n cursor: pointer;\n transition: all 150ms ease; /* transition-all duration-150 */\n}\n\n.bln-button:hover {\n filter: brightness(0.95); /* hover:brightness-95 */\n transform: translateY(-0.125rem); /* hover:-translate-y-0.5 */\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1); /* hover:shadow-md */\n}\n\n.bln-button:active {\n transform: scale(0.9); /* active:scale-90 */\n}\n\n/* ===== Variants ===== */\n\n/* Primary */\n.bln-button--primary {\n background-color: var(--primary, var(--default-primary));\n color: #ffffff;\n font-weight: 500; /* font-medium */\n}\n\n/* Outlined */\n.bln-button--outlined {\n border: 1px solid var(--primary, var(--default-primary));\n color: var(--primary, var(--default-primary));\n background-color: transparent;\n}\n\n/* Glass */\n.bln-button--glass {\n position: relative;\n font-weight: 700; /* font-bold */\n color: #ffffff;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(4px); /* backdrop-blur-sm */\n -webkit-backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.4);\n overflow: hidden;\n}\n\n.bln-button--glass:hover {\n background-color: rgba(255, 255, 255, 0.2);\n}\n\n/* Glass shine effect */\n.bln-button--glass::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to bottom right,\n rgba(255, 255, 255, 0.1),\n rgba(255, 255, 255, 0.05),\n transparent\n );\n border-radius: 9999px;\n pointer-events: none;\n transform: translateX(-60%);\n transition: transform 700ms ease;\n}\n\n.bln-button--glass:hover::before {\n transform: translateX(60%);\n}\n"],"mappings":";AACA;AACE,qBAAmB;AACrB;AAGA,CAAC;AACC,WAAS,OAAO;AAChB,iBAAe;AACf,UAAQ;AACR,cAAY,IAAI,MAAM;AACxB;AAEA,CAPC,UAOU;AACT,UAAQ,WAAW;AACnB,aAAW,WAAW;AACtB,cACE,EAAE,IAAI,IAAI,KAAK,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAC/B,EAAE,IAAI,IAAI,KAAK,IAAI,EAAE,EAAE,EAAE,EAAE;AAC/B;AAEA,CAfC,UAeU;AACT,aAAW,MAAM;AACnB;AAKA,CAAC;AACC,oBAAkB,IAAI,SAAS,EAAE,IAAI;AACrC,SAAO;AACP,eAAa;AACf;AAGA,CAAC;AACC,UAAQ,IAAI,MAAM,IAAI,SAAS,EAAE,IAAI;AACrC,SAAO,IAAI,SAAS,EAAE,IAAI;AAC1B,oBAAkB;AACpB;AAGA,CAAC;AACC,YAAU;AACV,eAAa;AACb,SAAO;AACP,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,mBAAiB,KAAK;AACtB,2BAAyB,KAAK;AAC9B,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,YAAU;AACZ;AAEA,CAXC,iBAWiB;AAChB,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACxC;AAGA,CAhBC,iBAgBiB;AAChB,WAAS;AACT,YAAU;AACV,SAAO;AACP;AAAA,IAAY;AAAA,MACV,GAAG,OAAO,KAAK;AAAA,MACf,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI;AAAA,MACxB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK;AAAA,MACzB;AAEF,iBAAe;AACf,kBAAgB;AAChB,aAAW,WAAW;AACtB,cAAY,UAAU,MAAM;AAC9B;AAEA,CAhCC,iBAgCiB,MAAM;AACtB,aAAW,WAAW;AACxB;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1,48 +1,17 @@
|
|
|
1
1
|
// src/Button.constants.ts
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
|
-
var buttonVariants = cva(
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
active:scale-90
|
|
10
|
-
hover:brightness-95
|
|
11
|
-
hover:-translate-y-0.5
|
|
12
|
-
hover:shadow-md
|
|
13
|
-
`,
|
|
14
|
-
{
|
|
15
|
-
variants: {
|
|
16
|
-
variant: {
|
|
17
|
-
primary: "bg-[var(--primary)] text-white font-medium ",
|
|
18
|
-
outlined: "border border-slate-900",
|
|
19
|
-
glass: `
|
|
20
|
-
relative
|
|
21
|
-
text-white font-bold
|
|
22
|
-
bg-white/10
|
|
23
|
-
backdrop-blur-sm
|
|
24
|
-
border border-white/40
|
|
25
|
-
shadow-black/10
|
|
26
|
-
overflow-hidden
|
|
27
|
-
|
|
28
|
-
before:absolute before:inset-0
|
|
29
|
-
before:bg-gradient-to-br
|
|
30
|
-
before:from-white/10 before:via-white/5 before:to-transparent
|
|
31
|
-
before:rounded-full
|
|
32
|
-
before:pointer-events-none
|
|
33
|
-
hover:bg-white/20
|
|
34
|
-
|
|
35
|
-
before:translate-x-[-60%]
|
|
36
|
-
hover:before:translate-x-[60%]
|
|
37
|
-
before:transition-transform before:duration-700
|
|
38
|
-
`
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
defaultVariants: {
|
|
42
|
-
variant: "primary"
|
|
3
|
+
var buttonVariants = cva("bln-button", {
|
|
4
|
+
variants: {
|
|
5
|
+
variant: {
|
|
6
|
+
primary: "bln-button--primary",
|
|
7
|
+
outlined: "bln-button--outlined",
|
|
8
|
+
glass: "bln-button--glass"
|
|
43
9
|
}
|
|
10
|
+
},
|
|
11
|
+
defaultVariants: {
|
|
12
|
+
variant: "primary"
|
|
44
13
|
}
|
|
45
|
-
);
|
|
14
|
+
});
|
|
46
15
|
|
|
47
16
|
// src/Button.tsx
|
|
48
17
|
import { jsx } from "react/jsx-runtime";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.constants.ts","../src/Button.tsx","../src/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/Button.constants.ts","../src/Button.tsx","../src/index.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const BUTTON_VARIANTS = ['primary', 'outlined', 'glass'] as const\n\nexport const buttonVariants = cva(\"bln-button\", {\n variants: {\n variant: {\n primary: \"bln-button--primary\",\n outlined: \"bln-button--outlined\",\n glass: \"bln-button--glass\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n },\n});","'use client';\n// for support serverside\n\nimport { buttonVariants } from \"./Button.constants\"\nimport type { IButtonProps } from \"./Button.types\"\n\nconst Button: React.FC<IButtonProps> = ({ \n children, \n className, \n variant = 'primary',\n ...props\n}) => {\n \n return (\n <button className={buttonVariants({ variant, className })} {...props}>\n { children }\n </button>\n )\n}\n\nexport default Button","import \"./style.css\";\n\nimport Button from './Button'\n\nexport * from \"./Button\"\nexport type * from \"./Button.types\"\n\nexport default Button;"],"mappings":";AAAA,SAAS,WAAW;AAIb,IAAM,iBAAiB,IAAI,cAAc;AAAA,EAC9C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;;;ACDG;AARJ,IAAM,SAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AAEJ,SACE,oBAAC,YAAO,WAAW,eAAe,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OAC3D,UACJ;AAEJ;AAEA,IAAO,iBAAQ;;;ACbf,IAAO,gBAAQ;","names":[]}
|