softable-pixels-web 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Button-B9tDbn4Q.js → Button-rI1zyBIr.js} +19 -12
- package/dist/Button-rI1zyBIr.js.map +1 -0
- package/dist/{CheckItem-CBzbinCc.js → CheckItem-OVa0nZlJ.js} +5 -5
- package/dist/CheckItem-OVa0nZlJ.js.map +1 -0
- package/dist/{Checkbox-l_SA4qUE.js → Checkbox-DdPF40bm.js} +7 -7
- package/dist/Checkbox-DdPF40bm.js.map +1 -0
- package/dist/{Icon-BrLGgg0w.js → Icon-T_2VPPNe.js} +4 -4
- package/dist/{Icon-BrLGgg0w.js.map → Icon-T_2VPPNe.js.map} +1 -1
- package/dist/{InfoSummary-CHRfCc3v.js → InfoSummary-D4GgSlQ0.js} +12 -12
- package/dist/InfoSummary-D4GgSlQ0.js.map +1 -0
- package/dist/{Input-CUZNjGoG.js → Input-9E5L4S5O.js} +8 -7
- package/dist/Input-9E5L4S5O.js.map +1 -0
- package/dist/{Label-BVteAeiK.js → Label-DFcePle9.js} +4 -4
- package/dist/Label-DFcePle9.js.map +1 -0
- package/dist/{TabSwitch-DRs6-76U.js → TabSwitch-CHS3g1CP.js} +7 -11
- package/dist/TabSwitch-CHS3g1CP.js.map +1 -0
- package/dist/{TextArea-ZKDCCx4I.js → TextArea-CrJs9f5t.js} +6 -6
- package/dist/TextArea-CrJs9f5t.js.map +1 -0
- package/dist/{ThemeContext-BQQnMo5F.js → ThemeContext-CMCP5Hqz.js} +52 -90
- package/dist/ThemeContext-CMCP5Hqz.js.map +1 -0
- package/dist/{Typography-BaE9Y1O8.js → Typography-ZFnL1M33.js} +34 -19
- package/dist/Typography-ZFnL1M33.js.map +1 -0
- package/dist/button.d.ts +2 -2
- package/dist/button.js +2 -2
- package/dist/check-item.js +3 -3
- package/dist/checkbox.d.ts +2 -2
- package/dist/checkbox.js +3 -3
- package/dist/{index-H8VYQre4.d.ts → index-B33Qb8xC.d.ts} +4 -13
- package/dist/{index-Cbt7nYQB.d.ts → index-CDUVPVvZ.d.ts} +2 -2
- package/dist/{index-BvkboQOE.d.ts → index-Dkyy3OOB.d.ts} +13 -9
- package/dist/{index-CqAWI5LI.d.ts → index-DuKjuLFf.d.ts} +2 -2
- package/dist/{index-x_PYKZgv.d.ts → index-NpIJSn1Q.d.ts} +47 -3
- package/dist/{index-CXR_rnK-.d.ts → index-feodN4N9.d.ts} +11 -11
- package/dist/index.d.ts +7 -7
- package/dist/index.js +11 -11
- package/dist/info-summary.js +2 -2
- package/dist/input.d.ts +2 -2
- package/dist/input.js +4 -4
- package/dist/tab-switch.d.ts +1 -1
- package/dist/tab-switch.js +2 -2
- package/dist/text-area.d.ts +2 -2
- package/dist/text-area.js +4 -4
- package/dist/theme-context.d.ts +1 -1
- package/dist/theme-context.js +3 -1
- package/dist/{types-_ZbgGCjb.d.ts → types-WcPOnA5M.d.ts} +3 -3
- package/dist/typography.d.ts +1 -1
- package/dist/typography.js +1 -1
- package/dist/{useThemedStyles-_SsqjB7Q.d.ts → useThemedStyles-CniQ6zDU.d.ts} +10 -2
- package/package.json +1 -1
- package/dist/Button-B9tDbn4Q.js.map +0 -1
- package/dist/CheckItem-CBzbinCc.js.map +0 -1
- package/dist/Checkbox-l_SA4qUE.js.map +0 -1
- package/dist/InfoSummary-CHRfCc3v.js.map +0 -1
- package/dist/Input-CUZNjGoG.js.map +0 -1
- package/dist/Label-BVteAeiK.js.map +0 -1
- package/dist/TabSwitch-DRs6-76U.js.map +0 -1
- package/dist/TextArea-ZKDCCx4I.js.map +0 -1
- package/dist/ThemeContext-BQQnMo5F.js.map +0 -1
- package/dist/Typography-BaE9Y1O8.js.map +0 -1
|
@@ -74,6 +74,7 @@ interface ThemeTokens {
|
|
|
74
74
|
error: string;
|
|
75
75
|
invalid: string;
|
|
76
76
|
info: string;
|
|
77
|
+
disabled: string;
|
|
77
78
|
scrollbar: string;
|
|
78
79
|
button: {
|
|
79
80
|
filled: {
|
|
@@ -278,23 +279,13 @@ type ThemeProviderProps = PropsWithChildren & {
|
|
|
278
279
|
* Allows persistence via cookies, server, indexedDB, etc.
|
|
279
280
|
*/
|
|
280
281
|
persistence?: ThemePersistence;
|
|
282
|
+
/** * Optional fallback element while the theme is initializing. */
|
|
283
|
+
fallback?: React.ReactNode;
|
|
281
284
|
};
|
|
282
285
|
//#endregion
|
|
283
286
|
//#region src/contexts/ThemeContext/index.d.ts
|
|
284
|
-
/**
|
|
285
|
-
* ThemeProvider
|
|
286
|
-
* -------------
|
|
287
|
-
* Provides theme state + resolved theme tokens to your app.
|
|
288
|
-
*/
|
|
289
287
|
declare const ThemeProvider: React.FC<ThemeProviderProps>;
|
|
290
|
-
/**
|
|
291
|
-
* useTheme()
|
|
292
|
-
*
|
|
293
|
-
* Returns the current theme context.
|
|
294
|
-
*
|
|
295
|
-
* @throws If called outside of `<ThemeProvider />`.
|
|
296
|
-
*/
|
|
297
288
|
declare function useTheme(): ThemeContextData;
|
|
298
289
|
//#endregion
|
|
299
290
|
export { ThemeName as a, ThemeRegistry as c, ThemeMode as i, ThemeTokens as l, useTheme as n, ThemePersistence as o, ThemeContextData as r, ThemeProviderProps as s, ThemeProvider as t };
|
|
300
|
-
//# sourceMappingURL=index-
|
|
291
|
+
//# sourceMappingURL=index-B33Qb8xC.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as CommonStyleProps, t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
|
|
@@ -29,4 +29,4 @@ interface TabSwitchProps<T> extends CommonStyleProps {
|
|
|
29
29
|
declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
|
|
30
30
|
//#endregion
|
|
31
31
|
export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
|
|
32
|
-
//# sourceMappingURL=index-
|
|
32
|
+
//# sourceMappingURL=index-CDUVPVvZ.d.ts.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { t as StyleMap } from "./useThemedStyles-
|
|
2
|
-
import { n as TypographyVariant } from "./types-
|
|
3
|
-
import {
|
|
4
|
-
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
1
|
+
import { i as LayoutProps, o as PaddingProps, t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
|
|
2
|
+
import { n as TypographyVariant } from "./types-WcPOnA5M.js";
|
|
3
|
+
import React, { ReactNode } from "react";
|
|
5
4
|
|
|
6
5
|
//#region src/components/commons/inputs/Input/styles.d.ts
|
|
7
6
|
|
|
@@ -13,12 +12,17 @@ type InputSize = 'sm' | 'md' | 'lg';
|
|
|
13
12
|
type InputRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
14
13
|
type InputType = 'text' | 'email' | 'url' | 'password' | 'tel' | 'search';
|
|
15
14
|
type InputWidth = 'auto' | 'full' | 'md' | 'lg' | 'xl' | '2xl';
|
|
16
|
-
interface InputProps extends
|
|
15
|
+
interface InputProps extends LayoutProps, PaddingProps {
|
|
16
|
+
id?: string;
|
|
17
|
+
label?: string;
|
|
18
|
+
value?: string;
|
|
17
19
|
size?: InputSize;
|
|
18
20
|
type?: InputType;
|
|
21
|
+
minLength?: number;
|
|
22
|
+
maxLength?: number;
|
|
19
23
|
width?: InputWidth;
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
required?: boolean;
|
|
25
|
+
placeholder?: string;
|
|
22
26
|
radius?: InputRadius;
|
|
23
27
|
variant?: InputVariant;
|
|
24
28
|
isInvalid?: boolean;
|
|
@@ -38,7 +42,7 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
|
|
|
38
42
|
}
|
|
39
43
|
//#endregion
|
|
40
44
|
//#region src/components/commons/inputs/Input/index.d.ts
|
|
41
|
-
declare const Input:
|
|
45
|
+
declare const Input: React.FC<InputProps>;
|
|
42
46
|
//#endregion
|
|
43
47
|
export { Input as t };
|
|
44
|
-
//# sourceMappingURL=index-
|
|
48
|
+
//# sourceMappingURL=index-Dkyy3OOB.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as TypographyVariant } from "./types-
|
|
1
|
+
import { n as TypographyVariant } from "./types-WcPOnA5M.js";
|
|
2
2
|
import React$1 from "react";
|
|
3
3
|
import { ChecklistAlertResponse } from "@api/checklist/alerts/dtos";
|
|
4
4
|
|
|
@@ -28,4 +28,4 @@ interface CheckboxProps {
|
|
|
28
28
|
declare const Checkbox: React$1.FC<CheckboxProps>;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { Checkbox as t };
|
|
31
|
-
//# sourceMappingURL=index-
|
|
31
|
+
//# sourceMappingURL=index-DuKjuLFf.d.ts.map
|
|
@@ -1,7 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { n as TypographyVariant } from "./types-
|
|
1
|
+
import { n as TypeStyles, o as PaddingProps } from "./useThemedStyles-CniQ6zDU.js";
|
|
2
|
+
import { n as TypographyVariant } from "./types-WcPOnA5M.js";
|
|
3
3
|
import React, { ReactNode } from "react";
|
|
4
4
|
|
|
5
|
+
//#region src/components/commons/buttons/Button/styles.d.ts
|
|
6
|
+
declare function createButtonStyles({
|
|
7
|
+
color,
|
|
8
|
+
variant,
|
|
9
|
+
disabled,
|
|
10
|
+
fullWidth,
|
|
11
|
+
textAlign,
|
|
12
|
+
outlineColor
|
|
13
|
+
}: ButtonProps): {
|
|
14
|
+
container: {
|
|
15
|
+
minHeight: string;
|
|
16
|
+
height: string;
|
|
17
|
+
width: string;
|
|
18
|
+
position: "relative";
|
|
19
|
+
display: "flex";
|
|
20
|
+
justifyContent: Align;
|
|
21
|
+
padding: string;
|
|
22
|
+
gap: string;
|
|
23
|
+
borderRadius: string;
|
|
24
|
+
cursor: "not-allowed" | "pointer";
|
|
25
|
+
opacity: number;
|
|
26
|
+
transition: "background-color 0.5s";
|
|
27
|
+
border: string;
|
|
28
|
+
backgroundColor: string;
|
|
29
|
+
__rules: {
|
|
30
|
+
'&:hover': {
|
|
31
|
+
opacity: "0.85 !important";
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
content: {
|
|
36
|
+
display: "flex";
|
|
37
|
+
flexDirection: "row";
|
|
38
|
+
alignItems: "center";
|
|
39
|
+
padding: string;
|
|
40
|
+
borderRadius: string;
|
|
41
|
+
whiteSpace: "nowrap";
|
|
42
|
+
columnGap: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
//#endregion
|
|
5
46
|
//#region src/components/commons/buttons/Button/types.d.ts
|
|
6
47
|
type Align = 'center' | 'left' | 'right';
|
|
7
48
|
type ButtonType = 'button' | 'submit' | 'reset';
|
|
@@ -13,6 +54,7 @@ interface ButtonProps extends PaddingProps {
|
|
|
13
54
|
labelVariant?: TypographyVariant;
|
|
14
55
|
/** Icon displayed before the label */
|
|
15
56
|
startIcon?: ReactNode;
|
|
57
|
+
styles?: TypeStyles<typeof createButtonStyles>;
|
|
16
58
|
/** Icon displayed after the label */
|
|
17
59
|
endIcon?: ReactNode;
|
|
18
60
|
/**
|
|
@@ -25,6 +67,8 @@ interface ButtonProps extends PaddingProps {
|
|
|
25
67
|
loading?: boolean;
|
|
26
68
|
/** Text color of the button label */
|
|
27
69
|
labelColor?: string;
|
|
70
|
+
/** Outline color for outlined variant */
|
|
71
|
+
outlineColor?: string;
|
|
28
72
|
/** Aligns the button text content */
|
|
29
73
|
textAlign?: Align;
|
|
30
74
|
/**
|
|
@@ -62,4 +106,4 @@ interface ButtonProps extends PaddingProps {
|
|
|
62
106
|
declare const Button: React.FC<ButtonProps>;
|
|
63
107
|
//#endregion
|
|
64
108
|
export { Button as t };
|
|
65
|
-
//# sourceMappingURL=index-
|
|
109
|
+
//# sourceMappingURL=index-NpIJSn1Q.d.ts.map
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { t as StyleMap } from "./useThemedStyles-
|
|
2
|
-
import { n as TypographyVariant } from "./types-
|
|
3
|
-
import * as
|
|
1
|
+
import { t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
|
|
2
|
+
import { n as TypographyVariant } from "./types-WcPOnA5M.js";
|
|
3
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/assets/icons/index.d.ts
|
|
6
6
|
/** biome-ignore-all lint/suspicious/noShadowRestrictedNames: generated */
|
|
7
7
|
declare const icons: {
|
|
8
|
-
'brands-facebook':
|
|
9
|
-
'brands-facebook-fit':
|
|
10
|
-
'brands-google':
|
|
11
|
-
'general-check':
|
|
12
|
-
'general-eye':
|
|
13
|
-
'general-eye-off':
|
|
8
|
+
'brands-facebook': react_jsx_runtime2.JSX.Element;
|
|
9
|
+
'brands-facebook-fit': react_jsx_runtime2.JSX.Element;
|
|
10
|
+
'brands-google': react_jsx_runtime2.JSX.Element;
|
|
11
|
+
'general-check': react_jsx_runtime2.JSX.Element;
|
|
12
|
+
'general-eye': react_jsx_runtime2.JSX.Element;
|
|
13
|
+
'general-eye-off': react_jsx_runtime2.JSX.Element;
|
|
14
14
|
};
|
|
15
15
|
type IconName = keyof typeof icons;
|
|
16
16
|
//#endregion
|
|
@@ -42,7 +42,7 @@ interface TextAreaProps {
|
|
|
42
42
|
}
|
|
43
43
|
//#endregion
|
|
44
44
|
//#region src/components/commons/inputs/TextArea/index.d.ts
|
|
45
|
-
declare const TextArea: (props: TextAreaProps) =>
|
|
45
|
+
declare const TextArea: (props: TextAreaProps) => react_jsx_runtime2.JSX.Element;
|
|
46
46
|
//#endregion
|
|
47
47
|
export { TextArea as t };
|
|
48
|
-
//# sourceMappingURL=index-
|
|
48
|
+
//# sourceMappingURL=index-feodN4N9.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import "./types-
|
|
2
|
-
import { t as Button } from "./index-
|
|
3
|
-
import { t as Input } from "./index-
|
|
4
|
-
import { t as TextArea } from "./index-
|
|
1
|
+
import "./types-WcPOnA5M.js";
|
|
2
|
+
import { t as Button } from "./index-NpIJSn1Q.js";
|
|
3
|
+
import { t as Input } from "./index-Dkyy3OOB.js";
|
|
4
|
+
import { t as TextArea } from "./index-feodN4N9.js";
|
|
5
5
|
import { t as CheckItem } from "./index-CADs9cEh.js";
|
|
6
|
-
import { t as Checkbox } from "./index-
|
|
6
|
+
import { t as Checkbox } from "./index-DuKjuLFf.js";
|
|
7
7
|
import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
|
|
8
|
-
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-
|
|
8
|
+
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CDUVPVvZ.js";
|
|
9
9
|
import { Typography } from "./typography.js";
|
|
10
|
-
import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-
|
|
10
|
+
import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-B33Qb8xC.js";
|
|
11
11
|
export { Button, CheckItem, Checkbox, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import "./Icon-
|
|
2
|
-
import { t as Typography } from "./Typography-
|
|
3
|
-
import { t as Checkbox } from "./Checkbox-
|
|
4
|
-
import { n as useTheme, t as ThemeProvider } from "./ThemeContext-
|
|
5
|
-
import { t as TabSwitch } from "./TabSwitch-
|
|
6
|
-
import { t as InfoSummary } from "./InfoSummary-
|
|
7
|
-
import { t as CheckItem } from "./CheckItem-
|
|
8
|
-
import { t as Button } from "./Button-
|
|
9
|
-
import "./Label-
|
|
10
|
-
import { t as Input } from "./Input-
|
|
11
|
-
import { t as TextArea } from "./TextArea-
|
|
1
|
+
import "./Icon-T_2VPPNe.js";
|
|
2
|
+
import { t as Typography } from "./Typography-ZFnL1M33.js";
|
|
3
|
+
import { t as Checkbox } from "./Checkbox-DdPF40bm.js";
|
|
4
|
+
import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CMCP5Hqz.js";
|
|
5
|
+
import { t as TabSwitch } from "./TabSwitch-CHS3g1CP.js";
|
|
6
|
+
import { t as InfoSummary } from "./InfoSummary-D4GgSlQ0.js";
|
|
7
|
+
import { t as CheckItem } from "./CheckItem-OVa0nZlJ.js";
|
|
8
|
+
import { t as Button } from "./Button-rI1zyBIr.js";
|
|
9
|
+
import "./Label-DFcePle9.js";
|
|
10
|
+
import { t as Input } from "./Input-9E5L4S5O.js";
|
|
11
|
+
import { t as TextArea } from "./TextArea-CrJs9f5t.js";
|
|
12
12
|
|
|
13
13
|
export { Button, CheckItem, Checkbox, InfoSummary, Input, TabSwitch, TextArea, ThemeProvider, Typography, useTheme };
|
package/dist/info-summary.js
CHANGED
package/dist/input.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "./types-
|
|
2
|
-
import { t as Input } from "./index-
|
|
1
|
+
import "./types-WcPOnA5M.js";
|
|
2
|
+
import { t as Input } from "./index-Dkyy3OOB.js";
|
|
3
3
|
export { Input };
|
package/dist/input.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import "./Icon-
|
|
2
|
-
import "./Typography-
|
|
3
|
-
import "./Label-
|
|
4
|
-
import { t as Input } from "./Input-
|
|
1
|
+
import "./Icon-T_2VPPNe.js";
|
|
2
|
+
import "./Typography-ZFnL1M33.js";
|
|
3
|
+
import "./Label-DFcePle9.js";
|
|
4
|
+
import { t as Input } from "./Input-9E5L4S5O.js";
|
|
5
5
|
|
|
6
6
|
export { Input };
|
package/dist/tab-switch.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-
|
|
1
|
+
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CDUVPVvZ.js";
|
|
2
2
|
export { SwitchOption, TabSwitch, TabSwitchProps };
|
package/dist/tab-switch.js
CHANGED
package/dist/text-area.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "./types-
|
|
2
|
-
import { t as TextArea } from "./index-
|
|
1
|
+
import "./types-WcPOnA5M.js";
|
|
2
|
+
import { t as TextArea } from "./index-feodN4N9.js";
|
|
3
3
|
export { TextArea };
|
package/dist/text-area.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import "./Icon-
|
|
2
|
-
import "./Typography-
|
|
3
|
-
import "./Label-
|
|
4
|
-
import { t as TextArea } from "./TextArea-
|
|
1
|
+
import "./Icon-T_2VPPNe.js";
|
|
2
|
+
import "./Typography-ZFnL1M33.js";
|
|
3
|
+
import "./Label-DFcePle9.js";
|
|
4
|
+
import { t as TextArea } from "./TextArea-CrJs9f5t.js";
|
|
5
5
|
|
|
6
6
|
export { TextArea };
|
package/dist/theme-context.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-
|
|
1
|
+
import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-B33Qb8xC.js";
|
|
2
2
|
export { ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, useTheme };
|
package/dist/theme-context.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as MarginProps, s as TextProps, t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
|
|
2
2
|
import { ElementType, ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/toolkit/Typography/style.d.ts
|
|
5
5
|
declare function createTypographyStyles(props: TypographyProps): StyleMap;
|
|
6
6
|
//#endregion
|
|
7
7
|
//#region src/components/toolkit/Typography/types.d.ts
|
|
8
|
-
interface TypographyProps extends TextProps {
|
|
8
|
+
interface TypographyProps extends TextProps, MarginProps {
|
|
9
9
|
variant: TypographyVariant;
|
|
10
10
|
id?: string;
|
|
11
11
|
href?: string;
|
|
@@ -21,4 +21,4 @@ type TextAlign = 'left' | 'center' | 'right' | 'justify';
|
|
|
21
21
|
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'caption' | 'legal';
|
|
22
22
|
//#endregion
|
|
23
23
|
export { TypographyVariant as n, TypographyProps as t };
|
|
24
|
-
//# sourceMappingURL=types-
|
|
24
|
+
//# sourceMappingURL=types-WcPOnA5M.d.ts.map
|
package/dist/typography.d.ts
CHANGED
package/dist/typography.js
CHANGED
|
@@ -93,6 +93,14 @@ type SlotStyle = (React.CSSProperties | CSSVars) & {
|
|
|
93
93
|
* ```
|
|
94
94
|
*/
|
|
95
95
|
type StyleMap = Record<string, SlotStyle>;
|
|
96
|
+
/**
|
|
97
|
+
* A function that returns a style map.
|
|
98
|
+
*/
|
|
99
|
+
type StylesFactoryAny = (...args: any[]) => StyleMap;
|
|
100
|
+
/**
|
|
101
|
+
* A map of partial style maps.
|
|
102
|
+
*/
|
|
103
|
+
type TypeStyles<TFactory extends StylesFactoryAny> = Partial<{ [K in keyof ReturnType<TFactory>]: SlotStyle }>;
|
|
96
104
|
//#endregion
|
|
97
|
-
export {
|
|
98
|
-
//# sourceMappingURL=useThemedStyles-
|
|
105
|
+
export { MarginProps as a, LayoutProps as i, TypeStyles as n, PaddingProps as o, CommonStyleProps as r, TextProps as s, StyleMap as t };
|
|
106
|
+
//# sourceMappingURL=useThemedStyles-CniQ6zDU.d.ts.map
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button-B9tDbn4Q.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n animate: { rotate: 360 },\n transition: {\n repeat: Infinity,\n duration: 1,\n ease: 'linear'\n }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n const thickness = props.thickness || DEFAULT_THICKNESS\n const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n return {\n container: {\n display: ' inline-block',\n\n width: props.size || DEFAULT_SIZE,\n height: props.size || DEFAULT_SIZE,\n\n borderRadius: '50%',\n border: getBorder(props),\n borderLeftColor: props.color || DEFAULT_COLOR\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n role=\"status\"\n aria-label=\"Loading\"\n style={styles.container}\n {...SPINNER_ANIMATION}\n />\n )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n return {\n container: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n borderRadius: 'var(--px-border-radius-button)'\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n style={styles.container}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n <Loader color={color} />\n </motion.div>\n )\n}\n","// Types\nimport type { ButtonProps, ButtonVariant } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonStyles({\n color,\n variant,\n disabled,\n fullWidth,\n textAlign\n}: ButtonProps): StyleMap {\n const finalVariant = variant ?? 'filled'\n\n return {\n container: {\n minHeight: '2rem',\n height: 'fit-content',\n width: fullWidth ? '100%' : 'fit-content',\n\n position: 'relative',\n display: 'flex',\n justifyContent: textAlign || 'center',\n\n padding: '10px var(--px-space-xl)',\n gap: 'var(--px-space-sm)',\n\n borderRadius: 'var(--px-radius-md)',\n\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n transition: '0.5s',\n\n border: getBorder(finalVariant, color),\n backgroundColor: getBackgroundColor(finalVariant, color),\n\n __rules: {\n '&:hover': {\n opacity: '0.85 !important'\n }\n }\n },\n\n content: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n\n padding: '0',\n borderRadius: 'inherit',\n\n whiteSpace: 'nowrap',\n columnGap: 'var(--px-space-sm)'\n }\n }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n if (color) return color\n\n if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return 'transparent'\n\n if (variant === 'ghost') return 'transparent'\n\n return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n if (color) return `1px solid ${color}`\n\n if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n if (variant === 'ghost') return 'none'\n\n return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n if (labelColor) return labelColor\n\n if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n if (variant === 'ghost') return '--px-btn-ghost-label'\n\n return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n type = 'button',\n variant = 'filled',\n ...rest\n}) => {\n // Constants\n const disabled = rest.disabled || rest.loading\n const resolvedProps = { type, variant, disabled, ...rest }\n const textColor = getTextColor(resolvedProps)\n const { label, endIcon, startIcon, loading } = resolvedProps\n\n // Hooks\n const { styles, classes } = useThemedStyles(\n resolvedProps,\n createButtonStyles,\n {\n applyCommonProps: true,\n commonSlot: 'container'\n }\n )\n\n // Functions\n function handleButtonClick() {\n if (disabled) return\n\n if (rest.onClick) rest.onClick()\n }\n\n return (\n <button\n type={type}\n disabled={disabled}\n aria-busy={rest.loading}\n style={styles.container}\n className={classes.container}\n onClick={handleButtonClick}\n >\n <div style={styles.content}>\n {startIcon ?? null}\n\n <Typography variant=\"b1\" color={textColor}>\n {label}\n </Typography>\n\n {endIcon ?? null}\n\n {loading ? (\n <AnimatePresence>\n <ButtonLoader color={textColor} />\n </AnimatePresence>\n ) : null}\n </div>\n </button>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckItem-CBzbinCc.js","names":["CheckItem: React.FC<CheckItemProps>"],"sources":["../src/components/toolkit/CheckItem/styles.ts","../src/components/toolkit/CheckItem/index.tsx"],"sourcesContent":["// Types\nimport type { CheckItemProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createCheckItemStyles({ checked }: CheckItemProps): StyleMap {\n return {\n container: {\n display: 'flex',\n flexDirection: 'row',\n columnGap: 'var(--px-space-sm)'\n },\n\n iconContainer: {\n width: '20px',\n height: '20px',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked\n ? 'var(--px-color-success)'\n : 'var(--px-color-disabled)',\n\n borderRadius: '50%'\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckItemProps } from './types'\n\n// Styles\nimport { createCheckItemStyles } from './styles'\n\nexport const CheckItem: React.FC<CheckItemProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createCheckItemStyles)\n\n return (\n <div style={styles.container}>\n <div style={styles.iconContainer}>\n <Icon name=\"general-check\" color=\"white\" size=\"sm\" />\n </div>\n\n <Typography variant=\"b2\">{props.label}</Typography>\n </div>\n )\n}\n"],"mappings":";;;;;AAIA,SAAgB,sBAAsB,EAAE,WAAqC;AAC3E,QAAO;EACL,WAAW;GACT,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EAED,eAAe;GACb,OAAO;GACP,QAAQ;GAER,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UACb,4BACA;GAEJ,cAAc;GACf;EACF;;;;;ACVH,MAAaA,aAAsC,UAAS;CAE1D,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;AAEhE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IAAK,MAAK;IAAgB,OAAM;IAAQ,MAAK;KAAO;IACjD,EAEN,oBAAC;GAAW,SAAQ;aAAM,MAAM;IAAmB;GAC/C"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox-l_SA4qUE.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return {\n container: {\n userSelect: 'none',\n opacity: disabled ? 0.6 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n transition: 'all 200ms',\n\n __rules: {\n ':hover': { color: 'var(--px-color-secondary)' }\n }\n }\n }\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n const { idFor, label, labelVariant } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.labelVariant, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography variant={labelVariant ?? 'b1'} fontWeight=\"normal\">\n {label}\n </Typography>\n </LabelRadix.Root>\n )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n return {\n id: useId()\n }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n size: {\n sm: { width: '1rem', height: '1rem' },\n md: { width: '1.25rem', height: '1.25rem' },\n lg: { width: '1.5rem', height: '1.5rem' }\n },\n radius: {\n none: { borderRadius: 0 },\n sm: { borderRadius: '0.25rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '100%' }\n }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n const {\n color,\n checked,\n size = 'md',\n radius = 'md',\n disabled = false,\n labelPlacement = 'right'\n } = props\n\n const focusIndicatorOffsetColor = '#fff'\n\n return {\n container: {\n display: 'flex',\n columnGap: '0.5rem',\n alignItems: 'center',\n '--px-ring-color': color ?? undefined,\n flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked ? color : 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n transition: 'color 200ms',\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n ...CHECKBOX_STYLES.size[size],\n ...CHECKBOX_STYLES.radius[radius],\n\n __rules: {\n '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n }\n }\n },\n\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--px-text-primary, #4b5563)'\n }\n }\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n backgroundColor: string\n): 'black' | 'white' {\n let hex = backgroundColor.replace('#', '')\n\n if (hex.length === 3) {\n hex = hex\n .split('')\n .map(c => c + c)\n .join('')\n }\n\n if (hex.length === 8) {\n hex = hex.substring(0, 6)\n }\n\n if (hex.length !== 6) return 'black'\n\n const r = parseInt(hex.substring(0, 2), 16)\n const g = parseInt(hex.substring(2, 4), 16)\n const b = parseInt(hex.substring(4, 6), 16)\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n labelVariant,\n checked = false,\n disabled = false,\n onChange\n } = props\n\n const iconColor = color ? getContrastingTextColor(color) : undefined\n\n // Hooks\n const { id } = useCheckbox()\n\n const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n return (\n <div style={styles.container}>\n <CheckboxRadix.Root\n style={styles.root}\n className={classes.root}\n id={id}\n tabIndex={0}\n checked={checked}\n disabled={disabled}\n onCheckedChange={checked => onChange(checked === true)}\n >\n <CheckboxRadix.Indicator style={styles.indicator}>\n {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n </CheckboxRadix.Indicator>\n </CheckboxRadix.Root>\n\n {label ? (\n <Label\n idFor={id}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InfoSummary-CHRfCc3v.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n return {\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n gap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n title: string\n icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n return (\n <header style={styles.container}>\n {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n fontWeight=\"bold\"\n lineHeight=\"100%\"\n fontSize=\"0.75rem\"\n >\n {title}\n </Typography>\n </div>\n </header>\n )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n return {\n container: {\n width: '100%',\n minHeight: '0.625rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyItems: 'start',\n\n columnGap: '0.125rem'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'center',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n return (\n <div style={styles.container}>\n <div style={styles.textContainer}>\n <Typography\n variant=\"b3\"\n lineHeight=\"100%\"\n isLoading={loading}\n fontSize=\"0.625rem\"\n color=\"var(--px-text-secondary)\"\n >\n {captionText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n return {\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n columnGap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n lineHeight: '1'\n }\n }\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n highlightText?: string\n highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n loading,\n highlightText,\n highlightIcon\n}) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n return (\n <div style={styles.container}>\n {highlightIcon ? (\n <div style={styles.iconContainer}>{highlightIcon}</div>\n ) : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n lineHeight=\"100%\"\n fontSize=\"0.875rem\"\n fontWeight=\"normal\"\n isLoading={loading}\n >\n {highlightText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n return {\n container: {\n height: '100%',\n borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n },\n\n content: {\n minWidth: '8rem',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n\n paddingBlock: '0.5rem',\n paddingInline: '1rem'\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n return (\n <li style={styles.container}>\n <article style={styles.content}>\n <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n <SummaryHighlight\n loading={props.loading}\n highlightText={props.item.highlight}\n highlightIcon={props.item.highlightIcon}\n />\n\n <SummaryCaption\n loading={props.loading}\n captionText={props.item.caption}\n />\n </article>\n </li>\n )\n}\n","// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n return {\n section: {\n height: '5.5rem',\n minHeight: '5.5rem',\n\n width: 'fit-content',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n\n backgroundColor: 'var(--px-background-card-primary)',\n\n borderRadius: '10px',\n paddingBlock: 'var(--px-space-sm)'\n },\n\n summaryListContainer: {\n width: '100%',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n }\n }\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n // Functions\n function renderSummaryItems() {\n return (\n <ul style={styles.summaryListContainer}>\n {infos.map((info, index) => (\n <SummaryItem\n item={info}\n key={info.id}\n loading={loading}\n isLast={index === infos.length - 1}\n />\n ))}\n </ul>\n )\n }\n\n return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input-CUZNjGoG.js","names":[],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef, useCallback } from 'react'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport const useInput = ({\n value: controlledValue,\n defaultValue = '',\n onChange,\n}: Partial<InputProps>) => {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n\n // States\n const [internalValue, setInternalValue] = useState(defaultValue)\n const [showPassword, setShowPassword] = useState(false)\n\n // Constants\n const isControlled = controlledValue !== undefined\n const currentValue = isControlled ? controlledValue : internalValue\n\n // Functions\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n\n if (!isControlled) setInternalValue(value)\n onChange?.(value)\n },\n [isControlled, onChange],\n )\n\n const togglePasswordVisibility = useCallback(() => {\n setShowPassword(prev => !prev)\n }, [])\n\n const focusInput = useCallback(() => {\n inputRef.current?.focus()\n }, [])\n\n return {\n inputRef,\n focusInput,\n isControlled,\n currentValue,\n showPassword,\n handleChange,\n togglePasswordVisibility,\n }\n}\n","// External libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport { StyleMap } from '@hooks/useThemedStyles/types'\nimport { InputProps } from './types'\n\nexport const INPUT_STYLES = {\n width: {\n auto: { width: 'auto' },\n full: { width: '100%' },\n md: { width: '12rem' },\n lg: { width: '16rem' },\n xl: { width: '20rem' },\n '2xl': { width: '24rem' },\n } as Record<string, CSSProperties>,\n radius: {\n none: { borderRadius: '0px' },\n sm: { borderRadius: '0.125rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '9999px' },\n } as Record<string, CSSProperties>,\n size: {\n sm: {\n wrapper: { minHeight: '2rem' },\n input: {\n padding: '0.5rem 0.75rem',\n lineHeight: '1rem',\n fontSize: '0.75rem',\n },\n label: {\n fontSize: '0.75rem',\n lineHeight: '1rem',\n marginBottom: '0.25rem',\n },\n description: {\n fontSize: '0.75rem',\n lineHeight: '1rem',\n marginTop: '0.25rem',\n },\n error: {\n fontSize: '0.75rem',\n lineHeight: '1rem',\n marginTop: '0.25rem',\n },\n } as Record<string, CSSProperties>,\n md: {\n wrapper: { minHeight: '2.5rem' },\n input: {\n padding: '0.5rem 0.75rem',\n lineHeight: '1.25rem',\n fontSize: '0.875rem',\n },\n label: {\n fontSize: '0.875rem',\n lineHeight: '1.25rem',\n marginBottom: '0.375rem',\n },\n description: {\n fontSize: '0.75rem',\n lineHeight: '1rem',\n marginTop: '0.375rem',\n },\n error: {\n fontSize: '0.75rem',\n lineHeight: '1rem',\n marginTop: '0.375rem',\n },\n } as Record<string, CSSProperties>,\n lg: {\n wrapper: { minHeight: '3rem' },\n input: {\n padding: '0.75rem 1rem',\n lineHeight: '1.5rem',\n fontSize: '1rem',\n width: '16rem',\n },\n label: {\n fontSize: '0.875rem',\n lineHeight: '1.25rem',\n marginBottom: '0.5rem',\n },\n description: {\n fontSize: '0.875rem',\n lineHeight: '1.25rem',\n marginTop: '0.5rem',\n },\n error: {\n fontSize: '0.875rem',\n lineHeight: '1.25rem',\n marginTop: '0.5rem',\n },\n } as Record<string, CSSProperties>,\n },\n variant: {\n bordered: {\n wrapper: { border: '1px solid var(--px-border-primary)' },\n input: {\n backgroundColor: 'transparent',\n color: 'var(--px-text-primary)',\n '::placeholder': {\n color: 'var(--px-text-secondary)',\n },\n },\n label: { color: 'var(--px-text-primary)' },\n button: { color: 'var(--px-text-secondary)', ':hover': { color: 'var(--px-text-primary)' } },\n } as Record<string, CSSProperties>,\n },\n state: {\n default: {\n input: {},\n ring: {\n boxShadow: '0 0 0 2px var(--px-color-info)',\n },\n },\n invalid: {\n wrapper: {\n borderColor: 'var(--px-color-invalid)',\n __rules: {\n '&:focus-within': {\n boxShadow: '0 0 0 1px var(--px-background), 0 0 0 3px var(--px-color-invalid)',\n },\n },\n },\n input: {\n color: 'var(--px-color-invalid)',\n },\n error: {\n color: 'var(--px-color-invalid)',\n },\n },\n\n disabled: {\n wrapper: {\n opacity: 0.6,\n cursor: 'not-allowed',\n backgroundColor: '#f9fafb',\n },\n input: {\n cursor: 'not-allowed',\n },\n label: {\n cursor: 'not-allowed',\n },\n },\n } as Record<string, Partial<StyleMap>>,\n}\n\nexport function createInputStyles(props: InputProps): StyleMap {\n const {\n size = 'md',\n variant = 'bordered',\n radius = 'md',\n isDisabled = false,\n isInvalid = false,\n focusedRingColor,\n } = props\n\n const focusRingColor = focusedRingColor || 'var(--px-color-info)'\n\n return {\n wrapper: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n\n ...(INPUT_STYLES.size[size]?.wrapper ?? {}),\n ...(INPUT_STYLES.variant[variant]?.wrapper ?? {}),\n ...(INPUT_STYLES.radius[radius] ?? {}),\n\n __rules: {\n '&:focus-within': {\n boxShadow: `0 0 0 1px var(--px-background), 0 0 0 3px ${focusRingColor}`,\n },\n },\n\n ...(isDisabled ? INPUT_STYLES.state.disabled.wrapper : {}),\n ...(isInvalid ? INPUT_STYLES.state.invalid.wrapper : {}),\n },\n\n input: {\n flex: 1,\n backgroundColor: 'transparent',\n outline: 'none',\n width: '100%',\n\n ...(INPUT_STYLES.size[size]?.input ?? {}),\n\n ...(INPUT_STYLES.variant[variant]?.input ?? {}),\n ...(INPUT_STYLES.state.default.input ?? {}),\n\n ...(isDisabled ? INPUT_STYLES.state.disabled.input : {}),\n ...(isInvalid ? INPUT_STYLES.state.invalid.input : {}),\n },\n\n label: {\n ...(INPUT_STYLES.size[size]?.label ?? {}),\n ...(INPUT_STYLES.variant[variant]?.label ?? {}),\n\n ...(isDisabled ? INPUT_STYLES.state.disabled.label : {}),\n },\n\n error: {\n display: 'block',\n\n ...(INPUT_STYLES.size[size]?.error ?? {}),\n ...(INPUT_STYLES.state.invalid.error ?? {}),\n },\n\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '0.25rem',\n cursor: 'pointer',\n\n ...(INPUT_STYLES.variant[variant]?.button ?? {}),\n ...(INPUT_STYLES.radius[radius] ?? {}),\n\n ...(isDisabled ? { cursor: 'not-allowed', opacity: 0.5 } : {}),\n },\n\n startContent: {\n display: 'flex',\n alignItems: 'center',\n padding: '0.25rem',\n },\n }\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../Label'\nimport { Icon } from '@components/toolkit/Icon'\n\n// Types\nimport type { InputProps } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles, INPUT_STYLES } from './styles'\n\nexport const Input = (props: InputProps) => {\n // Hooks\n const {\n id,\n type,\n label,\n width,\n fullWidth,\n required,\n isDisabled,\n minLength,\n maxLength,\n placeholder,\n requiredColor,\n labelColor,\n labelWeight,\n labelVariant,\n startContent,\n endContent,\n errorMessage,\n onChange,\n value,\n defaultValue,\n size,\n radius,\n variant,\n isInvalid,\n ...nativeInputProps\n } = props\n\n const {\n inputRef,\n currentValue,\n showPassword,\n handleChange,\n togglePasswordVisibility,\n } = useInput({\n size,\n value,\n radius,\n variant,\n isInvalid,\n fullWidth,\n isDisabled,\n defaultValue,\n onChange,\n })\n\n // Constants\n const reactId = useId()\n const inputId = useMemo(() => {\n return id || `input-${reactId}`\n }, [id, reactId])\n const containerWidth = getWidth()\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createInputStyles, {\n pick: p => [\n p.size,\n p.variant,\n p.radius,\n p.isDisabled,\n p.isInvalid,\n p.focusedRingColor,\n ],\n override: props.styles,\n applyCommonProps: true,\n })\n\n // Functions\n function getType() {\n if (type === 'password' && showPassword) return 'text'\n return type\n }\n\n function getWidth() {\n if (fullWidth) return { width: '100%' }\n if (width) return INPUT_STYLES.width[width] || { width: 'auto' }\n return { width: 'auto' }\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div className=\"flex items-center gap-3\">\n <Label\n htmlFor={inputId}\n label={label}\n required={required}\n styles={{ label: styles.label }}\n requiredColor={requiredColor}\n labelColor={labelColor}\n labelWeight={labelWeight}\n labelVariant={labelVariant}\n />\n </div>\n )\n }\n\n function renderEndContent() {\n return (\n <>\n {type === 'password' ? (\n <button\n type=\"button\"\n style={styles.button}\n onClick={togglePasswordVisibility}\n >\n {showPassword ? (\n <Icon name={'general-eye-off'} />\n ) : (\n <Icon name={'general-eye'} />\n )}\n </button>\n ) : (\n endContent\n )}\n </>\n )\n }\n\n return (\n <div style={containerWidth}>\n {renderLabel()}\n <div style={styles.wrapper} className={classes.wrapper}>\n {startContent && <div style={styles.startContent}>{startContent}</div>}\n <div style={{ flex: 1 }}>\n <input\n ref={inputRef}\n id={inputId}\n type={getType()}\n value={currentValue}\n style={styles.input}\n className={classes.input}\n disabled={isDisabled}\n minLength={minLength}\n maxLength={maxLength}\n placeholder={placeholder ?? 'Digite aqui...'}\n onChange={handleChange}\n {...nativeInputProps}\n />\n </div>\n {renderEndContent() && <div>{renderEndContent()}</div>}\n </div>\n\n {errorMessage ? <div style={styles.error}>{errorMessage}</div> : null}\n </div>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Label-BVteAeiK.js","names":["LABEL_VARIANTS: Record<string, CSSProperties>"],"sources":["../src/components/commons/Label/style.ts","../src/components/commons/Label/index.tsx"],"sourcesContent":["// External libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport type { LabelProps } from './types'\nimport { StyleMap } from '@hooks/useThemedStyles/types'\n\nconst LABEL_VARIANTS: Record<string, CSSProperties> = {\n b1: {\n fontSize: '1rem',\n lineHeight: '1.5rem',\n },\n b2: {\n fontSize: '0.875rem',\n lineHeight: '1.25rem',\n },\n b3: {\n fontSize: '0.75rem',\n lineHeight: '1rem',\n },\n}\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { labelColor, labelWeight, labelVariant = 'b2', requiredColor } = props\n\n return {\n label: {\n display: 'inline-flex',\n alignItems: 'center',\n gap: '0.25rem',\n fontWeight: labelWeight,\n\n ...(LABEL_VARIANTS[labelVariant] ?? {}),\n\n ...(labelColor ? { color: labelColor } : {}),\n },\n\n required: {\n color: requiredColor,\n lineHeight: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n },\n }\n}\n","// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createLabelStyles } from './style'\n\nexport const Label = (props: LabelProps) => {\n const {\n htmlFor,\n label,\n required,\n requiredColor,\n labelColor,\n labelWeight,\n labelVariant = 'b2',\n } = props\n\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.labelColor, p.labelWeight, p.labelVariant, p.requiredColor],\n override: props.styles,\n applyCommonProps: true,\n })\n\n return (\n <label htmlFor={htmlFor} style={styles.label}>\n <Typography\n variant={labelVariant}\n styles={{\n text: {\n minWidth: 'fit-content',\n color: labelColor,\n fontWeight: labelWeight,\n },\n }}\n >\n {label}\n\n {required ? (\n <Typography\n as=\"span\"\n variant=\"b2\"\n styles={{ text: { color: requiredColor, marginLeft: '0.125rem' } }}\n >\n *\n </Typography>\n ) : null}\n </Typography>\n </label>\n )\n}\n"],"mappings":";;;;AAOA,MAAMA,iBAAgD;CACpD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACb;CACF;AAED,SAAgB,kBAAkB,OAA6B;CAC7D,MAAM,EAAE,YAAY,aAAa,eAAe,MAAM,kBAAkB;AAExE,QAAO;EACL,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK;GACL,YAAY;GAEZ,GAAI,eAAe,iBAAiB,EAAE;GAEtC,GAAI,aAAa,EAAE,OAAO,YAAY,GAAG,EAAE;GAC5C;EAED,UAAU;GACR,OAAO;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACb;EACF;;;;;AC/BH,MAAa,SAAS,UAAsB;CAC1C,MAAM,EACJ,SACA,OACA,UACA,eACA,YACA,aACA,eAAe,SACb;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,mBAAmB;EAC3D,OAAM,MAAK;GAAC,EAAE;GAAY,EAAE;GAAa,EAAE;GAAc,EAAE;GAAc;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;AAEF,QACE,oBAAC;EAAe;EAAS,OAAO,OAAO;YACrC,qBAAC;GACC,SAAS;GACT,QAAQ,EACN,MAAM;IACJ,UAAU;IACV,OAAO;IACP,YAAY;IACb,EACF;cAEA,OAEA,WACC,oBAAC;IACC,IAAG;IACH,SAAQ;IACR,QAAQ,EAAE,MAAM;KAAE,OAAO;KAAe,YAAY;KAAY,EAAE;cACnE;KAEY,GACX;IACO;GACP"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabSwitch-DRs6-76U.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n disabled?: boolean\n selected?: boolean\n selectedColor?: string\n variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n variant,\n disabled,\n selected,\n selectedColor\n}: Params): StyleMap {\n const accent = selectedColor ?? 'var(--px-color-primary)'\n\n return {\n item: {\n minHeight: '1.25rem',\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n background: 'transparent',\n border: 0,\n padding: '8px 10px',\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n userSelect: 'none',\n whiteSpace: 'nowrap',\n __rules: { '& > p': { zIndex: 1 } }\n },\n\n selectedBg:\n variant === 'default'\n ? {\n position: 'absolute',\n inset: 0,\n borderRadius: 6,\n border: '1px solid var(--px-border-primary)',\n background: selected ? accent : 'transparent'\n }\n : {\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: -2,\n height: 2,\n background: selected ? accent : 'transparent'\n }\n }\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n option: SwitchOption<T>\n selected: boolean\n layoutId?: string\n disabled?: boolean\n selectedColor?: string\n selectedLabelColor?: string\n variant: 'default' | 'underline'\n onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n const { option, disabled, selected, layoutId, onClick } = props\n\n const { styles, classes } = useThemedStyles(\n props,\n createTabSwitchItemStyles,\n {\n pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n }\n )\n\n const isDisabled = disabled || option.disabled\n\n return (\n <button\n type=\"button\"\n style={styles.item}\n className={classes.item}\n tabIndex={isDisabled ? -1 : 0}\n onClick={() => !isDisabled && onClick(option.value)}\n >\n {selected ? (\n <motion.div\n layoutId={layoutId || 'pixel-tabswitch-selected'}\n style={styles.selectedBg}\n />\n ) : null}\n\n {option.icon ? (\n <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n ) : null}\n\n <Typography variant=\"b1\" fontWeight=\"bold\">\n {option.label}\n </Typography>\n </button>\n )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n const { fitContent } = props\n\n return {\n container: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n color: 'var(--px-text-primary, #4b5563)',\n width: fitContent ? 'fit-content' : '100%',\n borderBottom: '1px solid var(--px-border-primaryder, #e5e7eb)',\n gap: 0,\n __rules: { '& svg': { zIndex: 1 } }\n }\n }\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n {\n const {\n options,\n disabled,\n layoutId,\n currentValue,\n variant = 'default',\n onChange\n } = props\n\n const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n pick: p => [p.fitContent, p.selectedLabelColor, p.variant],\n override: props.styles,\n applyCommonProps: true\n })\n\n return (\n <div style={styles.container} className={classes.container}>\n {options.map(opt => (\n <SwitchItem\n key={String(opt.value)}\n option={opt}\n variant={variant}\n layoutId={layoutId}\n disabled={disabled}\n selectedColor={props.selectedColor}\n selected={currentValue === opt.value}\n selectedLabelColor={props.selectedLabelColor}\n onClick={onChange}\n />\n ))}\n </div>\n )\n }\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACmB;CACnB,MAAM,SAAS,iBAAiB;AAEhC,QAAO;EACL,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR;;;;;AC3BH,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,EACL,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF;;;;;ACJH,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK;IAAC,EAAE;IAAY,EAAE;IAAoB,EAAE;IAAQ;GAC1D,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea-ZKDCCx4I.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps): StyleMap {\n const { height = '8rem', readOnly, startIcon } = props\n\n const focusRingColor = props.focusedRingColor || 'var(--px-color-info)'\n const placeHolderColor =\n props.placeholderColor || 'var(--px-text-placeholder)'\n\n return {\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n borderRadius: '0.5rem',\n resize: 'none',\n\n fontWeight: '400',\n fontSize: '1rem',\n color: 'var(--px-text-primary)',\n\n border: '1px solid red',\n outlineOffset: '-1px',\n\n cursor: readOnly ? 'default' : undefined,\n paddingLeft: startIcon ? '2.5rem' : undefined,\n\n __rules: {\n '&::placeholder': {\n color: `${placeHolderColor}`\n },\n '&:focus': readOnly\n ? { outline: 'none' }\n : { outline: `2px solid ${focusRingColor}` }\n }\n }\n }\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { Icon } from '@components/toolkit/Icon'\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n\n label,\n required,\n requiredColor,\n labelColor,\n labelWeight,\n labelVariant,\n\n startIcon,\n iconColor\n } = props\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [\n p.height,\n p.readOnly,\n p.startIcon,\n p.placeholderColor,\n p.focusedRingColor\n ],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n props.onChange?.(e.target.value)\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div className=\"flex items-center gap-3\">\n <Label\n htmlFor={inputId}\n label={label}\n required={required}\n requiredColor={requiredColor}\n labelColor={labelColor}\n labelWeight={labelWeight}\n labelVariant={labelVariant}\n />\n </div>\n )\n }\n\n return (\n <div>\n {renderLabel()}\n\n <div style={{ position: 'relative' }}>\n {startIcon && (\n <div style={styles.iconContainer}>\n <Icon\n name={startIcon}\n color={iconColor ? iconColor : 'var(--px-text-primary)'}\n />\n </div>\n )}\n\n <textarea\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n placeholder={placeholder}\n style={styles.textArea}\n className={classes.textArea}\n onChange={handleChange}\n />\n </div>\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;AAIA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;CAEjD,MAAM,iBAAiB,MAAM,oBAAoB;CACjD,MAAM,mBACJ,MAAM,oBAAoB;AAE5B,QAAO;EACL,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,QAAQ;GACR,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB,EAChB,OAAO,GAAG,oBACX;IACD,WAAW,WACP,EAAE,SAAS,QAAQ,GACnB,EAAE,SAAS,aAAa,kBAAkB;IAC/C;GACF;EACF;;;;;AC5BH,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aAEA,OACA,UACA,eACA,YACA,aACA,cAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,SAAS;IACF;IACG;IACK;IACH;IACC;IACC;KACd;IACE;;AAIV,QACE,qBAAC;EACE,aAAa;EAEd,qBAAC;GAAI,OAAO,EAAE,UAAU,YAAY;cACjC,aACC,oBAAC;IAAI,OAAO,OAAO;cACjB,oBAAC;KACC,MAAM;KACN,OAAO,YAAY,YAAY;MAC/B;KACE,EAGR,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;IACE;EAEL,aAAa,CAAC,gBACb,qBAAC;GAAW,SAAQ;GAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;IAC9D,MAAM;IAAO;IAAE;IAAU;IAAE;;IACjB,GACX;KACA"}
|