softable-pixels-web 1.2.12 → 1.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{TabSwitch-DIHCG0vJ.js → TabSwitch-CQW5FSP2.js} +2 -2
- package/dist/{TabSwitch-DIHCG0vJ.js.map → TabSwitch-CQW5FSP2.js.map} +1 -1
- package/dist/{index-Cg9O1rrv.d.ts → index-CkqVNQbq.d.ts} +2 -2
- package/dist/{index-y5WY0xGq.d.ts → index-DqpXxYBu.d.ts} +2 -2
- package/dist/{index-2hmoLtaJ.d.ts → index-EallwVqf.d.ts} +2 -2
- package/dist/index.d.ts +3 -3
- package/dist/index.js +1 -1
- package/dist/input.d.ts +1 -1
- package/dist/select.d.ts +1 -1
- package/dist/tab-switch.js +1 -1
- package/dist/text-area.d.ts +1 -1
- package/package.json +1 -1
|
@@ -87,7 +87,7 @@ function createTabSwitchStyles(props) {
|
|
|
87
87
|
color: "var(--px-text-primary, #4b5563)",
|
|
88
88
|
width: fitContent ? "fit-content" : "100%",
|
|
89
89
|
backgroundColor: backgroundColor ?? "transparent",
|
|
90
|
-
borderBottom: variant === "
|
|
90
|
+
borderBottom: variant === "underline" ? "1px solid var(--px-border-primary, #e5e7eb)" : "unset",
|
|
91
91
|
gap: 0,
|
|
92
92
|
__rules: { "& svg": { zIndex: 1 } }
|
|
93
93
|
} });
|
|
@@ -122,4 +122,4 @@ const TabSwitch = (props) => {
|
|
|
122
122
|
|
|
123
123
|
//#endregion
|
|
124
124
|
export { TabSwitch as t };
|
|
125
|
-
//# sourceMappingURL=TabSwitch-
|
|
125
|
+
//# sourceMappingURL=TabSwitch-CQW5FSP2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabSwitch-
|
|
1
|
+
{"version":3,"file":"TabSwitch-CQW5FSP2.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } 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) {\n const accent = selectedColor ?? 'var(--px-color-primary)'\n\n return styled({\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/commons/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 { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n const { fitContent, backgroundColor, variant } = props\n\n return styled({\n container: {\n display: 'flex',\n padding: '3px',\n flexDirection: 'row',\n alignItems: 'center',\n color: 'var(--px-text-primary, #4b5563)',\n width: fitContent ? 'fit-content' : '100%',\n backgroundColor: backgroundColor ?? 'transparent',\n borderBottom:\n variant === 'underline'\n ? '1px solid var(--px-border-primary, #e5e7eb)'\n : 'unset',\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.disabled, p.currentValue],\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,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,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,CAAC;;;;;AC3BJ,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,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;ACTJ,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,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,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"}
|
|
@@ -25,7 +25,7 @@ declare function createSelectStyles(props: SelectProps): {
|
|
|
25
25
|
opacity: number;
|
|
26
26
|
cursor: "not-allowed" | "pointer" | "progress";
|
|
27
27
|
boxShadow: "var(--px-shadow-default)";
|
|
28
|
-
borderColor: "var(--px-
|
|
28
|
+
borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
|
|
29
29
|
__rules: {
|
|
30
30
|
'&:focus-within': {
|
|
31
31
|
outlineOffset: string;
|
|
@@ -84,4 +84,4 @@ interface SelectOption {
|
|
|
84
84
|
declare const Select: React$1.FC<SelectProps>;
|
|
85
85
|
//#endregion
|
|
86
86
|
export { types_d_exports as n, Select as t };
|
|
87
|
-
//# sourceMappingURL=index-
|
|
87
|
+
//# sourceMappingURL=index-CkqVNQbq.d.ts.map
|
|
@@ -22,7 +22,7 @@ declare function createInputStyles(props: InputProps): {
|
|
|
22
22
|
padding: string;
|
|
23
23
|
opacity: number;
|
|
24
24
|
boxShadow: "var(--px-shadow-default)";
|
|
25
|
-
borderColor: "var(--px-
|
|
25
|
+
borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
|
|
26
26
|
__rules: {
|
|
27
27
|
'&:focus-within': {
|
|
28
28
|
outlineOffset: string;
|
|
@@ -101,4 +101,4 @@ interface InputMethods {
|
|
|
101
101
|
declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
|
|
102
102
|
//#endregion
|
|
103
103
|
export { Input as t };
|
|
104
|
-
//# sourceMappingURL=index-
|
|
104
|
+
//# sourceMappingURL=index-DqpXxYBu.d.ts.map
|
|
@@ -27,7 +27,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
|
|
|
27
27
|
fontWeight: "400";
|
|
28
28
|
fontSize: string;
|
|
29
29
|
color: "var(--px-text-primary)";
|
|
30
|
-
borderColor: "var(--px-
|
|
30
|
+
borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
|
|
31
31
|
outlineOffset: string;
|
|
32
32
|
cursor: "default" | undefined;
|
|
33
33
|
__rules: {
|
|
@@ -70,4 +70,4 @@ interface TextAreaProps {
|
|
|
70
70
|
declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
|
|
71
71
|
//#endregion
|
|
72
72
|
export { TextArea as t };
|
|
73
|
-
//# sourceMappingURL=index-
|
|
73
|
+
//# sourceMappingURL=index-EallwVqf.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -4,11 +4,11 @@ import { t as IconButton } from "./index-BnNahlXB.js";
|
|
|
4
4
|
import { n as types_d_exports$1, t as ColorPicker } from "./index-kc3NqscD.js";
|
|
5
5
|
import { n as types_d_exports$3, t as DatePicker } from "./index-CsubfLNp.js";
|
|
6
6
|
import { n as Locale, r as MaskType, t as MaskModule } from "./index-ftKfqd7S.js";
|
|
7
|
-
import { t as Input } from "./index-
|
|
7
|
+
import { t as Input } from "./index-DqpXxYBu.js";
|
|
8
8
|
import { t as SearchInput } from "./index-CHvftTxv.js";
|
|
9
|
-
import { n as types_d_exports$5, t as Select } from "./index-
|
|
9
|
+
import { n as types_d_exports$5, t as Select } from "./index-CkqVNQbq.js";
|
|
10
10
|
import { n as types_d_exports$4 } from "./types-1ZNOd7Tt.js";
|
|
11
|
-
import { t as TextArea } from "./index-
|
|
11
|
+
import { t as TextArea } from "./index-EallwVqf.js";
|
|
12
12
|
import { t as Popover } from "./index-ClRmImX5.js";
|
|
13
13
|
import { t as BasePopover } from "./index-WFi4Q5f-.js";
|
|
14
14
|
import { t as Breadcrumb } from "./index-DHTU_QTw.js";
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import { t as Typography } from "./Typography-DOmGYHd6.js";
|
|
|
8
8
|
import { t as Checkbox } from "./Checkbox-Dn8CtTOP.js";
|
|
9
9
|
import { n as types_exports$3, t as DatePicker } from "./DatePicker-Bl7pIrHR.js";
|
|
10
10
|
import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CeJlZRoI.js";
|
|
11
|
-
import { t as TabSwitch } from "./TabSwitch-
|
|
11
|
+
import { t as TabSwitch } from "./TabSwitch-CQW5FSP2.js";
|
|
12
12
|
import { t as CheckItem } from "./CheckItem-DzRbPRpC.js";
|
|
13
13
|
import { t as InfoSummary } from "./InfoSummary-CKymtoj5.js";
|
|
14
14
|
import { t as BasePopover } from "./BasePopover-BvMT9rNx.js";
|
package/dist/input.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Input } from "./index-
|
|
1
|
+
import { t as Input } from "./index-DqpXxYBu.js";
|
|
2
2
|
export { Input };
|
package/dist/select.d.ts
CHANGED
package/dist/tab-switch.js
CHANGED
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-EallwVqf.js";
|
|
2
2
|
export { TextArea };
|