softable-pixels-web 1.2.40 → 1.2.42
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/{Checkbox-DWlmddP3.js → Checkbox-CfJ2UfuX.js} +3 -2
- package/dist/{Checkbox-DWlmddP3.js.map → Checkbox-CfJ2UfuX.js.map} +1 -1
- package/dist/{Chip-0yO5bwim.js → Chip-4yKggGpF.js} +2 -1
- package/dist/{Chip-0yO5bwim.js.map → Chip-4yKggGpF.js.map} +1 -1
- package/dist/{ChipList-CmO2ctak.js → ChipList-MHNN5Q3u.js} +2 -2
- package/dist/{ChipList-CmO2ctak.js.map → ChipList-MHNN5Q3u.js.map} +1 -1
- package/dist/checkbox.d.ts +2 -2
- package/dist/checkbox.js +1 -1
- package/dist/chip-list.js +2 -2
- package/dist/chip.js +1 -1
- package/dist/{index-DlP2AWaD.d.ts → index-Jsq11LTb.d.ts} +3 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +3 -3
- package/package.json +1 -1
|
@@ -129,7 +129,7 @@ function getContrastingTextColor(backgroundColor) {
|
|
|
129
129
|
//#endregion
|
|
130
130
|
//#region src/components/commons/toolkit/Checkbox/index.tsx
|
|
131
131
|
const Checkbox$1 = (props) => {
|
|
132
|
-
const { icon, label, color, labelVariant, labelLineThrough = false, checked = false, disabled = false, onChange } = props;
|
|
132
|
+
const { icon, label, color, required, labelVariant, labelLineThrough = false, checked = false, disabled = false, onChange } = props;
|
|
133
133
|
const iconColor = color ? getContrastingTextColor(color) : void 0;
|
|
134
134
|
const { id } = useCheckbox();
|
|
135
135
|
const { styles, classes } = useThemedStyles(props, createCheckBoxStyles);
|
|
@@ -141,6 +141,7 @@ const Checkbox$1 = (props) => {
|
|
|
141
141
|
id,
|
|
142
142
|
tabIndex: 0,
|
|
143
143
|
checked,
|
|
144
|
+
required,
|
|
144
145
|
disabled,
|
|
145
146
|
onCheckedChange: (checked$1) => onChange(checked$1 === true),
|
|
146
147
|
children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
|
|
@@ -163,4 +164,4 @@ const Checkbox$1 = (props) => {
|
|
|
163
164
|
|
|
164
165
|
//#endregion
|
|
165
166
|
export { Checkbox$1 as t };
|
|
166
|
-
//# sourceMappingURL=Checkbox-
|
|
167
|
+
//# sourceMappingURL=Checkbox-CfJ2UfuX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox-
|
|
1
|
+
{"version":3,"file":"Checkbox-CfJ2UfuX.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return styled({\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/commons/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, labelLineThrough = false } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography\n variant={labelVariant ?? 'b1'}\n fontWeight=\"regular\"\n labelLineThrough={labelLineThrough}\n >\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 { styled, 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) {\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 styled({\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] as any),\n ...(CHECKBOX_STYLES.radius[radius] as any),\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 type { CheckboxProps }\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n required,\n labelVariant,\n labelLineThrough = false,\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 required={required}\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 labelLineThrough={labelLineThrough}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,kBAAkB,OAA6B;CAC7D,MAAM,EAAE,aAAa;AAErB,QAAO,OAAO,EACZ,WAAW;EACT,YAAY;EACZ,SAAS,WAAW,KAAM;EAC1B,QAAQ,WAAW,gBAAgB;EAEnC,YAAY;EAEZ,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EACjD;EACF,EACF,CAAC;;;;;ACJJ,MAAaA,WAA8B,UAAS;CAClD,MAAM,EAAE,OAAO,OAAO,cAAc,mBAAmB,UAAU;CAGjE,MAAM,EAAE,WAAW,gBAAgB,OAAO,mBAAmB;EAC3D,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,MAAM;EAChC,kBAAkB;EACnB,CAAC;AAEF,QACE,oBAACC,MAAW;EAAK,SAAS;EAAO,OAAO,OAAO;YAC7C,oBAAC;GACC,SAAS,gBAAgB;GACzB,YAAW;GACO;aAEjB;IACU;GACG;;;;;AC9BtB,SAAgB,cAAc;AAC5B,QAAO,EACL,IAAI,OAAO,EACZ;;;;;ACFH,MAAaC,kBAA4C;CACvD,MAAM;EACJ,IAAI;GAAE,OAAO;GAAQ,QAAQ;GAAQ;EACrC,IAAI;GAAE,OAAO;GAAW,QAAQ;GAAW;EAC3C,IAAI;GAAE,OAAO;GAAU,QAAQ;GAAU;EAC1C;CACD,QAAQ;EACN,MAAM,EAAE,cAAc,GAAG;EACzB,IAAI,EAAE,cAAc,WAAW;EAC/B,IAAI,EAAE,cAAc,YAAY;EAChC,IAAI,EAAE,cAAc,UAAU;EAC9B,MAAM,EAAE,cAAc,QAAQ;EAC/B;CACF;AAED,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EACJ,OACA,SACA,OAAO,MACP,SAAS,MACT,WAAW,OACX,iBAAiB,YACf;CAEJ,MAAM,4BAA4B;AAElC,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,WAAW;GACX,YAAY;GACZ,mBAAmB,SAAS;GAC5B,eAAe,mBAAmB,UAAU,QAAQ;GACrD;EAED,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UAAU,QAAQ;GACnC,aAAa;GACb,aAAa;GACb,aAAa,UAAU,QAAQ;GAE/B,YAAY;GACZ,SAAS,WAAW,KAAM;GAC1B,QAAQ,WAAW,gBAAgB;GAEnC,GAAI,gBAAgB,KAAK;GACzB,GAAI,gBAAgB,OAAO;GAE3B,SAAS;IACP,WAAW,EAAE,aAAa,uCAAuC;IACjE,mBAAmB;KACjB,SAAS;KACT,WAAW,aAAa,0BAA0B;KACnD;IACF;GACF;EAED,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACR;EACF,CAAC;;;;;;;;;ACpEJ,SAAgB,wBACd,iBACmB;CACnB,IAAI,MAAM,gBAAgB,QAAQ,KAAK,GAAG;AAE1C,KAAI,IAAI,WAAW,EACjB,OAAM,IACH,MAAM,GAAG,CACT,KAAI,MAAK,IAAI,EAAE,CACf,KAAK,GAAG;AAGb,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,UAAU,GAAG,EAAE;AAG3B,KAAI,IAAI,WAAW,EAAG,QAAO;CAE7B,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;AAI3C,SAFmB,OAAQ,IAAI,OAAQ,IAAI,OAAQ,KAAK,MAErC,KAAM,UAAU;;;;;ACPrC,MAAaC,cAAoC,UAAS;CACxD,MAAM,EACJ,MACA,OACA,OACA,UACA,cACA,mBAAmB,OACnB,UAAU,OACV,WAAW,OACX,aACE;CAEJ,MAAM,YAAY,QAAQ,wBAAwB,MAAM,GAAG;CAG3D,MAAM,EAAE,OAAO,aAAa;CAE5B,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,qBAAqB;AAExE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAACC,SAAc;GACb,OAAO,OAAO;GACd,WAAW,QAAQ;GACf;GACJ,UAAU;GACD;GACC;GACA;GACV,kBAAiB,cAAW,SAASC,cAAY,KAAK;aAEtD,oBAACD,SAAc;IAAU,OAAO,OAAO;cACpC,QAAQ,oBAAC;KAAK,MAAK;KAAgB,MAAK;KAAK,OAAO;MAAa;KAC1C;IACP,EAEpB,QACC,oBAACE;GACC,OAAO;GACW;GACX;GACG;GACI;IACd,GACA;GACA"}
|
|
@@ -54,6 +54,7 @@ const Chip = (props) => {
|
|
|
54
54
|
props.onClick?.(props.data);
|
|
55
55
|
}
|
|
56
56
|
return /* @__PURE__ */ jsxs(Component, {
|
|
57
|
+
type: "button",
|
|
57
58
|
disabled: isDisabled,
|
|
58
59
|
style: styles.container,
|
|
59
60
|
className: classes.container,
|
|
@@ -69,4 +70,4 @@ const Chip = (props) => {
|
|
|
69
70
|
|
|
70
71
|
//#endregion
|
|
71
72
|
export { types_exports as n, Chip as t };
|
|
72
|
-
//# sourceMappingURL=Chip-
|
|
73
|
+
//# sourceMappingURL=Chip-4yKggGpF.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip-
|
|
1
|
+
{"version":3,"file":"Chip-4yKggGpF.js","names":["Chip: React.FC<ChipProps>"],"sources":["../src/components/commons/toolkit/Chip/styles.ts","../src/components/commons/toolkit/Chip/types.ts","../src/components/commons/toolkit/Chip/index.tsx"],"sourcesContent":["// Types\nimport type { ChipProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipStyles(props: ChipProps) {\n return styled({\n container: {\n display: 'flex',\n alignItems: 'center',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n paddingBlock: '0.25rem',\n paddingRight: '0.625rem',\n paddingLeft: props.data.icon ? '0.5rem' : '0.625rem',\n\n cursor: !props.viewOnly ? 'pointer' : 'default',\n\n boxShadow: 'var(--px-shadow-default)',\n borderColor: 'var(--px-border-primary)',\n color: props.isSelected ? 'white' : 'var(--px-text-primary)',\n backgroundColor: props.isSelected\n ? 'var(--px-color-primary)'\n : 'var(--px-bg)',\n\n whiteSpace: 'nowrap',\n userSelect: props.viewOnly ? 'auto' : 'none',\n MozUserSelect: props.viewOnly ? 'auto' : 'none',\n msUserSelect: props.viewOnly ? 'inherit' : 'none',\n WebkitUserSelect: props.viewOnly ? 'auto' : 'none',\n\n transition: 'background-color 0.25s ease-out',\n opacity: checkDisabled(props) ? 0.5 : 1,\n\n __rules: {\n '&:hover': {\n opacity: props.viewOnly ? 1 : 0.85\n },\n\n '&:disabled': {\n opacity: '0.5 !important',\n cursor: 'not-allowed !important'\n }\n }\n }\n })\n}\n\nfunction checkDisabled(props: ChipProps) {\n if (!props.viewOnly) return false\n return props.listDisabled || props.data.disabled\n}\n","export interface ChipProps {\n data: ChipOption\n viewOnly?: boolean\n isSelected?: boolean\n listDisabled?: boolean\n\n onClick?(value: ChipOption): void\n}\n\nexport interface ChipOption {\n value: string\n label: string\n\n disabled?: boolean\n icon?: React.ReactNode\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ChipProps } from './types'\n\n// Styles\nimport { createChipStyles } from './styles'\n\nexport * as ChipTypes from './types'\n\nexport const Chip: React.FC<ChipProps> = props => {\n // Hooks\n const { styles, classes } = useThemedStyles(props, createChipStyles)\n\n // Constants\n const Component = props.viewOnly ? 'span' : 'button'\n const isDisabled = props.listDisabled || props.data.disabled\n\n // Functions\n function handleClick() {\n if (isDisabled || props.viewOnly) return\n props.onClick?.(props.data)\n }\n\n return (\n <Component\n type=\"button\"\n disabled={isDisabled}\n style={styles.container}\n className={classes.container}\n onClick={handleClick}\n >\n {props.data.icon}\n\n <Typography variant=\"b2\" lineHeight=\"1.25rem\" color=\"inherit\">\n {props.data.label}\n </Typography>\n </Component>\n )\n}\n"],"mappings":";;;;;AAIA,SAAgB,iBAAiB,OAAkB;AACjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,YAAY;EAEZ,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,cAAc;EACd,aAAa,MAAM,KAAK,OAAO,WAAW;EAE1C,QAAQ,CAAC,MAAM,WAAW,YAAY;EAEtC,WAAW;EACX,aAAa;EACb,OAAO,MAAM,aAAa,UAAU;EACpC,iBAAiB,MAAM,aACnB,4BACA;EAEJ,YAAY;EACZ,YAAY,MAAM,WAAW,SAAS;EACtC,eAAe,MAAM,WAAW,SAAS;EACzC,cAAc,MAAM,WAAW,YAAY;EAC3C,kBAAkB,MAAM,WAAW,SAAS;EAE5C,YAAY;EACZ,SAAS,cAAc,MAAM,GAAG,KAAM;EAEtC,SAAS;GACP,WAAW,EACT,SAAS,MAAM,WAAW,IAAI,KAC/B;GAED,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,cAAc,OAAkB;AACvC,KAAI,CAAC,MAAM,SAAU,QAAO;AAC5B,QAAO,MAAM,gBAAgB,MAAM,KAAK;;;;;;;;;AElC1C,MAAaA,QAA4B,UAAS;CAEhD,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,iBAAiB;CAGpE,MAAM,YAAY,MAAM,WAAW,SAAS;CAC5C,MAAM,aAAa,MAAM,gBAAgB,MAAM,KAAK;CAGpD,SAAS,cAAc;AACrB,MAAI,cAAc,MAAM,SAAU;AAClC,QAAM,UAAU,MAAM,KAAK;;AAG7B,QACE,qBAAC;EACC,MAAK;EACL,UAAU;EACV,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,SAAS;aAER,MAAM,KAAK,MAEZ,oBAAC;GAAW,SAAQ;GAAK,YAAW;GAAU,OAAM;aACjD,MAAM,KAAK;IACD;GACH"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as styled, t as useThemedStyles } from "./useThemedStyles-Dco_54KA.js";
|
|
2
|
-
import { t as Chip } from "./Chip-
|
|
2
|
+
import { t as Chip } from "./Chip-4yKggGpF.js";
|
|
3
3
|
import { t as Label } from "./Label-CBUa-x13.js";
|
|
4
4
|
import { t as ErrorMessage } from "./ErrorMessage-6pG4hFId.js";
|
|
5
5
|
import { useEffect, useState } from "react";
|
|
@@ -111,4 +111,4 @@ const ChipList = (props) => {
|
|
|
111
111
|
|
|
112
112
|
//#endregion
|
|
113
113
|
export { ChipList as t };
|
|
114
|
-
//# sourceMappingURL=ChipList-
|
|
114
|
+
//# sourceMappingURL=ChipList-MHNN5Q3u.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipList-
|
|
1
|
+
{"version":3,"file":"ChipList-MHNN5Q3u.js","names":["ChipsLoader: React.FC","ChipList: React.FC<ChipListProps>"],"sources":["../src/components/commons/toolkit/ChipList/components/ChipsLoader/styles.ts","../src/components/commons/toolkit/ChipList/components/ChipsLoader/index.tsx","../src/components/commons/toolkit/ChipList/hooks/useChipList/index.ts","../src/components/commons/toolkit/ChipList/styles.ts","../src/components/commons/toolkit/ChipList/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipsLoaderStyles() {\n return styled({\n container: {\n width: '5rem',\n height: '1.75rem',\n\n display: 'flex',\n\n borderRadius: '0.5rem',\n\n backgroundColor: 'var(--px-surface)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { useEffect, useState } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createChipsLoaderStyles } from './styles'\n\nexport const ChipsLoader: React.FC = () => {\n // States\n const [pulseOn, setPulseOn] = useState(true)\n\n // Hooks\n const { styles } = useThemedStyles({}, createChipsLoaderStyles)\n\n useEffect(() => {\n const id = setInterval(() => setPulseOn(v => !v), 600)\n return () => clearInterval(id)\n }, [])\n\n // Functions\n function renderContent() {\n return Array.from({ length: 5 }).map((_, idx) => {\n const delayMs = idx * 120\n\n return (\n <div\n key={idx.toString()}\n style={{\n ...styles.container,\n opacity: pulseOn ? 1 : 0.6,\n transition: `opacity 600ms ease-in-out ${delayMs}ms`\n }}\n />\n )\n })\n }\n\n return <>{renderContent()}</>\n}\n","// Types\nimport type { ChipListProps } from '../../types'\nimport type { ChipOption } from '@components/commons/toolkit/Chip/types'\n\nexport function useChipList({\n value,\n canClear,\n multiple,\n onChange\n}: ChipListProps) {\n // Functions\n function handleChange(option: ChipOption) {\n const isAlreadySelected = value.includes(option.value)\n\n if (!multiple) {\n if (isAlreadySelected) {\n if (canClear) onChange?.([])\n } else onChange?.([option.value])\n\n return\n }\n\n if (isAlreadySelected) {\n if (value.length === 1) {\n if (canClear) onChange?.([])\n } else onChange?.(value.filter(v => v !== option.value))\n } else onChange?.([...value, option.value])\n }\n\n return { handleChange }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipListStyles() {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n\n listContainer: {\n width: '100%',\n\n display: 'flex',\n flexWrap: 'wrap',\n\n gap: '0.5rem'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Chip } from '../Chip'\nimport { Label } from '../Label'\nimport { ErrorMessage } from '../ErrorMessage'\nimport { ChipsLoader } from './components/ChipsLoader'\n\n// Hooks\nimport { useChipList } from './hooks/useChipList'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ChipListProps } from './types'\n\n// Styles\nimport { createChipListStyles } from './styles'\n\nexport const ChipList: React.FC<ChipListProps> = props => {\n // Hooks\n const { handleChange } = useChipList(props)\n const { styles } = useThemedStyles(props, createChipListStyles)\n\n // Functions\n function renderContent() {\n if (props.isLoading) return <ChipsLoader />\n\n return props.options.map(item => (\n <Chip\n key={item.value}\n data={item}\n viewOnly={props.viewOnly}\n listDisabled={props.disabled}\n isSelected={props.value.includes(item.value)}\n onClick={handleChange}\n />\n ))\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <div style={styles.listContainer}>{renderContent()}</div>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAGA,SAAgB,0BAA0B;AACxC,QAAO,OAAO,EACZ,WAAW;EACT,OAAO;EACP,QAAQ;EAER,SAAS;EAET,cAAc;EAEd,iBAAiB;EAClB,EACF,CAAC;;;;;ACLJ,MAAaA,oBAA8B;CAEzC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAG5C,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,wBAAwB;AAE/D,iBAAgB;EACd,MAAM,KAAK,kBAAkB,YAAW,MAAK,CAAC,EAAE,EAAE,IAAI;AACtD,eAAa,cAAc,GAAG;IAC7B,EAAE,CAAC;CAGN,SAAS,gBAAgB;AACvB,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ;GAC/C,MAAM,UAAU,MAAM;AAEtB,UACE,oBAAC,SAEC,OAAO;IACL,GAAG,OAAO;IACV,SAAS,UAAU,IAAI;IACvB,YAAY,6BAA6B,QAAQ;IAClD,IALI,IAAI,UAAU,CAMnB;IAEJ;;AAGJ,QAAO,4CAAG,eAAe,GAAI;;;;;ACpC/B,SAAgB,YAAY,EAC1B,OACA,UACA,UACA,YACgB;CAEhB,SAAS,aAAa,QAAoB;EACxC,MAAM,oBAAoB,MAAM,SAAS,OAAO,MAAM;AAEtD,MAAI,CAAC,UAAU;AACb,OAAI,mBACF;QAAI,SAAU,YAAW,EAAE,CAAC;SACvB,YAAW,CAAC,OAAO,MAAM,CAAC;AAEjC;;AAGF,MAAI,kBACF,KAAI,MAAM,WAAW,GACnB;OAAI,SAAU,YAAW,EAAE,CAAC;QACvB,YAAW,MAAM,QAAO,MAAK,MAAM,OAAO,MAAM,CAAC;MACnD,YAAW,CAAC,GAAG,OAAO,OAAO,MAAM,CAAC;;AAG7C,QAAO,EAAE,cAAc;;;;;AC1BzB,SAAgB,uBAAuB;AACrC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EAED,eAAe;GACb,OAAO;GAEP,SAAS;GACT,UAAU;GAEV,KAAK;GACN;EACF,CAAC;;;;;ACHJ,MAAaC,YAAoC,UAAS;CAExD,MAAM,EAAE,iBAAiB,YAAY,MAAM;CAC3C,MAAM,EAAE,WAAW,gBAAgB,OAAO,qBAAqB;CAG/D,SAAS,gBAAgB;AACvB,MAAI,MAAM,UAAW,QAAO,oBAAC,gBAAc;AAE3C,SAAO,MAAM,QAAQ,KAAI,SACvB,oBAAC;GAEC,MAAM;GACN,UAAU,MAAM;GAChB,cAAc,MAAM;GACpB,YAAY,MAAM,MAAM,SAAS,KAAK,MAAM;GAC5C,SAAS;KALJ,KAAK,MAMV,CACF;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,MAAM,YAAY,OACjB,oBAAC;IACC,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,eAAe,MAAM;IACrB,GAAI,MAAM;KACV;GAGJ,oBAAC;IAAI,OAAO,OAAO;cAAgB,eAAe;KAAO;GAExD,MAAM,eACL,oBAAC,gBAAa,SAAS,MAAM,eAAgB,GAC3C;;GACA"}
|
package/dist/checkbox.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "./types-CT7e5nFJ.js";
|
|
2
|
-
import { t as Checkbox } from "./index-
|
|
3
|
-
export { Checkbox };
|
|
2
|
+
import { n as CheckboxProps, t as Checkbox } from "./index-Jsq11LTb.js";
|
|
3
|
+
export { Checkbox, CheckboxProps };
|
package/dist/checkbox.js
CHANGED
package/dist/chip-list.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "./useThemedStyles-Dco_54KA.js";
|
|
2
2
|
import "./Typography-CcQTHV-F.js";
|
|
3
|
-
import "./Chip-
|
|
3
|
+
import "./Chip-4yKggGpF.js";
|
|
4
4
|
import "./Label-CBUa-x13.js";
|
|
5
5
|
import "./ErrorMessage-6pG4hFId.js";
|
|
6
|
-
import { t as ChipList } from "./ChipList-
|
|
6
|
+
import { t as ChipList } from "./ChipList-MHNN5Q3u.js";
|
|
7
7
|
|
|
8
8
|
export { ChipList };
|
package/dist/chip.js
CHANGED
|
@@ -15,6 +15,7 @@ interface CheckboxProps {
|
|
|
15
15
|
radius?: CheckboxRadius;
|
|
16
16
|
checked?: boolean;
|
|
17
17
|
disabled?: boolean;
|
|
18
|
+
required?: boolean;
|
|
18
19
|
labelVariant?: LabelVariant;
|
|
19
20
|
labelPlacement?: LabelPlacement;
|
|
20
21
|
labelLineThrough?: boolean;
|
|
@@ -25,5 +26,5 @@ interface CheckboxProps {
|
|
|
25
26
|
//#region src/components/commons/toolkit/Checkbox/index.d.ts
|
|
26
27
|
declare const Checkbox: React$1.FC<CheckboxProps>;
|
|
27
28
|
//#endregion
|
|
28
|
-
export { Checkbox as t };
|
|
29
|
-
//# sourceMappingURL=index-
|
|
29
|
+
export { CheckboxProps as n, Checkbox as t };
|
|
30
|
+
//# sourceMappingURL=index-Jsq11LTb.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ import { t as BasePopover } from "./index-BKsKKh1p.js";
|
|
|
16
16
|
import { t as Breadcrumb } from "./index-CBHEtmuG.js";
|
|
17
17
|
import { t as Skeleton } from "./index-Bg9_G7wA.js";
|
|
18
18
|
import { t as CheckItem } from "./index-UUd7WbWO.js";
|
|
19
|
-
import { t as Checkbox } from "./index-
|
|
19
|
+
import { n as CheckboxProps, t as Checkbox } from "./index-Jsq11LTb.js";
|
|
20
20
|
import { r as types_d_exports } from "./types-Db3dpdVw.js";
|
|
21
21
|
import { Chip } from "./chip.js";
|
|
22
22
|
import { t as ChipList } from "./index-CdGHX8AR.js";
|
|
@@ -31,4 +31,4 @@ import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n
|
|
|
31
31
|
import { useDismiss } from "./use-dismiss.js";
|
|
32
32
|
import { AnchorLike, useFloating } from "./use-floating.js";
|
|
33
33
|
import { useVirtualAnchor } from "./use-virtual-anchor.js";
|
|
34
|
-
export { AnchorLike, BasePopover, Breadcrumb, Button, CheckItem, Checkbox, Chip, ChipList, types_d_exports as ChipTypes, ColorPicker, types_d_exports$1 as ColorPickerTypes, ContextMenu, types_d_exports$2 as ContextMenuTypes, DatePicker, types_d_exports$3 as DatePickerTypes, FileInput, types_d_exports$4 as FileInputTypes, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, Locale, MaskModule, MaskType, Pagination, Popover, types_d_exports$5 as PopoverTypes, ScrollPaginationContainer, index_d_exports as ScrollPaginationContainerTypes, SearchInput, Select, types_d_exports$6 as SelectTypes, Skeleton, Switch, TabSwitch, types_d_exports$7 as TabSwitchTypes, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };
|
|
34
|
+
export { AnchorLike, BasePopover, Breadcrumb, Button, CheckItem, Checkbox, CheckboxProps, Chip, ChipList, types_d_exports as ChipTypes, ColorPicker, types_d_exports$1 as ColorPickerTypes, ContextMenu, types_d_exports$2 as ContextMenuTypes, DatePicker, types_d_exports$3 as DatePickerTypes, FileInput, types_d_exports$4 as FileInputTypes, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, Locale, MaskModule, MaskType, Pagination, Popover, types_d_exports$5 as PopoverTypes, ScrollPaginationContainer, index_d_exports as ScrollPaginationContainerTypes, SearchInput, Select, types_d_exports$6 as SelectTypes, Skeleton, Switch, TabSwitch, types_d_exports$7 as TabSwitchTypes, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { t as useDismiss } from "./useDismiss-Dpzg5Xpf.js";
|
|
|
5
5
|
import { t as useFloating } from "./useFloating-D-2IDIWG.js";
|
|
6
6
|
import { n as types_exports$5, t as Popover } from "./Popover-BV_1hBez.js";
|
|
7
7
|
import "./Icon-bV19y393.js";
|
|
8
|
-
import { t as Checkbox } from "./Checkbox-
|
|
8
|
+
import { t as Checkbox } from "./Checkbox-CfJ2UfuX.js";
|
|
9
9
|
import { n as types_exports$3, t as DatePicker } from "./DatePicker-DIgVnLWM.js";
|
|
10
10
|
import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CRVo1wLa.js";
|
|
11
11
|
import { n as types_exports$7, t as Select } from "./Select-C8JCFwDy.js";
|
|
@@ -14,10 +14,10 @@ import { t as CheckItem } from "./CheckItem-CE27veSs.js";
|
|
|
14
14
|
import { t as InfoSummary } from "./InfoSummary-D8x-t44q.js";
|
|
15
15
|
import { t as BasePopover } from "./BasePopover-CY-9StFD.js";
|
|
16
16
|
import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-CG3Anq1A.js";
|
|
17
|
-
import { n as types_exports, t as Chip } from "./Chip-
|
|
17
|
+
import { n as types_exports, t as Chip } from "./Chip-4yKggGpF.js";
|
|
18
18
|
import "./Label-CBUa-x13.js";
|
|
19
19
|
import "./ErrorMessage-6pG4hFId.js";
|
|
20
|
-
import { t as ChipList } from "./ChipList-
|
|
20
|
+
import { t as ChipList } from "./ChipList-MHNN5Q3u.js";
|
|
21
21
|
import { t as IconButton } from "./IconButton-R8wpGZU_.js";
|
|
22
22
|
import { t as Pagination } from "./Pagination-i2_x464D.js";
|
|
23
23
|
import "./Loader-BTp8PCMz.js";
|