@liner-fe/prism 2.1.23 → 2.1.24
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 +13 -7
- package/lib/components/Icon/index.d.ts +10 -4
- package/lib/components/IconButton/index.d.ts +11 -5
- package/lib/components/Label/index.d.ts +14 -8
- package/lib/components/TextButton/index.d.ts +12 -6
- package/lib/components/Textfield/index.d.ts +9 -3
- package/lib/components/Typography/utils.d.ts +8 -2
- package/lib/index.cjs +37 -26
- package/lib/index.cjs.map +3 -3
- package/lib/index.mjs +37 -26
- package/lib/index.mjs.map +2 -2
- package/package.json +2 -2
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
import { VariantProps } from '
|
|
2
|
+
import { VariantProps } from 'cva';
|
|
3
3
|
import { IconProps } from '../Icon';
|
|
4
4
|
declare const defaultButtonVariants: (props?: ({
|
|
5
|
-
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse-static" |
|
|
6
|
-
fill?: boolean |
|
|
7
|
-
align?: "center" | "spaceBetween" |
|
|
8
|
-
size?: "m" | "s" | "l" | "cta" |
|
|
9
|
-
width?: "fit-content" | "full" |
|
|
10
|
-
} &
|
|
5
|
+
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse-static" | undefined;
|
|
6
|
+
fill?: boolean | undefined;
|
|
7
|
+
align?: "center" | "spaceBetween" | undefined;
|
|
8
|
+
size?: "m" | "s" | "l" | "cta" | undefined;
|
|
9
|
+
width?: "fit-content" | "full" | undefined;
|
|
10
|
+
} & ({
|
|
11
|
+
class?: import("cva").ClassValue;
|
|
12
|
+
className?: never;
|
|
13
|
+
} | {
|
|
14
|
+
class?: never;
|
|
15
|
+
className?: import("cva").ClassValue;
|
|
16
|
+
})) | undefined) => string;
|
|
11
17
|
export interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
12
18
|
as?: 'default' | 'text';
|
|
13
19
|
asChild?: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { VariantProps } from '
|
|
1
|
+
import { VariantProps } from 'cva';
|
|
2
2
|
import { IconKey, IconMapType } from '../../type';
|
|
3
3
|
import { SystemKeys } from '@liner-fe/design-token';
|
|
4
4
|
import { BasicColorType } from '../../types/color';
|
|
@@ -12,9 +12,15 @@ declare const iconSizeMap: {
|
|
|
12
12
|
export declare const iconKeyOptions: IconKey[];
|
|
13
13
|
export declare const colorKeys: BasicColorType[];
|
|
14
14
|
declare const iconVariants: (props?: ({
|
|
15
|
-
type?: BasicColorType |
|
|
16
|
-
fillType?: BasicColorType |
|
|
17
|
-
} &
|
|
15
|
+
type?: BasicColorType | undefined;
|
|
16
|
+
fillType?: BasicColorType | undefined;
|
|
17
|
+
} & ({
|
|
18
|
+
class?: import("cva").ClassValue;
|
|
19
|
+
className?: never;
|
|
20
|
+
} | {
|
|
21
|
+
class?: never;
|
|
22
|
+
className?: import("cva").ClassValue;
|
|
23
|
+
})) | undefined) => string;
|
|
18
24
|
export declare const getIconComponent: (iconKey: IconKey, map: IconMapType) => import("../../type").IconComponent;
|
|
19
25
|
export type IconSizeKey = keyof typeof iconSizeMap;
|
|
20
26
|
export type IconColorType = Extract<SystemKeys, BasicColorType>;
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import { VariantProps } from '
|
|
1
|
+
import { VariantProps } from 'cva';
|
|
2
2
|
import { ButtonHTMLAttributes } from 'react';
|
|
3
3
|
import { IconProps } from '../Icon';
|
|
4
4
|
declare const iconButtonVariants: (props?: ({
|
|
5
|
-
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse" | "inverse-static" |
|
|
6
|
-
size?: "m" | "s" | "xs" | "l" |
|
|
7
|
-
fill?: boolean |
|
|
8
|
-
} &
|
|
5
|
+
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse" | "inverse-static" | undefined;
|
|
6
|
+
size?: "m" | "s" | "xs" | "l" | undefined;
|
|
7
|
+
fill?: boolean | undefined;
|
|
8
|
+
} & ({
|
|
9
|
+
class?: import("cva").ClassValue;
|
|
10
|
+
className?: never;
|
|
11
|
+
} | {
|
|
12
|
+
class?: never;
|
|
13
|
+
className?: import("cva").ClassValue;
|
|
14
|
+
})) | undefined) => string;
|
|
9
15
|
export type IconButtonLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'negative' | 'static' | 'inverse' | 'inverse-static';
|
|
10
16
|
export type IconSizeType = 'l' | 'm' | 's' | 'xs';
|
|
11
17
|
export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
3
|
-
import { VariantProps } from '
|
|
3
|
+
import { VariantProps } from 'cva';
|
|
4
4
|
declare const defaultLabelVariants: (props?: ({
|
|
5
|
-
level?: "primary" | "secondary" |
|
|
6
|
-
position?: "right" | "top" |
|
|
7
|
-
size?: "m" | "s" | "l" |
|
|
8
|
-
offset?: "high" | "low" | "medium" |
|
|
9
|
-
disabled?: boolean |
|
|
10
|
-
error?: boolean |
|
|
11
|
-
} &
|
|
5
|
+
level?: "primary" | "secondary" | undefined;
|
|
6
|
+
position?: "right" | "top" | undefined;
|
|
7
|
+
size?: "m" | "s" | "l" | undefined;
|
|
8
|
+
offset?: "high" | "low" | "medium" | undefined;
|
|
9
|
+
disabled?: boolean | undefined;
|
|
10
|
+
error?: boolean | undefined;
|
|
11
|
+
} & ({
|
|
12
|
+
class?: import("cva").ClassValue;
|
|
13
|
+
className?: never;
|
|
14
|
+
} | {
|
|
15
|
+
class?: never;
|
|
16
|
+
className?: import("cva").ClassValue;
|
|
17
|
+
})) | undefined) => string;
|
|
12
18
|
interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof defaultLabelVariants> {
|
|
13
19
|
level?: 'primary' | 'secondary';
|
|
14
20
|
position?: 'top' | 'right';
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { ButtonIconProps, ButtonSizeType, CommonButtonProps } from '../../index';
|
|
2
|
-
import { VariantProps } from '
|
|
2
|
+
import { VariantProps } from 'cva';
|
|
3
3
|
declare const textButtonVariants: (props?: ({
|
|
4
|
-
level?: "primary" | "secondary" | "tertiary" | "inverse" | "inverse-static" |
|
|
5
|
-
size?: "m" | "s" |
|
|
6
|
-
thick?: boolean |
|
|
7
|
-
underline?: boolean |
|
|
8
|
-
} &
|
|
4
|
+
level?: "primary" | "secondary" | "tertiary" | "inverse" | "inverse-static" | undefined;
|
|
5
|
+
size?: "m" | "s" | undefined;
|
|
6
|
+
thick?: boolean | undefined;
|
|
7
|
+
underline?: boolean | undefined;
|
|
8
|
+
} & ({
|
|
9
|
+
class?: import("cva").ClassValue;
|
|
10
|
+
className?: never;
|
|
11
|
+
} | {
|
|
12
|
+
class?: never;
|
|
13
|
+
className?: import("cva").ClassValue;
|
|
14
|
+
})) | undefined) => string;
|
|
9
15
|
type TextLevelType = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-static';
|
|
10
16
|
type TextButtonSizeType = Extract<ButtonSizeType, 'm' | 's'>;
|
|
11
17
|
export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { InputHTMLAttributes } from 'react';
|
|
2
|
-
import { VariantProps } from '
|
|
2
|
+
import { VariantProps } from 'cva';
|
|
3
3
|
import { DefaultButtonProps, FillType } from '../Button';
|
|
4
4
|
import { BasicColorType } from '../../types/color';
|
|
5
5
|
declare const defaultTextfieldVariants: (props?: ({
|
|
6
|
-
color?: "neutral-container-lowest" | "neutral-container-mid" |
|
|
7
|
-
} &
|
|
6
|
+
color?: "neutral-container-lowest" | "neutral-container-mid" | undefined;
|
|
7
|
+
} & ({
|
|
8
|
+
class?: import("cva").ClassValue;
|
|
9
|
+
className?: never;
|
|
10
|
+
} | {
|
|
11
|
+
class?: never;
|
|
12
|
+
className?: import("cva").ClassValue;
|
|
13
|
+
})) | undefined) => string;
|
|
8
14
|
export interface TextfieldButtonProps extends Omit<DefaultButtonProps<FillType>, 'size'> {
|
|
9
15
|
}
|
|
10
16
|
export type TextfieldLabelType = 'in' | 'out';
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
export declare const colorVariants: (props?: ({
|
|
2
|
-
type?: import("../..").BasicColorType |
|
|
3
|
-
} &
|
|
2
|
+
type?: import("../..").BasicColorType | undefined;
|
|
3
|
+
} & ({
|
|
4
|
+
class?: import("cva").ClassValue;
|
|
5
|
+
className?: never;
|
|
6
|
+
} | {
|
|
7
|
+
class?: never;
|
|
8
|
+
className?: import("cva").ClassValue;
|
|
9
|
+
})) | undefined) => string;
|
package/lib/index.cjs
CHANGED
|
@@ -7729,11 +7729,11 @@ var style_module_default = {
|
|
|
7729
7729
|
};
|
|
7730
7730
|
|
|
7731
7731
|
// src/components/Button/index.tsx
|
|
7732
|
-
var
|
|
7732
|
+
var import_cva3 = require("cva");
|
|
7733
7733
|
var import_clsx2 = __toESM(require("clsx"));
|
|
7734
7734
|
|
|
7735
7735
|
// src/components/Icon/index.tsx
|
|
7736
|
-
var
|
|
7736
|
+
var import_cva = require("cva");
|
|
7737
7737
|
var import_clsx = __toESM(require("clsx"));
|
|
7738
7738
|
|
|
7739
7739
|
// src/components/Icon/style.module.scss
|
|
@@ -7819,7 +7819,8 @@ var colorKeys = [
|
|
|
7819
7819
|
"accent-purple",
|
|
7820
7820
|
"accent-pink"
|
|
7821
7821
|
];
|
|
7822
|
-
var iconVariants = (0,
|
|
7822
|
+
var iconVariants = (0, import_cva.cva)({
|
|
7823
|
+
base: style_module_default2.icon,
|
|
7823
7824
|
variants: {
|
|
7824
7825
|
type: arrayToStyleObject(colorKeys, style_module_default2),
|
|
7825
7826
|
fillType: arrayToStyleObject(colorKeys, style_module_default2, "fill")
|
|
@@ -7870,9 +7871,10 @@ var style_module_default3 = {
|
|
|
7870
7871
|
};
|
|
7871
7872
|
|
|
7872
7873
|
// src/components/_ButtonLoading/index.tsx
|
|
7873
|
-
var
|
|
7874
|
+
var import_cva2 = require("cva");
|
|
7874
7875
|
var import_jsx_runtime163 = require("react/jsx-runtime");
|
|
7875
|
-
var loadingVariants = (0,
|
|
7876
|
+
var loadingVariants = (0, import_cva2.cva)({
|
|
7877
|
+
base: [style_module_default3["loading-dot"]],
|
|
7876
7878
|
variants: {
|
|
7877
7879
|
size: {
|
|
7878
7880
|
m: style_module_default3["m"],
|
|
@@ -7959,7 +7961,8 @@ var buttonFillLevelIconFillTypeMap = {
|
|
|
7959
7961
|
"inverse-static": void 0
|
|
7960
7962
|
}
|
|
7961
7963
|
};
|
|
7962
|
-
var defaultButtonVariants = (0,
|
|
7964
|
+
var defaultButtonVariants = (0, import_cva3.cva)({
|
|
7965
|
+
base: [style_module_default.button, style_module_default.default],
|
|
7963
7966
|
variants: {
|
|
7964
7967
|
level: {
|
|
7965
7968
|
primary: style_module_default.primary,
|
|
@@ -7990,7 +7993,8 @@ var defaultButtonVariants = (0, import_class_variance_authority3.cva)([style_mod
|
|
|
7990
7993
|
}
|
|
7991
7994
|
}
|
|
7992
7995
|
});
|
|
7993
|
-
var defaultButtonChildrenVariants = (0,
|
|
7996
|
+
var defaultButtonChildrenVariants = (0, import_cva3.cva)({
|
|
7997
|
+
base: style_module_default.children,
|
|
7994
7998
|
variants: {
|
|
7995
7999
|
size: {
|
|
7996
8000
|
cta: style_module_default["cta-children"],
|
|
@@ -8112,7 +8116,7 @@ var import_clsx3 = __toESM(require("clsx"));
|
|
|
8112
8116
|
var import_react2 = require("react");
|
|
8113
8117
|
|
|
8114
8118
|
// src/components/Typography/utils.ts
|
|
8115
|
-
var
|
|
8119
|
+
var import_cva4 = require("cva");
|
|
8116
8120
|
|
|
8117
8121
|
// src/components/Typography/Set/style.module.scss
|
|
8118
8122
|
var style_module_default5 = {
|
|
@@ -8143,7 +8147,8 @@ var style_module_default5 = {
|
|
|
8143
8147
|
};
|
|
8144
8148
|
|
|
8145
8149
|
// src/components/Typography/utils.ts
|
|
8146
|
-
var colorVariants = (0,
|
|
8150
|
+
var colorVariants = (0, import_cva4.cva)({
|
|
8151
|
+
base: style_module_default5.typography,
|
|
8147
8152
|
variants: {
|
|
8148
8153
|
type: arrayToStyleObject(colorKeys, style_module_default5)
|
|
8149
8154
|
}
|
|
@@ -8922,11 +8927,11 @@ var style_module_default6 = {
|
|
|
8922
8927
|
};
|
|
8923
8928
|
|
|
8924
8929
|
// src/components/Popover/index.tsx
|
|
8925
|
-
var
|
|
8930
|
+
var import_cva6 = require("cva");
|
|
8926
8931
|
var import_clsx9 = require("clsx");
|
|
8927
8932
|
|
|
8928
8933
|
// src/components/TextButton/index.tsx
|
|
8929
|
-
var
|
|
8934
|
+
var import_cva5 = require("cva");
|
|
8930
8935
|
|
|
8931
8936
|
// src/components/TextButton/style.module.scss
|
|
8932
8937
|
var style_module_default7 = {
|
|
@@ -8962,7 +8967,8 @@ var textButtonLevelIconFillTypeMap = {
|
|
|
8962
8967
|
inverse: "neutral-label-primary",
|
|
8963
8968
|
"inverse-static": "neutral-label-static-primary"
|
|
8964
8969
|
};
|
|
8965
|
-
var textButtonVariants = (0,
|
|
8970
|
+
var textButtonVariants = (0, import_cva5.cva)({
|
|
8971
|
+
base: [style_module_default7.button, style_module_default7.text],
|
|
8966
8972
|
variants: {
|
|
8967
8973
|
level: {
|
|
8968
8974
|
primary: [style_module_default7["primary"], "lp-sys-typo-caption1-normal-medium"],
|
|
@@ -9027,7 +9033,8 @@ var TextButton = (0, import_react10.forwardRef)(
|
|
|
9027
9033
|
// src/components/Popover/index.tsx
|
|
9028
9034
|
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
9029
9035
|
var DEFAULT_OFFSET = -6;
|
|
9030
|
-
var popoverVariants = (0,
|
|
9036
|
+
var popoverVariants = (0, import_cva6.cva)({
|
|
9037
|
+
base: style_module_default6.content,
|
|
9031
9038
|
variants: {
|
|
9032
9039
|
level: {
|
|
9033
9040
|
primary: style_module_default6.primary,
|
|
@@ -9035,7 +9042,8 @@ var popoverVariants = (0, import_class_variance_authority6.cva)(style_module_def
|
|
|
9035
9042
|
}
|
|
9036
9043
|
}
|
|
9037
9044
|
});
|
|
9038
|
-
var popoverAnchorVariants = (0,
|
|
9045
|
+
var popoverAnchorVariants = (0, import_cva6.cva)({
|
|
9046
|
+
base: style_module_default6.anchor,
|
|
9039
9047
|
variants: {
|
|
9040
9048
|
level: {
|
|
9041
9049
|
primary: style_module_default6.primary,
|
|
@@ -9043,10 +9051,10 @@ var popoverAnchorVariants = (0, import_class_variance_authority6.cva)(style_modu
|
|
|
9043
9051
|
}
|
|
9044
9052
|
}
|
|
9045
9053
|
});
|
|
9046
|
-
var popoverTagVariants = (0,
|
|
9047
|
-
var popoverTitleVariants = (0,
|
|
9048
|
-
var popoverDescriptionVariants = (0,
|
|
9049
|
-
var popoverFooterVariants = (0,
|
|
9054
|
+
var popoverTagVariants = (0, import_cva6.cva)({ base: [style_module_default6.tag, "lp-sys-typo-caption3-normal-bold"] });
|
|
9055
|
+
var popoverTitleVariants = (0, import_cva6.cva)({ base: [style_module_default6.title, "lp-sys-typo-paragraph3-normal-bold"] });
|
|
9056
|
+
var popoverDescriptionVariants = (0, import_cva6.cva)({ base: [style_module_default6.description, "lp-sys-typo-caption1-normal-regular"] });
|
|
9057
|
+
var popoverFooterVariants = (0, import_cva6.cva)({ base: [style_module_default6.footer, "lp-sys-typo-caption1-normal-medium"] });
|
|
9050
9058
|
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(PopoverPrimitive.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
|
|
9051
9059
|
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: by }), "PopoverTrigger");
|
|
9052
9060
|
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "30", height: "10", viewBox: "0 0 30 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
@@ -9142,11 +9150,11 @@ var style_module_default8 = {
|
|
|
9142
9150
|
};
|
|
9143
9151
|
|
|
9144
9152
|
// src/components/Tooltip/index.tsx
|
|
9145
|
-
var
|
|
9153
|
+
var import_cva7 = require("cva");
|
|
9146
9154
|
var import_clsx10 = __toESM(require("clsx"));
|
|
9147
9155
|
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
9148
9156
|
var DEFAULT_OFFSET2 = "medium";
|
|
9149
|
-
var tooltipVariants = (0,
|
|
9157
|
+
var tooltipVariants = (0, import_cva7.cva)({ base: [style_module_default8.tooltip, "lp-sys-typo-caption1-normal-medium"] });
|
|
9150
9158
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
9151
9159
|
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(TooltipPrimitive.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
|
|
9152
9160
|
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(TooltipPrimitive.Trigger, { asChild: true, children: by }), "TooltipTrigger");
|
|
@@ -9171,7 +9179,7 @@ var Tooltip = Object.assign(TooltipRoot, {
|
|
|
9171
9179
|
});
|
|
9172
9180
|
|
|
9173
9181
|
// src/components/IconButton/index.tsx
|
|
9174
|
-
var
|
|
9182
|
+
var import_cva8 = require("cva");
|
|
9175
9183
|
var import_react12 = require("react");
|
|
9176
9184
|
var import_clsx11 = __toESM(require("clsx"));
|
|
9177
9185
|
|
|
@@ -9231,7 +9239,8 @@ var iconButtonLevelIconTypeMap = {
|
|
|
9231
9239
|
"inverse-static": "inverse-label-static-primary"
|
|
9232
9240
|
}
|
|
9233
9241
|
};
|
|
9234
|
-
var iconButtonVariants = (0,
|
|
9242
|
+
var iconButtonVariants = (0, import_cva8.cva)({
|
|
9243
|
+
base: [style_module_default9.iconButton],
|
|
9235
9244
|
variants: {
|
|
9236
9245
|
level: {
|
|
9237
9246
|
primary: style_module_default9.primary,
|
|
@@ -9326,9 +9335,10 @@ var style_module_default11 = {
|
|
|
9326
9335
|
};
|
|
9327
9336
|
|
|
9328
9337
|
// src/components/Label/index.tsx
|
|
9329
|
-
var
|
|
9338
|
+
var import_cva9 = require("cva");
|
|
9330
9339
|
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
9331
|
-
var defaultLabelVariants = (0,
|
|
9340
|
+
var defaultLabelVariants = (0, import_cva9.cva)({
|
|
9341
|
+
base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default11.label],
|
|
9332
9342
|
variants: {
|
|
9333
9343
|
level: {
|
|
9334
9344
|
primary: style_module_default11.primary,
|
|
@@ -9453,11 +9463,12 @@ var style_module_default13 = {
|
|
|
9453
9463
|
};
|
|
9454
9464
|
|
|
9455
9465
|
// src/components/Textfield/index.tsx
|
|
9456
|
-
var
|
|
9466
|
+
var import_cva10 = require("cva");
|
|
9457
9467
|
var import_clsx15 = __toESM(require("clsx"));
|
|
9458
9468
|
var import_react_dom = require("react-dom");
|
|
9459
9469
|
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
9460
|
-
var defaultTextfieldVariants = (0,
|
|
9470
|
+
var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
9471
|
+
base: style_module_default13.textfield,
|
|
9461
9472
|
variants: {
|
|
9462
9473
|
color: {
|
|
9463
9474
|
"neutral-container-mid": style_module_default13.gray,
|