@tmlmobilidade/ui 20250124.1830.13 → 20250124.1854.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/cjs/index.js +69 -62
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/src/components/common/DateTimePicker/index.d.ts +9 -0
- package/dist/cjs/types/src/components/common/index.d.ts +1 -0
- package/dist/esm/index.js +71 -65
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/src/components/common/DateTimePicker/index.d.ts +9 -0
- package/dist/esm/types/src/components/common/index.d.ts +1 -0
- package/dist/index.d.ts +11 -1
- package/dist/styles.css +498 -0
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -748,7 +748,7 @@ if (process.env.NODE_ENV === 'production') {
|
|
|
748
748
|
|
|
749
749
|
var jsxRuntimeExports = jsxRuntime.exports;
|
|
750
750
|
|
|
751
|
-
var styles$
|
|
751
|
+
var styles$l = {"button":"styles-module_button__wVZ97","buttonLabel":"styles-module_buttonLabel__Ug8JX","primary":"styles-module_primary__v5fv1","secondary":"styles-module_secondary__0hxpR","muted":"styles-module_muted__fgyym","disabled":"styles-module_disabled__eVT3b","danger":"styles-module_danger__zdksP","info":"styles-module_info__JOafx","success":"styles-module_success__YS7oM","warning":"styles-module_warning__ZxzQE","active":"styles-module_active__BKRtv"};
|
|
752
752
|
|
|
753
753
|
/**
|
|
754
754
|
* Utility function that merges class names together
|
|
@@ -780,30 +780,30 @@ function getValueAtPath(obj, path) {
|
|
|
780
780
|
/* * */
|
|
781
781
|
function Component$4({ className, icon, children, onClick, target, type = 'button', variant = 'primary', disabled, textTransform = 'none', ...props }) {
|
|
782
782
|
//
|
|
783
|
-
const btnClass = cn(className, styles$
|
|
784
|
-
[styles$
|
|
785
|
-
[styles$
|
|
786
|
-
[styles$
|
|
787
|
-
[styles$
|
|
788
|
-
[styles$
|
|
789
|
-
[styles$
|
|
790
|
-
[styles$
|
|
791
|
-
[styles$
|
|
792
|
-
}, disabled && styles$
|
|
793
|
-
return (jsxRuntimeExports.jsx(core.Button, { className: btnClass, leftSection: icon && icon, onClick: onClick, type: type, variant: variant, disabled: disabled, classNames: { label: styles$
|
|
783
|
+
const btnClass = cn(className, styles$l.button, !disabled && {
|
|
784
|
+
[styles$l.danger]: variant === 'danger',
|
|
785
|
+
[styles$l.primary]: variant === 'primary',
|
|
786
|
+
[styles$l.secondary]: variant === 'secondary',
|
|
787
|
+
[styles$l.muted]: variant === 'muted',
|
|
788
|
+
[styles$l.info]: variant === 'info',
|
|
789
|
+
[styles$l.success]: variant === 'success',
|
|
790
|
+
[styles$l.warning]: variant === 'warning',
|
|
791
|
+
[styles$l.active]: variant === 'active',
|
|
792
|
+
}, disabled && styles$l.disabled);
|
|
793
|
+
return (jsxRuntimeExports.jsx(core.Button, { className: btnClass, leftSection: icon && icon, onClick: onClick, type: type, variant: variant, disabled: disabled, classNames: { label: styles$l.buttonLabel, ...props.classNames }, ...props, style: { textTransform: textTransform }, children: children }));
|
|
794
794
|
//
|
|
795
795
|
}
|
|
796
796
|
|
|
797
|
-
var styles$
|
|
797
|
+
var styles$k = {"inner":"styles-module_inner__d9DH7","input":"styles-module_input__rce0R","labelWrapper":"styles-module_labelWrapper__AGQzf","label":"styles-module_label__U404g","description":"styles-module_description__bkV5V","error":"styles-module_error__ZtPYT"};
|
|
798
798
|
|
|
799
799
|
function Checkbox(props) {
|
|
800
|
-
return jsxRuntimeExports.jsx(core.Checkbox, { classNames: { ...styles$
|
|
800
|
+
return jsxRuntimeExports.jsx(core.Checkbox, { classNames: { ...styles$k, ...props.classNames }, ...props });
|
|
801
801
|
}
|
|
802
802
|
|
|
803
|
-
var styles$
|
|
803
|
+
var styles$j = {"root":"styles-module_root__vNUQ9","indicator":"styles-module_indicator__0XMRf","label":"styles-module_label__Mf1Ea"};
|
|
804
804
|
|
|
805
805
|
function SegmentedControl({ ...props }) {
|
|
806
|
-
return jsxRuntimeExports.jsx(core.SegmentedControl, { ...props, classNames: styles$
|
|
806
|
+
return jsxRuntimeExports.jsx(core.SegmentedControl, { ...props, classNames: styles$j });
|
|
807
807
|
}
|
|
808
808
|
|
|
809
809
|
function Component$3({ error, validation, value, classNames, ...props }) {
|
|
@@ -857,7 +857,7 @@ function Component$1({ classNames, ...props }) {
|
|
|
857
857
|
return jsxRuntimeExports.jsx(core.Textarea, { classNames: classNames, ...props });
|
|
858
858
|
}
|
|
859
859
|
|
|
860
|
-
var styles$
|
|
860
|
+
var styles$i = {"wrapper":"styles-module_wrapper__7zsRX","input":"styles-module_input__kZP4l","placeholder":"styles-module_placeholder__uazW4","pillInputWrapper":"styles-module_pillInputWrapper__rtJzo","pillInputField":"styles-module_pillInputField__LYXhi","icon":"styles-module_icon__jXQ8R","pillClearButton":"styles-module_pillClearButton__RYrwJ","pill":"styles-module_pill__eWbVa","label":"styles-module_label__tB0Ce","description":"styles-module_description__KHjxV","dropdownWrapper":"styles-module_dropdownWrapper__guQYa"};
|
|
861
861
|
|
|
862
862
|
function Component({ multiple = false, searchable = false, autoComplete = false, onChange, data = [], clearable = false, label, description, ...props }) {
|
|
863
863
|
// A. Setup Variables
|
|
@@ -913,120 +913,126 @@ function Component({ multiple = false, searchable = false, autoComplete = false,
|
|
|
913
913
|
// D. Render Components
|
|
914
914
|
const renderClearButton = () => {
|
|
915
915
|
if (clearable && value && value.length > 0) {
|
|
916
|
-
return (jsxRuntimeExports.jsx(core.ActionIcon, { variant: "transparent", onClick: () => resetValue(), "aria-label": "Clear value", style: { cursor: 'pointer' }, className: styles$
|
|
916
|
+
return (jsxRuntimeExports.jsx(core.ActionIcon, { variant: "transparent", onClick: () => resetValue(), "aria-label": "Clear value", style: { cursor: 'pointer' }, className: styles$i.icon, children: jsxRuntimeExports.jsx(iconsReact.IconX, { size: 24 }) }));
|
|
917
917
|
}
|
|
918
|
-
return jsxRuntimeExports.jsx(iconsReact.IconCaretDownFilled, { size: 24, className: styles$
|
|
918
|
+
return jsxRuntimeExports.jsx(iconsReact.IconCaretDownFilled, { size: 24, className: styles$i.icon });
|
|
919
919
|
};
|
|
920
920
|
const renderValues = () => Array.isArray(value)
|
|
921
|
-
? value.map((item) => (jsxRuntimeExports.jsx(core.Pill, { className: styles$
|
|
921
|
+
? value.map((item) => (jsxRuntimeExports.jsx(core.Pill, { className: styles$i.pill, withRemoveButton: true, onRemove: () => removeValue(item), children: item }, item)))
|
|
922
922
|
: [];
|
|
923
923
|
const renderOptions = () => filterData().map((item) => (jsxRuntimeExports.jsx(core.Combobox.Option, { value: item, active: value?.includes?.(item), children: jsxRuntimeExports.jsxs(core.Group, { gap: "sm", children: [value?.includes?.(item) && jsxRuntimeExports.jsx(core.CheckIcon, { size: 12 }), jsxRuntimeExports.jsx("span", { children: item })] }) }, item)));
|
|
924
924
|
const renderInput = () => {
|
|
925
925
|
if (multiple) {
|
|
926
|
-
return (jsxRuntimeExports.jsx(core.Combobox.DropdownTarget, { children: jsxRuntimeExports.jsx(core.PillsInput, { onClick: () => combobox.openDropdown(), className: cn(styles$
|
|
926
|
+
return (jsxRuntimeExports.jsx(core.Combobox.DropdownTarget, { children: jsxRuntimeExports.jsx(core.PillsInput, { onClick: () => combobox.openDropdown(), className: cn(styles$i.input, styles$i.pillInputWrapper), children: jsxRuntimeExports.jsxs(core.Pill.Group, { style: { marginRight: '25px' }, children: [renderValues(), jsxRuntimeExports.jsx(core.Combobox.EventsTarget, { children: jsxRuntimeExports.jsx(core.PillsInput.Field, { style: { backgroundColor: 'transparent' }, type: searchable ? 'visible' : 'hidden', value: search, placeholder: "Search values", onFocus: () => combobox.openDropdown(), onBlur: () => combobox.closeDropdown(), onChange: handleSearchChange, onKeyDown: (event) => {
|
|
927
927
|
if (event.key === 'Backspace' &&
|
|
928
928
|
!search &&
|
|
929
929
|
Array.isArray(value) &&
|
|
930
930
|
value.length > 0) {
|
|
931
931
|
removeValue(value[value.length - 1] || '');
|
|
932
932
|
}
|
|
933
|
-
} }) }), jsxRuntimeExports.jsx("div", { className: styles$
|
|
933
|
+
} }) }), jsxRuntimeExports.jsx("div", { className: styles$i.pillClearButton, children: renderClearButton() })] }) }) }));
|
|
934
934
|
}
|
|
935
|
-
return (jsxRuntimeExports.jsx(core.Combobox.Target, { children: searchable ? (jsxRuntimeExports.jsx(core.InputBase, { className: styles$
|
|
935
|
+
return (jsxRuntimeExports.jsx(core.Combobox.Target, { children: searchable ? (jsxRuntimeExports.jsx(core.InputBase, { className: styles$i.input, type: "text", value: search, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), onBlur: () => {
|
|
936
936
|
combobox.closeDropdown();
|
|
937
937
|
setSearch(value?.toString() || '');
|
|
938
|
-
}, onChange: handleSearchChange, placeholder: "Search value" })) : (jsxRuntimeExports.jsx(core.InputBase, { className: styles$
|
|
938
|
+
}, onChange: handleSearchChange, placeholder: "Search value" })) : (jsxRuntimeExports.jsx(core.InputBase, { className: styles$i.input, component: "button", type: "button", pointer: true, onClick: () => combobox.openDropdown(), onFocus: () => combobox.openDropdown(), onBlur: () => {
|
|
939
939
|
combobox.closeDropdown();
|
|
940
940
|
setSearch(value?.toString() || '');
|
|
941
|
-
}, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', children: value || jsxRuntimeExports.jsx(core.Input.Placeholder, { className: styles$
|
|
941
|
+
}, rightSection: renderClearButton(), rightSectionPointerEvents: value === null ? 'none' : 'all', children: value || jsxRuntimeExports.jsx(core.Input.Placeholder, { className: styles$i.placeholder, children: "Pick value" }) })) }));
|
|
942
942
|
};
|
|
943
|
-
return (jsxRuntimeExports.jsxs("div", { className: styles$
|
|
943
|
+
return (jsxRuntimeExports.jsxs("div", { className: styles$i.wrapper, children: [label && jsxRuntimeExports.jsx("label", { className: styles$i.label, children: label }), description && jsxRuntimeExports.jsx("p", { className: styles$i.description, children: description }), jsxRuntimeExports.jsxs(core.Combobox, { store: combobox, onOptionSubmit: updateValue, withinPortal: false, children: [renderInput(), jsxRuntimeExports.jsx(core.Combobox.Dropdown, { className: styles$i.dropdownWrapper, children: jsxRuntimeExports.jsx(core.Combobox.Options, { children: renderOptions().length > 0 ? (renderOptions()) : (jsxRuntimeExports.jsx(core.Combobox.Empty, { children: "Nothing found..." })) }) })] })] }));
|
|
944
944
|
}
|
|
945
945
|
|
|
946
|
-
var styles$
|
|
946
|
+
var styles$h = {"button":"styles-module_button__fQIgs","fontxs":"styles-module_fontxs__c61kh","fontsm":"styles-module_fontsm__zi0bq","fontbase":"styles-module_fontbase__Uzeoy","fontlg":"styles-module_fontlg__TfMwu","fontxl":"styles-module_fontxl__4IxFS","tag":"styles-module_tag__HOLQE","pill":"styles-module_pill__VAXc-","fullWidth":"styles-module_fullWidth__zWbR4","primary":"styles-module_primary__HWgQU","secondary":"styles-module_secondary__UOKnw","muted":"styles-module_muted__fA0Fl","disabled":"styles-module_disabled__EKMKd","danger":"styles-module_danger__gZERs","info":"styles-module_info__b-gyN","success":"styles-module_success__mRhfk","warning":"styles-module_warning__G977Z","active":"styles-module_active__5pkXl"};
|
|
947
947
|
|
|
948
948
|
/* * */
|
|
949
949
|
function Badge({ className, icon, children, variant = 'primary', filled = false, fullWidth = false, disabled = false, type = 'tag', size = 'md', ...props }) {
|
|
950
950
|
//
|
|
951
|
-
const btnClass = cn(styles$
|
|
952
|
-
[styles$
|
|
953
|
-
[styles$
|
|
954
|
-
[styles$
|
|
955
|
-
[styles$
|
|
956
|
-
[styles$
|
|
957
|
-
[styles$
|
|
958
|
-
[styles$
|
|
959
|
-
[styles$
|
|
960
|
-
}, disabled && styles$
|
|
951
|
+
const btnClass = cn(styles$h.button, !disabled && {
|
|
952
|
+
[styles$h.danger]: variant === 'danger',
|
|
953
|
+
[styles$h.primary]: variant === 'primary',
|
|
954
|
+
[styles$h.secondary]: variant === 'secondary',
|
|
955
|
+
[styles$h.muted]: variant === 'muted',
|
|
956
|
+
[styles$h.info]: variant === 'info',
|
|
957
|
+
[styles$h.success]: variant === 'success',
|
|
958
|
+
[styles$h.warning]: variant === 'warning',
|
|
959
|
+
[styles$h.active]: variant === 'active',
|
|
960
|
+
}, disabled && styles$h.disabled, type === 'pill' && styles$h.pill, type === 'tag' && styles$h.tag, fullWidth && styles$h.fullWidth, styles$h[`font${size}`], className);
|
|
961
961
|
return (jsxRuntimeExports.jsx(core.Badge, { leftSection: icon, className: btnClass, ...props, "data-active": filled, children: children }));
|
|
962
962
|
//
|
|
963
963
|
}
|
|
964
964
|
|
|
965
|
-
var styles$
|
|
965
|
+
var styles$g = {"tooltip":"styles-module_tooltip__HFS4I"};
|
|
966
966
|
|
|
967
967
|
function Tooltip({ children, ...props }) {
|
|
968
|
-
return jsxRuntimeExports.jsx(core.Tooltip, { classNames: { ...styles$
|
|
968
|
+
return jsxRuntimeExports.jsx(core.Tooltip, { classNames: { ...styles$g, ...props.classNames }, ...props, children: children });
|
|
969
969
|
}
|
|
970
970
|
|
|
971
|
-
var styles$
|
|
971
|
+
var styles$f = {"inner":"styles-module_inner__xu0uv","track":"styles-module_track__xeUYf","input":"styles-module_input__DyZyB","labelWrapper":"styles-module_labelWrapper__XNVsq","label":"styles-module_label__PsGVs","description":"styles-module_description__qLTxA","error":"styles-module_error__sQ6n-"};
|
|
972
972
|
|
|
973
973
|
function Switch({ classNames, ...props }) {
|
|
974
|
-
return jsxRuntimeExports.jsx(core.Switch, { classNames: { ...styles$
|
|
974
|
+
return jsxRuntimeExports.jsx(core.Switch, { classNames: { ...styles$f, ...classNames }, ...props });
|
|
975
975
|
}
|
|
976
976
|
|
|
977
|
-
var styles$
|
|
977
|
+
var styles$e = {"thumb":"styles-module_thumb__PE26N","track":"styles-module_track__kkjfP","bar":"styles-module_bar__3e8BW","mark":"styles-module_mark__Wxc6d"};
|
|
978
978
|
|
|
979
979
|
function Slider({ classNames, ...props }) {
|
|
980
|
-
return jsxRuntimeExports.jsx(core.Slider, { classNames: { ...styles$
|
|
980
|
+
return jsxRuntimeExports.jsx(core.Slider, { classNames: { ...styles$e, ...classNames }, ...props });
|
|
981
981
|
}
|
|
982
982
|
|
|
983
|
-
var styles$
|
|
983
|
+
var styles$d = {"button":"styles-module_button__ngo3Q","primary":"styles-module_primary__1Forr","secondary":"styles-module_secondary__F-Pxy","muted":"styles-module_muted__IRFQC","disabled":"styles-module_disabled__Q0YEb","danger":"styles-module_danger__-aPaa","info":"styles-module_info__z1XFz","success":"styles-module_success__V-kNZ","warning":"styles-module_warning__gGAPU","active":"styles-module_active__0bskK"};
|
|
984
984
|
|
|
985
985
|
function ActionIcon({ children, className, disabled, variant, ...props }) {
|
|
986
|
-
const btnClass = cn(className, styles$
|
|
987
|
-
[styles$
|
|
988
|
-
[styles$
|
|
989
|
-
[styles$
|
|
990
|
-
[styles$
|
|
991
|
-
[styles$
|
|
992
|
-
[styles$
|
|
993
|
-
[styles$
|
|
994
|
-
[styles$
|
|
995
|
-
}, disabled && styles$
|
|
986
|
+
const btnClass = cn(className, styles$d.button, !disabled && {
|
|
987
|
+
[styles$d.danger]: variant === 'danger',
|
|
988
|
+
[styles$d.primary]: variant === 'primary',
|
|
989
|
+
[styles$d.secondary]: variant === 'secondary',
|
|
990
|
+
[styles$d.muted]: variant === 'muted',
|
|
991
|
+
[styles$d.info]: variant === 'info',
|
|
992
|
+
[styles$d.success]: variant === 'success',
|
|
993
|
+
[styles$d.warning]: variant === 'warning',
|
|
994
|
+
[styles$d.active]: variant === 'active',
|
|
995
|
+
}, disabled && styles$d.disabled);
|
|
996
996
|
return (jsxRuntimeExports.jsx(core.ActionIcon, { className: btnClass, ...props, children: children }));
|
|
997
997
|
}
|
|
998
998
|
|
|
999
|
-
var styles$
|
|
999
|
+
var styles$c = {"dropdown":"styles-module_dropdown__wzdfT","arrow":"styles-module_arrow__pmKfn"};
|
|
1000
1000
|
|
|
1001
1001
|
function Menu(props) {
|
|
1002
|
-
return jsxRuntimeExports.jsx(core.Menu, { ...props, classNames: { arrow: styles$
|
|
1002
|
+
return jsxRuntimeExports.jsx(core.Menu, { ...props, classNames: { arrow: styles$c.arrow } });
|
|
1003
1003
|
}
|
|
1004
1004
|
Menu.Target = function MenuTarget(props) {
|
|
1005
1005
|
return jsxRuntimeExports.jsx(core.Menu.Target, { ...props });
|
|
1006
1006
|
};
|
|
1007
1007
|
Menu.Dropdown = function MenuDropdown(props) {
|
|
1008
|
-
return jsxRuntimeExports.jsx(core.Menu.Dropdown, { ...props, className: styles$
|
|
1008
|
+
return jsxRuntimeExports.jsx(core.Menu.Dropdown, { ...props, className: styles$c.dropdown });
|
|
1009
1009
|
};
|
|
1010
1010
|
Menu.Item = function MenuItem(props) {
|
|
1011
|
-
return jsxRuntimeExports.jsx(core.Menu.Item, { ...props, className: styles$
|
|
1011
|
+
return jsxRuntimeExports.jsx(core.Menu.Item, { ...props, className: styles$c.item });
|
|
1012
1012
|
};
|
|
1013
1013
|
Menu.Divider = function MenuDivider(props) {
|
|
1014
|
-
return jsxRuntimeExports.jsx(core.Menu.Divider, { ...props, className: styles$
|
|
1014
|
+
return jsxRuntimeExports.jsx(core.Menu.Divider, { ...props, className: styles$c.divider });
|
|
1015
1015
|
};
|
|
1016
1016
|
Menu.Label = function MenuLabel(props) {
|
|
1017
|
-
return jsxRuntimeExports.jsx(core.Menu.Label, { ...props, className: styles$
|
|
1017
|
+
return jsxRuntimeExports.jsx(core.Menu.Label, { ...props, className: styles$c.label });
|
|
1018
1018
|
};
|
|
1019
1019
|
|
|
1020
|
-
var styles$
|
|
1020
|
+
var styles$b = {"root":"styles-module_root__4q9aw"};
|
|
1021
1021
|
|
|
1022
1022
|
function Text({ children, size = 'base', weight = 'medium', lineHeight = 'base', ...props }) {
|
|
1023
|
-
return (jsxRuntimeExports.jsx(core.Text, { className: styles$
|
|
1023
|
+
return (jsxRuntimeExports.jsx(core.Text, { className: styles$b.root, style: {
|
|
1024
1024
|
fontSize: `var(--font-size-${size})`,
|
|
1025
1025
|
lineHeight: lineHeight === 'none' ? 0 : `var(--font-line-height-${lineHeight})`,
|
|
1026
1026
|
fontWeight: `var(--font-weight-${weight})`,
|
|
1027
1027
|
}, ...props, children: children }));
|
|
1028
1028
|
}
|
|
1029
1029
|
|
|
1030
|
+
var styles$a = {"input":"styles-module_input__7GH-0","wrapper":"styles-module_wrapper__676-W","variantWhite":"styles-module_variantWhite__XpqzN","section":"styles-module_section__2Dh7a","sizeSm":"styles-module_sizeSm__cmzmj","label":"styles-module_label__yQwLG","description":"styles-module_description__9hShz"};
|
|
1031
|
+
|
|
1032
|
+
function DateTimePicker({ leftSection = jsxRuntimeExports.jsx(iconsReact.IconCalendar, { size: 20 }), ...props }) {
|
|
1033
|
+
return jsxRuntimeExports.jsx(dates.DateTimePicker, { classNames: styles$a, ...props, leftSection: leftSection });
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1030
1036
|
var TextInputOverride = {"input":"text-input-module_input__9C3ID","wrapper":"text-input-module_wrapper__jrJs0","variantWhite":"text-input-module_variantWhite__M5THF","section":"text-input-module_section__uYM8p","sizeSm":"text-input-module_sizeSm__9YY9u","label":"text-input-module_label__sLogM","description":"text-input-module_description__hPkID"};
|
|
1031
1037
|
|
|
1032
1038
|
var TextInputOverrideSm = {"input":"text-input-sm-module_input__u-uh6","wrapper":"text-input-sm-module_wrapper__H9JIX","variantWhite":"text-input-sm-module_variantWhite__k4HFB","section":"text-input-sm-module_section__UXn50","sizeSm":"text-input-sm-module_sizeSm__LE66I","label":"text-input-sm-module_label__Tjn5U","description":"text-input-sm-module_description__grwjQ"};
|
|
@@ -1618,6 +1624,7 @@ exports.CMLogo = CMLogo;
|
|
|
1618
1624
|
exports.Checkbox = Checkbox;
|
|
1619
1625
|
exports.Combobox = Component;
|
|
1620
1626
|
exports.DataTable = DataTable;
|
|
1627
|
+
exports.DateTimePicker = DateTimePicker;
|
|
1621
1628
|
exports.Grid = Grid;
|
|
1622
1629
|
exports.Menu = Menu;
|
|
1623
1630
|
exports.PasswordInput = Component$2;
|