softable-pixels-web 1.2.2 → 1.2.3
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-Vm1Odbi_.js → Button-BgsYjAC1.js} +2 -1
- package/dist/{Button-Vm1Odbi_.js.map → Button-BgsYjAC1.js.map} +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/button.js +1 -1
- package/dist/{index-BZ2ZYR1Y.d.ts → index-B-f7Shgf.d.ts} +3 -3
- package/dist/{index-CehwJRt_.d.ts → index-BdXsHz33.d.ts} +3 -3
- package/dist/{index-CI9oUkku.d.ts → index-wFIuQoWm.d.ts} +3 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.js +1 -1
- package/dist/tab-switch.d.ts +1 -1
- package/dist/text-area.d.ts +1 -1
- package/package.json +1 -1
|
@@ -138,6 +138,7 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
|
|
|
138
138
|
}
|
|
139
139
|
return /* @__PURE__ */ jsx("button", {
|
|
140
140
|
type,
|
|
141
|
+
form: rest.form,
|
|
141
142
|
disabled,
|
|
142
143
|
"aria-busy": rest.loading,
|
|
143
144
|
style: styles.container,
|
|
@@ -162,4 +163,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
|
|
|
162
163
|
|
|
163
164
|
//#endregion
|
|
164
165
|
export { Button as t };
|
|
165
|
-
//# sourceMappingURL=Button-
|
|
166
|
+
//# sourceMappingURL=Button-BgsYjAC1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button-
|
|
1
|
+
{"version":3,"file":"Button-BgsYjAC1.js","names":["ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../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":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n return styled({\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 backgroundColor: 'inherit'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/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 { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\n\nexport function createButtonStyles({\n size,\n color,\n variant,\n fullWidth,\n textAlign,\n outlineColor\n}: ButtonProps) {\n const finalVariant = variant ?? 'filled'\n\n return styled({\n container: {\n minHeight: getSize(size ?? 'md'),\n width: fullWidth ? '100%' : 'fit-content',\n\n position: 'relative',\n display: 'flex',\n justifyContent: textAlign || 'center',\n\n padding: '0.625rem var(--px-space-xl)',\n gap: 'var(--px-space-sm)',\n\n borderRadius: 'var(--px-radius-lg)',\n\n cursor: 'pointer',\n overflow: 'hidden',\n\n transition: 'background-color 0.5s',\n\n border: getBorder(finalVariant, outlineColor || color),\n backgroundColor: getBackgroundColor(finalVariant, color),\n boxShadow: variant === 'outlined' ? 'var(--px-shadow-xs)' : 'none',\n\n __rules: {\n '&:hover': {\n opacity: '0.85 !important'\n },\n\n '&:disabled': {\n opacity: '0.5 !important',\n cursor: 'not-allowed !important'\n },\n\n '&:focus': {\n outlineOffset: '2px',\n outline: '2px solid var(--px-color-primary) !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 backgroundColor: 'inherit'\n }\n })\n}\n\nfunction getSize(size: ButtonSize | string): string {\n switch (size) {\n case 'lg':\n return '3.25rem'\n case 'md':\n return '2.75rem'\n case 'sm':\n return '2.25rem'\n case 'xs':\n return '1.75rem'\n default:\n return size\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-border-primary)'\n\n if (variant === 'ghost') return 'none'\n\n return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps): string {\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 type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\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 override: rest.styles,\n applyCommonProps: true,\n commonSlot: 'container',\n pick: p => [p.disabled, p.loading, p.variant, p.label, p.color]\n }\n )\n\n // Functions\n function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n if (disabled) return\n\n if (rest.onClick) rest.onClick(event)\n }\n\n return (\n <button\n type={type}\n form={rest.form}\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\n color={textColor}\n fontSize={resolvedProps.fontSize}\n variant={rest.labelVariant || 'b1'}\n >\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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"}
|
package/dist/button.d.ts
CHANGED
package/dist/button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as CommonStyleProps } from "./styleProps-CrD6h1FM.js";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/components/commons/toolkit/TabSwitch/styles.d.ts
|
|
6
6
|
declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
|
|
@@ -41,7 +41,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
|
|
|
41
41
|
}
|
|
42
42
|
//#endregion
|
|
43
43
|
//#region src/components/commons/toolkit/TabSwitch/index.d.ts
|
|
44
|
-
declare const TabSwitch: <T>(props: TabSwitchProps<T>) =>
|
|
44
|
+
declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
|
|
45
45
|
//#endregion
|
|
46
46
|
export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
|
|
47
|
-
//# sourceMappingURL=index-
|
|
47
|
+
//# sourceMappingURL=index-B-f7Shgf.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as TextProps } from "./styleProps-CrD6h1FM.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/commons/inputs/TextArea/styles.d.ts
|
|
5
5
|
declare function createTextAreaStyles(props: TextAreaProps): {
|
|
@@ -65,7 +65,7 @@ interface TextAreaProps {
|
|
|
65
65
|
}
|
|
66
66
|
//#endregion
|
|
67
67
|
//#region src/components/commons/inputs/TextArea/index.d.ts
|
|
68
|
-
declare const TextArea: (props: TextAreaProps) =>
|
|
68
|
+
declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
|
|
69
69
|
//#endregion
|
|
70
70
|
export { TextArea as t };
|
|
71
|
-
//# sourceMappingURL=index-
|
|
71
|
+
//# sourceMappingURL=index-BdXsHz33.d.ts.map
|
|
@@ -72,6 +72,8 @@ interface ButtonProps extends PaddingProps, LayoutProps {
|
|
|
72
72
|
styles?: TypeStyles<typeof createButtonStyles>;
|
|
73
73
|
/** Icon displayed after the label */
|
|
74
74
|
endIcon?: ReactNode;
|
|
75
|
+
/** Form id */
|
|
76
|
+
form?: string;
|
|
75
77
|
/**
|
|
76
78
|
* @default false
|
|
77
79
|
* @description When true, the button enters a loading state:
|
|
@@ -121,4 +123,4 @@ interface ButtonProps extends PaddingProps, LayoutProps {
|
|
|
121
123
|
declare const Button: React.FC<ButtonProps>;
|
|
122
124
|
//#endregion
|
|
123
125
|
export { Button as t };
|
|
124
|
-
//# sourceMappingURL=index-
|
|
126
|
+
//# sourceMappingURL=index-wFIuQoWm.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import "./types-n-gj1UXJ.js";
|
|
2
|
-
import { t as Button } from "./index-
|
|
2
|
+
import { t as Button } from "./index-wFIuQoWm.js";
|
|
3
3
|
import { t as IconButton } from "./index-DsQyEI6l.js";
|
|
4
4
|
import { n as types_d_exports$1, t as ColorPicker } from "./index-v28FA4ph.js";
|
|
5
5
|
import { n as Locale, r as MaskType, t as MaskModule } from "./index-C2rKLkDO.js";
|
|
6
6
|
import { t as Input } from "./index-B9Ooz6lk.js";
|
|
7
7
|
import { n as types_d_exports$4, t as Select } from "./index-CNPbAm9i.js";
|
|
8
8
|
import { n as types_d_exports$3 } from "./types-B-zFTnqe.js";
|
|
9
|
-
import { t as TextArea } from "./index-
|
|
9
|
+
import { t as TextArea } from "./index-BdXsHz33.js";
|
|
10
10
|
import { t as Popover } from "./index-BbvC10jX.js";
|
|
11
11
|
import { t as BasePopover } from "./index-DvbYyCcE.js";
|
|
12
12
|
import { t as Breadcrumb } from "./index-XBmzyFW4.js";
|
|
@@ -19,7 +19,7 @@ import { t as ChipList } from "./index-Du2b4ABa.js";
|
|
|
19
19
|
import { n as types_d_exports$2, t as ContextMenu } from "./index-B_xvhcYY.js";
|
|
20
20
|
import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
|
|
21
21
|
import { t as Switch } from "./index-BEd1qAu7.js";
|
|
22
|
-
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-
|
|
22
|
+
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-B-f7Shgf.js";
|
|
23
23
|
import { Typography } from "./typography.js";
|
|
24
24
|
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-CJDqp_om.js";
|
|
25
25
|
import { useDismiss } from "./use-dismiss.js";
|
package/dist/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import { n as types_exports, t as Chip } from "./Chip-DWoGbX_A.js";
|
|
|
16
16
|
import "./ErrorMessage-BRnYfudz.js";
|
|
17
17
|
import { t as ChipList } from "./ChipList-ClC-BPyL.js";
|
|
18
18
|
import "./Loader-DUqRFMzl.js";
|
|
19
|
-
import { t as Button } from "./Button-
|
|
19
|
+
import { t as Button } from "./Button-BgsYjAC1.js";
|
|
20
20
|
import { t as IconButton } from "./IconButton-BkwXYUL1.js";
|
|
21
21
|
import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-ChyYaHh2.js";
|
|
22
22
|
import { t as Input } from "./Input-Dam9Lbxf.js";
|
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-B-f7Shgf.js";
|
|
2
2
|
export { SwitchOption, TabSwitch, TabSwitchProps };
|
package/dist/text-area.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as TextArea } from "./index-
|
|
1
|
+
import { t as TextArea } from "./index-BdXsHz33.js";
|
|
2
2
|
export { TextArea };
|