@ornikar/kitt-universal 4.5.2 → 5.0.0

package/dist/index-node-14.17.cjs.css

@@ -1,2 +1,2 @@
-@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
-.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}
+@media (hover:none) and (pointer:coarse){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:focus,.kitt-focus .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill],.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{background-color:var(--p1nlccvg-4);}
+.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:hover,.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:active,.kitt-hover .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:hover,.kitt-u_TypographyLinkWebWrapper_tcwz3nt > *:active,.kitt-hover .kitt-u_TypographyLinkWebWrapper_tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

package/dist/index-node-14.17.cjs.js

@@ -1522,7 +1522,7 @@ function Checkbox({
   onChange,
   onBlur,
   onFocus,
-  value,
+  checked,
   hitSlop = 40,
   id,
   children
@@ -1531,19 +1531,19 @@ function Checkbox({
   return /*#__PURE__*/jsxRuntime.jsxs(CheckboxAndLabelPressableWrapper, {
     accessibilityRole: "checkbox",
     accessibilityState: {
-      checked: value
+      checked
     },
     hitSlop: hitSlop,
     onPress: e => {
       if (onFocus) onFocus(e);
-      if (onChange) onChange(e);
+      if (onChange) onChange(!checked, e);
       if (onBlur) onBlur(e);
     },
     children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxContainer, {
-      $isChecked: value,
+      $isChecked: checked,
       $hasLabel: !!children,
       testID: id,
-      children: value ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      children: checked ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
         align: "center",
         color: theme.kitt.forms.checkbox.markColor,
         size: theme.kitt.forms.checkbox.iconSize,
@@ -1624,6 +1624,84 @@ function DatePickerInputPart({
   });
 }
 
+function prefixWithZero(value) {
+  return `${value}`.padStart(2, '0');
+}
+
+const PartContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "DatePickerInputs__PartContainer",
+  componentId: "kitt-universal__sc-j9hin5-0"
+})(["margin-right:", ";", ";"], ({
+  theme,
+  $isLast
+}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
+  $isStretch
+}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
+const DatePickerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "DatePickerInputs__DatePickerPressable",
+  componentId: "kitt-universal__sc-j9hin5-1"
+})(["display:flex;flex-direction:row;", ";"], ({
+  $isStretch
+}) => {
+  if ($isStretch) {
+    return styled.css(["width:100%;"]);
+  }
+
+  return styled.css(["align-self:baseline;"]);
+});
+function DatePickerInputs({
+  state,
+  internalForceState,
+  isFocused,
+  disabled,
+  stretch,
+  id,
+  testID,
+  handleModalOpen,
+  currentValue,
+  placeholder
+}) {
+  const currentState = internalForceState || getInputUIState({
+    isFocused,
+    isDisabled: Boolean(disabled),
+    formState: state
+  });
+  const sharedPartProps = {
+    disabled,
+    $state: currentState
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
+    $isStretch: stretch,
+    nativeID: id,
+    disabled: disabled,
+    testID: testID,
+    onPress: handleModalOpen,
+    children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "day",
+        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
+        placeholder: placeholder?.day
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "month",
+        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
+        placeholder: placeholder?.month
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isLast: true,
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "year",
+        value: currentValue ? currentValue.getFullYear() : undefined,
+        placeholder: placeholder?.year
+      })
+    })]
+  });
+}
+
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
 const OverlayPressable = /*#__PURE__*/styled__default(reactNative.Pressable).withConfig({
   displayName: "Overlay__OverlayPressable",
@@ -1713,7 +1791,7 @@ function withTheme(WrappedComponent) {
 
 const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "PressableIconButtonWebWrapper",
-  class: "p1nlccvg",
+  class: "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
   vars: {
     "p1nlccvg-0": [({
       theme,
@@ -2154,47 +2232,16 @@ function ModalPlatformDateTimePicker({
   });
 }
 
-function prefixWithZero(value) {
-  return `${value}`.padStart(2, '0');
-}
-
-const PartContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "DatePicker__PartContainer",
-  componentId: "kitt-universal__sc-ebllsn-0"
-})(["margin-right:", ";", ";"], ({
-  theme,
-  $isLast
-}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
-  $isStretch
-}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
-const DatePickerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "DatePicker__DatePickerPressable",
-  componentId: "kitt-universal__sc-ebllsn-1"
-})(["display:flex;flex-direction:row;", ";"], ({
-  $isStretch
-}) => {
-  if ($isStretch) {
-    return styled.css(["width:100%;"]);
-  }
-
-  return styled.css(["align-self:baseline;"]);
-});
 function DatePicker({
   value,
-  id,
-  disabled,
-  placeholder,
-  state,
-  internalForceState,
-  testID,
-  stretch,
-  pickerDefaultDate,
   pickerUITestID,
   pickerUITitle,
   pickerUIValidateButtonLabel,
   onChange,
   onFocus,
-  onBlur
+  onBlur,
+  pickerDefaultDate,
+  ...props
 }) {
   const [isPickerUIVisible, setIsPickerUIVisible] = react.useState(false);
   const [isFocused, setIsFocused] = react.useState(false);
@@ -2206,70 +2253,29 @@ function DatePicker({
     setIsFocused(false);
   };
 
-  const handleChange = newDate => {
-    setCurrentValue(newDate);
-    onChange(newDate);
-    handleModalClose();
-  };
-
-  const currentState = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: Boolean(disabled),
-    formState: state
-  });
-  const sharedPickerProps = {
-    testID: pickerUITestID,
-    value: currentValue,
-    onChange: handleChange
-  };
-  const sharedPartProps = {
-    disabled,
-    $state: currentState,
-    defaultDate: pickerDefaultDate
-  };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
-      $isStretch: stretch,
-      nativeID: id,
-      disabled: disabled,
-      testID: testID,
-      onPress: () => {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
+      handleModalOpen: () => {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "day",
-          value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-          placeholder: placeholder?.day
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "month",
-          value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-          placeholder: placeholder?.month
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isLast: true,
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "year",
-          value: currentValue ? currentValue.getFullYear() : undefined,
-          placeholder: placeholder?.year
-        })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [reactNative.Platform.OS === 'android' && isPickerUIVisible ? /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, { ...sharedPickerProps
-      }) : null, reactNative.Platform.OS !== 'android' ? /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, { ...sharedPickerProps,
-        isVisible: isPickerUIVisible,
-        title: pickerUITitle,
-        validateButtonLabel: pickerUIValidateButtonLabel,
-        onClose: handleModalClose,
-        onChange: handleChange
-      }) : null]
+      currentValue: currentValue,
+      isFocused: isFocused,
+      ...props
+    }), /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, {
+      testID: pickerUITestID,
+      value: currentValue,
+      isVisible: isPickerUIVisible,
+      title: pickerUITitle,
+      validateButtonLabel: pickerUIValidateButtonLabel,
+      defaultDate: pickerDefaultDate,
+      onClose: handleModalClose,
+      onChange: newDate => {
+        setCurrentValue(newDate);
+        onChange(newDate);
+        handleModalClose();
+      }
     })]
   });
 }
@@ -3990,7 +3996,7 @@ function TypographyEmoji({
 
 const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react$1.styled("span")({
   name: "TypographyLinkWebWrapper",
-  class: "tcwz3nt",
+  class: "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
   vars: {
     "tcwz3nt-0": [({
       $hasNoUnderline