@liner-fe/prism 1.1.11 → 1.1.13
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/lib/components/Button/index.d.ts +5 -1
- package/lib/components/Button/index.stories.d.ts +33 -1
- package/lib/index.cjs +48 -1
- package/lib/index.cjs.map +4 -4
- package/lib/index.mjs +38 -1
- package/lib/index.mjs.map +3 -3
- package/package.json +2 -2
- package/src/components/Button/index.stories.tsx +198 -198
- package/src/components/Button/index.tsx +32 -34
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes } from 'react';
|
|
1
|
+
import React, { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const defaultButtonVariants: (props?: ({
|
|
4
4
|
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | "inverse" | null | undefined;
|
|
@@ -36,5 +36,9 @@ export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps
|
|
|
36
36
|
/**
|
|
37
37
|
* 버튼 컴포넌트
|
|
38
38
|
*/
|
|
39
|
+
export declare const DefaultButton: React.ForwardRefExoticComponent<DefaultButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
40
|
+
export declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
41
|
+
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
42
|
+
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
39
43
|
export declare const Component: () => import("react/jsx-runtime").JSX.Element;
|
|
40
44
|
export {};
|
|
@@ -1 +1,33 @@
|
|
|
1
|
-
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { DefaultButton } from '.';
|
|
3
|
+
declare const meta: Meta<typeof DefaultButton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
/**
|
|
7
|
+
* 기본 버튼
|
|
8
|
+
*/
|
|
9
|
+
export declare const Default: Story;
|
|
10
|
+
/**
|
|
11
|
+
* 종류별 버튼
|
|
12
|
+
*/
|
|
13
|
+
export declare const AS: Story;
|
|
14
|
+
/**
|
|
15
|
+
* Default 버튼 타입 - level 종류
|
|
16
|
+
*/
|
|
17
|
+
export declare const DefaultLevel: Story;
|
|
18
|
+
/**
|
|
19
|
+
* Default 버튼 - align 종류
|
|
20
|
+
*/
|
|
21
|
+
export declare const DefaultAlign: Story;
|
|
22
|
+
/**
|
|
23
|
+
* Default 버튼 - size 종류
|
|
24
|
+
*/
|
|
25
|
+
export declare const DefaultSize: Story;
|
|
26
|
+
/**
|
|
27
|
+
* Text 버튼 - level 종류
|
|
28
|
+
*/
|
|
29
|
+
export declare const TextLevel: Story;
|
|
30
|
+
/**
|
|
31
|
+
* Default 버튼 - 비활성화 상태
|
|
32
|
+
*/
|
|
33
|
+
export declare const Disabled: Story;
|
package/lib/index.cjs
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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
7
9
|
var __export = (target, all) => {
|
|
@@ -16,12 +18,24 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
18
|
}
|
|
17
19
|
return to;
|
|
18
20
|
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
19
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
30
|
|
|
21
31
|
// src/index.ts
|
|
22
32
|
var src_exports = {};
|
|
23
33
|
__export(src_exports, {
|
|
34
|
+
Button: () => Button,
|
|
24
35
|
Component: () => Component,
|
|
36
|
+
DefaultButton: () => DefaultButton,
|
|
37
|
+
IconButton: () => IconButton,
|
|
38
|
+
TextButton: () => TextButton,
|
|
25
39
|
objectToArray: () => objectToArray
|
|
26
40
|
});
|
|
27
41
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -31,11 +45,17 @@ var objectToArray = /* @__PURE__ */ __name((obj) => {
|
|
|
31
45
|
return Object.entries(obj);
|
|
32
46
|
}, "objectToArray");
|
|
33
47
|
|
|
48
|
+
// src/components/Button/index.tsx
|
|
49
|
+
var import_react = require("react");
|
|
50
|
+
|
|
34
51
|
// src/components/Button/style.module.scss
|
|
35
52
|
var style_module_default = {};
|
|
36
53
|
|
|
37
54
|
// src/components/Button/index.tsx
|
|
38
55
|
var import_class_variance_authority = require("class-variance-authority");
|
|
56
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
57
|
+
var import_clsx = __toESM(require("clsx"));
|
|
58
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
59
|
var defaultButtonVariants = (0, import_class_variance_authority.cva)([style_module_default.button, style_module_default.default], {
|
|
40
60
|
variants: {
|
|
41
61
|
level: {
|
|
@@ -83,6 +103,33 @@ var iconButtonVariants = (0, import_class_variance_authority.cva)([style_module_
|
|
|
83
103
|
}
|
|
84
104
|
}
|
|
85
105
|
});
|
|
86
|
-
var
|
|
106
|
+
var DefaultButton = (0, import_react.forwardRef)(
|
|
107
|
+
({ as = "default", asChild = false, level = "primary", align = "center", size = "cta", ...rest }, ref) => {
|
|
108
|
+
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...rest, className: (0, import_clsx.default)(defaultButtonVariants({ level, align, size })), ref });
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
var TextButton = (0, import_react.forwardRef)(
|
|
113
|
+
({ as = "text", asChild = false, level = "inversePrimary", ...rest }, ref) => {
|
|
114
|
+
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...rest, className: (0, import_clsx.default)(textButtonVariants({ level })), ref });
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
var IconButton = (0, import_react.forwardRef)((props, ref) => {
|
|
119
|
+
const Comp = props.asChild ? import_react_slot.Slot : "button";
|
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props, className: (0, import_clsx.default)(iconButtonVariants({ level: props.level })), ref });
|
|
121
|
+
});
|
|
122
|
+
var Button = (0, import_react.forwardRef)((props, ref) => {
|
|
123
|
+
const Comp = props.asChild ? import_react_slot.Slot : "button";
|
|
124
|
+
switch (props.as) {
|
|
125
|
+
case "default":
|
|
126
|
+
const { level = "primary", align = "center", size = "cta" } = props;
|
|
127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props, className: (0, import_clsx.default)(defaultButtonVariants({ level, align, size })), ref });
|
|
128
|
+
case "text":
|
|
129
|
+
const { level: textLevel = "inversePrimary" } = props;
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...props, className: (0, import_clsx.default)(textButtonVariants({ level: textLevel })), ref });
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
var Component = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "TEST" }), "Component");
|
|
87
134
|
/*! For license information please see index.cjs.LEGAL.txt */
|
|
88
135
|
//# sourceMappingURL=index.cjs.map
|
package/lib/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.ts", "../src/utils/object.ts", "../src/components/Button/
|
|
4
|
-
"sourcesContent": ["export * from './utils/object';\nexport * from './components/Button';\n", "export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n return Object.entries(obj);\n};\n", ".button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n font-style: normal;\n font-size: var(--lp-pri-font-size-16);\n font-weight: var(--lp-pri-font-weight-700);\n line-height: 130%;\n overflow: hidden;\n cursor: pointer;\n}\n.button:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n cursor: not-allowed;\n}\n\n.default {\n color: var(--inverse-label-static-primary);\n background: var(--lp-pri-achromatic-white);\n}\n\n.text {\n background: none;\n color: var(--inverse-label-static-primary);\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n}\n.text:not(:disabled):hover {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n}\n\n.icon {\n background: none;\n}\n\n.primary {\n background: #4058FF;\n}\n.primary:not(:disabled):hover {\n background: #3346cc;\n}\n\n.secondary {\n background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n background: #121212;\n}\n\n.tertiary {\n background: rgba(109, 109, 112, 0.0784313725);\n color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n background: #ebebeb;\n}\n\n.quaternary {\n color: var(--neutral-label-primary);\n border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quaternary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.quinary {\n color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quinary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.negative {\n background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n background: #af1b1c;\n}\n\n.inverse {\n color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n background: #f5f5f5;\n}\n\n.cta {\n border-radius: 8px;\n padding: 13.5px 12px;\n font-size: var(--lp-pri-font-size-16);\n min-width: 129px;\n max-height: 48px;\n}\n\n.l {\n border-radius: 6px;\n padding: 10.5px 8px;\n font-size: var(--lp-pri-font-size-15);\n min-width: 107px;\n max-height: 40px;\n}\n\n.m {\n border-radius: 6px;\n padding: 7px 6px;\n font-size: var(--lp-pri-font-size-14);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 91px;\n max-height: 32px;\n}\n\n.s {\n border-radius: 6px;\n padding: 3.5px 6px;\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 89px;\n max-height: 24px;\n}\n\n.align-center {\n justify-content: center;\n}\n\n.align-space-between {\n justify-content: space-between;\n}\n\n.inverse-primary {\n color: var(--inverse-label-static-primary);\n}\n\n.neutral-primary {\n color: rgba(109, 109, 112, 0.8);\n opacity: 0.8;\n}\n\n.inverse-static-primary {\n color: var(--inverse-label-static-primary);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7OztBQUtKO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQUdKO0VBQ0U7OztBQUtGO0VBQ0U7O0FBRUE7RUFDRTs7O0FBR0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFO0VBQ0E7O0FBRUE7RUFDRTs7O0FBR0o7RUFFRTtFQUNBOztBQUVBO0VBQ0U7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUtKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7OztBQUVGO0VBQ0U7OztBQUlGO0VBQ0U7OztBQUVGO0VBRUU7RUFDQTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBib3JkZXI6IG5vbmU7XG5cbiAgZm9udC1zdHlsZTpub3JtYWw7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNzAwKTtcbiAgbGluZS1oZWlnaHQ6IDEzMCU7IC8vIFRPRE86IO2GoO2BsFxuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGFzXG4uZGVmYXVsdCB7XG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgLy8gY29sb3I6IHZhcigtLWJyYW5kLWNvbnRhaW5lci1taWQpO1xufVxuLnRleHQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7IFxuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiAwLjJyZW07XG4gIH1cbn1cbi5pY29uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgXG59XG5cbi8vIERlZmF1bHRCdXR0b24gLSBsZXZlbFxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kOiAjNDA1OEZGOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4ICjsg4nsg4Eg64uk66aEKVxuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzMzNDZjYztcbiAgfVxufVxuLnNlY29uZGFyeSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWludmVyc2UtY29udGFpbmVyLWhpZ2gpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzEyMTIxMjtcbiAgfVxufVxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZDogIzZENkQ3MDE0O1xuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNlYmViZWI7XG4gIH1cbn1cbi5xdWF0ZXJuYXJ5IHtcbiAgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCBuZXV0cmFsL2JvcmRlci9vdmVybGF5L25vcm1hbFxuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbmV1dHJhbC1ib3JkZXItb3ZlcmxheS1ub3JtYWwpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLnF1aW5hcnkge1xuICAvLyBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1zZWNvbmRhcnkpO1xuICBjb2xvcjogIzZENkQ3MENDOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLm5lZ2F0aXZlIHtcbiAgLy8gVE9ETzogZnVudGlvbi9jb250YWluZXIvbmVnYXRpdmVcbiAgYmFja2dyb3VuZDogdmFyKC0tZnVuY3Rpb24tbmVnYXRpdmUpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2FmMWIxYztcbiAgfVxufVxuLmludmVyc2Uge1xuICAvLyBUT0RPOiBuZXV0cmFsL2xhYmVsL3N0YXRpYy9wcmltYXJ5XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxufVxuXG4vLyBzaXplXG4uY3RhIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogMTMuNXB4IDEycHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTYpO1xuICBtaW4td2lkdGg6IDEyOXB4O1xuICBtYXgtaGVpZ2h0OiA0OHB4O1xufVxuLmwge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMC41cHggOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE1KTtcbiAgbWluLXdpZHRoOiAxMDdweDtcbiAgbWF4LWhlaWdodDogNDBweDtcbn1cbi5tIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogN3B4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNCk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA5MXB4O1xuICBtYXgtaGVpZ2h0OiAzMnB4O1xufVxuLnMge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAzLjVweCA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTMpO1xuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG4gIG1pbi13aWR0aDogODlweDtcbiAgbWF4LWhlaWdodDogMjRweDtcbn1cblxuLy8gYWxpZ25cbi5hbGlnbi1jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbi5hbGlnbi1zcGFjZS1iZXR3ZWVuIHtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4vLyBUZXh0QnV0dG9uIC0gbGV2ZWxcbi5pbnZlcnNlLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG59XG4ubmV1dHJhbC1wcmltYXJ5IHtcbiAgLy8gY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtc2Vjb25kYXJ5KTsgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCAo7IOJ7IOBIOuLpOumhClcbiAgY29sb3I6ICM2RDZENzBDQztcbiAgb3BhY2l0eTogMC44O1xufVxuLmludmVyc2Utc3RhdGljLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG59Il19 */", "import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button, style.default], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n inverse: style.inverse,\n },\n align: {\n center: style['align-center'],\n spaceBetween: style['align-space-between'],\n },\n size: {\n cta: style.cta,\n l: style.l,\n m: style.m,\n s: style.s,\n },\n },\n});\nconst textButtonVariants = cva([style.button, style.text], {\n variants: {\n level: {\n inversePrimary: style['inverse-primary'],\n neutralPrimary: style['neutral-primary'],\n inverseStaticPrimary: style['inverse-static-primary'],\n },\n },\n});\nconst iconButtonVariants = cva([style.button, style.icon], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n },\n weight: {\n //\n },\n },\n});\n\nconst getButtonVariant = (props: ButtonProps) => {\n switch (props.as) {\n case 'default':\n const { level = 'primary', align = 'center', size = 'cta' } = props;\n return defaultButtonVariants({ level, align, size });\n case 'text':\n return textButtonVariants({ level: props.level });\n case 'icon':\n return iconButtonVariants({ level: props.level });\n }\n};\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n as?: 'default' | 'text' | 'icon';\n asChild?: boolean;\n}\nexport interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {\n as?: 'default';\n asChild?: boolean;\n level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n size?: 'cta' | 'l' | 'm' | 's';\n align?: 'center' | 'spaceBetween';\n // isLoading?: boolean;\n // leftIcon?: ReactNode;\n // rightIcon?: ReactNode;\n}\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n as?: 'text';\n asChild?: boolean;\n level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';\n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n as?: 'icon';\n asChild?: boolean;\n // weight\n}\nexport type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\n// export const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(\n// ({as = 'default',asChild = false, level = 'primary', align = 'center', size= 'cta', ...rest}, ref) => {\n// const Comp = asChild ? Slot : 'button';\n\n// return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n// }\n// );\n\n// export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n// ({as = 'text',asChild = false, level = 'inversePrimary', ...rest}, ref) => {\n// const Comp = asChild ? Slot : 'button';\n\n// return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n// }\n// );\n\n// export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n// (props, ref) => {\n// const Comp = props.asChild ? Slot : 'button';\n\n// return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n// }\n// );\n\n// export const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n// (props, ref) => {\n// const Comp = props.asChild ? Slot : 'button';\n\n// switch (props.as){\n// case 'default':\n// const {level=\"primary\", align=\"center\", size=\"cta\"} = props;\n// return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n// case 'text':\n// const {level:textLevel = 'inversePrimary'} = props;\n// return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;\n// // case 'icon':\n// // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n// }\n// }\n// );\nexport const Component = () => <div>TEST</div>;\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
3
|
+
"sources": ["../src/index.ts", "../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
|
|
4
|
+
"sourcesContent": ["export * from './utils/object';\nexport * from './components/Button';\n", "export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n return Object.entries(obj);\n};\n", "import React, { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button, style.default], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n inverse: style.inverse,\n },\n align: {\n center: style['align-center'],\n spaceBetween: style['align-space-between'],\n },\n size: {\n cta: style.cta,\n l: style.l,\n m: style.m,\n s: style.s,\n },\n },\n});\nconst textButtonVariants = cva([style.button, style.text], {\n variants: {\n level: {\n inversePrimary: style['inverse-primary'],\n neutralPrimary: style['neutral-primary'],\n inverseStaticPrimary: style['inverse-static-primary'],\n },\n },\n});\nconst iconButtonVariants = cva([style.button, style.icon], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n },\n weight: {\n //\n },\n },\n});\n\nconst getButtonVariant = (props: ButtonProps) => {\n switch (props.as) {\n case 'default':\n const { level = 'primary', align = 'center', size = 'cta' } = props;\n return defaultButtonVariants({ level, align, size });\n case 'text':\n return textButtonVariants({ level: props.level });\n case 'icon':\n return iconButtonVariants({ level: props.level });\n }\n};\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n as?: 'default' | 'text' | 'icon';\n asChild?: boolean;\n}\nexport interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {\n as?: 'default';\n asChild?: boolean;\n level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n size?: 'cta' | 'l' | 'm' | 's';\n align?: 'center' | 'spaceBetween';\n // isLoading?: boolean;\n // leftIcon?: ReactNode;\n // rightIcon?: ReactNode;\n}\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n as?: 'text';\n asChild?: boolean;\n level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';\n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n as?: 'icon';\n asChild?: boolean;\n // weight\n}\nexport type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\nexport const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(\n ({ as = 'default', asChild = false, level = 'primary', align = 'center', size = 'cta', ...rest }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n }\n);\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n ({ as = 'text', asChild = false, level = 'inversePrimary', ...rest }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n }\n);\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n switch (props.as) {\n case 'default':\n const { level = 'primary', align = 'center', size = 'cta' } = props;\n return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n case 'text':\n const { level: textLevel = 'inversePrimary' } = props;\n return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;\n // case 'icon':\n // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n }\n});\n\nexport const Component = () => <div>TEST</div>;\n", ".button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n font-style: normal;\n font-size: var(--lp-pri-font-size-16);\n font-weight: var(--lp-pri-font-weight-700);\n line-height: 130%;\n overflow: hidden;\n cursor: pointer;\n}\n.button:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n cursor: not-allowed;\n}\n\n.default {\n color: var(--inverse-label-static-primary);\n background: var(--lp-pri-achromatic-white);\n}\n\n.text {\n background: none;\n color: var(--inverse-label-static-primary);\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n}\n.text:not(:disabled):hover {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n}\n\n.icon {\n background: none;\n}\n\n.primary {\n background: #4058FF;\n}\n.primary:not(:disabled):hover {\n background: #3346cc;\n}\n\n.secondary {\n background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n background: #121212;\n}\n\n.tertiary {\n background: rgba(109, 109, 112, 0.0784313725);\n color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n background: #ebebeb;\n}\n\n.quaternary {\n color: var(--neutral-label-primary);\n border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quaternary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.quinary {\n color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quinary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.negative {\n background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n background: #af1b1c;\n}\n\n.inverse {\n color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n background: #f5f5f5;\n}\n\n.cta {\n border-radius: 8px;\n padding: 13.5px 12px;\n font-size: var(--lp-pri-font-size-16);\n min-width: 129px;\n max-height: 48px;\n}\n\n.l {\n border-radius: 6px;\n padding: 10.5px 8px;\n font-size: var(--lp-pri-font-size-15);\n min-width: 107px;\n max-height: 40px;\n}\n\n.m {\n border-radius: 6px;\n padding: 7px 6px;\n font-size: var(--lp-pri-font-size-14);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 91px;\n max-height: 32px;\n}\n\n.s {\n border-radius: 6px;\n padding: 3.5px 6px;\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 89px;\n max-height: 24px;\n}\n\n.align-center {\n justify-content: center;\n}\n\n.align-space-between {\n justify-content: space-between;\n}\n\n.inverse-primary {\n color: var(--inverse-label-static-primary);\n}\n\n.neutral-primary {\n color: rgba(109, 109, 112, 0.8);\n opacity: 0.8;\n}\n\n.inverse-static-primary {\n color: var(--inverse-label-static-primary);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7OztBQUtKO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQUdKO0VBQ0U7OztBQUtGO0VBQ0U7O0FBRUE7RUFDRTs7O0FBR0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFO0VBQ0E7O0FBRUE7RUFDRTs7O0FBR0o7RUFFRTtFQUNBOztBQUVBO0VBQ0U7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUtKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7OztBQUVGO0VBQ0U7OztBQUlGO0VBQ0U7OztBQUVGO0VBRUU7RUFDQTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBib3JkZXI6IG5vbmU7XG5cbiAgZm9udC1zdHlsZTpub3JtYWw7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNzAwKTtcbiAgbGluZS1oZWlnaHQ6IDEzMCU7IC8vIFRPRE86IO2GoO2BsFxuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGFzXG4uZGVmYXVsdCB7XG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgLy8gY29sb3I6IHZhcigtLWJyYW5kLWNvbnRhaW5lci1taWQpO1xufVxuLnRleHQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7IFxuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiAwLjJyZW07XG4gIH1cbn1cbi5pY29uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgXG59XG5cbi8vIERlZmF1bHRCdXR0b24gLSBsZXZlbFxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kOiAjNDA1OEZGOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4ICjsg4nsg4Eg64uk66aEKVxuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzMzNDZjYztcbiAgfVxufVxuLnNlY29uZGFyeSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWludmVyc2UtY29udGFpbmVyLWhpZ2gpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzEyMTIxMjtcbiAgfVxufVxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZDogIzZENkQ3MDE0O1xuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNlYmViZWI7XG4gIH1cbn1cbi5xdWF0ZXJuYXJ5IHtcbiAgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCBuZXV0cmFsL2JvcmRlci9vdmVybGF5L25vcm1hbFxuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbmV1dHJhbC1ib3JkZXItb3ZlcmxheS1ub3JtYWwpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLnF1aW5hcnkge1xuICAvLyBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1zZWNvbmRhcnkpO1xuICBjb2xvcjogIzZENkQ3MENDOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLm5lZ2F0aXZlIHtcbiAgLy8gVE9ETzogZnVudGlvbi9jb250YWluZXIvbmVnYXRpdmVcbiAgYmFja2dyb3VuZDogdmFyKC0tZnVuY3Rpb24tbmVnYXRpdmUpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2FmMWIxYztcbiAgfVxufVxuLmludmVyc2Uge1xuICAvLyBUT0RPOiBuZXV0cmFsL2xhYmVsL3N0YXRpYy9wcmltYXJ5XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxufVxuXG4vLyBzaXplXG4uY3RhIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogMTMuNXB4IDEycHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTYpO1xuICBtaW4td2lkdGg6IDEyOXB4O1xuICBtYXgtaGVpZ2h0OiA0OHB4O1xufVxuLmwge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMC41cHggOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE1KTtcbiAgbWluLXdpZHRoOiAxMDdweDtcbiAgbWF4LWhlaWdodDogNDBweDtcbn1cbi5tIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogN3B4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNCk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA5MXB4O1xuICBtYXgtaGVpZ2h0OiAzMnB4O1xufVxuLnMge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAzLjVweCA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTMpO1xuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG4gIG1pbi13aWR0aDogODlweDtcbiAgbWF4LWhlaWdodDogMjRweDtcbn1cblxuLy8gYWxpZ25cbi5hbGlnbi1jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbi5hbGlnbi1zcGFjZS1iZXR3ZWVuIHtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4vLyBUZXh0QnV0dG9uIC0gbGV2ZWxcbi5pbnZlcnNlLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG59XG4ubmV1dHJhbC1wcmltYXJ5IHtcbiAgLy8gY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtc2Vjb25kYXJ5KTsgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCAo7IOJ7IOBIOuLpOumhClcbiAgY29sb3I6ICM2RDZENzBDQztcbiAgb3BhY2l0eTogMC44O1xufVxuLmludmVyc2Utc3RhdGljLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG59Il19 */"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["clsx"]
|
|
7
7
|
}
|
package/lib/index.mjs
CHANGED
|
@@ -6,11 +6,17 @@ var objectToArray = /* @__PURE__ */ __name((obj) => {
|
|
|
6
6
|
return Object.entries(obj);
|
|
7
7
|
}, "objectToArray");
|
|
8
8
|
|
|
9
|
+
// src/components/Button/index.tsx
|
|
10
|
+
import { forwardRef } from "react";
|
|
11
|
+
|
|
9
12
|
// src/components/Button/style.module.scss
|
|
10
13
|
var style_module_default = {};
|
|
11
14
|
|
|
12
15
|
// src/components/Button/index.tsx
|
|
13
16
|
import { cva } from "class-variance-authority";
|
|
17
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
18
|
+
import clsx from "clsx";
|
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
20
|
var defaultButtonVariants = cva([style_module_default.button, style_module_default.default], {
|
|
15
21
|
variants: {
|
|
16
22
|
level: {
|
|
@@ -58,9 +64,40 @@ var iconButtonVariants = cva([style_module_default.button, style_module_default.
|
|
|
58
64
|
}
|
|
59
65
|
}
|
|
60
66
|
});
|
|
61
|
-
var
|
|
67
|
+
var DefaultButton = forwardRef(
|
|
68
|
+
({ as = "default", asChild = false, level = "primary", align = "center", size = "cta", ...rest }, ref) => {
|
|
69
|
+
const Comp = asChild ? Slot : "button";
|
|
70
|
+
return /* @__PURE__ */ jsx(Comp, { ...rest, className: clsx(defaultButtonVariants({ level, align, size })), ref });
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
var TextButton = forwardRef(
|
|
74
|
+
({ as = "text", asChild = false, level = "inversePrimary", ...rest }, ref) => {
|
|
75
|
+
const Comp = asChild ? Slot : "button";
|
|
76
|
+
return /* @__PURE__ */ jsx(Comp, { ...rest, className: clsx(textButtonVariants({ level })), ref });
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
var IconButton = forwardRef((props, ref) => {
|
|
80
|
+
const Comp = props.asChild ? Slot : "button";
|
|
81
|
+
return /* @__PURE__ */ jsx(Comp, { ...props, className: clsx(iconButtonVariants({ level: props.level })), ref });
|
|
82
|
+
});
|
|
83
|
+
var Button = forwardRef((props, ref) => {
|
|
84
|
+
const Comp = props.asChild ? Slot : "button";
|
|
85
|
+
switch (props.as) {
|
|
86
|
+
case "default":
|
|
87
|
+
const { level = "primary", align = "center", size = "cta" } = props;
|
|
88
|
+
return /* @__PURE__ */ jsx(Comp, { ...props, className: clsx(defaultButtonVariants({ level, align, size })), ref });
|
|
89
|
+
case "text":
|
|
90
|
+
const { level: textLevel = "inversePrimary" } = props;
|
|
91
|
+
return /* @__PURE__ */ jsx(Comp, { ...props, className: clsx(textButtonVariants({ level: textLevel })), ref });
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
var Component = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { children: "TEST" }), "Component");
|
|
62
95
|
export {
|
|
96
|
+
Button,
|
|
63
97
|
Component,
|
|
98
|
+
DefaultButton,
|
|
99
|
+
IconButton,
|
|
100
|
+
TextButton,
|
|
64
101
|
objectToArray
|
|
65
102
|
};
|
|
66
103
|
/*! For license information please see index.mjs.LEGAL.txt */
|
package/lib/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/utils/object.ts", "../src/components/Button/
|
|
4
|
-
"sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n return Object.entries(obj);\n};\n", ".button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n font-style: normal;\n font-size: var(--lp-pri-font-size-16);\n font-weight: var(--lp-pri-font-weight-700);\n line-height: 130%;\n overflow: hidden;\n cursor: pointer;\n}\n.button:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n cursor: not-allowed;\n}\n\n.default {\n color: var(--inverse-label-static-primary);\n background: var(--lp-pri-achromatic-white);\n}\n\n.text {\n background: none;\n color: var(--inverse-label-static-primary);\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n}\n.text:not(:disabled):hover {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n}\n\n.icon {\n background: none;\n}\n\n.primary {\n background: #4058FF;\n}\n.primary:not(:disabled):hover {\n background: #3346cc;\n}\n\n.secondary {\n background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n background: #121212;\n}\n\n.tertiary {\n background: rgba(109, 109, 112, 0.0784313725);\n color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n background: #ebebeb;\n}\n\n.quaternary {\n color: var(--neutral-label-primary);\n border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quaternary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.quinary {\n color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quinary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.negative {\n background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n background: #af1b1c;\n}\n\n.inverse {\n color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n background: #f5f5f5;\n}\n\n.cta {\n border-radius: 8px;\n padding: 13.5px 12px;\n font-size: var(--lp-pri-font-size-16);\n min-width: 129px;\n max-height: 48px;\n}\n\n.l {\n border-radius: 6px;\n padding: 10.5px 8px;\n font-size: var(--lp-pri-font-size-15);\n min-width: 107px;\n max-height: 40px;\n}\n\n.m {\n border-radius: 6px;\n padding: 7px 6px;\n font-size: var(--lp-pri-font-size-14);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 91px;\n max-height: 32px;\n}\n\n.s {\n border-radius: 6px;\n padding: 3.5px 6px;\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 89px;\n max-height: 24px;\n}\n\n.align-center {\n justify-content: center;\n}\n\n.align-space-between {\n justify-content: space-between;\n}\n\n.inverse-primary {\n color: var(--inverse-label-static-primary);\n}\n\n.neutral-primary {\n color: rgba(109, 109, 112, 0.8);\n opacity: 0.8;\n}\n\n.inverse-static-primary {\n color: var(--inverse-label-static-primary);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7OztBQUtKO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQUdKO0VBQ0U7OztBQUtGO0VBQ0U7O0FBRUE7RUFDRTs7O0FBR0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFO0VBQ0E7O0FBRUE7RUFDRTs7O0FBR0o7RUFFRTtFQUNBOztBQUVBO0VBQ0U7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUtKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7OztBQUVGO0VBQ0U7OztBQUlGO0VBQ0U7OztBQUVGO0VBRUU7RUFDQTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBib3JkZXI6IG5vbmU7XG5cbiAgZm9udC1zdHlsZTpub3JtYWw7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNzAwKTtcbiAgbGluZS1oZWlnaHQ6IDEzMCU7IC8vIFRPRE86IO2GoO2BsFxuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGFzXG4uZGVmYXVsdCB7XG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgLy8gY29sb3I6IHZhcigtLWJyYW5kLWNvbnRhaW5lci1taWQpO1xufVxuLnRleHQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7IFxuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiAwLjJyZW07XG4gIH1cbn1cbi5pY29uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgXG59XG5cbi8vIERlZmF1bHRCdXR0b24gLSBsZXZlbFxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kOiAjNDA1OEZGOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4ICjsg4nsg4Eg64uk66aEKVxuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzMzNDZjYztcbiAgfVxufVxuLnNlY29uZGFyeSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWludmVyc2UtY29udGFpbmVyLWhpZ2gpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzEyMTIxMjtcbiAgfVxufVxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZDogIzZENkQ3MDE0O1xuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNlYmViZWI7XG4gIH1cbn1cbi5xdWF0ZXJuYXJ5IHtcbiAgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCBuZXV0cmFsL2JvcmRlci9vdmVybGF5L25vcm1hbFxuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbmV1dHJhbC1ib3JkZXItb3ZlcmxheS1ub3JtYWwpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLnF1aW5hcnkge1xuICAvLyBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1zZWNvbmRhcnkpO1xuICBjb2xvcjogIzZENkQ3MENDOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLm5lZ2F0aXZlIHtcbiAgLy8gVE9ETzogZnVudGlvbi9jb250YWluZXIvbmVnYXRpdmVcbiAgYmFja2dyb3VuZDogdmFyKC0tZnVuY3Rpb24tbmVnYXRpdmUpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2FmMWIxYztcbiAgfVxufVxuLmludmVyc2Uge1xuICAvLyBUT0RPOiBuZXV0cmFsL2xhYmVsL3N0YXRpYy9wcmltYXJ5XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxufVxuXG4vLyBzaXplXG4uY3RhIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogMTMuNXB4IDEycHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTYpO1xuICBtaW4td2lkdGg6IDEyOXB4O1xuICBtYXgtaGVpZ2h0OiA0OHB4O1xufVxuLmwge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMC41cHggOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE1KTtcbiAgbWluLXdpZHRoOiAxMDdweDtcbiAgbWF4LWhlaWdodDogNDBweDtcbn1cbi5tIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogN3B4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNCk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA5MXB4O1xuICBtYXgtaGVpZ2h0OiAzMnB4O1xufVxuLnMge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAzLjVweCA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTMpO1xuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG4gIG1pbi13aWR0aDogODlweDtcbiAgbWF4LWhlaWdodDogMjRweDtcbn1cblxuLy8gYWxpZ25cbi5hbGlnbi1jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbi5hbGlnbi1zcGFjZS1iZXR3ZWVuIHtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4vLyBUZXh0QnV0dG9uIC0gbGV2ZWxcbi5pbnZlcnNlLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG59XG4ubmV1dHJhbC1wcmltYXJ5IHtcbiAgLy8gY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtc2Vjb25kYXJ5KTsgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCAo7IOJ7IOBIOuLpOumhClcbiAgY29sb3I6ICM2RDZENzBDQztcbiAgb3BhY2l0eTogMC44O1xufVxuLmludmVyc2Utc3RhdGljLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG59Il19 */", "import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button, style.default], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n inverse: style.inverse,\n },\n align: {\n center: style['align-center'],\n spaceBetween: style['align-space-between'],\n },\n size: {\n cta: style.cta,\n l: style.l,\n m: style.m,\n s: style.s,\n },\n },\n});\nconst textButtonVariants = cva([style.button, style.text], {\n variants: {\n level: {\n inversePrimary: style['inverse-primary'],\n neutralPrimary: style['neutral-primary'],\n inverseStaticPrimary: style['inverse-static-primary'],\n },\n },\n});\nconst iconButtonVariants = cva([style.button, style.icon], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n },\n weight: {\n //\n },\n },\n});\n\nconst getButtonVariant = (props: ButtonProps) => {\n switch (props.as) {\n case 'default':\n const { level = 'primary', align = 'center', size = 'cta' } = props;\n return defaultButtonVariants({ level, align, size });\n case 'text':\n return textButtonVariants({ level: props.level });\n case 'icon':\n return iconButtonVariants({ level: props.level });\n }\n};\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n as?: 'default' | 'text' | 'icon';\n asChild?: boolean;\n}\nexport interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {\n as?: 'default';\n asChild?: boolean;\n level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n size?: 'cta' | 'l' | 'm' | 's';\n align?: 'center' | 'spaceBetween';\n // isLoading?: boolean;\n // leftIcon?: ReactNode;\n // rightIcon?: ReactNode;\n}\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n as?: 'text';\n asChild?: boolean;\n level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';\n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n as?: 'icon';\n asChild?: boolean;\n // weight\n}\nexport type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\n// export const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(\n// ({as = 'default',asChild = false, level = 'primary', align = 'center', size= 'cta', ...rest}, ref) => {\n// const Comp = asChild ? Slot : 'button';\n\n// return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n// }\n// );\n\n// export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n// ({as = 'text',asChild = false, level = 'inversePrimary', ...rest}, ref) => {\n// const Comp = asChild ? Slot : 'button';\n\n// return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n// }\n// );\n\n// export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n// (props, ref) => {\n// const Comp = props.asChild ? Slot : 'button';\n\n// return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n// }\n// );\n\n// export const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n// (props, ref) => {\n// const Comp = props.asChild ? Slot : 'button';\n\n// switch (props.as){\n// case 'default':\n// const {level=\"primary\", align=\"center\", size=\"cta\"} = props;\n// return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n// case 'text':\n// const {level:textLevel = 'inversePrimary'} = props;\n// return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;\n// // case 'icon':\n// // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n// }\n// }\n// );\nexport const Component = () => <div>TEST</div>;\n"],
|
|
5
|
-
"mappings": ";;;;AAAO,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;;;ACA7B;;;
|
|
3
|
+
"sources": ["../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
|
|
4
|
+
"sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n return Object.entries(obj);\n};\n", "import React, { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button, style.default], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n inverse: style.inverse,\n },\n align: {\n center: style['align-center'],\n spaceBetween: style['align-space-between'],\n },\n size: {\n cta: style.cta,\n l: style.l,\n m: style.m,\n s: style.s,\n },\n },\n});\nconst textButtonVariants = cva([style.button, style.text], {\n variants: {\n level: {\n inversePrimary: style['inverse-primary'],\n neutralPrimary: style['neutral-primary'],\n inverseStaticPrimary: style['inverse-static-primary'],\n },\n },\n});\nconst iconButtonVariants = cva([style.button, style.icon], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n },\n weight: {\n //\n },\n },\n});\n\nconst getButtonVariant = (props: ButtonProps) => {\n switch (props.as) {\n case 'default':\n const { level = 'primary', align = 'center', size = 'cta' } = props;\n return defaultButtonVariants({ level, align, size });\n case 'text':\n return textButtonVariants({ level: props.level });\n case 'icon':\n return iconButtonVariants({ level: props.level });\n }\n};\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n as?: 'default' | 'text' | 'icon';\n asChild?: boolean;\n}\nexport interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {\n as?: 'default';\n asChild?: boolean;\n level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n size?: 'cta' | 'l' | 'm' | 's';\n align?: 'center' | 'spaceBetween';\n // isLoading?: boolean;\n // leftIcon?: ReactNode;\n // rightIcon?: ReactNode;\n}\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n as?: 'text';\n asChild?: boolean;\n level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';\n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n as?: 'icon';\n asChild?: boolean;\n // weight\n}\nexport type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\nexport const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(\n ({ as = 'default', asChild = false, level = 'primary', align = 'center', size = 'cta', ...rest }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n }\n);\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n ({ as = 'text', asChild = false, level = 'inversePrimary', ...rest }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n }\n);\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n switch (props.as) {\n case 'default':\n const { level = 'primary', align = 'center', size = 'cta' } = props;\n return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n case 'text':\n const { level: textLevel = 'inversePrimary' } = props;\n return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;\n // case 'icon':\n // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n }\n});\n\nexport const Component = () => <div>TEST</div>;\n", ".button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n font-style: normal;\n font-size: var(--lp-pri-font-size-16);\n font-weight: var(--lp-pri-font-weight-700);\n line-height: 130%;\n overflow: hidden;\n cursor: pointer;\n}\n.button:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n cursor: not-allowed;\n}\n\n.default {\n color: var(--inverse-label-static-primary);\n background: var(--lp-pri-achromatic-white);\n}\n\n.text {\n background: none;\n color: var(--inverse-label-static-primary);\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n}\n.text:not(:disabled):hover {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n}\n\n.icon {\n background: none;\n}\n\n.primary {\n background: #4058FF;\n}\n.primary:not(:disabled):hover {\n background: #3346cc;\n}\n\n.secondary {\n background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n background: #121212;\n}\n\n.tertiary {\n background: rgba(109, 109, 112, 0.0784313725);\n color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n background: #ebebeb;\n}\n\n.quaternary {\n color: var(--neutral-label-primary);\n border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quaternary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.quinary {\n color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n background: #f5f5f5;\n}\n.quinary:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n.negative {\n background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n background: #af1b1c;\n}\n\n.inverse {\n color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n background: #f5f5f5;\n}\n\n.cta {\n border-radius: 8px;\n padding: 13.5px 12px;\n font-size: var(--lp-pri-font-size-16);\n min-width: 129px;\n max-height: 48px;\n}\n\n.l {\n border-radius: 6px;\n padding: 10.5px 8px;\n font-size: var(--lp-pri-font-size-15);\n min-width: 107px;\n max-height: 40px;\n}\n\n.m {\n border-radius: 6px;\n padding: 7px 6px;\n font-size: var(--lp-pri-font-size-14);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 91px;\n max-height: 32px;\n}\n\n.s {\n border-radius: 6px;\n padding: 3.5px 6px;\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 89px;\n max-height: 24px;\n}\n\n.align-center {\n justify-content: center;\n}\n\n.align-space-between {\n justify-content: space-between;\n}\n\n.inverse-primary {\n color: var(--inverse-label-static-primary);\n}\n\n.neutral-primary {\n color: rgba(109, 109, 112, 0.8);\n opacity: 0.8;\n}\n\n.inverse-static-primary {\n color: var(--inverse-label-static-primary);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7OztBQUtKO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQUdKO0VBQ0U7OztBQUtGO0VBQ0U7O0FBRUE7RUFDRTs7O0FBR0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFO0VBQ0E7O0FBRUE7RUFDRTs7O0FBR0o7RUFFRTtFQUNBOztBQUVBO0VBQ0U7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUtKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7OztBQUVGO0VBQ0U7OztBQUlGO0VBQ0U7OztBQUVGO0VBRUU7RUFDQTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBib3JkZXI6IG5vbmU7XG5cbiAgZm9udC1zdHlsZTpub3JtYWw7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNzAwKTtcbiAgbGluZS1oZWlnaHQ6IDEzMCU7IC8vIFRPRE86IO2GoO2BsFxuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGFzXG4uZGVmYXVsdCB7XG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgLy8gY29sb3I6IHZhcigtLWJyYW5kLWNvbnRhaW5lci1taWQpO1xufVxuLnRleHQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7IFxuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiAwLjJyZW07XG4gIH1cbn1cbi5pY29uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgXG59XG5cbi8vIERlZmF1bHRCdXR0b24gLSBsZXZlbFxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kOiAjNDA1OEZGOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4ICjsg4nsg4Eg64uk66aEKVxuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzMzNDZjYztcbiAgfVxufVxuLnNlY29uZGFyeSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWludmVyc2UtY29udGFpbmVyLWhpZ2gpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzEyMTIxMjtcbiAgfVxufVxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZDogIzZENkQ3MDE0O1xuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNlYmViZWI7XG4gIH1cbn1cbi5xdWF0ZXJuYXJ5IHtcbiAgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCBuZXV0cmFsL2JvcmRlci9vdmVybGF5L25vcm1hbFxuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbmV1dHJhbC1ib3JkZXItb3ZlcmxheS1ub3JtYWwpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLnF1aW5hcnkge1xuICAvLyBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1zZWNvbmRhcnkpO1xuICBjb2xvcjogIzZENkQ3MENDOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLm5lZ2F0aXZlIHtcbiAgLy8gVE9ETzogZnVudGlvbi9jb250YWluZXIvbmVnYXRpdmVcbiAgYmFja2dyb3VuZDogdmFyKC0tZnVuY3Rpb24tbmVnYXRpdmUpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2FmMWIxYztcbiAgfVxufVxuLmludmVyc2Uge1xuICAvLyBUT0RPOiBuZXV0cmFsL2xhYmVsL3N0YXRpYy9wcmltYXJ5XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxufVxuXG4vLyBzaXplXG4uY3RhIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogMTMuNXB4IDEycHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTYpO1xuICBtaW4td2lkdGg6IDEyOXB4O1xuICBtYXgtaGVpZ2h0OiA0OHB4O1xufVxuLmwge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMC41cHggOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE1KTtcbiAgbWluLXdpZHRoOiAxMDdweDtcbiAgbWF4LWhlaWdodDogNDBweDtcbn1cbi5tIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogN3B4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNCk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA5MXB4O1xuICBtYXgtaGVpZ2h0OiAzMnB4O1xufVxuLnMge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAzLjVweCA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTMpO1xuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG4gIG1pbi13aWR0aDogODlweDtcbiAgbWF4LWhlaWdodDogMjRweDtcbn1cblxuLy8gYWxpZ25cbi5hbGlnbi1jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbi5hbGlnbi1zcGFjZS1iZXR3ZWVuIHtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4vLyBUZXh0QnV0dG9uIC0gbGV2ZWxcbi5pbnZlcnNlLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG59XG4ubmV1dHJhbC1wcmltYXJ5IHtcbiAgLy8gY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtc2Vjb25kYXJ5KTsgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCAo7IOJ7IOBIOuLpOumhClcbiAgY29sb3I6ICM2RDZENzBDQztcbiAgb3BhY2l0eTogMC44O1xufVxuLmludmVyc2Utc3RhdGljLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG59Il19 */"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liner-fe/prism",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.13",
|
|
4
4
|
"packageManager": "yarn@3.6.0",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "next dev",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"lint": "next lint",
|
|
9
9
|
"storybook": "storybook dev -p 6006",
|
|
10
10
|
"build-storybook": "storybook build",
|
|
11
|
-
"build": "bundler build && tsc --project tsconfig.build.json",
|
|
11
|
+
"build": "bundler build --tsconfig ./tsconfig.build.json && tsc --project tsconfig.build.json",
|
|
12
12
|
"build:package": "yarn build",
|
|
13
13
|
"prepack": "yarn build"
|
|
14
14
|
},
|
|
@@ -1,213 +1,213 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
|
|
2
|
+
import { Button, ButtonProps, DefaultButton, DefaultButtonProps, IconButton, TextButton, TextButtonProps } from '.';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
4
|
+
const meta: Meta<typeof DefaultButton> = {
|
|
5
|
+
title: 'Components/Button',
|
|
6
|
+
component: DefaultButton,
|
|
7
|
+
args: {
|
|
8
|
+
children: 'Button',
|
|
9
|
+
as: 'default',
|
|
10
|
+
asChild: false,
|
|
11
|
+
level: 'primary',
|
|
12
|
+
align: 'center',
|
|
13
|
+
size: 'cta',
|
|
14
|
+
disabled: false,
|
|
15
|
+
},
|
|
16
|
+
argTypes: {
|
|
17
|
+
children: {
|
|
18
|
+
control: {
|
|
19
|
+
type: 'text',
|
|
20
|
+
},
|
|
21
|
+
description: '버튼 안에 표시할 컨텐츠',
|
|
22
|
+
},
|
|
23
|
+
as: {
|
|
24
|
+
options: ['default', 'text', 'icon'],
|
|
25
|
+
control: {
|
|
26
|
+
type: 'inline-radio',
|
|
27
|
+
},
|
|
28
|
+
description: '버튼의 종류를 설정합니다. 스토리북에서는 동작하지 않습니다',
|
|
29
|
+
},
|
|
30
|
+
asChild: {
|
|
31
|
+
control: {
|
|
32
|
+
type: 'boolean',
|
|
33
|
+
default: false,
|
|
34
|
+
},
|
|
35
|
+
description: '버튼을 부모 태그의 자식 요소로 사용할 때 사용합니다.',
|
|
36
|
+
},
|
|
37
|
+
level: {
|
|
38
|
+
options: ['primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'negative', 'inverse'],
|
|
39
|
+
control: {
|
|
40
|
+
type: 'select',
|
|
41
|
+
},
|
|
42
|
+
description: '버튼의 레벨을 설정합니다.',
|
|
43
|
+
},
|
|
44
|
+
align: {
|
|
45
|
+
options: ['center', 'spaceBetween'],
|
|
46
|
+
control: {
|
|
47
|
+
type: 'inline-radio',
|
|
48
|
+
},
|
|
49
|
+
description: '버튼 안의 컨텐츠의 정렬 방식을 설정합니다.',
|
|
50
|
+
},
|
|
51
|
+
size: {
|
|
52
|
+
options: ['cta', 'l', 'm', 's'],
|
|
53
|
+
control: {
|
|
54
|
+
type: 'inline-radio',
|
|
55
|
+
},
|
|
56
|
+
description: '버튼의 크기를 설정합니다.',
|
|
57
|
+
},
|
|
58
|
+
disabled: {
|
|
59
|
+
control: {
|
|
60
|
+
type: 'boolean',
|
|
61
|
+
default: false,
|
|
62
|
+
},
|
|
63
|
+
description: '버튼의 비활성화 여부를 설정합니다.',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
decorators: [
|
|
67
|
+
Story => (
|
|
68
|
+
<article
|
|
69
|
+
style={{
|
|
70
|
+
display: 'flex',
|
|
71
|
+
gap: '10px',
|
|
72
|
+
flexWrap: 'wrap',
|
|
73
|
+
alignItems: 'flex-end',
|
|
74
|
+
}}
|
|
75
|
+
>
|
|
76
|
+
<Story />
|
|
77
|
+
</article>
|
|
78
|
+
),
|
|
79
|
+
],
|
|
80
|
+
tags: ['autodocs'],
|
|
81
|
+
};
|
|
82
|
+
export default meta;
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
type Story = StoryObj<typeof meta>;
|
|
85
85
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
86
|
+
/**
|
|
87
|
+
* 기본 버튼
|
|
88
|
+
*/
|
|
89
|
+
export const Default: Story = {
|
|
90
|
+
args: {
|
|
91
|
+
as: 'default',
|
|
92
|
+
level: 'primary',
|
|
93
|
+
align: 'center',
|
|
94
|
+
size: 'cta',
|
|
95
|
+
disabled: false,
|
|
96
|
+
},
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
render: args => <DefaultButton {...args}>{args.children}</DefaultButton>,
|
|
99
|
+
};
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
101
|
+
/**
|
|
102
|
+
* 종류별 버튼
|
|
103
|
+
*/
|
|
104
|
+
export const AS: Story = {
|
|
105
|
+
render: args => (
|
|
106
|
+
<>
|
|
107
|
+
<Button as="default">Default</Button>
|
|
108
|
+
<Button as="text" level="neutralPrimary">
|
|
109
|
+
Text
|
|
110
|
+
</Button>
|
|
111
|
+
{/* <Button as="icon">Icon</Button> */}
|
|
112
|
+
</>
|
|
113
|
+
),
|
|
114
|
+
};
|
|
115
115
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
116
|
+
const DEFAULT_LEVEL_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['level'][] = [
|
|
117
|
+
'primary',
|
|
118
|
+
'secondary',
|
|
119
|
+
'tertiary',
|
|
120
|
+
'quaternary',
|
|
121
|
+
'quinary',
|
|
122
|
+
'negative',
|
|
123
|
+
'inverse',
|
|
124
|
+
];
|
|
125
125
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
126
|
+
/**
|
|
127
|
+
* Default 버튼 타입 - level 종류
|
|
128
|
+
*/
|
|
129
|
+
export const DefaultLevel: Story = {
|
|
130
|
+
render: args => (
|
|
131
|
+
<>
|
|
132
|
+
{DEFAULT_LEVEL_OPTIONS.map(level => (
|
|
133
|
+
<Button {...args} level={level} key={level}>
|
|
134
|
+
{level}
|
|
135
|
+
</Button>
|
|
136
|
+
))}
|
|
137
|
+
</>
|
|
138
|
+
),
|
|
139
|
+
};
|
|
140
140
|
|
|
141
|
-
|
|
141
|
+
const DEFAULT_ALIGN_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['align'][] = ['center', 'spaceBetween'];
|
|
142
142
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
143
|
+
/**
|
|
144
|
+
* Default 버튼 - align 종류
|
|
145
|
+
*/
|
|
146
|
+
export const DefaultAlign: Story = {
|
|
147
|
+
render: args => (
|
|
148
|
+
<>
|
|
149
|
+
{DEFAULT_ALIGN_OPTIONS.map(align => (
|
|
150
|
+
<Button {...args} align={align} key={align}>
|
|
151
|
+
{align}
|
|
152
|
+
</Button>
|
|
153
|
+
))}
|
|
154
|
+
</>
|
|
155
|
+
),
|
|
156
|
+
};
|
|
157
157
|
|
|
158
|
-
|
|
158
|
+
const DEFAULT_SIZE_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['size'][] = ['cta', 'l', 'm', 's'];
|
|
159
159
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
160
|
+
/**
|
|
161
|
+
* Default 버튼 - size 종류
|
|
162
|
+
*/
|
|
163
|
+
export const DefaultSize: Story = {
|
|
164
|
+
render: args => (
|
|
165
|
+
<>
|
|
166
|
+
{DEFAULT_SIZE_OPTIONS.map(size => (
|
|
167
|
+
<Button {...args} size={size} key={size}>
|
|
168
|
+
{size}
|
|
169
|
+
</Button>
|
|
170
|
+
))}
|
|
171
|
+
</>
|
|
172
|
+
),
|
|
173
|
+
};
|
|
174
174
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
175
|
+
const TEXT_LEVEL_OPTIONS: Extract<ButtonProps, TextButtonProps>['level'][] = [
|
|
176
|
+
'inversePrimary',
|
|
177
|
+
'neutralPrimary',
|
|
178
|
+
'inverseStaticPrimary',
|
|
179
|
+
];
|
|
180
180
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
181
|
+
/**
|
|
182
|
+
* Text 버튼 - level 종류
|
|
183
|
+
*/
|
|
184
|
+
export const TextLevel: Story = {
|
|
185
|
+
render: args => (
|
|
186
|
+
<div
|
|
187
|
+
style={{
|
|
188
|
+
display: 'flex',
|
|
189
|
+
width: '100%',
|
|
190
|
+
height: '50px',
|
|
191
|
+
gap: '2rem',
|
|
192
|
+
background: '#444444',
|
|
193
|
+
}}
|
|
194
|
+
>
|
|
195
|
+
{TEXT_LEVEL_OPTIONS.map(level => (
|
|
196
|
+
<Button as="text" level={level} key={level}>
|
|
197
|
+
{level}
|
|
198
|
+
</Button>
|
|
199
|
+
))}
|
|
200
|
+
</div>
|
|
201
|
+
),
|
|
202
|
+
};
|
|
203
203
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
204
|
+
/**
|
|
205
|
+
* Default 버튼 - 비활성화 상태
|
|
206
|
+
*/
|
|
207
|
+
export const Disabled: Story = {
|
|
208
|
+
render: args => (
|
|
209
|
+
<Button {...args} disabled>
|
|
210
|
+
Disabled
|
|
211
|
+
</Button>
|
|
212
|
+
),
|
|
213
|
+
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, forwardRef } from 'react';
|
|
1
|
+
import React, { ButtonHTMLAttributes, forwardRef } from 'react';
|
|
2
|
+
|
|
2
3
|
import style from './style.module.scss';
|
|
3
4
|
import { VariantProps, cva } from 'class-variance-authority';
|
|
4
5
|
import { Slot } from '@radix-ui/react-slot';
|
|
@@ -93,44 +94,41 @@ export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps
|
|
|
93
94
|
/**
|
|
94
95
|
* 버튼 컴포넌트
|
|
95
96
|
*/
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
export const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(
|
|
98
|
+
({ as = 'default', asChild = false, level = 'primary', align = 'center', size = 'cta', ...rest }, ref) => {
|
|
99
|
+
const Comp = asChild ? Slot : 'button';
|
|
100
|
+
|
|
101
|
+
return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
|
|
102
|
+
}
|
|
103
|
+
);
|
|
99
104
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
105
|
+
export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
|
|
106
|
+
({ as = 'text', asChild = false, level = 'inversePrimary', ...rest }, ref) => {
|
|
107
|
+
const Comp = asChild ? Slot : 'button';
|
|
103
108
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
109
|
+
return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;
|
|
110
|
+
}
|
|
111
|
+
);
|
|
107
112
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
// );
|
|
113
|
+
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
|
|
114
|
+
const Comp = props.asChild ? Slot : 'button';
|
|
111
115
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
// const Comp = props.asChild ? Slot : 'button';
|
|
116
|
+
return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
|
|
117
|
+
});
|
|
115
118
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
// );
|
|
119
|
+
export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
|
|
120
|
+
const Comp = props.asChild ? Slot : 'button';
|
|
119
121
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
switch (props.as) {
|
|
123
|
+
case 'default':
|
|
124
|
+
const { level = 'primary', align = 'center', size = 'cta' } = props;
|
|
125
|
+
return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
|
|
126
|
+
case 'text':
|
|
127
|
+
const { level: textLevel = 'inversePrimary' } = props;
|
|
128
|
+
return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;
|
|
129
|
+
// case 'icon':
|
|
130
|
+
// return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
|
|
131
|
+
}
|
|
132
|
+
});
|
|
123
133
|
|
|
124
|
-
// switch (props.as){
|
|
125
|
-
// case 'default':
|
|
126
|
-
// const {level="primary", align="center", size="cta"} = props;
|
|
127
|
-
// return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
|
|
128
|
-
// case 'text':
|
|
129
|
-
// const {level:textLevel = 'inversePrimary'} = props;
|
|
130
|
-
// return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;
|
|
131
|
-
// // case 'icon':
|
|
132
|
-
// // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
|
|
133
|
-
// }
|
|
134
|
-
// }
|
|
135
|
-
// );
|
|
136
134
|
export const Component = () => <div>TEST</div>;
|