@emeraldemperaur/vector-sigma 1.4.5 → 1.4.6

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.
Files changed (12) hide show
  1. package/lib/index.cjs +683 -319
  2. package/lib/index.esm.js +683 -319
  3. package/lib/types/components/conditional/conditional.d.ts +2 -2
  4. package/lib/types/components/inputcurrency/inputcurrency.d.ts +3 -3
  5. package/lib/types/components/inputcurrency/stockInput.d.ts +2 -2
  6. package/lib/types/components/radio/radio.d.ts +2 -2
  7. package/lib/types/components/select/select.d.ts +2 -2
  8. package/lib/types/components/selectmultiple/selectmultiple.d.ts +2 -2
  9. package/lib/types/components/slider/slider.d.ts +2 -2
  10. package/lib/types/components/toggle/toggle.d.ts +2 -1
  11. package/lib/types/components/xtitle/xtitle.d.ts +10 -9
  12. package/package.json +1 -1
package/lib/index.esm.js CHANGED
@@ -12500,7 +12500,7 @@ const getDesignStyles = (inputtype, isOpen) => {
12500
12500
  return Object.assign(Object.assign({}, base), { backgroundColor: 'transparent', border: '1px solid var(--gray-6)', borderLeft: isOpen ? '4px solid var(--accent-9)' : '1px solid var(--gray-6)' });
12501
12501
  };
12502
12502
  const ConditionalTrigger = (_a) => {
12503
- var { alias, readOnly, width, placeholder = '', value, inputlabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
12503
+ var { alias, readonly, width, placeholder = '', value, inputlabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readonly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
12504
12504
  const [field, meta, helpers] = useField(alias);
12505
12505
  const { setTouched } = useFormikContext();
12506
12506
  const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12517,16 +12517,16 @@ const ConditionalTrigger = (_a) => {
12517
12517
  switch (true) {
12518
12518
  case inputtype.includes('conditionalcheckbox'):
12519
12519
  return (React__default.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
12520
- React__default.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
12520
+ React__default.createElement(c$2, { name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
12521
12521
  case inputtype.includes('conditionalselect'):
12522
12522
  return (React__default.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
12523
- React__default.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
12523
+ React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
12524
12524
  React__default.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
12525
12525
  React__default.createElement(g, null, inputoptions.map((inputoption) => (React__default.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
12526
12526
  case inputtype.includes('conditionaltoggle'):
12527
12527
  default:
12528
12528
  return (React__default.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
12529
- React__default.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
12529
+ React__default.createElement(i$1, { id: inputId, name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
12530
12530
  }
12531
12531
  };
12532
12532
  const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -20833,10 +20833,12 @@ const DatePicker = (_a) => {
20833
20833
  const { setFieldValue, setFieldTouched } = useFormikContext();
20834
20834
  const [field, meta] = useField(alias);
20835
20835
  const hasError = Boolean(meta.touched && meta.error);
20836
- const selectedDate = field.value ? (typeof field.value === 'string' ? parseISO(field.value) : field.value) : undefined;
20836
+ const selectedDate = field.value
20837
+ ? (typeof field.value === 'string' ? parseISO(field.value) : field.value)
20838
+ : undefined;
20837
20839
  const parsedMin = ensureDate(minvalue);
20838
20840
  const parsedMax = ensureDate(maxvalue);
20839
- const inputId = `${alias}FormInput` || crypto.randomUUID();
20841
+ const inputId = `${alias}FormInput`;
20840
20842
  const errorId = `${alias}-error`;
20841
20843
  const [isOpen, setIsOpen] = useState(false);
20842
20844
  const containerRef = useRef(null);
@@ -20853,85 +20855,177 @@ const DatePicker = (_a) => {
20853
20855
  });
20854
20856
  }
20855
20857
  }, [inputtype]);
20856
- // --- STYLES ---
20857
- const activeInputStyle = inputtype === 'datepicker-neumorphic'
20858
- ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'datepicker-outline'
20859
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
20860
- : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
20858
+ // --- INPUT STYLES ---
20859
+ const activeInputStyle = React__default.useMemo(() => {
20860
+ if (inputtype === 'datepicker-neumorphic') {
20861
+ return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
20862
+ }
20863
+ if (inputtype === 'datepicker-outline') {
20864
+ return {
20865
+ backgroundColor: 'transparent',
20866
+ boxShadow: 'none',
20867
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
20868
+ borderRadius: 'var(--radius-2)'
20869
+ };
20870
+ }
20871
+ // Material / Default
20872
+ return {
20873
+ backgroundColor: 'var(--color-surface)',
20874
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
20875
+ border: '1px solid var(--gray-5)',
20876
+ borderRadius: 'var(--radius-2)'
20877
+ };
20878
+ }, [inputtype, hasError, neuVars]);
20879
+ // --- CALENDAR POPUP STYLES ---
20880
+ const calendarContainerStyle = React__default.useMemo(() => {
20881
+ const base = { padding: '16px', borderRadius: '12px' };
20882
+ if (inputtype === 'datepicker-neumorphic') {
20883
+ return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
20884
+ }
20885
+ if (inputtype === 'datepicker-outline') {
20886
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
20887
+ }
20888
+ // Material
20889
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
20890
+ }, [inputtype, neuVars]);
20861
20891
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
20862
20892
  React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
20863
20893
  React__default.createElement("input", { type: "hidden", "aria-describedby": `${alias}InputLabel`, name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
20864
20894
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
20865
- /* Base Calendar */
20866
- .rdp { --rdp-cell-size: 32px; margin: 0; }
20867
- .rdp-months { display: flex; justify-content: center; }
20868
- .rdp-month { background: ${inputtype === 'datepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
20869
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
20870
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
20871
- .rdp-nav { display: flex; gap: 5px; }
20872
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
20873
-
20874
- /* Day */
20875
- .rdp-day {
20876
- width: var(--rdp-cell-size); height: var(--rdp-cell-size);
20877
- border-radius: 50%; border: none; background: transparent;
20878
- cursor: pointer; color: var(--gray-12);
20879
- display: flex; align-items: center; justify-content: center;
20880
- }
20881
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
20895
+ /* Reset & Layout */
20896
+ .rdp {
20897
+ --rdp-cell-size: 36px;
20898
+ --rdp-caption-font-size: 16px;
20899
+ margin: 0;
20900
+ font-family: var(--default-font-family, sans-serif);
20901
+ }
20902
+ .rdp-months { justify-content: center; }
20903
+ .rdp-month { background: transparent; }
20904
+
20905
+ /* Header (Month Name + Nav) */
20906
+ .rdp-caption {
20907
+ display: flex;
20908
+ align-items: center;
20909
+ justify-content: space-between;
20910
+ margin-bottom: 12px;
20911
+ padding: 0 4px;
20912
+ }
20913
+ .rdp-caption_label {
20914
+ font-weight: 600;
20915
+ color: var(--gray-12);
20916
+ font-size: var(--font-size-3);
20917
+ text-transform: capitalize;
20918
+ }
20919
+ .rdp-nav { display: flex; gap: 8px; }
20920
+ .rdp-nav_button {
20921
+ color: var(--gray-11);
20922
+ border-radius: 6px;
20923
+ padding: 4px;
20924
+ transition: background 0.2s;
20925
+ background: transparent;
20926
+ border: none;
20927
+ cursor: pointer;
20928
+ display: flex;
20929
+ align-items: center;
20930
+ justify-content: center;
20931
+ }
20932
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
20933
+
20934
+ /* Weekdays Row */
20935
+ .rdp-head_cell {
20936
+ font-size: 0.75rem;
20937
+ font-weight: 600;
20938
+ color: var(--gray-9);
20939
+ text-transform: uppercase;
20940
+ padding-bottom: 8px;
20941
+ width: var(--rdp-cell-size);
20942
+ text-align: center;
20943
+ }
20944
+
20945
+ /* Day Cells */
20946
+ .rdp-cell { text-align: center; }
20947
+ .rdp-day {
20948
+ width: var(--rdp-cell-size);
20949
+ height: var(--rdp-cell-size);
20950
+ border-radius: 50%;
20951
+ border: 2px solid transparent;
20952
+ background: transparent;
20953
+ cursor: pointer;
20954
+ color: var(--gray-12);
20955
+ font-size: var(--font-size-2);
20956
+ display: flex;
20957
+ align-items: center;
20958
+ justify-content: center;
20959
+ transition: all 0.15s ease;
20960
+ margin: 1px;
20961
+ }
20882
20962
 
20883
- /* Selected State */
20884
- .rdp-day_selected {
20885
- background-color: var(--accent-9); color: white;
20886
- font-weight: bold;
20887
- }
20963
+ /* States */
20964
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) {
20965
+ background-color: var(--gray-4);
20966
+ }
20967
+
20968
+ .rdp-day_selected {
20969
+ background-color: var(--accent-9) !important;
20970
+ color: white !important;
20971
+ font-weight: 600;
20972
+ }
20888
20973
 
20889
- /* NEUMORPHIC OVERRIDES */
20890
- .neu-calendar .rdp-month {
20891
- /* The floating plate */
20892
- box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
20893
- }
20894
- .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
20895
- background-color: transparent;
20896
- /* Hover = pop out slightly */
20897
- box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
20898
- }
20899
- .neu-calendar .rdp-day_selected {
20900
- background-color: var(--neu-bg);
20901
- color: var(--neu-accent);
20902
- /* Pressed in state for selected */
20903
- box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
20904
- }
20905
- ` } }),
20974
+ .rdp-day_today {
20975
+ color: var(--accent-11);
20976
+ font-weight: 700;
20977
+ position: relative;
20978
+ }
20979
+
20980
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
20981
+
20982
+ /* NEUMORPHIC OVERRIDES */
20983
+ ${inputtype === 'datepicker-neumorphic' ? `
20984
+ .rdp-day:hover:not(.rdp-day_selected) {
20985
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
20986
+ background-color: transparent;
20987
+ }
20988
+ .rdp-day_selected {
20989
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
20990
+ color: var(--neu-accent) !important;
20991
+ background-color: var(--neu-bg) !important;
20992
+ }
20993
+ ` : ''}
20994
+ ` } }),
20906
20995
  React__default.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
20907
20996
  React__default.createElement(s$1, null,
20908
- React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
20997
+ React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
20909
20998
  React__default.createElement(c, null,
20910
20999
  React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
20911
- React__default.createElement("input", { readOnly: true, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
21000
+ React__default.createElement("input", { readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
20912
21001
  backgroundColor: 'transparent',
20913
21002
  border: 'none',
20914
21003
  outline: 'none',
20915
21004
  width: '100%',
20916
- cursor: 'pointer',
21005
+ cursor: readonly ? 'default' : 'pointer',
20917
21006
  color: 'inherit',
20918
21007
  fontFamily: 'inherit',
20919
- fontSize: 'var(--font-size-2)'
21008
+ fontSize: 'var(--font-size-2)',
21009
+ fontWeight: 500
20920
21010
  }, id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel` }))),
20921
- React__default.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
20922
- React__default.createElement("div", { className: inputtype === 'datepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
20923
- React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
20924
- setFieldValue(alias, date);
20925
- setIsOpen(false);
20926
- setFieldTouched(alias, true);
20927
- }, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
20928
- Chevron: (props) => {
20929
- if (props.orientation === 'left') {
20930
- return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16" });
20931
- }
20932
- return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16" });
21011
+ React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21012
+ React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
21013
+ setFieldValue(alias, date);
21014
+ setIsOpen(false);
21015
+ setFieldTouched(alias, true);
21016
+ }, disabled: [
21017
+ ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21018
+ { before: parsedMin || new Date(1900, 0, 1) },
21019
+ { after: parsedMax || new Date(2100, 0, 1) }
21020
+ ], components: {
21021
+ Chevron: (props) => {
21022
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21023
+ if (props.orientation === 'left') {
21024
+ return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
20933
21025
  }
20934
- } })))),
21026
+ return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21027
+ }
21028
+ } }))),
20935
21029
  React__default.createElement("div", null,
20936
21030
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
20937
21031
  "\u00A0",
@@ -20942,16 +21036,16 @@ const DatePicker = (_a) => {
20942
21036
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
20943
21037
  hasError ?
20944
21038
  React__default.createElement(React__default.Fragment, null,
20945
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21039
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
20946
21040
  };
20947
21041
 
20948
21042
  const DateRangePicker = (_a) => {
20949
21043
  var _b, _c;
20950
- var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
21044
+ var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = 'Pick a date range', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
20951
21045
  const { setFieldValue, setFieldTouched } = useFormikContext();
20952
21046
  const [field, meta] = useField(alias);
20953
21047
  const hasError = Boolean(meta.touched && meta.error);
20954
- // Range object value format: { from: "2023-01-01", to: "2023-01-05" } :: Strings or Date Objects
21048
+ // Range object value format: { from: "2023-01-01", to: "2023-01-05" }
20955
21049
  const rawVal = field.value || {};
20956
21050
  const selectedRange = {
20957
21051
  from: ensureDate(rawVal.from),
@@ -20959,7 +21053,7 @@ const DateRangePicker = (_a) => {
20959
21053
  };
20960
21054
  const parsedMin = ensureDate(minvalue);
20961
21055
  const parsedMax = ensureDate(maxvalue);
20962
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21056
+ const inputId = `${alias}FormInput`;
20963
21057
  const errorId = `${alias}-error`;
20964
21058
  const [isOpen, setIsOpen] = useState(false);
20965
21059
  const containerRef = useRef(null);
@@ -20985,11 +21079,38 @@ const DateRangePicker = (_a) => {
20985
21079
  displayText = format$2(selectedRange.from, 'LLL dd');
20986
21080
  }
20987
21081
  }
20988
- // Styles
20989
- const activeInputStyle = inputtype === 'daterangepicker-neumorphic'
20990
- ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'daterangepicker-outline'
20991
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
20992
- : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
21082
+ // --- STYLES ---
21083
+ const activeInputStyle = React__default.useMemo(() => {
21084
+ if (inputtype === 'daterangepicker-neumorphic') {
21085
+ return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
21086
+ }
21087
+ if (inputtype === 'daterangepicker-outline') {
21088
+ return {
21089
+ backgroundColor: 'transparent',
21090
+ boxShadow: 'none',
21091
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
21092
+ borderRadius: 'var(--radius-2)'
21093
+ };
21094
+ }
21095
+ // Material
21096
+ return {
21097
+ backgroundColor: 'var(--color-surface)',
21098
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
21099
+ border: '1px solid var(--gray-5)',
21100
+ borderRadius: 'var(--radius-2)'
21101
+ };
21102
+ }, [inputtype, hasError, neuVars]);
21103
+ const calendarContainerStyle = React__default.useMemo(() => {
21104
+ const base = { padding: '16px', borderRadius: '12px' };
21105
+ if (inputtype === 'daterangepicker-neumorphic') {
21106
+ return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
21107
+ }
21108
+ if (inputtype === 'daterangepicker-outline') {
21109
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
21110
+ }
21111
+ // Material
21112
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
21113
+ }, [inputtype, neuVars]);
20993
21114
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
20994
21115
  React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
20995
21116
  React__default.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
@@ -20997,31 +21118,120 @@ const DateRangePicker = (_a) => {
20997
21118
  to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
20998
21119
  }) }),
20999
21120
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
21000
- .rdp { --rdp-cell-size: 32px; margin: 0; }
21121
+ /* Reset & Layout */
21122
+ .rdp {
21123
+ --rdp-cell-size: 36px;
21124
+ --rdp-caption-font-size: 16px;
21125
+ margin: 0;
21126
+ font-family: var(--default-font-family, sans-serif);
21127
+ }
21001
21128
  .rdp-months { justify-content: center; }
21002
- .rdp-month { background: ${inputtype === 'daterangepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21003
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21004
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21005
- .rdp-nav { display: flex; gap: 5px; }
21006
- .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
21007
- .rdp-day { width: var(--rdp-cell-size); height: var(--rdp-cell-size); border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--gray-12); display: flex; align-items: center; justify-content: center; }
21008
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21129
+ .rdp-month { background: transparent; }
21130
+
21131
+ /* Header */
21132
+ .rdp-caption {
21133
+ display: flex; align-items: center; justify-content: space-between;
21134
+ margin-bottom: 12px; padding: 0 4px;
21135
+ }
21136
+ .rdp-caption_label {
21137
+ font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3);
21138
+ text-transform: capitalize;
21139
+ }
21140
+ .rdp-nav { display: flex; gap: 8px; }
21141
+ .rdp-nav_button {
21142
+ color: var(--gray-11); border-radius: 6px; padding: 4px;
21143
+ transition: background 0.2s; background: transparent; border: none; cursor: pointer;
21144
+ display: flex; align-items: center; justify-content: center;
21145
+ }
21146
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
21147
+
21148
+ /* Weekdays */
21149
+ .rdp-head_cell {
21150
+ font-size: 0.75rem; font-weight: 600; color: var(--gray-9);
21151
+ text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
21152
+ text-align: center;
21153
+ }
21009
21154
 
21010
- .rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_end) { background-color: var(--accent-4); color: var(--accent-11); border-radius: 0; }
21011
- .rdp-day_range_start { border-radius: 50% 0 0 50%; background-color: var(--accent-9); color: white; }
21012
- .rdp-day_range_end { border-radius: 0 50% 50% 0; background-color: var(--accent-9); color: white; }
21155
+ /* Cells */
21156
+ .rdp-cell { text-align: center; padding: 1px 0; }
21157
+ .rdp-day {
21158
+ width: var(--rdp-cell-size); height: var(--rdp-cell-size);
21159
+ border-radius: 50%; border: 2px solid transparent;
21160
+ background: transparent; cursor: pointer; color: var(--gray-12);
21161
+ font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
21162
+ margin: 0 auto;
21163
+ }
21164
+
21165
+ /* States */
21166
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
21167
+
21168
+ /* --- RANGE STYLES --- */
21169
+ .rdp-day_range_middle {
21170
+ background-color: var(--accent-3) !important;
21171
+ color: var(--accent-11) !important;
21172
+ border-radius: 0 !important;
21173
+ width: 100%; /* Fill cell width for continuous strip */
21174
+ }
21175
+ .rdp-day_range_start {
21176
+ background-color: var(--accent-9) !important;
21177
+ color: white !important;
21178
+ border-top-left-radius: 50% !important;
21179
+ border-bottom-left-radius: 50% !important;
21180
+ border-top-right-radius: 0 !important;
21181
+ border-bottom-right-radius: 0 !important;
21182
+ width: 100%;
21183
+ }
21184
+ .rdp-day_range_end {
21185
+ background-color: var(--accent-9) !important;
21186
+ color: white !important;
21187
+ border-top-right-radius: 50% !important;
21188
+ border-bottom-right-radius: 50% !important;
21189
+ border-top-left-radius: 0 !important;
21190
+ border-bottom-left-radius: 0 !important;
21191
+ width: 100%;
21192
+ }
21193
+ .rdp-day_range_start.rdp-day_range_end {
21194
+ border-radius: 50% !important;
21195
+ width: var(--rdp-cell-size);
21196
+ }
21197
+ .rdp-day_today { color: var(--accent-11); font-weight: 700; }
21198
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21013
21199
 
21014
- /* Neumorphic */
21015
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21016
- .neu-calendar .rdp-day_range_start, .neu-calendar .rdp-day_range_end { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2); }
21200
+ /* NEUMORPHIC OVERRIDES */
21201
+ ${inputtype === 'daterangepicker-neumorphic' ? `
21202
+ .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
21203
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21204
+ background-color: transparent;
21205
+ }
21206
+ .neu-calendar .rdp-day_range_start,
21207
+ .neu-calendar .rdp-day_range_end {
21208
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21209
+ color: var(--neu-accent) !important;
21210
+ background-color: var(--neu-bg) !important;
21211
+ }
21212
+ .neu-calendar .rdp-day_range_middle {
21213
+ box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
21214
+ background-color: transparent !important;
21215
+ }
21216
+ ` : ''}
21017
21217
  ` } }),
21018
21218
  React__default.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
21019
21219
  React__default.createElement(s$1, null,
21020
- React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21220
+ React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
21021
21221
  React__default.createElement(c, null,
21022
21222
  React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21023
- React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, value: displayText, style: { backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%', cursor: 'pointer', color: 'inherit', fontSize: 'var(--font-size-2)' } }))),
21024
- React__default.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
21223
+ React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readOnly, value: displayText, placeholder: placeholder, style: {
21224
+ backgroundColor: 'transparent',
21225
+ border: 'none',
21226
+ outline: 'none',
21227
+ width: '100%',
21228
+ cursor: readOnly ? 'default' : 'pointer',
21229
+ color: 'inherit',
21230
+ fontFamily: 'inherit',
21231
+ fontSize: 'var(--font-size-2)',
21232
+ fontWeight: 500
21233
+ } }))),
21234
+ React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21025
21235
  React__default.createElement("div", { className: inputtype === 'daterangepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21026
21236
  React__default.createElement(DayPicker, { mode: "range", selected: selectedRange, onSelect: (range) => {
21027
21237
  setFieldValue(alias, range);
@@ -21030,13 +21240,15 @@ const DateRangePicker = (_a) => {
21030
21240
  setIsOpen(false);
21031
21241
  }
21032
21242
  }, disabled: [
21243
+ ...(readOnly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21033
21244
  { before: parsedMin || new Date(1900, 0, 1) },
21034
21245
  { after: parsedMax || new Date(2100, 0, 1) }
21035
21246
  ], components: {
21036
21247
  Chevron: (props) => {
21248
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21037
21249
  if (props.orientation === 'left')
21038
- return React__default.createElement(Icon, { name: 'chevronleft' });
21039
- return React__default.createElement(Icon, { name: 'chevronright' });
21250
+ return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
21251
+ return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21040
21252
  }
21041
21253
  } })))),
21042
21254
  React__default.createElement("div", null,
@@ -21049,18 +21261,18 @@ const DateRangePicker = (_a) => {
21049
21261
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21050
21262
  hasError ?
21051
21263
  React__default.createElement(React__default.Fragment, null,
21052
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21264
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
21053
21265
  };
21054
21266
 
21055
21267
  const DateTimePicker = (_a) => {
21056
- var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
21268
+ var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick date & time', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
21057
21269
  const { setFieldValue, setFieldTouched } = useFormikContext();
21058
21270
  const [field, meta] = useField(alias);
21059
21271
  const hasError = Boolean(meta.touched && meta.error);
21060
21272
  const selectedDate = ensureDate(field.value);
21061
21273
  const parsedMin = ensureDate(minvalue);
21062
21274
  const parsedMax = ensureDate(maxvalue);
21063
- const inputId = `${alias}FormInput` || crypto.randomUUID();
21275
+ const inputId = `${alias}FormInput`;
21064
21276
  const errorId = `${alias}-error`;
21065
21277
  const [isOpen, setIsOpen] = useState(false);
21066
21278
  const containerRef = useRef(null);
@@ -21093,55 +21305,128 @@ const DateTimePicker = (_a) => {
21093
21305
  const baseDate = selectedDate || new Date();
21094
21306
  let newDate = baseDate;
21095
21307
  if (type === 'hours') {
21096
- // 0-23 limiters
21097
21308
  const h = Math.min(23, Math.max(0, numVal));
21098
21309
  newDate = setHours(baseDate, h);
21099
21310
  }
21100
21311
  else {
21101
- // 0-59 limiters
21102
21312
  const m = Math.min(59, Math.max(0, numVal));
21103
21313
  newDate = setMinutes(baseDate, m);
21104
21314
  }
21105
21315
  setFieldValue(alias, newDate);
21106
21316
  };
21107
- // Styles
21108
- const activeInputStyle = inputtype === 'datetimepicker-neumorphic'
21109
- ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'datetimepicker-outline'
21110
- ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
21111
- : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
21317
+ // --- STYLES ---
21318
+ const activeInputStyle = React__default.useMemo(() => {
21319
+ if (inputtype === 'datetimepicker-neumorphic') {
21320
+ return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
21321
+ }
21322
+ if (inputtype === 'datetimepicker-outline') {
21323
+ return {
21324
+ backgroundColor: 'transparent',
21325
+ boxShadow: 'none',
21326
+ border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
21327
+ borderRadius: 'var(--radius-2)'
21328
+ };
21329
+ }
21330
+ // Material
21331
+ return {
21332
+ backgroundColor: 'var(--color-surface)',
21333
+ boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
21334
+ border: '1px solid var(--gray-5)',
21335
+ borderRadius: 'var(--radius-2)'
21336
+ };
21337
+ }, [inputtype, hasError, neuVars]);
21338
+ const calendarContainerStyle = React__default.useMemo(() => {
21339
+ const base = { padding: 0, borderRadius: '12px', overflow: 'hidden' }; // Padding 0 to let Time section flush to bottom
21340
+ if (inputtype === 'datetimepicker-neumorphic') {
21341
+ return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
21342
+ }
21343
+ if (inputtype === 'datetimepicker-outline') {
21344
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
21345
+ }
21346
+ // Material
21347
+ return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
21348
+ }, [inputtype, neuVars]);
21112
21349
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
21113
21350
  React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
21114
21351
  React__default.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
21115
21352
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
21116
- .rdp { --rdp-cell-size: 32px; margin: 0; }
21353
+ /* Reset & Layout */
21354
+ .rdp {
21355
+ --rdp-cell-size: 36px;
21356
+ --rdp-caption-font-size: 16px;
21357
+ margin: 0;
21358
+ padding: 16px; /* Padding moved to RDP so Time section is flush */
21359
+ font-family: var(--default-font-family, sans-serif);
21360
+ }
21117
21361
  .rdp-months { justify-content: center; }
21118
- .rdp-month { background: ${inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
21119
- .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
21120
- .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
21121
- .rdp-nav { display: flex; gap: 5px; }
21122
- .rdp-day { width: var(--rdp-cell-size); height: var(--rdp-cell-size); border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--gray-12); display: flex; align-items: center; justify-content: center; }
21123
- .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
21124
- .rdp-day_selected { background-color: var(--accent-9); color: white; font-weight: bold; }
21362
+ .rdp-month { background: transparent; }
21363
+
21364
+ /* Header */
21365
+ .rdp-caption {
21366
+ display: flex; align-items: center; justify-content: space-between;
21367
+ margin-bottom: 12px; padding: 0 4px;
21368
+ }
21369
+ .rdp-caption_label {
21370
+ font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3);
21371
+ text-transform: capitalize;
21372
+ }
21373
+ .rdp-nav { display: flex; gap: 8px; }
21374
+ .rdp-nav_button {
21375
+ color: var(--gray-11); border-radius: 6px; padding: 4px;
21376
+ transition: background 0.2s; background: transparent; border: none; cursor: pointer;
21377
+ display: flex; align-items: center; justify-content: center;
21378
+ }
21379
+ .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
21380
+
21381
+ /* Weekdays */
21382
+ .rdp-head_cell {
21383
+ font-size: 0.75rem; font-weight: 600; color: var(--gray-9);
21384
+ text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
21385
+ text-align: center;
21386
+ }
21387
+
21388
+ /* Cells */
21389
+ .rdp-cell { text-align: center; }
21390
+ .rdp-day {
21391
+ width: var(--rdp-cell-size); height: var(--rdp-cell-size);
21392
+ border-radius: 50%; border: 2px solid transparent;
21393
+ background: transparent; cursor: pointer; color: var(--gray-12);
21394
+ font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
21395
+ transition: all 0.15s ease; margin: 1px;
21396
+ }
21125
21397
 
21126
- .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
21127
- .neu-calendar .rdp-day:hover:not(.rdp-day_selected) { background-color: transparent; box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light); }
21128
- .neu-calendar .rdp-day_selected { background-color: var(--neu-bg); color: var(--neu-accent); box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); }
21398
+ .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
21399
+ .rdp-day_selected { background-color: var(--accent-9) !important; color: white !important; font-weight: 600; }
21400
+ .rdp-day_today { color: var(--accent-11); font-weight: 700; position: relative; }
21401
+ .rdp-day_today:not(.rdp-day_selected)::after {
21402
+ content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--accent-9);
21403
+ }
21404
+ .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
21129
21405
 
21130
21406
  /* Time Input Styling */
21131
21407
  .time-input {
21132
- text-align: center;
21133
- font-variant-numeric: tabular-nums;
21134
- width: 40px;
21135
- padding: 4px;
21136
- border-radius: 4px;
21137
- border: 1px solid var(--gray-6);
21138
- background: var(--color-surface);
21139
- }
21140
- .neu-calendar .time-input {
21141
- background: var(--neu-bg);
21142
- border: none;
21143
- box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
21408
+ text-align: center; font-variant-numeric: tabular-nums;
21409
+ width: 44px; padding: 4px; border-radius: 6px;
21410
+ border: 1px solid var(--gray-6); background: var(--color-surface);
21411
+ color: var(--gray-12); font-weight: 500;
21144
21412
  }
21413
+ .time-input:focus { outline: 2px solid var(--accent-9); border-color: transparent; }
21414
+
21415
+ /* Neumorphic Overrides */
21416
+ ${inputtype === 'datetimepicker-neumorphic' ? `
21417
+ .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
21418
+ box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
21419
+ background-color: transparent;
21420
+ }
21421
+ .neu-calendar .rdp-day_selected {
21422
+ box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
21423
+ color: var(--neu-accent) !important; background-color: var(--neu-bg) !important;
21424
+ }
21425
+ .neu-calendar .time-input {
21426
+ background: var(--neu-bg); border: none;
21427
+ box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
21428
+ }
21429
+ ` : ''}
21145
21430
  ` } }),
21146
21431
  React__default.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
21147
21432
  setIsOpen(open);
@@ -21149,28 +21434,39 @@ const DateTimePicker = (_a) => {
21149
21434
  setFieldTouched(alias, true);
21150
21435
  } },
21151
21436
  React__default.createElement(s$1, null,
21152
- React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
21437
+ React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
21153
21438
  React__default.createElement(c, null,
21154
21439
  React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
21155
- React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, value: selectedDate ? format$2(selectedDate, 'PPP p') : '', placeholder: placeholder, style: { backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%', cursor: 'pointer', color: 'inherit', fontFamily: 'inherit', fontSize: 'var(--font-size-2)' } }))),
21156
- React__default.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
21440
+ React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP p') : '', placeholder: placeholder, style: {
21441
+ backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%',
21442
+ cursor: readonly ? 'default' : 'pointer', color: 'inherit', fontFamily: 'inherit',
21443
+ fontSize: 'var(--font-size-2)', fontWeight: 500
21444
+ } }))),
21445
+ React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
21157
21446
  React__default.createElement("div", { className: inputtype === 'datetimepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
21158
- React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
21159
- Chevron: (props) => props.orientation === 'left' ? React__default.createElement(Icon, { name: 'chevronleft' }) : React__default.createElement(Icon, { name: 'chevronright' })
21447
+ React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [
21448
+ ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
21449
+ { before: parsedMin || new Date(1900, 0, 1) },
21450
+ { after: parsedMax || new Date(2100, 0, 1) }
21451
+ ], modifiers: { today: new Date() }, modifiersClassNames: { today: 'rdp-day_today' }, components: {
21452
+ Chevron: (props) => {
21453
+ const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
21454
+ if (props.orientation === 'left')
21455
+ return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
21456
+ return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
21457
+ }
21160
21458
  } }),
21161
21459
  React__default.createElement(o$2, { size: "4" }),
21162
21460
  React__default.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "center", style: {
21163
- backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)',
21164
- borderBottomLeftRadius: '8px',
21165
- borderBottomRightRadius: '8px',
21166
- boxShadow: inputtype === 'datetimepicker-neumorphic' ? '6px 6px 12px var(--neu-shadow-dark), -6px 6px 12px var(--neu-shadow-light)' : undefined
21461
+ backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'rgba(0,0,0,0.02)' : 'var(--gray-2)',
21462
+ borderTop: inputtype === 'datetimepicker-neumorphic' ? 'none' : '1px solid var(--gray-4)'
21167
21463
  } },
21168
21464
  React__default.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.7 } }),
21169
- React__default.createElement(p$d, { size: "2", weight: "bold" }, "Time:"),
21170
- React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "23", value: selectedDate ? format$2(selectedDate, 'HH') : '12', onChange: (e) => handleTimeChange('hours', e.target.value) }),
21171
- React__default.createElement(p$d, null, ":"),
21172
- React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) }),
21173
- React__default.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false) }, "Done"))))),
21465
+ React__default.createElement(p$5, { align: "center", gap: "1" },
21466
+ React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "23", disabled: readonly, value: selectedDate ? format$2(selectedDate, 'HH') : '12', onChange: (e) => handleTimeChange('hours', e.target.value) }),
21467
+ React__default.createElement(p$d, { weight: "bold", style: { paddingBottom: 2 } }, ":"),
21468
+ React__default.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", disabled: readonly, value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) })),
21469
+ React__default.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false), style: { marginLeft: 'auto' } }, "Done"))))),
21174
21470
  React__default.createElement("div", null,
21175
21471
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21176
21472
  "\u00A0",
@@ -21181,7 +21477,7 @@ const DateTimePicker = (_a) => {
21181
21477
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21182
21478
  hasError ?
21183
21479
  React__default.createElement(React__default.Fragment, null,
21184
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
21480
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
21185
21481
  };
21186
21482
 
21187
21483
  const Dropdown = (_a) => {
@@ -21209,7 +21505,6 @@ const Dropdown = (_a) => {
21209
21505
  window.open(inputUrl, '_blank', 'noopener,noreferrer');
21210
21506
  };
21211
21507
  // --- STYLES ---
21212
- // MATERIAL
21213
21508
  const materialTrigger = {
21214
21509
  backgroundColor: 'var(--color-surface)',
21215
21510
  border: 'none',
@@ -21272,21 +21567,25 @@ const Dropdown = (_a) => {
21272
21567
  cursor: pointer;
21273
21568
  }
21274
21569
  ` } })),
21275
- React__default.createElement(C$1, { name: alias, disabled: readonly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
21570
+ React__default.createElement(C$1, { name: alias, disabled: readonly, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
21276
21571
  setFieldValue(alias, val);
21277
21572
  setTimeout(() => setFieldTouched(alias, true), 0);
21573
+ if (props.onValueChange)
21574
+ props.onValueChange(val);
21278
21575
  }, onOpenChange: (isOpen) => {
21279
21576
  if (!isOpen) {
21280
21577
  setFieldTouched(alias, true);
21281
21578
  }
21282
21579
  } },
21283
- React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
21284
- React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle }, inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21285
- React__default.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21286
- React__default.createElement("a", { onClick: () => openLink(inputoption.optionurl || "#"), style: { textDecoration: 'none' } }, inputoption.text))
21287
- :
21288
- React__default.createElement(React__default.Fragment, null,
21289
- React__default.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
21580
+ React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
21581
+ React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
21582
+ React__default.createElement(v, { value: "", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
21583
+ React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
21584
+ inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
21585
+ React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
21586
+ React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
21587
+ :
21588
+ React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
21290
21589
  React__default.createElement("div", null,
21291
21590
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21292
21591
  "\u00A0",
@@ -21297,7 +21596,7 @@ const Dropdown = (_a) => {
21297
21596
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
21298
21597
  hasError ?
21299
21598
  React__default.createElement(React__default.Fragment, null,
21300
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null)))));
21599
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || "Required field")) : null)))));
21301
21600
  };
21302
21601
 
21303
21602
  const getFileIcon$1 = (type, name) => {
@@ -21586,6 +21885,7 @@ const FileMultiple = (_a) => {
21586
21885
  React__default.createElement(Icon, { name: 'close' })))));
21587
21886
  }))),
21588
21887
  React__default.createElement("div", null,
21888
+ React__default.createElement("br", null),
21589
21889
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
21590
21890
  "\u00A0",
21591
21891
  props.isHinted ?
@@ -28915,7 +29215,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
28915
29215
  React__default.createElement(i$9, { ratio: aspectRatio }, content)));
28916
29216
  };
28917
29217
 
28918
- const Input$1 = (_a) => {
29218
+ const Input$2 = (_a) => {
28919
29219
  var { alias, inputtype = "text", width, inputlabel, readonly = false, placeholder = '', className, size = "2", style, inputVariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputlabel", "readonly", "placeholder", "className", "size", "style", "inputVariant"]);
28920
29220
  const [inputField, meta] = useField(alias);
28921
29221
  const hasError = Boolean(meta.touched && meta.error);
@@ -28924,6 +29224,7 @@ const Input$1 = (_a) => {
28924
29224
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
28925
29225
  React__default.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readonly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
28926
29226
  React__default.createElement("div", null,
29227
+ React__default.createElement("br", null),
28927
29228
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28928
29229
  "\u00A0",
28929
29230
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -28948,6 +29249,7 @@ const PasswordInput = (_a) => {
28948
29249
  React__default.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
28949
29250
  React__default.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React__default.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React__default.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
28950
29251
  React__default.createElement("div", null,
29252
+ React__default.createElement("br", null),
28951
29253
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
28952
29254
  "\u00A0",
28953
29255
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -30741,7 +31043,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null)
30741
31043
  // format={value => ({ text: value, template: 'xxxxxxxx' })}/>
30742
31044
  //
30743
31045
 
30744
- function Input(_ref, ref) {
31046
+ function Input$1(_ref, ref) {
30745
31047
  var _ref$inputComponent = _ref.inputComponent,
30746
31048
  InputComponent = _ref$inputComponent === void 0 ? 'input' : _ref$inputComponent,
30747
31049
  parse = _ref.parse,
@@ -30769,8 +31071,8 @@ function Input(_ref, ref) {
30769
31071
  return /*#__PURE__*/React__default.createElement(InputComponent, inputProps);
30770
31072
  }
30771
31073
 
30772
- Input = /*#__PURE__*/React__default.forwardRef(Input);
30773
- Input.propTypes = {
31074
+ Input$1 = /*#__PURE__*/React__default.forwardRef(Input$1);
31075
+ Input$1.propTypes = {
30774
31076
  // Parses a single characher of `<input/>` text.
30775
31077
  parse: PropTypes.func.isRequired,
30776
31078
  // Formats `value` into `<input/>` text.
@@ -35495,7 +35797,7 @@ function createInput$2(defaultMetadata) {
35495
35797
  onKeyDown: onKeyDown,
35496
35798
  inputFormat: inputFormat
35497
35799
  });
35498
- return /*#__PURE__*/React__default.createElement(Input, _extends$3({}, rest, {
35800
+ return /*#__PURE__*/React__default.createElement(Input$1, _extends$3({}, rest, {
35499
35801
  ref: ref,
35500
35802
  parse: parsePhoneNumberCharacter_,
35501
35803
  format: format,
@@ -36223,7 +36525,7 @@ function call(func, _arguments) {
36223
36525
  return func.apply(this, args)
36224
36526
  }
36225
36527
 
36226
- var PhoneInputInput = createInput(metadata$1);
36528
+ var Input = createInput(metadata$1);
36227
36529
 
36228
36530
  function getCountries() {
36229
36531
  return call(getCountries$1, arguments)
@@ -36504,7 +36806,7 @@ const PhoneInput = (_a) => {
36504
36806
  const errorId = `${alias}-error`;
36505
36807
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
36506
36808
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
36507
- React__default.createElement(u, Object.assign({ size: size, variant: "surface", id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props, { name: alias }),
36809
+ React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props),
36508
36810
  React__default.createElement(c, { style: { padding: 0 } },
36509
36811
  React__default.createElement(C$1, { value: country, onValueChange: (value) => setCountry(value) },
36510
36812
  React__default.createElement(u$1, { variant: "ghost", style: {
@@ -36512,7 +36814,9 @@ const PhoneInput = (_a) => {
36512
36814
  padding: '0 8px 0 12px',
36513
36815
  gap: '6px',
36514
36816
  borderTopRightRadius: 0,
36515
- borderBottomRightRadius: 0
36817
+ borderBottomRightRadius: 0,
36818
+ backgroundColor: 'var(--gray-3)',
36819
+ borderRight: '1px solid var(--gray-alpha-5)'
36516
36820
  } },
36517
36821
  React__default.createElement(p$5, { align: "center", gap: "2" },
36518
36822
  React__default.createElement(FlagIcon, { country: country }),
@@ -36527,9 +36831,8 @@ const PhoneInput = (_a) => {
36527
36831
  React__default.createElement(p$d, { color: "gray", size: "1" },
36528
36832
  "(+",
36529
36833
  getCountryCallingCode(c),
36530
- ")"))))))),
36531
- React__default.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
36532
- React__default.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readonly, style: {
36834
+ ")")))))))),
36835
+ React__default.createElement(Input, { country: country, international: false, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
36533
36836
  flex: 1,
36534
36837
  border: 'none',
36535
36838
  outline: 'none',
@@ -36538,15 +36841,15 @@ const PhoneInput = (_a) => {
36538
36841
  paddingLeft: '12px',
36539
36842
  color: 'var(--gray-12)',
36540
36843
  fontFamily: 'var(--default-font-family)',
36541
- fontSize: 'var(--font-size-2)'
36844
+ fontSize: 'var(--font-size-2)',
36845
+ width: '100%'
36542
36846
  } })),
36543
36847
  React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
36544
36848
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
36545
- "\u00A0",
36546
36849
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available" },
36547
36850
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
36548
36851
  React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
36549
- hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
36852
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
36550
36853
  };
36551
36854
 
36552
36855
  /** Checks if value is string */
@@ -40338,16 +40641,27 @@ const parseUuidFormat = (input) => {
40338
40641
 
40339
40642
  const UUIDInput = (_a) => {
40340
40643
  var { alias, type, inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputVariant", "size", "className"]);
40341
- let activeFormat = format;
40342
- if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40343
- activeFormat = parseUuidFormat(type) || format;
40344
- }
40345
- const maskPattern = activeFormat.map(len => '*'.repeat(len)).join(delimiter);
40346
40644
  const { setFieldValue, setFieldTouched } = useFormikContext();
40347
40645
  const [field, meta] = useField(alias);
40348
40646
  const hasError = Boolean(meta.touched && meta.error);
40349
40647
  const [copied, setCopied] = useState(false);
40350
40648
  const errorId = `${alias}-error`;
40649
+ const { maskPattern, definitions } = useMemo(() => {
40650
+ let activeFormat = format;
40651
+ if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
40652
+ const parsed = parseUuidFormat(type);
40653
+ if (parsed)
40654
+ activeFormat = parsed;
40655
+ }
40656
+ const maskChar = '#';
40657
+ const pattern = activeFormat.map(len => maskChar.repeat(len)).join(delimiter);
40658
+ return {
40659
+ maskPattern: pattern,
40660
+ definitions: {
40661
+ '#': /[0-9a-fA-F]/
40662
+ }
40663
+ };
40664
+ }, [format, type, delimiter]);
40351
40665
  const handleCopy = () => {
40352
40666
  navigator.clipboard.writeText(field.value || '');
40353
40667
  setCopied(true);
@@ -40357,7 +40671,7 @@ const UUIDInput = (_a) => {
40357
40671
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
40358
40672
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
40359
40673
  React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
40360
- React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
40674
+ React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, definitions: definitions, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
40361
40675
  flex: 1,
40362
40676
  border: 'none',
40363
40677
  outline: 'none',
@@ -40369,7 +40683,7 @@ const UUIDInput = (_a) => {
40369
40683
  fontSize: 'var(--font-size-2)',
40370
40684
  textTransform: 'uppercase',
40371
40685
  width: '100%'
40372
- }, autoComplete: "off" }),
40686
+ }, autoComplete: "off", spellCheck: false }),
40373
40687
  React__default.createElement(c, null,
40374
40688
  React__default.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
40375
40689
  React__default.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React__default.createElement(CheckIcon, null) : React__default.createElement(CopyIcon, null))))),
@@ -40379,7 +40693,7 @@ const UUIDInput = (_a) => {
40379
40693
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
40380
40694
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
40381
40695
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
40382
- hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
40696
+ hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
40383
40697
  };
40384
40698
 
40385
40699
  var FaCcVisa = {};
@@ -41932,13 +42246,22 @@ const CURRENCIES = {
41932
42246
  };
41933
42247
 
41934
42248
  const CurrencyInput = (_a) => {
41935
- var { alias, inputtype = "currency", inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
42249
+ var { alias, inputtype = "currency", inputlabel, width, defaultValue = "USD", placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
41936
42250
  const { setFieldValue, setFieldTouched } = useFormikContext();
41937
42251
  const [amountField, amountMeta] = useField(alias);
41938
- const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
41939
- const [currencyField] = useField(currencyFieldName);
42252
+ const currencyAlias = `${alias}Currency`;
42253
+ const [currencyField, , currencyHelpers] = useField(currencyAlias);
42254
+ useEffect(() => {
42255
+ if (inputtype !== "currency" && CURRENCIES[inputtype]) {
42256
+ currencyHelpers.setValue(inputtype);
42257
+ }
42258
+ else if (!currencyField.value) {
42259
+ currencyHelpers.setValue(defaultValue);
42260
+ }
42261
+ }, [inputtype, defaultValue]);
41940
42262
  const hasError = Boolean(amountMeta.touched && amountMeta.error);
41941
- const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
42263
+ const currentCode = currencyField.value || "USD";
42264
+ const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
41942
42265
  const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
41943
42266
  const isOutline = inputVariant === 'input-outline';
41944
42267
  const errorId = `${alias}-error`;
@@ -41950,7 +42273,7 @@ const CurrencyInput = (_a) => {
41950
42273
  backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
41951
42274
  cursor: 'text'
41952
42275
  } },
41953
- React__default.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyFieldName, val) },
42276
+ React__default.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readOnly || inputtype !== "currency" },
41954
42277
  React__default.createElement(u$1, { variant: "ghost", style: {
41955
42278
  height: '100%',
41956
42279
  padding: '0 8px 0 12px',
@@ -41972,11 +42295,16 @@ const CurrencyInput = (_a) => {
41972
42295
  c.symbol,
41973
42296
  ")"))))))),
41974
42297
  React__default.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
41975
- React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly,
41976
- // @ts-expect-error: known library type definition gap
41977
- signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'],
41978
- // Bind to Amount Field
41979
- value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0.00', style: {
42298
+ React__default.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
42299
+ mask: Number,
42300
+ scale: activeCurrency.scale,
42301
+ signed: false,
42302
+ thousandsSeparator: ",",
42303
+ padFractionalZeros: true,
42304
+ normalizeZeros: true,
42305
+ radix: ".",
42306
+ mapToRadix: ['.'],
42307
+ }, { value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), readOnly: readOnly, placeholder: placeholder || '0.00', style: {
41980
42308
  flex: 1,
41981
42309
  border: 'none',
41982
42310
  outline: 'none',
@@ -41988,14 +42316,14 @@ const CurrencyInput = (_a) => {
41988
42316
  fontSize: 'var(--font-size-2)',
41989
42317
  textAlign: 'right',
41990
42318
  width: '100%'
41991
- }, inputMode: "decimal", autoComplete: "off" })),
42319
+ }, inputMode: "decimal", autoComplete: "off" }))),
41992
42320
  React__default.createElement("div", null,
41993
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42321
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
41994
42322
  "\u00A0",
41995
42323
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available" },
41996
42324
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
41997
42325
  React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
41998
- hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
42326
+ hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || amountMeta.error || `Required field`))))));
41999
42327
  };
42000
42328
 
42001
42329
  var FaChartLine = {};
@@ -42016,7 +42344,7 @@ function requireFaChartLine () {
42016
42344
  var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
42017
42345
 
42018
42346
  const StockInput = (_a) => {
42019
- var { alias, inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
42347
+ var { alias, inputlabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
42020
42348
  const { setFieldValue, setFieldTouched } = useFormikContext();
42021
42349
  const [priceField, meta] = useField(alias);
42022
42350
  const hasError = Boolean(meta.touched && meta.error);
@@ -42064,7 +42392,7 @@ const StockInput = (_a) => {
42064
42392
  fontFamily: 'var(--default-font-family)',
42065
42393
  }, inputMode: "decimal", autoComplete: "off" }))),
42066
42394
  React__default.createElement("div", null,
42067
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42395
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42068
42396
  "\u00A0",
42069
42397
  props.isHinted && (React__default.createElement(e, { content: props.hintText || "No hint available" },
42070
42398
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
@@ -42073,7 +42401,7 @@ const StockInput = (_a) => {
42073
42401
  };
42074
42402
 
42075
42403
  const RadioGroupInput = (_a) => {
42076
- var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
42404
+ var { inputtype = 'radio-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
42077
42405
  const { setFieldValue, setFieldTouched } = useFormikContext();
42078
42406
  const [field, meta] = useField(alias);
42079
42407
  const hasError = Boolean(meta.touched && meta.error);
@@ -42142,19 +42470,20 @@ const RadioGroupInput = (_a) => {
42142
42470
  React__default.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
42143
42471
  }))),
42144
42472
  React__default.createElement("div", null,
42145
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42146
- hasError ?
42147
- React__default.createElement(React__default.Fragment, null,
42148
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42473
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42474
+ "\u00A0",
42149
42475
  props.isHinted ?
42150
42476
  React__default.createElement(React__default.Fragment, null,
42151
42477
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42152
42478
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42153
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42479
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42480
+ hasError ?
42481
+ React__default.createElement(React__default.Fragment, null,
42482
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42154
42483
  };
42155
42484
 
42156
42485
  const OptionSelect = (_a) => {
42157
- var { inputtype = 'select-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
42486
+ var { inputtype = 'select-outline', alias, readOnly, width, inputlabel, placeholder, style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "className"]);
42158
42487
  const triggerRef = useRef(null);
42159
42488
  const [neuVars, setNeuVars] = useState({});
42160
42489
  const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -42207,40 +42536,46 @@ const OptionSelect = (_a) => {
42207
42536
  return (React__default.createElement(Column, { span: width, newLine: props.newRow },
42208
42537
  React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
42209
42538
  inputtype === 'select-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42210
- .neu-select-trigger[data-state='open'] {
42211
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42212
- inset -6px -6px 12px var(--neu-shadow-light) !important;
42213
- }
42214
- .neu-select-item:hover {
42215
- background-color: rgba(0,0,0,0.05) !important;
42216
- cursor: pointer;
42217
- }
42218
- ` } })),
42539
+ .neu-select-trigger[data-state='open'] {
42540
+ box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42541
+ inset -6px -6px 12px var(--neu-shadow-light) !important;
42542
+ }
42543
+ .neu-select-item:hover {
42544
+ background-color: rgba(0,0,0,0.05) !important;
42545
+ cursor: pointer;
42546
+ }
42547
+ ` } })),
42219
42548
  React__default.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
42220
42549
  setFieldValue(alias, val);
42221
42550
  setTimeout(() => setFieldTouched(alias, true), 0);
42551
+ if (props.onValueChange)
42552
+ props.onValueChange(val);
42222
42553
  }, onOpenChange: (isOpen) => {
42223
42554
  if (!isOpen) {
42224
42555
  setFieldTouched(alias, true);
42225
42556
  }
42226
42557
  } },
42227
- React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
42228
- React__default.createElement(g, { position: "popper", sideOffset: 5 }, inputoptions.map((option) => (React__default.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
42558
+ React__default.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
42559
+ React__default.createElement(g, { position: "popper", sideOffset: 5 },
42560
+ React__default.createElement(v, { value: "", className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
42561
+ React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
42562
+ inputoptions.map((option) => (React__default.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
42229
42563
  React__default.createElement("div", null,
42230
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42231
- hasError ?
42232
- React__default.createElement(React__default.Fragment, null,
42233
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42564
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42565
+ "\u00A0",
42234
42566
  props.isHinted ?
42235
42567
  React__default.createElement(React__default.Fragment, null,
42236
42568
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42237
42569
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42238
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42570
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42571
+ hasError ?
42572
+ React__default.createElement(React__default.Fragment, null,
42573
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
42239
42574
  };
42240
42575
 
42241
42576
  const MultipleSelect = (_a) => {
42242
42577
  var _b;
42243
- var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
42578
+ var { inputtype = 'multiselect-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "className"]);
42244
42579
  const { setFieldValue, setFieldTouched } = useFormikContext();
42245
42580
  const [field, meta] = useField(alias);
42246
42581
  const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42325,19 +42660,20 @@ const MultipleSelect = (_a) => {
42325
42660
  React__default.createElement(p$d, { size: "2" }, inputoption.text)));
42326
42661
  })))))),
42327
42662
  React__default.createElement("div", null,
42328
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42329
- hasError ?
42330
- React__default.createElement(React__default.Fragment, null,
42331
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42663
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42664
+ "\u00A0",
42332
42665
  props.isHinted ?
42333
42666
  React__default.createElement(React__default.Fragment, null,
42334
42667
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42335
42668
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42336
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42669
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42670
+ hasError ?
42671
+ React__default.createElement(React__default.Fragment, null,
42672
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42337
42673
  };
42338
42674
 
42339
42675
  const SliderInput = (_a) => {
42340
- var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
42676
+ var { inputtype = 'slider-outline', alias, readOnly, width, inputlabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
42341
42677
  const { setFieldValue, setFieldTouched } = useFormikContext();
42342
42678
  const [field, meta] = useField(alias);
42343
42679
  const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
@@ -42424,15 +42760,16 @@ const SliderInput = (_a) => {
42424
42760
  setFieldTouched(alias, true);
42425
42761
  }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
42426
42762
  React__default.createElement("div", null,
42427
- React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
42428
- hasError ?
42429
- React__default.createElement(React__default.Fragment, null,
42430
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42763
+ React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42764
+ "\u00A0",
42431
42765
  props.isHinted ?
42432
42766
  React__default.createElement(React__default.Fragment, null,
42433
42767
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42434
42768
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42435
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42769
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42770
+ hasError ?
42771
+ React__default.createElement(React__default.Fragment, null,
42772
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42436
42773
  };
42437
42774
 
42438
42775
  const RangeSlider = (_a) => {
@@ -42504,39 +42841,40 @@ const RangeSlider = (_a) => {
42504
42841
  }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
42505
42842
  React__default.createElement("div", null,
42506
42843
  React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
42507
- hasError ?
42508
- React__default.createElement(React__default.Fragment, null,
42509
- React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
42844
+ "\u00A0",
42510
42845
  props.isHinted ?
42511
42846
  React__default.createElement(React__default.Fragment, null,
42512
42847
  React__default.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
42513
42848
  React__default.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
42514
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
42849
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
42850
+ hasError ?
42851
+ React__default.createElement(React__default.Fragment, null,
42852
+ React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
42515
42853
  };
42516
42854
 
42517
42855
  const Toggle = (_a) => {
42518
- var { inputtype = 'toggle-outline', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
42856
+ var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "icon"]);
42519
42857
  const { setFieldValue, setFieldTouched } = useFormikContext();
42520
42858
  const [field, meta] = useField(alias);
42521
42859
  const hasError = Boolean(meta.touched && meta.error);
42522
- const buttonRef = useRef(null);
42523
- const [neumorphicVars, setNeumorphicVars] = useState({});
42524
- const errorId = `${alias}-error`;
42860
+ const containerRef = useRef(null);
42861
+ const [neuVars, setNeuVars] = useState({
42862
+ '--neu-bg': '#ecf0f3',
42863
+ '--neu-shadow-light': '#ffffff',
42864
+ '--neu-shadow-dark': '#d1d9e6'
42865
+ });
42525
42866
  useEffect(() => {
42526
- if (inputtype === 'toggle-neumorphic' && buttonRef.current) {
42527
- const parentBg = getNearestParentBackground(buttonRef.current.parentElement);
42528
- const shadowDark = adjustColor(parentBg, -30);
42529
- const shadowLight = adjustColor(parentBg, 30);
42530
- setNeumorphicVars({
42531
- '--neu-bg': parentBg,
42532
- '--neu-shadow-dark': shadowDark,
42533
- '--neu-shadow-light': shadowLight,
42534
- '--neu-text': 'var(--gray-12)',
42535
- '--neu-active-color': 'var(--accent-9)',
42536
- });
42867
+ if (inputtype === 'toggle-neumorphic' && containerRef.current) {
42868
+ const parentBg = getNearestParentBackground(containerRef.current.parentElement);
42869
+ if (parentBg && parentBg !== 'transparent') {
42870
+ setNeuVars({
42871
+ '--neu-bg': parentBg,
42872
+ '--neu-shadow-dark': adjustColor(parentBg, -20),
42873
+ '--neu-shadow-light': adjustColor(parentBg, 20),
42874
+ });
42875
+ }
42537
42876
  }
42538
42877
  }, [inputtype]);
42539
- // --- STYLES ---
42540
42878
  const materialStyle = {
42541
42879
  textTransform: 'uppercase',
42542
42880
  letterSpacing: '0.05em',
@@ -42549,86 +42887,108 @@ const Toggle = (_a) => {
42549
42887
  background: 'transparent',
42550
42888
  transition: 'all 0.1s ease',
42551
42889
  };
42552
- const neumorphicStyle = {
42553
- backgroundColor: 'var(--neu-bg)',
42554
- color: 'var(--neu-text)',
42555
- border: 'none',
42556
- borderRadius: '12px',
42557
- fontWeight: 600,
42558
- transition: 'all 0.2s ease-in-out',
42890
+ const handleToggle = (val) => {
42891
+ if (!readOnly) {
42892
+ setFieldValue(alias, val);
42893
+ setFieldTouched(alias, true);
42894
+ }
42559
42895
  };
42560
42896
  return (React__default.createElement(Column, { span: width, newLine: newRow },
42561
- React__default.createElement(Root$1, { pressed: field.value, onPressedChange: (val) => {
42562
- if (!readOnly) {
42563
- setFieldValue(alias, val);
42564
- setFieldTouched(alias, true);
42565
- }
42566
- }, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42567
- React__default.createElement(o$a, Object.assign({ disabled: readOnly, ref: buttonRef }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), (inputtype === 'toggle-neumorphic' ? Object.assign(Object.assign({}, neumorphicStyle), neumorphicVars) : {})), type: "button" }),
42897
+ React__default.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
42898
+ inputtype === 'toggle-neumorphic' ? (React__default.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
42568
42899
  React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42569
- /* --- MATERIAL --- */
42570
- .design-toggle.toggle-material[data-state='on'] {
42571
- background-color: var(--accent-9);
42572
- color: white;
42573
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42574
- }
42575
- .design-toggle.toggle-material[data-state='off'] {
42576
- background-color: var(--gray-3);
42577
- color: var(--gray-11);
42578
- }
42579
-
42580
- /* --- OUTLINE --- */
42581
- .design-toggle.toggle-outline[data-state='on'] {
42582
- border: 2px solid var(--accent-9);
42583
- color: var(--accent-9);
42584
- background-color: var(--accent-2);
42585
- }
42586
- .design-toggle.toggle-outline[data-state='off'] {
42587
- border: 1px solid var(--gray-7);
42588
- color: var(--gray-11);
42589
- }
42900
+ .neu-toggle-wrapper {
42901
+ isolation: isolate;
42902
+ position: relative;
42903
+ height: 30px;
42904
+ width: 60px;
42905
+ border-radius: 15px;
42906
+ overflow: hidden;
42907
+ cursor: pointer;
42908
+ background: var(--neu-bg);
42909
+ box-shadow:
42910
+ -8px -4px 8px 0px var(--neu-shadow-light),
42911
+ 8px 4px 12px 0px var(--neu-shadow-dark),
42912
+ 4px 4px 4px 0px var(--neu-shadow-dark) inset,
42913
+ -4px -4px 4px 0px var(--neu-shadow-light) inset;
42914
+ }
42915
+
42916
+ /* The Input is hidden visually but keeps state for CSS selector */
42917
+ .neu-toggle-state {
42918
+ display: none;
42919
+ }
42590
42920
 
42591
- /* --- NEUMORPHIC --- */
42592
- .design-toggle.toggle-neumorphic[data-state='off'] {
42593
- box-shadow: 6px 6px 12px var(--neu-shadow-dark),
42594
- -6px -6px 12px var(--neu-shadow-light);
42595
- }
42596
- .design-toggle.toggle-neumorphic[data-state='on'] {
42597
- box-shadow: inset 6px 6px 12px var(--neu-shadow-dark),
42598
- inset -6px -6px 12px var(--neu-shadow-light);
42599
- color: var(--neu-active-color);
42600
- }
42601
- .design-toggle.toggle-neumorphic:hover {
42602
- transform: translateY(-1px);
42603
- }
42604
- ` } }),
42605
- children)),
42606
- React__default.createElement("div", null,
42607
- inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42608
- isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
42609
- React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42610
- React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42611
- hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`)))));
42612
- };
42921
+ .neu-indicator {
42922
+ height: 100%;
42923
+ width: 200%;
42924
+ background: var(--neu-bg);
42925
+ border-radius: 15px;
42926
+ transform: translate3d(-75%, 0, 0);
42927
+ transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
42928
+ box-shadow:
42929
+ -8px -4px 8px 0px var(--neu-shadow-light),
42930
+ 8px 4px 12px 0px var(--neu-shadow-dark);
42931
+ }
42613
42932
 
42614
- const Row = ({ children, className, gap = "4" }) => {
42615
- return (React__default.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
42933
+ /* Sibling selector triggers animation when checked */
42934
+ .neu-toggle-state:checked ~ .neu-indicator {
42935
+ transform: translate3d(25%, 0, 0);
42936
+ }
42937
+ ` } }),
42938
+ React__default.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
42939
+ React__default.createElement("div", { className: "neu-indicator" }),
42940
+ React__default.createElement(Icon, { name: icon }))) : (React__default.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
42941
+ React__default.createElement(o$a, Object.assign({ disabled: readOnly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
42942
+ React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
42943
+ /* Material States */
42944
+ .design-toggle.toggle-material[data-state='on'] {
42945
+ background-color: var(--accent-9);
42946
+ color: white;
42947
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
42948
+ }
42949
+ .design-toggle.toggle-material[data-state='off'] {
42950
+ background-color: var(--gray-3);
42951
+ color: var(--gray-11);
42952
+ }
42953
+ /* Outline States */
42954
+ .design-toggle.toggle-outline[data-state='on'] {
42955
+ border: 2px solid var(--accent-9);
42956
+ color: var(--accent-9);
42957
+ background-color: var(--accent-2);
42958
+ }
42959
+ .design-toggle.toggle-outline[data-state='off'] {
42960
+ border: 1px solid var(--gray-7);
42961
+ color: var(--gray-11);
42962
+ }
42963
+ ` } }),
42964
+ children))),
42965
+ React__default.createElement("div", null,
42966
+ inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
42967
+ "\u00A0",
42968
+ isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
42969
+ React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
42970
+ React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
42971
+ hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`))))));
42616
42972
  };
42617
42973
 
42618
- const SectionTitle = (_a) => {
42619
- var { title, iconname, textColor = "#FFFFFF", backgroundColor = "#000000", fontFamily } = _a, props = __rest$1(_a, ["title", "iconname", "textColor", "backgroundColor", "fontFamily"]);
42620
- return (React__default.createElement(React__default.Fragment, null,
42621
- React__default.createElement(Row, null,
42622
- React__default.createElement(Column, { span: 12, newLine: true },
42623
- React__default.createElement("div", { id: "", style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
42624
- React__default.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' },
42625
- React__default.createElement(Icon, { name: iconname || "input" }),
42626
- "\u00A0",
42627
- title),
42628
- props.subTitle ?
42629
- React__default.createElement(React__default.Fragment, null,
42630
- React__default.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' }, props.subTitle))
42631
- : null)))));
42974
+ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className }) => {
42975
+ return (React__default.createElement(Column, { span: width, newLine: newRow },
42976
+ React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
42977
+ width: '100%',
42978
+ marginBottom: 'var(--space-2)',
42979
+ textAlign: align
42980
+ } },
42981
+ React__default.createElement(r$g, { size: size, weight: "bold", style: {
42982
+ width: '100%',
42983
+ color: 'var(--gray-12)',
42984
+ lineHeight: '1.2'
42985
+ } }, title),
42986
+ subtitle && (React__default.createElement(p$d, { size: subsize, color: "gray", style: { maxWidth: '80%', margin: align === 'center' ? '0 auto' : undefined } }, subtitle)),
42987
+ withSeparator && (React__default.createElement(o$2, { size: "4", style: {
42988
+ width: '100%',
42989
+ marginTop: '4px',
42990
+ backgroundColor: 'var(--gray-6)'
42991
+ } })))));
42632
42992
  };
42633
42993
 
42634
42994
  const Container = (_a) => {
@@ -42639,6 +42999,10 @@ const Container = (_a) => {
42639
42999
  return (React__default.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
42640
43000
  };
42641
43001
 
43002
+ const Row = ({ children, className, gap = "4" }) => {
43003
+ return (React__default.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
43004
+ };
43005
+
42642
43006
  /** A special constant with type `never` */
42643
43007
  function $constructor(name, initializer, params) {
42644
43008
  function init(inst, def) {
@@ -47138,4 +47502,4 @@ const xFormSchema = object({
47138
47502
  model: array(SectionSchema),
47139
47503
  });
47140
47504
 
47141
- export { AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$1 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, vectorSigma, xFormSchema };
47505
+ export { AvatarInput, ButtonInput, CURRENCIES, CheckboxGroupInput, Column, ConditionalTrigger, Container, CreditCardInput, CurrencyInput, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File$1 as File, FileMultiple, FlagIcon, Icon, ImageOutput, Input$2 as Input, MultipleSelect, OptionSelect, PasswordInput, PhoneInput, RadioGroupInput, RangeSlider, Row, SectionTitle, SliderInput, StockInput, R as Theme, N as ThemePanel, Toggle, UUIDInput, parseUuidFormat, primeMatrix, vectorSigma, xFormSchema };